* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   Type stack: 'Benton Sans' → 'Public Sans' → San Francisco.
   - Benton Sans (Tableau's brand face) — the real licensed WOFFs from
     the TDS shared drive are self-hosted in fonts/. Weights available:
     Light 300 · Book 400 · Medium 500 · SemiDemi 600 (+ Book & SemiDemi
     italics). There is no Bold; 700 maps to SemiDemi, which suits the
     lighter-weight direction. This loads today and is the primary face.
   - Public Sans (free, OFL, Franklin-Gothic lineage) stays as a
     brand-adjacent fallback in case a Benton file is ever missing.
   - San Francisco (-apple-system) is the final fallback.
   ============================================================ */
@font-face {
  font-family: 'Benton Sans';
  src: url('fonts/BentonSans-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Benton Sans';
  src: url('fonts/BentonSans-Book.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Benton Sans';
  src: url('fonts/BentonSans-Book_Italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Benton Sans';
  src: url('fonts/BentonSans-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* SemiDemi covers both 600 and 700 (no Bold cut exists). */
@font-face {
  font-family: 'Benton Sans';
  src: url('fonts/BentonSans-SemiDemi.woff') format('woff');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Benton Sans';
  src: url('fonts/BentonSans-SemiDemi_Italic.woff') format('woff');
  font-weight: 600 700; font-style: italic; font-display: swap;
}
/* Public Sans — variable font, one file covers the whole 300–700 range. */
@font-face {
  font-family: 'Public Sans';
  src: url('fonts/PublicSans-VF.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  --teal-dark: #1d3557;
  --teal: #2b5f7f;
  --teal-light: #3d7a9c;
  --white: #ffffff;
  --gray-light: #f5f5f5;
  --gray: #e0e0e0;
  --gray-dark: #666;
  --text: #333;
  --accent: #4a90d9;
}

body {
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f0f0f0;
  height: 100vh;
  overflow: hidden;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
}

/* Mac Menu Bar */
.mac-menu-bar {
  height: 24px;
  /* Translucent "vibrancy" like the real macOS menu bar — a light frosted
     panel that lets what's behind it show through slightly, rather than a flat
     opaque fill. blur + saturate is the macOS recipe. */
  background: rgba(246, 246, 246, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 2px;
  flex-shrink: 0;
  /* backdrop-filter makes this a new stacking context, which would otherwise
     trap the dropdowns' z-index INSIDE the bar and let later siblings (title
     bar, workspace, panes) paint over them. Lift the whole bar above the app
     chrome (tops out at .wf-overlay z 420) but below modals/tooltips (999+). */
  position: relative;
  z-index: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /* This strip mimics the macOS system menu bar, so it must use the Mac
     SYSTEM font — not Tableau's Benton Sans brand face. Override the global
     Benton stack here; children inherit. Applies to every variant. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Belt-and-suspenders: keep the override on the items themselves in case a
   later, more-specific rule (e.g. a Blue Sky lightening pass) sets Benton. */
.mac-menu-bar .menu-item,
.mac-menu-bar .menu-bar-right {
  font-family: inherit;
}

.menu-item {
  font-size: 13px;
  color: #1d1d1f;
  padding: 2px 9px;
  border-radius: 4px;
  cursor: default;
}

.menu-item:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* An open top-level menu keeps the macOS accent-blue highlight so it's clear
   which menu is showing its dropdown. */
.menu-dropdown-trigger:has(.addons-dropdown.open),
.menu-item.menu-open {
  background: #0a6cff;
  color: #fff;
}

.menu-item.bold {
  font-weight: 600;
}

.menu-item.apple-menu {
  font-size: 15px;
}

.menu-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 4px;
  color: #1d1d1f;
}

.menu-status-icon {
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.menu-wifi {
  cursor: pointer;
}

/* Slash hidden until offline */
.wifi-slash {
  display: none;
}

body.offline-mode .menu-wifi {
  opacity: 0.45;
}

body.offline-mode .wifi-slash {
  display: block;
}

/* ── Offline mode: hide Insights / Recents / Favorites + the Tableau Agent
   field across all three start screens. Templates + Recommended survive. ── */

/* Classic — Agent hero field + all signed-in sections (Insights/Recents/Favorites)
   + the Discover sidebar. Recommended and Quickstart/Templates are NOT
   .signed-in-content, so they stay. */
body.offline-mode #startScreen #chatHero,
body.offline-mode #startScreen .content-section.signed-in-content,
body.offline-mode #startScreen .classic-discover {
  display: none !important;
}

/* Drive — search/agent field, the standalone Insights/Recents/Favorites panels,
   the inline Insights block inside Home, and their sidebar nav entries. */
body.offline-mode #startScreenDrive .drive-search,
body.offline-mode #startScreenDrive [data-drive-section="recents"],
body.offline-mode #startScreenDrive [data-drive-section="insights"],
body.offline-mode #startScreenDrive [data-drive-section="favorites"],
body.offline-mode #startScreenDrive .drive-home-insights,
body.offline-mode #startScreenDrive [data-drive-section="discover"],
body.offline-mode #startScreenDrive [data-drive-section="conversations"],
body.offline-mode #startScreenDrive .drive-nav-item[data-section="recents"],
body.offline-mode #startScreenDrive .drive-nav-item[data-section="insights"],
body.offline-mode #startScreenDrive .drive-nav-item[data-section="favorites"],
body.offline-mode #startScreenDrive .drive-nav-item[data-section="discover"],
body.offline-mode #startScreenDrive .drive-nav-item[data-section="conversations"] {
  display: none !important;
}

/* Bento — clean modifier classes for the agent tile + the three signed-in tiles. */
body.offline-mode #startScreenBento .bento-tile-agent,
body.offline-mode #startScreenBento .bento-tile-recents,
body.offline-mode #startScreenBento .bento-tile-insights,
body.offline-mode #startScreenBento .bento-tile-favorites,
body.offline-mode #startScreenBento .bento-tile-discover {
  display: none !important;
}

/* Bento reflow: tiles are placed with explicit grid-column/grid-row, so hiding
   most of them leaves holes. Offline only Templates + Recommended remain — drop
   the fixed grid tracks/placements (across every responsive variant) and let the
   two survivors auto-flow into equal columns that collapse to one when narrow. */
body.offline-mode #startScreenBento .bento-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-template-rows: auto;
  align-content: start;
}
body.offline-mode #startScreenBento .bento-tile-quickstart,
body.offline-mode #startScreenBento .bento-tile-recommended {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Offline + signed out: the Tableau 101 (welcome) module leads, full-width at
   the top, with Templates + Recommended flowing beneath it. The id selector +
   !important override its signed-out placement (grid-column:1/4; grid-row:2). */
body.offline-mode.signed-out #startScreenBento .bento-tile-welcome {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: -1;
}

.menu-clock {
  font-size: 13px;
  color: #1d1d1f;
  font-variant-numeric: tabular-nums;
  cursor: default;
  white-space: nowrap;
}

.addons-menu {
  position: relative;
}

/* Help menu mirrors Extensions: same click-to-open dropdown + .addons-dropdown
   chrome. Its rows document the hidden Marks-card demo triggers, formatted as
   "trigger: behavior" — a bold mark name followed by what clicking it fires. */
.help-menu {
  position: relative;
}
.help-item {
  color: #555;
  white-space: nowrap;
  cursor: pointer; /* rows are live launchers — forward to the Marks-card buttons */
}
.help-mark {
  min-width: 52px;
  font-weight: 600;
  color: #333;
}
.help-mark::after {
  content: ':';
  font-weight: 600;
}
.addons-dropdown-item.help-item:hover,
.addons-dropdown-item.help-item:hover .help-mark {
  color: #fff; /* keep the whole row legible on the blue hover fill */
}

.addons-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /* Frosted "vibrancy" menu panel like macOS — a translucent light material
     with a background blur, a fine 1px light border, and the layered menu
     shadow (a soft ambient drop plus a tight contact shadow + hairline ring). */
  background: rgba(250, 250, 250, 0.93);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18),
              0 1px 4px rgba(0, 0, 0, 0.1),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
  min-width: 200px;
  /* macOS menus inset their rows slightly from the panel edge so the rounded
     highlight has breathing room. */
  padding: 5px 6px;
  z-index: 1000;
}

.addons-dropdown.open {
  display: block;
}

.addons-dropdown-item {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 13px;
  color: #1d1d1f;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Rounded, inset accent-blue highlight — the macOS menu-row look — rather than
   a full-width bar. The panel's side padding gives the rounded ends room. */
.addons-dropdown-item:hover {
  background: #0a6cff;
  color: #fff;
}

.addons-dropdown-separator {
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin: 5px 8px;
}

.has-flyout {
  position: relative;
}

.flyout-arrow {
  float: right;
  font-size: 10px;
  opacity: 0.6;
}

.addons-flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  /* Same frosted material as the parent menu panel. */
  background: rgba(250, 250, 250, 0.93);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18),
              0 1px 4px rgba(0, 0, 0, 0.1),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
  min-width: 160px;
  padding: 5px 6px;
  z-index: 1001;
}

.has-flyout:hover .addons-flyout {
  display: block;
}

.addons-flyout-item {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 13px;
  color: #1d1d1f;
  cursor: pointer;
  white-space: nowrap;
}

.addons-flyout-item:hover {
  background: #0a6cff;
  color: #fff;
}

.addons-dropdown-header {
  padding: 6px 10px 3px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ---- Redesigned menu-bar dropdowns (File / Data / Edit / … taxonomy) ----
   The top-level labels are JS-built .menu-dropdown-trigger spans; each holds a
   .addons-dropdown (reusing all the chrome above). Extensions + Help carry the
   same trigger class so one controller drives click-to-open + hover-to-switch
   across every menu. */
.menu-dropdown-trigger { position: relative; }
/* Menu rows shouldn't wrap — taxonomy labels can be long ("Duplicate as
   Crosstab", "Start Tableau Bridge Client"). */
.menu-taxonomy-dropdown .addons-dropdown-item { white-space: nowrap; }
/* Right-side menus (Layout…Window) + Help open their submenu flyouts leftward
   so a long submenu doesn't run off the right edge of the window. */
.menu-flyout-left .addons-flyout { left: auto; right: 100%; }

/* On any START SCREEN (no authoring workspace active) the menu bar is trimmed
   to just Tableau · File · Data · Server · Help — matching real Tableau, whose
   start page shows a reduced menu set. The authoring-only menus hide until a
   sheet/dashboard is open. Keyed off #workspace.active so it reacts on load and
   on every start↔authoring transition with no JS. (Apple logo = OS chrome and
   Change Log = the prototype's own tool both stay.) */
body:not(:has(#workspace.active)) .menu-dropdown-trigger[data-menu="Edit"],
body:not(:has(#workspace.active)) .menu-dropdown-trigger[data-menu="Format"],
body:not(:has(#workspace.active)) .menu-dropdown-trigger[data-menu="Layout"],
body:not(:has(#workspace.active)) .menu-dropdown-trigger[data-menu="Analyze"],
body:not(:has(#workspace.active)) .menu-dropdown-trigger[data-menu="Visualize"],
body:not(:has(#workspace.active)) .menu-dropdown-trigger[data-menu="Window"],
body:not(:has(#workspace.active)) .menu-dropdown-trigger[data-menu="Share"],
body:not(:has(#workspace.active)) #addonsMenu {
  display: none;
}

.addon-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.addon-pink {
  color: #ff4081;
}

.addon-check {
  margin-left: auto;
  color: #333;
  font-size: 14px;
}

.addons-dropdown-item:hover .addon-check {
  color: #fff;
}

.addon-active::after {
  content: '✓';
  margin-left: auto;
  font-size: 14px;
}

.addon-toolbar-btn {
  font-size: 14px;
}

.addon-pane {
  background: #fff;
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-top: 1px solid #d0d0d0;
}

.addon-pane.active {
  display: flex;
}

.addon-pane .sidebar-header {
  padding: 4px 12px;
  border-bottom: 1px solid #d0d0d0;
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
}

.addon-pane .sidebar-header h3 {
  font-size: 13px;
  font-weight: 400;
}

.addon-pane-body {
  flex: 1;
  overflow-y: auto;
}

.workspace-chat .sidebar-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.workspace-chat.collapsed .sidebar-body,
.addon-pane.collapsed .addon-pane-body {
  display: none !important;
}

.workspace-chat.collapsed,
.addon-pane.collapsed {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent;
}

.pane-drop-placeholder {
  background: #f0f0f0;
  border: 1px dashed #ccc;
  border-radius: 4px;
  flex-shrink: 0;
}

.pane-resize-handle {
  height: 4px;
  background: transparent;
  cursor: row-resize;
  flex-shrink: 0;
  position: relative;
}

.pane-resize-handle:hover,
.pane-resize-handle.dragging {
  background: #d0d0d0;
}

.pane-collapse-btn {
  font-size: 16px;
  transition: transform 0.2s;
}

.collapsed .pane-collapse-btn {
  transform: rotate(-90deg);
}

/* ============================================================
   Pop-out floating windows
   ------------------------------------------------------------
   The pop-out icon in a pane header detaches that pane from the
   right-side dock into a free-floating window over the canvas:
   drag by the header, resize from the bottom-right grip, click to
   bring to front. The pane is moved to <body> so it survives the
   dock (.sidebar-stack) hiding when nothing's left docked. Works
   for the Tableau Agent pane and every extension pane alike.
   ============================================================ */
.pane-floating {
  position: fixed;
  z-index: 300;                 /* over canvas + dock (20); under modals (1000) */
  border: 1px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: none;                   /* cancel the docked panes' flex:1 stretch */
  min-height: 0;
}

/* The chat pane's docked layout carries a 4px white gutter + header
   negative margins (--chat-inset). Zero it out while floating so the
   window frame is flush to the rounded border. */
.pane-floating.workspace-chat { --chat-inset: 0; padding: 0; }

.pane-floating .sidebar-header {
  cursor: grab;
  margin-left: 0;
  margin-right: 0;
  border-top: none;
  border-radius: 8px 8px 0 0;
}
.pane-floating.dragging,
.pane-floating.resizing { user-select: none; }
.pane-floating.dragging .sidebar-header { cursor: grabbing; }

/* Collapse + full-screen are dock-only affordances — meaningless once
   the pane is a free window. */
.pane-floating .pane-collapse-btn,
.pane-floating #fullscreenBtn { display: none !important; }

/* Body fills the window. */
.pane-floating .sidebar-body,
.pane-floating .addon-pane-body { flex: 1; min-height: 0; }

.pane-resize-grip {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: #bcbcbc;
  cursor: nwse-resize;
  z-index: 2;
}
.pane-resize-grip:hover { color: #777; }

.addon-pane-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.addon-pane-section {
  margin-bottom: 16px;
}

.addon-pane-section h4 {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.addon-pane-section p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.addon-option {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: #333;
}

.addon-option:hover {
  background: #f0f0f0;
}

.history-timeline-container {
  display: flex;
  gap: 0;
  padding: 12px 0 12px 8px !important;
}

.history-timeline-track {
  width: 20px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.history-timeline-line {
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.history-timeline-scrubber {
  position: absolute;
  left: 4px;
  top: 0;
  width: 12px;
  height: 4px;
  background: #2c5cc5;
  border-radius: 2px;
  cursor: grab;
  z-index: 2;
  transition: top 0.1s;
}

.history-timeline-scrubber:active {
  cursor: grabbing;
}

.history-timeline-scrubber::before {
  content: '';
  position: absolute;
  left: 4px;
  top: -100vh;
  width: 4px;
  height: 100vh;
  background: #2c5cc5;
  opacity: 0.3;
}

.history-entries {
  flex: 1;
  overflow-y: auto;
}

.history-item {
  font-size: 12px;
  color: #333;
  padding: 6px 8px;
  border-radius: 3px;
  transition: opacity 0.2s, background 0.2s;
}

.history-item.dimmed {
  opacity: 0.4;
}

.history-item.active-history {
  background: #e8f0fe;
}

.history-section-header {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  padding: 8px 8px 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.history-time {
  color: #999;
  font-size: 11px;
  margin-right: 6px;
}

.dashboard-rolled-back {
  opacity: 0.6;
  filter: saturate(0.5);
  transition: opacity 0.3s, filter 0.3s;
}

/* Title Bar */
.title-bar {
  height: 28px;
  background: #efefef;
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
  border-bottom: 1px solid #d0d0d0;
}

.traffic-lights {
  display: flex;
  gap: 6px;
}

.light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.light.red { background: #ff5f57; }
.light.yellow { background: #ffbd2e; }
.light.green { background: #28c940; }

.title-bar-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Header */
.tableau-header {
  height: 48px;
  background: linear-gradient(135deg, #1d3557 0%, #2b5f7f 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Right inset matches the buttons' 9px top gap within the bar, so Connect/
     Create sit an even 9px from the right edge (top). Left stays 20px. */
  padding: 0 9px 0 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tableau-logo {
  width: 24px;
  height: 24px;
}

.server-dropdown-wrapper {
  position: relative;
}

.server-toggle {
  background: none;
  border: none;
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.9;
}

.server-toggle .server-name {
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 4px;
}

.server-toggle .server-name:hover {
  background: rgba(255,255,255,0.1);
}

.server-toggle .dropdown-arrow {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 3px;
}

.server-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50px;
  margin-top: 4px;
  background: #265D83;
  border-radius: 6px;
  min-width: 200px;
  padding: 6px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 100;
}

.server-dropdown.open {
  display: block;
}

.server-option {
  padding: 8px 16px;
  font-size: 13px;
  color: white;
  cursor: pointer;
  transition: background 0.15s;
}

.server-option:hover {
  background: rgba(255,255,255,0.1);
}

.server-option.active {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.server-option.active::after {
  content: "✓";
  margin-left: 12px;
}

.server-separator {
  height: 1px;
  background: rgba(255,255,255,0.3);
  margin: 6px 12px;
}

.server-option.sign-in {
  opacity: 0.85;
}
.server-option.sign-out {
  opacity: 0.85;
}

.dropdown-arrow {
  font-size: 10px;
  opacity: 0.7;
}

.btn-new-workbook {
  background: transparent;
  border: 1.5px solid var(--white);
  color: var(--white);
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}

.btn-new-workbook:hover {
  background: rgba(255,255,255,0.1);
}

.btn-new-workbook.active-tab {
  background: #265D83;
  border-color: #265D83;
  border-radius: 4px 4px 0 0;
  padding-bottom: 10px;
  margin-bottom: -4px;
}

/* Connect + Create sit side by side in the header. The right cluster lays them
   out in a row (it holds a bare button + the Create dropdown wrapper). */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dropdown caret on the Create button — dims slightly so the label leads. */
.btn-new-workbook .btn-caret {
  opacity: 0.8;
  margin-left: 1px;
}

.new-btn-wrapper {
  position: relative;
}

.new-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #214F6F;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  min-width: 160px;
  z-index: 100;
  padding: 4px 0;
}

.new-dropdown.active {
  display: block;
}

.new-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}

.new-dropdown-item svg {
  flex-shrink: 0;
}

.new-dropdown-item:hover {
  background: #265D83;
}

/* Main Content */
.main-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
  min-height: 0;
}

.main-content:has(.workspace.active) {
  overflow: hidden;
}

/* Start Screen */
.start-screen {
  padding: 60px 40px 40px;
  position: relative;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Classic layout: two-column with discover pane on the right */
.classic-layout {
  display: flex;
  gap: 0;
  height: 100%;
}

.classic-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 60px 40px 40px;
}

/* When the chat pane is open over the classic start screen it's a fixed 340px
   overlay pinned to the right edge. The Discover pane (248px, far right) is
   expendable — let the chat sit fully on top of it, and push only the main
   content left by the difference (340 − 248 = 92px) so none of IT is obscured.
   classic-main then ends exactly at the chat's left edge; the discover pane and
   the 92px reserve both fall entirely under the pane. */
.main-content:has(.sidebar-stack.on-start-screen.active) #startScreen .classic-layout {
  padding-right: 92px;
  transition: padding-right 0.2s ease;
}

#startScreen.start-screen {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* Mirrors the real Tableau Desktop Discover pane (tableau.com/app/discover/desktop):
   light grey pane, grey section headers with leading icons, dark-grey links, and a
   bottom promo card with the agentic-analytics banner image. Captured styling:
   pane bg rgb(235,235,235); headers rgb(153,154,154) 14px; links rgb(78,78,78) 12px. */
.classic-discover {
  /* 248px (up from 240) so the pane's left edge lines up with the left edge of
     the Connect button in the header above it. */
  width: 248px;
  flex-shrink: 0;
  background: #ebebeb;
  border-left: 1px solid #e0e0e0;
  padding: 28px 18px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.classic-discover-bottom {
  margin-top: auto;
  flex-shrink: 0;
  margin-left: -18px;
  margin-right: -18px;
}

.classic-discover-section {
  margin-bottom: 22px;
}

.classic-discover-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 400;
  color: #999a9a;
  margin-bottom: 8px;
}

/* "Training" has no leading icon; align its text with the icon'd headers */
.classic-discover-section-title--plain {
  padding-left: 25px;
}

.classic-discover-section-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.classic-discover-link {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #4e4e4e;
  padding: 5px 8px 5px 26px;
  margin: 0 -8px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.classic-discover-link:hover {
  color: #1b6cb3;
  background: #e2e2e2;
  text-decoration: underline;
}

/* Bottom promo banner: matches the real Discover "Activate agentic analytics"
   card -- grey full-bleed band, bold title + "Watch now" on the left, the agent
   illustration on the right. */
.classic-discover-promo {
  display: flex;
  align-items: stretch;
  background: #dcdcdc;
  cursor: pointer;
  transition: background 0.15s;
  overflow: hidden;
}

.classic-discover-promo:hover {
  background: #d3d3d3;
}

.classic-discover-promo-body {
  flex: 1;
  min-width: 0;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.classic-discover-promo-img {
  width: 96px;
  object-fit: cover;
  object-position: left center;
  flex-shrink: 0;
}

.classic-discover-promo-text {
  font-size: 15px;
  font-weight: 700;
  color: #4e4e4e;
  line-height: 1.15;
  margin-bottom: 14px;
}

.classic-discover-promo-link {
  font-size: 12px;
  font-weight: 400;
  color: #4e4e4e;
  cursor: pointer;
  transition: color 0.15s;
}

.classic-discover-promo-link::after {
  content: " \2192";
}

.classic-discover-promo:hover .classic-discover-promo-link {
  color: #1b6cb3;
  text-decoration: underline;
}

.start-screen.hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  position: absolute;
  width: 100%;
}

/* ============================================================
   MLP start screen — native Tableau Desktop start page (Connect
   rail + Open + Quick Start + Discover) with NO top blue app bar,
   plus a Can-of-Paint chat field at the top of the center column.
   ============================================================ */
#startScreenMLP.start-screen {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.mlp-layout {
  display: flex;
  height: 100%;
}

/* Left: dark-blue Connect rail (matches the classic desktop connect pane) */
.mlp-connect {
  width: 290px;
  flex-shrink: 0;
  background: #33566d;
  color: #fff;
  padding: 18px 0 30px;
  overflow-y: auto;
}

.mlp-sparkle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 0 22px 18px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;
}
.mlp-sparkle:hover {
  opacity: 1;
}

.mlp-connect-title {
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 26px;
  padding: 0 20px;
}

.mlp-connect-group {
  margin-bottom: 22px;
}

.mlp-connect-heading {
  font-size: 13px;
  font-weight: 400;
  color: #a9c0cf;
  padding: 0 20px;
  margin-bottom: 6px;
}

.mlp-connect-link {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  padding: 5px 20px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background 0.12s;
}
.mlp-connect-link:hover {
  background: rgba(255, 255, 255, 0.10);
}
.mlp-connect-link--more .mlp-connect-chevron {
  position: absolute;
  right: 20px;
  color: #a9c0cf;
  font-size: 15px;
}

/* Center column */
.mlp-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 40px 48px 40px;
  display: flex;
  flex-direction: column;
}

/* Float everything from "Open" down to the bottom of the column; the chat field
   stays put at the top. margin-top:auto on the first section absorbs the free
   space above it. On short screens the auto margin collapses to 0 and the column
   scrolls normally. */
.mlp-main > .mlp-section:first-of-type {
  margin-top: auto;
}
.mlp-main > .mlp-section:last-of-type {
  margin-bottom: 0;
}

.mlp-chat-hero {
  display: flex;
  justify-content: center;
  /* Nudge down so the field's vertical center lines up with the "Connect"
     title in the blue rail (which sits ~25px lower than the field's default
     top). */
  margin-top: 25px;
  margin-bottom: 46px;
}
.mlp-chat-hero .input-with-history {
  max-width: 620px;
}
/* Room for the bar-chart mark (left) and the Conversations button (right).
   Scoped under .mlp-chat-hero so it beats `.input-with-history .chat-input`.
   max-width:none lets the input fill the 620px wrapper — otherwise .chat-input's
   560px cap leaves the right-pinned Conversations button sitting OUTSIDE it. */
.mlp-chat-hero .mlp-chat-input {
  max-width: none;
  padding-left: 50px;
  padding-right: 44px;
}

/* Left mark: the agent's "scatter (+ marks)" loader, frozen at rest with all
   four plus-marks fully shown. Runs (pops the marks in/out) only on hover;
   settles back to all-shown; never while the field is focused. Mirrors the Blue
   Sky masthead spark, which used the bar chart. */
.mlp-field-bars {
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%) scale(1.35);
  transform-origin: center;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
/* The plus-marks are purely axis-aligned rectangles, but the scale(1.35)
   wrapper lands their edges on fractional device pixels (the orange + was worst)
   → blur. crispEdges snaps each edge to the device-pixel grid, so they render
   sharp regardless of the fractional transform. Safe here precisely because the
   marks have no diagonals/curves to alias. */
.mlp-field-bars .typing-scatter .typing-dot {
  shape-rendering: crispEdges;
}
/* Rest = every mark fully shown, no motion. The extra `.typing-scatter` in the
   selector is deliberate: it raises specificity above the shared loader's
   `.typing-dot:nth-child(N)` rules (which set the pop animation and appear later
   in this file), so those don't win and leave the marks animating on load. */
.mlp-field-bars .typing-scatter .typing-dot {
  animation: none;
  transform: scale(1);
  opacity: 1;
}
/* On hover the shared per-dot scatter animation plays (blue→orange→green→red
   in, then reverse out) — restore each dot's keyframes. */
.mlp-field-bars.is-running .typing-dot:nth-child(1) { animation: typingScatterBlue   1.8s ease-in-out infinite; }
.mlp-field-bars.is-running .typing-dot:nth-child(2) { animation: typingScatterOrange 1.8s ease-in-out infinite; }
.mlp-field-bars.is-running .typing-dot:nth-child(3) { animation: typingScatterGreen  1.8s ease-in-out infinite; }
.mlp-field-bars.is-running .typing-dot:nth-child(4) { animation: typingScatterRed    1.8s ease-in-out infinite; }

/* The Conversations dropdown hangs off the field's right edge. */
.mlp-chat-hero .input-history-dropdown {
  top: calc(100% + 8px);
  right: 0;
}

/* When the agent panel opens, the field goes away entirely (Blue Sky does the
   same with its masthead field). */
.main-content:has(.sidebar-stack.active) #startScreenMLP .mlp-chat-hero {
  display: none;
}

/* With the field gone, the content should rise to the top of the column rather
   than stay bottom-anchored — otherwise the space the field vacated just turns
   into empty gap above it. Drop the margin-top:auto (line ~1114) that normally
   floats the sections to the bottom so they scootch up under the title bar. */
.main-content:has(.sidebar-stack.active) #startScreenMLP .mlp-main > .mlp-section:first-of-type {
  margin-top: 0;
}

/* Offline: the field STAYS in place but goes disabled — greyed fill, muted
   text, and a placeholder that tells you to reconnect (set in initOfflineToggle).
   Unlike the other start variants (which drop their agent field offline), MLP
   keeps it visible as a "reconnect to use Tableau Agent" affordance. */
body.offline-mode #startScreenMLP .mlp-chat-input {
  background: #f7f7f7;
  color: #9aa3ad;
  cursor: not-allowed;
  border-color: #ececec;
}
body.offline-mode #startScreenMLP .mlp-chat-input::placeholder {
  color: #9aa3ad;
}
/* Dim the field ornaments (bar-chart mark + Conversations button) to match. */
body.offline-mode #startScreenMLP .mlp-field-bars,
body.offline-mode #startScreenMLP .input-history-btn {
  opacity: 0.4;
}

.mlp-section {
  margin-bottom: 52px;
}

.mlp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}
.mlp-section-head--ruled {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 12px;
  margin-bottom: 26px;
}

.mlp-section-title {
  font-size: 26px;
  font-weight: 400;
  color: #333;
  margin: 0;
}
/* "Quick Start" reads as a smaller sub-heading than "Open" in real Tableau. */
.mlp-section-head--ruled .mlp-section-title {
  font-size: 17px;
}

.mlp-section-link {
  font-size: 13px;
  color: #1b6cb3;
  cursor: pointer;
  text-decoration: none;
}
.mlp-section-link:hover {
  text-decoration: underline;
}

/* Card rows (Open + Quick Start share one card style) */
.mlp-open-row {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.mlp-open-card {
  width: 156px;
  cursor: pointer;
}

.mlp-open-thumb {
  width: 156px;
  height: 108px;
  background: #fff;
  border: 1px solid #d9d9d9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mlp-open-card:hover .mlp-open-thumb {
  border-color: #1b6cb3;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.mlp-open-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.mlp-open-thumb--blank {
  background: #fff;
}

.mlp-open-name {
  display: block;
  font-size: 13px;
  color: #333;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quick Start: a left label column beside the card row */
.mlp-quickstart-block {
  display: flex;
  gap: 40px;
  margin-bottom: 46px;
}
.mlp-quickstart-block:last-child {
  margin-bottom: 0;
}

.mlp-quickstart-label {
  width: 190px;
  flex-shrink: 0;
  padding-top: 2px;
}
.mlp-quickstart-name {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  margin: 0 0 7px;
}
.mlp-quickstart-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Right Discover rail: reuse .classic-discover; just give it top padding so it
   lines up with the center column now that there's no header above it. */
.mlp-discover {
  padding-top: 40px;
}

/* When the chat pane overlays MLP, reserve room like it does for Classic. */
.main-content:has(.sidebar-stack.on-start-screen.active) #startScreenMLP .mlp-layout {
  padding-right: 92px;
  transition: padding-right 0.2s ease;
}

/* Chat Hero */
.chat-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.input-with-history {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
}
.input-with-history .chat-input,
.input-with-history .sheet-question-input {
  padding-right: 44px;
}
.input-history-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-history-btn:hover {
  color: #555;
  background: #f0f0f0;
}
.input-history-dropdown {
  top: calc(100% + 8px);
  right: 0;
}
.sheet-input-wrapper {
  max-width: 100%;
}

.chat-input {
  width: 100%;
  max-width: 560px;
  padding: 16px 24px;
  font-size: 16px;
  border: 2px solid var(--gray);
  border-radius: 28px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input:focus {
  border-color: var(--teal);
  box-shadow: 0 2px 12px rgba(43, 95, 127, 0.15);
}

.chat-input::placeholder {
  color: #999;
}

/* Rotating agent placeholders — the faded prompt text in every agent field
   (start-screen chat boxes + the blank-sheet/dashboard heroes + the agent
   composer) cycles through a list of phrasings. A gentle color crossfade on the
   ::placeholder pseudo carries each swap: ph-fade drops the text to transparent,
   the text is swapped while invisible, then it fades back to the field's own
   placeholder color. See the ph-rotator wiring in app.js. */
.ph-rotator::placeholder { transition: color 0.45s ease; }
.ph-rotator.ph-fade::placeholder { color: transparent !important; }
.ph-rotator::-webkit-input-placeholder { transition: color 0.45s ease; }
.ph-rotator.ph-fade::-webkit-input-placeholder { color: transparent !important; }

/* Content Sections */
.content-section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d0d0d0;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 300;
  color: var(--text);
}

.section-icon {
  margin-right: 6px;
}

.link-action {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
}

/* Card Row */
.card-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}

.card {
  flex-shrink: 0;
  width: 160px;
  cursor: pointer;
}

.card-thumb {
  width: 160px;
  height: 100px;
  border-radius: 4px;
  border: 1px solid var(--gray);
  margin-bottom: 6px;
}

.thumb-1 { background: url('thumbs/tp-superstore.png') center/cover; }
.thumb-2 { background: url('thumbs/tp-fiscal-calendar.png') center/cover; }
.thumb-3 { background: url('thumbs/tp-telecom.png') center/cover; }
.thumb-4 { background: url('thumbs/tp-profitability.png') center/cover; }
.thumb-5 { background: url('thumbs/tp-customer-sat.png') center/cover; }
.thumb-6 { background: url('thumbs/tp-sales-commission.png') center/cover; }
.thumb-7 { background: url('thumbs/tp-census.png') center/cover; }
.thumb-8 { background: url('thumbs/tp-entrepreneurs.png') center/cover; }
.thumb-9 { background: url('thumbs/tp-alliance.png') center/cover; }
.thumb-10 { background: url('thumbs/tp-executive.png') center/cover; }
.thumb-11 { background: url('thumbs/tp-home-analytics.png') center/cover; }

.card-title {
  font-size: 12px;
  color: var(--text);
  display: block;
}

.view-more {
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: auto;
  /* Pin to the right edge of the (horizontally scrollable) row so it stays
     visible no matter how many cards are in the row — cards scroll/clip under
     it instead of pushing it out of view. Stretch full row height with a white
     fade so cards sliding beneath are fully masked and it reads cleanly. */
  position: sticky;
  right: 0;
  z-index: 1;
  align-self: stretch;
  display: flex;
  align-items: flex-start;   /* top-align the link with the thumbnails' top edge */
  padding: 0 2px 0 28px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 22px);
}

/* Quickstart */
.quickstart-viewmore {
  display: block;
  text-align: right;
  margin-top: -8px;
}
.quickstart-row {
  display: flex;
  gap: 0;
  margin-top: 16px;
  overflow: hidden;
}
.quickstart-col {
  flex: none;
}
.quickstart-divider {
  width: 1px;
  background: var(--gray);
  margin: 0 24px;
  align-self: stretch;
}
.quickstart-subtitle {
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 4px 0;
}
.quickstart-desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 12px 0;
}
.quickstart-cards {
  display: flex;
  gap: 16px;
}
.quickstart-cards .card-thumb {
  width: 160px;
  height: 100px;
}
/* Discover Bar */
.discover-bar {
  background: #e8e8e8;
  border-top: 1px solid #d0d0d0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.discover-bar:hover {
  background: #e0e0e0;
}

.discover-label {
  font-size: 18px;
  font-weight: 300;
  color: var(--text);
}

/* New Workbook Drawer */
.new-workbook-drawer {
  display: none;
  background: #265D83;
  padding: 20px 40px 24px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  animation: drawerSlideDown 0.35s ease;
}

.new-workbook-drawer.active {
  display: block;
}

@keyframes drawerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drawer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.drawer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drawer-title {
  font-size: 16px;
  font-weight: 300;
  color: white;
  margin-bottom: 12px;
}

.drawer-search {
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 13px;
  width: 140px;
  outline: none;
}

.drawer-search::placeholder {
  color: rgba(255,255,255,0.6);
}

.drawer-sort {
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 13px;
  outline: none;
}

.drawer-sort option {
  color: #333;
}

.drawer-link {
  color: rgba(255,255,255,0.8) !important;
}

.btn-blank-workbook {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 2px dashed rgba(255,255,255,0.5);
  border-radius: 4px;
  width: 160px;
  height: 100px;
  flex-shrink: 0;
  cursor: pointer;
  color: white;
  font-size: 12px;
  transition: background 0.2s, border-color 0.2s;
}

.btn-blank-workbook:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.8);
}

.drawer-card-row {
  display: flex;
  gap: 16px;
  padding-bottom: 4px;
}

.drawer-cards-scroll {
  display: flex;
  gap: 16px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.drawer-section-row {
  display: flex;
  gap: 40px;
}

.drawer-section {
  flex: 1;
  min-width: 0;
}

.drawer-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 8px 0;
}

.drawer-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  transition: background 0.15s;
}

.drawer-list-item:hover {
  background: rgba(255,255,255,0.1);
}

.drawer-list-icon {
  opacity: 0.7;
}

.new-workbook-drawer .card-thumb {
  border: 1px solid rgba(255,255,255,0.2);
}

.new-workbook-drawer .card-title {
  color: rgba(255,255,255,0.9);
}


/* Workspace */
.workspace {
  display: none;
  flex-direction: column;
  height: 100%;
}

.workspace.active {
  display: flex;
}

.workspace-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.workspace-body.sidebar-open {
  margin-right: 340px;
}


/* Tableau Toolbar */
.tableau-toolbar {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: #fafafa;
  border-bottom: 1px solid #d0d0d0;
  flex-shrink: 0;
  gap: 2px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: #d0d0d0;
  margin: 0 8px;
}

.toolbar-spacer {
  flex: 1;
}

.tb-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1;
}

.tb-btn:hover {
  background: #e8e8e8;
}

/* The agent speech-bubble icon is top-heavy (body up top, thin tail below), so
   it reads as sitting higher than the balanced icons beside it. Nudge it down a
   hair so its visual center lines up with its toolbar neighbors. */
.sparkle-btn svg {
  position: relative;
  top: 1.5px;
}

.tb-wingding {
  font-family: 'Wingdings', 'Wingdings 2', 'Wingdings 3', sans-serif;
}

.tb-select {
  padding: 3px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  color: #333;
  background: #fff;
  cursor: pointer;
}

.show-me-btn {
  font-size: 12px;
  font-weight: 500;
  border: none;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Dashboard Pane */
.dashboard-pane {
  width: 240px;
  background: #fafafa;
  border-right: 1px solid #d0d0d0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  font-size: 12px;
}

.pane-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d0d0d0;
  padding: 0;
}

.pane-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.pane-tab.active {
  color: #333;
  border-bottom-color: #333;
}

.pane-collapse {
  background: none;
  border: none;
  margin-left: auto;
  padding: 8px 10px;
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

.pane-section {
  padding: 12px 14px;
  border-bottom: 1px solid #e8e8e8;
}

.pane-section h4 {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.device-list {
  margin-bottom: 8px;
}

.device-item {
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  color: #555;
}

.device-item.active {
  background: #e0e8f0;
  color: #333;
}

.pane-btn {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 11px;
  color: #555;
  cursor: pointer;
}

.pane-btn:hover {
  background: #f5f5f5;
}

.pane-select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 11px;
  color: #333;
}

.pane-sheets {
  flex: 1;
}

.sheet-item {
  padding: 4px 8px;
  color: #555;
  cursor: pointer;
  border-radius: 3px;
}

.sheet-item:hover {
  background: #f0f0f0;
}

.pane-objects {
  border-top: 1px solid #e8e8e8;
}

.object-item {
  padding: 3px 8px;
  color: #555;
  cursor: pointer;
  border-radius: 3px;
}

.object-item:hover {
  background: #f0f0f0;
}

.pane-toggle {
  display: flex;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.toggle-btn {
  flex: 1;
  background: #fff;
  border: none;
  padding: 5px 0;
  font-size: 11px;
  cursor: pointer;
  color: #555;
}

.toggle-btn.active {
  background: #4e79a7;
  color: white;
}

.pane-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  color: #555;
  cursor: pointer;
}

.workspace-canvas {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background: #fff;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-stack {
  width: 340px;
  display: none;
  flex-direction: column;
  border-left: 1px solid var(--gray);
  flex-shrink: 0;
  position: fixed;
  top: 87px;
  right: 0;
  bottom: 28px;
  z-index: 20;
  background: var(--white);
  transition: top 0.3s ease, bottom 0.3s ease, left 0.32s ease, width 0.32s ease, height 0.32s ease;
}

.sidebar-stack.active {
  display: flex;
}

.sidebar-stack.on-start-screen {
  top: 100px;
  bottom: 0;
}

/* MLP has no 48px blue header, so the chat pane must dock 48px higher —
   flush under the mac menu bar (24px) + title bar (28px) = 52px. Otherwise a
   sliver of the Discover rail shows above the pane. */
body.mlp-active .sidebar-stack.on-start-screen {
  top: 52px;
}


.sidebar-stack.on-start-screen #broomBtn {
  display: none;
}

.workspace-chat {
  /* Breathing room around the chat pane content — same gutter on left, right,
     and bottom. Single knob so it's easy to bump up. White so the gutter blends
     with the white message area / input field rather than showing grey. */
  --chat-inset: 4px;
  background: #fff;
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 var(--chat-inset) var(--chat-inset);
}

.workspace-chat.active {
  display: flex;
}

.workspace-chat .sidebar-messages {
  background: var(--white);
  flex: 1;
}

.workspace-chat .sidebar-input-area {
  background: var(--gray-light);
}

.workspace-chat .sidebar-header {
  /* The pane carries a 4px white inset on left/right/bottom (--chat-inset). The
     white message/input areas hide it, but this header has a grey fill + top/
     bottom borders, so the inset would show as white gutters on both sides.
     Cancel the horizontal inset with negative margins so the header bleeds to
     the pane's full width, then fold the inset back into the padding so the
     title/actions keep their original position. */
  margin-left: calc(-1 * var(--chat-inset));
  margin-right: calc(-1 * var(--chat-inset));
  padding: 4px calc(12px + var(--chat-inset));
  border-bottom: 1px solid #d0d0d0;
  border-top: 1px solid #d0d0d0;
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
}

/* Full-screen sweeps the UI away so the canvas fills the workspace — but the
   start page has no canvas, so the affordance is meaningless there. Hide it
   while the stack is on the start screen. */
.sidebar-stack.on-start-screen .workspace-chat #fullscreenBtn {
  display: none;
}

.workspace-chat .sidebar-header h3 {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  margin-right: 8px;
}

/* Back-to-chat button — lives inside each overlay: left of the Conversations
   search box, and top-left above Model in Settings. Visible whenever its panel
   is (the panel's own display drives it), so no extra show/hide logic needed. */
.pane-back-btn {
  flex-shrink: 0;
  margin-left: -2px;
}

/* Settings has no search row, so give its back button a slim top bar. */
.agent-settings-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 4px -2px;
}

/* Conversation title occupies the primary header, replacing "Tableau Agent" */
.agent-convo-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding: 2px 5px;
  margin-left: -3px;
  border-radius: 4px;
  cursor: text;
  border: 1px solid transparent;
}
.agent-convo-title:hover {
  background: rgba(0,0,0,0.06);
}
.agent-convo-title.editing {
  background: #fff;
  border-color: #4e79a7;
  cursor: text;
  outline: none;
  white-space: nowrap;
  overflow-x: auto;
}
.agent-convo-title.unsaved {
  font-style: italic;
  color: #888;
}

.workspace-chat .sidebar-messages {
  flex: 1;
  overflow-y: auto;
  /* left/right match the input area's padding so the avatar's left edge
     lines up with the text field's left edge */
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workspace-chat .sidebar-input-area {
  padding: 8px 10px;
  border-top: none;
  background: #fff;
  position: relative;
}

/* Soften the hard cut where scrolling messages meet the input field: a short
   transparent-to-white fade band floating just above the input area. */
.workspace-chat .sidebar-input-area::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  z-index: 2;
}

.sidebar-input-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid #d4d4d4;
  border-radius: 0;
  padding: 10px 12px;
  /* reserve a bottom band for the artifacts (left) + send (right) buttons */
  padding-bottom: 34px;
  transition: border-color 0.2s;
  background: #fff;
  position: relative;
}

.sidebar-input-wrapper:focus-within {
  border-color: #999;
}

.sidebar-input-wrapper.ready {
  border-color: #05628A;
}

.input-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex-shrink: 0;
}

.input-mentions:empty {
  display: none;
}

.input-mentions:not(:empty) {
  margin-right: 4px;
}

.input-mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #e8f2fc;
  color: #4082c4;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid #c4ddf2;
  white-space: nowrap;
}
/* Skills (and commands) read as grey; marks & sheets keep the blue above. */
.input-mention-chip.mention-skill {
  background: #f0f1f2;
  color: #555;
  border-color: #d6d8da;
}

/* Leading kind icon shared by composer and in-message chips. */
.mention-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}
.mention-icon-skill { font-weight: 700; color: #777; }
.mention-icon-sheet { color: #05628A; }
.mention-icon-sheet svg { display: block; width: 11px; height: 11px; }
.mention-icon-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #05628A;
}

.mention-delete {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #999;
  margin-left: 2px;
  display: none;
}

.input-mention-chip:hover .mention-delete {
  display: inline;
}

.mention-delete:hover {
  color: #e15759;
}

.workspace-chat .sidebar-input {
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 14px;
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  color: var(--text);
}

.workspace-chat .sidebar-input::placeholder {
  color: #747474;
}

.workspace-chat .sidebar-input.has-mentions::placeholder {
  color: transparent;
}

.sidebar-send-btn {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: none;
  border: none;
  cursor: default;
  padding: 4px;
  transition: opacity 0.2s;
  /* The paper-airplane glyph sits ~3px high within its own 18×18 viewBox, so
     even with a matching box it read higher than the left-hand tool icons.
     Nudge it down to share their vertical center. */
  transform: translateY(3px);
}

.sidebar-send-btn .send-glyph path {
  fill: #d4d4d4;
  transition: fill 0.2s;
}

.sidebar-send-btn.active {
  cursor: pointer;
}

.sidebar-send-btn.active .send-glyph path {
  fill: #444;
}

.sidebar-send-btn.active:hover .send-glyph path {
  fill: #222;
}

/* Send / Stop toggle. Airplane by default; while a reply is generating the
   wrapper carries .generating and we swap to the stop square. Only one glyph
   is ever in flow so the button keeps its size. */
.sidebar-send-btn .stop-glyph { display: none; }

.sidebar-input-wrapper.generating .sidebar-send-btn { cursor: pointer; }
.sidebar-input-wrapper.generating .sidebar-send-btn .send-glyph { display: none; }
.sidebar-input-wrapper.generating .sidebar-send-btn .stop-glyph {
  display: block;
  color: #444;
  transition: color 0.2s;
}
.sidebar-input-wrapper.generating .sidebar-send-btn:hover .stop-glyph {
  color: #222;
}

.agent-settings {
  display: none;
  padding: 20px;
  background: #fff;
  flex-direction: column;
  gap: 16px;
  position: absolute;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  animation: convoSlideIn 0.18s ease;
}

.agent-settings.active {
  display: flex;
}

.prev-chats-anchor {
  position: relative;
}
.agent-previous-chats {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-height: 420px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.1);
  border: 1px solid #e0e0e0;
  overflow: hidden;
}
.prev-chats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}
.prev-chats-close {
  background: none;
  border: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  line-height: 1;
}
.prev-chats-close:hover { color: #333; }
.prev-chats-filter-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.prev-chats-filter-btn:hover { color: #333; background: #f0f0f0; }
.prev-chats-search {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prev-chats-search-input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
  outline: none;
}
.prev-chats-search-input:focus { border-color: #4e79a7; }
.prev-chats-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0;
}
.prev-chats-section {
  padding: 8px 12px 3px;
  font-size: 9px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.prev-chat-item {
  padding: 8px 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.prev-chat-item:hover {
  background: #f5f8fb;
}
.prev-chat-item.active {
  background: #eef4fa;
  border-left-color: #4e79a7;
}
.prev-chat-title {
  font-size: 11px;
  font-weight: 500;
  color: #333;
  margin-bottom: 1px;
}
.prev-chat-preview {
  font-size: 10px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
.prev-chat-meta {
  font-size: 9px;
  color: #bbb;
}

/* ============================================
   CONVERSATIONS SLIDE-IN PANEL (in-pane)
   ============================================ */
.conversations-panel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 70;
  background: #fff;
  flex-direction: column;
  animation: convoSlideIn 0.18s ease;
}
.conversations-panel.active {
  display: flex;
}
@keyframes convoSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.conversations-panel-search {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.conversations-new-chat-btn {
  flex-shrink: 0;
  color: #666;
}
.conversations-new-chat-btn:hover { color: #333; }
.conversations-search-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 12px;
  outline: none;
}
.conversations-search-input:focus { border-color: #4e79a7; }
.conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 12px;
}
.convo-section {
  padding: 12px 14px 4px;
  font-size: 10px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.convo-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  /* Extra right padding reserves room for the centered trash icon so the
     preview/title truncate before it rather than sliding underneath. */
  padding: 9px 46px 9px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.convo-row:hover { background: #f5f8fb; }
.convo-row.active {
  background: #eef4fa;
  border-left-color: #4e79a7;
}

/* Delete affordance — trash icon revealed on row hover, vertically centered in
   the row cell at its right edge. Larger tap target; the preview text truncates
   sooner behind it (acceptable trade-off). */
.convo-delete-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: #9aa5b1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.convo-delete-btn svg { width: 18px; height: 18px; }
.convo-row:hover .convo-delete-btn { display: flex; }
.convo-delete-btn:hover { background: #f0d6d6; color: #c0392b; }

/* Confirm popup — anchored top-right of the row, replaces the trash icon while
   awaiting a decision. Shown only when the row carries .confirming-delete. */
.convo-delete-confirm {
  position: absolute;
  top: 5px;
  right: 8px;
  display: none;
  align-items: center;
  gap: 6px;
  z-index: 6;
  padding: 4px 6px 4px 9px;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(30, 53, 87, 0.16);
}
.convo-row.confirming-delete .convo-delete-confirm { display: flex; }
/* Keep the trash icon hidden while confirming even though the row is hovered. */
.convo-row.confirming-delete .convo-delete-btn { display: none; }
.convo-delete-confirm-text {
  font-size: 11px;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
}
.convo-delete-confirm button {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.convo-delete-cancel {
  background: #f2f3f5;
  color: #555;
}
.convo-delete-cancel:hover { background: #e6e8eb; }
.convo-delete-yes {
  background: #c0392b;
  color: #fff;
}
.convo-delete-yes:hover { background: #a93226; }

/* Hero thumbnail + stack hint for multi-artifact conversations. Content block is
   ~49px tall; a stacked thumb adds a 5px overhang on top. Sizing splits the
   difference: halfway between "thumb == content" (49) and "stack == content"
   (44) → 47px tall, so a stack lands ~52px (only slightly over content instead
   of a full 5px). Width keeps the original 46:34 ratio to avoid distortion. */
.convo-thumb {
  position: relative;
  width: 63px;
  height: 47px;
  flex-shrink: 0;
}
.convo-thumb-frame {
  position: absolute;
  inset: 0;
  border: 1px solid #dde3e8;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.convo-thumb-frame svg {
  width: 100%;
  height: 100%;
  display: block;
  /* strip the full-canvas viz chrome so it reads as a clean mini thumbnail */
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  object-fit: contain;
}
/* Stacked-edge treatment: peeking cards behind the hero */
.convo-thumb.stacked .convo-thumb-frame { z-index: 3; }
.convo-thumb.stacked::before,
.convo-thumb.stacked::after {
  content: "";
  position: absolute;
  border: 1px solid #dde3e8;
  border-radius: 4px;
  background: #fff;
}
.convo-thumb.stacked::before {
  inset: 0;
  transform: translate(4px, -4px);
  z-index: 1;
  background: #f4f6f8;
}
.convo-thumb.stacked::after {
  inset: 0;
  transform: translate(2px, -2px);
  z-index: 2;
  background: #fafbfc;
}
.convo-thumb-count {
  position: absolute;
  top: -6px;
  right: -7px;
  z-index: 4;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #4e79a7;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 1.5px #fff;
}
/* Empty (no-artifact) conversations get a chat glyph instead of a thumb */
.convo-thumb.empty .convo-thumb-frame {
  color: #bbb;
  background: #f6f7f8;
}
.convo-thumb.empty .convo-thumb-frame svg { width: 18px; height: 18px; }

.convo-body {
  flex: 1;
  min-width: 0;
}
.convo-title-row {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.convo-title-row.untitled { color: #999; font-style: italic; font-weight: 400; }
/* Data source on its own line, so the preview below gets the full width. */
.convo-ds-row {
  display: flex;
  margin-bottom: 2px;
}
/* No field/pill — the data source reads as plain text, distinguished from the
   time below by a darker blue-grey and a slightly heavier weight (500 vs the
   time's 400). Icon + name align flush-left with the title. */
.convo-ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  color: #55636f;
  font-size: 11px;
  font-weight: 500;
}
.convo-ds-icon {
  flex-shrink: 0;
  color: #6b7a89;
}
.convo-ds-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Preview gets its own full line. */
.convo-preview-line {
  font-size: 11px;
  color: #8a8a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.convo-time {
  font-size: 11px;
  font-weight: 400;
  color: #9aa3ac;
  margin-top: 3px;
}
.convo-empty-state {
  padding: 40px 24px;
  text-align: center;
  color: #999;
  font-size: 12px;
}

/* ============================================
   ARTIFACTS BUTTON + FLYOUT (near the chat input)
   ============================================ */
/* Left-side input tools (+ upload, artifacts), baseline-aligned with the send
   button on the right (both bottom:8px). */
.sidebar-input-tools {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.input-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #6a7885;
  transition: background 0.15s, color 0.15s;
}
.input-tool-btn:hover { background: #eef1f4; color: #3d4b57; }
.input-tool-btn.active { background: #e6eef6; color: #05628A; }

/* Thin separator between the always-on tools and the mode toggles. */
.input-tool-divider {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: #d7dde3;
  flex-shrink: 0;
}

/* White hover tooltip for the mode toggles (data-tip on .has-tip). Standard
   light popover — white field, subtle border/shadow, no icon — sitting above
   the button. CSS-only; appears on hover/focus. */
.has-tip { position: relative; }
.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  white-space: nowrap;
  background: #fff;
  color: #2c3e50;
  font-size: 12px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #e0e4e8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 40;
}
/* Little white pointer under the bubble. */
.has-tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(3px) rotate(45deg);
  width: 9px;
  height: 9px;
  background: #fff;
  border-right: 1px solid #e0e4e8;
  border-bottom: 1px solid #e0e4e8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 41;
}
.has-tip:hover::after,
.has-tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.has-tip:hover::before,
.has-tip:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* Inline "auto-approved" note on the follow-up Yolo posts in place of a
   permission card. */
.yolo-auto-note {
  color: #b5610c;
  font-weight: 500;
}

.input-tool-btn.disabled,
.input-tool-btn:disabled {
  color: #c2cad2;
  cursor: default;
  pointer-events: none;
}
.artifacts-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 3px 5px;
  border-radius: 5px;
  cursor: pointer;
  color: #6a7885;
  transition: background 0.15s, color 0.15s;
}
.artifacts-btn:hover { background: #eef1f4; color: #3d4b57; }
.artifacts-btn.active { background: #e6eef6; color: #05628A; }
.artifacts-count {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Flyout anchored just above the artifacts icon (bottom-left), opening upward */
.artifacts-flyout {
  display: none;
  position: absolute;
  left: 16px;
  bottom: 52px;
  width: 250px;
  max-width: calc(100% - 32px);
  z-index: 65;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(30, 53, 87, 0.14);
  overflow: hidden;
  animation: artifactsFlyoutIn 0.14s ease;
}
.artifacts-flyout.active { display: block; }
@keyframes artifactsFlyoutIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SLASH MENU — Skills & commands from the composer
   Opened by the "/" keycap button or by typing "/" at the composer start.
   ============================================ */
.slash-menu {
  display: none;
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 100%;
  margin-bottom: 8px;
  z-index: 66;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(30, 53, 87, 0.14);
  overflow: hidden;
  animation: artifactsFlyoutIn 0.14s ease;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.slash-menu.open { display: block; }
.slash-menu-search-hint {
  padding: 8px 12px;
  font-size: 11px;
  color: #9aa5b1;
  border-bottom: 1px solid #f0f0f0;
}
.slash-menu-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}
.slash-menu-group-title {
  padding: 8px 8px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa5b1;
}
.slash-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.slash-item:hover,
.slash-item.active {
  background: #f2f6fa;
}
.slash-item-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A light field grounds the glyph into the row without reading as a chip. */
  background: #f4f6f8;
  color: #5a6b7b;
}
.slash-item.is-command .slash-item-icon { color: #05628A; background: #eef4f8; }
.slash-item-body { min-width: 0; flex: 1 1 auto; }
.slash-item-name {
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.slash-item-slash {
  color: #98a4b0;
  font-weight: 400;
}
.slash-item-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: #59a14f;
  flex: 0 0 auto;
}
.slash-item-desc {
  font-size: 11.5px;
  color: #98a4b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.slash-menu-empty {
  padding: 14px 12px;
  font-size: 12.5px;
  color: #98a4b0;
  text-align: center;
}

.artifacts-flyout-header {
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9aa5b1;
  border-bottom: 1px solid #f0f0f0;
}
.artifacts-flyout-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.artifacts-flyout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.artifacts-flyout-item:hover { background: #f5f8fb; }
.artifacts-flyout-thumb {
  position: relative;
  width: 52px;
  height: 39px;
  flex-shrink: 0;
}
.artifacts-flyout-frame {
  position: absolute;
  inset: 0;
  border: 1px solid #dde3e8;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.artifacts-flyout-frame svg {
  width: 100%;
  height: 100%;
  display: block;
  /* strip the full-canvas viz chrome so it reads as a clean mini thumbnail */
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  object-fit: contain;
}
.artifacts-flyout-info { min-width: 0; }
.artifacts-flyout-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   INLINE ARTIFACT CARD (in the thread)
   ============================================ */
/* Standalone artifact cards have no avatar, so indent them to line up with the
   agent's TEXT (avatar 32px + gap 10px + bubble padding-left 14px = 56px)
   rather than the avatar's left edge. */
.message.artifact-message {
  justify-content: flex-start;
  padding-left: 56px;
}
/* Lead artifact card riding at the top of an agent's first reply */
.lead-artifact { margin-bottom: 10px; }
/* Artifact card folded into an agent message, sitting below the message text */
.msg-artifact { margin-top: 8px; }
.thread-artifact-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 240px;
  min-height: 54px;
  padding: 0;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.thread-artifact-card:hover {
  border-color: #b9cbdb;
  box-shadow: 0 1px 4px rgba(30, 53, 87, 0.08);
}
.thread-artifact-thumb {
  width: 72px;
  flex-shrink: 0;
}
.thread-artifact-frame {
  width: 100%;
  height: 100%;
  border: none;
  border-right: 1px solid #e2e6ea;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thread-artifact-frame svg {
  width: 100%;
  height: 100%;
  display: block;
  /* strip the full-canvas viz chrome so it reads as a clean mini thumbnail */
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  object-fit: contain;
}
.thread-artifact-info {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 8px 10px;
}
.thread-artifact-title {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The card for the artifact already showing in the canvas drops the pointer
   cursor (nothing to open) */
.thread-artifact-card.is-open { cursor: default; }

/* ── Rich interactive insight card (message-width, in chat) ─────────────── */
.lead-insight { width: 100%; }
.insight-rich-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dcdfe3;
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px 16px;
  text-align: left;
}
/* Tinted tag pill, top-left. Tint derives from the insight's --insight-color
   (a Tableau 10 hue): pale fill via color-mix, saturated text of the same hue. */
.insight-rich-tag {
  display: inline-block;
  padding: 4px 9px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--insight-color, #4e79a7) 78%, #2b2b2b);
  background: color-mix(in srgb, var(--insight-color, #4e79a7) 16%, #fff);
}
.insight-rich-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  margin-bottom: 4px;
}
.insight-rich-number {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--insight-color, #2e2e2e);
  font-variant-numeric: tabular-nums;
}
.insight-rich-caption {
  font-size: 12px;
  color: #888;
}
.insight-rich-title {
  font-size: 16px;
  font-weight: 600;
  color: #2b3038;
  line-height: 1.3;
  margin-bottom: 2px;
}
.insight-rich-source {
  font-size: 12px;
  color: #9aa2ad;
  margin-bottom: 8px;
}
/* Action row: borderless text+icon buttons with a divider above (separating
   them from the card content) and a divider between the two buttons. */
.insight-rich-actions {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e6e8ec;
}
.insight-rich-open,
.insight-rich-adddash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border: none;
  background: none;
  color: #4a5568;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s;
}
.insight-rich-open { padding-left: 0; }        /* flush-left under the content */
.insight-rich-adddash { border-left: 1px solid #e6e8ec; }  /* divider between buttons */
.insight-rich-open:hover,
.insight-rich-adddash:hover,
.insight-rich-adddash[aria-expanded="true"] {
  color: #4a86c8;
}
.insight-rich-open svg,
.insight-rich-adddash svg { display: block; flex-shrink: 0; }

/* Drop-up flyout of existing dashboards, anchored to the actions row */
.insight-dash-flyout {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  width: 248px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #dcdfe3;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.16);
  padding: 6px;
  animation: insightDashFlyIn 0.12s ease-out;
}
@keyframes insightDashFlyIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.insight-dash-flyout-head {
  font-size: 11px;
  color: #8a94a2;
  font-weight: 600;
  padding: 6px 8px 8px;
  border-bottom: 1px solid #eef0f3;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insight-dash-list { max-height: 208px; overflow-y: auto; }
.insight-dash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #33404f;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.insight-dash-item:hover { background: #f4f8fd; color: #2b6cb0; }
.insight-dash-item svg { flex-shrink: 0; color: #8a94a2; }
.insight-dash-item:hover svg { color: #4a86c8; }
.insight-dash-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.insight-dash-item-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insight-dash-item-hint { font-size: 11px; color: #98a2b0; }
.insight-dash-new {
  margin-top: 4px;
  border-top: 1px solid #eef0f3;
  border-radius: 0 0 6px 6px;
  color: #4a86c8;
}
.insight-dash-new .insight-dash-item-name { color: #4a86c8; }
.insight-rich-viz {
  position: relative;
  height: 72px;
  margin: 4px 0 12px;
  cursor: crosshair;
}
.insight-rich-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.insight-rich-line {
  fill: none;
  stroke: var(--insight-color, #4e79a7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.insight-rich-area {
  fill: var(--insight-color, #4e79a7);
  opacity: 0.08;
  stroke: none;
}
.insight-rich-bar {
  fill: var(--insight-color, #4e79a7);
  opacity: 0.85;
  transition: opacity 0.1s;
}
/* While hovering a bar chart, the hovered bar reads full-strength and the
   others recede — same "focus the value under the cursor" feel as the dropline. */
.insight-rich-viz:hover .insight-rich-bar { opacity: 0.4; }
.insight-rich-viz .insight-rich-bar.is-hovered { opacity: 1; }
.insight-rich-dropline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--insight-color, #4e79a7);
  opacity: 0.55;
  transform: translateX(-0.5px);
  pointer-events: none;
}
.insight-rich-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--insight-color, #4e79a7);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--insight-color, #4e79a7);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.insight-rich-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}

/* ============================================
   REWIND — scrub back through a conversation
   The rewind line slots between messages in the flex column; everything below
   it (the "rolled back" future) greys out, matching the History pane's
   .dashboard-rolled-back treatment. The canvas swaps to whatever artifact was
   current at the line's position.
   ============================================ */
.message.rewound {
  opacity: 0.45;
  filter: saturate(0.4);
  transition: opacity 0.25s, filter 0.25s;
}
/* While rewound, cards/suggestions in the future are visual-only */
.message.rewound .thread-artifact-card,
.message.rewound .msg-suggestion-btn { pointer-events: none; }

.rewind-line {
  display: flex;
  align-items: center;
  gap: 8px;
  /* pull into the message gap so the line reads as sitting between bubbles */
  margin: -4px 2px;
  user-select: none;
  animation: rewindLineIn 0.18s ease;
}
@keyframes rewindLineIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.rewind-line-rail {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #05628A 0 6px, transparent 6px 10px);
  opacity: 0.55;
}
.rewind-line-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: #05628A;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(5, 98, 138, 0.35);
  transition: background 0.15s;
}
.rewind-line-handle:hover { background: #05557a; }
.rewind-line.dragging .rewind-line-handle { cursor: grabbing; }
.rewind-line-handle svg { display: block; }
.rewind-line-present {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #05628A;
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  transition: background 0.15s;
}
.rewind-line-present:hover { background: #eef4f8; }
.rewind-line-present svg { display: block; }

.workspace-chat .sidebar-body {
  position: relative;
}

/* Agent welcome / onboarding state */
.agent-welcome {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #fff;
  flex-direction: column;
}

.agent-welcome.active {
  display: flex;
}

/* Full-pane loading state shown for ~1s after "Got It" is clicked. A scaled-up
   sibling of the typing-loader bar chart, centered in the pane, sharing the same
   staggered undulate wave and Tableau 10 palette. */
.agent-pane-loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 70;
  background: #fff;
  align-items: center;
  justify-content: center;
}

.agent-pane-loader.active {
  display: flex;
}

.pane-loader-chart {
  display: flex;
  align-items: flex-end;
  gap: 11px;
  height: 72px; /* fits the tallest bar; shorter bars sit on the baseline */
}

.pane-loader-bar {
  width: 15px;
  border-radius: 3px;
  transform-origin: bottom;
  transform: scaleY(0.3);
  animation: typingUndulate 1s ease-in-out infinite;
}

/* Ascending heights; staggered delays ripple the wave left-to-right (1,2,3) */
.pane-loader-bar:nth-child(1) { background: #4e79a7; height: 40px; animation-delay: 0s; }
.pane-loader-bar:nth-child(2) { background: #f28e2b; height: 58px; animation-delay: 0.15s; }
.pane-loader-bar:nth-child(3) { background: #59a14f; height: 72px; animation-delay: 0.3s; }

/* Exit: the big chart flies up-and-to-the-left while shrinking toward the
   top-left, implying it's morphing into the small typing loader that appears
   there next (next to the agent avatar). The bars keep undulating throughout —
   only the container transforms. */
.agent-pane-loader.exiting .pane-loader-chart {
  /* Single continuous tween that accelerates away — a snappy launch toward the
     avatar. ease-in (slow start, fast finish) gives it the flick; one keyframe
     pair keeps the motion smooth with no mid-flight stall. */
  animation: paneLoaderExit 0.32s cubic-bezier(0.5, 0, 0.9, 0.4) forwards;
}

@keyframes paneLoaderExit {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(-14%, -60%) scale(0.3); opacity: 0; }
}

.agent-welcome-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 32px 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.agent-welcome-hero {
  width: 200px;
  height: 200px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.agent-welcome-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.agent-welcome-title {
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #333;
  margin: 0 0 24px;
}

.agent-welcome-body,
.agent-welcome-legal {
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  text-align: left;
  width: 100%;
  margin: 0 0 16px;
}

.agent-welcome-link {
  align-self: flex-start;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #05628A;
  text-decoration: underline;
}

.agent-welcome-footer {
  flex-shrink: 0;
  padding: 16px 28px 28px;
  display: flex;
  justify-content: center;
}

.agent-welcome-btn {
  background: #05628A;
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 10px 28px;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.agent-welcome-btn:hover {
  background: #044d6e;
}

.agent-settings-title {
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
}

.agent-settings-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-settings-label {
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

.agent-settings-select {
  height: 24px;
  padding: 0 36px 0 12px;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 14px;
  background: #fff url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 8,0 4,5' fill='%23666'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
}

/* Working folder: a dropdown-style control (caret on the right) that opens the
   folder chooser, sharing the square border language of the Model <select>. */
.wf-path {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.wf-path:hover { border-color: #999; }
.wf-path-icon { flex: 0 0 auto; color: #6a7178; }
.wf-path-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-path-caret { flex: 0 0 auto; margin-left: 4px; }
.wf-help {
  margin: 3px 0 0;
  font-size: 12px;
  color: #98a4b0;
}

/* Working-folder chooser overlay — mirrors the changelog modal's shell so the
   two dialogs read as one system. */
.wf-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* Above the menu bar (z 500) — mirrors the changelog modal (z 600). */
  z-index: 600;
  background: rgba(30, 41, 54, 0.32);
  align-items: center;
  justify-content: center;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.wf-overlay.open { display: flex; }
.wf-modal {
  background: #fff;
  width: 420px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 96px);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20, 35, 60, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: changelogIn 0.16s ease;
}
.wf-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #eef0f2;
}
.wf-modal-title { font-size: 16px; font-weight: 500; color: #1a1a1a; margin: 0; }
.wf-modal-head .changelog-close { margin-left: auto; }
.wf-modal-list {
  padding: 8px;
  overflow-y: auto;
}
.wf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.wf-row:hover { background: #f2f4f6; }
.wf-row-icon { flex: 0 0 auto; color: #6a7178; }
.wf-row-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-row-check { flex: 0 0 auto; color: #05628A; visibility: hidden; }
.wf-row.current .wf-row-check { visibility: visible; }
.wf-row-sep {
  height: 1px;
  margin: 6px 8px;
  background: #eef0f2;
}

/* ============================================
   AGENT LIBRARY — Skills & Memories
   Tabs → Active-in-session list (live) → Suggested → Search-all.
   ============================================ */
.agent-lib {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Buttons & inputs don't inherit font-family — pin all library controls to
   Benton Sans so nothing falls back to the browser's heavier default UI font. */
.agent-lib button,
.agent-lib input {
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Tabs */
.agent-lib-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #e2e2e2;
}
.agent-lib-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 4px 8px;
  margin-right: 18px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
}
.agent-lib-tab:hover { color: #1a1a1a; }
.agent-lib-tab.active {
  color: #05628A;
  border-bottom-color: #05628A;
  font-weight: 500;
}
.agent-lib-tab-count {
  font-size: 11px;
  font-weight: 500;
  color: #888;
  background: #eee;
  border-radius: 9px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.agent-lib-tab.active .agent-lib-tab-count {
  color: #05628A;
  background: #e2eef3;
}

/* Group heads */
.agent-lib-group { display: flex; flex-direction: column; gap: 8px; }
.agent-lib-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Group titles match the "Model" settings label — sentence case, not all-caps. */
.agent-lib-group-title {
  font-size: 13px;
  font-weight: 500;
  color: #555;
}
.agent-lib-group-count {
  font-size: 12px;
  font-weight: 400;
  color: #aaa;
  margin-left: auto;
}

/* Active rows */
.agent-lib-active { display: flex; flex-direction: column; gap: 6px; }
.agent-lib-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background: #fff;
}
/* "Active" label sits above the name; the live dot aligns with the label text. */
.agent-lib-row-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4a8f42;
  margin-bottom: 3px;
}
.agent-lib-row-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #59a14f;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(89,161,79,0.5);
  animation: libLivePulse 2s ease-out infinite;
}
@keyframes libLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(89,161,79,0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(89,161,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(89,161,79,0); }
}
.agent-lib-row-main { min-width: 0; flex: 1 1 auto; }
.agent-lib-row-name {
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-lib-remove {
  border: none;
  background: none;
  color: #b0b0b0;
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  border-radius: 4px;
  flex: 0 0 auto;
}
.agent-lib-remove:hover { color: #c0392b; background: #fbeaea; }

/* Enable/disable toggle — sits left of the trash on each Available row. */
.agent-lib-toggle {
  flex: 0 0 auto;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  border: none;
  background: #cfd3d6;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
.agent-lib-toggle.is-on { background: #05628A; }
.agent-lib-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.15s;
}
.agent-lib-toggle.is-on .agent-lib-toggle-knob { transform: translateX(13px); }

/* Disabled row — greyed, but still deletable. */
.agent-lib-row.is-disabled .agent-lib-row-name { color: #9a9a9a; }

/* Trigger-locked delete confirm (replaces the row while armed). */
.agent-lib-row.confirm-delete {
  border-color: #e6b3b3;
  background: #fdf5f5;
}
.agent-lib-confirm-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-lib-confirm-cancel,
.agent-lib-confirm-del {
  flex: 0 0 auto;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.agent-lib-confirm-cancel {
  border: 1px solid #ccc;
  background: #fff;
  color: #444;
}
.agent-lib-confirm-cancel:hover { background: #f4f4f4; border-color: #b0b0b0; }
.agent-lib-confirm-del {
  border: 1px solid #c0392b;
  background: #c0392b;
  color: #fff;
}
.agent-lib-confirm-del:hover { background: #a93226; border-color: #a93226; }

/* ---- Skill error states (two treatments) ----
   Both are taller rows with an icon column, a status label, the name, a short
   reason, and an action row. Color carries the meaning: red = broken/dead-end,
   amber = a fix is available (recoverable). */
.agent-lib-row.lib-broken,
.agent-lib-row.lib-fixable {
  align-items: flex-start;
  gap: 9px;
}
.agent-lib-row.lib-broken  { border-color: #e6b3b3; background: #fdf5f5; }
.agent-lib-row.lib-fixable { border-color: #ecd3a0; background: #fdf9ef; }

.agent-lib-err-icon {
  flex: 0 0 auto;
  line-height: 0;
  margin-top: 1px;
}
.lib-broken  .agent-lib-err-icon { color: #c0392b; }
.lib-fixable .agent-lib-err-icon { color: #b9770a; }

/* Status label reuses the "Active" label shape, recolored per state. */
.lib-broken  .agent-lib-err-label { color: #c0392b; }
.lib-fixable .agent-lib-err-label { color: #b9770a; }

.agent-lib-err-reason {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: #555;
  white-space: normal;
}
.agent-lib-err-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.agent-lib-err-btn {
  flex: 0 0 auto;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.agent-lib-err-update {
  border: 1px solid #05628A;
  background: #05628A;
  color: #fff;
}
.agent-lib-err-update:hover { background: #044d6e; border-color: #044d6e; }
.agent-lib-err-update:disabled { opacity: 0.75; cursor: default; }
.agent-lib-err-secondary {
  border: 1px solid #ccc;
  background: #fff;
  color: #444;
}
.agent-lib-err-secondary:hover { background: #f4f4f4; border-color: #b0b0b0; }
.agent-lib-err-link {
  font-size: 12px;
  font-weight: 600;
  color: #1a6dd4;
  text-decoration: none;
  cursor: pointer;
}
.agent-lib-err-link:hover { text-decoration: underline; }

/* While the fix is applying, the row dims briefly. */
.agent-lib-row.is-updating { opacity: 0.7; }

/* Suggested + search-result rows (compact, with an Add) */
.agent-lib-suggested { display: flex; flex-direction: column; gap: 6px; }
.agent-lib-srow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #eee;
  border-radius: 6px;
}
.agent-lib-srow.added { opacity: 0.55; }
.agent-lib-srow .agent-lib-row-main { flex: 1 1 auto; }
.agent-lib-add {
  border: 1px solid #05628A;
  background: #fff;
  color: #05628A;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.agent-lib-add:hover { background: #05628A; color: #fff; }
.agent-lib-add:disabled {
  border-color: #cfd8dc;
  color: #90a4ae;
  cursor: default;
  background: #fff;
}

/* Search row */
.agent-lib-search { display: flex; flex-direction: column; gap: 10px; }
.agent-lib-search-row { display: flex; gap: 8px; align-items: stretch; }
.agent-lib-search-field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0 10px;
  color: #888;
}
.agent-lib-search-field:focus-within {
  border-color: #05628A;
  color: #05628A;
}
.agent-lib-search-field input {
  border: none;
  outline: none;
  flex: 1 1 auto;
  height: 32px;
  font-size: 13px;
  color: #1a1a1a;
  background: none;
  font-family: inherit;
}
.agent-lib-upload {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
}
.agent-lib-upload:hover { background: #f4f4f4; border-color: #b0b0b0; }
.agent-lib-results { display: flex; flex-direction: column; gap: 6px; }
.agent-lib-results:empty { display: none; }
.agent-lib-results-empty {
  font-size: 12.5px;
  color: #999;
  padding: 4px 2px;
}

/* Dashboard interactivity */
.dash-section {
  cursor: pointer;
}

.sheet-visualization .dash-section {
  cursor: default;
}

.dash-section .section-bg {
  transition: stroke 0.15s, stroke-width 0.15s;
}

.dash-section:hover .section-bg {
  stroke: #4e79a7;
  stroke-width: 2;
}

.sheet-visualization .dash-section:hover .section-bg {
  stroke: #e0e0e0;
  stroke-width: 1;
}

.dash-section.selected .section-bg {
  stroke: #2c5cc5;
  stroke-width: 2.5;
}

.sheet-visualization .dash-section.selected .section-bg {
  stroke: #e0e0e0;
  stroke-width: 1;
}

.dash-mark {
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s;
}

.dash-mark:hover {
  opacity: 1 !important;
  filter: brightness(1.1);
}

.dash-mark.selected:not(g) {
  opacity: 1 !important;
  stroke: #2c5cc5;
  stroke-width: 2.5;
}

g.dash-mark.selected {
  opacity: 1 !important;
}

/* Line chart invisible hit targets */
.dash-mark[data-mark*="Actual"],
.dash-mark[data-mark*="Target"] {
  cursor: pointer;
}

.dash-mark[data-mark*="Actual"]:hover,
.dash-mark[data-mark*="Target"]:hover {
  opacity: 1 !important;
  r: 7;
}

.dash-mark[data-mark*="Actual"].selected,
.dash-mark[data-mark*="Target"].selected {
  opacity: 1 !important;
  r: 7;
}

/* Mention chips */
.mention-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
}

.mention-chips:empty {
  display: none;
}

.mention-chip {
  background: #e8f0fe;
  color: #1a56db;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mention-chip-remove {
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  opacity: 0.6;
}

.mention-chip-remove:hover {
  opacity: 1;
}

.sidebar-input-area .mention-chips {
  padding: 0 16px;
  padding-top: 8px;
}

.msg-mention {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #e8f2fc;
  color: #4082c4;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid #c4ddf2;
  font-weight: 500;
  margin: 2px 0;
  line-height: 1.4;
  cursor: pointer;
}

.msg-mention:hover {
  background: #d4e8f9;
  border-color: #a0c8e8;
}

/* Skills (and commands) read as grey; marks & sheets keep the blue above. */
.msg-mention.mention-skill {
  background: #f0f1f2;
  color: #555;
  border-color: #d6d8da;
}
.msg-mention.mention-skill:hover {
  background: #e6e7e9;
  border-color: #c4c7ca;
}

.canvas-dashboard {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Sweep animation for clearing UI */
.tableau-toolbar,
.dashboard-pane,
.workspace-footer {
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}

.workspace.swept .tableau-toolbar {
  transform: translateY(-100%);
  opacity: 0;
  max-height: 0;
  padding: 0;
  border: none;
}

.sidebar-stack.swept {
  top: 52px;
  bottom: 0;
  transition: top 0.3s ease, bottom 0.3s ease;
}

.sidebar-stack.swept .workspace-chat .sidebar-close {
  display: none !important;
}

.workspace.swept .dashboard-pane {
  transform: translateX(-100%);
  opacity: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  border: none;
}

.workspace.swept .sheet-data-pane,
.workspace.swept .sheet-middle-pane {
  transform: translateX(-100%);
  opacity: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

.workspace.swept .sheet-shelves {
  transform: translateY(-100%);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.workspace.swept .workspace-footer {
  transform: none;
  opacity: 1;
}

/* Blank Sheet View */
.sheet-view {
  display: none;
}

.sheet-view[style*="display: flex"],
.sheet-view.active {
  display: flex !important;
}

.sheet-data-pane {
  width: 160px;
  border-right: 1px solid #d0d0d0;
  background: #fff;
  padding: 0;
  overflow-y: auto;
  flex-shrink: 0;
  font-size: 11px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

.data-pane-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d0d0d0;
  padding: 4px 8px;
  gap: 12px;
}

.data-pane-tab {
  background: none;
  border: none;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  color: #666;
}

.data-pane-tab.active {
  color: #333;
  font-weight: 600;
}

.data-pane-collapse {
  margin-left: auto;
  cursor: pointer;
  color: #999;
}

.data-pane-sources {
  padding: 8px 10px;
  line-height: 1.8;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
}

.data-source-icon {
  color: #888;
  font-size: 10px;
}

.data-pane-search {
  padding: 6px 8px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.data-search-input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 10px;
}

.data-search-icons {
  font-size: 10px;
  color: #888;
}

.data-pane-fields {
  padding: 8px 10px;
}

.data-pane-fields h4 {
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: #333;
}

.field-item {
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-item:hover {
  background: #e8f0fe;
}

.field-icon {
  font-size: 9px;
  margin-right: 4px;
  display: inline-block;
  width: 16px;
  text-align: center;
}

.field-icon.abc {
  color: #4a86c8;
}

.field-icon.num {
  color: #4a9e4a;
}

.field-icon.date {
  color: #4a86c8;
}

/* Middle pane: Pages, Filters, Marks */
.sheet-middle-pane {
  width: 160px;
  border-right: 1px solid #d0d0d0;
  background: #f5f5f5;
  padding: 0;
  flex-shrink: 0;
  overflow-y: auto;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  font-size: 11px;
}

.sheet-section {
  padding: 6px 8px 8px;
  border-bottom: 1px solid #d0d0d0;
  min-height: 40px;
}

.sheet-section h4 {
  font-size: 11px;
  font-weight: 400;
  margin: 0 0 4px 0;
  color: #333;
}

.pages-card,
.filters-card {
  background: #fff;
  border: 1px solid #c8c8c8;
  margin: 6px 6px 4px;
  border-radius: 2px;
  padding: 4px 8px;
  min-height: 36px;
  border-bottom: 1px solid #c8c8c8;
}

.card-drop-area {
  min-height: 16px;
}

.marks-card {
  background: #fff;
  border: 1px solid #c8c8c8;
  margin: 2px 6px 0;
  border-radius: 2px;
  padding: 6px 8px 8px;
  min-height: auto;
}

.marks-card h4 {
  margin-bottom: 6px;
}

.marks-type {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
  padding: 3px 6px;
  border: 1px solid #bbb;
  border-radius: 2px;
  background: #fff;
}

.marks-type-icon {
  font-size: 11px;
  color: #555;
}

.marks-select {
  flex: 1;
  border: none;
  font-size: 11px;
  background: none;
  outline: none;
  color: #333;
}

.marks-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
}

.marks-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  font-size: 9px;
  color: #555;
  cursor: pointer;
  background: #fff;
}

.marks-btn:hover {
  background: #e8f0fe;
  border-color: #a0b8e0;
}

.marks-btn-icon {
  font-size: 13px;
  line-height: 1;
}

.marks-btn-icon.color {
  color: #4a86c8;
}

/* Tableau Pills */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  white-space: nowrap;
  margin: 1px 2px;
  line-height: 1.5;
  cursor: default;
}

.pill-blue {
  background: #a8c4e6;
  color: #1e3a5f;
}

.pill-green {
  background: #a3d69b;
  color: #1a4a1a;
}

.shelf-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  flex: 1;
  min-height: 18px;
  margin-left: 6px;
}

.marks-field {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 0;
  font-size: 10px;
  color: #555;
}

.marks-field-label {
  font-size: 9px;
  color: #666;
  width: 34px;
  flex-shrink: 0;
}

.marks-field-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marks-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

/* Sheet canvas area */
.sheet-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-width: 0;
}

.sheet-canvas-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.sheet-canvas-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sheet-shelves {
  flex-shrink: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  background: #f5f5f5;
  border-bottom: 1px solid #d0d0d0;
}

.sheet-shelf {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 11px;
  color: #666;
}

.sheet-shelf:last-child {
  border-bottom: none;
}

.shelf-label {
  color: #666;
  font-size: 11px;
  white-space: nowrap;
  min-width: 64px;
}

.sheet-title {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 400;
  color: #666;
  flex-shrink: 0;
}

.sheet-canvas-empty {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow-y: auto;
  padding-top: 40px;
}

.sheet-question-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 620px;
  padding: 40px 20px;
}

/* ── EXPERIMENT (body.flow-center-chat): center-chat blank-canvas flow ──
   Phase 1 — reorder the empty state so the Insights/Suggested carousels lead
   and the composer drops to the bottom. Pure flex-order reflow, no DOM change,
   so with the class off the classic layout is untouched. */
body.flow-center-chat .sheet-question-prompt {
  gap: 24px;
}
body.flow-center-chat .sheet-question-prompt > .sheet-prompt-sections {
  order: 1;
  width: 100%;
}
body.flow-center-chat .sheet-question-prompt > .sheet-datasource-suggestions {
  order: 2;
}
body.flow-center-chat .sheet-question-prompt > .sheet-input-wrapper {
  order: 3;
  /* Inset 30px each side (arrow 24px + gap 6px) so the field's outer edges sit
     flush with the insight/suggested cards rather than the carousel arrows. */
  width: calc(100% - 60px);
  /* ~2x the default gap between the last card row and the composer. */
  margin-top: 28px;
}
/* The carousel viewport clips overflow for the horizontal slide, which also
   shaves the cards' bottom border — give it a few px of vertical breathing room. */
body.flow-center-chat .sheet-prompt-viewport {
  padding-bottom: 4px;
}

/* Phase 2a — the "center pose". The same .sidebar-stack that normally docks at
   the right edge is instead laid directly over the visible canvas. Rather than
   hard-code offsets (which only line up in one view), JS measures the currently
   visible canvas and writes top/left/width/height inline — see positionCenterPose().
   This rule only carries the visual treatment: floats over the canvas with a soft
   shadow and no border. The .center-chat-on body class cancels the content-shrink
   margin so the workspace doesn't squeeze while the chat is centered. */
.sidebar-stack.center-pose {
  right: auto;
  bottom: auto;
  border-left: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 8px 40px rgba(0,0,0,0.10);
}
body.center-chat-on .workspace-body.sidebar-open {
  margin-right: 0;
}
/* In the center pose the composer is comfortably wide — cap it so lines stay
   readable and center the message column within the pane. */
.sidebar-stack.center-pose .sidebar-body,
.sidebar-stack.center-pose .sidebar-messages,
.sidebar-stack.center-pose .sidebar-input-area {
  /* Fill most of the pane (modest side gutters) instead of a narrow 720px column
     that left ~188px of dead white on each side of a wide pane. */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Vertical gutter fix: in the classic dock the messages area is flex:1 and grows,
   pinning the composer to the far bottom — which reads as a huge empty gap in the
   center pose's early, sparse conversation. Instead, let messages size to content
   and push the composer to sit just beneath them (a spacer above pins the whole
   group toward the vertical center rather than the top). */
.sidebar-stack.center-pose .sidebar-body {
  justify-content: flex-end;
}
.sidebar-stack.center-pose .sidebar-messages {
  flex: 0 1 auto;
}

/* Headerless center pose: drop the chat header entirely. All of its controls
   live in the ⋯ flyout, which JS relocates into the composer's top-right. */
.sidebar-stack.center-pose .sidebar-header {
  display: none;
}

/* ⋯ wrap parked in the composer's top-right corner (JS adds .in-composer when
   it moves the existing .agent-more-wrap here). The composer already reserves a
   34px bottom band for send/artifacts; the ⋯ sits top-right, clear of the text. */
.agent-more-wrap.in-composer {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 5;
}
.agent-more-wrap.in-composer .sidebar-btn {
  color: var(--gray-dark);
}
/* The composer sits at the pane's bottom, so its flyout must open UPWARD (and
   align to the right edge) instead of dropping down off-screen. */
.agent-more-wrap.in-composer .agent-more-menu {
  top: auto;
  bottom: calc(100% + 6px);
  right: 0;
}

/* Explicit "dock to side" button — hidden by default, shown top-right of the
   composer only in the center pose, just left of the relocated ⋯. */
.center-dock-btn {
  display: none;
}
.sidebar-stack.center-pose .center-dock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 5px;
  right: 34px;
  z-index: 5;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--gray-dark);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-stack.center-pose .center-dock-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

/* ── Phase 2b: the carousels-in-thread accordion ──
   The blank-canvas Insights/Suggested carousels fold into this collapsible
   block pinned at the top of the chat thread, then scroll away as history. */
.thread-carousel-accordion {
  margin: 4px 4px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fbfbfc;
  overflow: hidden;
  /* It's a flex item in the messages column. Without this, flex-shrink squeezes
     the accordion (and its overflow:hidden clips the stacked cards) BEFORE the
     messages list overflows — so tall content got cut off with no scroll. Keep
     its full height and let .sidebar-messages scroll instead. */
  flex-shrink: 0;
}
.thread-carousel-header {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.thread-carousel-header:hover { color: var(--text); }
.tca-chevron {
  transition: transform 0.2s ease;
  color: #999;
}
.thread-carousel-accordion.expanded .tca-chevron {
  transform: rotate(90deg);
}
/* Body collapses to zero height when not expanded. Uses a grid 0fr→1fr track so
   the open state animates to the content's ACTUAL height — no fixed max-height to
   clip tall content (e.g. two stacked carousels in the narrow docked pane). */
.thread-carousel-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
  opacity: 0;
  padding: 0 12px;
}
/* The animatable grid row must contain a min-height:0 overflow-hidden child. */
.thread-carousel-body > * {
  min-height: 0;
  overflow: hidden;
}
.thread-carousel-accordion.expanded .thread-carousel-body {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 4px 12px 14px;
}
/* Inside the thread the carousels lose the big centered blank-canvas treatment:
   tighter section gaps, normal-weight sizing. Headings already styled globally. */
.thread-carousel-body .sheet-prompt-sections {
  gap: 18px;
}

/* Docked pane (narrow): a 3-across carousel squishes the cards to ~90px and
   wraps text one word per line. When NOT in the center pose, stack the tiles
   vertically (one per row, full width) and drop the carousel chrome. The
   carousel JS sets inline flex/width on tiles + a fixed px track width, so these
   need !important to win. */
.sidebar-stack:not(.center-pose) .thread-carousel-body .sheet-prompt-arrow {
  display: none !important;
}
.sidebar-stack:not(.center-pose) .thread-carousel-body .sheet-prompt-viewport {
  overflow: visible;
}
.sidebar-stack:not(.center-pose) .thread-carousel-body .sheet-prompt-tiles {
  flex-direction: column;
  width: auto !important;
  transform: none !important;
  gap: 8px;
}
.sidebar-stack:not(.center-pose) .thread-carousel-body .question-tile {
  flex: 0 0 auto !important;
  width: 100% !important;
}

.sheet-question-input {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  border: 2px solid var(--gray);
  border-radius: 28px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sheet-question-input:focus {
  border-color: var(--teal);
  box-shadow: 0 2px 12px rgba(43, 95, 127, 0.15);
}

.sheet-question-input::placeholder {
  color: #999;
}

.sidebar-open .sheet-question-input {
  display: none;
}

/* Suggested-questions flydown under the sheet input */
.sheet-question-flyout {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.sheet-question-flyout-label {
  font-size: 10px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 10px 4px;
}

.sheet-question-flyout-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  line-height: 1.35;
  transition: background 0.12s;
}

.sheet-question-flyout-item:hover,
.sheet-question-flyout-item.active {
  background: #f4f8fd;
}

.sheet-question-flyout-item .flyout-q-icon {
  flex-shrink: 0;
  color: #4a86c8;
  display: flex;
  align-items: center;
}

.sheet-question-flyout-item .flyout-q-match {
  color: #4a86c8;
  font-weight: 600;
}

.sheet-question-flyout-empty {
  padding: 10px;
  font-size: 12px;
  color: #999;
}

.sheet-datasource-suggestions {
  width: 100%;
  margin-top: 16px;
}

.datasource-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.datasource-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.datasource-tile:hover {
  background: #f5f8fa;
  border-color: #4e79a7;
}

.datasource-icon {
  font-size: 18px;
  color: #4e79a7;
  flex-shrink: 0;
}

.datasource-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.datasource-name {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.datasource-desc {
  font-size: 12px;
  color: #777;
}

.gen-dash-empty-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  max-width: 500px;
  margin: 0 auto;
}

.sheet-prompt-sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sheet-prompt-heading {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
}

.sheet-prompt-tiles {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.sheet-prompt-tiles .question-tile {
  flex: 0 0 calc(33.333% - 7px);
  min-width: 0;
}

.sheet-prompt-carousel {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Clipping viewport that the sliding track lives inside (added by JS). It takes
   the row width; the track is sized in JS to hold the full set of tiles. */
.sheet-prompt-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sheet-prompt-tiles.carousel-track {
  overflow: visible;
  will-change: transform;
}

.sheet-prompt-tiles.carousel-track .question-tile {
  flex-shrink: 0;
}

.sheet-prompt-arrow {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  color: #555;
  cursor: pointer;
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.sheet-prompt-arrow:hover {
  background: #f5f5f5;
}

.question-tile {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  line-height: 1.4;
}

.question-tile:hover {
  border-color: #4a86c8;
  background: #f4f8fd;
}

.insight-tile {
  border-left: 3px solid #f28e2b;
  padding-left: 12px;
}

.insight-cards-row {
  grid-template-columns: 1fr 1fr;
  /* Keep all tiles the same height (stretch to the tallest in view). */
  align-items: stretch;
}

.insight-tile.insight-tile-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 14px;
  /* Reset the .insight-tile left-accent stripe so all four edges are a uniform
     1px border — otherwise the hover recolor "skips" the thicker left edge. */
  border: 1px solid #e0e0e0;
  padding-left: 14px;
}

/* Explicit hover so the blue stroke wins over the uniform-border reset above
   (equal specificity + later source order would otherwise suppress it) and
   recolors all four edges consistently — matching the suggested cards. */
.insight-tile.insight-tile-card:hover {
  border-color: #4a86c8;
  background: #f4f8fd;
}

/* Tinted tag pill (Tableau 10 hue via --insight-color) */
.insight-tile-tag {
  display: inline-block;
  padding: 3px 8px;
  margin-bottom: 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--insight-color, #4e79a7) 78%, #2b2b2b);
  background: color-mix(in srgb, var(--insight-color, #4e79a7) 16%, #fff);
}

.insight-tile-number {
  font-size: 28px;
  font-weight: 500;
  color: var(--insight-color, #2e2e2e);
  line-height: 1;
  margin-bottom: 2px;
}

.insight-tile-headline {
  font-size: 11px;
  font-weight: 600;
  color: #2b3038;
  margin-bottom: 2px;
}

.insight-tile-source {
  font-size: 9px;
  color: #9aa2ad;
  margin-bottom: 6px;
}

.insight-tile-graph {
  width: 100%;
  height: 24px;
  margin-bottom: 6px;
}

.insight-tile-subtext {
  font-size: 10px;
  font-weight: 350;
  color: #888;
  line-height: 1.3;
}

.viz-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.viz-tile-preview {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viz-tile-preview svg {
  width: 100%;
  height: 100%;
}

.viz-tile span {
  font-size: 11px;
  color: #555;
}

.sheet-visualization {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}

.sheet-visualization svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Quick Filter Panel — sits to the right of the chart */
.canvas-filter-panel {
  width: 150px;
  border-left: 1px solid #d0d0d0;
  background: #f5f5f5;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 8px 0;
}

.qf-card {
  margin: 0 8px;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  font-size: 11px;
}

.qf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid #e0e0e0;
  background: #f5f5f5;
}

.qf-title {
  font-weight: 600;
  font-size: 11px;
  color: #333;
}

.qf-menu {
  color: #999;
  font-size: 10px;
  cursor: pointer;
}

.qf-search {
  padding: 5px 8px;
  border-bottom: 1px solid #eee;
}

.qf-search-input {
  width: 100%;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 10px;
  outline: none;
}

.qf-search-input:focus {
  border-color: #4a86c8;
}

.qf-options {
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qf-option {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 2px;
  color: #555;
  font-size: 11px;
}

.qf-option:hover {
  background: #e8f0fe;
}

.qf-option.selected span {
  color: #222;
}

.qf-option input {
  margin: 0;
  width: 11px;
  height: 11px;
}

/* Generated Dashboard View */
.generated-dashboard-canvas {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #fff;
  overflow: hidden;
  padding: 0;
}

.generated-dashboard-canvas .gen-dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
}

.gen-dash-title {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 400;
  color: #666;
  flex-shrink: 0;
}

.gen-dash-content {
  flex: 1;
  min-height: 0;
}

.gen-dash-content svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sheet-item.used {
  opacity: 0.5;
  font-style: italic;
}

/* Component sheets of a composed insight dashboard — real, clickable, not greyed */
.sheet-item.sheet-item-link {
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Workspace Footer */
.workspace-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f5f5;
  border-top: 1px solid #d0d0d0;
  padding: 0 8px;
  flex-shrink: 0;
  height: 28px;
}

.footer-tabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  gap: 0;
}

.footer-tab {
  padding: 5px 10px;
  font-size: 11px;
  color: #555;
  white-space: nowrap;
  cursor: pointer;
  border-right: 1px solid #d0d0d0;
}

.footer-tab:hover {
  background: #e8e8e8;
}

.footer-tab.active {
  background: #fff;
  font-weight: 600;
  color: #333;
}

.footer-tab.icon-tab {
  padding: 5px 8px;
}

/* Tabs opened from conversation artifacts */
.footer-tab.artifact-tab {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #555;
  white-space: nowrap;
  padding-left: 12px;
}

.footer-user {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 8px;
}

.footer-nav {
  font-size: 10px;
  letter-spacing: 2px;
}

.footer-views {
  font-size: 10px;
  letter-spacing: 1px;
}


.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray);
  background: var(--gray-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-header h3 {
  font-size: 18px;
  font-weight: 300;
  color: var(--text);
}

.sidebar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sidebar-btn {
  background: none;
  border: none;
  color: var(--gray-dark);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.sidebar-btn:hover {
  color: var(--text);
  background: rgba(0,0,0,0.05);
}

/* Selected state for the Conversations & Settings toggles — now rows in the ⋯
   flyout. When their panel is open the menu item reads as "checked" (accent
   text + tint) so the flyout still signals which view is active. */
#chatHistoryBtn.active,
#agentSettingsBtn.active {
  background: #e6eef6;
  color: #05628A;
}
#chatHistoryBtn.active:hover,
#agentSettingsBtn.active:hover {
  background: #dbe7f2;
}

/* ⋯ "More" menu (Conversations + Settings) — a header flyout mirroring the
   artifacts flyout's look (white card, soft shadow, rounded, quick fade-in). */
.agent-more-wrap {
  position: relative;
  display: inline-flex;
}
.agent-more-btn-open {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}
.agent-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 176px;
  /* Above the full-pane Conversations/Settings overlays (z-index: 70). */
  z-index: 80;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(30, 53, 87, 0.14);
  padding: 4px;
  animation: artifactsFlyoutIn 0.14s ease;
}
.agent-more-menu.active { display: block; }
.agent-more-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
}
.agent-more-item svg { flex-shrink: 0; color: var(--gray-dark); }
.agent-more-item:hover { background: #f5f8fb; }
.agent-more-item:hover svg { color: var(--text); }
/* When a view is active, tint the whole row (svg included) to the accent. */
.agent-more-item.active svg { color: #05628A; }

/* Transient confirmation toast (e.g. Share → link copied), bottom-center of
   the chat pane, above the input area. Fades in/out via .show. */
.agent-toast {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translate(-50%, 6px);
  z-index: 90;
  max-width: calc(100% - 32px);
  padding: 7px 14px;
  border-radius: 7px;
  background: #2c3e50;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(30, 53, 87, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.agent-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sidebar-btn.sidebar-close svg {
  display: block;
}

.sidebar-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  animation: fadeIn 0.3s ease;
}

.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
  /* Smoothly un-indent when a queued message's turn begins (.msg-pending is
     removed). Transitions the same props the pending state shifts. */
  transition: margin-right 0.28s ease, opacity 0.28s ease;
}

/* Queued follow-up: sent while the agent was still replying to a prior message.
   Indented and dimmed so it reads as "waiting its turn", held below the live
   loader. When its turn runs, .msg-pending is dropped and it slides back level. */
.message.user.msg-pending {
  margin-right: 22px;
  opacity: 0.65;
}

.message.assistant {
  align-self: flex-start;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.msg-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* Per-conversation colored avatar (mockup): white Tableau pinwheel on a solid
   Tableau-10 color field. Clip the square color field to the circle. */
.msg-avatar.agent-color {
  overflow: hidden;
}
.msg-avatar.agent-color svg {
  width: 32px;
  height: 32px;
}

.msg-avatar.user-avatar {
  overflow: hidden;
  background: #f2f3f5;
}

/* Subagent stack — the front avatar with two faded same-color circles peeking
   up-and-to-the-right behind it (echoes the stacked-asset thumbnails in the
   conversations list). The front avatar is the bottom-left card; the two behind
   fade back in opacity. Coexists with Plan/Yolo: the mode glyph rides the front
   face untouched. The .substack-face carries the color + clips the glyph to a
   circle, so the parent can let the peeking cards overflow. */
.msg-avatar.agent-color.has-substack {
  overflow: visible;
  background: none;          /* the face span carries the color now */
  position: relative;
}
.substack-face {
  position: absolute;
  left: 0;
  bottom: 0;                 /* front avatar anchored bottom-left */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;          /* clip the glyph to the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.substack-face svg { width: 32px; height: 32px; }
/* Both behind-cards share ONE lighter tint of the avatar color (not an opacity
   fade — that read mushy), each outlined with a crisp 1.5px stroke a touch
   lighter than the avatar color so their peeking crescents stay cleanly defined
   without competing with the front face. */
.substack-card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sub-color) 46%, #fff);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sub-color) 62%, #fff);
}
/* Nearest card behind: 2px smaller than the front face, nudged up-and-right so
   it still peeks ~2px past the front. (Pinned bottom-left, so shrinking pulls
   toward that corner — the larger offset keeps the peek from being swallowed.) */
.substack-card-1 {
  width: 30px;
  height: 30px;
  transform: translate(3.5px, -3.5px);
  z-index: 2;
}
/* Furthest card: 4px smaller and shifted further, so the discs fan progressively
   smaller back-to-front while each keeps a consistent ~2px crescent. Also a touch
   lighter than card-1 (fill + stroke) so it recedes. */
.substack-card-2 {
  width: 28px;
  height: 28px;
  transform: translate(8px, -8px);
  z-index: 1;
  background: color-mix(in srgb, var(--sub-color) 28%, #fff);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sub-color) 44%, #fff);
}

.msg-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  max-width: calc(100% - 38px);
}

.message.user .msg-bubble {
  background: #f2f3f5;
  color: var(--text);
  border: none;
  border-bottom-right-radius: 4px;
}

.message.assistant .msg-bubble {
  background: none;
  color: var(--text);
  /* No visible bubble, so drop the top padding — the message text top then
     lines up with the top of the agent avatar (rather than its center). */
  padding-top: 0;
  border: none;
}

/* Uploaded-file attachment chips (user message) */
.msg-attachments {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 220px;
  padding: 6px 9px;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 7px;
}
.msg-attachment-icon {
  display: inline-flex;
  color: #6a7885;
  flex-shrink: 0;
}
.msg-attachment-name {
  font-size: 12px;
  color: #3d4b57;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   MESSAGE FEEDBACK (thumbs up / down)
   Hidden by default; shown on the latest agent message (.is-latest) or an older
   one the user clicked (.feedback-revealed). Down-vote unfurls a reason list in
   place — later messages get pushed down because the thread is a flex column.
   ============================================ */
.msg-feedback-wrap {
  margin-top: 4px;
}
.msg-feedback {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Collapsed by default so hidden thumbs take no vertical space */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}
.message.assistant.is-latest .msg-feedback,
.message.assistant.feedback-revealed .msg-feedback,
.msg-feedback-wrap.fb-submitted .msg-feedback {
  max-height: 32px;
  opacity: 1;
}
.msg-fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: #9aa5b1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.msg-fb-btn:hover { background: #eef1f4; color: #5a6b7a; }
.msg-fb-btn:disabled { cursor: default; }
.msg-fb-btn:disabled:hover { background: none; }
/* Down button while its reason list is open */
.msg-fb-down.pending { background: #e6e9ec; color: #5a6b7a; }
/* Locked-in selection — greyscale fill (no red/green) */
.msg-fb-up.active { color: #4a5560; background: #e6e9ec; }
.msg-fb-up.active svg { fill: #4a5560; stroke: #4a5560; }
.msg-fb-down.active { color: #4a5560; background: #e6e9ec; }
.msg-fb-down.active svg { fill: #4a5560; stroke: #4a5560; }
/* "Thought for …" row — sits ABOVE the thumbs. Label is left-aligned; a small
   green done-check is right-justified. Gated like the feedback row so it appears
   and disappears together with the thumbs. */
.msg-fb-thought-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  /* Collapsed by default, same as the thumbs row below it */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.18s ease, opacity 0.18s ease;
}
.message.assistant.is-latest .msg-fb-thought-row,
.message.assistant.feedback-revealed .msg-fb-thought-row,
.msg-feedback-wrap.fb-submitted .msg-fb-thought-row {
  max-height: 24px;
  opacity: 1;
}
.msg-fb-thought {
  font-size: 11px;
  color: #8a94a0;
  white-space: nowrap;
}
.msg-fb-done {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
}
.msg-fb-done svg { display: block; }
/* While a permission ask is pending the "?" badge shows even before hover-reveal,
   so the amber status is visible immediately on the latest message. */
.msg-fb-done.is-pending svg { display: block; }

/* Agent permission-request card */
.permission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.perm-btn {
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
/* Primary (Yes) = filled Tableau blue; the two others are outline/quiet. */
.perm-btn.perm-yes {
  background: #05628A;
  color: #fff;
}
.perm-btn.perm-yes:hover { background: #044d6e; }
.perm-btn.perm-always {
  background: #fff;
  border-color: #05628A;
  color: #05628A;
}
.perm-btn.perm-always:hover { background: #eef5f8; }
.perm-btn.perm-no {
  background: #fff;
  border-color: #d0d5da;
  color: #5a6570;
}
.perm-btn.perm-no:hover { background: #f2f4f6; border-color: #b8bec4; }

/* Resolved: every button becomes light, outline-only, greyed and locked — a
   spent record in the thread. The chosen one is faintly stronger (checkmark +
   slightly darker text/border) so you can still read what was picked. */
.permission-actions.resolved .perm-btn {
  cursor: default;
  background: #fff;
  border-color: #e0e4e8;
  color: #aeb4bb;
  font-weight: 400;
}
.permission-actions.resolved .perm-btn:hover {
  background: #fff;
  border-color: #e0e4e8;
}
.permission-actions.resolved .perm-btn.chosen {
  border-color: #c4cad0;
  color: #6b7480;
}
.permission-actions.resolved .perm-btn.chosen::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  vertical-align: -1px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.8 8.6 9.5 3.4' fill='none' stroke='%236b7480' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.msg-fb-thanks {
  font-size: 11px;
  color: #8a94a0;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.msg-fb-thanks.show { opacity: 1; }

/* ============================================
   STAGED MESSAGE REVEAL
   A fresh assistant message reveals its parts one at a time (text, then UI
   buttons, then the feedback row), with an inline "thinking" loader riding at
   the bottom of the bubble between parts. See stageAssistantReveal() in app.js.
   ============================================ */
/* A part waiting its turn takes no space and can't be interacted with */
.msg-part-hidden {
  display: none !important;
}
/* A part as it lands — brief rise + fade */
.msg-part-in {
  animation: msgPartIn 0.28s ease both;
}
@keyframes msgPartIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Inline loader parked at the bottom of the bubble while parts stream in. The
   small top margin gives it a beat of separation from whatever landed above. */
.msg-inline-loader {
  display: flex;
  align-items: center;
  margin-top: 6px;
  animation: fadeIn 0.2s ease;
}
.msg-inline-loader:first-child { margin-top: 0; }
/* Keep the same white bubble + lower-left tail the avatar-phase loader had, so
   the loader looks continuous as it migrates down. Needs the .message.assistant
   prefix to out-specify `.message.assistant .msg-bubble`, which otherwise strips
   the chrome (background/border/padding) back off. */
.message.assistant .msg-inline-loader .msg-bubble {
  padding: 5px 9px;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  display: inline-flex;
  align-items: center;
  max-width: none;
}

/* Live "…n seconds" counter that appears after 5s of thinking. Sits OUTSIDE the
   loader bubble, as a sibling to its right — in the avatar-phase message row
   (.message.typing) and, once the loader migrates down, in the reveal loader's
   row (.msg-inline-loader). Same muted grey/weight as the "Thought for …" label;
   vertically centered on the bubble. */
.message.typing .msg-loader-elapsed,
.msg-inline-loader .msg-loader-elapsed {
  align-self: center;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: #8a94a0;
  white-space: nowrap;
}

/* Unfurling reason list */
.msg-fb-reasons {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
}
.msg-fb-reasons.open {
  max-height: 260px;
  opacity: 1;
  margin-top: 6px;
}
.msg-fb-reasons-label {
  font-size: 11px;
  font-weight: 600;
  color: #7a8590;
  margin: 0 0 5px 2px;
}
.msg-fb-reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: calc(100% - 4px);
}
.msg-fb-reason {
  padding: 5px 10px;
  border: 1px solid #d8dde2;
  border-radius: 14px;
  background: #fff;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  color: #4a5560;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.msg-fb-reason:hover {
  background: #eef1f4;
  border-color: #b9c2cb;
  color: #33404b;
}
@media (prefers-reduced-motion: reduce) {
  .msg-feedback, .msg-fb-reasons, .msg-fb-thanks { transition: none; }
}

/* Typing loader — a mini bar chart (Tableau 10 palette) inside a little speech
   bubble. Bars ascend in height (short, taller, tallest) and continuously
   undulate — a smooth wave rippling left-to-right via staggered delays. Each
   bar scales between a low and full point of ITS OWN height, so the ascending
   staircase shape is preserved throughout the wave. */
.message.typing .msg-bubble {
  padding: 5px 9px;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 12px;
  /* tail on the lower-left, mirroring the user bubble's lower-right tail */
  border-bottom-left-radius: 4px;
  display: inline-flex;
}

.typing-chart {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 11px; /* fits the tallest bar; shorter bars sit on the baseline */
}

.typing-bar {
  width: 3px;
  border-radius: 1px;
  transform-origin: bottom;
  transform: scaleY(0.3);
  animation: typingUndulate 1s ease-in-out infinite;
}

/* Ascending heights; staggered delays ripple the wave left-to-right (1,2,3) */
.typing-bar:nth-child(1) { background: #4e79a7; height: 6px;  animation-delay: 0s; }
.typing-bar:nth-child(2) { background: #f28e2b; height: 9px;  animation-delay: 0.15s; }
.typing-bar:nth-child(3) { background: #59a14f; height: 11px; animation-delay: 0.3s; }

/* Scales each bar between 30% and 100% of its own height — smooth continuous wave */
@keyframes typingUndulate {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

/* Line-chart loader — the trend line "grows": point 1 lands, the line extends
   to point 2, point 2 lands, extends to point 3, and so on. The polyline draws
   via stroke-dashoffset while each marker pops in as the line reaches it. Then
   it fades and loops. Path length ≈ 14.4, so dasharray 15 hides/reveals it.
   The polyline is child 1; the four markers are children 2–5. */
.typing-line { display: inline-flex; align-items: center; }
/* Line runs to the viewBox edges; let the end dots paint outside the 14×11 box
   without clipping. The box itself stays 14×11 so the bubble doesn't grow. */
.typing-line svg { overflow: visible; }
.typing-line-path {
  fill: none;
  stroke: #4e79a7;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17; /* ≥ path length (~16.1) so the full line hides/reveals */
  stroke-dashoffset: 17;
  animation: typingLineDraw 1.8s linear infinite;
}
.typing-line-dot {
  transform-box: fill-box; /* scale about each dot's own center, not the viewBox */
  transform-origin: center;
  fill: #6f97c4; /* slightly lighter than the #4e79a7 line, so markers read as caps */
}
/* Each marker pops in exactly when the growing line reaches it (≈4/18/31/52%). */
.typing-line-dot:nth-child(2) { animation: typingLineDot1 1.8s ease-out infinite; }
.typing-line-dot:nth-child(3) { animation: typingLineDot2 1.8s ease-out infinite; }
.typing-line-dot:nth-child(4) { animation: typingLineDot3 1.8s ease-out infinite; }
.typing-line-dot:nth-child(5) { animation: typingLineDot4 1.8s ease-out infinite; }

/* Area-chart loader — the line chart in Tableau orange with a translucent fill
   underneath. The line + dots reuse the line-chart draw/pop keyframes (just
   recolored); the fill wipes in L→R and retracts R→L via scaleX, on the same
   draw/hold/retract timeline so they move together. Children: polygon(1),
   polyline(2), dots(3–6). */
.typing-area { display: inline-flex; align-items: center; }
.typing-area svg { overflow: visible; } /* edge dots paint past the 14×11 box */
.typing-area-line { stroke: #f28e2b; } /* recolor the reused line path orange */
.typing-area-fill {
  fill: #f28e2b;
  opacity: 0.28;
  /* Reveal with a left→right CLIP wipe, not scaleX. scaleX squished the whole
     polygon horizontally, which floated the x=13 peak up as a tall triangular
     spike detached from the line (invisible at chat size, obvious when zoomed).
     A clip keeps every fill vertex in place and just uncovers it L→R, so the
     fill always sits under the drawn line. */
  clip-path: inset(0 100% 0 0);
  animation: typingAreaFill 1.8s linear infinite;
}
.typing-area-dot {
  transform-box: fill-box;
  transform-origin: center;
  fill: #f7b46b; /* lighter orange, so markers read as caps on the line */
}
.typing-area-dot:nth-child(3) { animation: typingLineDot1 1.8s ease-out infinite; }
.typing-area-dot:nth-child(4) { animation: typingLineDot2 1.8s ease-out infinite; }
.typing-area-dot:nth-child(5) { animation: typingLineDot3 1.8s ease-out infinite; }
.typing-area-dot:nth-child(6) { animation: typingLineDot4 1.8s ease-out infinite; }

/* Fill mirrors the line's draw/hold/retract: wipe in (0→45%), hold (→55%),
   wipe back out toward the left (→95%). inset(0 100% 0 0) clips everything (right
   inset = full width → nothing shown); 0 all round → fully revealed. */
@keyframes typingAreaFill {
  0%   { clip-path: inset(0 100% 0 0); }
  45%  { clip-path: inset(0 0 0 0); }
  55%  { clip-path: inset(0 0 0 0); }
  95%  { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

/* Pie-chart loader — one continuous clockwise sweep whose paint color changes
   each half-turn, over a blue base disc. Orange fills the first half (top→
   bottom via the right), green the second half (bottom→top via the left):
   after one revolution the pie is half orange / half green. Red then re-sweeps
   the right half from the top (painting over orange), and blue laps the FULL
   circle from the bottom — covering everything back to all-blue, which equals
   the base disc, so the loop is seamless.

   Each wedge is a circle (r=2.5) whose stroke-width (5 = 2×r) fills from center
   to the r=5 edge, matching the base disc. pathLength=100 normalizes the
   circumference to 100 units; stroke-dasharray "100 100" + animated dashoffset
   reveals the arc from its start point (offset 100 = hidden, 50 = half, 0 =
   full). Each wedge's rotate() sets that start: -90 = 12 o'clock, 90 = 6.
   The leading edge is continuous, so we run linear for a constant sweep. Later
   siblings paint on top (base, orange, green, red, blue). */
.typing-pie { display: inline-flex; align-items: center; }
/* Disc is r=6, taller than the 14×11 box — let it paint past without clipping
   so the pie reads bigger while the SVG box (and thus the bubble) stays 14×11. */
.typing-pie svg { overflow: visible; }
.typing-pie-base { fill: #4e79a7; stroke: none; } /* solid blue disc underneath */
/* Wedges paint with stroke only — no fill. (Scoped to the wedge class so it
   doesn't override the base disc's fill via descendant-selector specificity.) */
.typing-pie-wedge {
  fill: none;
  stroke-width: 6;              /* 2×r → fills center-to-edge */
  stroke-linecap: butt;         /* straight radial wedge edges, not rounded */
  stroke-dasharray: 100 100;    /* one dash spans the whole circumference */
  stroke-dashoffset: 100;       /* start hidden */
}
.typing-pie-orange { stroke: #f28e2b; animation: typingPieOrange 2.16s linear infinite; }
.typing-pie-green  { stroke: #59a14f; animation: typingPieGreen  2.16s linear infinite; }
.typing-pie-red    { stroke: #e15759; animation: typingPieRed    2.16s linear infinite; }
.typing-pie-blue   { stroke: #4e79a7; animation: typingPieBlue   2.16s linear infinite; }

/* One radius line sweeping at a CONSTANT angular speed (500°/s). It covers
   orange 180° + green 180° + red 180° + blue 360° = 900° of visible painting,
   then coasts a final 180° over the finished all-blue disc — the pause the
   user asked for, framed as the invisible radius line traveling from blue's
   finish (6 o'clock) back to orange's start (12 o'clock). 1080° total = exactly
   3 revolutions, so the loop is seamless. Time splits 1/6 each for the three
   half-sweeps, 1/3 for blue's lap, 1/6 for the coast: 16.67/16.67/16.67/33.33/
   16.67 → cumulative 16.67 / 33.33 / 50 / 83.33 / 100%.
   Each wedge holds once grown (the next color paints over it), so nothing
   visibly retracts. */
@keyframes typingPieOrange {         /* first half, 0→16.67%, then hold */
  0%   { stroke-dashoffset: 100; }
  16.67% { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 50; }
}
@keyframes typingPieGreen {          /* second half, 16.67→33.33%, then hold */
  0%, 16.67% { stroke-dashoffset: 100; }
  33.33%     { stroke-dashoffset: 50; }
  100%       { stroke-dashoffset: 50; }
}
@keyframes typingPieRed {            /* right half again, 33.33→50%, then hold */
  0%, 33.33% { stroke-dashoffset: 100; }
  50%        { stroke-dashoffset: 50; }
  100%       { stroke-dashoffset: 50; }
}
@keyframes typingPieBlue {           /* full lap, 50→83.33%, then coast all-blue */
  0%, 50% { stroke-dashoffset: 100; }
  83.33%  { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}

/* Donut loader — the pie loader with a hole. Same continuous clockwise sweep
   and REUSES the pie's typingPie* keyframes. Only the geometry differs: each
   ring is a circle at r=4.4 with a thin stroke-width (3.2) — so it paints a
   band from r≈2.8 to r=6, leaving the center hole — instead of the pie's
   center-filling stroke. Colors match the reference glyph (coral/red + blues).
   pathLength=100 keeps the dash math identical to the pie. */
.typing-donut { display: inline-flex; align-items: center; }
.typing-donut svg { overflow: visible; } /* r=6 outer edge paints past the box */
.typing-donut-base { fill: none; stroke: #6b9ac4; stroke-width: 3.2; } /* base ring under */
.typing-donut-ring {
  fill: none;
  stroke-width: 3.2;           /* thinner than radius → ring, not full wedge */
  stroke-linecap: butt;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;      /* start hidden */
}
.typing-donut-orange { stroke: #f28e2b; animation: typingPieOrange 2.16s linear infinite; }
.typing-donut-green  { stroke: #59a14f; animation: typingPieGreen  2.16s linear infinite; }
.typing-donut-red    { stroke: #e15759; animation: typingPieRed    2.16s linear infinite; }
.typing-donut-blue   { stroke: #6b9ac4; animation: typingPieBlue   2.16s linear infinite; }

/* Horizontal bar chart with cell-level reference lines — the horizontal cousin
   of the bar loader (0). 3 rows: each a light track + a colored fill that
   undulates in WIDTH via scaleX (origin left) in 3 Tableau colors, with
   staggered delays so the rows ripple. A dark reference tick per row drifts
   right as its bar grows. Fills/refs share per-row delays (hb-a/b/c). */
.typing-hbar { display: inline-flex; align-items: center; }
.typing-hbar-track { fill: #e4e6e9; } /* light grey track behind each bar */
.typing-hbar-fill {
  transform-box: fill-box;    /* scaleX about the fill's own left edge */
  transform-origin: left;
  transform: scaleX(0.35);
  animation: typingHbarGrow 1.2s ease-in-out infinite;
}
.typing-hbar-fill.hb-a { fill: #4e79a7; animation-delay: 0s; }
.typing-hbar-fill.hb-b { fill: #f28e2b; animation-delay: 0.15s; }
.typing-hbar-fill.hb-c { fill: #59a14f; animation-delay: 0.3s; }
.typing-hbar-ref {
  fill: #545862;              /* dark tick, like the reference marks in the ref */
  transform-box: fill-box;
  transform-origin: center;
  animation: typingHbarRef 1.2s ease-in-out infinite;
}
.typing-hbar-ref.hb-a { animation-delay: 0s; }
.typing-hbar-ref.hb-b { animation-delay: 0.15s; }
.typing-hbar-ref.hb-c { animation-delay: 0.3s; }

/* Fill scales between 35% and 100% of its own width — smooth horizontal wave */
@keyframes typingHbarGrow {
  0%, 100% { transform: scaleX(0.35); }
  50%      { transform: scaleX(1); }
}
/* Reference tick drifts right as the bar grows, back as it shrinks */
@keyframes typingHbarRef {
  0%, 100% { transform: translateX(-2px); }
  50%      { transform: translateX(0.8px); }
}

/* Treemap loader — 6 tiles (blue family + coral & red accents) that tile the
   box with thin gaps. Tiles pop in largest→smallest (A,G,D,C,E,F), hold, then
   pop out smallest→largest: a nested symmetric wave, so the biggest tile is
   first-in / last-out. Each tile's visible window is nested inside the
   previous one's and centered on ~mid-cycle, so entrance mirrors exit (same
   trick as the scatter). Each needs its own keyframe to reverse the exit
   order. Colors sampled from the reference: blues on the structural tiles,
   coral + red on the two smallest. */
.typing-treemap { display: inline-flex; align-items: center; }
.typing-tm {
  transform-box: fill-box;   /* scale about each tile's own center */
  transform-origin: center;
  rx: 0.4;                    /* subtle rounded corners */
}
.typing-tm-a { fill: #6b9ac4; animation: typingTmA 1.8s ease-in-out infinite; } /* largest */
.typing-tm-g { fill: #a7c3de; animation: typingTmG 1.8s ease-in-out infinite; }
.typing-tm-d { fill: #4e79a7; animation: typingTmD 1.8s ease-in-out infinite; }
.typing-tm-c { fill: #8fb4d6; animation: typingTmC 1.8s ease-in-out infinite; }
.typing-tm-e { fill: #f2a693; animation: typingTmE 1.8s ease-in-out infinite; } /* coral */
.typing-tm-f { fill: #e15759; animation: typingTmF 1.8s ease-in-out infinite; } /* red */

/* Nested symmetric windows, ordered A → middle column top-down (C,E,F) → 3rd
   column bottom-up (G,D). A is widest (first-in/last-out); D is narrowest
   (last-in/first-out). Each window nests inside the previous, so pop-out
   reverses pop-in: D,G,F,E,C,A. Pop-in edges 5/16/22/28/34/40%.
   Pop-outs finish early (A gone by 92%) so the box holds EMPTY from ~92%→100%
   →5% next cycle — a beat of white space before the treemap rebuilds. */
@keyframes typingTmA { 0%{transform:scale(0);opacity:0} 5%,87%{transform:scale(1);opacity:1} 92%,100%{transform:scale(0);opacity:0} }
@keyframes typingTmC { 0%,11%{transform:scale(0);opacity:0} 16%,81%{transform:scale(1);opacity:1} 86%,100%{transform:scale(0);opacity:0} }
@keyframes typingTmE { 0%,17%{transform:scale(0);opacity:0} 22%,75%{transform:scale(1);opacity:1} 80%,100%{transform:scale(0);opacity:0} }
@keyframes typingTmF { 0%,23%{transform:scale(0);opacity:0} 28%,69%{transform:scale(1);opacity:1} 74%,100%{transform:scale(0);opacity:0} }
@keyframes typingTmG { 0%,29%{transform:scale(0);opacity:0} 34%,63%{transform:scale(1);opacity:1} 68%,100%{transform:scale(0);opacity:0} }
@keyframes typingTmD { 0%,35%{transform:scale(0);opacity:0} 40%,57%{transform:scale(1);opacity:1} 62%,100%{transform:scale(0);opacity:0} }

/* Sankey loader — the classic crossing-flows glyph. Build: left bar grows up
   (bottom segment then top), two curved bands snake out L→R and cross, right
   bar grows up (light-blue bottom then orange top). Then it all reverses (right
   bar down, bands retract R→L, left bar down) and holds EMPTY ~90→100% before
   looping. Bars are rects scaled up from their base (scaleY, origin bottom);
   bands are thick-stroked beziers drawn via stroke-dashoffset (pathLength=100,
   so offset 100=hidden, 0=full). Bands are behind the bars so the bars cover
   the flat band ends. Each element's stagger lives in its keyframe %s. */
.typing-sankey { display: inline-flex; align-items: center; }
.typing-sk-link {
  fill: none;
  stroke-linecap: butt;
  /* Gap (140) LONGER than the dash (100) so the "hidden" state parks the dash
     fully off the path end, past the endpoint — with an equal 100/100 dash the
     seam landed exactly on the x≈11.4 endpoint, leaving a residual vertical
     stroke sliver there. Harmless at chat size, a clear hairline when zoomed
     (and exposed during the empty beat when the right bar isn't covering it).
     Offset 120 (was 100) hides it fully; the draw keyframes run 120→0. */
  stroke-dasharray: 100 140;
  stroke-dashoffset: 120;      /* start hidden, seam parked past the path end */
}
/* Blue ribbon thicker, orange thinner — emphasizes the contrast between flows.
   Each ribbon's stroke-width MATCHES the height of the two bars it links (blue
   4.2, orange 2.6), so a single-flow node reads as "bar height = flow width" —
   the noodles meet the blocks flush instead of over/under-shooting them. */
.typing-sk-link-a { stroke: #89b2d3; stroke-width: 4.2; opacity: 0.6; animation: typingSkBandA 2.4s linear infinite; } /* → blue bottom */
.typing-sk-link-b { stroke: #f4b58e; stroke-width: 2.6; opacity: 0.6; animation: typingSkBandB 2.4s linear infinite; } /* → orange top */
.typing-sk-bar {
  transform-box: fill-box;     /* scale about the rect's own box */
  transform-origin: bottom;    /* grow up from the baseline */
  transform: scaleY(0);        /* start collapsed */
}
.typing-sk-lt { fill: #6b9ac4; animation: typingSkLT 2.4s ease-out infinite; } /* left top */
.typing-sk-lb { fill: #4e79a7; animation: typingSkLB 2.4s ease-out infinite; } /* left bottom */
.typing-sk-rt { fill: #f28e2b; animation: typingSkRT 2.4s ease-out infinite; } /* right top (orange) */
.typing-sk-rb { fill: #8fb4d6; animation: typingSkRB 2.4s ease-out infinite; } /* right bottom */

/* Build 0→40%, hold →50%, reverse →90%, empty beat →100%. Bars: hidden
   scaleY(0) → grown scaleY(1) → hidden again, in reverse order on the way out. */
@keyframes typingSkLB {  /* first up, last down */
  0%   { transform: scaleY(0); }
  6%   { transform: scaleY(1); }
  84%  { transform: scaleY(1); }
  90%  { transform: scaleY(0); }
  100% { transform: scaleY(0); }
}
@keyframes typingSkLT {
  0%, 5% { transform: scaleY(0); }
  11%    { transform: scaleY(1); }
  79%    { transform: scaleY(1); }
  85%    { transform: scaleY(0); }
  100%   { transform: scaleY(0); }
}
@keyframes typingSkRB {
  0%, 29% { transform: scaleY(0); }
  35%     { transform: scaleY(1); }
  55%     { transform: scaleY(1); }
  61%     { transform: scaleY(0); }
  100%    { transform: scaleY(0); }
}
@keyframes typingSkRT {  /* last up, first down */
  0%, 34% { transform: scaleY(0); }
  40%     { transform: scaleY(1); }
  50%     { transform: scaleY(1); }
  56%     { transform: scaleY(0); }
  100%    { transform: scaleY(0); }
}
/* Bands: draw L→R (offset 100→0) after the left bar, hold, retract R→L
   (offset 0→100) before the left bar comes down. */
@keyframes typingSkBandA {
  0%, 12% { stroke-dashoffset: 120; }
  28%     { stroke-dashoffset: 0; }
  62%     { stroke-dashoffset: 0; }
  78%     { stroke-dashoffset: 120; }
  100%    { stroke-dashoffset: 120; }
}
@keyframes typingSkBandB {
  0%, 14% { stroke-dashoffset: 120; }
  30%     { stroke-dashoffset: 0; }
  60%     { stroke-dashoffset: 0; }
  76%     { stroke-dashoffset: 120; }
  100%    { stroke-dashoffset: 120; }
}

/* Scatter-plot loader — four Tableau 10 points appear in order
   blue→orange→green→red, then vanish in reverse (red→green→orange→blue): a
   symmetric in-and-out wave. Blue is first-in / last-out, red is last-in /
   first-out, so the entrance and exit mirror each other. Each dot needs its
   own keyframe because a plain delay can't reverse the exit order. */
/* Nudged 1px left: the top-right red dot skews the visual weight rightward,
   so shift the whole plot to re-center it in the bubble. */
.typing-scatter { display: inline-flex; align-items: center; margin-left: -1px; }
.typing-dot {
  transform-box: fill-box; /* scale about each dot's own center, not the viewBox */
  transform-origin: center;
}
.typing-dot:nth-child(1) { fill: #4e79a7; animation: typingScatterBlue   1.8s ease-in-out infinite; }
.typing-dot:nth-child(2) { fill: #f28e2b; animation: typingScatterOrange 1.8s ease-in-out infinite; }
.typing-dot:nth-child(3) { fill: #59a14f; animation: typingScatterGreen  1.8s ease-in-out infinite; }
.typing-dot:nth-child(4) { fill: #e15759; animation: typingScatterRed    1.8s ease-in-out infinite; }

/* Line grows left-to-right (offset 17→0), holds, then RETRACTS right-to-left
   (offset 0→17) — the mirror of the draw. Raising the offset shrinks the
   visible segment from the right end back toward the start, so the line
   "un-draws" point by point. No opacity fade needed; retraction hides it. */
@keyframes typingLineDraw {
  0%   { stroke-dashoffset: 17; }
  45%  { stroke-dashoffset: 0;  }  /* fully drawn */
  55%  { stroke-dashoffset: 0;  }  /* hold */
  95%  { stroke-dashoffset: 17; }  /* fully retracted */
  100% { stroke-dashoffset: 17; }
}
/* Each marker pops in as the growing line reaches it, then pops out as the
   retracting line passes back over it. Vanish order mirrors appear order:
   dot4 (tip) goes first, dot1 (start) goes last, so the line empties R→L. */
@keyframes typingLineDot1 {          /* first in ~5%, last out ~95% */
  0%   { transform: scale(0); opacity: 0; }
  5%   { transform: scale(1); opacity: 1; }
  92%  { transform: scale(1); opacity: 1; }
  97%  { transform: scale(0); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes typingLineDot2 {          /* in ~18%, out ~82% */
  0%, 11% { transform: scale(0); opacity: 0; }
  18%     { transform: scale(1); opacity: 1; }
  80%     { transform: scale(1); opacity: 1; }
  85%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}
@keyframes typingLineDot3 {          /* in ~31%, out ~72% */
  0%, 24% { transform: scale(0); opacity: 0; }
  31%     { transform: scale(1); opacity: 1; }
  70%     { transform: scale(1); opacity: 1; }
  75%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}
@keyframes typingLineDot4 {          /* last in ~52%, first out ~58% */
  0%, 45% { transform: scale(0); opacity: 0; }
  52%     { transform: scale(1); opacity: 1; }
  56%     { transform: scale(1); opacity: 1; }
  61%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}
/* Scatter dots — nested symmetric wave. Appear order blue→orange→green→red
   (5/15/25/35%), all hold briefly around mid-cycle, then disappear in reverse
   red→green→orange→blue. Each dot's visible window is centered on ~47.5% and
   nested inside the previous one, so entrance and exit mirror each other. */
@keyframes typingScatterBlue {   /* first in, last out */
  0%      { transform: scale(0); opacity: 0; }
  5%      { transform: scale(1); opacity: 1; }
  85%     { transform: scale(1); opacity: 1; }
  90%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}
@keyframes typingScatterOrange {
  0%, 10% { transform: scale(0); opacity: 0; }
  15%     { transform: scale(1); opacity: 1; }
  75%     { transform: scale(1); opacity: 1; }
  80%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}
@keyframes typingScatterGreen {
  0%, 20% { transform: scale(0); opacity: 0; }
  25%     { transform: scale(1); opacity: 1; }
  65%     { transform: scale(1); opacity: 1; }
  70%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}
@keyframes typingScatterRed {    /* last in, first out */
  0%, 30% { transform: scale(0); opacity: 0; }
  35%     { transform: scale(1); opacity: 1; }
  55%     { transform: scale(1); opacity: 1; }
  60%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}

/* ============================================================================
   COLOR VARIANTS — 4 recolors per shape (36 loaders total).
   Every loader root also carries a variant class: .lv-1 (the original palette),
   .lv-2, .lv-3, .lv-4. These rules ONLY restate fill/stroke/background colors;
   geometry, motion, timing and keyframes are inherited unchanged from the base
   rules above. All colors are drawn from the existing loader palette — no new
   hues are introduced. For the core-4 shapes the variants rotate the Tableau 10
   wheel (blue→orange→green→red ⇒ orange→green→red→blue ⇒ …); tint-family shapes
   (treemap, sankey, donut-base) shift to an analogous coherent family.
   ============================================================================ */

/* ---- 0 · BAR CHART — rotate the 3 lead colors through the Tableau wheel ---- */
.typing-chart.lv-2 .typing-bar:nth-child(1) { background: #f28e2b; }
.typing-chart.lv-2 .typing-bar:nth-child(2) { background: #59a14f; }
.typing-chart.lv-2 .typing-bar:nth-child(3) { background: #e15759; }
.typing-chart.lv-3 .typing-bar:nth-child(1) { background: #59a14f; }
.typing-chart.lv-3 .typing-bar:nth-child(2) { background: #e15759; }
.typing-chart.lv-3 .typing-bar:nth-child(3) { background: #4e79a7; }
.typing-chart.lv-4 .typing-bar:nth-child(1) { background: #e15759; }
.typing-chart.lv-4 .typing-bar:nth-child(2) { background: #4e79a7; }
.typing-chart.lv-4 .typing-bar:nth-child(3) { background: #f28e2b; }

/* ---- 1 · LINE CHART — recolor line + its lighter cap dots ------------------ */
.typing-line.lv-2 .typing-line-path { stroke: #f28e2b; }
.typing-line.lv-2 .typing-line-dot  { fill: #f7b46b; }
.typing-line.lv-3 .typing-line-path { stroke: #59a14f; }
.typing-line.lv-3 .typing-line-dot  { fill: #59a14f; } /* green line → green dots */
.typing-line.lv-4 .typing-line-path { stroke: #e15759; }
.typing-line.lv-4 .typing-line-dot  { fill: #f2a693; }

/* ---- 2 · SCATTER — rotate the 4-dot sequence through the Tableau wheel ----- */
.typing-scatter.lv-2 .typing-dot:nth-child(1) { fill: #f28e2b; }
.typing-scatter.lv-2 .typing-dot:nth-child(2) { fill: #59a14f; }
.typing-scatter.lv-2 .typing-dot:nth-child(3) { fill: #e15759; }
.typing-scatter.lv-2 .typing-dot:nth-child(4) { fill: #4e79a7; }
.typing-scatter.lv-3 .typing-dot:nth-child(1) { fill: #59a14f; }
.typing-scatter.lv-3 .typing-dot:nth-child(2) { fill: #e15759; }
.typing-scatter.lv-3 .typing-dot:nth-child(3) { fill: #4e79a7; }
.typing-scatter.lv-3 .typing-dot:nth-child(4) { fill: #f28e2b; }
.typing-scatter.lv-4 .typing-dot:nth-child(1) { fill: #e15759; }
.typing-scatter.lv-4 .typing-dot:nth-child(2) { fill: #4e79a7; }
.typing-scatter.lv-4 .typing-dot:nth-child(3) { fill: #f28e2b; }
.typing-scatter.lv-4 .typing-dot:nth-child(4) { fill: #59a14f; }

/* ---- 3 · AREA CHART — recolor line, translucent fill, and cap dots --------- */
.typing-area.lv-2 .typing-area-line { stroke: #59a14f; }
.typing-area.lv-2 .typing-area-fill { fill: #59a14f; }
.typing-area.lv-2 .typing-area-dot  { fill: #59a14f; } /* green area → green dots */
.typing-area.lv-3 .typing-area-line { stroke: #e15759; }
.typing-area.lv-3 .typing-area-fill { fill: #e15759; }
.typing-area.lv-3 .typing-area-dot  { fill: #f2a693; }
.typing-area.lv-4 .typing-area-line { stroke: #4e79a7; }
.typing-area.lv-4 .typing-area-fill { fill: #4e79a7; }
.typing-area.lv-4 .typing-area-dot  { fill: #6f97c4; }

/* ---- 4 · PIE CHART — rotate the sweep colors; base disc = the final color -- */
.typing-pie.lv-2 .typing-pie-base   { fill: #f28e2b; }
.typing-pie.lv-2 .typing-pie-orange { stroke: #59a14f; }
.typing-pie.lv-2 .typing-pie-green  { stroke: #e15759; }
.typing-pie.lv-2 .typing-pie-red    { stroke: #4e79a7; }
.typing-pie.lv-2 .typing-pie-blue   { stroke: #f28e2b; }
.typing-pie.lv-3 .typing-pie-base   { fill: #59a14f; }
.typing-pie.lv-3 .typing-pie-orange { stroke: #e15759; }
.typing-pie.lv-3 .typing-pie-green  { stroke: #4e79a7; }
.typing-pie.lv-3 .typing-pie-red    { stroke: #f28e2b; }
.typing-pie.lv-3 .typing-pie-blue   { stroke: #59a14f; }
.typing-pie.lv-4 .typing-pie-base   { fill: #e15759; }
.typing-pie.lv-4 .typing-pie-orange { stroke: #4e79a7; }
.typing-pie.lv-4 .typing-pie-green  { stroke: #f28e2b; }
.typing-pie.lv-4 .typing-pie-red    { stroke: #59a14f; }
.typing-pie.lv-4 .typing-pie-blue   { stroke: #e15759; }

/* ---- 5 · TREEMAP — shift the tile family; keep 2 warm accents on the small tiles.
   lv-1 is the blue family + coral/red. Variants recolor within allowed hues. */
/* lv-2 — warm-led: coral/orange family structure, blue + green accents */
.typing-treemap.lv-2 .typing-tm-a { fill: #f4b58e; }
.typing-treemap.lv-2 .typing-tm-g { fill: #f7b46b; }
.typing-treemap.lv-2 .typing-tm-d { fill: #f28e2b; }
.typing-treemap.lv-2 .typing-tm-c { fill: #f2a693; }
.typing-treemap.lv-2 .typing-tm-e { fill: #89b2d3; }
.typing-treemap.lv-2 .typing-tm-f { fill: #59a14f; }
/* lv-3 — RED-dominant: the big tile is red, supported by warm coral/orange
   tints with two cool blue accents for contrast (palette has no red tints, so
   red carries the dominance via the largest tile). */
.typing-treemap.lv-3 .typing-tm-a { fill: #e15759; } /* largest → red */
.typing-treemap.lv-3 .typing-tm-g { fill: #f4b58e; }
.typing-treemap.lv-3 .typing-tm-d { fill: #f2a693; }
.typing-treemap.lv-3 .typing-tm-c { fill: #f28e2b; }
.typing-treemap.lv-3 .typing-tm-e { fill: #6b9ac4; }
.typing-treemap.lv-3 .typing-tm-f { fill: #89b2d3; }
/* lv-4 — GREEN-dominant: the big tile is green, supported by an analogous blue
   family with two warm accents (palette has no green tints, so green carries
   the dominance via the largest tile). */
.typing-treemap.lv-4 .typing-tm-a { fill: #59a14f; } /* largest → green */
.typing-treemap.lv-4 .typing-tm-g { fill: #8fb4d6; }
.typing-treemap.lv-4 .typing-tm-d { fill: #6b9ac4; }
.typing-treemap.lv-4 .typing-tm-c { fill: #89b2d3; }
.typing-treemap.lv-4 .typing-tm-e { fill: #f28e2b; }
.typing-treemap.lv-4 .typing-tm-f { fill: #f2a693; }

/* ---- 6 · SANKEY — recolor the crossing bands + the four bar segments -------
   Keep the "one warm flow, one cool flow" contrast; rotate which is which. */
.typing-sankey.lv-2 .typing-sk-link-a { stroke: #f4b58e; }
.typing-sankey.lv-2 .typing-sk-link-b { stroke: #89b2d3; }
.typing-sankey.lv-2 .typing-sk-lt { fill: #f4b58e; }
.typing-sankey.lv-2 .typing-sk-lb { fill: #f28e2b; }
.typing-sankey.lv-2 .typing-sk-rt { fill: #59a14f; }
.typing-sankey.lv-2 .typing-sk-rb { fill: #6b9ac4; }
.typing-sankey.lv-3 .typing-sk-link-a { stroke: #89b2d3; }
.typing-sankey.lv-3 .typing-sk-link-b { stroke: #f4b58e; }
.typing-sankey.lv-3 .typing-sk-lt { fill: #59a14f; }
.typing-sankey.lv-3 .typing-sk-lb { fill: #4e79a7; }
.typing-sankey.lv-3 .typing-sk-rt { fill: #e15759; }
.typing-sankey.lv-3 .typing-sk-rb { fill: #8fb4d6; }
.typing-sankey.lv-4 .typing-sk-link-a { stroke: #f4b58e; }
.typing-sankey.lv-4 .typing-sk-link-b { stroke: #89b2d3; }
.typing-sankey.lv-4 .typing-sk-lt { fill: #f2a693; }
.typing-sankey.lv-4 .typing-sk-lb { fill: #e15759; }
.typing-sankey.lv-4 .typing-sk-rt { fill: #4e79a7; }
.typing-sankey.lv-4 .typing-sk-rb { fill: #a7c3de; }

/* ---- 7 · DONUT — rotate the sweep colors; base ring shifts within the family */
.typing-donut.lv-2 .typing-donut-base   { stroke: #f4b58e; }
.typing-donut.lv-2 .typing-donut-orange { stroke: #59a14f; }
.typing-donut.lv-2 .typing-donut-green  { stroke: #e15759; }
.typing-donut.lv-2 .typing-donut-red    { stroke: #4e79a7; }
.typing-donut.lv-2 .typing-donut-blue   { stroke: #f4b58e; }
.typing-donut.lv-3 .typing-donut-base   { stroke: #8fb4d6; }
.typing-donut.lv-3 .typing-donut-orange { stroke: #e15759; }
.typing-donut.lv-3 .typing-donut-green  { stroke: #4e79a7; }
.typing-donut.lv-3 .typing-donut-red    { stroke: #f28e2b; }
.typing-donut.lv-3 .typing-donut-blue   { stroke: #8fb4d6; }
.typing-donut.lv-4 .typing-donut-base   { stroke: #f2a693; }
.typing-donut.lv-4 .typing-donut-orange { stroke: #4e79a7; }
.typing-donut.lv-4 .typing-donut-green  { stroke: #f28e2b; }
.typing-donut.lv-4 .typing-donut-red    { stroke: #59a14f; }
.typing-donut.lv-4 .typing-donut-blue   { stroke: #f2a693; }

/* ---- 8 · HORIZONTAL BARS — rotate the 3 fill colors (refs stay dark grey) -- */
.typing-hbar.lv-2 .typing-hbar-fill.hb-a { fill: #f28e2b; }
.typing-hbar.lv-2 .typing-hbar-fill.hb-b { fill: #59a14f; }
.typing-hbar.lv-2 .typing-hbar-fill.hb-c { fill: #e15759; }
.typing-hbar.lv-3 .typing-hbar-fill.hb-a { fill: #59a14f; }
.typing-hbar.lv-3 .typing-hbar-fill.hb-b { fill: #e15759; }
.typing-hbar.lv-3 .typing-hbar-fill.hb-c { fill: #4e79a7; }
.typing-hbar.lv-4 .typing-hbar-fill.hb-a { fill: #e15759; }
.typing-hbar.lv-4 .typing-hbar-fill.hb-b { fill: #4e79a7; }
.typing-hbar.lv-4 .typing-hbar-fill.hb-c { fill: #f28e2b; }

/* Respect reduced-motion: show the finished chart statically, no animation */
@media (prefers-reduced-motion: reduce) {
  .typing-bar {
    animation: none;
    transform: scaleY(0.6);
  }
  .typing-line-path {
    animation: none;
    stroke-dashoffset: 0; /* show the full line */
  }
  /* Cover both the rest state AND the hover-draw rules (higher specificity),
     so reduced-motion users never get the on-hover animation either. */
  .error-line-path,
  .agent-error-banner:hover .error-line-path {
    animation: none;
    stroke-dashoffset: 0; /* show the full (descending) error line, static */
  }
  .error-line-dot,
  .agent-error-banner:hover .error-line-dot {
    animation: none;
    transform: scale(0.85);
    opacity: 0.85;
  }
  .typing-line-dot, .typing-dot, .typing-area-dot {
    animation: none;
    transform: scale(0.85);
    opacity: 0.85;
  }
  .typing-area-fill {
    animation: none;
    transform: scaleX(1); /* show the full filled area */
  }
  .typing-pie-wedge {
    animation: none;
    stroke-dashoffset: 100; /* hide wedges; the blue base disc shows statically */
  }
  .typing-donut-ring {
    animation: none;
    stroke-dashoffset: 100; /* hide rings; the base ring shows statically */
  }
  .typing-hbar-fill {
    animation: none;
    transform: scaleX(0.7); /* show bars at a calm mid-length */
  }
  .typing-hbar-ref {
    animation: none;
    transform: translateX(0);
  }
  .typing-tm {
    animation: none;
    transform: scale(1);
    opacity: 0.9; /* show the full treemap statically */
  }
  .typing-sk-bar {
    animation: none;
    transform: scaleY(1); /* show bars at full height */
  }
  .typing-sk-link {
    animation: none;
    stroke-dashoffset: 0; /* show the full bands */
  }
}

/* "Jump back into" cards in the intro message */
.resume-convo-heading {
  color: #666;
}
/* Extra breathing room around the "or describe a task…" divider line.
   Needs .msg-intro.examples-lead specificity to beat .msg-intro's margin shorthand. */
.msg-intro.examples-lead {
  margin-top: 12px;
  margin-bottom: 12px;
}
.resume-convo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.resume-convo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.resume-convo-card:hover {
  border-color: #b9cbdb;
  box-shadow: 0 1px 4px rgba(30, 53, 87, 0.08);
}
.resume-convo-card .convo-thumb {
  width: 40px;
  height: 30px;
}
.resume-convo-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.resume-convo-title {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resume-convo-preview {
  font-size: 10.5px;
  color: #8a8a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg-intro {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
}

.msg-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg-suggestion-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fafafa;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #333;
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s;
}

.msg-suggestion-btn:hover {
  background: #f0f6ff;
  border-color: #4a86c8;
}

.msg-suggestion-btn:hover .suggestion-title {
  color: #1a3a6b;
}

.suggestion-title {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: #444;
  margin-bottom: 2px;
}

.suggestion-body {
  display: block;
  font-size: 13px;
  color: #666;
  font-weight: 400;
}

/* Checklist multi-select variant */
.msg-checklist {
  gap: 4px;
}

.msg-accordion {
  margin-top: 8px;
}

.msg-accordion:first-child {
  margin-top: 0;
}

.msg-accordion-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #f5f7fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.msg-accordion-header:hover {
  background: #eef2f7;
}

.msg-accordion-arrow {
  font-size: 18px;
  color: #666;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.msg-accordion:not(.collapsed) .msg-accordion-arrow {
  transform: rotate(90deg);
}

.msg-accordion-title {
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  flex: 1;
}

.msg-accordion-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.msg-accordion-count {
  font-size: 11px;
  color: #888;
  line-height: 1;
}

.msg-accordion-priority {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

.priority-high {
  color: #e74c3c;
}

.priority-medium {
  color: #f39c12;
}

.priority-low {
  color: #27ae60;
}

.msg-accordion-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.msg-accordion.collapsed .msg-accordion-body {
  display: none;
}

.msg-check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fafafa;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.msg-check-item:hover {
  background: #f0f6ff;
  border-color: #4a86c8;
}

.msg-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #05628A;
}

.msg-check-content {
  display: flex;
  flex-direction: column;
}

.msg-check-content .suggestion-title {
  font-size: 13px;
}

.msg-check-content .suggestion-body {
  font-size: 12px;
}

.msg-apply-btn {
  margin-top: 10px;
  background: #05628A;
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 8px 20px;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.msg-apply-btn:hover {
  background: #044d6e;
}

.msg-apply-btn:disabled {
  background: #999;
  cursor: default;
}

.sidebar-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--gray);
  background: #fff;
}

.token-limit-banner {
  font-size: 12px;
  color: #1a6dd4;
  background: #e8f1fc;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Tableau error banner: pale red fill, thick crimson accent bar on the left,
   thin red outline. Icon + text + standalone link on the left, a hairline
   divider, then the dismiss ✕ on the right. */
.agent-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fbeceb;
  border: 1px solid #d9534f;
  border-left: 5px solid #c8271f;
  border-radius: 5px;
  padding: 11px 12px 11px 13px;
  margin-bottom: 8px;
}
.agent-error-icon {
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;
}
.agent-error-content {
  flex: 1;
  min-width: 0;
}
.agent-error-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #3a3a3a;
}
.agent-error-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1a6dd4;
  text-decoration: none;
  cursor: pointer;
}
.agent-error-link:hover { text-decoration: underline; }
.agent-error-link:empty { display: none; }
.agent-error-divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  background: #e3b3b0;
  margin: 0 2px;
}
.agent-error-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  color: #6a6a6a;
  cursor: pointer;
  display: flex;
  border-radius: 4px;
}
.agent-error-close:hover { color: #3a3a3a; background: rgba(0,0,0,0.05); }

/* Animated error icon — an inverse of the .typing-line loader (kept separate on
   purpose: its own classes + keyframes, so tweaking the loader can't disturb it).
   Two inversions vs. the loader:
     1. Geometry: the trend line DESCENDS left→right (points go high→low) instead
        of rising, so it reads as a "things went down / failed" indicator.
     2. Draw direction: the line reveals in REVERSE, from the tip (right) back to
        the start (left), and retracts start→tip — opposite of the loader's
        start→tip growth. We reveal from the far end by using a NEGATIVE
        stroke-dashoffset (−17→0), which uncovers the path from its END inward;
        the dots then pop tip→start to match, and empty start→tip.
   Red line (#c8271f, the banner accent) with slightly lighter-red dot caps —
   mirroring how the loader pairs a #4e79a7 line with #6f97c4 dots. */
.error-line { display: inline-flex; align-items: center; }
.error-line svg { overflow: visible; } /* let the end dots paint past the box, un-clipped */
/* At REST the icon sits fully drawn — the whole line shown (dashoffset 0) and
   every dot at full size — with no animation. The draw only runs on hover of
   the banner (see the :hover rules below), then settles back to full. */
.error-line-path {
  fill: none;
  stroke: #c8271f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17;      /* ≥ path length (~16.1) so the full line hides/reveals */
  stroke-dashoffset: 0;      /* rest = fully drawn */
}
.error-line-dot {
  transform-box: fill-box;   /* scale about each dot's own center, not the viewBox */
  transform-origin: center;
  fill: #e07a75;             /* lighter than the #c8271f line, so markers read as caps */
  /* rest = fully shown; scale/opacity default to 1 */
}
/* Hover the error banner to play the draw once-through, looping while hovered.
   Dots are ordered start→tip in the markup (children 2–5). The line draws
   start→tip (left→right), so the START dot (child 2) pops first and the TIP
   dot (child 5) last — matching the line's growth. Timings mirror the
   typing-line loader (~5 / 18 / 31 / 52% over the 0→45% draw window). */
.agent-error-banner:hover .error-line-path {
  animation: errorLineDraw 1.8s linear infinite;
}
.agent-error-banner:hover .error-line-dot:nth-child(2) { animation: errorLineDot1 1.8s ease-out infinite; } /* start — first in */
.agent-error-banner:hover .error-line-dot:nth-child(3) { animation: errorLineDot2 1.8s ease-out infinite; }
.agent-error-banner:hover .error-line-dot:nth-child(4) { animation: errorLineDot3 1.8s ease-out infinite; }
.agent-error-banner:hover .error-line-dot:nth-child(5) { animation: errorLineDot4 1.8s ease-out infinite; } /* tip — last in */

/* Line reveals start→tip (offset 17→0, left→right), holds, then retracts
   tip→start (offset 0→17) — a descending trend that draws left to right. */
@keyframes errorLineDraw {
  0%   { stroke-dashoffset: 17; }
  45%  { stroke-dashoffset: 0;  }  /* fully drawn */
  55%  { stroke-dashoffset: 0;  }  /* hold */
  95%  { stroke-dashoffset: 17; }  /* fully retracted */
  100% { stroke-dashoffset: 17; }
}
/* Each marker pops in as the growing line reaches it, then pops out as the
   retracting line passes back. Appear order is start→tip (dot1 first at ~5%,
   dot4 last at ~52%); vanish order mirrors it (dot4 first, dot1 last). */
@keyframes errorLineDot1 {           /* START point — first in ~5%, last out ~95% */
  0%   { transform: scale(0); opacity: 0; }
  5%   { transform: scale(1); opacity: 1; }
  92%  { transform: scale(1); opacity: 1; }
  97%  { transform: scale(0); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes errorLineDot2 {           /* in ~18%, out ~82% */
  0%, 11% { transform: scale(0); opacity: 0; }
  18%     { transform: scale(1); opacity: 1; }
  80%     { transform: scale(1); opacity: 1; }
  85%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}
@keyframes errorLineDot3 {           /* in ~31%, out ~72% */
  0%, 24% { transform: scale(0); opacity: 0; }
  31%     { transform: scale(1); opacity: 1; }
  70%     { transform: scale(1); opacity: 1; }
  75%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}
@keyframes errorLineDot4 {           /* TIP point — last in ~52%, first out ~58% */
  0%, 45% { transform: scale(0); opacity: 0; }
  52%     { transform: scale(1); opacity: 1; }
  56%     { transform: scale(1); opacity: 1; }
  61%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}

.message.assistant .msg-bubble.token-limit-msg {
  background: #e8f1fc;
  color: #1a6dd4;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.message.assistant .msg-bubble.token-limit-msg svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.token-limit-link {
  color: #1a6dd4;
  text-decoration: underline;
  cursor: pointer;
}

.sidebar-input {
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--gray);
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.sidebar-input:focus {
  border-color: var(--teal);
}

/* Modal Overlay */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

/* Fork confirmation — small centered dialog shown when the user rewinds and
   commits to dropping the messages after the rewind line. */
.fork-dialog {
  width: 380px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20, 40, 60, 0.28);
  padding: 22px 24px 18px;
  animation: forkDialogIn 0.16s ease;
}
@keyframes forkDialogIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fork-dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: #1c2b36;
}
.fork-dialog-body {
  font-size: 13px;
  line-height: 1.5;
  color: #5a6a77;
  margin-top: 8px;
}
.fork-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.fork-btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.fork-btn-cancel {
  background: #fff;
  border-color: #cfd6dd;
  color: #3d4b57;
}
.fork-btn-cancel:hover { background: #f2f5f8; }
.fork-btn-confirm {
  background: #05628A;
  color: #fff;
}
.fork-btn-confirm:hover { background: #05557a; }

.connect-modal {
  width: 880px;
  max-height: 80vh;
  background: var(--teal-dark);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--white);
  position: relative;
}

.modal-header {
  padding: 28px 32px 16px;
}

.modal-header h1 {
  font-size: 28px;
  font-weight: 300;
}

.modal-header p {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.7;
}

.modal-close:hover {
  opacity: 1;
}

/* Modal Tabs */
.modal-tabs {
  display: flex;
  padding: 0 32px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.tab {
  background: none;
  border: none;
  color: var(--white);
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.7;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.tab:hover {
  opacity: 1;
}

.tab.active {
  opacity: 1;
  border-bottom-color: var(--white);
}

/* Modal Body */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Server Tab */
.tab-filters {
  margin-bottom: 16px;
}

.search-input {
  width: 220px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 13px;
  outline: none;
  margin-bottom: 12px;
}

.search-input::placeholder {
  color: rgba(255,255,255,0.6);
}

.filter-chips {
  display: flex;
  gap: 12px;
}

.chip {
  font-size: 12px;
  opacity: 0.8;
  cursor: pointer;
}

.data-table {
  width: 100%;
}

.table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1fr;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1fr;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.table-row:hover {
  background: rgba(255,255,255,0.05);
}

.live {
  color: #4ecdc4;
}

/* Files Tab */
.drop-zone {
  border: 2px dashed rgba(255,255,255,0.4);
  border-radius: 8px;
  padding: 60px 40px;
  text-align: center;
}

.file-types {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
}

.file-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.file-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.file-icon.excel { background: #217346; color: white; }
.file-icon.word { background: #2b579a; color: white; }
.file-icon.sheets { background: #0f9d58; color: white; }
.file-icon.other { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); }

.drop-text {
  font-size: 16px;
  margin-bottom: 4px;
}

.drop-or {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 12px;
}

.btn-upload {
  background: transparent;
  border: 1.5px solid var(--white);
  color: var(--white);
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-upload:hover {
  background: rgba(255,255,255,0.1);
}

/* Connectors Tab */
.featured-connectors {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 24px;
}

.connector-featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}

.connector-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
}

.connector-search {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: 0 auto 24px;
}

.connector-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px 16px;
  font-size: 13px;
}

.connector-grid span {
  padding: 6px 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.connector-grid span:hover {
  opacity: 1;
}

/* Saved Data Sources Tab */
.saved-search {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: 0 auto 24px;
}

.saved-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.saved-card {
  border: 1px dashed rgba(255,255,255,0.4);
  border-radius: 8px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}

.saved-card:hover {
  background: rgba(255,255,255,0.05);
}

.db-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.7;
}

.saved-card span {
  font-size: 12px;
}

/* Rich mark hover states */
.dash-mark .mark-dot {
  transition: stroke-width 0.1s ease, opacity 0.1s ease;
}

.dash-mark circle.mark-dot {
  transition: r 0.1s ease, stroke-width 0.1s ease;
}

.dash-mark:hover circle.mark-dot {
  r: 7;
  stroke: currentColor;
  stroke-width: 2;
}

.dash-mark:hover rect.mark-dot {
  stroke: #333;
  stroke-width: 2;
}

.dash-mark.selected circle.mark-dot {
  r: 7;
  stroke: #333;
  stroke-width: 2;
}

.dash-mark.selected rect.mark-dot {
  stroke: #333;
  stroke-width: 2;
}

.dash-mark .mark-hit-area {
  cursor: pointer;
}

g.dash-mark {
  cursor: pointer;
}

/* Hover tooltip (data values) */
.tableau-hover-tooltip {
  display: none;
  position: fixed;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  z-index: 999;
  padding: 8px 12px;
  pointer-events: none;
  font-size: 12px;
  font-family: sans-serif;
  min-width: 120px;
}

.tableau-hover-tooltip.active {
  display: block;
}

.hover-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  line-height: 1.6;
}

.hover-tooltip-label {
  color: #666;
}

.hover-tooltip-value {
  color: #333;
  font-weight: 500;
}

.hover-tooltip-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Drag select rubber band */
.drag-select-band {
  display: none;
  position: fixed;
  border: 1px solid #4e79a7;
  background: rgba(78, 121, 167, 0.1);
  z-index: 9999;
  pointer-events: none;
}

.drag-select-band.active {
  display: block;
}

/* Tableau tooltip */
.tableau-tooltip {
  display: none;
  position: fixed;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
  padding: 8px 10px;
  min-width: 180px;
}

.tableau-tooltip.active {
  display: block;
}

.tooltip-summary {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  margin-bottom: 6px;
}

.tooltip-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  border-top: 1px solid #e8e8e8;
  padding-top: 6px;
}

.tooltip-action-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: #555;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 3px;
}

.tooltip-action-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.tooltip-separator {
  margin-right: 4px;
  padding-right: 10px;
  border-right: 1px solid #e0e0e0;
}

.tooltip-agent-btn {
  margin-left: auto;
  color: #4e79a7;
  display: flex;
  align-items: center;
  padding: 3px 5px;
}

.tooltip-agent-btn:hover {
  background: #e8f0f8;
}

.tooltip-ask-input {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #e8e8e8;
  padding-top: 8px;
  margin-top: 8px;
}

.tooltip-mention-chip {
  background: #dbeafe;
  color: #1e5a8a;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: 500;
}

.tooltip-text-input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 12px;
  outline: none;
  min-width: 140px;
}

.tooltip-text-input:focus {
  border-color: #4e79a7;
}

/* Data Source Tab View */
.data-source-view {
  flex-direction: row !important;
  background: #fff;
  font-size: 12px;
  color: #333;
  overflow: hidden;
}

.ds-left-panel {
  width: 200px;
  min-width: 200px;
  background: #f5f5f5;
  border-right: 1px solid #d0d0d0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 0;
}

.ds-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px 6px;
  font-weight: 700;
  font-size: 11px;
  color: #333;
}

.ds-add-link {
  color: #2a7ab0;
  text-decoration: none;
  font-size: 11px;
  font-weight: 400;
}

.ds-add-link:hover {
  text-decoration: underline;
}

.ds-connection-item {
  padding: 6px 12px;
  margin: 0 8px;
  border-radius: 3px;
  cursor: pointer;
}

.ds-connection-item.active {
  background: #d0e4f5;
}

.ds-connection-name {
  font-size: 11px;
  font-weight: 600;
}

.ds-connection-type {
  font-size: 10px;
  color: #666;
}

.ds-sheets {
  margin-top: 16px;
}

.ds-sheet-item {
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
}

.ds-sheet-item:hover {
  background: #e8e8e8;
}

.ds-actions {
  margin-top: 16px;
  border-top: 1px solid #d0d0d0;
  padding-top: 8px;
}

.ds-action-item {
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
  color: #555;
}

.ds-action-item:hover {
  background: #e8e8e8;
}

.ds-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.ds-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
}

.ds-source-name {
  font-size: 16px;
  font-weight: 300;
  color: #333;
}

.ds-top-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ds-connection-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.ds-connection-toggle span {
  font-weight: 600;
  margin-right: 4px;
}

.ds-radio {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  cursor: pointer;
}

.ds-radio input {
  margin: 0;
}

.ds-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.ds-filters span:first-child {
  font-weight: 600;
}

.ds-filter-count {
  background: #e0e0e0;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
}

.ds-agent-btn {
  margin-left: 8px;
}

.workspace.ds-active .sidebar-stack {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 28px;
  z-index: 20;
  box-shadow: -2px 0 12px rgba(0,0,0,0.12);
}

.ds-canvas {
  flex: 1;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #d0d0d0;
  padding: 16px;
  position: relative;
}

.ds-table-chip {
  position: absolute;
  top: 12px;
  left: 16px;
  background: #4e79a7;
  color: #fff;
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.ds-canvas-hints {
  display: flex;
  gap: 48px;
  margin-bottom: 16px;
}

.ds-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ds-hint-icon {
  margin-bottom: 8px;
}

.ds-hint-title {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.ds-hint-desc {
  font-size: 11px;
  color: #777;
  max-width: 180px;
}

.ds-canvas-help {
  font-size: 11px;
  color: #555;
}

.ds-data-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  overflow: hidden;
}

.ds-preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
}

.ds-preview-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ds-table-select {
  padding: 3px 6px;
  font-size: 11px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.ds-field-count {
  font-size: 11px;
  color: #666;
}

.ds-preview-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.ds-rows-input {
  width: 50px;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.ds-preview-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.ds-fields-panel {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid #e0e0e0;
  padding: 12px;
  overflow-y: auto;
}

.ds-fields-name {
  margin-bottom: 16px;
}

.ds-fields-label {
  font-size: 10px;
  color: #777;
  display: block;
  margin-bottom: 2px;
}

.ds-fields-value {
  font-size: 12px;
  color: #333;
}

.ds-fields-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.ds-fields-table th {
  text-align: left;
  font-weight: 600;
  color: #555;
  padding: 4px 6px;
  border-bottom: 1px solid #e0e0e0;
}

.ds-fields-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}

.ds-fields-table .ds-type-abc {
  color: #4e79a7;
  font-weight: 600;
  font-size: 9px;
}

.ds-fields-table .ds-type-num {
  color: #59a14f;
  font-weight: 600;
  font-size: 9px;
}

.ds-fields-table .ds-type-date {
  color: #59a14f;
  font-weight: 600;
  font-size: 9px;
}

.ds-data-grid {
  flex: 1;
  overflow: auto;
}

.ds-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.ds-grid-table thead th {
  position: sticky;
  top: 0;
  background: #f5f5f5;
  border: 1px solid #d0d0d0;
  padding: 4px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}

.ds-grid-table thead .ds-col-type {
  font-size: 9px;
  font-weight: 600;
  display: block;
}

.ds-grid-table thead .ds-col-source {
  font-size: 9px;
  color: #777;
  font-weight: 400;
}

.ds-grid-table tbody td {
  border: 1px solid #e8e8e8;
  padding: 4px 10px;
  white-space: nowrap;
}

.ds-grid-table tbody tr:hover {
  background: #f0f7ff;
}

.ds-col-type-abc { color: #4e79a7; }
.ds-col-type-num { color: #59a14f; }
.ds-col-type-date { color: #59a14f; }

/* Manage Workspace Extensions Dialog */
.manage-addons-dialog {
  width: 820px;
  max-height: 80vh;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  color: #333;
  font-size: 13px;
}

.manage-addons-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #d0d0d0;
  background: #f5f5f5;
}

.manage-addons-title {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}

.manage-addons-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #666;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.manage-addons-close:hover {
  color: #333;
}

.manage-addons-dialog,
.manage-addons-dialog * {
  font-family: 'Benton Sans', 'BentonSans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.manage-addons-body {
  padding: 20px 24px;
  flex: 1;
  overflow-y: auto;
  min-height: 360px;
  display: flex;
  gap: 24px;
}

.manage-addons-list {
  width: 280px;
  flex-shrink: 0;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  overflow-y: auto;
}

.manage-addons-list-item {
  padding: 8px 12px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.manage-addons-list-item:hover {
  background: #f5f5f5;
}

.manage-addons-list-item.active {
  background: #e0e0e0;
}

.manage-ext-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.manage-addons-detail {
  flex: 1;
  padding: 4px 0;
}

.manage-addons-detail-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.manage-addons-detail-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 20px;
}

.manage-addons-detail-meta {
  margin-bottom: 20px;
}

.manage-addons-detail-usage {
  margin-top: 16px;
  padding-top: 16px;
}

.manage-addons-meta-row {
  display: flex;
  padding: 3px 0;
  font-size: 13px;
}

.manage-addons-meta-label {
  width: 150px;
  text-align: right;
  font-weight: 700;
  color: #333;
  padding-right: 12px;
  flex-shrink: 0;
}

.manage-addons-meta-value {
  color: #333;
}

.manage-addons-link {
  color: #2a7ab0;
  text-decoration: none;
}

.manage-addons-link:hover {
  text-decoration: underline;
}

.manage-addons-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e0e0e0;
}

.manage-addons-btn {
  padding: 7px 24px;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 400;
}

.manage-addons-btn.cancel {
  background: #fff;
  border: 1px solid #999;
  color: #333;
}

.manage-addons-btn.cancel:hover {
  background: #f5f5f5;
}

.manage-addons-btn.ok {
  background: #2c4a6e;
  border: 1px solid #2c4a6e;
  color: #fff;
}

.manage-addons-btn.ok:hover {
  background: #1f3a56;
}

.addon-fav-star {
  font-size: 18px;
  cursor: pointer;
  color: #ccc;
  user-select: none;
  transition: color 0.15s;
}

.addon-fav-star.active {
  color: #f5b800;
}

.addon-fav-star:hover {
  color: #f5b800;
}

.addon-toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  cursor: pointer;
}

.addon-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.addon-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 9px;
  transition: background 0.2s;
}

.addon-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.addon-toggle-switch input:checked + .addon-toggle-slider {
  background: #2a7ab0;
}

.addon-toggle-switch input:checked + .addon-toggle-slider::before {
  transform: translateX(16px);
}

/* Site Workspace Extension Dialog */
.site-addon-dialog {
  width: 900px;
  max-height: 85vh;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  color: #333;
  font-size: 13px;
  overflow: hidden;
}

.site-addon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.site-addon-title {
  font-size: 13px;
  font-weight: 400;
  color: #333;
}

.site-addon-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.site-addon-close:hover {
  color: #333;
}

.site-addon-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.site-addon-sidebar {
  width: 240px;
  min-width: 240px;
  padding: 16px;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.site-addon-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 6px 10px;
}

.site-addon-search-input {
  border: none;
  outline: none;
  font-size: 13px;
  width: 100%;
}

.site-addon-sort h4,
.site-addon-filters h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
}

.site-addon-sort-select select {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
}

.site-addon-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #333;
  margin-bottom: 8px;
  cursor: pointer;
}

.site-addon-checkbox input {
  margin: 0;
}

.site-addon-local {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
}

.site-addon-local-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.site-addon-local-desc {
  font-size: 11px;
  color: #666;
  line-height: 1.5;
}

.site-addon-link {
  color: #2a7ab0;
  text-decoration: none;
}

.site-addon-link:hover {
  text-decoration: underline;
}

.site-addon-main {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

.site-addon-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #e8f4fd, #d0eafc);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.site-addon-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-addon-banner-label {
  font-size: 16px;
  color: #1a5276;
}

.site-addon-banner-sub {
  font-size: 12px;
  color: #555;
}

.site-addon-banner-btn {
  background: #2a7ab0;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.site-addon-banner-btn:hover {
  background: #236a9a;
}

.site-addon-browse-title {
  font-size: 18px;
  font-weight: 300;
  color: #333;
  margin-bottom: 4px;
}

.site-addon-browse-sub {
  font-size: 13px;
  color: #555;
  margin-bottom: 16px;
}

.site-addon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-addon-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.site-addon-card:hover {
  border-color: #2a7ab0;
  box-shadow: 0 2px 8px rgba(42, 122, 176, 0.12);
}

.site-addon-card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-addon-card-body {
  flex: 1;
  min-width: 0;
}

.site-addon-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.site-addon-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.site-addon-card-author {
  font-size: 11px;
  color: #777;
}

.site-addon-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.site-addon-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #2a7ab0;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
}

.site-addon-downloads {
  font-size: 11px;
  color: #666;
}

.site-addon-downloads::before {
  content: '⬡ ';
}

.site-addon-card-desc {
  font-size: 12px;
  color: #555;
  line-height: 1.4;
}

/* Site Workspace Extension Detail View */
.site-addon-detail {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
}

.site-addon-detail-top {
  margin-bottom: 20px;
}

.site-addon-back {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #333;
  padding: 4px 8px;
}

.site-addon-back:hover {
  color: #2a7ab0;
}

.site-addon-detail-body {
  display: flex;
  gap: 40px;
}

.site-addon-detail-left {
  flex: 1;
  min-width: 0;
}

.site-addon-detail-right {
  width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-addon-detail-right h3 {
  font-size: 16px;
  font-weight: 300;
  color: #333;
  margin-top: 16px;
}

.site-addon-detail-right hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 4px 0 12px;
}

.site-addon-detail-right .site-addon-link {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.site-addon-resources-title {
  margin-top: 24px !important;
}

.site-addon-spec {
  margin-bottom: 16px;
}

.site-addon-spec strong {
  font-size: 13px;
  color: #333;
}

.site-addon-spec-value {
  font-size: 12px;
  color: #555;
  word-break: break-all;
  margin-top: 4px;
}

.site-addon-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.site-addon-detail-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-addon-detail-info {
  flex: 1;
}

.site-addon-detail-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.site-addon-detail-author {
  font-size: 12px;
  color: #777;
}

.site-addon-detail-badges {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-addon-open-btn {
  background: #2a7ab0;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.site-addon-open-btn:hover {
  background: #236a9a;
}

.site-addon-detail-screenshots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.site-addon-screenshot-placeholder {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  height: 140px;
}

.site-addon-screenshot-placeholder.wide {
  grid-column: 1 / 2;
  height: 160px;
}

.site-addon-detail-description h3 {
  font-size: 18px;
  font-weight: 300;
  color: #333;
}

.site-addon-detail-description hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 8px 0 12px;
}

.site-addon-detail-description p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}


/* ============================================
   START SCREEN PICKER DROPDOWN
   ============================================ */
.header-logo-wrapper {
  position: relative;
  cursor: pointer;
}

.start-picker-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 140px;
  overflow: hidden;
}
.start-picker-dropdown.active { display: block; }
.start-picker-option {
  padding: 8px 14px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  transition: background 0.1s;
}
.start-picker-option:hover { background: #f0f4ff; }
.start-picker-option.active { background: #e8f0fe; font-weight: 600; color: #1a73e8; }

/* ============================================
   DRIVE VARIATION
   ============================================ */
.start-screen-drive, .start-screen-bento { height: 100%; min-height: 100%; padding: 0; overflow: hidden; }
.start-screen-drive { background: #fff; }
.drive-layout { display: flex; height: 100%; min-height: 100%; }
.drive-sidebar {
  width: 220px;
  background: linear-gradient(135deg, #1d3557 0%, #2b5f7f 100%);
  border-right: none;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  transition: width 0.2s;
  position: relative;
}
.drive-sidebar.collapsed {
  width: 56px;
}
.drive-sidebar.collapsed .drive-nav-item {
  justify-content: center;
  padding: 10px 0;
  margin-right: 0;
  border-radius: 0;
  font-size: 0;
  gap: 0;
}
.drive-sidebar.collapsed .drive-nav-item svg {
  font-size: 16px;
}
.drive-sidebar-toggle {
  margin-top: auto;
  align-self: flex-end;
  margin-right: 10px;
  margin-bottom: 4px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, transform 0.2s;
}
.drive-sidebar-toggle:hover { color: #fff; }
.drive-sidebar.collapsed .drive-sidebar-toggle {
  transform: rotate(180deg);
  align-self: center;
  margin-right: 0;
}
.drive-new-btn {
  margin: 0 16px 16px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, background 0.2s;
  text-align: left;
}
.drive-new-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); background: #f8f8ff; }
.drive-nav { display: flex; flex-direction: column; gap: 2px; }
.drive-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-radius: 0 20px 20px 0;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.drive-nav-item svg { flex-shrink: 0; opacity: 0.85; color: rgba(255,255,255,0.85); }
.drive-nav-item:hover { background: rgba(255,255,255,0.1); }
.drive-nav-item.active { background: rgba(255,255,255,0.15); color: #fff; font-weight: 600; }
.drive-sidebar-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 16px 0; }
.drive-server-section { padding: 0 24px; }
.drive-server-label { font-size: 11px; color: #888; text-transform: uppercase; margin-bottom: 4px; }
.drive-server-current { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 8px; }
.drive-switch-server { font-size: 12px; color: #1a73e8; }
.drive-sidebar-bottom { margin-top: auto; padding: 16px 24px; }
.drive-storage-bar { height: 4px; background: #e0e0e0; border-radius: 2px; margin-bottom: 6px; }
.drive-storage-fill { height: 100%; width: 12%; background: #4e79a7; border-radius: 2px; }
.drive-storage-text { font-size: 11px; color: #666; }
.drive-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.drive-topbar {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  gap: 16px;
  border-bottom: 1px solid #e8e8e8;
}
.drive-search {
  flex: 1;
  position: relative;
}
.drive-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #1d3557; display: flex; align-items: center; }
.drive-search-input {
  width: 100%;
  padding: 10px 40px 10px 36px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  font-size: 13px;
  background: #f1f3f4;
  outline: none;
  transition: background 0.2s, box-shadow 0.2s;
}
.drive-search-input:focus { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.1); border-color: #ccc; }
.drive-view-switcher {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.drive-view-btn {
  background: none;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.drive-view-btn:first-child { border-right: 1px solid #ddd; }
.drive-view-btn:hover { background: #e8f0f4; }
.drive-view-btn.active { background: #265D83; color: #fff; }
.drive-content { flex: 1; overflow-y: auto; padding: 24px; }
.drive-section-title { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 16px; }
.drive-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.drive-file-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.drive-file-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #ccc; }
.drive-file-thumb { height: 120px; background: #f8f9fa; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.drive-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.drive-file-info { padding: 10px 12px; }
.drive-file-name { display: block; font-size: 12px; font-weight: 500; color: #333; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drive-file-meta { font-size: 11px; color: #888; }

.drive-file-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drive-file-grid.list-view .drive-file-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 4px;
  border: none;
  border-bottom: 1px solid #f0f0f0;
}
.drive-file-grid.list-view .drive-file-card { position: relative; }
.drive-file-grid.list-view .drive-file-card:hover { box-shadow: none; background: #f4f6f8; }
.drive-file-grid.list-view .drive-file-thumb {
  width: 40px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
}
.drive-list-preview {
  position: fixed;
  z-index: 9999;
  width: 280px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  overflow: hidden;
  pointer-events: none;
  background: #fff;
}
.drive-file-grid.list-view .drive-file-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  padding: 10px 12px;
}
.drive-file-grid.list-view .drive-file-name { margin-bottom: 0; flex: 1; }
.drive-file-grid.list-view .drive-file-meta { flex-shrink: 0; }

.drive-section { display: none; }
.drive-section.active { display: block; }

.drive-quickstart-group { margin-bottom: 28px; }
.drive-quickstart-subtitle { font-size: 13px; font-weight: 500; color: #444; margin-bottom: 4px; }
.drive-quickstart-desc { font-size: 12px; color: #888; margin-bottom: 12px; }

.drive-discover-layout { max-width: 600px; }
.drive-discover-col { margin-bottom: 24px; }
.drive-discover-heading { font-size: 13px; font-weight: 500; color: #666; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.drive-discover-link {
  display: block;
  font-size: 13px;
  color: #333;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.drive-discover-link:hover { background: #f0f4f8; color: #2b5f7f; }
.drive-discover-promo {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 8px;
}
.drive-discover-promo-title { font-size: 13px; font-weight: 500; color: #333; margin-bottom: 8px; }
.drive-discover-promo-cta { font-size: 12px; color: #2b5f7f; cursor: pointer; }
.drive-discover-promo-cta:hover { text-decoration: underline; }
.drive-discover-update {
  margin-top: 16px;
  padding: 10px;
  background: #e8724a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  max-width: 200px;
}
.drive-discover-update:hover { background: #d4623e; }

.drive-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drive-conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  cursor: pointer;
}
.drive-conversation-item:hover {
  background: #f5f8fb;
}
.drive-conversation-icon {
  color: #888;
  flex-shrink: 0;
}
.drive-conversation-info {
  flex: 1;
  min-width: 0;
}
.drive-conversation-title {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}
.drive-conversation-preview {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drive-conversation-meta {
  font-size: 10px;
  color: #bbb;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================
   BENTO BOARD VARIATION
   ============================================ */
.start-screen-bento { background: #f0f2f5; }
.bento-layout { height: 100%; min-height: 600px; display: flex; flex-direction: column; padding: 30px 28px 20px; gap: 10px; font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 300; overflow: hidden; }
.bento-layout.bento-scrolling { overflow-y: auto; }
.bento-topbar { display: flex; align-items: center; justify-content: space-between; }
.bento-greeting { font-size: 46px; font-weight: 200; color: #727282; margin-bottom: -4px; }
.bento-topbar-right { display: flex; align-items: center; gap: 12px; }
.bento-server-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.bento-server-pill:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.bento-server-dot { width: 8px; height: 8px; background: #59a14f; border-radius: 50%; }
.bento-server-arrow { font-size: 10px; color: #888; margin-left: 2px; }
.bento-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 0.8fr 0.8fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 14px;
  min-height: 0;
}
/* Narrow stage 1: discover drops to bottom, 3-col grid, page scrolls */
.bento-grid.bento-narrow-1 {
  grid-template-columns: 1.3fr 1.3fr 0.8fr;
  grid-template-rows: auto auto auto auto;
}
.bento-grid.bento-narrow-1 .bento-tile-agent { grid-column: 1 / -1; grid-row: 1; }
.bento-grid.bento-narrow-1 .bento-tile-recents { grid-column: 1; grid-row: 2; }
.bento-grid.bento-narrow-1 .bento-tile-insights { grid-column: 1; grid-row: 3; }
.bento-grid.bento-narrow-1 .bento-tile-favorites { grid-column: 2; grid-row: 2; }
.bento-grid.bento-narrow-1 .bento-tile-recommended { grid-column: 2; grid-row: 3; }
.bento-grid.bento-narrow-1 .bento-tile-quickstart { grid-column: 3; grid-row: 2 / 4; }
.bento-grid.bento-narrow-1 .bento-tile-discover { grid-column: 1 / -1; grid-row: 4; overflow: visible !important; }
.bento-grid.bento-narrow-1 .bento-tile { overflow: visible; max-height: none; }
.bento-grid.bento-narrow-1 .bento-discover-promo { margin-top: 16px; }

/* Narrow stage 2: quickstart also drops, 2-col grid */
.bento-grid.bento-narrow-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto;
}
.bento-grid.bento-narrow-2 .bento-tile-agent { grid-column: 1 / -1; grid-row: 1; }
.bento-grid.bento-narrow-2 .bento-tile-recents { grid-column: 1; grid-row: 2; }
.bento-grid.bento-narrow-2 .bento-tile-insights { grid-column: 1; grid-row: 3; }
.bento-grid.bento-narrow-2 .bento-tile-favorites { grid-column: 2; grid-row: 2; }
.bento-grid.bento-narrow-2 .bento-tile-recommended { grid-column: 2; grid-row: 3; }
.bento-grid.bento-narrow-2 .bento-tile-quickstart { grid-column: 1 / -1; grid-row: 4; }
.bento-grid.bento-narrow-2 .bento-tile-quickstart .bento-quickstart-columns { flex-direction: row; }
.bento-grid.bento-narrow-2 .bento-tile-discover { grid-column: 1 / -1; grid-row: 5; overflow: visible !important; }
.bento-grid.bento-narrow-2 .bento-tile { overflow: visible; max-height: none; }
.bento-grid.bento-narrow-2 .bento-discover-promo { margin-top: 16px; }

/* Fully stacked: single column */
.bento-grid.bento-stacked {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bento-grid.bento-stacked .bento-tile {
  flex-shrink: 0;
  overflow: visible;
  max-height: none;
  order: 5;
}
.bento-grid.bento-stacked .bento-tile-agent { order: 0; }
.bento-grid.bento-stacked .bento-tile-recents { order: 1; }
.bento-grid.bento-stacked .bento-tile-insights { order: 2; }
.bento-grid.bento-stacked .bento-tile-favorites { order: 3; }
.bento-grid.bento-stacked .bento-tile-recommended { order: 4; }
.bento-grid.bento-stacked .bento-tile-quickstart { order: 5; }
.bento-grid.bento-stacked .bento-tile-discover { order: 6; overflow: visible !important; }
.bento-grid.bento-stacked .bento-tile-welcome { order: 1; }
.bento-tile {
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.bento-tile-label { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
.bento-tile-label img { opacity: 0.7; }
.bento-see-more { padding-top: 10px; font-size: 12px; font-weight: 400; color: #2b5f7f; text-decoration: none; cursor: pointer; flex-shrink: 0; display: none; }
.bento-see-more.visible { display: block; }
.bento-see-more:hover { text-decoration: underline; }
.bento-tile-agent {
  grid-column: 1 / -1;
  grid-row: 1;
  background: linear-gradient(135deg, #1d3557 0%, #2b5f7f 100%);
  color: #fff;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 8px 36px 36px 8px;
  overflow: visible;
  flex-shrink: 0;
  min-height: auto;
  max-height: none;
}
.bento-scrolling .bento-tile-agent {
  position: sticky;
  top: 0;
  z-index: 20;
}
.bento-tile-header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.85); flex-shrink: 0; }
.bento-tile-header svg { color: #5ba8c8; fill: #5ba8c8; }
.bento-input-wrapper {
  max-width: 100%;
  flex: 1;
}
.bento-input-wrapper .input-history-btn {
  color: rgba(255,255,255,0.5);
}
.bento-input-wrapper .input-history-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}
.bento-agent-input {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  padding: 10px 40px 10px 18px;
  font-size: 13px;
  color: #fff;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
}
.bento-agent-input::placeholder { color: rgba(255,255,255,0.5); }
.bento-agent-input:focus { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }
.bento-tile-quickstart {
  grid-column: 3;
  grid-row: 2 / 4;
  gap: 12px;
  overflow: hidden;
}
.bento-tile-quickstart .bento-quickstart-columns {
  flex-direction: column;
}
.bento-quickstart-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #555;
  margin-bottom: 6px;
}
.bento-quickstart-desc {
  font-size: 11px;
  color: #999;
  margin-bottom: 10px;
  font-weight: 300;
}
.bento-quickstart-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bento-quickstart-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.bento-quickstart-card:hover { background: #f4f6f8; }
.bento-quickstart-card img {
  width: 125px;
  height: 94px;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid #ccc;
}
.bento-quickstart-card span {
  font-size: 13px;
  color: #333;
  font-weight: 300;
}
.bento-quickstart-divider {
  height: 1px;
  background: #eee;
  margin: 6px 0;
}
.bento-quickstart-columns {
  display: flex;
  gap: 20px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.bento-quickstart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bento-tile-recents {
  grid-column: 1;
  grid-row: 2;
}

.bento-tile-insights {
  grid-column: 1;
  grid-row: 3;
}

.bento-tile-insights .bento-see-more {
  display: block;
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 10px;
}
.bento-recents-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
.bento-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.bento-recent-item:hover { background: #f4f6f8; }
.bento-recent-item img { width: 125px; height: 94px; border-radius: 3px; object-fit: cover; border: 1px solid #ccc; }
.bento-recent-item span { font-size: 13px; color: #333; font-weight: 300; }
.bento-tile-favorites {
  grid-column: 2;
  grid-row: 2;
}
.bento-favorites-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
.bento-fav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.15s;
}
.bento-fav-item:hover { background: #f4f6f8; }
.bento-fav-item img { width: 125px; height: 94px; border-radius: 3px; object-fit: cover; border: 1px solid #ccc; }
.bento-fav-item span { font-size: 13px; color: #333; font-weight: 300; }
.bento-fav-star { color: #f59e0b; font-size: 14px; }
.bento-tile-recommended {
  grid-column: 2;
  grid-row: 3;
  overflow: hidden;
}
.bento-tile-discover {
  grid-column: 4;
  grid-row: 2 / 4;
  overflow-y: auto;
  background: #f9fafb;
}
.bento-discover-section {
  margin-bottom: 16px;
}
.bento-discover-section-title {
  font-size: 11px;
  font-weight: 400;
  color: #999;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}
.bento-discover-link {
  display: block;
  font-size: 12px;
  font-weight: 300;
  color: #333;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, padding-left 0.15s;
}
.bento-discover-link:hover { color: #2b5f7f; background: #f0f4f8; padding-left: 12px; }
.bento-discover-promo {
  margin-top: auto;
  padding: 12px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.bento-discover-promo:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.1); transform: translateY(-1px); }
.bento-discover-promo-text {
  font-size: 12px;
  font-weight: 400;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8px;
}
.bento-discover-promo-link {
  font-size: 11px;
  font-weight: 400;
  color: #2b5f7f;
  cursor: pointer;
  transition: color 0.15s;
}
.bento-discover-promo:hover .bento-discover-promo-link { color: #1d3557; text-decoration: underline; }
.bento-discover-update {
  margin-top: 12px;
  padding: 8px;
  background: #e8724a;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.bento-discover-update:hover { background: #d4623e; transform: translateY(-1px); }
.bento-recommended-grid { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
.bento-rec-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.bento-rec-card:hover { background: #f4f6f8; }
.bento-rec-card img { width: 115px; height: 83px; border-radius: 3px; object-fit: cover; border: 1px solid #ccc; }
.bento-rec-card span { font-size: 13px; color: #333; font-weight: 300; }

/* Bento hover preview popover */
.bento-hover-preview {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  padding: 14px;
  width: 480px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.bento-hover-preview.visible {
  opacity: 1;
  transform: translateY(0);
}
.bento-hover-preview img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
.bento-hover-preview-title {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
  margin-bottom: 4px;
}
.bento-hover-preview-desc {
  font-size: 11px;
  font-weight: 300;
  color: #666;
  line-height: 1.4;
}

/* Signed-out state — Original start screen */
.signed-out-feature {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}
.signed-out-feature-thumb {
  width: 45%;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}
.signed-out-feature-thumb img { width: 100%; display: block; border: 1px solid #ddd; border-radius: 4px; }
.signed-out-feature-info h3 { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px; }
.signed-out-feature-info p { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 16px; }
.signed-out-feature-cta {
  font-size: 13px;
  color: #2b5f7f;
  font-weight: 500;
  cursor: pointer;
}
.signed-out-feature-cta:hover { text-decoration: underline; }

/* Signed-out state — Drive */
.drive-signed-out-feature {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}
.drive-signed-out-thumb {
  width: 45%;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}
.drive-signed-out-thumb img { width: 100%; display: block; border: 1px solid #ddd; border-radius: 4px; }
.drive-signed-out-info h3 { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 10px; }
.drive-signed-out-info p { font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 18px; }
.drive-signed-out-cta {
  display: inline-block;
  padding: 8px 20px;
  background: #2b5f7f;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.drive-signed-out-cta:hover { background: #1d3557; }
.drive-signed-out-quickstart { margin-top: 32px; }

/* Signed-out state — Bento */
.bento-tile-welcome {
  grid-column: 1 / 4;
  grid-row: 2;
  background: #fff;
  border: 1px solid #e8e8e8;
  overflow: visible;
}
.bento-welcome-feature {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex: 1;
  min-height: 0;
  align-items: flex-start;
}
.bento-welcome-thumb {
  width: 45%;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
.bento-welcome-thumb img { width: 100%; display: block; border: 1px solid #ddd; border-radius: 4px; }
.bento-welcome-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 0;
}
.bento-welcome-feature h3 { font-size: 16px; font-weight: 400; color: #333; margin: 0; }
.bento-welcome-feature p { font-size: 13px; font-weight: 300; color: #666; line-height: 1.5; margin: 0; }
body.signed-out .bento-grid {
  grid-template-rows: auto 0.8fr 1.7fr;
}
body.signed-out .bento-tile-welcome {
  grid-column: 1 / 4;
  grid-row: 2;
}
body.signed-out .bento-tile-quickstart {
  grid-column: 1 / 3;
  grid-row: 3;
}
body.signed-out .bento-tile-quickstart .bento-quickstart-columns {
  flex-direction: row;
}
body.signed-out .bento-quickstart-card img {
  width: 66px;
  height: 49px;
}
body.signed-out .bento-tile-recommended {
  grid-column: 3;
  grid-row: 3;
}
body.signed-out .bento-tile-discover {
  grid-column: 4;
  grid-row: 2 / 4;
}

/* Signed-out responsive overrides */
body.signed-out .bento-grid.bento-narrow-1 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
}
body.signed-out .bento-grid.bento-narrow-1 .bento-tile { overflow: visible; max-height: none; }
body.signed-out .bento-grid.bento-narrow-1 .bento-discover-promo { margin-top: 16px; }
body.signed-out .bento-grid.bento-narrow-1 .bento-tile-agent { grid-column: 1 / -1; grid-row: 1; }
body.signed-out .bento-grid.bento-narrow-1 .bento-tile-welcome { grid-column: 1 / -1; grid-row: 2; }
body.signed-out .bento-grid.bento-narrow-1 .bento-tile-quickstart { grid-column: 1; grid-row: 3; }
body.signed-out .bento-grid.bento-narrow-1 .bento-tile-recommended { grid-column: 2; grid-row: 3; }
body.signed-out .bento-grid.bento-narrow-1 .bento-tile-discover { grid-column: 1 / -1; grid-row: 4; overflow: visible !important; }

body.signed-out .bento-grid.bento-narrow-2 {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
}
body.signed-out .bento-grid.bento-narrow-2 .bento-tile { overflow: visible; max-height: none; }
body.signed-out .bento-grid.bento-narrow-2 .bento-discover-promo { margin-top: 16px; }
body.signed-out .bento-grid.bento-narrow-2 .bento-tile-agent { grid-column: 1; grid-row: 1; }
body.signed-out .bento-grid.bento-narrow-2 .bento-tile-welcome { grid-column: 1; grid-row: 2; }
body.signed-out .bento-grid.bento-narrow-2 .bento-tile-quickstart { grid-column: 1; grid-row: 3; min-height: 450px; }
body.signed-out .bento-grid.bento-narrow-2 .bento-tile-recommended { grid-column: 1; grid-row: 4; min-height: 450px; }
body.signed-out .bento-grid.bento-narrow-2 .bento-tile-discover { grid-column: 1; grid-row: 5; overflow: visible !important; }

/* Bento tile expanded state */
.bento-tile.bento-expanded {
  grid-column: 1 / 4 !important;
  grid-row: 2 / 4 !important;
  overflow-y: auto;
  z-index: 10;
}
.bento-tile.bento-expanded .bento-see-more { display: none !important; }
.bento-collapse-btn {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
  padding: 0;
  margin-bottom: 12px;
  gap: 5px;
  align-items: center;
}
.bento-collapse-btn img { opacity: 0.7; }
.bento-collapse-btn:hover { color: #1d3557; }
.bento-tile.bento-expanded .bento-collapse-btn { display: inline-flex; align-items: center; }
.bento-tile.bento-expanded .bento-tile-label { display: none; }
.bento-grid:has(.bento-expanded) .bento-tile:not(.bento-expanded):not(.bento-tile-agent):not(.bento-tile-discover):not(.bento-tile-welcome) {
  display: none;
}

.bento-welcome-cta {
  align-self: flex-start;
  padding: 8px 20px;
  background: #1d3557;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.bento-welcome-cta:hover { background: #2b5f7f; }

/* Insights section */
.insights-section-title {
  font-size: 10px;
  font-weight: 300;
  color: #444;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.insights-section-title img {
  opacity: 1;
}

.insights-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.insights-arrow {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  color: #555;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
}

.insights-arrow:hover {
  background: #f5f5f5;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.insights-row {
  display: flex;
  gap: 14px;
  overflow: hidden;
  padding-bottom: 8px;
  justify-content: center;
  flex-wrap: nowrap;
  flex: 1;
}

.insight-card {
  flex-shrink: 0;
  width: 200px;
  min-height: 160px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.insight-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Tinted tag pill (Tableau 10 hue via --insight-color), top-left of the card */
.insight-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 9px;
  margin-bottom: 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--insight-color, #4e79a7) 78%, #2b2b2b);
  background: color-mix(in srgb, var(--insight-color, #4e79a7) 16%, #fff);
}

.insight-big-number {
  font-size: 32px;
  font-weight: 500;
  color: var(--insight-color, #2e2e2e);
  line-height: 1;
  text-align: left;
  margin-bottom: 3px;
}

.insight-headline {
  font-size: 12px;
  font-weight: 600;
  color: #2b3038;
  line-height: 1.3;
  text-align: left;
  margin-bottom: 2px;
}

.insight-graph {
  height: 28px;
  flex-shrink: 0;
}

.insight-graph svg {
  height: 100%;
}

.insight-subtext {
  font-size: 11px;
  font-weight: 350;
  color: #888;
  line-height: 1.3;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.insight-source {
  font-size: 9px;
  color: #9aa2ad;
  font-weight: 400;
  text-align: left;
  margin-bottom: 10px;
}

.drive-insights-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.bento-insights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
  flex: 1;
  overflow: hidden;
}

.bento-insight-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.bento-insight-item:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.bento-insight-graph {
  flex-shrink: 0;
}

.bento-insight-text {
  flex: 1;
  min-width: 0;
}

#publishModal, #publishModal2 {
  background: none;
  pointer-events: none;
}

#publishModal .publish-dialog, #publishModal2 .publish-dialog {
  pointer-events: auto;
}

.publish-ext-banner {
  background: #e8f1fc;
  color: #1a6dd4;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  border-top: 1px solid #ddd;
}
.publish-ext-banner svg { flex-shrink: 0; margin-top: 1px; }
.publish-ext-banner-text { font-weight: 350; }

/* Publish Workbook Dialog */
.publish-dialog {
  background: #ffffff;
  border-radius: 1px;
  width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.15);
}

.publish-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 6px 18px;
  background: #f3f3f3;
}

.publish-title {
  font-size: 12px;
  font-weight: 350;
  color: #2e2e2e;
}

.publish-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #2e2e2e;
  cursor: pointer;
  line-height: 1;
  padding: 5px;
  border-radius: 2px;
}

.publish-close:hover {
  background: #e0e0e0;
}

.publish-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.publish-field {
  margin-bottom: 0;
}

.publish-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #2e2e2e;
  margin-bottom: 6px;
}

.publish-subheading {
  display: block;
  font-size: 11px;
  font-weight: 350;
  color: #666;
  margin-bottom: 8px;
}

.publish-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 350;
  color: #2e2e2e;
  padding: 6px 0;
  border-bottom: 1px solid #d0d0d0;
  cursor: pointer;
}

.publish-select-arrow {
  font-size: 9px;
  color: #666;
}

.publish-textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 350;
  font-family: inherit;
  resize: vertical;
  outline: none;
}

.publish-textarea:focus {
  border-color: #05628a;
}

.publish-link {
  color: #05628a;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.publish-link:hover {
  text-decoration: underline;
}

.publish-value {
  font-size: 12px;
  font-weight: 350;
  color: #2e2e2e;
}

.publish-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.publish-checkbox {
  font-size: 12px;
  font-weight: 350;
  color: #2e2e2e;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.publish-checkbox input {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid #999;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.publish-checkbox input:checked {
  border-color: #555;
}

.publish-checkbox input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #444;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.publish-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 18px 18px;
  gap: 12px;
}

.publish-optimizer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #2e2e2e;
  cursor: pointer;
}

.publish-btn {
  background: #3dbe8e;
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.publish-btn:hover {
  background: #32a87b;
}

/* ============================================
   CHANGELOG modal — every project commit, sortable + searchable.
   ============================================ */
.changelog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* Above the menu bar (z 500) since it's launched from the bar's Change Log. */
  z-index: 600;
  background: rgba(30, 41, 54, 0.32);
  align-items: center;
  justify-content: center;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.changelog-overlay.open { display: flex; }
.changelog-modal {
  background: #fff;
  width: 560px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 96px);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20, 35, 60, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: changelogIn 0.16s ease;
}
@keyframes changelogIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.changelog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #eef0f2;
}
.changelog-title { font-size: 16px; font-weight: 500; color: #1a1a1a; margin: 0; }
.changelog-count { font-size: 12px; color: #98a4b0; }
.changelog-close {
  margin-left: auto;
  border: none;
  background: none;
  color: #98a4b0;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 5px;
}
.changelog-close:hover { background: #f2f4f6; color: #5a6570; }
.changelog-controls {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #f2f4f6;
}
.changelog-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d6dbe0;
  border-radius: 7px;
  padding: 0 10px;
  color: #98a4b0;
}
.changelog-search:focus-within { border-color: #05628A; color: #05628A; }
.changelog-search input {
  border: none; outline: none; background: none;
  flex: 1 1 auto; height: 32px;
  font-size: 13px; color: #1a1a1a;
  font-family: inherit;
}
.changelog-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d6dbe0;
  background: #fff;
  border-radius: 7px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #5a6570;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.changelog-sort:hover { background: #f6f8fa; border-color: #b8bec4; }
.changelog-list {
  overflow-y: auto;
  padding: 6px 8px 12px;
}
.changelog-item {
  padding: 12px 10px;
  border-bottom: 1px solid #f4f6f8;
}
.changelog-item:last-child { border-bottom: none; }
.changelog-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.changelog-date { font-size: 12px; font-weight: 600; color: #05628A; }
.changelog-time { font-size: 11.5px; color: #8a94a0; }
.changelog-hash {
  font-size: 11px;
  color: #b0b8c0;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
}
.changelog-desc { font-size: 13.5px; color: #2a2f36; line-height: 1.4; }
.changelog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.changelog-tag {
  border: none;
  background: #eef1f4;
  color: #5f6b78;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.changelog-tag:hover { background: #e2eef3; color: #05628A; }
.changelog-empty {
  padding: 28px 12px;
  text-align: center;
  font-size: 13px;
  color: #98a4b0;
}

/* ============================================================
   TABLEAU AGENT SETTINGS dialog — opened from Help ▸ Product.
   Reuses the changelog modal's white-card shell (same overlay z, backdrop,
   entrance) so it reads as one system with the app's other dialogs.
   ============================================================ */
.agentset-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;                 /* mirrors the changelog modal (above menu bar) */
  background: rgba(30, 41, 54, 0.32);
  align-items: center;
  justify-content: center;
  font-family: 'Benton Sans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.agentset-overlay.open { display: flex; }
.agentset-overlay,
.agentset-overlay * {
  font-family: 'Benton Sans', 'BentonSans', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.agentset-modal {
  background: #fff;
  width: 440px;
  max-width: calc(100vw - 48px);
  border-radius: 2px;
  box-shadow: 0 12px 40px rgba(20, 35, 60, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: changelogIn 0.16s ease;
}
.agentset-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-bottom: 1px solid #d0d0d0;
  background: #f5f5f5;                 /* grey title bar, matches Manage Extensions */
}
.agentset-title { font-size: 14px; font-weight: 400; color: #333; margin: 0; }
.agentset-close { margin-left: auto; }

.agentset-body { padding: 20px 22px 4px; }

.agentset-version-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.agentset-version-label { font-size: 13.5px; color: #5a6570; }
.agentset-version-value {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}

.agentset-divider {
  height: 1px;
  background: #eef0f2;
  margin: 16px 0;
}

/* Auto-update toggle — iOS-style switch in Tableau blue when on. */
.agentset-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.agentset-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.agentset-toggle-track {
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: #cfd6dd;
  position: relative;
  transition: background 0.16s ease;
}
.agentset-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.16s ease;
}
.agentset-toggle input:checked + .agentset-toggle-track { background: #05628A; }
.agentset-toggle input:checked + .agentset-toggle-track .agentset-toggle-thumb {
  transform: translateX(14px);
}
.agentset-toggle input:focus-visible + .agentset-toggle-track {
  box-shadow: 0 0 0 3px rgba(5, 98, 138, 0.25);
}
.agentset-toggle-text { font-size: 13.5px; color: #1a1a1a; }

.agentset-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.agentset-btn {
  padding: 7px 24px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.agentset-btn-secondary {
  background: #fff;
  border-color: #999;
  color: #333;
}
.agentset-btn-secondary:hover { background: #f5f5f5; }
.agentset-btn-primary {
  background: #2c4a6e;
  border-color: #2c4a6e;
  color: #fff;
}
.agentset-btn-primary:hover { background: #1f3a56; }
.agentset-btn:disabled { opacity: 0.55; cursor: default; }
.agentset-btn:disabled:hover { background: #fff; }
.agentset-btn-primary:disabled:hover { background: #2c4a6e; }

/* Status line — one row, swaps between spinner / icon / text by data-state. */
.agentset-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: #5a6570;
  min-height: 18px;
}
.agentset-status-icon { flex: 0 0 auto; display: none; line-height: 0; }
.agentset-status[data-state="uptodate"] .agentset-status-icon,
.agentset-status[data-state="available"] .agentset-status-icon,
.agentset-status[data-state="error"] .agentset-status-icon { display: inline-block; }
.agentset-status[data-state="uptodate"] { color: #1a7a4c; }
.agentset-status[data-state="available"] { color: #05628A; }
.agentset-status[data-state="error"] { color: #b3541e; }
.agentset-status[data-state="available"] .agentset-status-text { font-weight: 600; }

/* Spinner shows only while checking. */
.agentset-spinner {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid #cfd6dd;
  border-top-color: #05628A;
  border-radius: 50%;
  display: none;
  animation: agentsetSpin 0.7s linear infinite;
}
.agentset-status[data-state="checking"] .agentset-spinner { display: inline-block; }
@keyframes agentsetSpin { to { transform: rotate(360deg); } }

/* Release notes — version history, newest first, scrollable within the card. */
.agentset-notes-head {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5b6b7a;
  margin: 0 0 10px;
}
.agentset-notes {
  max-height: 200px;
  overflow-y: auto;
  margin-right: -8px;   /* let the scrollbar sit in the body padding */
  padding-right: 8px;
}
.agentset-release {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef0f2;
}
.agentset-release:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 2px; }
.agentset-release-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.agentset-release-ver {
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}
.agentset-release-date { font-size: 12px; color: #98a4b0; }
/* Installed / Latest / New tags — small pills, re-applied live in JS. */
.agentset-tag {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.4;
}
.agentset-tag-installed { background: #e7edf2; color: #4a5967; }
.agentset-tag-latest    { background: #e4f4ec; color: #1a7a4c; }
.agentset-tag-new       { background: #e6f0f6; color: #05628A; }
.agentset-release-list {
  margin: 0;
  padding-left: 16px;
}
.agentset-release-list li {
  font-size: 12.5px;
  line-height: 1.5;
  color: #3d4b57;
  margin-bottom: 2px;
}

.agentset-foot {
  display: flex;
  justify-content: flex-end;
  padding: 14px 22px 18px;
}

/* ============================================================
   BLUE SKY start screen (Downloader hero) — fully self-contained.
   Nothing here affects the other three variants.
   ============================================================ */
.start-screen-bluesky {
  position: relative;
  height: 100%;
  background: #fff;
  /* One width knob for the whole Blue Sky column — the masthead (greeting +
     field) AND all three persona bodies (Downloader drop/samples/connect,
     Invited handoff/rails, Analyst resume/pulse) track it, so changing it once
     widens every layout together. 560→728 (v109) gave the sample thumbnails
     room; 728→874 (~20% wider) opens all three layouts up further. */
  --bluesky-col: 874px;
  /* Masthead pinned on top, persona body scrolls underneath. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Blue Sky leans lighter/airier than the other start screens: antialiased
     smoothing (scoped here, not global) plus the lighter heading weights. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- shared masthead (the spine every persona keeps) ---- */
.bluesky-masthead {
  flex: 0 0 auto;
  padding: 30px 24px 22px;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
  z-index: 5;
}
.bluesky-mh-greet {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  /* Left-justified, aligned to the same left edge as the field / content column
     (was centered within 940px). */
  max-width: var(--bluesky-col); margin: 0 auto;
}
/* The greeting "spark" is the agent's undulating bar-chart loader, scaled up
   for the hero spot. It REST­S on the ascending frame (bars short→tall,
   left→right) and only comes alive while the user hovers the greeting, the
   subtitle, or the field. Hover run / graceful settle is driven from JS
   (initBlueSky) so it can always finish on the ascending frame rather than
   freezing mid-wave — see that handler. The custom keyframe below is built so
   its 0%/100% boundary IS the ascending full-height state, which makes the
   "pause at the next iteration" land exactly on rest with no visual jump. */
.bluesky-mh-bars {
  display: inline-flex; align-items: flex-end;
  transform: scale(1.7); transform-origin: center bottom;
  margin: 0 5px 2px;
}
.bluesky-mh-bars .typing-chart { height: 13px; }
.bluesky-mh-bars .typing-bar {
  /* Rest: full height (ascending 6/9/11 via the shared nth-child heights), no
     animation. .is-running (added by JS on hover) applies the undulation. */
  animation: none;
  transform: scaleY(1);
}
.bluesky-mh-bars.is-running .typing-bar {
  animation: blueskyMhUndulate 0.95s ease-in-out infinite;
}
.bluesky-mh-bars.is-running .typing-bar:nth-child(2) { animation-delay: 0.13s; }
.bluesky-mh-bars.is-running .typing-bar:nth-child(3) { animation-delay: 0.26s; }
/* Boundary (0/100%) = ascending full height, mid-cycle dips down — so pausing
   at any iteration boundary settles on the ascending frame. */
@keyframes blueskyMhUndulate {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.4); }
}
.bluesky-mh-title {
  font-size: 30px; font-weight: 500; letter-spacing: -0.5px;
  color: #1a2733; margin: 0; text-align: left;
}
.bluesky-mh-sub {
  max-width: var(--bluesky-col); margin: 8px auto 0;
  font-size: 14.5px; color: #5b6b7a; text-align: left;
}
.bluesky-mh-sub:empty { display: none; }
.bluesky-mh-sub strong { color: #26364a; font-weight: 600; }
/* the big, juicy, front-and-center field */
.bluesky-mh-field {
  display: flex; justify-content: center;
  margin-top: 18px;
}
.bluesky-mh-field .input-with-history {
  /* match the drop card / samples / connectors width (the shared column knob) */
  position: relative; width: 100%; max-width: var(--bluesky-col);
}
.bluesky-mh-field .bluesky-chatdock-input {
  width: 100%; max-width: none;
  padding: 17px 24px 17px 52px;
  font-size: 16.5px;
  border: 2px solid #d8e3f0; border-radius: 30px;
  box-shadow: 0 8px 26px rgba(31,73,125,0.05);
  transition: border-color .18s, box-shadow .18s;
}
.bluesky-mh-field .bluesky-chatdock-input:focus {
  border-color: #9fbce0; box-shadow: 0 10px 30px rgba(43,108,176,0.09);
}
.bluesky-mh-field .bluesky-chatdock-mark {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; pointer-events: none; z-index: 1;
}
.bluesky-mh-field .bluesky-chatdock-mark img { display: block; }

/* ---- sign-in nudge popover (points at the "Sign in" server toggle) ---- */
.bluesky-signin-pop {
  position: absolute; top: calc(100% + 18px); left: 0; z-index: 400;
  display: flex; align-items: flex-start; gap: 9px;
  width: 268px; padding: 13px 15px;
  background: #1f4979; color: #eaf2fb;
  border-radius: 12px; box-shadow: 0 8px 22px rgba(16,42,74,0.17);
  font-size: 12.5px; line-height: 1.45;
  animation: blueskyPopIn .32s cubic-bezier(.2,.9,.3,1.2) both;
}
.bluesky-signin-pop::before {
  content: ""; position: absolute; top: -6px; left: 76px;
  width: 12px; height: 12px; background: #1f4979;
  transform: rotate(45deg); border-radius: 2px;
}
.bluesky-signin-pop-spark { flex: 0 0 auto; color: #7fb0e6; font-size: 14px; line-height: 1.3; }
.bluesky-signin-pop-text { flex: 1 1 auto; }
.bluesky-signin-pop-x {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: #9fbdde; font-size: 17px; line-height: 1; padding: 0 0 0 2px;
  margin-top: -1px;
}
.bluesky-signin-pop-x:hover { color: #fff; }
@keyframes blueskyPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- persona body (scrolls under the masthead) ---- */
.bluesky-body {
  flex: 1 1 auto; min-height: 0;
  position: relative;
  overflow: auto;
  /* animate the re-center when the chat pane slides in/out (matches the
     sidebar-stack's 0.32s left/width transition) */
  transition: padding-right 0.32s ease;
}
.bluesky-dropzone {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Drop target sits close under the masthead (was vertically centered, ~76px
     gap; now compressed). Column layout so the Learning & Inspiration block can
     sit BELOW whichever stage is active (it lives outside the stages, so it
     stays put through profiling → result). */
  padding: 18px 24px 56px;
}
.bluesky-stage { width: 100%; max-width: var(--bluesky-col); }

/* ---- STATE 0: landing ---- */
.bluesky-hero { text-align: center; }
.bluesky-spark {
  font-size: 30px;
  color: #4e79a7;
  filter: drop-shadow(0 2px 10px rgba(78,121,167,0.35));
  animation: blueskyFloat 4s ease-in-out infinite;
}
@keyframes blueskyFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.bluesky-title {
  font-size: 34px; font-weight: 500; letter-spacing: -0.5px;
  color: #1a2733; margin: 10px 0 6px;
}
.bluesky-sub { font-size: 15px; color: #5b6b7a; margin: 0 0 30px; }

.bluesky-drop {
  display: block; width: 100%; max-width: var(--bluesky-col); margin: 0 auto;
  background: #ffffff;
  border: 2px dashed #b9cde4;
  border-radius: 18px;
  /* Shorter target — was 40px top/bottom; compressed with the rest. */
  padding: 26px 24px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
  box-shadow: 0 6px 26px rgba(31,73,125,0.03);
}
.bluesky-drop:hover {
  border-color: #6f9fd8; background: #fbfdff;
  box-shadow: 0 12px 34px rgba(31,73,125,0.06);
  transform: translateY(-1px);
}
.bluesky-drop-arrow { color: #5b87c4; margin-bottom: 6px; }
.bluesky-drop-main { display: block; font-size: 17px; font-weight: 600; color: #26364a; }
.bluesky-drop-sub { display: block; font-size: 12.5px; color: #7d8b9c; margin-top: 5px; }
.bluesky-browse-btn {
  display: inline-block; margin-top: 22px;
  background: #2b6cb0; color: #fff; border: none; border-radius: 9px;
  padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 3px 9px rgba(43,108,176,0.12);
  transition: background .15s, box-shadow .15s, transform .12s;
}
.bluesky-browse-btn:hover {
  background: #245c98; box-shadow: 0 4px 12px rgba(43,108,176,0.16);
  transform: translateY(-1px);
}

/* ---- shared section divider label (all-caps, LEFT-aligned, line to the
   right) ---- Used by SAMPLE DATA / CONNECT / INSPIRATION / LEARN so the
   blocks read as a set. Label sits flush left, the hairline fills the rest. */
.bluesky-section-rule {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.bluesky-section-rule span {
  flex: 0 0 auto;
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: #5b6b7a;
}
.bluesky-section-rule::after {
  content: ""; flex: 1 1 auto; height: 1px; background: #dbe5f0;
}

/* ---- sample dataset cards (replaces the plain "sample data" link) ---- */
.bluesky-samples { margin: 40px auto 0; max-width: var(--bluesky-col); }
.bluesky-samples-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.bluesky-sample-card {
  display: block; text-align: left; cursor: pointer; padding: 0;
  background: #fff; border: 1px solid #c4d2e2; border-radius: 13px; overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .14s;
}
.bluesky-sample-card:hover {
  border-color: #9fbce0; box-shadow: 0 12px 30px rgba(31,73,125,0.14);
  transform: translateY(-2px);
}
.bluesky-sample-thumb { height: 168px; border-bottom: 1px solid #d3deeb; background: #f4f8fd; overflow: hidden; }
.bluesky-sample-thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.bluesky-sample-body { padding: 10px 12px 12px; }
.bluesky-sample-name { font-size: 12.5px; font-weight: 600; color: #26364a; }
.bluesky-sample-meta { font-size: 11px; color: #93a3b4; margin-top: 2px; }

/* Connect row matches the samples block width (the shared column knob). Five
   equal columns — four branded sources + a "More" — aligned under the three
   sample cards. */
.bluesky-connectors { margin: 48px auto 0; max-width: var(--bluesky-col); }
.bluesky-connector-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.bluesky-connector {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #fff; border: 1px solid #c4d2e2; border-radius: 10px;
  padding: 10px 6px; font-size: 11.5px; color: #2f3e4e; cursor: pointer;
  white-space: nowrap; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.bluesky-connector:hover { border-color: #9fbce0; box-shadow: 0 4px 14px rgba(31,73,125,0.08); transform: translateY(-1px); }
.bluesky-connector-logo { flex: 0 0 auto; width: 16px; height: 16px; object-fit: contain; display: block; }
.bluesky-connector.is-gated { color: #63727f; }
/* the "More" pill — ellipsis glyph instead of a brand logo */
.bluesky-connector--more { color: #63727f; }
.bluesky-connector-more-ic { flex: 0 0 auto; color: #8494a5; }

/* ============================================================
   LEARNING & INSPIRATION (Downloader footer)
   A steady block under whatever stage is active. Two sub-blocks
   reuse the SAMPLE DATA / CONNECT divider + column knob so the
   whole Downloader reads as one stack.
   ============================================================ */
/* Quickstart sits between CONNECT and INSPIRATION, same column + spacing rhythm
   as the other Downloader sections. */
.bluesky-quickstart {
  width: 100%; max-width: var(--bluesky-col); margin: 48px auto 0;
}
.bluesky-learn {
  width: 100%; max-width: var(--bluesky-col);
  /* Space above INSPIRATION matches the other sections (SAMPLE DATA 40 /
     CONNECT 48) rather than the old doubled 80px — the footer reads as one
     more section in the stack, not a detached block. NO border-top: the
     INSPIRATION divider already draws a line; a border here would double it. */
  margin: 48px auto 0;
}
/* Gap between the two footer blocks. LEARN is first (its .bluesky-learn wrapper
   already spaces it from CONNECT above); INSPIRATION, now second, carries the
   inter-block gap. */
.bluesky-learn > .bluesky-inspire { margin-top: 60px; }
/* little intro line under each divider (lead + right-aligned link) */
.bluesky-inspire-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: -4px 0 14px;
}
.bluesky-inspire-lead { font-size: 13px; color: #5b6b7a; }
.bluesky-inspire-link {
  flex: 0 0 auto; font-size: 12.5px; color: #2b6cb0; cursor: pointer;
  white-space: nowrap;
}
.bluesky-inspire-link:hover { color: #1d5490; text-decoration: underline; }

/* ---- INSPIRATION: real Tableau Public viz thumbnails ---- */
.bluesky-inspire-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.bluesky-inspire-card {
  display: block; text-align: left; cursor: pointer; padding: 0;
  background: #fff; border: 1px solid #c4d2e2; border-radius: 13px; overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .14s;
}
.bluesky-inspire-card:hover {
  border-color: #9fbce0; box-shadow: 0 12px 30px rgba(31,73,125,0.14);
  transform: translateY(-2px);
}
.bluesky-inspire-thumb { position: relative; height: 150px; border-bottom: 1px solid #d3deeb; background: #f4f8fd; overflow: hidden; }
.bluesky-inspire-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* "Viz of the Day" ribbon on the first card */
.bluesky-inspire-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(26,39,51,0.82); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(2px);
}
.bluesky-inspire-body { padding: 10px 12px 12px; }
.bluesky-inspire-name { font-size: 12.5px; font-weight: 600; color: #26364a; }
.bluesky-inspire-author { font-size: 11px; color: #93a3b4; margin-top: 2px; }

/* ---- LEARN: real Tableau training videos (compact list) ---- */
.bluesky-learn-list { display: flex; flex-direction: column; gap: 8px; }
.bluesky-learn-item {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #c4d2e2; border-radius: 11px;
  padding: 11px 14px; width: 100%;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.bluesky-learn-item:hover { border-color: #9fbce0; box-shadow: 0 6px 18px rgba(31,73,125,0.09); transform: translateY(-1px); }
.bluesky-learn-play {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 30%, #6f9fd8, #4e79a7);
  box-shadow: 0 2px 8px rgba(78,121,167,0.35);
}
.bluesky-learn-play svg { display: block; margin-left: 1px; }
.bluesky-learn-textwrap { flex: 1 1 auto; min-width: 0; }
.bluesky-learn-title { font-size: 13.5px; font-weight: 600; color: #26364a; }
.bluesky-learn-desc { font-size: 11.5px; color: #7d8b9c; margin-top: 1px; }
.bluesky-learn-dur {
  flex: 0 0 auto; font-size: 11px; color: #63727f;
  background: #f0f4f9; border-radius: 20px; padding: 3px 9px;
}

/* Offline: inspiration + learn need a connection (they're remote content), so
   dim them like the cloud connectors rather than hiding — reconnect to browse. */
.start-screen-bluesky.is-offline .bluesky-learn { opacity: 0.4; pointer-events: none; }

/* ---- shared agent line ---- */
.bluesky-agent-line { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; }
.bluesky-agent-avatar {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; color: #fff;
  background: radial-gradient(circle at 30% 30%, #6f9fd8, #4e79a7);
  box-shadow: 0 2px 8px rgba(78,121,167,0.4);
}
.bluesky-agent-text { font-size: 15px; line-height: 1.5; color: #2a3947; padding-top: 2px; }
.bluesky-agent-text strong { color: #1a2733; font-weight: 600; }

/* ---- STATE 1: profiling shimmer ---- */
.bluesky-work { width: 100%; }
.bluesky-shimmer { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.bluesky-shimmer-row {
  height: 40px; border-radius: 10px;
  background: linear-gradient(90deg,#eef3f9 25%,#e2eaf4 37%,#eef3f9 63%);
  background-size: 400% 100%;
  animation: blueskyShimmer 1.3s ease infinite;
}
.bluesky-shimmer-row:nth-child(2) { width: 92%; animation-delay: .12s; }
.bluesky-shimmer-row:nth-child(3) { width: 84%; animation-delay: .24s; }
.bluesky-shimmer-row:nth-child(4) { width: 70%; animation-delay: .36s; }
@keyframes blueskyShimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* ---- STATE 2: profile read-back ---- */
.bluesky-profile {
  background: #fff; border: 1px solid #e3ebf4; border-radius: 14px;
  padding: 8px; box-shadow: 0 8px 28px rgba(31,73,125,0.07);
  animation: blueskyRise .32s ease both;
}
@keyframes blueskyRise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.bluesky-profile-grid { display: flex; flex-direction: column; }
.bluesky-field {
  display: grid; grid-template-columns: 26px 130px 1fr; align-items: center;
  gap: 10px; padding: 11px 12px; border-radius: 9px; font-size: 13.5px;
}
.bluesky-field + .bluesky-field { border-top: 1px solid #f0f4f9; }
.bluesky-field-ic { text-align: center; font-size: 14px; }
.bluesky-field-ic--num { color: #4e79a7; font-weight: 700; font-size: 15px; }
.bluesky-field-name { font-weight: 600; color: #26364a; }
.bluesky-field-meta { color: #7a8797; font-size: 12.5px; }
.bluesky-field--warn { background: #fff8ec; }
.bluesky-field--warn .bluesky-field-meta { color: #b5751a; }
.bluesky-profile-actions { display: flex; gap: 10px; padding: 12px; }

/* ---- buttons ---- */
.bluesky-btn {
  border: 1px solid #d3dfec; background: #fff; color: #2f3e4e;
  border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s, transform .12s;
}
.bluesky-btn:hover { border-color: #9fbce0; box-shadow: 0 3px 12px rgba(31,73,125,0.09); transform: translateY(-1px); }
.bluesky-btn--primary { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.bluesky-btn--primary:hover { background: #245c98; box-shadow: 0 4px 16px rgba(43,108,176,0.32); }
.bluesky-btn--save { background: #1a2733; border-color: #1a2733; color: #fff; }
.bluesky-btn--save:hover { background: #263748; }

/* ---- STATE 3: starter pack ---- */
.bluesky-pack { margin-top: 26px; animation: blueskyRise .34s ease both; }
.bluesky-pack-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bluesky-pack-card {
  background: #fff; border: 1px solid #e3ebf4; border-radius: 14px;
  padding: 14px; cursor: pointer; text-align: left;
  box-shadow: 0 6px 22px rgba(31,73,125,0.06);
  transition: border-color .15s, box-shadow .15s, transform .14s;
  animation: blueskyRise .4s ease both;
}
.bluesky-pack-card:nth-child(2) { animation-delay: .07s; }
.bluesky-pack-card:nth-child(3) { animation-delay: .14s; }
.bluesky-pack-card:hover { border-color: #9fbce0; box-shadow: 0 12px 30px rgba(31,73,125,0.14); transform: translateY(-2px); }
.bluesky-pack-card-title { font-size: 13px; font-weight: 600; color: #26364a; margin-bottom: 10px; }
.bluesky-pack-card-viz { height: 78px; }

.bluesky-pack-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 18px 0 0; padding: 12px 14px;
  background: #eef4fb; border: 1px solid #dbe8f6; border-radius: 11px;
  font-size: 13.5px; color: #33475b; line-height: 1.45;
}
.bluesky-pack-note-mark { color: #4e79a7; }
.bluesky-pack-actions { display: flex; gap: 10px; margin-top: 16px; }

.bluesky-save {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding: 16px 18px;
  background: linear-gradient(180deg,#fff,#f7fafe);
  border: 1px solid #e3ebf4; border-radius: 13px;
}
.bluesky-save-mark { color: #4e79a7; font-size: 16px; }
.bluesky-save-text { flex: 1 1 240px; font-size: 13.5px; color: #33475b; }

/* ---- drag veil ---- */
.bluesky-dragveil {
  position: absolute; inset: 0; display: none;
  background: rgba(43,108,176,0.10);
  backdrop-filter: blur(1px);
  z-index: 30; align-items: center; justify-content: center;
  pointer-events: none;
}
.start-screen-bluesky.is-dragging .bluesky-dragveil { display: flex; }
.bluesky-dragveil-inner {
  border: 3px dashed #2b6cb0; border-radius: 20px;
  padding: 40px 60px; font-size: 20px; font-weight: 600; color: #21598f;
  background: rgba(255,255,255,0.85);
}

/* ============================================================
   BLUE SKY — Invited hero (signed-in). Lives inside #startScreenBlueSky.
   ============================================================ */
.bluesky-invited { width: 100%; }
/* Share the Downloader's column knob so the hero body lines up directly under
   the masthead greeting/field (both centered at var(--bluesky-col)) instead of
   sitting in a wider, differently-centered 940px block. Keeps the "one system,
   the top never moves" promise as you scroll masthead → body. The +48px on
   max-width makes the *content box* (after the 24px gutters) equal the column,
   so the section heads share the field's exact left edge (like the masthead,
   which pads outside its 728px content rather than inside). */
.bluesky-invited-inner { max-width: calc(var(--bluesky-col) + 48px); margin: 0 auto; padding: 28px 24px 80px; }

/* ---- deep-link handoff ---- */
.bsi-handoff { margin-bottom: 40px; }
.bsi-handoff-from { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.bsi-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 12.5px; font-weight: 700;
}
.bsi-handoff-fromtext { font-size: 14px; color: #2a3947; flex: 1 1 auto; }
.bsi-handoff-fromtext strong { color: #1a2733; }
.bsi-handoff-meta { color: #7d8b9c; margin-left: 4px; font-size: 13px; }

.bsi-handoff-card {
  display: flex; gap: 0; background: #fff;
  border: 1px solid #e0e8f2; border-radius: 16px; overflow: hidden;
  /* Softer, tighter shadow than the old 0 10px 34px — the anchor card should
     feel grounded, not floating. */
  box-shadow: 0 3px 12px rgba(31,73,125,0.06);
}
/* Slimmer than the old 940px layout's 300px — in the shared 728px column a
   narrower thumb leaves the body room so the action buttons stay on one line. */
.bsi-handoff-thumb { flex: 0 0 248px; border-right: 1px solid #eef2f7; background: #f4f8fd; }
.bsi-handoff-thumb svg { display: block; height: 100%; width: 100%; }
.bsi-handoff-body { padding: 22px 24px; flex: 1 1 auto; }
.bsi-handoff-title { font-size: 20px; font-weight: 500; color: #1a2733; margin-bottom: 12px; }
.bsi-handoff-note {
  font-size: 14.5px; line-height: 1.55; color: #3b4b5b;
  background: #f6f9fc; border-left: 3px solid #e15759; border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin-bottom: 18px;
}
.bsi-quote { color: #b6c2ce; font-weight: 700; }
.bsi-handoff-actions { display: flex; gap: 10px; }

/* ---- sections ----
   Section heads adopt the Downloader's left-aligned uppercase divider-rule
   look (.bluesky-section-rule): a bold eyebrow label flush-left with a hairline
   running to the right edge. Kept as CSS over the existing markup so the JS
   content targets and the offline `::after` rules are untouched. A small grid
   lets the label carry the hairline while any sub/link fold onto a second row
   (mirroring the Downloader's rule + lead-row pairing). Wider inter-section
   rhythm to match the Downloader's ~2x space above each header. */
.bsi-section { margin-bottom: 44px; }
.bsi-section-head {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-template-areas:
    "title rule link"
    "sub   sub  sub";
  align-items: center;
  column-gap: 12px;
  margin-bottom: 16px;
}
.bsi-section-title {
  grid-area: title;
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: #5b6b7a; margin: 0;
}
.bsi-section-head::after {
  content: ""; grid-area: rule; height: 1px; background: #dbe5f0;
}
.bsi-section-sub { grid-area: sub; font-size: 12.5px; color: #8494a5; margin-top: 5px; }
.bsi-section-link {
  grid-area: link; justify-self: end;
  font-size: 12.5px; color: #2b6cb0; cursor: pointer;
}
.bsi-section-link:hover { text-decoration: underline; }

/* ---- Slack shelf ---- These cards reuse the .bsi-team-card anatomy (thumbnail
   on top → body) so "Shared with you" reads like "From people you work with".
   Grid, 3-up, matching the team grid. The only Slack-specific bits are the
   message quote and the small meta line beside the Open chip. */
.bsi-slack-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bsi-slack-quote { font-size: 12.5px; line-height: 1.5; color: #33475b; margin-bottom: 11px; }
.bsi-slack-meta { font-size: 11px; color: #93a3b4; margin-left: auto; align-self: center; }

/* ---- team grid (remix-first) ---- */
.bsi-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Card is a flex column and the grid stretches all cards in a row to equal
   height, so the actions row (margin-top:auto) pins to the bottom and the Open
   chip stays aligned across the row no matter how long each quote runs. */
.bsi-team-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e6ecf3; border-radius: 13px;
  overflow: hidden; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .13s;
}
.bsi-team-card:hover { border-color: #9fbce0; box-shadow: 0 10px 26px rgba(31,73,125,0.12); transform: translateY(-2px); }
.bsi-team-thumb { flex: 0 0 auto; height: 132px; background: #f4f8fd; border-bottom: 1px solid #eef2f7; overflow: hidden; }
.bsi-team-thumb svg { display: block; height: 100%; width: 100%; }
.bsi-team-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bsi-team-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 14px; }
.bsi-team-name { font-size: 13.5px; font-weight: 600; color: #26364a; margin-bottom: 7px; }
.bsi-team-owner { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.bsi-team-owner .bsi-avatar { width: 20px; height: 20px; font-size: 9px; }
.bsi-team-owner-text { font-size: 11.5px; color: #7d8b9c; }
.bsi-team-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.bsi-chip {
  border: 1px solid #d9e2ec; background: #fff; border-radius: 7px;
  padding: 5px 11px; font-size: 12px; font-weight: 600; color: #3b4b5b; cursor: pointer;
  transition: border-color .13s, background .13s;
}
.bsi-chip:hover { border-color: #9fbce0; background: #f6f9fc; }
.bsi-chip--remix { color: #2b6cb0; border-color: #bcd3ee; background: #f2f8ff; }

/* ---- find your data ---- Cards now stack a one-line description under the
   name (was a single-line pill row), so a newcomer knows what each source
   holds. Responsive grid, min 220px, so 3 fit across the wide column. */
.bsi-data-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.bsi-data-src {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: #fff; border: 1px solid #e6ecf3; border-radius: 11px;
  padding: 13px 15px; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.bsi-data-src:hover { border-color: #9fbce0; box-shadow: 0 5px 16px rgba(31,73,125,0.09); transform: translateY(-1px); }
.bsi-data-head { display: flex; align-items: center; gap: 8px; }
.bsi-data-ic { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; }
.bsi-data-name { font-size: 13px; font-weight: 600; color: #2f3e4e; }
.bsi-data-cert { font-size: 10px; color: #59a14f; border: 1px solid #cfe6cd; border-radius: 20px; padding: 1px 7px; }
.bsi-data-desc { font-size: 12px; line-height: 1.45; color: #667585; }
.bsi-data-meta { font-size: 11.5px; color: #93a3b4; }

/* Once the chat pane is open the masthead FIELD is redundant (you're already
   typing in the chat pane) — but keep the greeting so the top still feels
   anchored. Only the field is removed. */
.main-content:has(.sidebar-stack.active) .bluesky-mh-field { display: none; }
/* And the remaining body content re-centers in the space left of the 340px
   chat pane, so it isn't stranded under the pane's left edge. */
.main-content:has(.sidebar-stack.active) .start-screen-bluesky .bluesky-body { padding-right: 340px; }

/* ============================================================
   ANALYST hero (signed-in, seasoned — mhillsite). Resume WIP is
   the anchor; Pulse "what changed" + a lighter team rail below.
   Reuses .bsi-section / .bluesky-btn idioms from the Invited hero.
   ============================================================ */
.bluesky-analyst { width: 100%; }
/* Same shared column as the Downloader/Invited (see .bluesky-invited-inner). */
.bluesky-analyst-inner { max-width: calc(var(--bluesky-col) + 48px); margin: 0 auto; padding: 28px 24px 80px; }

/* ---- resume WIP carousel ---- arrows flank a single-card viewport; dots sit
   below. The card fills the viewport; JS swaps its contents per slide. */
.bsa-resume-carousel { display: flex; align-items: center; gap: 12px; }
.bsa-resume-viewport { flex: 1 1 auto; min-width: 0; }
.bsa-resume-arrow {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid #d3dfec; color: #4e79a7;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.bsa-resume-arrow:hover { border-color: #9fbce0; background: #f6f9fc; box-shadow: 0 3px 10px rgba(31,73,125,0.08); }
.bsa-resume-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.bsa-resume-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  border: none; background: #cbd6e3; cursor: pointer; transition: background .15s, transform .15s;
}
.bsa-resume-dot:hover { background: #9fbce0; }
.bsa-resume-dot.is-active { background: #2b6cb0; transform: scale(1.25); }

/* ---- resume WIP anchor ---- */
.bsa-resume-card {
  display: flex; gap: 0; background: #fff;
  border: 1px solid #e0e8f2; border-radius: 16px; overflow: hidden;
  /* Softer, tighter shadow (matches .bsi-handoff-card) — grounded, not floating. */
  box-shadow: 0 3px 12px rgba(31,73,125,0.06);
}
/* Slimmer for the shared 728px column (was 320px in the old 940px layout). */
.bsa-resume-thumb { flex: 0 0 260px; border-right: 1px solid #eef2f7; background: #f4f8fd; }
.bsa-resume-thumb svg { display: block; height: 100%; width: 100%; }
.bsa-resume-body { padding: 22px 24px; flex: 1 1 auto; }
.bsa-resume-title { font-size: 20px; font-weight: 500; color: #1a2733; margin-bottom: 4px; }
.bsa-resume-meta { font-size: 12.5px; color: #7d8b9c; margin-bottom: 14px; }
.bsa-resume-thread {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 14px; line-height: 1.55; color: #3b4b5b;
  background: #f6f9fc; border-left: 3px solid #4e79a7; border-radius: 0 8px 8px 0;
  padding: 11px 14px; margin-bottom: 18px;
}
.bsa-resume-thread-mark { color: #2b6cb0; font-weight: 700; flex: 0 0 auto; }
.bsa-resume-thread-text em { color: #26364a; font-style: italic; }
.bsa-resume-actions { display: flex; gap: 10px; }

/* ---- Pinned insights row — renders the app's shared .insight-card component
   (defined once up in the insights section) so the tiles read identically to the
   authoring/discover surfaces. 4-up grid; the cards flex to fill the column
   (overriding .insight-card's fixed 200px width) but keep their native look. */
.bsa-pulse-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* insight-cards flex to fill their grid cell (override the component's fixed
   200px) wherever they appear in the Analyst hero — Pinned insights AND the
   mixed What's-changed row. */
.bsa-pulse-row .insight-card,
.bsa-changed-row .insight-card { width: auto; }

/* Pin icon standing in for the word "Pinned" before the section label. Inherits
   the label's uppercase eyebrow color; nudged to sit on the text baseline. */
.bsa-pin-ic {
  display: inline-flex; align-items: center;
  margin-right: 7px; color: #5b6b7a; vertical-align: -1px;
}
.bsa-pin-ic svg { display: block; }

/* ---- workbook content-card rows (What changed / Favorites / Recents /
   Quickstart) — the same card anatomy the other start screens use (thumbnail +
   title + meta), in the Blue Sky card family (rounded, blue border, hover-lift).
   3-up grid; horizontally scrollable if it ever overflows. ---- */
.bsa-changed-row,
.bsa-content-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bsa-content-card {
  display: block; text-align: left; cursor: pointer; padding: 0;
  background: #fff; border: 1px solid #c4d2e2; border-radius: 13px; overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .14s;
}
.bsa-content-card:hover {
  border-color: #9fbce0; box-shadow: 0 12px 30px rgba(31,73,125,0.14);
  transform: translateY(-2px);
}
.bsa-content-thumb { height: 132px; border-bottom: 1px solid #d3deeb; background: #f4f8fd; overflow: hidden; }
.bsa-content-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bsa-content-body { padding: 10px 13px 13px; }
.bsa-content-name { font-size: 13px; font-weight: 600; color: #26364a; }
.bsa-content-meta { font-size: 11px; color: #93a3b4; margin-top: 3px; }
/* the "what changed" note reads a touch more prominent than plain meta */
.bsa-content-change { color: #55677a; font-weight: 500; }

/* Analyst offline: the remote-signal sections (What changed + Pinned insights)
   dim — they need a connection to refresh; the resume card and the cached
   Favorites/Recents/Quickstart stay usable. */
.start-screen-bluesky.is-offline .bsa-pulse-row,
.start-screen-bluesky.is-offline .bsa-changed-row {
  opacity: 0.42; pointer-events: none; filter: grayscale(0.3);
}
.start-screen-bluesky.is-offline .bsi-section:has(.bsa-pulse-row) .bsi-section-title::after,
.start-screen-bluesky.is-offline .bsi-section:has(.bsa-changed-row) .bsi-section-title::after {
  content: " · needs a connection";
  font-weight: 400; font-size: 12px; color: #b0632a;
}

/* ============================================================
   GUIDED hero (signed-in, new — acme-cloud). An admin-curated
   homepage: welcome-from-admin anchor → curated Projects → certified
   data → metrics to watch. Reuses .bsi-section / .bluesky-btn /
   .bsi-data-src / .insight-card idioms; only the welcome anchor and the
   Project folder card are new.
   ============================================================ */
.bluesky-guided { width: 100%; }
.bluesky-guided-inner { max-width: calc(var(--bluesky-col) + 48px); margin: 0 auto; padding: 28px 24px 80px; }

/* ---- welcome-from-admin anchor ---- mirrors the Invited handoff card, but the
   "from" is the admin and the note is an onboarding hand. A green accent (vs the
   Invited card's red task flag) reads as "here to help", not "do this". ---- */
.bsg-welcome { margin-bottom: 40px; }
.bsg-welcome-from { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.bsg-welcome-card {
  display: flex; gap: 0; background: #fff;
  border: 1px solid #e0e8f2; border-radius: 16px; overflow: hidden;
  box-shadow: 0 3px 12px rgba(31,73,125,0.06);
}
.bsg-welcome-thumb { flex: 0 0 248px; border-right: 1px solid #eef2f7; background: #f4f8fd; }
.bsg-welcome-thumb svg { display: block; height: 100%; width: 100%; }
.bsg-welcome-body { padding: 20px 24px; flex: 1 1 auto; }
.bsg-welcome-eyebrow {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: #59a14f; margin-bottom: 6px;
}
.bsg-welcome-title { font-size: 20px; font-weight: 500; color: #1a2733; margin-bottom: 12px; }
.bsg-welcome-note {
  font-size: 14.5px; line-height: 1.55; color: #3b4b5b;
  background: #f4faf4; border-left: 3px solid #59a14f; border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin-bottom: 18px;
}
.bsg-welcome-actions { display: flex; gap: 10px; }

/* ---- curated Projects (the new component) ---- a "folder" card: a 2x2 thumb
   wall on the left, then the project name + count + the admin's description +
   a curated-by line. Two-up on the wide column so the descriptions have room. */
.bsg-projects-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bsg-proj-card {
  display: flex; gap: 0; text-align: left; cursor: pointer; padding: 0;
  background: #fff; border: 1px solid #dce6f1; border-radius: 14px; overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .14s;
}
.bsg-proj-card:hover {
  border-color: #9fbce0; box-shadow: 0 12px 30px rgba(31,73,125,0.13);
  transform: translateY(-2px);
}
/* thumbnail wall: a 2x2 grid of the project's contents, tinted top border by the
   project color so each project reads distinctly. */
.bsg-proj-wall {
  flex: 0 0 116px; align-self: stretch;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2px;
  background: #eef3f9; border-right: 1px solid #e6ecf3;
  border-top: 3px solid var(--proj-color, #4e79a7);
}
.bsg-proj-tile { overflow: hidden; background: #f4f8fd; }
.bsg-proj-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bsg-proj-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 13px 15px; min-width: 0; }
.bsg-proj-head { display: flex; align-items: center; gap: 7px; }
.bsg-proj-folder { display: inline-flex; color: var(--proj-color, #4e79a7); flex: 0 0 auto; }
.bsg-proj-name { font-size: 14px; font-weight: 600; color: #26364a; }
.bsg-proj-count { font-size: 11px; color: #93a3b4; margin: 2px 0 8px 22px; }
.bsg-proj-desc { font-size: 12.5px; line-height: 1.5; color: #667585; flex: 1 1 auto; }
.bsg-proj-owner { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.bsg-proj-owner .bsi-avatar { width: 20px; height: 20px; font-size: 9px; }
.bsg-proj-owner-text { font-size: 11.5px; color: #7d8b9c; }

/* Guided offline: the certified data + metrics rows dim (they need a connection
   to refresh) — the curated Projects stay usable because curated dashboards are
   often cached, which is the whole point of an admin-prepared homepage. */
.start-screen-bluesky.is-offline .bsg-metrics-dim,
.start-screen-bluesky.is-offline #bsgDataRow,
.start-screen-bluesky.is-offline #bsgMetricsRow {
  opacity: 0.42; pointer-events: none; filter: grayscale(0.3);
}
.start-screen-bluesky.is-offline .bsi-section:has(#bsgDataRow) .bsi-section-title::after,
.start-screen-bluesky.is-offline .bsi-section:has(#bsgMetricsRow) .bsi-section-title::after {
  content: " · needs a connection";
  font-weight: 400; font-size: 12px; color: #b0632a;
}
/* Learn (Guided) needs a connection like the signed-out training rail. The
   first-week checklist stays usable offline — its actions open cached content. */
.start-screen-bluesky.is-offline #bsgLearnList { opacity: 0.42; pointer-events: none; filter: grayscale(0.3); }
.start-screen-bluesky.is-offline .bsi-section:has(#bsgLearnList) .bsi-section-title::after {
  content: " · needs a connection";
  font-weight: 400; font-size: 12px; color: #b0632a;
}

/* ---- YOUR FIRST WEEK checklist (Guided) ---- */
.bsg-firstweek { margin-bottom: 8px; }
/* Progress bar: a count + a thin track that fills as steps complete. */
.bsg-progress { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; }
.bsg-progress-count { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #5b6b7a; min-width: 66px; }
.bsg-progress-track { flex: 1 1 auto; height: 6px; border-radius: 6px; background: #e4ebf3; overflow: hidden; }
.bsg-progress-fill {
  display: block; height: 100%; border-radius: 6px; width: 0%;
  background: linear-gradient(90deg, #59a14f, #74c069);
  transition: width .35s cubic-bezier(.4,.9,.3,1);
}
.bsg-firstweek.is-complete .bsg-progress-count { color: #3d8a3a; }

.bsg-checklist { display: flex; flex-direction: column; gap: 8px; }
.bsg-step {
  display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #c4d2e2; border-radius: 11px;
  padding: 12px 15px; width: 100%;
  transition: border-color .15s, box-shadow .15s, transform .12s, background .15s;
}
.bsg-step:hover { border-color: #9fbce0; box-shadow: 0 6px 18px rgba(31,73,125,0.09); transform: translateY(-1px); }
/* The checkbox: an empty ring by default, a filled green tick when done. */
.bsg-step-check {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.8px solid #c4d2e2; color: transparent;
  transition: background .18s, border-color .18s, color .18s;
}
.bsg-step-text { flex: 1 1 auto; min-width: 0; }
.bsg-step-title { display: block; font-size: 13.5px; font-weight: 600; color: #26364a; }
.bsg-step-desc { display: block; font-size: 11.5px; color: #7d8b9c; margin-top: 1px; }
.bsg-step-status { flex: 0 0 auto; font-size: 11.5px; color: #93a3b4; }
.bsg-step-go { font-size: 15px; color: #b0becd; }
.bsg-step:hover .bsg-step-go { color: #4e79a7; }

/* Done state: green tick, muted title, calm background. */
.bsg-step.is-done { background: #f4faf3; border-color: #cfe6cb; }
.bsg-step.is-done .bsg-step-check { background: #59a14f; border-color: #59a14f; color: #fff; }
.bsg-step.is-done .bsg-step-title { color: #56636f; }
.bsg-step.is-done .bsg-step-status { color: #5a9e54; font-weight: 600; }

/* ============================================================
   ADMIN CONSOLE ("Admin" start variant) — Priya configuring curated
   homepages. A realistic Tableau Cloud admin shell (top bar + left nav)
   that frames two views: the audience MATRIX and the homepage BUILDER.
   ============================================================ */
#startScreenAdmin.start-screen { padding: 0; height: 100%; overflow: hidden; background: #f4f6f9; }

/* Top bar (stands in for the hidden blue app bar) */
.admin-topbar {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px; background: #1c3f5f; color: #eaf1f8;
  font-size: 13px; flex: 0 0 auto;
}
.admin-sparkle {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px;
  background: rgba(255,255,255,0.08); cursor: pointer; border: none;
}
.admin-sparkle:hover { background: rgba(255,255,255,0.16); }
.admin-topbar-site { font-weight: 600; }
.admin-topbar-crumb { color: #a9c2da; }
.admin-topbar-crumb::before { content: "/ "; color: #6f8ba6; }
.admin-topbar-spacer { flex: 1 1 auto; }
.admin-topbar-me { display: flex; align-items: center; gap: 8px; color: #cfe0ee; font-size: 12.5px; }
.admin-topbar-me .bsi-avatar { width: 24px; height: 24px; font-size: 10px; }

/* Two-pane body: left nav + main */
.admin-layout { display: flex; height: calc(100% - 48px); }

.admin-nav {
  width: 218px; flex: 0 0 auto; background: #fff; border-right: 1px solid #e2e8f0;
  padding: 12px 10px 16px; overflow-y: auto;
}
/* Header: centered product logo + (static) collapse chevron */
.admin-nav-head {
  position: relative; display: grid; place-items: center;
  height: 40px; margin-bottom: 12px;
}
.admin-nav-logo { display: block; }
.admin-nav-collapse {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px;
  color: #8a99aa; font-size: 17px; line-height: 1; cursor: pointer;
}
.admin-nav-collapse:hover { background: #f0f4f9; color: #4a5a6a; }
/* Site / environment switcher (static chrome) */
.admin-nav-env {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; margin-bottom: 14px; cursor: pointer;
  background: #fff; border: 1px solid #d7e0ea; border-radius: 8px;
  font-size: 13px; color: #33475b; text-align: left;
}
.admin-nav-env:hover { border-color: #9fbce0; background: #f7fafd; }
.admin-nav-env-dot { width: 8px; height: 8px; border-radius: 50%; background: #59a14f; flex: 0 0 auto; }
.admin-nav-env-label { font-weight: 600; }
.admin-nav-env-caret { margin-left: auto; color: #9aa8b8; font-size: 11px; }
.admin-nav-group { margin-bottom: 8px; }
/* Thin light rules between groups */
.admin-nav-div { height: 1px; background: #edf1f6; margin: 8px 4px 12px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: #4a5a6a;
  cursor: pointer;
}
.admin-nav-item svg { flex: 0 0 auto; color: #7b8b9c; }
.admin-nav-item:hover { background: #f0f4f9; }
.admin-nav-item:hover svg { color: #4a5a6a; }
.admin-nav-item.active { background: #e8f0fa; color: #1c3f5f; font-weight: 600; }
.admin-nav-item.active svg { color: #2b6cb0; }
.admin-nav-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #2b6cb0; color: #fff; border-radius: 20px; padding: 2px 6px; margin-left: auto;
}

.admin-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 30px 34px 60px; position: relative; }

/* ---- Screen A: page head + matrix ---- */
.admin-page-head { margin-bottom: 22px; max-width: 760px; }
.admin-page-title { font-size: 22px; font-weight: 600; color: #1a2733; margin: 0 0 8px; }
.admin-page-lead { font-size: 13.5px; line-height: 1.6; color: #5b6b7a; margin: 0; }

.admin-matrix { display: grid; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.admin-mx-corner {
  font-size: 11px; font-weight: 600; color: #93a3b4; align-self: end; padding-bottom: 6px;
}
.admin-mx-col {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
  color: #5b6b7a; text-align: center; align-self: end; padding-bottom: 6px;
}
.admin-mx-row-label { display: flex; flex-direction: column; justify-content: center; }
.admin-mx-team { font-size: 14.5px; font-weight: 600; color: #26364a; }
.admin-mx-group { font-size: 10.5px; color: #9aa8b8; }

.admin-cell {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #d3deeb; border-radius: 11px; padding: 14px 15px;
  min-height: 66px; transition: border-color .14s, box-shadow .14s, transform .12s;
}
.admin-cell:hover { border-color: #9fbce0; box-shadow: 0 6px 18px rgba(31,73,125,0.10); transform: translateY(-1px); }
.admin-cell.is-inherit { background: #f7f9fc; border-style: dashed; border-color: #d7e0ea; }
.admin-cell-state { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #33475b; }
.admin-cell.is-inherit .admin-cell-state { color: #93a3b4; font-weight: 500; }
.admin-cell-people { font-size: 11.5px; color: #93a3b4; }
.admin-cell--published { border-left: 3px solid #59a14f; }
.admin-cell--draft { border-left: 3px solid #e8a33d; }

.admin-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.admin-dot--pub { background: #59a14f; }
.admin-dot--draft { background: #e8a33d; }
.admin-dot--inherit { background: #c4d0dc; }

/* Base row */
.admin-base-row { margin-bottom: 20px; }
.admin-base-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: #fbfdff; border: 1px solid #d3deeb; border-radius: 11px; padding: 15px 18px;
  transition: border-color .14s, box-shadow .14s;
}
.admin-base-card:hover { border-color: #9fbce0; box-shadow: 0 6px 18px rgba(31,73,125,0.08); }
.admin-base-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: #e8f0fa; color: #2b6cb0; font-size: 18px;
}
.admin-base-text { flex: 1 1 auto; }
.admin-base-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #26364a; }
.admin-base-sub { display: block; font-size: 12px; color: #7d8b9c; margin-top: 2px; }
.admin-base-go { color: #b0becd; font-size: 17px; }

.admin-matrix-legend { display: flex; gap: 20px; font-size: 12px; color: #7d8b9c; }
.admin-matrix-legend span { display: flex; align-items: center; gap: 6px; }

/* ---- Screen B: builder ---- */
/* Fills the whole main pane (padding included) so no background band shows
   below it — absolute beats a height:100% that comes up short by main's padding. */
.admin-builder-view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.admin-builder-bar {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  padding: 14px 24px; background: #fff; border-bottom: 1px solid #e2e8f0;
}
.admin-back {
  display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  font-size: 13px; color: #2b6cb0; padding: 4px 6px; border-radius: 6px;
}
.admin-back:hover { background: #f0f4f9; }
.admin-back-caret { font-size: 18px; line-height: 1; margin-top: -1px; }
.admin-builder-scope { font-size: 15px; font-weight: 600; color: #1a2733; }
.admin-builder-count { font-size: 12px; color: #93a3b4; }
.admin-preview-as { font-size: 12.5px; color: #5b6b7a; display: flex; align-items: center; gap: 7px; }
.admin-preview-select {
  font-size: 12.5px; color: #33475b; padding: 5px 8px; border: 1px solid #cdd8e4;
  border-radius: 7px; background: #fff; cursor: pointer;
}
.admin-publish { flex: 0 0 auto; }
.admin-publish.is-published { background: #59a14f !important; border-color: #59a14f !important; }
/* Page-level "user can customize" toggle — sits atop the block rail, under the
   "Blocks" heading, as a page-wide setting above the individual block rows. */
.admin-allow-customize {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; cursor: pointer;
  font-size: 12.5px; color: #4a5a6a; user-select: none;
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #eef2f6;
}
.admin-allow-customize input {
  width: 15px; height: 15px; margin: 0; accent-color: #2b6cb0; cursor: pointer; flex: 0 0 auto;
}
.admin-allow-customize:hover { color: #2b6cb0; }

.admin-builder-body { flex: 1 1 auto; display: flex; min-height: 0; }

/* builder rail */
.admin-builder-rail {
  width: 320px; flex: 0 0 auto; background: #fff; border-right: 1px solid #e2e8f0;
  overflow-y: auto; padding: 16px 14px;
}
.admin-rail-head {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  color: #9aa8b8; margin-bottom: 12px; padding: 0 4px;
}
.admin-block {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 12px 11px 8px; border-radius: 10px; border: 1px solid transparent; margin-bottom: 4px;
  background: #fff; transition: opacity .12s, box-shadow .12s, border-color .12s;
}
.admin-block:hover { background: #f6f9fc; }
/* an OFF block is on the page but hidden from the audience — dim it */
.admin-block:not(.is-on):not(.is-locked) { opacity: .55; }
.admin-block:not(.is-on):not(.is-locked):hover { opacity: .8; }
/* drag handle */
.admin-block-grip {
  flex: 0 0 auto; width: 14px; align-self: stretch; display: flex; align-items: center; justify-content: center;
  color: #c3cdd8; font-size: 13px; cursor: grab; user-select: none; letter-spacing: -1px;
}
.admin-block-grip:active { cursor: grabbing; }
.admin-block.is-locked .admin-block-grip { visibility: hidden; }
.admin-block-ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: #eef2f7; color: #8494a5; font-size: 14px; margin-top: 1px;
}
.admin-block.is-on .admin-block-ic { background: #e8f0fa; color: #2b6cb0; }
.admin-block-text { flex: 1 1 auto; min-width: 0; }
.admin-block-label { display: block; font-size: 13px; font-weight: 600; color: #33475b; }
.admin-block-desc { display: block; font-size: 11.5px; color: #7d8b9c; margin-top: 2px; line-height: 1.4; }
.admin-block-grounds {
  display: block; font-size: 10.5px; color: #a4b0bd; margin-top: 4px; font-style: italic;
}
/* actions: remove (top) · on/off toggle (middle) · edit (bottom, hover) */
.admin-block-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; align-items: center; margin-top: 1px; }
.admin-block-remove, .admin-block-edit {
  width: 22px; height: 18px; border: none; background: transparent; cursor: pointer;
  color: #b6c1cd; font-size: 12px; line-height: 1; border-radius: 5px; padding: 0;
  display: grid; place-items: center; transition: background .12s, color .12s; opacity: 0;
}
.admin-block:hover .admin-block-remove, .admin-block:hover .admin-block-edit { opacity: 1; }
.admin-block-remove:hover { background: #fdecec; color: #d84a4a; }
.admin-block-edit:hover { background: #eef5fc; color: #2b6cb0; }
.admin-block.is-locked .admin-block-edit { display: none; }
/* on/off toggle switch */
.admin-block-toggle {
  flex: 0 0 auto; width: 34px; height: 20px; border-radius: 20px; background: #d0d9e3;
  position: relative; transition: background .16s; cursor: pointer;
}
.admin-block.is-on .admin-block-toggle { background: #2b6cb0; }
.admin-block-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .16s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.admin-block.is-on .admin-block-knob { transform: translateX(14px); }
/* locked (role can't do this) */
.admin-block.is-locked { cursor: not-allowed; opacity: 0.72; }
.admin-block.is-locked .admin-block-toggle { background: #e4e9ef; pointer-events: none; }
.admin-block.is-locked .admin-block-remove { pointer-events: none; }
.admin-block.is-locked .admin-block-label::after { content: " 🔒"; font-size: 10px; }
.admin-block.is-locked .admin-block-desc { color: #b0632a; }

/* drag-to-reorder states */
.admin-block.is-dragging { opacity: .4; box-shadow: 0 6px 20px rgba(31,73,125,0.18); }
.admin-block.is-drop-before { box-shadow: inset 0 3px 0 -1px #2b6cb0; }
.admin-block.is-drop-after  { box-shadow: inset 0 -3px 0 -1px #2b6cb0; }

/* + Add block */
.admin-add-block {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0 4px;
  padding: 10px 12px; border: 1px dashed #c5d2e0; border-radius: 10px; background: #fbfdff;
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: #2b6cb0; transition: background .12s, border-color .12s;
}
.admin-add-block:hover { background: #f0f6fc; border-color: #9fbce0; }
.admin-add-plus {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  background: #e8f0fa; color: #2b6cb0; font-size: 15px; font-weight: 700;
}

/* ---- Add-block overlay (Create new / Choose from existing) ---- */
.admin-addblock-overlay { position: absolute; inset: 0; z-index: 40; display: none; }
.admin-addblock-overlay.is-open { display: block; }
.admin-addblock-scrim { position: absolute; inset: 0; background: rgba(26,39,51,0.28); }
.admin-addblock-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100% - 48px)); max-height: calc(100% - 64px); display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 60px rgba(31,73,125,0.28); overflow: hidden;
}
.admin-addblock-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid #eef2f7;
}
.admin-addblock-back {
  border: none; background: transparent; cursor: pointer; color: #2b6cb0; font-size: 12.5px;
  font-weight: 600; padding: 5px 9px 5px 6px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px;
}
.admin-addblock-back:hover { background: #eef5fc; }
.admin-addblock-title { flex: 1 1 auto; font-size: 15px; font-weight: 700; color: #1a2733; }
.admin-addblock-close {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: #9aa8b8; font-size: 14px;
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
}
.admin-addblock-close:hover { background: #eef2f7; color: #33475b; }
.admin-addblock-body { padding: 20px; overflow-y: auto; }

/* menu step — Create-new CTA on top */
.admin-ab-createcta {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 16px; border: 1px solid #bcd3ee; border-radius: 12px; background: #f4f9ff; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.admin-ab-createcta:hover { border-color: #7fa8d9; background: #eaf3ff; box-shadow: 0 6px 18px rgba(31,73,125,0.10); }
.admin-ab-createic {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: #2b6cb0; color: #fff; font-size: 19px; line-height: 1;
}
.admin-ab-createtext { display: flex; flex-direction: column; gap: 2px; }
.admin-ab-createtitle { font-size: 14px; font-weight: 700; color: #1f4d7d; }
.admin-ab-createdesc { font-size: 12px; color: #5f7590; }
.admin-ab-or {
  display: flex; align-items: center; gap: 12px; margin: 16px 2px 12px;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: #a4b0bd;
}
.admin-ab-or::before, .admin-ab-or::after { content: ""; flex: 1 1 auto; height: 1px; background: #e6ebf1; }

/* create/edit step — the form */
.admin-ab-form { display: flex; flex-direction: column; gap: 14px; }
.admin-ab-flabel {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 600; color: #4a5a6b;
}
.admin-ab-fopt { font-weight: 500; color: #9aa8b8; }
.admin-ab-finput, .admin-ab-fselect, .admin-ab-ftext {
  font: inherit; font-size: 13px; color: #26364a; padding: 9px 11px;
  border: 1px solid #d4dde7; border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box;
}
.admin-ab-finput:focus, .admin-ab-fselect:focus, .admin-ab-ftext:focus { outline: none; border-color: #7fa8d9; box-shadow: 0 0 0 3px rgba(43,108,176,0.12); }
.admin-ab-ftext { resize: vertical; line-height: 1.5; }
.admin-ab-typefields { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #f7f9fc; border-radius: 10px; border: 1px solid #eef2f7; }
.admin-ab-fhint { font-size: 12px; color: #7d8b9c; line-height: 1.5; }
.admin-ab-pickhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-ab-picklabel { font-size: 12px; font-weight: 600; color: #4a5a6b; }
.admin-ab-browse {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cdd9e6; background: #fff;
  color: #2b6cb0; font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 5px 10px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.admin-ab-browse:hover { background: #eef5fc; border-color: #9fbce0; }
.admin-ab-picklist { display: flex; flex-direction: column; gap: 7px; max-height: 168px; overflow-y: auto; }
.admin-ab-pick { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #33475b; cursor: pointer; }
.admin-ab-pick input { accent-color: #2b6cb0; }
.admin-ab-pickmeta { color: #9aa8b8; font-size: 11px; }
/* auto-picked rule suggestion chips */
.admin-ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-ab-chip {
  border: 1px solid #dfe7f0; background: #fff; color: #4a5a6b; cursor: pointer;
  font-size: 11px; border-radius: 20px; padding: 4px 10px; transition: background .12s, border-color .12s, color .12s;
}
.admin-ab-chip:hover { background: #eef5fc; border-color: #9fbce0; color: #2b6cb0; }
.admin-ab-formactions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 2px; }

/* ---- content composer (toolkit + item cards) ---- */
.admin-ab-content { display: flex; flex-direction: column; gap: 8px; }
.admin-ab-toolkit { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-ab-tool {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cdd9e6; background: #fff;
  color: #33475b; font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 5px 9px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.admin-ab-tool:hover { background: #eef5fc; border-color: #9fbce0; color: #2b6cb0; }
.admin-ab-composer { display: flex; flex-direction: column; gap: 10px; }
.admin-ab-empty {
  font-size: 12px; color: #93a3b4; line-height: 1.5; text-align: center;
  padding: 18px 16px; border: 1px dashed #d7e0ea; border-radius: 10px; background: #fbfdff;
}
.admin-ab-citem { border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; overflow: hidden; transition: box-shadow .12s, opacity .12s; }
.admin-ab-citem-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: #eef2f7; border-bottom: 1px solid #e2e8f0;
}
.admin-ab-citem-grip { color: #b3bfcc; font-size: 12px; letter-spacing: -1px; cursor: grab; user-select: none; }
.admin-ab-citem-grip:active { cursor: grabbing; }
.admin-ab-citem-kind { flex: 1 1 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7a8c; }
/* drag-to-reorder states */
.admin-ab-citem.is-dragging { opacity: .4; box-shadow: 0 6px 20px rgba(31,73,125,0.18); }
.admin-ab-citem.is-drop-before { box-shadow: inset 0 3px 0 -1px #2b6cb0; }
.admin-ab-citem.is-drop-after  { box-shadow: inset 0 -3px 0 -1px #2b6cb0; }
.admin-ab-citem-x {
  border: none; background: transparent; cursor: pointer; color: #b6c1cd; font-size: 12px;
  width: 20px; height: 18px; border-radius: 5px; display: grid; place-items: center;
}
.admin-ab-citem-x:hover { background: #fdecec; color: #d84a4a; }
.admin-ab-citem-body { padding: 11px; display: flex; flex-direction: column; gap: 9px; }
.admin-ab-linkrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-ab-checks { display: flex; flex-direction: column; gap: 6px; }
.admin-ab-checkrow { display: flex; align-items: center; gap: 8px; }
.admin-ab-checkbox { color: #9aa8b8; font-size: 14px; flex: 0 0 auto; }
.admin-ab-checkx {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: #b6c1cd; font-size: 11px;
  width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center;
}
.admin-ab-checkx:hover { background: #fdecec; color: #d84a4a; }
.admin-ab-addcheck {
  align-self: flex-start; border: none; background: transparent; cursor: pointer;
  color: #2b6cb0; font-size: 12px; font-weight: 600; padding: 2px 2px;
}
.admin-ab-addcheck:hover { text-decoration: underline; }
.admin-ab-contentpick { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-ab-contentnames { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.admin-ab-tag {
  font-size: 11px; color: #33475b; background: #e8f0fa; border: 1px solid #d5e3f2;
  border-radius: 6px; padding: 2px 8px;
}
/* thumbnail chip for a picked dashboard (~2× the old size) */
.admin-ab-thumbtag {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: #33475b;
  background: #fff; border: 1px solid #d5e3f2; border-radius: 9px; padding: 6px 8px 6px 6px;
}
.admin-ab-thumbtag-img {
  width: 60px; height: 40px; border-radius: 5px; background-size: cover; background-position: center top;
  background-color: #eef2f7; border: 1px solid #e2e8f0; flex: 0 0 auto;
}
.admin-ab-thumbtag-name { min-width: 0; }
/* remove-chip ✕ */
.admin-ab-chipx {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: #b6c1cd;
  font-size: 11px; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; margin-left: 2px;
}
.admin-ab-chipx:hover { background: #fdecec; color: #d84a4a; }
.admin-ab-tag { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Browse content: pretend file browser ---- */
.admin-br-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; font-size: 12.5px; }
.admin-br-crumb { border: none; background: transparent; cursor: pointer; color: #2b6cb0; font-weight: 600; padding: 2px 4px; border-radius: 5px; }
.admin-br-crumb:hover { background: #eef5fc; }
.admin-br-crumb:last-child { color: #33475b; }
.admin-br-sep { color: #b3bfcc; }
.admin-br-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.admin-br-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid #e6ebf1; border-radius: 9px; background: #fff; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.admin-br-row:hover { border-color: #9fbce0; background: #f6faff; }
.admin-br-folder .admin-br-ic { font-size: 16px; flex: 0 0 auto; }
.admin-br-name { font-size: 13px; font-weight: 600; color: #33475b; }
.admin-br-folder .admin-br-name { flex: 1 1 auto; }
.admin-br-count { font-size: 11px; color: #9aa8b8; }
.admin-br-go { color: #b3bfcc; font-size: 15px; }
.admin-br-item { cursor: default; }
.admin-br-item.is-on { border-color: #9fbce0; background: #f0f6fc; }
.admin-br-item input { accent-color: #2b6cb0; flex: 0 0 auto; }
.admin-br-thumb {
  width: 44px; height: 30px; border-radius: 5px; background-size: cover; background-position: center top;
  background-color: #eef2f7; border: 1px solid #e2e8f0; flex: 0 0 auto;
}
.admin-br-itemtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-br-meta { font-size: 11px; color: #93a3b4; }
.admin-br-selbar { margin-top: 10px; }
.admin-br-selcount { font-size: 12px; color: #6b7a8c; font-weight: 600; }

/* composed-preview bits */
.admin-pv-linkline { display: flex; align-items: center; gap: 7px; margin: 4px 0; font-size: 13px; }
.admin-pv-linkic { font-size: 12px; }
.admin-pv-link { color: #2b6cb0; text-decoration: underline; }
.admin-pv-rulehint { font-size: 12px; color: #6b7a8c; margin: 2px 0 8px; }
.admin-pv-rulehint--slack { display: flex; align-items: center; gap: 6px; }

/* existing step — catalog list */
.admin-ab-list { display: flex; flex-direction: column; gap: 8px; }
.admin-ab-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px;
  border: 1px solid #e6ebf1; border-radius: 10px; background: #fff;
}
.admin-ab-item.is-disabled { opacity: .55; }
.admin-ab-itemic {
  flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: #eef2f7; color: #5b6b7a; font-size: 14px;
}
.admin-ab-itemtext { flex: 1 1 auto; min-width: 0; }
.admin-ab-itemtitle { display: block; font-size: 13px; font-weight: 600; color: #33475b; }
.admin-ab-itemmeta { display: block; font-size: 10.5px; color: #9aa8b8; margin-top: 1px; text-transform: uppercase; letter-spacing: .03em; }
.admin-ab-itemsub { display: block; font-size: 11.5px; color: #7d8b9c; margin-top: 3px; line-height: 1.4; }
.admin-ab-item.is-disabled .admin-ab-itemsub { color: #b0632a; }
.admin-ab-itemactions { flex: 0 0 auto; display: flex; gap: 7px; }
.admin-ab-act {
  border: 1px solid #2b6cb0; background: #2b6cb0; color: #fff; cursor: pointer;
  font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 6px 12px; transition: background .12s;
}
.admin-ab-act:hover:not(:disabled) { background: #245a96; }
.admin-ab-act--ghost { background: #fff; color: #2b6cb0; }
.admin-ab-act--ghost:hover:not(:disabled) { background: #eef5fc; }
.admin-ab-act:disabled { opacity: .45; cursor: not-allowed; }

/* preview pane */
.admin-preview-wrap {
  flex: 1 1 auto; min-width: 0; overflow-y: auto; background: #eef2f6;
  padding: 24px; display: flex; justify-content: center;
}
.admin-preview-frame {
  width: 100%; max-width: 720px; background: #fff; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(31,73,125,0.12); border: 1px solid #e2e8f0;
  overflow: hidden; align-self: flex-start;
}
.admin-pv-page { padding: 26px 30px 34px; }
.admin-pv-masthead { border-bottom: 1px solid #eef2f7; padding-bottom: 16px; margin-bottom: 18px; }
.admin-pv-greeting { font-size: 19px; font-weight: 500; color: #1a2733; margin-bottom: 12px; }
.admin-pv-field {
  border: 1px solid #cdd8e4; border-radius: 22px; padding: 9px 16px; font-size: 12.5px; color: #9aa8b8;
}
.admin-pv-note-body { font-size: 13px; line-height: 1.5; color: #445; margin-top: 2px; }
/* conditional-visibility flag (e.g. "Jump back in" only shows if the user has something to resume) */
.admin-pv-cond {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 10px;
  font-size: 11px; font-weight: 600; color: #7d6a3a; background: #fbf3e0;
  border: 1px solid #eeddb8; border-radius: 6px; padding: 3px 9px;
}
.admin-pv-cond::before { content: "◐"; font-size: 10px; }

/* preview reuses .bsi-section / .bsi-section-head from the homepage */
.admin-pv-page .bsi-section { margin-bottom: 24px; }
.admin-pv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-pv-card {
  border: 1px solid #dbe5f0; border-top: 3px solid var(--proj-color, #4e79a7); border-radius: 9px;
  padding: 12px 13px; background: #fff;
}
.admin-pv-card--tmpl { border-top-color: #8a94a5; border-top-style: dashed; }
/* card with a dashboard thumbnail */
.admin-pv-card--thumb { padding: 0; overflow: hidden; border-top-width: 1px; }
.admin-pv-card--thumb .admin-pv-card-name { padding: 9px 12px 0; }
.admin-pv-card--thumb .admin-pv-card-meta { padding: 0 12px 11px; }
.admin-pv-card-thumb {
  display: block; width: 100%; height: 66px; background-size: cover; background-position: center top;
  background-color: #eef2f7; border-bottom: 1px solid #e7edf4;
}
.admin-pv-card-thumb--plain { opacity: .5; }
/* mixed-resume typed icon tile (conversation / data / metric) */
.admin-pv-card-icontile {
  display: grid; place-items: center; width: 100%; height: 66px; font-size: 22px;
  background: #f2f6fb; color: #5f7590; border-bottom: 1px solid #e7edf4;
}
.admin-pv-mix--conversation { background: #eef1fb; color: #5b6bd6; }
.admin-pv-mix--data { background: #eef7f0; color: #4a9a5e; }
.admin-pv-mix--metric { background: #fdf2ec; color: #c9752f; }
.admin-pv-card-eyebrow {
  padding: 9px 12px 0; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #9aa8b8;
}
.admin-pv-card--thumb .admin-pv-card-eyebrow + .admin-pv-card-name { padding-top: 2px; }
.admin-pv-card-name { font-size: 12.5px; font-weight: 600; color: #26364a; }
.admin-pv-card-meta { font-size: 11px; color: #93a3b4; margin-top: 3px; }
.admin-pv-datarow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-pv-metricrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-pv-metricrow .insight-card { margin: 0; }
.admin-pv-learn { display: flex; flex-direction: column; gap: 8px; }
.admin-pv-checklist { display: flex; flex-direction: column; gap: 7px; }
.admin-pv-agentnote {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #2b6cb0;
  background: #eef5fc; border: 1px solid #cfe0f2; border-radius: 9px; padding: 11px 14px; margin-top: 6px;
}

/* ============================================================
   BLUE SKY — offline treatment (Wi-Fi toggle). One full-width banner
   spans the whole body (its copy is set per persona in resetBlueSky);
   hidden until #startScreenBlueSky.is-offline.
   ============================================================ */
.bluesky-offline-note { display: none; }
/* Sits at the top of the body but constrained to the shared content column
   (var(--bluesky-col)) and centered, so it lines up with the masthead field and
   every section below rather than running edge-to-edge. */
.start-screen-bluesky.is-offline .bluesky-offline-note {
  display: flex; align-items: center; gap: 10px;
  /* margin-top gives the banner breathing room below the masthead's
     border-bottom rather than butting right up against it. */
  width: 100%; max-width: var(--bluesky-col); margin: 16px auto 6px;
  font-size: 13px; line-height: 1.45; color: #7a5b12;
  background: #fff8e8; border: 1px solid #f0e0b8;
  border-radius: 11px; padding: 12px 15px;
}
/* Dismissed within an offline session: honored until Wi-Fi is toggled back
   offline (JS re-shows it on each fresh offline event). */
.start-screen-bluesky.is-offline .bluesky-offline-note.is-dismissed { display: none; }
.bluesky-offline-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: #d89b1c; box-shadow: 0 0 0 3px rgba(216,155,28,0.18);
}
.bluesky-offline-close {
  flex: 0 0 auto; margin-left: auto; display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: #a5843a;
  transition: background 0.14s ease, color 0.14s ease;
}
.bluesky-offline-close:hover { background: rgba(216,155,28,0.14); color: #7a5b12; }

/* Offline (any persona): the masthead's "ask the agent" field is removed — the
   agent needs a connection, so an empty prompt box would be a dead end. */
.start-screen-bluesky.is-offline .bluesky-mh-field {
  display: none;
}

/* Downloader offline: the cloud-dependent modules aren't dimmed — they're
   removed entirely (see the display:none rule below), leaving only what works
   offline (drop card, sample data, quickstart). */
.start-screen-bluesky.is-offline.start-screen-bluesky--down-offline .bluesky-connectors,
.start-screen-bluesky.is-offline.start-screen-bluesky--down-offline .bluesky-learn {
  display: none;
}

/* Invited offline: cloud-dependent rails dim (not hidden) — reconnect to load.
   The handoff card stays usable because a shared dashboard is often cached. */
.start-screen-bluesky.is-offline .bsi-slack-shelf,
.start-screen-bluesky.is-offline .bsi-data-row {
  opacity: 0.42; pointer-events: none; filter: grayscale(0.3);
}
.start-screen-bluesky.is-offline .bsi-section:has(.bsi-slack-shelf) .bsi-section-title::after,
.start-screen-bluesky.is-offline .bsi-section:has(.bsi-data-row) .bsi-section-title::after {
  content: " · needs a connection";
  font-weight: 400; font-size: 12px; color: #b0632a;
}

/* ============================================================
   BLUE SKY — "See more" section detail
   A full-page view of one section: back arrow + heading + every card.
   Reuses the same column + section-head + grid classes as the home rows,
   so the detail reads as "the same section, complete". The masthead above
   stays untouched (this lives inside #blueSkyBody, below it).
   ============================================================ */
.bluesky-detail-inner {
  max-width: calc(var(--bluesky-col) + 48px);
  margin: 0 auto; padding: 28px 24px 80px;
}
.bluesky-detail-back {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  margin-bottom: 20px;
  font-size: 13px; font-weight: 600; color: #2b6cb0;
}
.bluesky-detail-back:hover { color: #1d5490; }
.bluesky-detail-back:hover .bluesky-detail-back-arrow { transform: translateX(-2px); }
.bluesky-detail-back-arrow { font-size: 15px; transition: transform 0.14s ease; }
/* The detail heading reuses .bsi-section-head, but with no "See more" link and
   the hairline still running right of the title. */
.bluesky-detail-head { margin-bottom: 18px; }

/* Search field — for library-style sections (data sources, workbooks, team
   content) where a whole site's worth of items could live. */
.bluesky-detail-search {
  display: flex; align-items: center; gap: 9px;
  width: 100%; max-width: var(--bluesky-col);
  margin: 0 0 22px;
  padding: 9px 14px;
  background: #fff; border: 1px solid #d3deeb; border-radius: 10px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.bluesky-detail-search:focus-within {
  border-color: #7ba3d6; box-shadow: 0 0 0 3px rgba(43,108,176,0.12);
}
.bluesky-detail-search-ic { flex: 0 0 auto; color: #8494a5; }
.bluesky-detail-search-input {
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 14px; color: #33475b;
}
.bluesky-detail-search-input::placeholder { color: #97a6b6; }
.bluesky-detail-search-count {
  flex: 0 0 auto; font-size: 12px; color: #8494a5; white-space: nowrap;
}
.bluesky-detail-empty {
  padding: 28px 4px; font-size: 14px; color: #8494a5;
}

/* ============================================================
   Context usage bar — very thin, sits below the composer text field.
   Track carries the FULL gradient (a more extreme version of the top
   bar's #1d3557→#2b5f7f: darker dark end, lighter light end). A mask
   hides the unreached right portion, so the light end only appears as
   usage approaches the 100% label on the right.
   ============================================================ */
.context-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Vertical padding enlarges the hover target well beyond the 4px track,
     so the tooltip is easy to trigger. margin compensates so layout is unchanged. */
  padding: 7px 1px;
  margin-top: 1px;
  margin-bottom: -6px;
  cursor: default;
}
/* Custom hover tooltip — instant + styled, unlike the flaky native title on a
   4px target. Text comes from data-tip (set in JS alongside the % + mask). */
.context-bar[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% - 2px);
  white-space: nowrap;
  background: #fff;
  color: #2a3947;
  border: 1px solid #d9dfe6;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 50;
}
.context-bar[data-tip]:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.context-bar-track {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 3px;
  overflow: hidden;
  background: #eef1f4; /* empty-track base, shows through under the gradient */
}
.context-bar-fill {
  position: absolute;
  inset: 0;
  /* shifted toward the light end: mid-blue → bright sky (no near-black dark end) */
  background: linear-gradient(90deg, #2f6ea3 0%, #4f95c8 40%, #79bce6 72%, #a9dbf5 100%);
}
.context-bar-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* width = 100% − usage; covers the unreached portion with the pane bg */
  width: 62%;
  background: #eef1f4;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.context-bar-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8a97a5;
  line-height: 1;
}