:root {
  --bg: #101216;
  --panel: #1a1e26;
  --panel2: #222835;
  --text: #e8eaee;
  --muted: #9aa3b2;
  --accent: #d9a441;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.hidden { display: none !important; }

/* login */
.login {
  max-width: 22rem;
  margin: 15vh auto;
  padding: 2rem;
  background: var(--panel);
  border-radius: 12px;
}
.login h1 { margin: 0 0 0.25rem; }
.tagline, .hint, .placeholder { color: var(--muted); }
.error { color: #e06c75; }
label { display: block; margin: 0.75rem 0; }
input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #333;
  background: var(--bg);
  color: var(--text);
}
button, .btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #14161a;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

/* app frame */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: var(--panel);
}
.brand { font-weight: 700; }
.user { color: var(--muted); font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
/* model menu: same popover pattern as the conversation switcher —
   native <select> dropdowns clash with the theme (twice-rejected). */
.llm-menu { position: relative; display: inline-block; }
.llm-menu #llm-current {
  background: var(--bg);
  color: var(--text);
  border: 1px solid #333;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 400;
}
.llm-menu .conv-list {
  left: auto;
  right: 0;
  top: 100%;
  margin-top: 0.3rem;
  min-width: 17rem;
  max-width: calc(100vw - 1rem);
}

/* The canvas page is an app shell: it fills the viewport and never scrolls
   as a page — only the panes inside it do. Two things this must NOT do:
   - subtract a hardcoded top-bar height from 100vh: the bar wraps to two
     lines on narrow screens, and the second line pushed the composer off
     the bottom;
   - use 100vh at all on iOS: Safari measures it with its toolbars HIDDEN,
     so the bottom of the page — where the chat composer lives — sat below
     the fold and the iPad had to be scrolled before the chat could be
     tapped. 100dvh is the visible viewport; the vh line before it is the
     fallback for browsers that do not know dvh. */
body.canvas {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}
body.canvas .topbar { flex: 0 0 auto; flex-wrap: wrap; row-gap: 0.25rem; }
.workspace {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* min-width/height 0: a flex item's default min-size is its CONTENT size,
   and cytoscape's canvas paints at the current width — so without this the
   canvas pins the row and the chat column can shrink but never grow back. */
#cy { flex: 1; min-height: 0; min-width: 0; }

/* chat: bottom sheet on mobile, right column on wide screens */
.chat {
  background: var(--panel);
  border-top: 1px solid #2a303c;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  height: 40vh;   /* default; the grip and the saved view override it */
  min-height: 7.5rem;
}
/* The grip: the whole top edge drags, like every bottom sheet. */
.chat-grip {
  height: 14px;
  margin-top: -4px;
  cursor: ns-resize;
  touch-action: none;
  display: flex; align-items: center; justify-content: center;
  color: #3a4150;
  flex: 0 0 auto;
}
.chat-grip::before {
  content: ""; width: 3rem; height: 4px; border-radius: 999px;
  background: #3a4150;
}
.chat-header {
  position: relative;
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem 0;
}
.chat-header #conv-current {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #333;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 400;
  text-align: left;
  overflow: hidden;
}
.chat-header #conv-current-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header .caret { color: var(--muted); margin-left: 0.4rem; }
.chat-header #conv-new { padding: 0.2rem 0.7rem; white-space: nowrap; }
.conv-list {
  position: absolute;
  top: 100%;
  left: 0.8rem;
  right: 0.8rem;
  margin-top: 0.25rem;
  background: var(--panel2);
  border: 1px solid #2a303c;
  border-radius: 8px;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 15;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* The chat sits at the BOTTOM of the workspace, so a list opening downward
   ran off the viewport — its scrollbar landed below the screen edge and the
   older conversations were unreachable. Over the canvas there is room. */
.chat-header .conv-list {
  top: auto;
  bottom: 100%;
  margin: 0 0 0.25rem;
}
.conv-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  font-weight: 400;
  padding: 0.5rem 0.8rem;
  border: none;
  border-bottom: 1px solid #262c38;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item:hover { background: var(--panel); }
.conv-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #262c38;
}
.conv-row .conv-item {
  flex: 1 1 auto;
  min-width: 0;            /* long titles ellipsize instead of pushing the × */
  width: auto;
  border-bottom: none;
}
.conv-row.active .conv-item { color: var(--accent); }
.conv-row:hover { background: var(--panel); }
.conv-del {
  flex: 0 0 auto;
  background: transparent;
  color: #5c6577;
  border: none;
  border-radius: 4px;
  padding: 0.15rem 0.55rem;
  margin-right: 0.25rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.conv-del:hover { color: #e06c75; background: rgba(224, 108, 117, 0.1); }
.conv-del.armed { color: #e06c75; font-size: 0.72rem; }
/* On pointer devices the × appears on hover — a column of delete buttons is
   visual noise. Touch has no hover, so there it stays visible. */
@media (hover: hover) {
  .conv-del { opacity: 0; }
  .conv-row:hover .conv-del, .conv-del.armed { opacity: 1; }
}
.conv-item.active { color: var(--accent); }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem 0.8rem;
}
.chat-form textarea {
  flex: 1;
  resize: none;   /* one grip is enough — the panel edge resizes everything */
  max-height: 160px;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #333;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.35;
}
.chat-form .stop { background: #7a2c36; color: var(--text); }
/* "Add file": the canvas's own control, same pill as the toolbox opposite.
   Top-left is the one corner nothing else owns (toolbox and detail top-right,
   legend bottom-left). */
.canvas-add {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 4;
  background: rgba(26, 30, 38, 0.92);
  color: var(--text);
  border: 1px solid #2a303c;
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  min-height: 2.4rem;   /* a finger-sized target on the tablet */
}
.canvas-add:hover { background: var(--panel2); }
.canvas-add { left: 4rem; }
.topology-controls {
  position: absolute; top: 3.5rem; left: 4rem; z-index: 4;
  max-width: min(22rem, calc(100% - 5rem));
  padding: 0.4rem 0.6rem; border: 1px solid #2a303c; border-radius: 10px;
  background: rgba(26, 30, 38, 0.94); font-size: 0.8rem;
}
.topology-controls label { display: inline; margin-right: 0.4rem; }
.topology-controls select {
  background: var(--panel); color: var(--text); border: 1px solid #3a4150;
  border-radius: 6px; min-height: 2.2rem; max-width: 100%;
}
.topology-controls p { margin: 0.25rem 0 0; }
.topology-controls p:empty { display: none; }
.record-body { overflow-wrap: anywhere; white-space: pre-wrap; }
.record-open { display: inline-block; margin-top: 0.8rem; }
.msg {
  /* Long unbroken tokens (fqids, URLs, SELECT lists) must never widen the
     bubble past the panel. */
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  max-width: 85%;
  white-space: pre-wrap;
  font-size: 0.92rem;
}
.msg.user { background: #2b3b55; align-self: flex-end; }
.msg.assistant { background: var(--panel2); align-self: flex-start; }
.msg.error { background: #4a2530; align-self: flex-start; }
.msg.typing { color: var(--muted); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.msg.tool-chip {
  background: transparent;
  border: 1px dashed #3a4150;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  align-self: flex-start;
}

/* detail panel */
.detail {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: min(24rem, calc(100vw - 1.5rem));
  max-height: 55vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid #2a303c;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  z-index: 10;
}
.detail h3 { margin: 0 0 0.2rem; }
/* the title is editable in place — hint it on hover, commit on blur */
.detail h3[contenteditable]:hover { background: var(--panel2); border-radius: 4px; }
.detail h3[contenteditable]:focus {
  outline: none; background: var(--bg); border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.detail-actions { display: flex; gap: 0.4rem; margin: 0.5rem 0; }
.detail h4 { margin: 0.8rem 0 0.3rem; color: var(--muted); }
.detail pre {
  background: var(--bg);
  padding: 0.5rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.78rem;
}
.detail ul { margin: 0.2rem 0; padding-left: 1.1rem; }
.detail .close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
}
.detail .ver-link {
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-size: 0.8rem;
  text-decoration: underline;
}
.detail pre.diff { max-height: 16rem; overflow-y: auto; }
.diff .add { color: #3ecf8e; }
.diff .del { color: #e06c75; }
.diff .hunk { color: var(--muted); }
#annotate-form { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
#annotate-form input { flex: 1; }

.view-toggle {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 5;
}
.view-toggle.new-object { top: 3.1rem; }
.view-toggle, .view-toggle.new-object {
  z-index: 5;
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a303c;
  font-size: 1.1rem;
  padding: 0.25rem 0.55rem;
}

/* canvas legend */
.legend {
  position: absolute;
  /* --chat-h: the bottom sheet's live height on narrow screens (canvas.js),
     0 on the wide layout — the legend never sits on top of the composer. */
  bottom: calc(var(--chat-h, 0px) + 0.6rem);
  left: 0.6rem;
  max-width: calc(100% - 1.2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.75rem;
  color: var(--muted);
  background: rgba(26, 30, 38, 0.85);
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  z-index: 5;
}
.legend .sw {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: -0.1rem;
  background: #666e7d;
}
.legend .sw.dashed { border: 2px dashed #9aa3b2; background: transparent; }
.legend .sw.live { border: 2px solid #3ecf8e; background: transparent; }
.legend .sw.waiting { border: 2px dashed #e2b13c; background: transparent; }
.legend .sw.ghost { opacity: 0.3; }
.legend .sw.shp-barrel { border-radius: 40%/60%; width: 0.9rem; height: 0.65rem; }
.legend .sw.shp-circle { border-radius: 50%; }
.legend .sw.shp-diamond { border-radius: 2px; transform: rotate(45deg) scale(0.8); }
.legend .sw.shp-note { border-radius: 0; background: #b9a2ef; }
.legend .sw.shp-work { border-radius: 4px; background: #62c7bc; }

/* toolbox: unanchored capabilities dock here instead of floating in the field.
   Collapsed to a pill by default so it never obstructs the canvas. */
.toolbox {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: rgba(26, 30, 38, 0.92);
  border: 1px solid #2a303c;
  border-radius: 10px;
  z-index: 4;
  font-size: 0.85rem;
}
.toolbox #toolbox-header {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border: none;
  cursor: pointer;
}
.toolbox.collapsed #toolbox-body { display: none; }
.toolbox.collapsed .tb-title { display: none; }
.toolbox:not(.collapsed) { width: 14rem; }
.toolbox #toolbox-body { padding: 0 0.8rem 0.6rem; }
.toolbox ul { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.toolbox li { padding: 0.25rem 0.2rem; cursor: pointer; border-radius: 6px; }
.toolbox li:hover { background: var(--panel2); }
.toolbox .tb-glyph { color: var(--accent); margin-right: 0.15rem; }

/* modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.modal-box {
  position: relative;
  /* Never taller than the screen: a dialog chopped at both ends hides its
     own fields, and a user cannot fill what they cannot see. */
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid #2a303c;
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  width: min(24rem, calc(100vw - 2rem));
}
.modal-box h3 { margin: 0 0 0.3rem; }
.modal-box .close {
  position: absolute; top: 0.4rem; right: 0.6rem;
  background: transparent; color: var(--muted); font-size: 1.15rem;
  padding: 0.1rem 0.4rem;
}
.modal-box input { margin-top: 0.6rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.ghost-btn { background: transparent; color: var(--muted); border: 1px solid #333; }
.notice-body { color: var(--muted); font-size: 0.9rem; max-height: 45vh; overflow-y: auto; }
.notice-body p { margin: 0.4rem 0; }

/* inbox */
.inbox { padding: 1rem; max-width: 46rem; margin: 0 auto; }
.card {
  background: var(--panel);
  border: 1px solid #2a303c;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.9rem;
}
.card h3 { margin: 0 0 0.4rem; }
.card .situation {
  background: var(--bg);
  padding: 0.6rem;
  border-radius: 8px;
  white-space: pre-wrap;
  font-size: 0.85rem;
  max-height: 12rem;
  overflow-y: auto;
}
.card .options { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.history-title { color: var(--muted); margin-top: 1.5rem; }
.hist-row { padding: 0.4rem 0; border-bottom: 1px solid #232935; }

/* apps */
.app-tile { display: block; text-decoration: none; color: var(--text); }
.app-tile:hover { border-color: var(--accent); }
.app-tile h3 { color: var(--accent); }
.stats-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.card.stat { flex: 1; min-width: 8rem; text-align: center; margin-bottom: 0; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent); }
.table-wrap { overflow-x: auto; }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.table-wrap th, .table-wrap td {
  text-align: left;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid #232935;
  white-space: nowrap;
}
.table-wrap th { color: var(--muted); position: sticky; top: 0; background: var(--panel); }
.search-form { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.search-form input { flex: 1; }
.act-btn { padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 500; }
.act-btn:disabled { opacity: 0.35; cursor: default; }
.row-actions { text-align: right; }
.app-notice {
  background: var(--panel2);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
}
.app-notice.error { border-color: #e06c75; color: #e06c75; }

@media (min-width: 900px) {
  .workspace { flex-direction: row; --chat-w: 24rem; }
  #cy { flex: 1; height: 100%; }
  .chat {
    position: relative;
    width: var(--chat-w);
    height: auto;      /* full column — the mobile sheet height must not apply */
    max-height: none;
    border-top: none;
    border-left: 1px solid #2a303c;
  }
  /* The chat header is at the TOP of the column here, so the conversation
     list opens DOWNWARD — upward was for the phone bottom sheet, where the
     header is at the bottom of the screen. Opening toward the screen edge
     hides half the list either way. */
  .chat-header .conv-list {
    top: 100%;
    bottom: auto;
    margin: 0.25rem 0 0;
  }
  /* Sideways layout, sideways grip: the whole left edge drags the width. */
  .chat-grip {
    position: absolute;
    left: -7px; top: 0; bottom: 0;
    width: 14px; height: auto; margin: 0;
    cursor: ew-resize;
  }
  .chat-grip::before { width: 4px; height: 3rem; }
  /* Overlays anchor to the CANVAS area, never over the chat column. */
  .toolbox { right: calc(var(--chat-w) + 0.75rem); }
  .detail { right: calc(var(--chat-w) + 0.75rem); }
}

/* app widgets: the vocabulary that turns query output into something an
   analyst reads — labeled record cards, semantic badges, score bars. */
.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--panel2);
  color: var(--text);
}
.tone-ok { --tone: #3ecf8e; }
.tone-warn { --tone: #d9a441; }
.tone-error { --tone: #e06c75; }
.tone-neutral { --tone: #9aa3b2; }
.badge.tone-ok, .badge.tone-warn, .badge.tone-error, .badge.tone-neutral {
  background: color-mix(in srgb, var(--tone) 18%, transparent);
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
}
.card.stat.tone-ok .stat-value { color: #3ecf8e; }
.card.stat.tone-warn .stat-value { color: #d9a441; }
.card.stat.tone-error .stat-value { color: #e06c75; }
.stat-hint { color: var(--muted); font-size: 0.7rem; margin-top: 0.2rem; }
.score b { font-size: 1.05rem; color: var(--accent); }
.score-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--panel2);
  margin-top: 0.25rem;
  overflow: hidden;
}
.score-bar i { display: block; height: 100%; background: var(--accent); }
.record {
  border: 1px solid #2a303c;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-top: 0.7rem;
  background: var(--bg);
}
.record-title { margin: 0; color: var(--accent); font-size: 1.05rem; }
.record-sub { margin: 0.1rem 0 0.6rem; }
.record-group {
  margin: 0.8rem 0 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.record-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin: 0; }
.record-fields dt { color: var(--muted); font-size: 0.72rem; }
.record-fields dd { margin: 0.1rem 0 0; font-size: 0.9rem; }
@media (max-width: 560px) { .record-fields { grid-template-columns: 1fr; } }

/* pending-changes badge: the gate has to be findable */
.pending-wrap { position: relative; display: inline-block; }
.pending-wrap #pending-btn {
  background: var(--accent);
  color: #14161a;
  border: none;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.pending-wrap .conv-list { left: auto; right: 0; min-width: 21rem; max-width: calc(100vw - 1rem); }
.pending-item { display: block; width: 100%; text-align: left; white-space: normal; }
.pending-item .pi-kind { color: var(--muted); font-size: 0.72rem; }
.pending-item .pi-sum { color: var(--muted); font-size: 0.75rem; display: block; }
/* Matches the amber dashes the canvas draws on a live node with work waiting. */
.ask-model { color: var(--muted); font-size: 0.75rem; margin-top: 0.35rem; }
.pending-note {
  border-left: 3px solid #e2b13c;
  padding-left: 0.55rem;
  color: #e2b13c;
}

/* Action feedback must be visible from wherever you clicked — a notice at the
   top of a long dashboard is a notice nobody reads. */
.app-notice {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(30rem, calc(100vw - 2rem));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* data preview inside the detail panel */
.detail-data { max-height: 18rem; overflow: auto; margin-bottom: 0.5rem; }
.detail-data table { font-size: 0.72rem; }
.detail-data th, .detail-data td { padding: 0.2rem 0.4rem; max-width: 9rem;
  overflow: hidden; text-overflow: ellipsis; }
.doc-row { padding: 0.25rem 0; border-bottom: 1px solid #232935; display: flex;
  justify-content: space-between; gap: 0.5rem; }

/* bars: distributions, drawn without a charting library */
.bar-row { display: grid; grid-template-columns: 9rem 1fr auto; gap: 0.6rem;
  align-items: center; padding: 0.2rem 0; font-size: 0.82rem; }
.bar-track { background: var(--panel2); border-radius: 999px; height: 0.75rem; overflow: hidden; }
.bar-track i { display: block; height: 100%; background: var(--accent); }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .bar-row { grid-template-columns: 6.5rem 1fr auto; } }

/* ask surface: the answer, and the query behind it */
.ask-sql { margin-top: 0.6rem; }
.ask-sql summary { color: var(--muted); font-size: 0.75rem; cursor: pointer; }
.ask-sql pre { background: var(--bg); padding: 0.5rem; border-radius: 6px;
  overflow-x: auto; font-size: 0.72rem; margin-top: 0.3rem; }

/* ---------------- connections page ---------------- */
.page { max-width: 52rem; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.page h1 { margin: 0 0 0.2rem; }
.connect-btn { margin: 0.9rem 0; }
.conn-list { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.conn {
  background: var(--panel);
  border: 1px solid #2a303c;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
}
.conn-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.conn-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.conn-actions button { padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.conn-status.ok { color: #3ecf8e; }
.conn-status.error { color: #e06c75; }
.pill {
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
}
.pill.dest { color: #3ecf8e; }
.pill.warn { color: var(--accent); }
.modal-box.wide { max-width: 34rem; width: calc(100vw - 2rem); }
.kind-picker { display: grid; gap: 0.5rem; }
.kind-card {
  display: block; width: 100%; text-align: left;
  background: var(--panel2); color: var(--text); font-weight: 400;
  border: 1px solid #2a303c; padding: 0.6rem 0.8rem;
}
.kind-card:hover { border-color: var(--accent); }
.kind-card b { display: block; margin-bottom: 0.15rem; }
#connect-form textarea {
  width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid #333;
  background: var(--bg); color: var(--text); font-family: ui-monospace, monospace;
  font-size: 0.78rem;
}
/* segmented control — a native <select> clashes with the theme */
.seg { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.seg-opt {
  background: var(--bg); color: var(--muted); font-weight: 400;
  border: 1px solid #333; padding: 0.25rem 0.6rem; font-size: 0.85rem;
}
.seg-opt.on { border-color: var(--accent); color: var(--accent); }

/* ---------------- discovery ---------------- */
.stats { list-style: none; display: flex; gap: 1.2rem; flex-wrap: wrap; padding: 0; margin: 0.8rem 0; }
.stats b { font-size: 1.4rem; display: block; }
.stats li { color: var(--muted); font-size: 0.8rem; }
.stats .new b { color: var(--accent); }
.stats .sens b { color: #e06c75; }
.bulk { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.bulk button { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.ghost-btn { background: transparent; color: var(--muted); border: 1px solid #333; }
label.inline { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.85rem; color: var(--muted); }
label.inline input { width: auto; }
.disc-list { list-style: none; padding: 0; margin: 0 0 5rem; }
.disc { border-bottom: 1px solid #262c38; padding: 0.5rem 0.2rem; }
.disc.known { opacity: 0.45; }
.disc label { display: flex; align-items: center; gap: 0.45rem; margin: 0; flex-wrap: wrap; cursor: pointer; }
.disc label input { width: auto; }
.disc-why { margin: 0.15rem 0 0 1.6rem; }
.pill.noun { color: #d9a441; }
.pill.new { color: #3ecf8e; }
.pill.sens { color: #e06c75; }
.sticky-actions {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 0.8rem; justify-content: flex-end;
  padding: 0.7rem 1rem; background: var(--panel);
  border-top: 1px solid #2a303c;
}
.sticky-actions .ok { color: #3ecf8e; }

/* markdown inside assistant messages */
.msg.md .md-h { font-size: 1.02em; }
.msg.md .md-li { padding-left: 0.35rem; }
.msg.md code {
  background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 4px;
  font-size: 0.85em;
  overflow-wrap: anywhere;
}
.msg.md pre.md-code {
  background: var(--bg); padding: 0.5rem; border-radius: 6px;
  font-size: 0.8rem; margin: 0.35rem 0;
  /* Wrap, don't scroll: a chat bubble on a phone has no room for a
     horizontal scrollbar, and a query you cannot see is a query you
     cannot audit. */
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}

/* guided OAuth */
.oauth-box { margin: 0.7rem 0 0.4rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.banner { padding: 0.5rem 0.8rem; border-radius: 8px; margin: 0.6rem 0; }
.banner.ok { background: rgba(62, 207, 142, 0.12); color: #3ecf8e; }
.banner.error { background: rgba(224, 108, 117, 0.12); color: #e06c75; }

/* Guided Drive: the manual credentials collapse out of the way, so the
   dialog is name + folder + one button. */
details.manual-creds { margin-top: 0.6rem; }
details.manual-creds summary { color: var(--muted); font-size: 0.8rem; cursor: pointer; }

/* drop target: the whole canvas lights up while a file hovers */
.workspace.dropping::after {
  content: "Suelta el archivo — quedará como documento gobernado";
  position: absolute; inset: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--accent); border-radius: 12px;
  background: rgba(217, 164, 65, 0.08); color: var(--accent);
  font-size: 1.05rem; z-index: 30; pointer-events: none;
}