/* BornAgainHub AI Assistant — floating widget.
   Uses the plugin's existing --bahub-* tokens when present (dashboard page),
   and falls back to the same values inline so it still looks right on any
   other front-end page/theme it's injected into via wp_footer. */

#bah-ai-chat-root {
  --bac-primary: var(--bahub-primary, #DE7356);
  --bac-primary-dark: var(--bahub-primary-dark, #C05E42);
  --bac-bg: var(--bahub-surface, #FFFFFF);
  --bac-bg-sub: var(--bahub-bg, #F4F3EE);
  --bac-border: var(--bahub-border, #D5D1C9);
  --bac-text: var(--bahub-text, #1A1A1A);
  --bac-text-sub: var(--bahub-text-sub, #6B6560);
  --bac-radius: var(--bahub-radius, 12px);
  --bac-shadow: var(--bahub-shadow-md, 0 8px 28px rgba(0,0,0,.16));
  all: initial;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#bah-ai-chat-root * { box-sizing: border-box; }

.bac-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  height: 52px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--bac-primary), var(--bac-primary-dark));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
  z-index: 999999;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .1px;
  cursor: grab;
  transition: transform .18s ease, box-shadow .18s ease, padding .18s ease, width .18s ease, opacity .16s ease;
}
.bac-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.12); }
.bac-launcher:active { transform: translateY(0) scale(.97); }

/* Being dragged: no easing lag while following the pointer, and a grabbing cursor. */
.bac-launcher.bac-dragging {
  cursor: grabbing;
  transition: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.12);
}

/* Hidden while the panel is open — the panel's own header × already covers
   closing, so the floating button doesn't need to stay on screen (and, on
   mobile especially, this is what keeps it from ever sitting on top of the
   panel's send button). */
.bac-launcher.bac-launcher-hidden {
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
}
.bac-launcher svg { width: 20px; height: 20px; flex-shrink: 0; }
.bac-launcher .bac-sparkle { animation: bac-twinkle 2.4s ease-in-out infinite; }
.bac-launcher .bac-label { white-space: nowrap; }

.bac-launcher.bac-launcher-open {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  background: var(--bac-primary-dark);
}
.bac-launcher.bac-launcher-open .bac-label { display: none; }

@keyframes bac-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: .7; transform: scale(.88) rotate(-8deg); }
}

.bac-panel {
  position: fixed;
  right: 22px;
  bottom: 90px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 130px);
  background: var(--bac-bg);
  border: 1px solid var(--bac-border);
  border-radius: 16px;
  box-shadow: var(--bac-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 999999;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.bac-panel.bac-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.bac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bac-primary);
  color: #fff;
  flex-shrink: 0;
}
.bac-header-title { display: flex; flex-direction: column; gap: 1px; }
.bac-header-name { font-size: 14px; font-weight: 700; }
.bac-header-sub { font-size: 11.5px; opacity: .85; display: flex; align-items: center; gap: 5px; }
.bac-header-sub::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7CE0B0;
  display: inline-block;
}
.bac-close {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bac-close:hover { background: rgba(255,255,255,.28); }
.bac-close svg { width: 15px; height: 15px; }

.bac-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bac-bg-sub);
  scrollbar-width: thin;
  scrollbar-color: var(--bac-border) transparent;
}
.bac-messages::-webkit-scrollbar { width: 6px; }
.bac-messages::-webkit-scrollbar-track { background: transparent; }
.bac-messages::-webkit-scrollbar-thumb {
  background-color: var(--bac-border);
  border-radius: 999px;
}
.bac-messages::-webkit-scrollbar-thumb:hover { background-color: var(--bac-text-sub); }

.bac-msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bac-msg-user {
  align-self: flex-end;
  background: var(--bac-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bac-msg-assistant {
  align-self: flex-start;
  background: var(--bac-bg);
  color: var(--bac-text);
  border: 1px solid var(--bac-border);
  border-bottom-left-radius: 4px;
}
.bac-msg-error {
  align-self: flex-start;
  background: rgba(217,64,64,.10);
  color: #D94040;
  border: 1px solid rgba(217,64,64,.25);
  border-bottom-left-radius: 4px;
}

.bac-msg strong { font-weight: 700; }
.bac-msg em { font-style: italic; }
.bac-msg code {
  background: rgba(0,0,0,.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bac-msg-user code { background: rgba(255,255,255,.2); }

.bac-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 11px 14px;
  background: var(--bac-bg);
  border: 1px solid var(--bac-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.bac-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bac-text-sub);
  animation: bac-bounce 1.2s infinite ease-in-out;
}
.bac-typing span:nth-child(2) { animation-delay: .15s; }
.bac-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bac-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.bac-inputbar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--bac-border);
  background: var(--bac-bg);
  flex-shrink: 0;
}
.bac-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--bac-border);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--bac-text);
  background: var(--bac-bg-sub);
  max-height: 90px;
  line-height: 1.4;
  scrollbar-width: thin;
  scrollbar-color: var(--bac-border) transparent;
}
.bac-input::-webkit-scrollbar { width: 6px; }
.bac-input::-webkit-scrollbar-track { background: transparent; }
.bac-input::-webkit-scrollbar-thumb { background-color: var(--bac-border); border-radius: 999px; }
.bac-input:focus { outline: none; border-color: var(--bac-primary); }
.bac-send {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: none;
  background: var(--bac-primary);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, opacity .15s ease;
}
.bac-send:hover { background: var(--bac-primary-dark); }
.bac-send:disabled { opacity: .5; cursor: default; }
.bac-send svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .bac-panel { right: 12px; left: 12px; width: auto; bottom: 82px; }
  .bac-launcher { right: 16px; bottom: 16px; }
}