/* ============================================================
   BotArena — styles
   Theme: dark, accent palettes via [data-theme]
   ============================================================ */

* { box-sizing: border-box; }

html, body, #app {
  height: 100%;
  margin: 0;
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 14px;
  overflow: hidden;
}

/* ============================================================
   THEMES — every variant just remaps a few CSS vars
   ============================================================ */

/* Light: white surface — clean daylight */
[data-theme="light"] {
  --bg-app: #f7f7f9;
  --bg-panel: #ffffff;
  --bg-panel-2: #fafafb;
  --bg-elev: #f1f1f4;
  --bg-elev-2: #e7e7ec;
  --border-1: #e4e4e7;
  --border-2: #d4d4d8;
  --fg-1: #18181b;
  --fg-2: #3f3f46;
  --fg-3: #71717a;
  --fg-4: #a1a1aa;

  --accent: #5c3d86;
  --accent-2: #4d326f;
  --accent-soft: rgba(92, 61, 134, 0.10);

  --warm: #d97706;
  --warm-soft: rgba(217, 119, 6, 0.12);

  --bubble-bot: linear-gradient(135deg, #f4f4f5 0%, #ececef 100%);
  --bubble-bot-fg: #18181b;
  --bubble-user: linear-gradient(135deg, #5c3d86 0%, #4d326f 100%);
  --bubble-user-fg: #ffffff;

  --dot-color: rgba(0,0,0,0.04);
  --code-bg: rgba(0,0,0,0.06);
}

/* Default: midnight + magenta */
:root,
[data-theme="lime"] {
  --bg-app: #0a0c10;
  --bg-panel: #181d2a;
  --bg-panel-2: #1f2535;
  --bg-elev: #262d40;
  --bg-elev-2: #2e3650;
  --border-1: #2a3346;
  --border-2: #3a4560;
  --fg-1: #e8eaf0;
  --fg-2: #b8bcc8;
  --fg-3: #828998;
  --fg-4: #5a6173;

  --accent: #d946ef;
  --accent-2: #a21caf;
  --accent-soft: rgba(217, 70, 239, 0.14);

  --warm: #f97316;
  --warm-soft: rgba(249, 115, 22, 0.14);

  --bubble-bot: linear-gradient(135deg, #1a2230 0%, #1f2937 100%);
  --bubble-bot-fg: #e6e9f0;
  --bubble-user: linear-gradient(135deg, #d946ef 0%, #a21caf 100%);
  --bubble-user-fg: #0a0c10;
}

/* Sunset: amber + coral */
[data-theme="sunset"] {
  --bg-app: #14100c;
  --bg-panel: #261e14;
  --bg-panel-2: #2d2418;
  --bg-elev: #352a1d;
  --bg-elev-2: #3d3122;
  --border-1: #3a311f;
  --border-2: #4d4028;
  --fg-1: #f5ede2;
  --fg-2: #d4c8b3;
  --fg-3: #9a8c75;
  --fg-4: #6e6354;

  --accent: #f59e0b;
  --accent-2: #d97706;
  --accent-soft: rgba(245, 158, 11, 0.14);

  --warm: #fb7185;
  --warm-soft: rgba(251, 113, 133, 0.14);

  --bubble-bot: linear-gradient(135deg, #251c10 0%, #2d2316 100%);
  --bubble-bot-fg: #f5ede2;
  --bubble-user: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --bubble-user-fg: #1c1308;
}

/* Violet: deep purple + soft pink — vapor vibe */
[data-theme="violet"] {
  --bg-app: #0c0a14;
  --bg-panel: #1f1730;
  --bg-panel-2: #271d3d;
  --bg-elev: #2f2347;
  --bg-elev-2: #382a55;
  --border-1: #33274d;
  --border-2: #443363;
  --fg-1: #ebe6f5;
  --fg-2: #c4bcd6;
  --fg-3: #8c83a3;
  --fg-4: #635a7a;

  --accent: #a855f7;
  --accent-2: #7c3aed;
  --accent-soft: rgba(168, 85, 247, 0.14);

  --warm: #ec4899;
  --warm-soft: rgba(236, 72, 153, 0.14);

  --bubble-bot: linear-gradient(135deg, #1f1733 0%, #261c40 100%);
  --bubble-bot-fg: #ebe6f5;
  --bubble-user: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  --bubble-user-fg: #0c0a14;
}

/* Cyber: neon cyan + magenta — synthwave */
[data-theme="cyber"] {
  --bg-app: #07080f;
  --bg-panel: #131a30;
  --bg-panel-2: #1a2240;
  --bg-elev: #212b4d;
  --bg-elev-2: #2a365e;
  --border-1: #25305a;
  --border-2: #354270;
  --fg-1: #e6ecff;
  --fg-2: #b4bfdc;
  --fg-3: #7c87a8;
  --fg-4: #545d7d;

  --accent: #22d3ee;
  --accent-2: #0891b2;
  --accent-soft: rgba(34, 211, 238, 0.14);

  --warm: #f0abfc;
  --warm-soft: rgba(240, 171, 252, 0.14);

  --bubble-bot: linear-gradient(135deg, #131a35 0%, #1c2748 100%);
  --bubble-bot-fg: #e6ecff;
  --bubble-user: linear-gradient(135deg, #22d3ee 0%, #d946ef 100%);
  --bubble-user-fg: #07080f;
}

/* Royal: deep indigo + gold — premium */
[data-theme="royal"] {
  --bg-app: #0a0a18;
  --bg-panel: #1a1d3e;
  --bg-panel-2: #21254a;
  --bg-elev: #292e58;
  --bg-elev-2: #313769;
  --border-1: #2c3160;
  --border-2: #3d437a;
  --fg-1: #ede8ff;
  --fg-2: #c2bbe0;
  --fg-3: #8983ad;
  --fg-4: #5e597f;

  --accent: #fbbf24;
  --accent-2: #d97706;
  --accent-soft: rgba(251, 191, 36, 0.14);

  --warm: #818cf8;
  --warm-soft: rgba(129, 140, 248, 0.14);

  --bubble-bot: linear-gradient(135deg, #1a1d44 0%, #232858 100%);
  --bubble-bot-fg: #ede8ff;
  --bubble-user: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --bubble-user-fg: #1a1308;
}

/* Mono: pure zinc — minimal */
[data-theme="mono"] {
  --bg-app: #0a0a0a;
  --bg-panel: #1a1a1a;
  --bg-panel-2: #222222;
  --bg-elev: #2a2a2a;
  --bg-elev-2: #333333;
  --border-1: #333333;
  --border-2: #444444;
  --fg-1: #f5f5f5;
  --fg-2: #c4c4c4;
  --fg-3: #888888;
  --fg-4: #5e5e5e;

  --accent: #fafafa;
  --accent-2: #d4d4d4;
  --accent-soft: rgba(250, 250, 250, 0.10);

  --warm: #f59e0b;
  --warm-soft: rgba(245, 158, 11, 0.14);

  --bubble-bot: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
  --bubble-bot-fg: #f5f5f5;
  --bubble-user: linear-gradient(135deg, #fafafa 0%, #d4d4d4 100%);
  --bubble-user-fg: #0a0a0a;
}

/* Forest: emerald + amber */
[data-theme="forest"] {
  --bg-app: #07100c;
  --bg-panel: #1a1218;
  --bg-panel-2: #22171e;
  --bg-elev: #2a1c25;
  --bg-elev-2: #33222d;
  --border-1: #1a2a20;
  --border-2: #25382b;
  --fg-1: #e6f0e8;
  --fg-2: #b8c8bc;
  --fg-3: #7d9385;
  --fg-4: #56695c;

  --accent: #fb7185;
  --accent-2: #e11d48;
  --accent-soft: rgba(251, 113, 133, 0.14);

  --warm: #f59e0b;
  --warm-soft: rgba(245, 158, 11, 0.14);

  --bubble-bot: linear-gradient(135deg, #102019 0%, #15291f 100%);
  --bubble-bot-fg: #e6f0e8;
  --bubble-user: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  --bubble-user-fg: #1a0810;
}

/* ============================================================
   SHELL
   ============================================================ */
#app {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 2fr);
  background: var(--bg-app);
}

#app[data-layout="config-right"] {
  grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
}
#app[data-layout="config-right"] .ba-config { order: 2; border-right: 0; border-left: 1px solid var(--border-1); }
#app[data-layout="config-right"] .ba-chat { order: 1; }

/* ============================================================
   CONFIG PANEL
   ============================================================ */
.ba-config {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-2);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  min-width: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.ba-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-1);
}

.ba-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ba-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-app);
  box-shadow: 0 0 20px var(--accent-soft);
}
.ba-logo-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--fg-1);
}
.ba-logo-sub {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Tabs */
.ba-tabs {
  display: flex;
  padding: 8px;
  gap: 4px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-panel);
}
.ba-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 160ms var(--ease-standard);
}
.ba-tab:hover { background: var(--bg-elev); color: var(--fg-2); }
.ba-tab-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.ba-tab-count {
  font-size: 11px;
  background: var(--bg-elev-2);
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
  font-family: var(--font-condensed);
}
.ba-tab-active .ba-tab-count {
  background: var(--accent);
  color: var(--bg-app);
}

.ba-config-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* List head */
.ba-list { display: flex; flex-direction: column; gap: 8px; }
.ba-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 8px;
}
.ba-list-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  font-weight: 600;
}

/* Threads */
.ba-thread {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: all 160ms var(--ease-standard);
}
.ba-thread:hover {
  border-color: var(--border-2);
  background: var(--bg-elev);
}
.ba-thread-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ba-thread-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ba-thread-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-1);
}
.ba-thread-desc {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
}
.ba-thread-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
.ba-thread-count {
  font-size: 11px;
  color: var(--fg-4);
}

/* Cards (bots & users) */
.ba-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  transition: all 160ms var(--ease-standard);
}
.ba-card:hover {
  border-color: var(--border-2);
  background: var(--bg-elev);
}
.ba-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ba-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.ba-card-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ba-tag-user {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--warm);
  color: var(--bg-app);
  text-transform: uppercase;
}
.ba-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-1);
}
.ba-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ba-card-desc {
  font-size: 12px;
  color: var(--fg-3);
}
.ba-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-elev-2);
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  letter-spacing: 0.02em;
}
.ba-chip-role {
  background: var(--warm-soft);
  color: var(--warm);
  border-color: transparent;
}

/* Status pills */
.ba-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
}
.ba-status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.ba-status-pill-online { color: var(--accent); background: var(--accent-soft); }
.ba-status-pill-online::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.ba-status-pill-idle   { color: var(--warm); background: var(--warm-soft); }
.ba-status-pill-idle::before { background: var(--warm); }
.ba-status-pill-offline{ color: var(--fg-4); background: var(--bg-elev); }
.ba-status-pill-offline::before { background: var(--fg-4); }

/* ============================================================
   AVATAR
   ============================================================ */
.ba-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.ba-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-family: var(--font-condensed);
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
[data-theme="light"] .ba-avatar { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.ba-status {
  position: absolute;
  bottom: 0; right: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-panel);
}
.ba-status-online { background: var(--accent); }
.ba-status-idle   { background: var(--warm); }
.ba-status-offline{ background: var(--fg-4); }

.ba-stack-avatars {
  display: flex;
  align-items: center;
}
.ba-stack-avatars .ba-avatar-wrap { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg-panel); border-radius: 50%; }
.ba-stack-avatars .ba-avatar-wrap:first-child { margin-left: 0; }
.ba-stack-sm .ba-avatar-wrap { margin-left: -6px; }
.ba-stack-more {
  margin-left: -8px;
  padding: 0 8px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--bg-elev-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  font-family: var(--font-condensed);
  box-shadow: 0 0 0 2px var(--bg-panel);
}

/* Badge (unread) */
.ba-badge {
  background: var(--warm);
  color: #1a0a00;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-condensed);
  min-width: 20px;
  text-align: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ba-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--bg-app);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: all 160ms var(--ease-standard);
}
.ba-btn-primary:hover { background: var(--accent-2); }

.ba-btn-text {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  color: var(--fg-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
}
.ba-btn-text:hover { background: var(--bg-elev); color: var(--fg-1); }

.ba-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--fg-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.ba-btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

.ba-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  color: var(--fg-2);
  cursor: pointer;
  transition: all 160ms var(--ease-standard);
}
.ba-icon-btn:hover { color: var(--fg-1); border-color: var(--accent); background: var(--accent-soft); }
.ba-icon-btn-sm { width: 24px; height: 24px; border-radius: 6px; }
.ba-icon-btn-accent {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   CHAT
   ============================================================ */
.ba-chat {
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  min-width: 0;
  position: relative;
}

/* Subtle dot grid in chat bg */
.ba-chat::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--dot-color, rgba(255,255,255,0.025)) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.ba-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-app);
  position: relative;
  z-index: 1;
}
.ba-chat-title-wrap {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.ba-chat-bar {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent);
}
.ba-chat-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.ba-chat-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  font-weight: 600;
  margin-top: 2px;
}
.ba-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: ba-pulse 2s var(--ease-standard) infinite;
}
@keyframes ba-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.ba-chat-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ba-chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.ba-chat-day {
  align-self: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-4);
  padding: 4px 12px;
  margin: 4px 0;
}

/* System message */
.ba-system {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--fg-3);
  font-size: 11px;
  border: 1px solid var(--border-1);
}

/* Message rows */
.ba-msg {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 100%;
}
.ba-msg-user {
  flex-direction: row-reverse;
  margin-left: auto;
}
.ba-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
  min-width: 0;
}
.ba-msg-user .ba-msg-body {
  align-items: flex-end;
}

.ba-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
}
.ba-msg-author {
  font-size: 12px;
  font-weight: 600;
}
.ba-tag-bot {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-condensed);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--bg-app);
  text-transform: uppercase;
}
.ba-msg-model {
  font-size: 10px;
  font-family: var(--font-condensed);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-4);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-elev);
}

.ba-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid transparent;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ba-msg-bot .ba-bubble {
  border-top-left-radius: 4px;
}
.ba-msg-user .ba-bubble {
  border-top-right-radius: 4px;
  font-weight: 500;
}

.ba-msg-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.ba-msg-time {
  font-size: 10px;
  color: var(--fg-4);
  font-family: var(--font-condensed);
  letter-spacing: 0.05em;
}
.ba-msg-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 0;
  color: var(--fg-4);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: all 160ms var(--ease-standard);
}
.ba-msg:hover .ba-msg-action { opacity: 1; }
.ba-msg-action:hover { color: var(--accent); background: var(--accent-soft); }

/* Reply preview within message */
.ba-reply {
  border-left: 3px solid var(--accent);
  padding: 4px 10px;
  background: var(--bg-elev);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  max-width: 100%;
}
.ba-reply-author {
  font-weight: 600;
  color: var(--accent);
  font-size: 11px;
}
.ba-reply-text {
  color: var(--fg-3);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Mention + code */
.ba-mention {
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}
.ba-msg-user .ba-mention {
  color: var(--bubble-user-fg);
  background: rgba(0,0,0,0.18);
}
.ba-code {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 12.5px;
  background: var(--code-bg, rgba(255,255,255,0.07));
  padding: 1px 5px;
  border-radius: 3px;
}
.ba-msg-user .ba-code {
  background: rgba(0,0,0,0.18);
}

/* Typing indicator */
.ba-typing {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.ba-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: var(--bubble-bot);
  border: 1px solid;
}
.ba-typing-name {
  font-size: 12px;
  font-weight: 600;
}
.ba-typing-dots {
  display: inline-flex;
  gap: 3px;
}
.ba-typing-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg-3);
  animation: ba-typing 1.4s var(--ease-standard) infinite;
}
.ba-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.ba-typing-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes ba-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.ba-typing-label {
  font-size: 11px;
  color: var(--fg-3);
  font-style: italic;
}

/* ============================================================
   COMPOSER
   ============================================================ */

.ba-reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 24px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  position: relative;
  z-index: 1;
}
.ba-reply-preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ba-reply-preview-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
}
.ba-reply-preview-text {
  font-size: 12px;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ba-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 24px 4px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--bg-panel);
  position: relative;
  z-index: 1;
  transition: border-color 160ms var(--ease-standard);
}
.ba-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ba-composer-icon {
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  cursor: pointer;
  border-radius: 6px;
}
.ba-composer-icon:hover { color: var(--accent); background: var(--accent-soft); }
.ba-composer-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg-1);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 0;
}
.ba-composer-input::placeholder { color: var(--fg-4); }
.ba-composer-count {
  font-size: 10px;
  color: var(--fg-4);
  font-family: var(--font-condensed);
  letter-spacing: 0.05em;
  padding: 0 8px;
}
.ba-composer-send {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent);
  border: 0;
  color: var(--bg-app);
  cursor: pointer;
  transition: all 160ms var(--ease-standard);
}
.ba-composer-send:hover:not(:disabled) { background: var(--accent-2); transform: translateX(2px); }
.ba-composer-send:disabled { opacity: 0.3; cursor: not-allowed; }

.ba-composer-hint {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 6px 28px 16px;
  font-size: 11px;
  color: var(--fg-4);
  position: relative;
  z-index: 1;
}
.ba-composer-hint kbd {
  font-family: var(--font-condensed);
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  margin-right: 4px;
  color: var(--fg-2);
  background: var(--bg-elev);
}

/* ============================================================
   MODAL (add bot/user)
   ============================================================ */
.ba-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadein 160ms var(--ease-standard);
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.ba-modal {
  width: 420px;
  max-width: 92vw;
  background: var(--bg-panel);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: pop 200ms var(--ease-standard);
}
@keyframes pop { from { transform: translateY(8px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.ba-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-1);
}
.ba-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}
.ba-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ba-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-panel-2);
}
.ba-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ba-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-weight: 600;
}
.ba-field-input {
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg-1);
  outline: 0;
  transition: border-color 160ms var(--ease-standard);
}
.ba-field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ba-field-input::placeholder { color: var(--fg-4); }

.ba-swatches { display: flex; gap: 8px; }
.ba-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 120ms var(--ease-standard);
}
.ba-swatch:hover { transform: scale(1.1); }
.ba-swatch-active {
  border-color: var(--fg-1);
  box-shadow: 0 0 0 2px var(--bg-panel);
}
.ba-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--bg-elev);
  border-radius: 8px;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }