/* Buraq 360 — operations console theme.
   ------------------------------------------------------------------
   Built to the supplied operations-console reference: a dark navy rail
   against a light working surface, white cards with a coloured rule at
   the top edge, and charts that stay quiet enough to read.

   The rail keeps its own tokens rather than inheriting the surface ones,
   because it stays dark in both themes -- that contrast is the whole
   structure of the layout, and flipping it with the theme would collapse
   it.

   Chart hues were run through a contrast/CVD validator rather than
   chosen by eye. The five categorical steps pass the lightness band,
   chroma floor and colour-blind separation checks on white. Amber and
   cyan fall below 3:1 against white on their own, which the validator
   flags as requiring relief; every chart here carries a visible value
   label beside the mark, which is that relief. */

:root {
  /* Working surface */
  --base:            #F4F6F9;
  --elevated:        #FFFFFF;
  --raised:          #FFFFFF;

  /* Ink */
  --text:            #111827;
  --text-secondary:  #4B5563;
  --text-tertiary:   #6B7280;   /* 4.8:1 on white - #9CA3AF was 2.5:1 and failed */

  /* Primary action */
  --accent:          #2563EB;
  --accent-hover:    #1D4ED8;

  --success:         #10B981;
  --warning:         #F59E0B;
  --destructive:     #EF4444;

  /* Hairlines: real greys on a light surface, not white alphas. */
  --hairline:        #E5E7EB;
  --hairline-strong: #D1D5DB;
  --hairline-soft:   #F0F2F5;
  --row-hover:       #F9FAFB;

  --accent-wash:        rgba(37,99,235,.07);
  --accent-wash-soft:   rgba(37,99,235,.04);
  --accent-border:      rgba(37,99,235,.28);
  --success-wash:       rgba(16,185,129,.10);
  --success-border:     rgba(16,185,129,.30);
  --warning-wash:       rgba(245,158,11,.12);
  --warning-border:     rgba(245,158,11,.32);
  --destructive-wash:   rgba(239,68,68,.09);
  --destructive-border: rgba(239,68,68,.30);

  --grid-line:       rgba(17,24,39,.05);
  --scrollbar-thumb: rgba(17,24,39,.16);
  --control-knob-off:rgba(17,24,39,.22);

  /* The navigation rail — dark in both themes. */
  --rail-bg:         #0D1526;
  --rail-bg-2:       #131C31;
  --rail-line:       rgba(255,255,255,.07);
  --rail-text:       #E5E9F0;
  --rail-text-2:     #8A94A6;
  --rail-active-bg:  rgba(37,99,235,.16);
  --rail-active-bar: #3B82F6;

  /* Validated categorical steps. Assigned in this fixed order and never
     cycled, so a series keeps its colour when the set is filtered. */
  --c1: #2563EB;   /* blue   */
  --c2: #06B6D4;   /* cyan   */
  --c3: #F59E0B;   /* amber  */
  --c4: #8B5CF6;   /* violet */
  --c5: #EC4899;   /* pink   */

  /* Tables rendered inside a chat answer. Their own tokens, so a table
     follows the theme rather than carrying colours inline. */
  --table-head: #111827;
  --table-alt:  #F9FAFB;

  /* The radius scale. Four steps, and every corner in the product uses
     one of them: chips and inline controls at xs, controls and small
     panels at sm, cards at md, and the few large surfaces at lg. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation as three deliberate steps rather than a shadow invented per
     element. Resting surfaces barely lift; only what floats above the
     page carries a real shadow. */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(17,24,39,.05), 0 1px 3px rgba(17,24,39,.04);
  --elev-2: 0 2px 6px rgba(17,24,39,.07), 0 1px 3px rgba(17,24,39,.05);
  --elev-3: 0 12px 32px rgba(17,24,39,.14), 0 2px 6px rgba(17,24,39,.07);

  /* Spacing rhythm: everything sits on a 4px grid, so gaps relate to one
     another instead of being chosen individually. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --card-radius: var(--r-md);
  --shadow-card: var(--elev-1);
  --shadow-pop:  var(--elev-3);
}

/* The dark alternative keeps the same structure: the rail is unchanged,
   the working surface inverts. */
:root[data-theme="dark"] {
  --base:            #0B1120;
  --elevated:        #111A2E;
  --raised:          #16203A;

  --text:            #E8EDF5;
  --text-secondary:  #94A3B8;
  --text-tertiary:   #64748B;

  --accent:          #3B82F6;
  --accent-hover:    #60A5FA;

  --hairline:        rgba(255,255,255,.09);
  --hairline-strong: rgba(255,255,255,.15);
  --hairline-soft:   rgba(255,255,255,.05);
  --row-hover:       rgba(255,255,255,.03);

  --accent-wash:        rgba(59,130,246,.12);
  --accent-wash-soft:   rgba(59,130,246,.06);
  --accent-border:      rgba(59,130,246,.35);
  --success-wash:       rgba(16,185,129,.14);
  --warning-wash:       rgba(245,158,11,.14);
  --destructive-wash:   rgba(239,68,68,.14);

  --grid-line:       rgba(255,255,255,.04);
  --scrollbar-thumb: rgba(255,255,255,.14);
  --control-knob-off:rgba(255,255,255,.28);

  --table-head: #1E293B;
  --table-alt:  rgba(255,255,255,.03);
  --elev-1: 0 1px 2px rgba(0,0,0,.30);
  --elev-2: 0 2px 8px rgba(0,0,0,.38);
  --elev-3: 0 14px 34px rgba(0,0,0,.52), 0 2px 6px rgba(0,0,0,.34);
  --shadow-card: 0 1px 2px rgba(0,0,0,.30);
  --shadow-pop:  0 8px 24px rgba(0,0,0,.45);
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--base);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

#app { min-height: 100vh; background: var(--base); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

@keyframes bqspin { to { transform: rotate(360deg); } }
@keyframes bqblink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes bqbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

.bqsc::-webkit-scrollbar { width: 8px; height: 8px; }
.bqsc::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
.bqsc::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: 'JetBrains Mono', monospace; }

/* Form fields. Lost when the token block was replaced; restored here
   against the light surface, with the focus ring the console uses. */
.bq-input {
  width: 100%;
  background: var(--elevated);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 11px 13px;
  color: var(--text);
  font: 400 13.5px 'Space Grotesk', system-ui, sans-serif;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bq-input::placeholder { color: var(--text-tertiary); }
.bq-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Generic hover helpers used by delegated event listeners */
[data-hover-bg]:hover { background: var(--_hover-bg, var(--row-hover)); }

/* Toast / error banner */
.bq-toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  background: var(--elevated); border: 1px solid var(--destructive-border);
  color: var(--text); font: 400 12px 'Space Grotesk'; padding: 12px 16px;
  border-radius: var(--r-xs); max-width: 340px; box-shadow: none;
}

/* Between tablet and desktop the artifact panel overlays rather than
   stealing width from the conversation column. */
@media (max-width: 1000px) {
  .bq-artifact-panel {
    position: fixed !important; right: 0; top: 0; bottom: 0; z-index: 80;
  }
}

/* Hidden on desktop; the narrow-viewport block below reveals it. */
.bq-railtoggle { display: none; }

/* The Buraq mark is a white silhouette on transparent, so it vanishes
   against the light theme's near-white surfaces. brightness(0) drives
   every visible pixel to black while preserving the alpha channel, so
   the same single asset works correctly in both themes. */
/* The mark ships light-on-transparent. It sits on the dark rail as-is,
   and is inverted anywhere it lands on the light working surface. */
img[alt="Buraq"] { filter: brightness(0); }
/* The rail is dark in both themes, so it must establish its own ink.
   Without this, any element inside it that does not set a colour
   inherits the page default -- which on the light theme is near-black
   on near-black, at 1.03:1. That is how the workspace name and the
   account name vanished. */
.bq-rail { color: var(--rail-text); }

.bq-rail img[alt="Buraq"],
.bq-onrail img[alt="Buraq"] { filter: none; }
:root[data-theme="dark"] img[alt="Buraq"] { filter: none; }

/* ---------------------------------------------------------------
   Narrow viewports. The workspace is a three-pane desktop layout;
   below tablet width the rail becomes an off-canvas drawer and the
   artifact panel takes the full screen, so neither squeezes the
   conversation column into an unusable strip.
   --------------------------------------------------------------- */
@media (max-width: 860px) {
  .bq-rail {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 90;
    width: 264px !important;
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .bq-rail.is-open { transform: translateX(0); width: 264px !important; }
  .bq-scrim {
    position: fixed; inset: 0; z-index: 85;
    background: rgba(0,0,0,.5);
  }
  .bq-railtoggle { display: inline-flex !important; }
  .bq-artifact-panel {
    position: fixed !important; inset: 0 !important;
    width: auto !important; z-index: 95;
  }
  /* Page-level views drop their generous desktop gutters. */
  .bq-page { padding-left: 18px !important; padding-right: 18px !important; }
}

@media (max-width: 560px) {
  .bq-composer-bar { flex-wrap: wrap; row-gap: 8px; }
  .bq-composer-bar .bq-ctx { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Visible keyboard focus everywhere -- previously only inputs showed one. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Operations console — dashboard components
   ------------------------------------------------------------------
   Cards are white on a light ground, separated by a hairline and a very
   shallow shadow rather than heavy elevation, with a 3px coloured rule
   along the top edge of each headline metric. That rule is the only
   place colour is spent on chrome; everywhere else it is reserved for
   data, which is what keeps a dense screen readable. */

.ops-card {
  background: var(--elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--card-radius);
  box-shadow: var(--elev-2);
  position: relative;
  overflow: hidden;
}

.ops-kpi { padding: 18px 20px 16px; }

/* The coloured rule. Drawn as a child rather than a border so the card
   keeps its radius cleanly at the top corners. */
.ops-rule {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}

.ops-kpi-label {
  font: 700 10.5px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ops-kpi-value {
  font: 700 34px/1 'Space Grotesk', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--text);
}

.ops-kpi-foot {
  margin-top: 12px;
  font: 500 11.5px/1.3 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-tertiary);
}

/* Delta pills. Green reads as good and amber as watch, so polarity is
   passed in rather than inferred from the sign - climbing spend is not
   the same news as climbing usage. */
.ops-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 11px/1 'Space Grotesk', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 5px 9px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.ops-pill.good  { color: #047857; background: rgba(16,185,129,.13); }
.ops-pill.bad   { color: #B45309; background: rgba(245,158,11,.16); }
.ops-pill.flat  { color: var(--text-secondary); background: var(--hairline-soft); }
.ops-pill.info  { color: #1D4ED8; background: rgba(37,99,235,.10); }

.ops-head {
  padding: 18px 20px 0;
}
.ops-title {
  font: 700 14.5px/1.2 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
}
.ops-sub {
  margin-top: 5px;
  font: 500 11.5px/1.4 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-tertiary);
}

.ops-num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Status chips in the table, in the reference's flat-tinted style. */
.ops-status {
  display: inline-flex; align-items: center;
  font: 700 10px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-sm);
}
.ops-status.ok    { color: #047857; background: rgba(16,185,129,.13); }
.ops-status.warn  { color: #B45309; background: rgba(245,158,11,.16); }
.ops-status.idle  { color: #1D4ED8; background: rgba(37,99,235,.10); }
.ops-status.muted { color: var(--text-secondary); background: var(--hairline-soft); }

.ops-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.ops-row { border-top: 1px solid var(--hairline-soft); transition: background 110ms ease; }
.ops-row:hover { background: var(--row-hover); }

.ops-th {
  font: 700 10px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Factor bars: a track plus a fill, with the value stated beside it.
   Amber and cyan sit below 3:1 on white, so the visible label is not
   decoration - it is the relief that makes those hues legitimate. */
.ops-track { height: 7px; border-radius: var(--r-sm); background: var(--hairline-soft); overflow: hidden; }
.ops-fill  { height: 100%; border-radius: var(--r-sm); }

.ops-legend {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 11.5px/1 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-secondary);
}

/* Chart hover: a crosshair and a tooltip, so the chart can be
   interrogated rather than merely looked at. */
.ops-plot { position: relative; }
.ops-tip {
  position: absolute; pointer-events: none; z-index: 6;
  background: #111827; color: #fff;
  border-radius: var(--r-sm); padding: 8px 11px;
  font: 600 11.5px/1.45 'Space Grotesk', system-ui, sans-serif;
  white-space: nowrap;
  transform: translate(-50%, -130%);
  opacity: 0; transition: opacity 110ms ease;
  box-shadow: var(--shadow-pop);
}
.ops-tip.show { opacity: 1; }
.ops-tip .k { color: #9CA3AF; font-weight: 500; }

/* A callout badge pinned to a peak, as the reference does on its
   ridership curve. Used only on the highest point, never on every one. */
.ops-callout {
  font: 700 10.5px/1 'Space Grotesk', system-ui, sans-serif;
  fill: #fff;
}

@keyframes ops-draw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
.ops-line { stroke-dasharray: 1600; animation: ops-draw 900ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes ops-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ops-in { animation: ops-in 300ms ease both; }
@media (prefers-reduced-motion: reduce) {
  .ops-line, .ops-in { animation: none; }
  .ops-line { stroke-dasharray: none; }
}

@keyframes ops-shimmer { 0%,100% { opacity:.55 } 50% { opacity:.85 } }
.ops-skel { background: var(--hairline-soft); border-radius: var(--card-radius); animation: ops-shimmer 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ops-skel { animation: none; } }

/* The live-status chip in the page header. */
.ops-live {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary);
}
.ops-live i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); flex: none;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.ops-stamp {
  font: 700 11.5px/1 'Space Grotesk', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  background: var(--elevated);
}

@media (max-width: 1200px) {
  .ops-kpi-value { font-size: 27px; }
}

/* ------------------------------------------------------------------
   Member intelligence
   ------------------------------------------------------------------
   Bars are the workhorse here, so they are built to be read at a glance
   and interrogated on hover: the fill deepens, the row lifts onto its
   own surface, and the detail line appears. Nothing moves position on
   hover -- the detail line is always in the layout, only its opacity and
   height change -- because a row that reflows under the pointer is the
   thing that makes a dense list feel unstable. */

.ops-bar {
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--r-md);
  transition: background 130ms ease;
}
.ops-bar + .ops-bar { margin-top: 2px; }
.ops-bar:hover { background: var(--row-hover); }

/* One grid row, so the label and value never drift apart between rows:
   the label takes the slack, the value keeps its own column. */
.ops-bar-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
}
.ops-bar-label {
  font: 600 12.5px/1.35 'Space Grotesk', system-ui, sans-serif;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-bar-value {
  font: 700 11.5px/1.35 'Space Grotesk', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ops-bar .ops-track { margin-top: 8px; }
.ops-bar .ops-fill {
  transition: filter 130ms ease, transform 130ms ease;
  transform-origin: left center;
}
.ops-bar:hover .ops-fill { filter: saturate(1.25) brightness(.94); }

/* Reserved, not inserted: the row keeps its height on hover. */
.ops-bar-detail {
  font: 500 11px/1.4 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-tertiary);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 130ms ease, opacity 130ms ease, margin-top 130ms ease;
}
.ops-bar:hover .ops-bar-detail { max-height: 20px; opacity: 1; margin-top: 6px; }

/* Trend chips. The arrow sits in a fixed-width box so a column of chips
   keeps its text on one vertical line regardless of the glyph. */
.ops-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11.5px/1 'Space Grotesk', system-ui, sans-serif;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform 130ms ease, box-shadow 130ms ease;
}
.ops-trend:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.ops-trend b {
  font: 700 10.5px/1 'Space Grotesk', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.ops-trend-arrow { font-size: 8px; width: 9px; text-align: center; flex: none; }
.ops-trend.up   { color: #047857; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.28); }
.ops-trend.down { color: #B45309; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.30); }
.ops-trend.flat { color: var(--text-secondary); background: var(--hairline-soft); border-color: var(--hairline); }

.ops-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11.5px/1 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-secondary);
  background: var(--elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  transition: border-color 130ms ease, color 130ms ease;
}
.ops-chip:hover { border-color: var(--accent-border); color: var(--text); }
.ops-chip b {
  font: 700 9.5px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .07em;
  color: var(--accent);
}

.ops-label {
  font: 700 10px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ops-brief {
  margin-top: 16px;
  background: var(--elevated);
  border: 1px solid var(--accent-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ops-brief-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline-soft);
  background: var(--accent-wash-soft);
}

/* ------------------------------------------------------------------
   Page header and tabs
   ------------------------------------------------------------------
   The header is its own band: it sits on the raised surface, spans the
   full width, and ends in a hairline. The tabs hang off its bottom edge
   so the active tab and the content below share one surface and read as
   a single object -- previously the tab strip floated directly on top of
   the first row of cards with nothing between them, which is what made
   them look like they were colliding. */

.ops-pagehead {
  background: var(--elevated);
  border-bottom: 1px solid var(--hairline);
  padding: 24px 28px 0;
  position: sticky;
  top: 0;
  z-index: 4;
}

.ops-eyebrow {
  font: 700 10px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
}

.ops-tabs {
  display: flex;
  gap: 2px;
  margin-top: 18px;
}
.ops-tabs button {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  font: 600 13px 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-tertiary);
  /* The extra bottom padding is what keeps the underline clear of the
     content that follows, rather than sitting on top of it. */
  padding: 12px 16px 14px;
  border-radius: var(--r-md) 8px 0 0;
  transition: color 130ms ease, background 130ms ease;
}
.ops-tabs button:hover:not(.on) { color: var(--text-secondary); background: var(--row-hover); }
.ops-tabs button.on { color: var(--accent); }
.ops-tabs button.on::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: var(--r-xs) 2px 0 0;
  background: var(--accent);
}

.ops-btn {
  background: var(--elevated);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 9px 15px;
  font: 600 12px 'Space Grotesk', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease;
}
.ops-btn:hover { border-color: var(--accent); background: var(--accent-wash-soft); }

/* The range switch, matched to the button height so the header row has a
   single baseline rather than three control heights. */
.ops-seg {
  display: inline-flex;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 3px;
}
.ops-seg button {
  background: transparent;
  border: none;
  cursor: pointer;
  font: 700 11px 'Space Grotesk', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--text-tertiary);
  padding: 6px 13px;
  border-radius: var(--r-sm);
  transition: color 130ms ease, background 130ms ease;
}
.ops-seg button.on { background: var(--accent); color: #fff; }
.ops-seg button:hover:not(.on) { color: var(--text); }

@media (max-width: 900px) {
  .ops-pagehead { padding: 18px 16px 0; position: static; }
  .ops-tabs { overflow-x: auto; }
  .ops-tabs button { white-space: nowrap; }
}

/* Cards stretch to fill their grid row, and lay their own content out in
   a column. Without this a card stops where its content ends, so a row
   of three finishes at three different heights and the section below it
   starts against a ragged edge. */
.ops-card {
  display: flex;
  flex-direction: column;
}
/* The last block in a card takes the slack, so a short card pads at the
   bottom rather than leaving a gap in the grid. */
.ops-card > :last-child { margin-bottom: 0; }
.ops-card .ops-grow { flex: 1; }

/* Empty states sit in the middle of whatever height the row settled on,
   instead of clinging to the top of an over-tall card. */
.ops-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 20px;
  font: 500 12px 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-tertiary);
}

/* ------------------------------------------------------------------
   Skill mention picker
   ------------------------------------------------------------------
   Anchored above the composer rather than below it: the composer sits at
   the bottom of the viewport, so a list opening downward would be cut
   off exactly when it is needed. */

.bq-mention {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: var(--elevated);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  z-index: 40;
}

.bq-mention-head,
.bq-mention-foot {
  padding: 9px 13px;
  font: 600 10px 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--hairline-soft);
}
.bq-mention-head { border-bottom: 1px solid var(--hairline); }
.bq-mention-foot {
  border-top: 1px solid var(--hairline);
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 500;
}

.bq-mention-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline-soft);
}
.bq-mention-item:last-of-type { border-bottom: none; }
.bq-mention-item:hover { background: var(--row-hover); }
/* The keyboard selection is marked with a rule as well as a tint, so it
   is still obvious to anyone who cannot separate the two backgrounds. */
.bq-mention-item.on {
  background: var(--accent-wash);
  box-shadow: inset 3px 0 0 var(--accent);
}

.bq-mention-name {
  font: 600 12.5px 'Space Grotesk', system-ui, sans-serif;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bq-mention-desc {
  margin-top: 2px;
  font: 500 11px 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bq-mention-slug {
  flex: none;
  font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
  color: var(--accent);
  background: var(--accent-wash);
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.bq-mention-empty {
  padding: 16px 14px;
  font: 500 12px 'Space Grotesk', system-ui, sans-serif;
  color: var(--text-secondary);
}

/* Chips showing which skills the next send will actually apply. */
.bq-skillchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px 'Space Grotesk', system-ui, sans-serif;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-border);
  padding: 5px 10px;
  border-radius: var(--r-pill);
}
.bq-skillchip.missing {
  color: #B45309;
  background: var(--warning-wash);
  border-color: var(--warning-border);
}

/* Message controls appear on hover, so they are discoverable without
   putting three buttons beside every line of the transcript. They stay
   visible on keyboard focus, which is the only way to reach them without
   a pointer. */
.bq-usermsg .bq-msgtools {
  opacity: 0;
  transition: opacity 130ms ease;
}
.bq-usermsg:hover .bq-msgtools,
.bq-usermsg:focus-within .bq-msgtools { opacity: 1; }
@media (hover: none) {
  /* No hover on touch, so they are simply always shown. */
  .bq-usermsg .bq-msgtools { opacity: 1; }
}

/* Message actions sit under the message, the way a transcript reads.
   Quiet until the message is hovered or focused, so a long conversation
   is not a wall of buttons, but never hidden on touch where there is no
   hover to reveal them. */
.bq-msgbtn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 5px 9px;
  color: var(--text-tertiary);
  font: 600 11px 'Space Grotesk', system-ui, sans-serif;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.bq-msgbtn:hover {
  color: var(--text);
  background: var(--row-hover);
  border-color: var(--hairline);
}

.bq-usermsg .bq-msgtools {
  opacity: 0;
  transition: opacity 130ms ease;
}
.bq-usermsg:hover .bq-msgtools,
.bq-usermsg:focus-within .bq-msgtools { opacity: 1; }
@media (hover: none) {
  .bq-usermsg .bq-msgtools { opacity: 1; }
}

/* Chips on the empty thread: the capabilities someone cannot otherwise
   discover -- attachments, skills, web search -- offered as controls
   rather than described in a paragraph nobody reads. */
.bq-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--elevated);
  color: var(--text-secondary);
  font: 600 12px 'Space Grotesk', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
}
.bq-chip:hover { border-color: var(--accent); color: var(--text); }
.bq-chip.on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}