/* ===================== Root Theme ===================== */
:root {
  --bb-bg:#0f1222;
  --bb-panel:#0b0e1a;
  --bb-panel-2:#0a0e22;
  --bb-border:#1a1f3f;
  --bb-border-2:#22284a;
  --bb-text:#e8ecff;
  --bb-muted:#a8b2e6;
  --bb-accent:#2f6fff;
  --bb-accent-2:#7b86de;
  --bb-warn:#ffcc66;
  --bb-green:#37c48e;
  --bb-red:#ff6b6b;
}

/* ===================== Base ===================== */
.bb-app {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  color: var(--bb-text);
}

.bb-left {
  display:flex; flex-direction: column; gap:12px;
}
.bb-right { min-width: 0; }

/* left rail cards */
.bb-card {
  background: linear-gradient(180deg, #0b0f2c 0%, #0a0e27 100%);
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.35);
}
.bb-card .h { font-size: 13px; font-weight: 700; letter-spacing:.25px; opacity:.9; }

.bb-chat-container {
  background: linear-gradient(180deg, #0c102d 0%, #0b0f29 100%);
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.35);
}

/* ===================== Header ===================== */
.bb-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.bb-topic { font-weight:700; letter-spacing:.2px; opacity:.9; }

/* roster */
.bb-participants { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px 0; }
.bb-chip {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0f1530 0%, #0b102a 100%);
  border: 1px solid var(--bb-border-2);
  color: var(--bb-text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2px;
}

/* ===================== Log ===================== */
.bb-chat-log,
#bb-log {
  background: #0b0f2b;
  border: 1px solid var(--bb-border);
  border-radius: 10px;
  padding: 12px;
  height: 420px;
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* rows */
.bb-row {
  display:flex; gap:10px; align-items:flex-start;
  padding: 10px 8px 11px 8px;
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.bb-row:last-child { border-bottom:none; }

.bb-who {
  min-width:88px;
  font-weight:700;
  color: var(--bb-muted);
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: uppercase;
  opacity:.9;
}
.bb-text {
  flex: 1 1 auto;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Subtle persona row accents */
.ai-origin { border-left: 3px solid rgba(186,147,255,.28); padding-left:6px; }
.ai-sage   { border-left: 3px solid rgba(86,220,155,.28);  padding-left:6px; }
.ai-echo   { border-left: 3px solid rgba(120,180,255,.28); padding-left:6px; }
.ai-cael   { border-left: 3px solid rgba(255,185,120,.28); padding-left:6px; }
.ai-reverie{ border-left: 3px solid rgba(147,185,255,.28); padding-left:6px; }

/* ===================== Speaking order ===================== */
.bb-speaking-order {
  display:flex; align-items:center; gap:8px;
  margin: 10px 0 8px 0;
  color: var(--bb-muted);
  min-height: 24px;
}

/* animated spinner */
.bb-spin {
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(232,236,255,0.35);
  border-top-color: rgba(232,236,255,0.9);
  animation: bb-spin 0.8s linear infinite; margin-right:8px; vertical-align: -2px;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }
.bb-pending-label { font-size: 12px; opacity: .85; }

/* ===================== Inputs ===================== */
#bb-form,
.bb-chat-input { display:flex; gap:8px; margin-top:10px; }

#bb-text,
.bb-chat-input input {
  flex:1 1 auto;
  min-height:42px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--bb-border-2);
  background:#0f1530;
  color:var(--bb-text);
  line-height:1.45;     /* for 4-line calc */
  resize: none;         /* height managed in JS */
  overflow-y: hidden;   /* becomes auto when content > 4 lines (via JS) */
}

#bb-submit,
.bb-chat-input button {
  padding:10px 16px;
  border-radius:10px;
  border:1px solid #2b315a;
  background:#182254;
  color:var(--bb-text);
  cursor:pointer;
}
#bb-submit:hover { border-color:#3a47a4; }

/* send button (explicit) */
.bb-send {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #2b315a;
  border-radius: 10px;
  background: #182254;
  color: var(--bb-text);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .15s ease, transform .02s ease;
}
.bb-send:hover { opacity: .92; }
.bb-send:active { transform: translateY(1px); }
.bb-send { height: 42px; }

/* Inputs: size tweaks for mobile */
#bb-text { flex:1 1 auto; min-height:44px; max-height:160px; }
#bb-text { font-size: 15px; }

/* ===================== Tokens ===================== */
.bb-tokens {
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.06);
}
.bb-tokens .card {
  background: linear-gradient(180deg, #0f1335 0%, #0c102d 100%);
  border: 1px solid var(--bb-border);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.bb-tokens .card .label { color: var(--bb-muted); font-size: 11px; }
.bb-tokens .card .val   { color: var(--bb-text); font-weight:700; font-size: 12px; }

/* ===================== Mentions/Tags quick bar ===================== */
.bb-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top: 10px; }
.bb-chipbtn {
  appearance:none; border:1px solid var(--bb-border); background:#0f1530;
  border-radius:999px; padding:6px 10px; color:var(--bb-text); font-size:12px; cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.bb-chipbtn:hover { filter: brightness(1.08); }
.bb-chip-mention { background:#0e1330; border-color:#2b315a; color:#ffffff; }
.bb-chip-tag {}

/* ===================== Action Buttons (Dive Deeper / Devil's Advocate) ===================== */
.bb-action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.bb-mini-btn {
  display: block;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  font-size: 11px;
  line-heightx: 1.3;
  background: transparent;
  color: var(--bb-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.bb-mini-btn:focus {
  outline: none;
  border-color: rgba(255,255,255,0.4);
}

.bb-mini-btn:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--bb-text);
}

/* ===================== System Toasts ===================== */
#bb-system { position: relative; min-height: 0; }
.bb-toast {
  position: relative;
  display: inline-flex;
  align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #12183c;
  border: 1px solid var(--bb-border);
  color: var(--bb-text);
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.bb-toast .pill {
  display:inline-block; padding:3px 6px; border-radius:999px;
  background: #0f1333; border:1px solid #2b315a; color: var(--bb-text);
  font-weight:700; letter-spacing:.2px; font-size:11px;
}

/* --- Layout hardening for input row: prevent textarea overlap --- */
.bb-chat-input { align-items: stretch; }
.bb-send-col { display:flex; gap:8px; align-items:stretch; flex:0 0 auto; }
#bb-text { min-width: 0; } /* allow flexbox to shrink width next to buttons */

/* --- Attachments preview bar --- */
.bb-attach-previews{ display:none; flex-wrap:wrap; gap:6px; margin:6px 0 0; }
.bb-attach-previews .bb-attach-item{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--bb-border); border-radius:8px; background: var(--bb-panel-2); font-size:12px; }
.bb-attach-previews .bb-attach-ico{ font-size:14px; opacity:.9; }
.bb-attach-previews .bb-attach-name{ max-width:180px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.bb-attach-previews .bb-attach-remove{ appearance:none; border:none; background:transparent; color:var(--bb-text); cursor:pointer; font-size:16px; line-height:1; opacity:.7; }
.bb-attach-previews .bb-attach-remove:hover{ opacity:1; }

/* Ensure Attach button equals Send width (stacked) */
.bb-send-col{ display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.bb-send-col > #bb-attach, .bb-send-col > .bb-attach, .bb-send-col > #bb-send, .bb-send-col > .bb-send { width:100%; }


/* Themed scrollbars for chat log and textarea */
#bb-log, .bb-chat-log, #bb-text {
  scrollbar-color: var(--bb-accent) transparent;
}
#bb-log::-webkit-scrollbar, .bb-chat-log::-webkit-scrollbar, #bb-text::-webkit-scrollbar {
  width: 10px; height: 10px;
}
#bb-log::-webkit-scrollbar-thumb, .bb-chat-log::-webkit-scrollbar-thumb, #bb-text::-webkit-scrollbar-thumb {
  background: var(--bb-accent);
  border-radius: 8px;
}
#bb-log::-webkit-scrollbar-track, .bb-chat-log::-webkit-scrollbar-track, #bb-text::-webkit-scrollbar-track {
  background: transparent;
}

/* Unlocked tag state: pastel green */
.bb-chip-tag.bb-chip--unlocked,
.bb-chip-tag[data-state="unlocked"] {
  background: #c8f0d2 !important;
  border-color: #77d39b !important;
  color: #000 !important;
}
.bb-chip-tag.bb-chip--unlocked:hover,
.bb-chip-tag[data-state="unlocked"]:hover {
  background: #b9e9c7 !important;
  border-color: #63c889 !important;
}

/* Mentions use palette accent with black text */
.bb-line .bb-chip-mention, .bb-chip-mention {
  background: var(--bb-accent) !important;
  border-color: var(--bb-accent) !important;
  color: #000 !important;
}

/* Labels for @ and # rows */
.bb-line-label {
  display:inline-block;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 4px 8px;
  margin-right: 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.10);
  color: var(--bb-text);
}


/* ============== Markers Panel ============== */
.bb-markers-panel {
  margin: 10px 8px;
  border: 1px solid var(--bb-border-2);
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  padding: 8px;
  max-height: 38vh;
  overflow: auto;
}
.bb-markers-panel .bb-marker-empty {
  opacity: .7;
  font-size: 12px;
  padding: 6px;
}
.bb-markers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bb-marker-item {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--bb-text);
  border: 1px solid var(--bb-border);
  background: rgba(0,0,0,0.10);
}
.bb-marker-item:hover {
  border-color: var(--bb-accent);
  background: rgba(47,111,255,0.10);
}

/* Mobile dropdown fallback */
.bb-marker-dd {
  display: none;
  width: 100%;
  margin-top: 8px;
  background: #0f1530;
  color: var(--bb-text);
  border: 1px solid var(--bb-border);
  border-radius: 8px;
  padding: 8px;
}

/* ============== Marker Modal ============== */
#bb-marker-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,30,0.55);
  z-index: 9999;
}
#bb-marker-modal.open { display: flex; }
.bb-marker-dialog {
  width: min(520px, 92vw);
  border-radius: 16px;
  border: 1px solid var(--bb-border);
  background: linear-gradient(180deg, #0e1636, #0a0f28);
  color: var(--bb-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.bb-marker-head, .bb-marker-foot { padding: 12px 16px; border-bottom: 1px solid var(--bb-border-2); }
.bb-marker-foot { border-top: 1px solid var(--bb-border-2); border-bottom: none; display: flex; gap: 8px; justify-content: flex-end; }
.bb-marker-body { padding: 14px 16px; }
#bb-marker-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--bb-border-2); background: #0f1530; color: var(--bb-text);
}
.bb-marker-close { float: right; background: transparent; border: none; color: var(--bb-text); font-size: 20px; cursor: pointer; }
.bb-marker-save, .bb-marker-cancel {
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--bb-border-2); background: #182254; color: var(--bb-text); cursor: pointer;
}
.bb-marker-save { border-color: var(--bb-accent); }

/* ============== Mobile adjustments ============== */
@media (max-width: 900px){
  /* Sidebar icon menu becomes horizontal, text labels hidden */
  .bb-bs-sidebar .bb-bs-nav { display:flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px; }
  .bb-bs-sidebar .bb-bs-nav .bb-bs-navitem { display:flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; }
  .bb-bs-sidebar .bb-bs-nav .bb-bs-navitem .bb-txt { display: none !important; }
  /* Markers: hide panel, show dropdown */
  .bb-markers-panel .bb-markers-list { display: none; }
  .bb-marker-dd { display: block; }
}

/* Ensure Quick Bar spacing remains visible under the input row */
.bb-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }