/* ============================================================
   Sahakar Shakti — SahAI styles
   Two entry points: topbar search + floating SahAI FAB/panel
   Inline analytics AI card embedded in Analytics > Charts tab
   ============================================================ */

/* ── Topbar inline search ── */
.topbar-search-wrap {
  position: relative; flex: 1; max-width: 480px;
  display: flex; align-items: center;
}
.topbar-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--stone); pointer-events: none;
}
.topbar-search-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  font-size: 13px; font-family: inherit; color: var(--ink);
  outline: none; transition: border-color 0.15s, background 0.15s;
}
.topbar-search-input::placeholder { color: var(--stone); }
.topbar-search-input:focus {
  border-color: var(--amethyst);
  background: var(--paper);
}
.topbar-search-results {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(44,31,69,0.12);
  padding: 10px 12px;
  max-height: 440px; overflow-y: auto;
  z-index: 200;
}
.topbar-search-results.is-open { display: block; }
.ai-search-understood { font-size: 11px; color: var(--amethyst); margin-bottom: 10px; font-weight: 500; }
.ai-search-hint, .ai-search-empty { font-size: 13px; color: var(--stone); padding: 8px 0; }
.ai-result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.1s; margin-bottom: 2px;
}
.ai-result-row:hover { background: var(--mist); }
.ai-result-type {
  font-size: 10px; font-weight: 600; color: var(--amethyst);
  background: var(--mist); border-radius: 4px; padding: 2px 7px;
  white-space: nowrap; flex-shrink: 0;
}
.ai-result-body { flex: 1; min-width: 0; }
.ai-result-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.ai-result-sub   { font-size: 11px; color: var(--stone); margin-top: 1px; }
.ai-result-why   { font-size: 11px; color: var(--amethyst); white-space: nowrap; flex-shrink: 0; }
.ai-thinking-row { display: flex; align-items: center; gap: 8px; color: var(--stone); font-size: 13px; padding: 6px 0; }

/* ── SahAI FAB ── */
.sahai-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 900;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--midnight); border: none; cursor: pointer;
  box-shadow: 0 4px 18px rgba(44,31,69,0.42);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sahai-fab svg { width: 22px; height: 22px; }
.sahai-fab-name {
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
  color: #C4A8E8; line-height: 1;
}
.sahai-fab:hover { transform: scale(1.07); box-shadow: 0 7px 24px rgba(44,31,69,0.52); }

/* Briefing cards — rendered as the first bot bubble when SahAI
   opens on an entity / feature page. Structured rows so users can
   scan before asking follow-up questions. */
.sahai-brief {
  /* Briefing reads as conversational opener, not a card. No
     background, no border, no rounded box — plain text styled like
     the rest of the assistant's voice. Padding stays so the lightning-
     bolt avatar to the left doesn't crowd the text. */
  background: transparent;
  border: none;
  padding: 4px 2px 4px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
}
.sahai-brief .sb-title {
  font-size: 13px; font-weight: 700; color: var(--aubergine);
}
.sahai-brief .sb-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--stone); font-weight: 500; }
.sahai-brief .sb-sub {
  font-size: 11px; color: var(--stone); margin-top: 2px; margin-bottom: 10px;
}
.sahai-brief .sb-row {
  display: flex; gap: 8px; padding: 4px 0;
  border-top: 1px dashed var(--border-soft);
}
.sahai-brief .sb-row:first-of-type { border-top: none; }
.sahai-brief .sb-k { min-width: 92px; flex-shrink: 0; font-weight: 600; color: var(--amethyst); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding-top: 1px; }
.sahai-brief .sb-v { flex: 1; min-width: 0; word-break: break-word; }
.sahai-brief .sb-green { color: var(--green); font-weight: 600; }
.sahai-brief .sb-red   { color: var(--coral); font-weight: 600; }
.sahai-brief .sb-amber { color: #8B6A1E;      font-weight: 600; }
.sahai-brief .sb-stone { color: var(--stone); }
.sahai-brief .sb-next  { color: var(--aubergine); font-weight: 600; }
.sahai-brief .sb-hint {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
  font-size: 11px; color: var(--stone); font-style: italic;
}
.sahai-brief .sb-prose {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
  font-size: 12.5px; line-height: 1.55; color: var(--ink);
}
.sahai-brief .sb-prose strong { color: var(--aubergine); }
.sahai-brief .sb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sahai-brief .sb-chip  {
  background: var(--mist); color: var(--aubergine);
  border: 1px solid var(--lavender);
  padding: 4px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.sahai-brief .sb-chip:hover { background: #E9DEFF; }

/* ── SahAI unified panel ── */
.sahai-panel {
  position: fixed; bottom: 28px; right: 28px; z-index: 900;
  width: 360px; max-height: 580px;
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: 0 8px 36px rgba(44,31,69,0.18);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.sahai-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--midnight); flex-shrink: 0;
}
.sahai-name {
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: 0.3px; flex: 1;
}
.sahai-close {
  color: rgba(255,255,255,0.55); background: none; border: none;
  font-size: 20px; cursor: pointer; line-height: 1; padding: 0;
  transition: color 0.1s;
}
.sahai-close:hover { color: #fff; }
.sahai-newchat {
  color: rgba(255,255,255,0.55); background: none; border: none;
  font-size: 16px; cursor: pointer; line-height: 1; padding: 0;
  margin-left: auto;
  transition: color 0.1s, transform 0.2s;
}
.sahai-newchat:hover { color: #fff; transform: rotate(-90deg); }

/* Thread */
.sahai-thread {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; min-height: 100px;
}
.sahai-intro {
  font-size: 12px; color: var(--stone); line-height: 1.6; padding: 2px 0 4px;
}
.sahai-intro strong { color: var(--aubergine); }

/* Proactive context message */
.sahai-proactive {
  font-size: 11px; color: var(--amethyst); background: var(--mist);
  border-radius: var(--radius-sm); padding: 7px 10px;
  display: flex; gap: 5px; align-items: flex-start; line-height: 1.5;
}
.sahai-proactive strong { color: var(--aubergine); }

/* Search result cards inside thread */
.sahai-search-results { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.sahai-understood { font-size: 10px; color: var(--amethyst); font-weight: 500; margin-bottom: 5px; }
.sahai-result-card {
  display: flex; align-items: center; gap: 8px;
  background: var(--canvas); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.sahai-result-card:hover { border-color: var(--amethyst); background: var(--mist); }
.sahai-rc-type {
  font-size: 9px; font-weight: 700; color: var(--amethyst);
  background: var(--mist); border-radius: 3px; padding: 2px 5px;
  white-space: nowrap; flex-shrink: 0;
}
.sahai-rc-body { flex: 1; min-width: 0; }
.sahai-rc-label { font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sahai-rc-sub   { font-size: 10px; color: var(--stone); margin-top: 1px; }
.sahai-rc-open  { font-size: 11px; color: var(--amethyst); white-space: nowrap; flex-shrink: 0; }

/* Input row */
.sahai-input-row {
  display: flex; gap: 6px; padding: 8px 10px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.sahai-input {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 13px; font-family: inherit;
  outline: none; color: var(--ink); background: var(--canvas);
}
.sahai-input:focus { border-color: var(--amethyst); }
.sahai-input::placeholder { color: #b3b1ab; opacity: 1; }
.sahai-send {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--midnight); color: #C4A8E8; border: none;
  font-size: 15px; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center; transition: background 0.1s;
}
.sahai-send:hover { background: var(--aubergine); }

/* ── Chat bubbles (shared) ── */
/* User messages get a lavender-tinted bubble so they stand out as
   "what I said". Assistant messages render as plain text — no
   background, no border — keeping SahAI's voice as the unstyled
   default and only the user's turns visually grouped. */
.ai-bubble { display: flex; gap: 6px; align-items: flex-start; }
.ai-bubble-user { flex-direction: row-reverse; }
.ai-bubble-user .ai-btext {
  background: var(--mist); color: var(--ink);
  border-radius: 12px 12px 2px 12px;
}
.ai-bubble-assistant .ai-btext {
  background: transparent; color: var(--ink);
  padding: 4px 2px 4px 0;
}
.ai-btext  { font-size: 12px; line-height: 1.55; padding: 8px 11px; max-width: 90%; }
.ai-bsym   { color: var(--amethyst); margin-top: 6px; flex-shrink: 0; display: inline-flex; }

/* ── Read-only bar ── */
.ai-readonly-bar {
  font-size: 10px; color: var(--stone); text-align: center;
  padding: 5px 10px; border-top: 1px solid var(--border-soft);
  background: var(--canvas); flex-shrink: 0; letter-spacing: 0.2px;
}

/* ============================================================
   Phase 1 — StandardResponse rendering.
   Bubble layout: [low-conf banner] · answer · basis chips ·
   action buttons · meta line.
   ============================================================ */

.sahai-structured { display: flex; flex-direction: column; gap: 8px; }
.sahai-answer     { font-size: 12px; line-height: 1.55; }

/* Low-confidence banner — shown when basis is empty. */
.sahai-lowconf {
  font-size: 11px; color: #8B6A1E; background: #FFF8E7;
  border: 1px solid #E5D28A; border-radius: 6px;
  padding: 6px 10px; display: flex; align-items: center; gap: 6px;
  font-weight: 500;
}

/* Citation chips (basis row). Tones reflect kind: policy / product /
   data / computation / rbi_circular. Hover reveals snippet via title. */
.sahai-basis-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sahai-basis {
  font-size: 10px; font-weight: 600; padding: 3px 8px;
  border-radius: 10px; cursor: help;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
}
.sahai-basis-policy   { background: #EDE3FA; color: var(--aubergine); border-color: var(--lavender); }
.sahai-basis-product  { background: #E0F0E6; color: var(--green);    border-color: #A6D8B2; }
.sahai-basis-data     { background: var(--mist); color: var(--ink);  border-color: var(--border-soft); }
.sahai-basis-compute  { background: #E8F0FA; color: #2C5282;          border-color: #A8C5E5; }
.sahai-basis-rbi      { background: #FBE9E7; color: var(--coral);    border-color: #F0B8B2; }

/* Phase 3 — clickable citation chips (policy + RBI). The button reset
   keeps the chip looking like a chip but with a subtle hover state. */
.sahai-basis-clickable {
  font-family: inherit; cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.sahai-basis-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(44,31,69,0.14);
}
.sahai-basis-clickable::after {
  content: ' ↗';
  font-size: 9px; opacity: 0.7;
}

/* ============================================================
   Phase 3 — Citation slide-out viewer.
   Right-side slide-in panel showing the cited chunk text + source.
   ============================================================ */
.sahai-citation-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(44,31,69,0.30);
  display: flex; justify-content: flex-end;
}
.sahai-citation-panel {
  width: 100%; max-width: 460px;
  background: var(--paper);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(44,31,69,0.20);
  animation: sahai-citation-slide 0.18s ease-out;
}
@keyframes sahai-citation-slide {
  from { transform: translateX(40px); opacity: 0.4; }
  to   { transform: translateX(0);     opacity: 1;   }
}
.sahai-citation-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--midnight); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  flex-shrink: 0;
}
.sahai-citation-hdr svg { color: var(--lavender); }
.sahai-citation-hdr .sahai-close {
  margin-left: auto; color: rgba(255,255,255,0.55); background: none; border: none;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.sahai-citation-hdr .sahai-close:hover { color: #fff; }
.sahai-citation-body {
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; flex: 1; min-height: 0;
}
.sahai-citation-label {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45;
}
.sahai-citation-source {
  font-size: 11px; color: var(--stone);
  padding-bottom: 10px; border-bottom: 1px solid var(--border-soft);
}
.sahai-citation-source code { background: var(--mist); padding: 1px 6px; border-radius: 4px; }
.sahai-citation-snippet {
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 13px; color: var(--ink); line-height: 1.6;
  white-space: pre-wrap;
}
.sahai-citation-actions {
  display: flex; gap: 8px; align-items: center;
  padding-top: 4px;
}

/* Action buttons — chips with bolt; greyed when blocked. */
.sahai-actions-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sahai-action {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--midnight); color: #fff; border: none;
  padding: 5px 11px; border-radius: 14px;
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.1s;
}
.sahai-action:hover { background: var(--aubergine); }
.sahai-action svg   { color: var(--lavender); }
.sahai-action-blocked {
  background: var(--mist); color: var(--stone); cursor: not-allowed;
}
.sahai-action-blocked svg { color: var(--stone); }

/* Meta line — below actions. Small, muted; agent · model · ms. */
.sahai-meta {
  font-size: 9px; color: var(--stone); letter-spacing: 0.3px;
  text-transform: uppercase; font-weight: 600; margin-top: 2px;
}

/* ============================================================
   Phase 1 — Action confirm modal.
   Backdrop + centred card. Driven by State.ui.aiActionConfirm.
   ============================================================ */
.sahai-confirm-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(44,31,69,0.45);
  display: grid; place-items: center;
  padding: 16px;
}
.sahai-confirm-modal {
  background: var(--paper); border-radius: var(--radius-lg);
  width: 100%; max-width: 460px;
  max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(44,31,69,0.32);
  border: 1px solid var(--border);
}
.sahai-confirm-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--midnight); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
}
.sahai-confirm-hdr svg { color: var(--lavender); }
.sahai-confirm-hdr .sahai-close {
  margin-left: auto; color: rgba(255,255,255,0.55); background: none; border: none;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.sahai-confirm-hdr .sahai-close:hover { color: #fff; }

.sahai-confirm-body {
  padding: 16px; overflow-y: auto; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.sahai-confirm-action { display: flex; flex-direction: column; gap: 4px; }
.sahai-confirm-kind {
  font-size: 10px; color: var(--amethyst); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.sahai-confirm-label {
  font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.4;
}

.sahai-confirm-section { display: flex; flex-direction: column; gap: 6px; }
.sahai-confirm-section-h {
  font-size: 10px; color: var(--stone); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.sahai-confirm-conseq {
  font-size: 12px; color: var(--ink); line-height: 1.55;
  background: var(--canvas); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 8px 11px;
}
.sahai-confirm-edit {
  width: 100%; min-height: 100px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px; font-family: inherit;
  color: var(--ink); background: var(--canvas); outline: none;
  box-sizing: border-box;
}
.sahai-confirm-edit:focus { border-color: var(--amethyst); }

.sahai-confirm-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--canvas);
}

/* ── Thinking dots ── */
.ai-dots { display: inline-flex; gap: 4px; align-items: center; }
.ai-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--amethyst); display: inline-block;
  animation: sahai-bounce 1.2s infinite ease-in-out;
}
.ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sahai-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1;   }
}

/* ── Analytics AI inline card ── */
.aai-panel {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.aai-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--midnight); flex-shrink: 0;
}
.aai-title { font-size: 14px; font-weight: 700; color: #fff; }
.aai-sub   { font-size: 11px; color: rgba(255,255,255,0.5); margin-left: auto; }
.aai-body  {
  padding: 14px 16px; max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.aai-loading {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--stone); padding: 8px 0;
}
.aai-empty { font-size: 13px; color: var(--stone); padding: 8px 0; }

/* Insights narrative headline */
.aai-headline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--border-soft);
  margin-bottom: 2px;
}

/* Individual insight cards */
.aai-card {
  border-left: 3px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--canvas); padding: 8px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.aai-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.aai-card-body  { font-size: 12px; color: var(--ink); line-height: 1.55; }

/* Follow-up chat messages within analytics AI */
.aai-user-msg {
  background: var(--aubergine); color: #fff;
  font-size: 12px; padding: 7px 11px;
  border-radius: 12px 12px 2px 12px;
  align-self: flex-end; max-width: 85%;
}
.aai-assistant-msg {
  background: var(--mist); color: var(--ink);
  font-size: 12px; padding: 8px 11px;
  border-radius: 2px 12px 12px 12px;
  max-width: 95%; line-height: 1.55;
  display: flex; align-items: flex-start; gap: 4px;
}

/* Analytics AI input */
.aai-input-row {
  display: flex; gap: 6px; padding: 8px 12px;
  border-top: 1px solid var(--border); flex-shrink: 0; background: var(--canvas);
}
.aai-input {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 13px; font-family: inherit;
  outline: none; color: var(--ink); background: var(--paper);
}
.aai-input:focus { border-color: var(--amethyst); }
.aai-send {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--midnight); color: #C4A8E8; border: none;
  font-size: 14px; cursor: pointer; display: grid; place-items: center;
  transition: background 0.1s;
}
.aai-send:hover { background: var(--aubergine); }

/* ── SahAI split tile on Analytics tab ── */
.sahai-split-tile {
  display: grid; grid-template-columns: minmax(320px, 38%) 1fr;
  gap: 0; background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 18px;
  min-height: 420px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(61,44,94,0.04);
}
.sahai-split-ask {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border); min-height: 0;
}
.sahai-split-ask .aai-hdr { padding: 10px 14px; }
.sahai-split-ask .aai-body { max-height: none; flex: 1; min-height: 0; padding: 10px 14px; }
.sahai-split-display {
  min-height: 0; overflow: hidden; background: var(--canvas);
  display: flex; flex-direction: column;
}
.sahai-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border-soft);
  background: var(--paper); flex-shrink: 0;
}
.sahai-chip {
  background: var(--mist); color: var(--aubergine); border: none;
  border-radius: 12px; padding: 4px 10px; font-size: 11px;
  cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s;
}
.sahai-chip:hover { background: var(--lavender); color: #fff; }

/* Display-pane header — mirrors .aai-hdr on the ask side so the two panes
   read as a single framed tile instead of a disjointed right column. */
.sahai-display-hdr {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px; background: var(--midnight);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.sahai-display-hdr::before {
  content: ''; width: 14px; height: 14px; margin-right: 4px;
  background-color: var(--amethyst);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='24,5 12,23 21,23 16,35 28,17 19,17'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='24,5 12,23 21,23 16,35 28,17 19,17'/></svg>") center/contain no-repeat;
  display: inline-block;
}
.sahai-display-hdr-label {
  font-size: 13px; font-weight: 700; color: #fff;
}
.sahai-display-hdr-sub {
  font-size: 11px; color: rgba(255,255,255,0.5); margin-left: auto;
}
.sahai-display-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 14px; overflow: hidden;
  border: 1px solid var(--border-soft); border-top: none;
  margin: 0 10px 10px; border-radius: 0 0 var(--radius) var(--radius);
  background: var(--paper);
}
.sahai-display-placeholder {
  display: grid; place-items: center; flex: 1; min-height: 200px;
  color: var(--stone); font-size: 13px; text-align: center; padding: 24px;
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--canvas);
}
.sahai-display-placeholder-sym {
  color: var(--amethyst); opacity: 0.45; margin-bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sahai-display-chart { flex: 1; position: relative; min-height: 240px; }
.sahai-display-table { flex: 1; overflow: auto; min-height: 0; }
.sahai-display-callout { flex: 1; display: flex; flex-direction: column; }

/* ── Analytics toolbar + KPI strip ── */
.ana-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 14px;
}
.ana-toolbar-label {
  font-size: 11px; font-weight: 600; color: var(--stone);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.ana-chip {
  background: var(--mist); color: var(--aubergine); border: 1px solid transparent;
  border-radius: 14px; padding: 3px 11px; font-size: 11px;
  cursor: pointer; font-family: inherit;
}
.ana-chip.active { background: var(--aubergine); color: #fff; }
.ana-chip:hover:not(.active) { border-color: var(--amethyst); }

.ana-kpi-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px;
}
@media (max-width: 1100px) { .ana-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
.ana-kpi-card {
  background: var(--paper); border: 1px solid var(--border);
  border-left: 3px solid var(--aubergine); border-radius: var(--radius);
  padding: 11px 12px;
}
.ana-kpi-label { font-size: 10px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.ana-kpi-value { font-size: 18px; font-weight: 700; color: var(--aubergine); margin-top: 4px; }
.ana-kpi-sub   { font-size: 10px; color: var(--stone); margin-top: 2px; }

.ana-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--stone); letter-spacing: 0.5px; margin: 6px 2px 8px;
}
.ana-chart-grid { display: grid; gap: 14px; margin-bottom: 18px; }
.ana-chart-grid.g-3 { grid-template-columns: repeat(3, 1fr); }
.ana-chart-grid.g-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .ana-chart-grid.g-3, .ana-chart-grid.g-2 { grid-template-columns: 1fr; } }
.ana-chart-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column;
}
.ana-chart-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ana-chart-title { font-size: 12px; font-weight: 600; color: var(--aubergine); }
.ana-chart-body { height: 220px; position: relative; }
.ana-chart-body.tall { height: 260px; }