*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Brand accent — a mid-blue (#1F77B4) with a darker hover and a light tint
     for backgrounds. Everything that uses var(--accent) picks this up
     automatically. (A plain blue is not a protectable trademark; this is the
     project's own palette, named independently of any other product.) */
  --bg:#f5f6f8; --surface:#ffffff; --surface2:#f0f2f5; --border:#dde1e8;
  --border2:#c8cdd8; --text:#1a1d23; --muted:#6b7280; --accent:#1f77b4;
  --accent-bg:#e8f1f8; --accent-hover:#155f8f; --success:#16a34a;
  --success-bg:#f0fdf4; --warn:#d97706; --warn-bg:#fffbeb; --danger:#dc2626;
  --danger-bg:#fef2f2; --mono:'Menlo','Monaco','Courier New',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:8px; --radius-lg:12px; --shadow:0 1px 3px rgba(0,0,0,0.08);
  /* Brand tokens (used by the header/wordmark). */
  --brand-blue:#1f77b4; --brand-navy:#17457b;
}
body { font-family:var(--sans); background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; font-size:14px; }

/* ── Top bar ── */
.topbar { display:flex; align-items:center; gap:12px; padding:0 20px; height:52px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; box-shadow:var(--shadow); }
.topbar-logo { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; cursor:pointer; border-radius:var(--radius); padding:3px 7px; margin-left:-7px; transition:background .12s; }
.topbar-logo:hover { background:var(--surface2); }
.topbar-logo:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* "ME" monogram badge with a diagonal light-ray streak — the project's own mark
   (not a Tableau glyph). The ray is a light beam that "reveals" hidden metadata:
   a translucent skewed gradient bar drawn in CSS and clipped to the badge; the
   "ME" sits above it. */
.topbar-badge { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--accent),var(--accent-hover)); flex-shrink:0; }
.topbar-badge::before { content:""; position:absolute; top:-30%; left:-10%; width:36%; height:160%; background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%); transform:rotate(24deg); pointer-events:none; }
.topbar-badge-r { position:relative; z-index:1; color:#fff; font-size:11px; font-weight:800; line-height:1; letter-spacing:-0.02em; }
.topbar-brand { display:flex; flex-direction:column; line-height:1.15; }
.topbar-title { color:var(--brand-navy); letter-spacing:-0.01em; }
.topbar-subtitle { font-size:10px; font-weight:500; color:var(--muted); letter-spacing:0.01em; }
.topbar-sep { flex:1; }
.status-pill { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; background:var(--surface2); border:1px solid var(--border); font-size:12px; color:var(--muted); }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--border2); flex-shrink:0; }
.status-dot.connected { background:var(--success); }
/* Connect / Switch-site controls inside the status pill. */
.status-connect-btn { font-size:11px; font-weight:600; padding:2px 10px; border-radius:12px; border:none; background:var(--accent); color:#fff; cursor:pointer; font-family:var(--sans); white-space:nowrap; }
.status-connect-btn:hover { background:var(--accent-hover); }
.status-switch-btn { font-size:11px; padding:2px 8px; border-radius:12px; border:1px solid var(--border2); background:transparent; color:var(--muted); cursor:pointer; font-family:var(--sans); white-space:nowrap; }
.status-switch-btn:hover { color:var(--accent); border-color:var(--accent); }
.status-role { font-size:11px; color:var(--muted); white-space:nowrap; padding-left:8px; margin-left:2px; border-left:1px solid var(--border2); }
.status-role strong { color:var(--text); font-weight:600; }
.topbar-btn { font-size:12px; padding:5px 12px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; font-family:var(--sans); }
.topbar-btn:hover { color:var(--text); border-color:var(--border2); }

/* ── Layout ── */
.main { display:flex; flex:1; overflow:hidden; height:calc(100vh - 52px); }
.sidebar { width:210px; flex-shrink:0; border-right:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; overflow-y:auto; }
.content { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
/* The Home launcher is full-width — no sidebar (Favorites/Examples/History
   only make sense inside the connected workspaces). */
body.view-home .sidebar { display:none; }

/* Connection gating: when disconnected, the three site-dependent tabs are
   dimmed (but still clickable — clicking nudges the user to connect). */
body.not-connected #modeTabGovernance,
body.not-connected #modeTabQueryBuilder,
body.not-connected #modeTabInteractive { opacity:.45; }
body.not-connected #modeTabGovernance:hover,
body.not-connected #modeTabQueryBuilder:hover,
body.not-connected #modeTabInteractive:hover { background:transparent; color:#6b7280; }

/* ── Sidebar ── */
.sidebar-section { padding:12px; border-bottom:1px solid var(--border); }
.sidebar-section h3 { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.chip { display:block; width:100%; font-size:12px; padding:6px 8px; border-radius:var(--radius); border:none; background:transparent; color:var(--muted); cursor:pointer; text-align:left; font-family:var(--sans); line-height:1.3; }
.chip:hover { background:var(--accent-bg); color:var(--accent); }
.fav-filter-row { display:flex; gap:4px; margin-bottom:6px; }
.fav-filter-input { flex:1; height:26px; padding:0 8px; border:1px solid var(--border); border-radius:var(--radius); font-size:11px; font-family:var(--sans); color:var(--text); background:var(--surface); outline:none; }
.fav-filter-input:focus { border-color:var(--accent); }
.fav-filter-input::placeholder { color:var(--muted); }
.fav-group { margin-bottom:6px; }
.fav-group-header { display:flex; align-items:center; gap:4px; padding:4px 6px; border-radius:var(--radius); cursor:pointer; user-select:none; background:var(--surface2); border:1px solid var(--border); font-size:11px; font-weight:600; color:var(--muted); }
.fav-group-header:hover { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
.fav-group-chevron { font-size:9px; transition:transform .15s; }
.fav-group-chevron.open { transform:rotate(90deg); }
.fav-group-name { flex:1; }
.fav-group-count { font-size:10px; font-weight:400; }
.fav-group-body { display:none; padding-top:3px; }
.fav-group-body.open { display:block; }
.fav-showmore { font-size:11px; color:var(--accent); background:none; border:none; cursor:pointer; padding:3px 6px; width:100%; text-align:left; }
.fav-showmore:hover { text-decoration:underline; }
.favorite-item { display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:3px; position:relative; }
.favorite-item:hover { border-color:var(--accent); background:var(--accent-bg); }
.favorite-item:hover .favorite-tooltip { display:block; }
.favorite-text { flex:1; font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; min-width:0; }
.favorite-delete { font-size:14px; color:var(--muted); cursor:pointer; padding:2px 4px; border-radius:3px; flex-shrink:0; }
.favorite-delete:hover { color:var(--danger); background:var(--danger-bg); }
.fav-tag-pill { font-size:9px; background:var(--accent-bg); color:var(--accent); border:1px solid #bfdbfe; border-radius:8px; padding:1px 5px; white-space:nowrap; flex-shrink:0; cursor:pointer; max-width:50px; overflow:hidden; text-overflow:ellipsis; }
.favorite-tooltip { display:none; position:fixed; left:220px; background:var(--text); color:#fff; padding:8px 12px; border-radius:var(--radius); font-size:12px; white-space:normal; max-width:300px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.2); line-height:1.5; pointer-events:none; }
.favorite-tooltip::before { content:''; position:absolute; left:-6px; top:12px; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:6px solid var(--text); }
.fav-tag-popover { display:none; position:fixed; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; box-shadow:0 4px 16px rgba(0,0,0,0.15); z-index:9999; min-width:220px; }
.fav-tag-popover.open { display:block; }
.fav-tag-popover label { font-size:11px; color:var(--muted); display:block; margin-bottom:4px; }
.fav-tag-popover-input { width:100%; height:28px; padding:0 8px; border:1px solid var(--border); border-radius:var(--radius); font-size:12px; font-family:var(--sans); outline:none; box-sizing:border-box; }
.fav-tag-popover-input:focus { border-color:var(--accent); }
.fav-tag-suggestions { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.fav-tag-suggestion { font-size:11px; padding:2px 8px; border-radius:10px; background:var(--accent-bg); color:var(--accent); border:1px solid #bfdbfe; cursor:pointer; }
.fav-tag-suggestion:hover { background:var(--accent); color:#fff; }
.fav-tag-popover-actions { display:flex; gap:6px; margin-top:8px; justify-content:flex-end; }
.fav-tag-save-btn { font-size:11px; padding:3px 10px; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; cursor:pointer; font-family:var(--sans); }
.fav-tag-skip-btn { font-size:11px; padding:3px 10px; border-radius:var(--radius); border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-family:var(--sans); }
.history-item { padding:7px 8px; border-radius:var(--radius); border:1px solid var(--border); cursor:pointer; margin-bottom:4px; position:relative; }
.history-item:hover { border-color:var(--accent); background:var(--accent-bg); }
.history-item:hover .history-tooltip { display:block; }
.history-label { font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.history-tooltip { display:none; position:fixed; left:220px; background:var(--text); color:#fff; padding:8px 12px; border-radius:var(--radius); font-size:12px; white-space:normal; max-width:300px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.2); line-height:1.5; pointer-events:none; }
.history-tooltip::before { content:''; position:absolute; left:-6px; top:12px; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:6px solid var(--text); }

/* ── Search bar (primary interaction) ── */
.search-bar { padding:16px 20px; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow); flex-shrink:0; }
.search-instruction { font-size:14px; color:var(--text); margin-bottom:10px; font-weight:500; }
.search-instruction .emoji { font-size:18px; margin-right:6px; }
.search-instruction .hint { color:var(--muted); font-weight:400; font-size:13px; margin-left:4px; }
.search-row { display:flex; gap:10px; align-items:center; }
.api-mode-row { display:flex; align-items:center; gap:6px; margin-top:6px; }
.api-mode-label { font-size:11px; color:var(--muted); white-space:nowrap; }
.api-mode-toggle { display:flex; background:#e8edf5; border:1px solid var(--border); border-radius:8px; padding:2px; gap:2px; }
.api-mode-btn { font-size:11px; font-weight:600; padding:3px 10px; border-radius:6px; border:none; background:transparent; color:#6b7280; cursor:pointer; font-family:var(--sans); transition:all .15s; white-space:nowrap; }
.api-mode-btn:hover:not(.active) { color:var(--text); background:rgba(255,255,255,.5); }
.api-mode-btn.active { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.search-input {
  flex:1; height:44px; padding:0 16px;
  border:1.5px solid var(--border); border-radius:var(--radius-lg);
  font-size:15px; font-family:var(--sans); color:var(--text);
  background:var(--surface); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.search-input::placeholder { color:#9ca3af; }
.btn-search {
  height:44px; padding:0 22px; border-radius:var(--radius-lg); border:none;
  background:var(--accent); color:#fff; font-size:14px; font-weight:600;
  cursor:pointer; font-family:var(--sans); display:flex; align-items:center;
  gap:7px; white-space:nowrap; transition:background .15s; flex-shrink:0;
}
.btn-search:hover:not(:disabled) { background:var(--accent-hover); }
.btn-search:disabled { opacity:.6; cursor:not-allowed; }
.btn-favorite {
  height:44px; width:44px; border-radius:var(--radius-lg); border:1.5px solid var(--border);
  background:var(--surface); color:var(--muted); font-size:20px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0;
}
.btn-favorite:hover { color:#fbbf24; border-color:#fbbf24; background:var(--warn-bg); }
.btn-favorite:disabled { opacity:.4; cursor:not-allowed; }
.search-hint { font-size:12px; color:var(--accent); margin-top:8px; display:none; align-items:center; gap:6px; }
.search-hint.visible { display:flex; }
.spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; display:none; flex-shrink:0; }
.spinner-dark { width:12px; height:12px; border:2px solid rgba(37,99,235,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Results area ── */
.results-area { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); margin:12px; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); }
.results-header { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--border); background:var(--surface2); border-radius:var(--radius-lg) var(--radius-lg) 0 0; flex-shrink:0; }
.results-tabs { display:flex; gap:2px; }
.rtab { font-size:12px; padding:4px 12px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; color:var(--muted); background:transparent; font-family:var(--sans); font-weight:500; }
.rtab.active { background:var(--surface); border-color:var(--border); color:var(--text); font-weight:600; }
.results-meta { font-size:11px; color:var(--muted); flex:1; padding-left:4px; }
.results-action { font-size:11px; padding:3px 9px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; font-family:var(--sans); }
.results-action:hover { color:var(--text); border-color:var(--border2); }
.export-split { display:inline-flex; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.export-split button { font-size:11px; padding:3px 8px; background:var(--surface); color:var(--muted); cursor:pointer; font-family:var(--sans); border:none; border-left:1px solid var(--border); }
.export-split button:first-child { border-left:none; }
.export-split button:hover { color:var(--text); background:var(--surface2); }
.gov-export-link { font-size:11px; color:var(--muted); cursor:pointer; padding:2px 6px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); font-family:var(--sans); float:right; margin-top:-2px; }
.gov-export-link:hover { color:var(--text); }

/* ── Pagination banner ── */
.pagination-banner { display:none; align-items:center; gap:10px; padding:8px 14px; background:#f0fdf4; border-bottom:1px solid #bbf7d0; flex-shrink:0; }
.pagination-banner.visible { display:flex; }
.pagination-banner-text { flex:1; font-size:12px; color:#166534; font-weight:500; }
.pagination-banner-text span { color:#15803d; font-weight:700; }
.btn-fetch-more { height:28px; padding:0 12px; border-radius:var(--radius); border:1px solid #86efac; background:#dcfce7; color:#166534; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); white-space:nowrap; }
.btn-fetch-more:hover:not(:disabled) { background:#bbf7d0; }
.btn-fetch-more:disabled { opacity:.5; cursor:not-allowed; }
.fetch-pages-select { height:28px; padding:0 6px; border-radius:var(--radius); border:1px solid #86efac; background:#fff; color:#166534; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); }
.fetch-pages-select:disabled { opacity:.5; cursor:not-allowed; }
.btn-fetch-stop { height:28px; padding:0 10px; border-radius:var(--radius); border:1px solid #bbf7d0; background:transparent; color:#166534; font-size:12px; cursor:pointer; font-family:var(--sans); }
.btn-fetch-stop:hover { background:#dcfce7; }
.fetch-spinner { width:12px; height:12px; border:2px solid rgba(21,128,61,.2); border-top-color:#15803d; border-radius:50%; animation:spin .6s linear infinite; display:none; flex-shrink:0; }

/* ── Unapplied conditions banner ── */
.unapplied-banner { display:none; align-items:flex-start; gap:10px; padding:10px 14px; background:#fffbeb; border-bottom:1px solid #fde68a; flex-shrink:0; }
.unapplied-banner.visible { display:flex; }
.unapplied-banner-icon { font-size:15px; flex-shrink:0; margin-top:1px; }
.unapplied-banner-body { flex:1; font-size:12px; color:#92400e; line-height:1.5; }
.unapplied-banner-title { font-weight:700; margin-bottom:3px; }
.unapplied-banner-list { list-style:none; padding:0; margin:0; }
.unapplied-banner-list li::before { content:'• '; }
.unapplied-banner-hint { margin-top:5px; font-size:11px; color:#b45309; }
.unapplied-banner-btn { font-size:11px; padding:3px 10px; border-radius:var(--radius); border:1px solid #fcd34d; background:#fef3c7; color:#92400e; cursor:pointer; font-family:var(--sans); white-space:nowrap; align-self:center; flex-shrink:0; }
.unapplied-banner-btn:hover { background:#fde68a; }
.unapplied-banner-close { margin-left:6px; width:22px; height:22px; border-radius:50%; border:none; background:transparent; color:#b45309; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; align-self:center; }
.unapplied-banner-close:hover { background:#fde68a; }
.test-result { display:none; margin-top:10px; padding:10px 12px; border-radius:var(--radius); font-size:12px; line-height:1.5; white-space:pre-wrap; }
.test-result.success { background:var(--success-bg); color:var(--success); border:1px solid #86efac; }
.test-result.error { background:var(--danger-bg); color:var(--danger); border:1px solid #fca5a5; }
.test-result.visible { display:block; }
.test-result-models { margin-top:8px; }
.test-result-models > summary { cursor:pointer; font-weight:600; user-select:none; }
.test-result-models .model-list { margin-top:6px; max-height:160px; overflow-y:auto; padding:6px 8px; border-radius:var(--radius); background:rgba(0,0,0,0.04); font-family:var(--mono, monospace); font-size:11px; line-height:1.6; }

/* ── Context bar (selected items for follow-up queries) ── */
.context-bar { display:none; gap:6px; align-items:center; padding:7px 14px; background:#fefce8; border:1px solid #fde047; border-radius:var(--radius); margin:6px 14px 0; flex-shrink:0; flex-wrap:wrap; }
.context-bar.visible { display:flex; }
.context-bar-label { font-size:12px; font-weight:600; color:#854d0e; white-space:nowrap; }
.context-chip { display:inline-flex; align-items:center; gap:3px; background:#fff; border:1px solid #fbbf24; border-radius:12px; padding:2px 6px 2px 9px; font-size:12px; color:#78350f; max-width:220px; }
.context-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.context-chip-type { font-size:10px; opacity:0.6; margin-right:2px; }
.context-chip-remove { border:none; background:none; cursor:pointer; color:#92400e; font-size:14px; padding:0 1px; line-height:1; opacity:0.55; flex-shrink:0; }
.context-chip-remove:hover { opacity:1; }
.context-clear-btn { border:none; background:none; cursor:pointer; font-size:11px; color:#92400e; text-decoration:underline; margin-left:4px; white-space:nowrap; }
.context-clear-btn:hover { color:#78350f; }

/* ── Governance Dashboard ── */
.gov-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }
.gov-title { font-size:18px; font-weight:700; color:var(--text); }
.gov-subtitle { font-size:12px; color:var(--muted); margin-top:2px; }
.gov-intro { font-size:12px; line-height:1.5; color:var(--muted); padding:10px 20px 12px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }
/* Permission-scope note. Neutral (admin: reassurance) by default; amber accent
   for restricted users, where "you're seeing a subset" genuinely matters. */
.gov-intro-scope { display:block; margin-top:8px; font-weight:600; }
.gov-intro-scope-icon { margin-right:3px; opacity:.7; }
.results-scope-note { display:inline; margin-left:10px; font-size:11px; color:var(--warn); cursor:help; white-space:nowrap; }
.gov-refresh-btn { padding:6px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:12px; cursor:pointer; font-family:var(--sans); }
.gov-refresh-btn:hover { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.gov-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 20px; flex-shrink:0; }
.gov-cards.collapsed { display:none; }
.gov-load-btn { padding:6px 14px; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); }
.gov-load-btn:hover:not(:disabled) { background:var(--accent-hover); }
.gov-load-btn:disabled { opacity:.6; cursor:not-allowed; }
.gov-card { flex:1; min-width:160px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; display:flex; align-items:flex-start; gap:12px; box-shadow:var(--shadow); }
.gov-card:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(37,99,235,0.1); }
.gov-card-icon { font-size:24px; flex-shrink:0; margin-top:2px; }
.gov-card-title { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.gov-card-value { font-size:26px; font-weight:700; color:var(--text); line-height:1; }
.gov-card-value.loading { font-size:14px; color:var(--muted); animation:pulse 1.2s infinite; }
.gov-card-sub { font-size:12px; color:var(--muted); margin-top:4px; }
.gov-card-sub.good { color:#15803d; } .gov-card-sub.warn { color:#b45309; } .gov-card-sub.bad { color:#b91c1c; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.gov-tool-tabs { display:flex; gap:0; padding:0; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface2); overflow-x:auto; }
.gov-tab-group { display:flex; flex-direction:column; padding:6px 10px 0; }
.gov-tab-group + .gov-tab-group { border-left:2px solid var(--border); }
.gov-tab-group-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:0 2px 4px; white-space:nowrap; }
.gov-tab-group-tabs { display:flex; gap:3px; padding-bottom:6px; }
.gov-tool-tab { padding:5px 11px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; border:1px solid transparent; border-radius:var(--radius); background:transparent; font-family:var(--sans); white-space:nowrap; transition:all .15s; }
.gov-tool-tab:hover:not(.active) { color:var(--text); background:var(--surface); border-color:var(--border); }
.gov-tool-tab.active { color:var(--accent); background:var(--surface); border-color:var(--accent); box-shadow:0 1px 3px rgba(37,99,235,.12); }
/* gov-overview-card margin reset when inside a section container */
.gov-overview-card { margin:0; }
/* LLM toggle in topbar */
.llm-toggle-wrap { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.llm-toggle { position:relative; width:34px; height:18px; flex-shrink:0; }
.llm-toggle input { opacity:0; width:0; height:0; }
.llm-toggle-slider { position:absolute; inset:0; background:var(--border2); border-radius:18px; cursor:pointer; transition:.2s; }
.llm-toggle-slider:before { content:''; position:absolute; width:12px; height:12px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.llm-toggle input:checked + .llm-toggle-slider { background:var(--accent); }
.llm-toggle input:checked + .llm-toggle-slider:before { transform:translateX(16px); }
/* Hide LLM-only features when AI disabled */
body.llm-off .llm-feature { display:none !important; }
body.llm-off #modeTabInteractive { opacity:.45; pointer-events:none; }
body.llm-off #btnSearch { opacity:.45; pointer-events:none; }
body.llm-off #btnExplain { display:none !important; }
body.llm-off #btnRerunPlan { display:none !important; }
body.llm-off .btn-explain { display:none !important; }
body.llm-off #diveNarrativeBtn { display:none !important; }
body.llm-off #diveNarrativeCopyBtn { display:none !important; }
body.llm-off #govDupDeepBtn { display:none !important; }
body.llm-off .llm-off-hint { display:flex !important; }
/* Sidebar: hide Examples section when LLM off */
body.llm-off .sidebar-examples-section { display:none !important; }
/* Query Builder without LLM: hide AI input bar, show manual editor hint */
body.llm-off .qb-input-bar { display:none !important; }
body.llm-off .qb-llm-off-notice { display:flex !important; }
/* When LLM off, hide the drawer toggle (GraphiQL is shown directly above) */
body.llm-off #queryDrawer { display:none !important; }
body.llm-off #qbManualActionBar { display:flex !important; }
.gov-panels { flex:1; overflow:auto; min-height:0; }
.gov-panel { display:none; flex-direction:column; height:100%; background:var(--surface); }
.gov-panel.active { display:flex; }
.gov-panel-body { padding:12px 16px; display:flex; flex-direction:column; gap:10px; flex:1; overflow:hidden; }
.gov-input-row { display:flex; gap:8px; }
.gov-input { flex:1; height:32px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; font-family:var(--sans); color:var(--text); background:var(--surface); outline:none; }
.gov-input:focus { border-color:var(--accent); }
.gov-btn { height:32px; padding:0 14px; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); white-space:nowrap; }
.gov-btn:hover:not(:disabled) { background:var(--accent-hover); }
.gov-btn:disabled { opacity:.6; cursor:not-allowed; }
.gov-result-area { flex:1; overflow-y:auto; font-size:12px; }
.gov-empty { color:var(--muted); font-size:12px; padding:8px 0; }
.gov-error { color:var(--danger); font-size:12px; padding:8px 0; }
/* Progressive loading banner */
.gov-load-banner { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:6px; margin-bottom:10px; font-size:12px; flex-wrap:wrap; }
.gov-load-banner-msg { flex:1; color:#1e40af; }
.gov-load-banner-time { color:#6b7280; white-space:nowrap; }
.gov-load-banner-btns { display:flex; gap:6px; }
.gov-load-btn-sm { padding:3px 10px; font-size:11px; font-weight:600; border-radius:4px; cursor:pointer; font-family:var(--sans); border:1px solid; }
.gov-load-btn-all  { background:#2563eb; color:#fff; border-color:#2563eb; }
.gov-load-btn-more { background:#fff; color:#2563eb; border-color:#93c5fd; }
.gov-load-btn-stop { background:#fff; color:#6b7280; border-color:#d1d5db; }
.gov-stat-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--border); }
.gov-stat-row:last-child { border-bottom:none; }
.gov-stat-label { color:var(--muted); }
.gov-stat-val { font-weight:600; color:var(--text); }
.gov-consumer-item { padding:6px 0; border-bottom:1px solid var(--border); }
.gov-consumer-item:last-child { border-bottom:none; }
.gov-consumer-name { font-weight:600; color:var(--text); }
.gov-consumer-email { color:var(--muted); font-size:11px; }
.gov-field-list { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.gov-field-item { display:flex; align-items:center; gap:6px; padding:3px 6px; border-radius:4px; background:var(--surface2); }
.gov-field-type { font-size:10px; background:var(--accent-bg); color:var(--accent); border-radius:4px; padding:1px 5px; flex-shrink:0; }
.gov-progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:6px; }
.gov-progress-fill { height:100%; border-radius:3px; background:var(--accent); transition:width .4s; }
.gov-progress-fill.good { background:#16a34a; } .gov-progress-fill.warn { background:#d97706; } .gov-progress-fill.bad { background:#dc2626; }
.gov-quality-empty { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; font-size:10px; padding:1px 6px; border-radius:8px; white-space:nowrap; }
.gov-quality-brief { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; font-size:10px; padding:1px 6px; border-radius:8px; white-space:nowrap; }
.gov-quality-adequate { background:#fefce8; color:#a16207; border:1px solid #fef08a; font-size:10px; padding:1px 6px; border-radius:8px; white-space:nowrap; }
.gov-quality-comprehensive { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; font-size:10px; padding:1px 6px; border-radius:8px; white-space:nowrap; }
.gov-domain-badge { background:var(--accent-bg); color:var(--accent); border:1px solid #bfdbfe; font-size:10px; padding:1px 6px; border-radius:8px; white-space:nowrap; }
.sync-section { margin-bottom:16px; }
.sync-section-header { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; color:var(--text); }
.sync-section-header:hover { background:var(--accent-bg); }
.sync-section-count { background:var(--accent); color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; margin-left:auto; }
.sync-section-count.warn { background:#d97706; }
.sync-section-count.ok   { background:#16a34a; }
.sync-section-body { display:none; margin-top:4px; }
.sync-section-body.open { display:block; }
.sync-row { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border); font-size:12px; }
.sync-row:last-child { border-bottom:none; }
.sync-row:hover { background:var(--accent-bg); }
.sync-row-info { flex:1; min-width:0; }
.sync-row-name { font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sync-row-project { font-size:11px; color:var(--muted); }
.sync-desc-block { margin-top:4px; }
.sync-desc-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.sync-desc-rest  { color:#15803d; font-size:11px; background:#f0fdf4; border-radius:4px; padding:2px 6px; margin-top:2px; }
.sync-desc-gql   { color:#b91c1c; font-size:11px; background:#fef2f2; border-radius:4px; padding:2px 6px; margin-top:2px; }
.sync-fix-btn { flex-shrink:0; height:28px; padding:0 12px; font-size:11px; font-weight:600; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; cursor:pointer; white-space:nowrap; }
.sync-fix-btn:hover:not(:disabled) { background:var(--accent-hover); }
.sync-fix-btn:disabled { opacity:.5; cursor:not-allowed; }
.sync-fix-btn.fixed { background:#16a34a; }
.sync-type-badge { font-size:10px; padding:1px 6px; border-radius:6px; flex-shrink:0; }
.sync-type-wb { background:#eff6ff; color:#1d4ed8; }
.sync-type-ds { background:#f0fdf4; color:#15803d; }
.dive-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-bottom:16px; }
.dive-stat-card { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; text-align:center; }
.dive-stat-val { font-size:22px; font-weight:700; color:var(--text); line-height:1; }
.dive-stat-label { font-size:11px; color:var(--muted); margin-top:3px; }
.dive-stat-card.warn .dive-stat-val { color:#b45309; }
.dive-stat-card.good .dive-stat-val { color:#15803d; }
.dive-narrative { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:16px; font-size:13px; line-height:1.7; color:var(--text); white-space:pre-wrap; }
.dive-narrative h2 { font-size:13px; font-weight:700; color:var(--accent); margin:12px 0 4px; }
.dive-layout { display:flex; gap:12px; flex:1; min-height:0; overflow:hidden; }
.dive-left  { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.dive-right { width:340px; flex-shrink:0; overflow-y:auto; }
.dive-graph-wrap { flex:1; min-height:300px; position:relative; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); }
.gov-overview-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; cursor:pointer; transition:all .15s; }
.gov-overview-card:hover { border-color:var(--accent); background:var(--accent-bg); box-shadow:0 2px 8px rgba(37,99,235,.08); }
.gov-overview-icon { font-size:22px; margin-bottom:8px; }
.gov-overview-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:4px; }
.gov-overview-desc { font-size:11px; color:var(--muted); line-height:1.4; }
.gov-section-title { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:10px 0 4px; }
.gov-table { width:100%; border-collapse:collapse; font-size:12px; }
.gov-table th { text-align:left; padding:5px 8px; background:var(--surface2); border-bottom:2px solid var(--border); font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.gov-table td { padding:5px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.gov-table tr:last-child td { border-bottom:none; }
.gov-table tr:hover td { background:var(--accent-bg); }
.gov-type-badge { font-size:10px; padding:2px 6px; border-radius:8px; font-weight:600; }
.gov-type-wb { background:#eff6ff; color:#1d4ed8; }
.gov-type-ds { background:#f0fdf4; color:#15803d; }
.gov-age-warn { color:#b45309; font-weight:600; }
.gov-age-bad  { color:#b91c1c; font-weight:600; }
.gov-check { color:#16a34a; font-weight:700; }
.gov-cross { color:#dc2626; }
.gov-dep-table { width:100%; border-collapse:collapse; font-size:12px; }
.gov-dep-table th { padding:7px 10px; background:var(--surface2); border-bottom:2px solid var(--border); font-weight:600; text-align:left; white-space:nowrap; cursor:pointer; user-select:none; }
.gov-dep-table th:hover { background:var(--border); }
.gov-dep-table td { padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.gov-dep-table tbody tr:hover { background:var(--surface2); }
.gov-dep-db-name { font-weight:500; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.gov-dep-badges { display:flex; flex-wrap:wrap; gap:4px; }
.gov-dep-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500; white-space:nowrap; }
.gov-dep-count { font-weight:700; color:var(--accent); min-width:24px; text-align:right; }
.gov-dep-ds-count { color:var(--muted); font-size:11px; }
.gov-picker-wrap { position:relative; flex:1; min-width:0; }
.gov-browse-btn { height:32px; padding:0 10px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:12px; cursor:pointer; font-family:var(--sans); white-space:nowrap; flex-shrink:0; }
.gov-browse-btn:hover { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.gov-picker-dropdown { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,0.12); z-index:9999; max-height:240px; display:none; flex-direction:column; }
.gov-picker-dropdown.open { display:flex; }
.gov-picker-search { padding:8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.gov-picker-search input { width:100%; height:28px; padding:0 8px; border:1px solid var(--border); border-radius:var(--radius); font-size:12px; font-family:var(--sans); outline:none; box-sizing:border-box; }
.gov-picker-search input:focus { border-color:var(--accent); }
.gov-picker-list { overflow-y:auto; flex:1; }
.gov-picker-item { padding:7px 12px; cursor:pointer; border-bottom:1px solid var(--border); }
.gov-picker-item:last-child { border-bottom:none; }
.gov-picker-item:hover { background:var(--accent-bg); }
.gov-picker-name { font-size:12px; color:var(--text); font-weight:500; }
.gov-picker-project { font-size:11px; color:var(--muted); }
.gov-picker-empty { padding:12px; font-size:12px; color:var(--muted); text-align:center; }
.gov-picker-loading { padding:12px; font-size:12px; color:var(--muted); text-align:center; }

/* ── Exploration tabs ── */
.exploration-tabs { display:none; flex-direction:row; overflow-x:auto; background:#f0f7ff; border-top:2px solid var(--accent); border-bottom:1px solid #bfdbfe; flex-shrink:0; padding:6px 12px 0; gap:3px; }
.exploration-tabs.visible { display:flex; }
.exploration-tabs::before { content:'Steps:'; font-size:11px; font-weight:600; color:var(--accent); white-space:nowrap; align-self:center; margin-right:6px; padding-bottom:6px; }
.etab { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid #bfdbfe; border-bottom:none; border-radius:6px 6px 0 0; font-size:12px; cursor:pointer; background:#e8f0fe; color:#1d4ed8; white-space:nowrap; max-width:220px; font-family:var(--sans); }
.etab:hover:not(.active) { background:#dbeafe; }
.etab.active { background:var(--surface); border-color:#93c5fd; color:var(--text); font-weight:600; box-shadow:0 -2px 0 var(--accent) inset; }
.etab-num { font-size:10px; opacity:0.6; flex-shrink:0; font-weight:700; }
.etab-label { overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.etab-close { flex-shrink:0; opacity:0.4; cursor:pointer; font-size:15px; line-height:1; display:inline-block; }
.etab-close:hover { opacity:1; }

/* ── Filter bar ── */
.filter-bar { display:none; gap:8px; align-items:center; padding:8px 14px; background:var(--accent-bg); border-bottom:1px solid #bfdbfe; flex-shrink:0; }
.filter-bar.visible { display:flex; }
.filter-input { flex:1; height:32px; padding:0 10px; border:1px solid #bfdbfe; border-radius:var(--radius); font-size:13px; font-family:var(--sans); color:var(--text); background:var(--surface); outline:none; }
.filter-input:focus { border-color:var(--accent); }
.filter-input::placeholder { color:#93c5fd; }
.btn-filter { height:32px; padding:0 14px; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); display:flex; align-items:center; gap:5px; }
.btn-filter:hover:not(:disabled) { background:var(--accent-hover); }
.btn-filter:disabled { opacity:.6; cursor:not-allowed; }
.btn-filter-clear { height:32px; padding:0 10px; border-radius:var(--radius); border:1px solid #bfdbfe; background:transparent; color:var(--accent); font-size:12px; cursor:pointer; font-family:var(--sans); }
.filter-badge { font-size:11px; color:var(--accent); font-weight:600; white-space:nowrap; }

/* ── Tab panels ── */
.rtab-panel { display:none; flex:1; overflow:auto; min-height:0; }
.rtab-panel.active { display:flex; flex-direction:column; min-height:0; }
#rpanel-graph.active { overflow:hidden; }
/* When graph tab is active, expand results-area to fill the full content width */
.content.graph-mode .results-area {
  margin:0; border-radius:0;
  border-left:none; border-right:none; border-bottom:none;
}
.json-view { padding:14px 16px; font-family:var(--mono); font-size:12px; line-height:1.8; }
.json-key{color:#7c3aed}.json-str{color:#065f46}.json-num{color:#92400e}.json-bool{color:#1d4ed8}.json-null{color:var(--muted);font-style:italic}
.json-toggle { cursor:pointer; color:var(--muted); margin-right:3px; user-select:none; }
.json-toggle:hover { color:var(--text); }
.json-collapsed { display:none; }
.json-inline { color:var(--muted); font-size:11px; }
.table-wrap { overflow:auto; flex:1; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
/* Type badge in _type column */
.type-badge {
  display:inline-block; font-size:10px; font-weight:700; padding:2px 7px;
  border-radius:10px; letter-spacing:.04em; white-space:nowrap;
}
.type-badge-default    { background:var(--surface2); color:var(--muted); }
/* ID column hiding */
.data-table th.col-id,
.data-table td.col-id { display:none; }
.data-table.show-ids th.col-id,
.data-table.show-ids td.col-id { display:table-cell; }
/* Explanation banner — natural language summary of results */
.explanation-bar { display:none; align-items:flex-start; gap:10px; padding:10px 16px; background:#faf5ff; border-bottom:1px solid #e9d5ff; flex-shrink:0; }
.explanation-bar.visible { display:flex; }
.explanation-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.explanation-text { flex:1; font-size:13px; color:#4c1d95; line-height:1.6; font-style:italic; }
.explanation-spinner { width:14px; height:14px; border:2px solid rgba(124,58,237,.2); border-top-color:#7c3aed; border-radius:50%; animation:spin .6s linear infinite; flex-shrink:0; margin-top:2px; }
.explanation-dismiss { background:none; border:none; color:#a78bfa; font-size:16px; cursor:pointer; padding:0 2px; flex-shrink:0; line-height:1; }
.explanation-dismiss:hover { color:#7c3aed; }
.btn-explain { font-size:11px; padding:3px 9px; border-radius:var(--radius); border:1px solid #e9d5ff; background:#faf5ff; color:#7c3aed; cursor:pointer; font-family:var(--sans); }
.btn-explain:hover:not(:disabled) { background:#ede9fe; border-color:#c4b5fd; }
.btn-explain:disabled { opacity:.5; cursor:not-allowed; }
.btn-rerun  { font-size:11px; padding:3px 9px; border-radius:var(--radius); border:1px solid #bfdbfe; background:#eff6ff; color:#2563eb; cursor:pointer; font-family:var(--sans); white-space:nowrap; }
.btn-rerun:hover:not(:disabled) { background:#dbeafe; border-color:#93c5fd; }
.btn-rerun:disabled { opacity:.5; cursor:not-allowed; }
/* Feedback thumbs */
.btn-thumb { font-size:14px; padding:2px 7px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); cursor:pointer; line-height:1.4; transition:all .15s; }
.btn-thumb:hover { border-color:var(--border2); background:var(--surface2); }
.btn-thumb.active-up   { background:#f0fdf4; border-color:#86efac; }
.btn-thumb.active-down { background:#fef2f2; border-color:#fca5a5; }
/* Feedback modal */
.feedback-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:300; align-items:center; justify-content:center; }
.feedback-overlay.open { display:flex; }
.feedback-card { background:var(--surface); border-radius:var(--radius-lg); padding:20px 24px; width:380px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.feedback-card h4 { font-size:14px; font-weight:700; margin-bottom:6px; }
.feedback-card p { font-size:13px; color:var(--muted); margin-bottom:12px; }
.feedback-card textarea { width:100%; height:80px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius); font-family:var(--sans); font-size:13px; resize:none; outline:none; }
.feedback-card textarea:focus { border-color:var(--accent); }
.feedback-card-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
/* Learning tab entries */
.feedback-entry { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.feedback-rating { font-size:16px; flex-shrink:0; margin-top:1px; }
.feedback-entry-body { flex:1; min-width:0; }
.feedback-entry-q { font-size:13px; color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feedback-entry-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.feedback-entry-note { font-size:12px; color:var(--danger); margin-top:3px; font-style:italic; }
.feedback-delete { background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:2px 4px; border-radius:3px; flex-shrink:0; }
.feedback-delete:hover { color:var(--danger); background:var(--danger-bg); }

/* ── Node detail popup ── */
.node-popup { position:fixed; z-index:200; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,.18); min-width:260px; max-width:340px; font-family:var(--sans); animation:fadeIn .12s ease; }
.node-popup-header { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.node-popup-icon { font-size:16px; flex-shrink:0; }
.node-popup-title { flex:1; font-size:13px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.node-popup-type { font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; color:#fff; flex-shrink:0; }
.node-popup-close { background:none; border:none; font-size:16px; cursor:pointer; color:var(--muted); padding:0 2px; line-height:1; flex-shrink:0; }
.node-popup-close:hover { color:var(--text); }
.node-popup-body { padding:10px 14px; display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; }
.node-popup-row { display:flex; gap:8px; align-items:flex-start; font-size:12px; }
.node-popup-key { color:var(--muted); min-width:80px; flex-shrink:0; font-weight:500; }
.node-popup-val { color:var(--text); word-break:break-word; }
.node-popup-val.empty { color:var(--muted); font-style:italic; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* Inferred nodes (from SQL parsing) — dashed border */
.graph-node-inferred rect { stroke: rgba(255,255,255,0.85) !important; stroke-width: 2 !important; stroke-dasharray: 5,3 !important; }
.parse-sql-btn { display:inline-flex; align-items:center; gap:5px; margin-top:8px; width:100%; height:28px; padding:0 10px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:12px; cursor:pointer; font-family:var(--sans); }
.parse-sql-btn:hover { border-color:var(--accent); color:var(--accent); }
.parse-sql-result { margin-top:8px; padding:8px 10px; background:var(--surface2); border-radius:var(--radius); border:1px solid var(--border); font-size:11px; }
.parse-sql-result .method-badge { font-size:10px; padding:1px 5px; border-radius:8px; font-weight:600; margin-left:4px; }

/* ── Lineage Graph ── */
#graphSvg { user-select:none; }
#graphSvg.panning { cursor:grabbing; }
.graph-node { cursor:default; }
.graph-node-rect { rx:8; ry:8; filter:drop-shadow(0 1px 3px rgba(0,0,0,.15)); }
.graph-node-name { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:12px; font-weight:600; fill:#fff; }
.graph-node-sub  { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:10px; fill:rgba(255,255,255,.75); }
.graph-node-icon { font-size:14px; }
.graph-edge          { fill:none; stroke:#94a3b8; stroke-width:1.5; opacity:0.5; transition:opacity .15s, stroke-width .15s; }
.graph-edge.edge-highlighted { stroke-width:2.5; opacity:1; }
.graph-edge.edge-dimmed      { opacity:0.05; }
.graph-edge-containment { fill:none; stroke:#94a3b8; stroke-width:1.2; stroke-dasharray:5,4; opacity:0.4; transition:opacity .15s; }
.graph-edge-containment.edge-highlighted { opacity:0.9; stroke-width:1.8; }
.graph-edge-containment.edge-dimmed      { opacity:0.05; }
.graph-badge { cursor:pointer; }
.graph-badge rect { rx:10; ry:10; }
.graph-badge text { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:10px; font-weight:600; fill:#fff; }
.graph-field-edge { fill:none; stroke-width:1.5; stroke-dasharray:4,3; opacity:0.85; transition:opacity .15s; }
.graph-field-edge.edge-dimmed { opacity:0.05; }
.graph-field-label { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:9px; fill:#475569; }

/* ── Field lineage panel (slides out from right of graph container) ── */
#fieldLineagePanel { display:none; position:fixed; top:0; right:0; height:100vh; width:300px; background:var(--surface); border-left:1px solid var(--border); z-index:200; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,.15); }
#fieldLineagePanel.open { display:flex; }
.flp-header { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.flp-title { font-size:13px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flp-search { padding:7px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.flp-search input { width:100%; height:28px; padding:0 8px; border:1px solid var(--border); border-radius:var(--radius); font-size:12px; font-family:var(--sans); outline:none; box-sizing:border-box; }
.flp-search input:focus { border-color:var(--accent); }
.flp-group-header { padding:5px 10px 2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.flp-field-row { display:flex; align-items:center; gap:7px; padding:6px 10px; cursor:pointer; border-radius:4px; margin:0 4px; }
.flp-field-row:hover { background:var(--surface2); }
.flp-field-row.active { background:var(--accent-bg); }
.flp-field-icon { font-size:13px; flex-shrink:0; }
.flp-field-name { flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flp-field-meta { font-size:10px; color:var(--muted); white-space:nowrap; }
.flp-banner { padding:5px 10px; font-size:11px; background:#eff6ff; border-bottom:1px solid #bfdbfe; color:#1d4ed8; flex-shrink:0; display:flex; align-items:center; gap:6px; }
.flp-banner strong { font-weight:600; }

/* Count card — shown for "how many" queries that return only totalCount */
.count-card { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; gap:8px; }
.count-card-number { font-size:72px; font-weight:700; color:var(--accent); line-height:1; }
.count-card-label { font-size:16px; color:var(--muted); text-align:center; }

/* Client-side table pagination controls */
.table-page-bar { display:flex; align-items:center; gap:8px; padding:6px 14px; background:var(--surface2); border-top:1px solid var(--border); flex-shrink:0; font-size:12px; color:var(--muted); }
.table-page-bar .page-info { flex:1; text-align:center; }
.btn-page { height:26px; padding:0 10px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12px; cursor:pointer; font-family:var(--sans); }
.btn-page:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.btn-page:disabled { opacity:.4; cursor:not-allowed; }
.page-size-select { height:26px; padding:0 6px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); font-size:12px; font-family:var(--sans); color:var(--text); cursor:pointer; }

/* Toggle button in table header bar */
.table-toolbar {
  display:flex; align-items:center; justify-content:flex-end;
  padding:4px 14px; background:var(--surface2);
  border-bottom:1px solid var(--border); flex-shrink:0; gap:8px;
}
.table-toggle-btn {
  font-size:11px; padding:2px 9px; border-radius:20px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--muted); cursor:pointer; font-family:var(--sans);
}
.table-toggle-btn.active { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
.data-table th { text-align:left; padding:8px 14px; border-bottom:2px solid var(--border); color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; background:var(--surface2); position:sticky; top:0; }
.data-table td { padding:8px 14px; border-bottom:1px solid var(--border); color:var(--text); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-table tr:hover td { background:var(--accent-bg); }
.badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; }
.badge-green{background:var(--success-bg);color:var(--success)}.badge-gray{background:var(--surface2);color:var(--muted)}

/* ── Query drawer (subtle, collapsed by default) ── */
.query-drawer {
  flex-shrink:0; border-top:1px solid var(--border); background:var(--surface);
  display:flex; flex-direction:column;
  /* default closed — JS sets flex-basis when opened */
}
.query-drawer.open { flex-basis:280px; min-height:120px; }
.drawer-resize-handle {
  height:5px; cursor:ns-resize; flex-shrink:0;
  background:var(--surface2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative;
}
.drawer-resize-handle::after {
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:32px; height:2px; border-radius:2px;
  background:var(--border2);
}
.drawer-resize-handle:hover::after,
.drawer-resize-handle:active::after { background:var(--accent); }
.query-drawer-toggle {
  display:flex; align-items:center; gap:6px; padding:7px 14px;
  font-size:11px; color:var(--muted); cursor:pointer; user-select:none;
  background:var(--surface2); border:none; width:100%; font-family:var(--sans);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.query-drawer-toggle:hover { color:var(--text); background:var(--border); }
.query-drawer-toggle .arrow { transition:transform .2s; font-size:10px; }
.query-drawer-toggle.open .arrow { transform:rotate(180deg); }
.query-drawer-body { display:none; flex-direction:column; flex:1; overflow:hidden; border-top:1px solid var(--border); }
.query-drawer-body.open { display:flex; }
/* Drawer step tabs */
.drawer-tabs {
  display:flex; flex-wrap:wrap; gap:2px; padding:6px 10px 0;
  background:var(--surface2); border-bottom:1px solid var(--border);
}
.drawer-tab {
  font-size:11px; padding:4px 11px 5px; border-radius:6px 6px 0 0;
  border:1px solid transparent; border-bottom:none;
  cursor:pointer; font-family:var(--sans); background:transparent;
  color:var(--muted); white-space:nowrap;
}
.drawer-tab:hover { color:var(--text); background:var(--border); }
.drawer-tab.active {
  background:var(--surface); color:var(--accent); font-weight:600;
  border-color:var(--border); border-bottom-color:var(--surface);
  margin-bottom:-1px;
}
.drawer-tab .tab-badge {
  display:inline-block; margin-left:5px; font-size:9px; padding:1px 5px;
  border-radius:8px; font-weight:700; vertical-align:middle;
}
.drawer-tab .tab-badge.rest    { background:#ede9fe; color:#7c3aed; }
.drawer-tab .tab-badge.graphql { background:var(--accent-bg); color:var(--accent); }
/* Step panel inside drawer */
.drawer-step-panel { display:none; flex-direction:column; }
.drawer-step-panel.active { display:flex; }
.drawer-step-meta {
  padding:6px 14px; font-size:11px; color:var(--muted);
  background:var(--surface2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.drawer-step-result {
  font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600;
}
.drawer-step-result.ok   { background:var(--success-bg); color:var(--success); }
.drawer-step-result.err  { background:var(--danger-bg);  color:var(--danger);  }
.drawer-step-result.pending { background:var(--surface2); color:var(--muted); }
/* Step panels fill drawer height */
#drawerPanels { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.drawer-step-panel { flex:1; overflow:hidden; flex-direction:column; }
.drawer-step-panel.active { display:flex; }
.drawer-step-panel textarea {
  resize:none; border:none; outline:none;
  font-family:var(--mono); font-size:12px; line-height:1.7;
  padding:10px 14px; tab-size:2; overflow-y:auto;
  color:#1e3a8a; background:#fafbff;
}
/* Query textarea takes ~70%, variables ~30% */
.drawer-step-panel textarea:first-of-type { flex:3; min-height:60px; }
.drawer-step-panel textarea:last-of-type  { flex:1; min-height:40px; background:var(--surface2); }
.drawer-step-panel textarea[readonly] { color:var(--muted); background:var(--surface2); }
.drawer-step-panel textarea::placeholder { color:#9ca3af; }
.query-drawer-toolbar { display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--surface2); border-bottom:1px solid var(--border); }
.drawer-label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; flex:1; }
.fmt-btn { font-size:11px; padding:2px 9px; border-radius:20px; border:1px solid var(--border); cursor:pointer; background:var(--surface); color:var(--muted); font-family:var(--sans); }
.fmt-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.drawer-btn { font-size:11px; padding:3px 9px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; font-family:var(--sans); }
.drawer-btn:hover { color:var(--text); border-color:var(--border2); }
#queryEditor { display:none; } /* hidden fallback — real editors are in drawer-step-panel */
.vars-label { padding:4px 14px 2px; font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; background:var(--surface2); border-top:1px solid var(--border); }
#variablesEditor { height:70px; resize:none; border:none; outline:none; font-family:var(--mono); font-size:11.5px; line-height:1.6; padding:6px 14px; color:var(--muted); background:var(--surface2); tab-size:2; }

/* ── Empty states ── */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; min-height:200px; color:var(--muted); font-size:13px; gap:8px; padding:2rem; text-align:center; }
.empty-icon { font-size:32px; opacity:.2; margin-bottom:4px; }
.empty-title { font-size:15px; font-weight:500; color:var(--text); }
.empty-sub { font-size:13px; color:#9ca3af; max-width:280px; line-height:1.6; }
.empty-actions { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:14px; }
.empty-actions-note { font-size:12px; color:var(--muted); }
.empty-actions-row { display:flex; gap:10px; }
/* Two-tier: Retry is the solid primary action, Rephrase the light+outline secondary. */
.err-retry-btn { height:36px; padding:0 18px; border-radius:var(--radius-lg); border:none; background:var(--accent); color:#fff; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans); transition:background .15s; }
.err-retry-btn:hover { background:var(--accent-hover); }
.err-rephrase-btn { height:36px; padding:0 18px; border-radius:var(--radius-lg); border:1px solid var(--border2); background:var(--surface2); color:var(--text); font-size:13px; font-weight:500; cursor:pointer; font-family:var(--sans); transition:background .15s,border-color .15s; }
.err-rephrase-btn:hover { background:#fff; border-color:var(--accent); }

/* ── Modals ── */
#signinPanel { position:fixed; inset:0; background:rgba(15,20,30,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; }
.signin-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; width:400px; max-width:95vw; box-shadow:0 20px 60px rgba(0,0,0,.15); }
.signin-card h2 { font-size:22px; font-weight:700; margin-bottom:4px; }
.signin-card .subtitle { font-size:13px; color:var(--muted); margin-bottom:24px; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--text); margin-bottom:4px; }
.field input { width:100%; height:38px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; font-family:var(--sans); color:var(--text); background:var(--surface); outline:none; }
.field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.field input::placeholder { color:#9ca3af; }
.field-hint { font-size:11px; color:var(--muted); margin-top:3px; }
.btn-signin { width:100%; height:40px; margin-top:8px; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; font-size:14px; font-weight:600; cursor:pointer; font-family:var(--sans); }
.btn-signin:hover:not(:disabled) { background:var(--accent-hover); }
.btn-signin:disabled { opacity:.6; cursor:not-allowed; }
.signin-error { background:var(--danger-bg); border:1px solid #fecaca; border-radius:var(--radius); padding:8px 12px; font-size:12px; color:var(--danger); margin-top:10px; display:none; }
.signin-note { font-size:11px; color:#9ca3af; margin-top:14px; text-align:center; }
#settingsModal { display:none; position:fixed; inset:0; background:rgba(15,20,30,.5); backdrop-filter:blur(4px); z-index:200; align-items:center; justify-content:center; }
#settingsModal.open { display:flex; }
.settings-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:0; width:550px; max-width:95vw; max-height:90vh; box-shadow:0 20px 60px rgba(0,0,0,.15); display:flex; flex-direction:column; }
.settings-header { padding:20px 24px; border-bottom:1px solid var(--border); }
.settings-card h3 { font-size:17px; font-weight:700; margin-bottom:4px; }
.settings-card .subtitle { font-size:13px; color:var(--muted); }
.settings-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); background:var(--surface2); padding:0 24px; }
.settings-tab { font-size:13px; font-weight:500; padding:10px 16px; border:none; background:transparent; color:var(--muted); cursor:pointer; font-family:var(--sans); border-bottom:2px solid transparent; transition:all .15s; white-space:nowrap; }
.settings-tab:hover { color:var(--text); }
.settings-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.settings-content { flex:1; overflow-y:auto; padding:20px 24px; }
.settings-tab-panel { display:none; }
.settings-tab-panel.active { display:block; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:4px; }
.settings-footer { padding:16px 24px; border-top:1px solid var(--border); background:var(--surface2); display:flex; gap:8px; }
.btn-save { flex:1; height:38px; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans); }
.btn-save:hover { background:var(--accent-hover); }
.btn-cancel { flex:1; height:38px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:13px; cursor:pointer; font-family:var(--sans); }
.btn-cancel:hover { color:var(--text); }
.settings-msg { font-size:12px; margin-top:8px; display:none; }

/* ── Estimate dialog ── */
.estimate-overlay { display:none; position:fixed; inset:0; background:rgba(15,20,30,.55); backdrop-filter:blur(3px); z-index:500; align-items:center; justify-content:center; }
.estimate-overlay.open { display:flex; }
.estimate-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; width:460px; max-width:95vw; box-shadow:0 20px 60px rgba(0,0,0,.18); }
.estimate-card h3 { font-size:17px; font-weight:700; margin-bottom:6px; }
.estimate-card .subtitle { font-size:13px; color:var(--muted); margin-bottom:20px; line-height:1.5; }
.estimate-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.estimate-stat { background:var(--surface2); border-radius:var(--radius); padding:10px 14px; }
.estimate-stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.estimate-stat-value { font-size:20px; font-weight:700; color:var(--text); margin-top:2px; }
.estimate-stat-value.warn { color:var(--warn); }
.estimate-partial { margin-bottom:20px; }
.estimate-partial label { font-size:12px; font-weight:600; color:var(--text); display:block; margin-bottom:6px; }
.estimate-partial-row { display:flex; align-items:center; gap:8px; }
.estimate-partial input { width:80px; height:34px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; font-weight:600; font-family:var(--sans); color:var(--text); outline:none; text-align:center; }
.estimate-partial input:focus { border-color:var(--accent); }
.estimate-partial-hint { font-size:12px; color:var(--muted); }
.estimate-actions { display:flex; flex-direction:column; gap:8px; }
.btn-est-partial { height:40px; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans); }
.btn-est-partial:hover { background:var(--accent-hover); }
.btn-est-all { height:40px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; cursor:pointer; font-family:var(--sans); }
.btn-est-all:hover { background:var(--surface2); }
.btn-est-abort { height:36px; border-radius:var(--radius); border:none; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; font-family:var(--sans); }
.btn-est-abort:hover { color:var(--danger); }

/* ── Session banner ── */
#sessionBanner { display:none; position:fixed; top:0; left:0; right:0; z-index:400; background:var(--warn); color:#fff; padding:10px 20px; font-size:13px; font-weight:600; text-align:center; }
#sessionBanner.visible { display:block; }
#sessionBanner button { margin-left:16px; padding:4px 12px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.6); background:transparent; color:#fff; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); }

/* ── Plan review panel ── */
/* Clarification panel */
.clarification-panel {
  margin:0 12px; border-radius:var(--radius-lg);
  border:1px solid #fbbf24; background:#fffbeb;
  flex-shrink:0; overflow:hidden;
}
.clarification-body {
  display:flex; align-items:flex-start; gap:10px; padding:12px 16px 8px;
}
.clarification-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.clarification-content { flex:1; }
.clarification-question {
  font-size:13px; font-weight:600; color:#92400e; line-height:1.4;
}
.clarification-sub {
  font-size:11px; color:#b45309; margin-top:3px; font-style:italic;
}
.clarification-input-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px 12px; border-top:1px solid #fde68a;
}
.clarification-input {
  flex:1; height:32px; padding:0 10px; border-radius:var(--radius);
  border:1px solid #fcd34d; background:#fff; font-size:13px;
  font-family:var(--sans); outline:none;
}
.clarification-input:focus { border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.15); }
.btn-clarify {
  height:32px; padding:0 14px; border-radius:var(--radius);
  background:#f59e0b; border:none; color:#fff;
  font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans);
}
.btn-clarify:hover { background:#d97706; }
.btn-clarify-skip {
  height:32px; padding:0 10px; border-radius:var(--radius);
  background:none; border:1px solid #fcd34d; color:#92400e;
  font-size:11px; cursor:pointer; font-family:var(--sans); white-space:nowrap;
}
.btn-clarify-skip:hover { background:#fef3c7; }
/* Clarification quick-choice buttons (one-click answers) */
.clarification-options {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.btn-clarify-option {
  height:30px; padding:0 14px; border-radius:var(--radius);
  background:#f59e0b; border:1px solid #f59e0b; color:#fff;
  font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans);
}
.btn-clarify-option:hover { background:#d97706; border-color:#d97706; }
.btn-clarify-option.secondary {
  background:#fff; color:#92400e; border:1px solid #fcd34d;
}
.btn-clarify-option.secondary:hover { background:#fef3c7; }
/* Validation warning banner */
.plan-warning {
  padding:6px 14px; background:#fef3c7; border-bottom:1px solid #fde68a;
  font-size:11px; color:#92400e; display:flex; align-items:center; gap:6px;
}

/* Plan review — inline panel, scrollable steps */
.plan-review {
  margin:0 12px 0; border-radius:var(--radius-lg); border:1px solid #bfdbfe;
  background:var(--accent-bg); flex-shrink:0; overflow:hidden;
}
.plan-review-header {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#dbeafe; border-bottom:1px solid #bfdbfe;
}
.plan-review-title { font-size:13px; font-weight:600; color:#1e40af; flex:1; }
.btn-execute {
  height:34px; padding:0 16px; border-radius:var(--radius); border:none;
  background:var(--success); color:#fff; font-size:12px; font-weight:600;
  cursor:pointer; font-family:var(--sans); display:flex; align-items:center; gap:5px;
}
.btn-execute:hover:not(:disabled) { background:#15803d; }
.btn-execute:disabled { opacity:.5; cursor:not-allowed; }
.btn-plan-cancel {
  height:34px; padding:0 12px; border-radius:var(--radius);
  border:1px solid #bfdbfe; background:transparent; color:#1e40af;
  font-size:12px; cursor:pointer; font-family:var(--sans);
}
.btn-plan-cancel:hover { background:white; }
.plan-steps { padding:10px 14px; display:flex; flex-direction:column; gap:6px; }
.plan-step {
  display:flex; gap:10px; align-items:flex-start; padding:8px 10px;
  border-radius:var(--radius); background:white; border:1px solid #bfdbfe;
  font-size:12px;
}
.plan-step.rest    { border-left:3px solid #7c3aed; }
.plan-step.graphql { border-left:3px solid var(--accent); }
.plan-step-num { font-weight:700; color:var(--muted); min-width:20px; font-size:13px; }
.plan-step-badge {
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; align-self:flex-start;
}
.plan-step-badge.rest    { background:#ede9fe; color:#7c3aed; }
.plan-step-badge.graphql { background:var(--accent-bg); color:var(--accent); }
.plan-step-body { flex:1; }
.plan-step-desc { color:var(--text); font-weight:500; margin-bottom:2px; }
.plan-step-detail {
  color:var(--muted); font-family:var(--mono); font-size:11px; line-height:1.6;
  word-break:break-all; white-space:pre-wrap;
  max-height:120px; overflow-y:auto; margin-top:4px;
  background:var(--bg); border-radius:4px; padding:6px 8px;
  border:1px solid var(--border);
}
.plan-step-detail.expanded { max-height:none; }
.plan-step-expand {
  font-size:10px; color:var(--accent); cursor:pointer; margin-top:3px;
  background:none; border:none; font-family:var(--sans); padding:0;
}
.plan-step-expand:hover { text-decoration:underline; }
.plan-explanation { padding:6px 14px 2px; font-size:12px; color:#1e40af; font-style:italic; }
.plan-steps-scroll { max-height:42vh; overflow-y:auto; padding:8px 14px 12px; }
/* Collapsed plan mode — hides query details, shows only step summary */
.plan-mode-collapsed .plan-step-detail { display:none; }
.plan-mode-collapsed .plan-step-expand { display:none; }
/* plan-step-extra (action/first query line) stays visible in collapsed mode */
.plan-mode-collapsed .plan-step        { padding:6px 10px; }
.btn-plan-toggle { height:34px; padding:0 12px; border-radius:var(--radius); border:1px solid #bfdbfe; background:transparent; color:#1e40af; font-size:12px; cursor:pointer; font-family:var(--sans); white-space:nowrap; }
.btn-plan-toggle:hover { background:white; }

/* ── Execution trace panel ── */
.trace-panel { flex-shrink:0; border-top:1px solid var(--border); background:var(--surface); }
.trace-toggle {
  display:flex; align-items:center; gap:6px; padding:6px 14px;
  font-size:11px; color:var(--muted); cursor:pointer; user-select:none;
  background:var(--surface2); border:none; width:100%; font-family:var(--sans);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.trace-toggle:hover { color:var(--text); background:var(--border); }
.trace-toggle .t-arrow { transition:transform .2s; font-size:10px; }
.trace-toggle.open .t-arrow { transform:rotate(180deg); }
.trace-body { display:none; flex-direction:column; max-height:260px; overflow-y:auto; border-top:1px solid var(--border); }
.trace-body.open { display:flex; flex-direction:column; }
.trace-steps { padding:10px 14px; display:flex; flex-direction:column; gap:6px; }
.trace-step {
  display:flex; gap:10px; align-items:flex-start;
  padding:8px 10px; border-radius:var(--radius);
  background:var(--surface2); border:1px solid var(--border);
  font-size:12px;
}
.trace-step.rest  { border-left:3px solid #7c3aed; }
.trace-step.graphql { border-left:3px solid var(--accent); }
.trace-step.error { border-left:3px solid var(--danger); background:var(--danger-bg); }
.trace-step.active { background:var(--accent-bg); border-left-width:4px; }
.trace-step:not(.error):hover { background:var(--surface2); }
.trace-step-num { font-weight:700; color:var(--muted); min-width:20px; }
.trace-step-badge {
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.trace-step-badge.rest    { background:#ede9fe; color:#7c3aed; }
.trace-step-badge.graphql { background:var(--accent-bg); color:var(--accent); }
.trace-step-badge.error   { background:var(--danger-bg); color:var(--danger); }
.trace-step-body { flex:1; }
.trace-step-desc { color:var(--text); font-weight:500; margin-bottom:3px; }
.trace-step-meta { font-size:11px; color:var(--muted); margin-top:3px; }

/* ── Toast ── */
.toast { position:fixed; bottom:20px; right:20px; background:var(--text); color:#fff; border-radius:var(--radius); padding:10px 16px; font-size:13px; opacity:0; transform:translateY(8px); transition:all .2s; pointer-events:none; z-index:300; max-width:320px; }
.toast.show{opacity:1;transform:none}.toast.success{background:var(--success)}.toast.error{background:var(--danger)}.toast.warn{background:var(--warn)}

/* ── Mode Tabs ── */
.mode-tabs { display:flex; align-items:center; padding:10px 20px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; box-shadow:var(--shadow); }
.mode-tabs-inner { display:flex; background:#e8edf5; border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.mode-tab { font-size:13px; font-weight:600; padding:8px 22px; border-radius:8px; border:none; background:transparent; color:#6b7280; cursor:pointer; font-family:var(--sans); transition:all .15s; white-space:nowrap; }
.mode-tab:hover:not(.active) { color:var(--text); background:rgba(255,255,255,0.5); }
.mode-tab.active { background:var(--accent); color:#ffffff; box-shadow:0 1px 4px rgba(37,99,235,0.35); }
.mode-tab-icon { margin-right:6px; font-size:14px; }
.mode-content { display:none; flex:1; flex-direction:column; overflow:hidden; }
.mode-content.active { display:flex; }

/* ── Query Builder Mode ── */
.qb-container { display:flex; flex-direction:column; flex:1; overflow:hidden; }
.qb-input-bar { padding:16px 20px; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow); flex-shrink:0; }
.qb-instruction { font-size:14px; color:var(--text); margin-bottom:10px; font-weight:500; }
.qb-instruction .emoji { font-size:18px; margin-right:6px; }
.qb-instruction .hint { color:var(--muted); font-weight:400; font-size:13px; margin-left:4px; }
.qb-input-row { display:flex; gap:10px; align-items:center; }
.qb-action-row { display:none; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.qb-action-label { font-size:12px; color:var(--success); font-weight:600; }
.btn-use-interactive { height:36px; padding:0 18px; border-radius:var(--radius-lg); border:1.5px solid var(--accent); background:var(--accent-bg); color:var(--accent); font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans); display:flex; align-items:center; gap:6px; transition:all .15s; white-space:nowrap; }
.btn-use-interactive:hover:not(:disabled) { background:var(--accent); color:#fff; }
.btn-use-interactive:disabled { opacity:.5; cursor:not-allowed; }
.qb-graphiql { height:100%; width:100%; background:var(--surface); border:none; display:flex; align-items:center; justify-content:center; }
#graphiql-container { height:100%; width:100%; }
#graphiql-empty { text-align:center; color:var(--muted); }
#graphiql-empty .empty-icon { font-size:48px; margin-bottom:12px; opacity:0.5; }
#graphiql-empty .empty-title { font-size:16px; font-weight:500; color:var(--text); margin-bottom:6px; }
#graphiql-empty .empty-hint { font-size:14px; }
#btnClearGraphiQLTabs {
  position:absolute;
  left:18px;
  top:108px;
  width:32px;
  height:32px;
  padding:0;
  border:none;
  background:transparent;
  color:#666;
  cursor:pointer;
  font-size:16px;
  border-radius:4px;
  display:none;
  z-index:10;
  transition:all 0.2s;
}
#btnClearGraphiQLTabs:hover {
  background:rgba(0,0,0,0.05);
  color:#333;
}
#btnClearGraphiQLTabs.visible { display:flex; align-items:center; justify-content:center; }

/* ── Home launcher ─────────────────────────────────────────────────────────
   The full-width landing view: hero, a connect prompt (disconnected) or a
   connected banner, and four area cards. Gating classes toggle card state. */
.home-scroll { flex:1; overflow-y:auto; }
.ex-home { max-width:960px; margin:0 auto; padding:48px 32px 64px; }
.ex-home-hero { text-align:center; margin-bottom:32px; }
.ex-home-title { font-size:30px; font-weight:800; color:var(--brand-navy); letter-spacing:-0.02em; margin-bottom:10px; }
.ex-home-subtitle { font-size:15px; color:var(--muted); line-height:1.6; max-width:640px; margin:0 auto; }

/* Connect prompt (disconnected) */
.ex-connect-prompt {
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--accent-bg); border:1px solid var(--accent); border-radius:var(--radius-lg);
  padding:18px 22px; margin-bottom:32px;
}
.ex-connect-text { font-size:14px; color:var(--text); line-height:1.5; flex:1; min-width:260px; }
.ex-connect-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ex-connect-primary {
  font-size:14px; font-weight:600; padding:10px 22px; border-radius:var(--radius); border:1px solid var(--accent);
  background:var(--accent); color:#fff; cursor:pointer; font-family:var(--sans); white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.ex-connect-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.ex-connect-alt { font-size:13px; color:var(--accent); cursor:pointer; white-space:nowrap; text-decoration:underline; text-underline-offset:2px; }
.ex-connect-alt:hover { color:var(--accent-hover); }

/* Connected banner */
.ex-connected-banner {
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text);
  background:var(--success-bg); border:1px solid #bbf7d0; border-radius:var(--radius-lg);
  padding:12px 18px; margin-bottom:32px;
}
.ex-connected-dot { width:8px; height:8px; border-radius:50%; background:var(--success); flex-shrink:0; }
.ex-connected-banner .ex-connect-alt { margin-left:auto; }

/* Area cards */
.ex-home-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.ex-home-card {
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
  padding:22px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s;
  display:flex; flex-direction:column; gap:8px;
}
.ex-home-card:hover { border-color:var(--accent); box-shadow:0 4px 16px rgba(31,119,180,0.12); transform:translateY(-2px); }
.ex-home-card-icon { font-size:26px; line-height:1; }
.ex-home-card-title { font-size:17px; font-weight:700; color:var(--text); }
.ex-home-card-desc { font-size:13px; color:var(--muted); line-height:1.5; flex:1; }
.ex-home-card-lock { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); opacity:0; }
.ex-home-card-lock.ex-home-card-open { color:var(--success); opacity:1; }

/* Disconnected: dim the three site-dependent cards and reveal their lock note.
   They stay clickable (click nudges to connect) — hence not pointer:none. */
body.not-connected .ex-home-card[data-mode="governance"],
body.not-connected .ex-home-card[data-mode="queryBuilder"],
body.not-connected .ex-home-card[data-mode="interactive"] { opacity:.55; }
body.not-connected .ex-home-card[data-mode="governance"] .ex-home-card-lock,
body.not-connected .ex-home-card[data-mode="queryBuilder"] .ex-home-card-lock,
body.not-connected .ex-home-card[data-mode="interactive"] .ex-home-card-lock { opacity:1; }
body.not-connected .ex-home-card[data-mode="governance"]:hover,
body.not-connected .ex-home-card[data-mode="queryBuilder"]:hover,
body.not-connected .ex-home-card[data-mode="interactive"]:hover { border-color:var(--accent); transform:none; box-shadow:none; }

/* Connected but AI off: Interactive Search needs AI, so gray it and reveal its
   lock note (JS sets .ai-locked + swaps the lock text). Same treatment as the
   disconnected cards; the click is a no-op nudge, so it stays a pointer. */
.ex-home-card[data-mode="interactive"].ai-locked { opacity:.55; }
.ex-home-card[data-mode="interactive"].ai-locked .ex-home-card-lock { opacity:1; }
.ex-home-card[data-mode="interactive"].ai-locked:hover { border-color:var(--accent); transform:none; box-shadow:none; }

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