/* ═══════════════════════════════════════════════════════════════════
   INTELLIGENCE BRAIN — NEURAL NEXUS v2.0
   "World-First AI Command Centre" aesthetic.
   All selectors scoped to #tab-brain — zero bleed into other tabs.
   ═══════════════════════════════════════════════════════════════════ */

/* ── TAB AMBIENT FIELD ───────────────────────────────────────────── */
#tab-brain {
  background:
    radial-gradient(ellipse 80% 50% at 8%  5%,  rgba(0,240,255,.04)  0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 92% 85%, rgba(168,85,247,.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 50% 50%, rgba(16,255,176,.02) 0%, transparent 60%);
  position: relative;
}

/* Subtle dot-grid texture */
#tab-brain::before {
  content: '';
  position: absolute;
  inset: -28px -28px 0 -28px;
  background-image: radial-gradient(circle, rgba(0,240,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* All direct children above the dot grid */
#tab-brain .ph,
#tab-brain .brain-neural-status,
#tab-brain .brain-grid,
#tab-brain > div {
  position: relative;
  z-index: 1;
}

/* ── HERO HEADER ─────────────────────────────────────────────────── */
#tab-brain .ph { padding-bottom: 14px; }

#tab-brain .pt {
  background: linear-gradient(135deg, #e8f4ff 0%, #00f0ff 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
#tab-brain .pt em {
  background: linear-gradient(135deg, #00f0ff, #10ffb0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#tab-brain .pd { color: var(--text-3); font-size: 13px; max-width: 640px; }

/* ── NEURAL STATUS BAR ───────────────────────────────────────────── */
#tab-brain .brain-neural-status {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(0,240,255,.14);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: .07em;
  box-shadow: 0 2px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
  position: relative;
  flex-wrap: wrap;
}
#tab-brain .brain-neural-status::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #00f0ff, #a855f7);
}
#tab-brain .bns-segment {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px 9px 18px;
  border-right: 1px solid rgba(255,255,255,.04);
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
#tab-brain .bns-segment:first-child { padding-left: 22px; }
#tab-brain .bns-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10ffb0; box-shadow: 0 0 8px #10ffb0;
  animation: bnsPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bnsPulse {
  0%,100% { opacity:1;  box-shadow: 0 0  6px #10ffb0; }
  50%      { opacity:.5; box-shadow: 0 0 14px #10ffb0; }
}
#tab-brain .bns-model { font-weight:700; color:#00f0ff; letter-spacing:.14em; }
#tab-brain .bns-engine {
  margin-left: auto;
  padding: 9px 16px;
  color: var(--text-4);
  font-size: 8.5px;
  letter-spacing: .08em;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,.04);
}
#tab-brain .bns-engine-name { color: var(--aurora-gold); font-weight:700; }

/* ── CHAT PANEL ──────────────────────────────────────────────────── */
#tab-brain .chat-wrap {
  background: rgba(3,6,18,.88) !important;
  border: 1px solid rgba(0,240,255,.18) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(0,240,255,.04),
    0 0 40px rgba(0,240,255,.06),
    0 16px 48px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── CHAT HEADER BAR ─────────────────────────────────────────────── */
#tab-brain .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,240,255,.08);
  background: rgba(0,0,0,.3);
  flex-shrink: 0;
  border-radius: 20px 20px 0 0;
}
#tab-brain .chat-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: .18em;
  color: #00f0ff;
  font-weight: 700;
  text-transform: uppercase;
}
#tab-brain .chat-header-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10ffb0; box-shadow: 0 0 8px #10ffb0;
  animation: bnsPulse 2.4s ease-in-out infinite;
}
#tab-brain .chat-header-model {
  font-family: var(--fm);
  font-size: 8px;
  color: var(--text-4);
  letter-spacing: .06em;
}

/* ── MESSAGES ────────────────────────────────────────────────────── */
#tab-brain .msg-av {
  width: 32px !important; height: 32px !important;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c9b8, #007fa3) !important;
  box-shadow: 0 0 16px rgba(0,201,184,.4), 0 0 4px rgba(0,201,184,.2) !important;
  font-size: 9px !important; font-weight: 800 !important;
  letter-spacing: -.01em; color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
#tab-brain .msg.user .msg-av {
  background: linear-gradient(135deg, #f7ce5b, #e89800) !important;
  box-shadow: 0 0 16px rgba(247,206,91,.4) !important;
}
#tab-brain .msg.ai .msg-body {
  background: rgba(0,240,255,.03) !important;
  border: 1px solid rgba(0,240,255,.1) !important;
  border-radius: 4px 18px 18px 18px !important;
}
#tab-brain .msg.user .msg-body {
  background: rgba(247,206,91,.04) !important;
  border: 1px solid rgba(247,206,91,.12) !important;
  border-radius: 18px 4px 18px 18px !important;
}

/* JS-created avatars */
#tab-brain .av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm); font-size: 9px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
#tab-brain .msg.ai  .av { background: linear-gradient(135deg,#00c9b8,#007fa3) !important; box-shadow: 0 0 14px rgba(0,201,184,.35) !important; }
#tab-brain .msg.user .av { background: linear-gradient(135deg,#f7ce5b,#e89800) !important; box-shadow: 0 0 14px rgba(247,206,91,.35) !important; }

/* JS-created bodies */
#tab-brain .msg.ai  .mb { background: rgba(0,240,255,.03); border: 1px solid rgba(0,240,255,.1); border-radius: 4px 18px 18px 18px; padding:10px 13px; font-size:13.5px; line-height:1.7; color:var(--text-1); max-width:78%; word-break:break-word; }
#tab-brain .msg.user .mb { background: rgba(247,206,91,.04); border: 1px solid rgba(247,206,91,.12); border-radius:18px 4px 18px 18px; padding:10px 13px; font-size:13.5px; line-height:1.7; color:var(--text-1); max-width:78%; word-break:break-word; }

/* ── CONFIDENCE BAR ──────────────────────────────────────────────── */
#tab-brain .conf-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 10px;
  background: rgba(0,0,0,.2);
  border-radius: 8px; border: 1px solid rgba(255,255,255,.04);
}
#tab-brain .clbl { font-family:var(--fm); font-size:7.5px; letter-spacing:.14em; color:var(--text-4); text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
#tab-brain .cbar-w { flex:1; height:3px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; }
#tab-brain .cbar-f { height:100%; background:linear-gradient(90deg,#00f0ff,#10ffb0); border-radius:99px; box-shadow:0 0 8px rgba(0,240,255,.5); transition:width .6s ease; }
#tab-brain .cval { font-family:var(--fm); font-size:10px; font-weight:800; flex-shrink:0; }
#tab-brain .cval.gold { color:var(--aurora-gold); }

/* ── INPUT AREA ──────────────────────────────────────────────────── */
#tab-brain .chat-input-box {
  background: rgba(1,3,12,.92) !important;
  border-top: 1px solid rgba(0,240,255,.08) !important;
  padding: 12px !important;
  gap: 10px !important;
}
#tab-brain .chat-input-box textarea {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  color: var(--text-1);
  font-size: 13px; line-height: 1.55;
  padding: 11px 14px;
  transition: border-color .25s, box-shadow .25s;
  outline: none; font-family: inherit; resize: none;
  width: 100%; box-sizing: border-box;
}
#tab-brain .chat-input-box textarea:focus {
  border-color: rgba(0,240,255,.32);
  box-shadow: 0 0 0 3px rgba(0,240,255,.07), inset 0 0 30px rgba(0,240,255,.015);
}
#tab-brain .chat-input-box textarea::placeholder {
  color: var(--text-4); font-style: italic; font-size: 12px;
}

/* ── SEND BUTTON ─────────────────────────────────────────────────── */
#tab-brain .bsend {
  background: linear-gradient(135deg, #00d8f0 0%, #0060ff 100%);
  border: none; border-radius: 11px; color: #fff;
  font-family: var(--fm); font-size: 11px; font-weight: 800;
  letter-spacing: .12em; padding: 9px 22px; cursor: pointer;
  transition: all .22s cubic-bezier(.23,1,.32,1);
  box-shadow: 0 4px 20px rgba(0,150,230,.3), 0 0 0 1px rgba(0,200,255,.15);
  white-space: nowrap; flex-shrink: 0; margin-left: auto;
}
#tab-brain .bsend:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0,150,230,.5), 0 0 20px rgba(0,200,255,.2);
  filter: brightness(1.06);
}
#tab-brain .bsend:active { transform: translateY(0) scale(.98); }

/* ── TOGGLE LABELS ───────────────────────────────────────────────── */
#tab-brain .tog {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 6px 10px;
  font-family: var(--fm); font-size: 10px; color: var(--text-4);
  cursor: pointer; transition: all .18s; user-select: none; letter-spacing: .04em;
}
#tab-brain .tog input { display: none; }
#tab-brain .tog:hover { background: rgba(255,255,255,.06); color: var(--text-2); border-color: rgba(255,255,255,.12); }
#tab-brain .tog:has(input:checked) {
  background: rgba(0,240,255,.08); border-color: rgba(0,240,255,.28);
  color: #00f0ff; box-shadow: 0 0 12px rgba(0,240,255,.1);
}
/* JS-driven fallback for the rule above — :has(input:checked) reliably
   fails to trigger its restyle on this page (confirmed: the checkbox
   itself toggles correctly, the CSS just never repaints), so nexus-core.js
   also mirrors the checked state onto this class. Same visual result via
   whichever mechanism actually fires. */
#tab-brain .tog.tog-checked {
  background: rgba(0,240,255,.08); border-color: rgba(0,240,255,.28);
  color: #00f0ff; box-shadow: 0 0 12px rgba(0,240,255,.1);
}

/* ════════════════════════════════════════════════════════════════════
   WORLD-FIRST FEATURE GRID — 6 accent-coded full-width cards
   Each card has its own identity: color, glow, shimmer, staggered entry
   ════════════════════════════════════════════════════════════════════ */

/* Per-card accent palette */
#tab-brain .brain-side > .sc:nth-child(1) { --ca:#f7ce5b; --ca-r:247; --ca-g:206; --ca-b:91;  } /* ⚡ Quick Fire — gold    */
#tab-brain .brain-side > .sc:nth-child(2) { --ca:#00f0ff; --ca-r:0;   --ca-g:240; --ca-b:255; } /* 🗺 Skill Map  — cyan    */
#tab-brain .brain-side > .sc:nth-child(3) { --ca:#a855f7; --ca-r:168; --ca-g:85;  --ca-b:247; } /* 📊 Session    — violet  */
#tab-brain .brain-side > .sc:nth-child(4) { --ca:#818cf8; --ca-r:129; --ca-g:140; --ca-b:248; } /* 🧠 Memory     — indigo  */
#tab-brain .brain-side > .sc:nth-child(5) { --ca:#10ffb0; --ca-r:16;  --ca-g:255; --ca-b:176; } /* 🔌 MCP Intel  — matrix  */
#tab-brain .brain-side > .sc:nth-child(6) { --ca:#38bdf8; --ca-r:56;  --ca-g:189; --ca-b:248; } /* 🌍 Translate  — sky     */

/* ── BASE CARD ────────────────────────────────────────────────────── */
#tab-brain .brain-side > .sc {
  position: relative;
  background: rgba(8,11,26,.96) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-top: 2px solid var(--ca) !important;
  border-radius: 18px !important;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 0 rgba(var(--ca-r),var(--ca-g),var(--ca-b),.0),
    0 4px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: transform .22s cubic-bezier(.23,1,.32,1),
              box-shadow .22s cubic-bezier(.23,1,.32,1),
              border-color .22s ease;
  animation: fcardIn .5s cubic-bezier(.23,1,.32,1) both;
}

/* Staggered entry — each card slides in 60ms after the last */
#tab-brain .brain-side > .sc:nth-child(1) { animation-delay: .00s; }
#tab-brain .brain-side > .sc:nth-child(2) { animation-delay: .06s; }
#tab-brain .brain-side > .sc:nth-child(3) { animation-delay: .12s; }
#tab-brain .brain-side > .sc:nth-child(4) { animation-delay: .18s; }
#tab-brain .brain-side > .sc:nth-child(5) { animation-delay: .24s; }
#tab-brain .brain-side > .sc:nth-child(6) { animation-delay: .30s; }

@keyframes fcardIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Ambient radial glow from top (card color leaking in) */
#tab-brain .brain-side > .sc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 80px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(var(--ca-r),var(--ca-g),var(--ca-b),.12) 0%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Hover — lift, stronger glow ring */
#tab-brain .brain-side > .sc:hover {
  transform: translateY(-4px);
  border-color: var(--ca) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ca-r),var(--ca-g),var(--ca-b),.25),
    0 12px 40px rgba(0,0,0,.5),
    0 0 32px rgba(var(--ca-r),var(--ca-g),var(--ca-b),.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* All content above the ::before layer */
#tab-brain .brain-side > .sc > * { position: relative; z-index: 1; }

/* ── CARD TITLE ────────────────────────────────────────────────────── */
#tab-brain .sc-t {
  background: rgba(0,0,0,.32);
  border-bottom: 1px solid rgba(var(--ca-r),var(--ca-g),var(--ca-b),.18);
  padding: 10px 14px;
  margin: -14px -14px 14px -14px;
  font-family: var(--fm); font-size: 8.5px; letter-spacing: .18em;
  color: var(--ca); font-weight: 700;
  display: flex; align-items: center; gap: 8px; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(var(--ca-r),var(--ca-g),var(--ca-b),.5);
}

/* ── QUICK FIRE ──────────────────────────────────────────────────── */
#tab-brain .qlist {
  padding: 0; display: flex; flex-direction: column; gap: 5px;
  max-height: 220px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(247,206,91,.3) transparent;
}
#tab-brain .qlist::-webkit-scrollbar { width: 3px; }
#tab-brain .qlist::-webkit-scrollbar-thumb { background: rgba(247,206,91,.3); border-radius: 2px; }
#tab-brain .qq {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: 8px 11px;
  font-size: 10.5px; color: #94a3c8; cursor: pointer;
  transition: all .18s; text-align: left; width: 100%; display: block;
  white-space: normal !important; word-break: break-word; line-height: 1.45;
  overflow: visible !important; text-overflow: unset !important;
}
#tab-brain .qq:hover {
  background: rgba(247,206,91,.07); border-color: rgba(247,206,91,.28);
  color: #f7e8a0; transform: translateX(3px);
}

/* ── SKILL MAP ───────────────────────────────────────────────────── */
#tab-brain .brain-side .sc .fg { padding: 0; margin-bottom: 10px; }
#tab-brain .brain-side .sc .fg label {
  font-family: var(--fm); font-size: 8px; letter-spacing: .1em;
  color: var(--ca); display: block; margin-bottom: 5px; text-transform: uppercase;
  opacity: .75;
}
#tab-brain .brain-side .sc .btn-p {
  margin: 0; width: 100%; font-size: 10px; padding: 9px;
}

/* ── SESSION STATS ───────────────────────────────────────────────── */
#tab-brain .ss-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 1px; background: rgba(168,85,247,.12);
  border-radius: 10px; overflow: hidden; margin-top: 4px;
}
#tab-brain .ssv {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 8px; gap: 4px; background: rgba(8,11,26,.95);
}
#tab-brain .ssv span {
  font-family: var(--fh, 'Space Grotesk', sans-serif);
  font-size: 1.5rem; font-weight: 800; color: #a855f7;
  line-height: 1; letter-spacing: -.02em;
}
#tab-brain .ssv label {
  font-family: var(--fm); font-size: 7.5px; letter-spacing: .12em;
  color: var(--text-3); text-transform: uppercase; margin: 0; padding: 0;
}

/* ── BRAIN PULSE PANEL ───────────────────────────────────────────── */
#tab-brain .brain-pulse-panel { font-size: 11px; padding: 0 12px 10px; }

/* ── API STATUS BAR ──────────────────────────────────────────────── */
#tab-brain #search-api-status-bar {
  background: rgba(0,240,255,.03) !important;
  border: 1px solid rgba(0,240,255,.1) !important;
  border-radius: 12px; padding: 10px 14px !important;
}

#tab-brain .search-api-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fm); font-size: 9px; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); color: var(--text-3); transition: all .3s;
}
#tab-brain .search-api-badge.ok   { background:rgba(16,255,176,.06); border-color:rgba(16,255,176,.2); color:#10ffb0; }
#tab-brain .search-api-badge.fail { background:rgba(255,51,102,.06); border-color:rgba(255,51,102,.2); color:#ff6b75; }
#tab-brain .search-api-badge.loading { animation: badgeLoading 1.5s ease-in-out infinite; }
@keyframes badgeLoading { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Live API card section */
#tab-brain > div > .g2 .card,
#tab-brain > div > .card {
  background: rgba(5,8,22,.82);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  transition: border-color .25s, box-shadow .25s;
  backdrop-filter: blur(12px);
}
#tab-brain > div > .g2 .card:hover,
#tab-brain > div > .card:hover {
  border-color: rgba(0,240,255,.14);
  box-shadow: 0 4px 28px rgba(0,240,255,.06);
}

/* ── LIVE DOTS ───────────────────────────────────────────────────── */
#tab-brain .live-dot,
#tab-brain #mcpStatusDot {
  animation: bnsPulse 2.4s ease-in-out infinite !important;
}

/* ── ENTRY ANIMATION ─────────────────────────────────────────────── */
#tab-brain .brain-grid { animation: brainIn .45s cubic-bezier(.23,1,.32,1) both; }
@keyframes brainIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ── CHAT MESSAGE SCROLLBAR ──────────────────────────────────────── */
/* Widened + darkened in fixes.css so the box visibly reads as scrollable
   instead of looking stuck — kept in sync here since this file loads last. */
#tab-brain .chat-msgs {
  scrollbar-width: auto;
  scrollbar-color: rgba(0,240,255,.4) transparent;
}
#tab-brain .chat-msgs::-webkit-scrollbar { width: 8px; }
#tab-brain .chat-msgs::-webkit-scrollbar-track { background: transparent; }
#tab-brain .chat-msgs::-webkit-scrollbar-thumb { background: rgba(0,240,255,.4); border-radius: 99px; }

/* ════════════════════════════════════════════════════════════════════
   WORLD-FIRST COMMAND DECK — Save Insight · Copy · Follow Up
   Three distinct command pods with particle effects, ripple, AI chips
   ════════════════════════════════════════════════════════════════════ */

#tab-brain .brain-action-bar {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}

/* ── BASE COMMAND POD ── */
.bab-cmd {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  font-family: inherit;
  transition: transform .22s cubic-bezier(.23,1,.32,1),
              box-shadow .22s cubic-bezier(.23,1,.32,1),
              background .18s, border-color .18s;
  overflow: hidden;
  flex: 1;
  min-width: 120px;
  text-align: left;
}
.bab-cmd:hover { transform: translateY(-3px); }
.bab-cmd:active { transform: translateY(-1px) scale(.98); }

.bab-ico {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.23,1,.32,1);
}
.bab-cmd:hover .bab-ico { transform: scale(1.15); }

.bab-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.bab-label {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bab-sub {
  font-family: var(--fm);
  font-size: 9px;
  opacity: .65;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ── 💾 SAVE INSIGHT — gold ── */
.bab-save {
  background: rgba(247,206,91,.08);
  border-color: rgba(247,206,91,.24);
  color: #c8a000;
}
.bab-save:hover {
  background: rgba(247,206,91,.15);
  border-color: rgba(247,206,91,.52);
  color: #f7ce5b;
  box-shadow: 0 6px 22px rgba(247,206,91,.18), 0 0 0 1px rgba(247,206,91,.1);
}
.bab-save.bab-saving {
  animation: babPulseGold 1s ease-in-out infinite;
  pointer-events: none;
}
.bab-save.bab-saved {
  background: rgba(16,255,176,.08) !important;
  border-color: rgba(16,255,176,.38) !important;
  color: #10ffb0 !important;
  pointer-events: none;
}
@keyframes babPulseGold {
  0%,100% { box-shadow: 0 0 0 0 rgba(247,206,91,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(247,206,91,.28); }
}

/* Particle burst — 6 dots fly outward on save */
.bab-burst {
  position: absolute; inset: 0; pointer-events: none; overflow: visible;
}
.bab-burst.active::before,
.bab-burst.active::after {
  content: '';
  position: absolute;
  top: 50%; left: 30%;
  width: 5px; height: 5px;
  border-radius: 50%;
  animation: babParticle .7s cubic-bezier(.23,1,.32,1) forwards;
}
.bab-burst.active::before { background: #f7ce5b; }
.bab-burst.active::after  { background: #10ffb0; animation-name: babParticle2; animation-delay: .06s; }
@keyframes babParticle  {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(-28px,-36px) scale(0); }
}
@keyframes babParticle2 {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(36px,-24px) scale(0); }
}

/* ── 📋 COPY — cyan ── */
.bab-copy {
  background: rgba(0,240,255,.06);
  border-color: rgba(0,240,255,.18);
  color: #00bed0;
}
.bab-copy:hover {
  background: rgba(0,240,255,.12);
  border-color: rgba(0,240,255,.42);
  color: #00f0ff;
  box-shadow: 0 6px 22px rgba(0,240,255,.12);
}
.bab-copy.bab-copied {
  background: rgba(16,255,176,.08) !important;
  border-color: rgba(16,255,176,.38) !important;
  color: #10ffb0 !important;
}

/* Copy ripple */
.bab-ripple {
  position: absolute; inset: 0; pointer-events: none;
}
.bab-ripple.active::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(0,240,255,.25);
  transform: translate(-50%,-50%);
  animation: babRipple .55s ease-out forwards;
}
@keyframes babRipple {
  0%   { width: 0;     height: 0;     opacity: 1; }
  100% { width: 200px; height: 200px; opacity: 0; }
}

/* ── 💬 FOLLOW UP — violet ── */
.bab-fu {
  background: rgba(168,85,247,.08);
  border-color: rgba(168,85,247,.22);
  color: #b57ef7;
}
.bab-fu:hover {
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.48);
  color: #d8abff;
  box-shadow: 0 6px 22px rgba(168,85,247,.16);
}
.bab-fu.open {
  background: rgba(168,85,247,.18) !important;
  border-color: rgba(168,85,247,.55) !important;
  color: #d8abff !important;
  transform: none !important;
}

/* ── AI SUGGESTION CHIP TRAY ── */
.bab-chip-tray {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 0 2px;
}
.bab-chip-tray.open { display: flex; }

.bab-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(168,85,247,.20);
  background: rgba(168,85,247,.05);
  color: var(--text-1);
  font-size: 11.5px;
  line-height: 1.45;
  cursor: pointer;
  transition: all .18s cubic-bezier(.23,1,.32,1);
  animation: babChipIn .32s cubic-bezier(.23,1,.32,1) both;
  opacity: 0;
}
.bab-chip:hover {
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.45);
  color: #d8abff;
  transform: translateX(5px);
}
@keyframes babChipIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Mobile — stack pods */
@media (max-width: 520px) {
  #tab-brain .brain-action-bar { flex-direction: column; gap: 6px; }
  .bab-cmd { flex: none; width: 100%; min-width: 0; }
}

/* ── Brain Memory items redesign ─────────────────────────────── */
#tab-brain .brain-mem-item {
  border: 1px solid rgba(139,92,246,.20);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 7px;
  background: rgba(139,92,246,.05);
  transition: border-color .18s, background .18s;
}
#tab-brain .brain-mem-item:hover { border-color: rgba(139,92,246,.40); background: rgba(139,92,246,.10); }
#tab-brain .brain-mem-item.starred { border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.06); }
#tab-brain .brain-mem-q  { font-size: 10px; color: var(--text-3); margin-bottom: 4px; font-style: italic; }
#tab-brain .brain-mem-txt { font-size: 11.5px; color: var(--text-1); line-height: 1.55; }
#tab-brain .brain-mem-meta { display: flex; align-items: center; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
#tab-brain .brain-mem-tag {
  font-size: 9px; padding: 2px 7px; border-radius: 10px;
  background: rgba(99,102,241,.15); color: #818cf8; border: 1px solid rgba(99,102,241,.2);
}
#tab-brain .brain-mem-age { font-size: 9px; color: var(--text-4); margin-left: auto; }
#tab-brain .brain-mem-star,
#tab-brain .brain-mem-del {
  background: none; border: none; cursor: pointer; font-size: 12px;
  padding: 2px 4px; opacity: .6; color: var(--text-2); transition: all .15s;
}
#tab-brain .brain-mem-star:hover { opacity: 1; color: #f59e0b; }
#tab-brain .brain-mem-del:hover  { opacity: 1; color: #ef4444; }

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES — all brain containers flip to white/light
   so dark text stays legible when the theme switcher is on Light
   ════════════════════════════════════════════════════════════════════ */

/* Tab background */
[data-theme="light"] #tab-brain {
  background: #f2f5ff !important;
  background-image: none !important;
}
[data-theme="light"] #tab-brain::before { display: none; }

/* Neural status bar */
[data-theme="light"] #tab-brain .brain-neural-status {
  background: #fff !important;
  border: 1px solid rgba(0,80,200,.12) !important;
  color: #1a2540 !important;
}
[data-theme="light"] #tab-brain .bns-model { color: #0066cc !important; }
[data-theme="light"] #tab-brain .bns-engine-name { color: #b07c00 !important; }
[data-theme="light"] #tab-brain .bns-segment { color: #4a5878; }

/* Chat panel */
[data-theme="light"] #tab-brain .chat-wrap {
  background: #fff !important;
  border: 1px solid rgba(0,20,80,.10) !important;
}
[data-theme="light"] #tab-brain .chat-header {
  background: #f8faff !important;
  border-bottom: 1px solid rgba(0,20,80,.08) !important;
}
[data-theme="light"] #tab-brain .chat-header-title { color: #1a2540 !important; }
[data-theme="light"] #tab-brain .chat-header-model { color: #4a5878 !important; }

/* Message bubbles */
[data-theme="light"] #tab-brain .msg.ai .mb {
  background: #f0f7ff !important;
  border: 1px solid rgba(0,100,200,.12) !important;
  color: #1a2540 !important;
}
[data-theme="light"] #tab-brain .msg.user .mb {
  background: #fff8e6 !important;
  border: 1px solid rgba(180,120,0,.15) !important;
  color: #1a2540 !important;
}

/* Input area */
[data-theme="light"] #tab-brain .chat-input-box {
  background: #f8faff !important;
  border-top: 1px solid rgba(0,20,80,.08) !important;
}
[data-theme="light"] #tab-brain .chat-input-box textarea {
  background: #fff !important;
  border: 1px solid rgba(0,20,80,.14) !important;
  color: #1a2540 !important;
}
[data-theme="light"] #tab-brain .chat-input-box textarea:focus {
  border-color: #1a5fc8 !important;
  box-shadow: 0 0 0 3px rgba(26,95,200,.1) !important;
}
[data-theme="light"] #tab-brain .chat-input-box textarea::placeholder { color: #8a9abc !important; }

/* Toggle labels */
[data-theme="light"] #tab-brain .tog {
  background: #f0f4fc !important;
  border: 1px solid rgba(0,20,80,.12) !important;
  color: #4a5878 !important;
}
[data-theme="light"] #tab-brain .tog:hover { background: #e4ecfa !important; color: #1a2540 !important; }
[data-theme="light"] #tab-brain .tog:has(input:checked) {
  background: rgba(26,95,200,.08) !important;
  border-color: rgba(26,95,200,.3) !important;
  color: #1a5fc8 !important;
}
/* JS-driven fallback — see the dark-theme .tog-checked rule above for why. */
[data-theme="light"] #tab-brain .tog.tog-checked {
  background: rgba(26,95,200,.08) !important;
  border-color: rgba(26,95,200,.3) !important;
  color: #1a5fc8 !important;
}

/* Confidence bar */
[data-theme="light"] #tab-brain .cbar-w { background: rgba(0,20,80,.08) !important; }

/* ── Feature cards — white with accent top border ── */
[data-theme="light"] #tab-brain .brain-side > .sc {
  background: #fff !important;
  border: 1px solid rgba(0,20,80,.10) !important;
  border-top: 2px solid var(--ca) !important;
  box-shadow: 0 2px 12px rgba(0,20,80,.07), 0 0 0 0 transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] #tab-brain .brain-side > .sc::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(var(--ca-r),var(--ca-g),var(--ca-b),.07) 0%,
    transparent 100%) !important;
}
[data-theme="light"] #tab-brain .brain-side > .sc:hover {
  box-shadow:
    0 0 0 1px rgba(var(--ca-r),var(--ca-g),var(--ca-b),.2),
    0 6px 24px rgba(0,20,80,.10) !important;
}

/* Card titles */
[data-theme="light"] #tab-brain .sc-t {
  background: rgba(var(--ca-r),var(--ca-g),var(--ca-b),.06) !important;
  border-bottom: 1px solid rgba(var(--ca-r),var(--ca-g),var(--ca-b),.15) !important;
  color: var(--ca) !important;
  text-shadow: none !important;
}

/* Quick Fire buttons */
[data-theme="light"] #tab-brain .qq {
  background: #f5f8ff !important;
  border: 1px solid rgba(0,20,80,.10) !important;
  color: #2a3a5c !important;
}
[data-theme="light"] #tab-brain .qq:hover {
  background: rgba(247,206,91,.12) !important;
  border-color: rgba(180,130,0,.25) !important;
  color: #7a5700 !important;
}

/* Session stats grid */
[data-theme="light"] #tab-brain .ss-grid {
  background: rgba(168,85,247,.08) !important;
}
[data-theme="light"] #tab-brain .ssv {
  background: #fff !important;
}
[data-theme="light"] #tab-brain .ssv span { color: #7c3aed !important; }
[data-theme="light"] #tab-brain .ssv label { color: #6b7a99 !important; }

/* API status bar */
[data-theme="light"] #tab-brain #search-api-status-bar {
  background: #f0f7ff !important;
  border: 1px solid rgba(0,100,200,.12) !important;
}
[data-theme="light"] #tab-brain .search-api-badge {
  background: #f5f8ff !important;
  border: 1px solid rgba(0,20,80,.10) !important;
  color: #4a5878 !important;
}
[data-theme="light"] #tab-brain .search-api-badge.ok { background:#f0fff8 !important; border-color:rgba(0,160,80,.2) !important; color:#007a3d !important; }
[data-theme="light"] #tab-brain .search-api-badge.fail { background:#fff2f4 !important; border-color:rgba(200,0,40,.15) !important; color:#cc1133 !important; }

/* Live API cards (Tavily / NASA / TripAdvisor / RAG) */
[data-theme="light"] #tab-brain > div > .g2 .card,
[data-theme="light"] #tab-brain > div > .card {
  background: #fff !important;
  border: 1px solid rgba(0,20,80,.10) !important;
  backdrop-filter: none !important;
}
[data-theme="light"] #tab-brain > div > .g2 .card:hover,
[data-theme="light"] #tab-brain > div > .card:hover {
  border-color: rgba(26,95,200,.18) !important;
  box-shadow: 0 4px 20px rgba(26,95,200,.07) !important;
}

/* Command deck — light theme */
[data-theme="light"] #tab-brain .brain-action-bar {
  border-top: 1px solid rgba(0,20,80,.08) !important;
}
[data-theme="light"] .bab-save {
  background: #fffbea !important; border-color: rgba(180,130,0,.28) !important; color: #966e00 !important;
}
[data-theme="light"] .bab-save:hover { background: #fff3c4 !important; color: #7a5500 !important; }
[data-theme="light"] .bab-save.bab-saved { background: #f0fff8 !important; border-color: rgba(0,140,70,.28) !important; color: #007a3d !important; }

[data-theme="light"] .bab-copy {
  background: #f0f9ff !important; border-color: rgba(0,100,180,.20) !important; color: #0066a8 !important;
}
[data-theme="light"] .bab-copy:hover { background: #dbeeff !important; color: #00478a !important; }
[data-theme="light"] .bab-copy.bab-copied { background: #f0fff8 !important; border-color: rgba(0,140,70,.28) !important; color: #007a3d !important; }

[data-theme="light"] .bab-fu {
  background: #faf5ff !important; border-color: rgba(120,60,200,.22) !important; color: #7c3aed !important;
}
[data-theme="light"] .bab-fu:hover  { background: #f0e6ff !important; color: #5b21b6 !important; }
[data-theme="light"] .bab-fu.open   { background: #ede0ff !important; color: #5b21b6 !important; }

[data-theme="light"] .bab-chip {
  background: #faf5ff !important; border-color: rgba(120,60,200,.18) !important; color: #1a2540 !important;
}
[data-theme="light"] .bab-chip:hover { background: #f0e6ff !important; color: #5b21b6 !important; }

/* Brain memory items */
[data-theme="light"] #tab-brain .brain-mem-item {
  background: #f8f5ff !important; border-color: rgba(139,92,246,.18) !important;
}
[data-theme="light"] #tab-brain .brain-mem-item:hover { background: #f0e9ff !important; }
[data-theme="light"] #tab-brain .brain-mem-item.starred { background: #fffbea !important; border-color: rgba(200,150,0,.25) !important; }
[data-theme="light"] #tab-brain .brain-mem-q  { color: #6b7a99 !important; }
[data-theme="light"] #tab-brain .brain-mem-txt { color: #1a2540 !important; }
[data-theme="light"] #tab-brain .brain-mem-age { color: #8a9abc !important; }
[data-theme="light"] #tab-brain .brain-mem-tag { background: rgba(99,102,241,.08) !important; color: #4338ca !important; }

/* General text inside brain tab */
[data-theme="light"] #tab-brain .pt { color: #1a2540 !important; background: none !important; -webkit-text-fill-color: #1a2540 !important; }
[data-theme="light"] #tab-brain .pt em { color: #1a5fc8 !important; }
[data-theme="light"] #tab-brain .pd { color: #4a5878 !important; }
[data-theme="light"] #tab-brain label,
[data-theme="light"] #tab-brain p,
[data-theme="light"] #tab-brain span:not(.bns-model):not(.bns-engine-name) { color: inherit; }

/* ── MOBILE ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #tab-brain .brain-neural-status .bns-segment:nth-child(n+3) { display: none; }
  #tab-brain .chat-header { border-radius: 0; }
  #tab-brain .brain-side { height: auto; overflow-x: auto; }
}