/* ══════════════════════════════════════════════════════════════════════════
   SteppinAI — AI Co-Pilot Chat Widget
   Evolved from BrowBrow. Compound actions, confirmation tiers, receipts.
   Used by: Staff (5002), Client (5001), Website (5000)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FAB Button ── */
#bb-fab {
  position:fixed;bottom:24px;right:24px;z-index:2147483647;
  width:48px;height:48px;border-radius:12px;
  background:rgba(110,168,254,.1);
  border:1px solid rgba(110,168,254,.2);
  cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
  transition:all .15s;
}
#bb-fab:hover {
  background:rgba(110,168,254,.18);
  border-color:rgba(110,168,254,.4);
  box-shadow:0 8px 28px rgba(0,0,0,.25);
}
#bb-fab svg { stroke:#6ea8fe; stroke-width:2; }

/* ── Chat Panel ── */
.bb-panel {
  position:fixed;
  bottom:84px;
  left:50%;
  transform:translateX(-50%);
  width:min(700px,calc(100vw - 40px));
  max-height:calc(100vh - 120px);
  z-index:2147483646;
  background:#1e2233;
  border:1px solid rgba(110,168,254,.15);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  overflow:hidden;
  font-family:'JetBrains Mono',monospace;
}
.bb-hidden { display:none !important; }

/* ── Header ── */
.bb-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid rgba(110,168,254,.12);
  background:rgba(255,255,255,.04);
}
.bb-title {
  font-size:12px;font-weight:800;
  color:#6ea8fe;
  letter-spacing:.08em;
  display:flex;align-items:center;gap:8px;
}
.bb-title::before {
  content:'';width:7px;height:7px;border-radius:50%;
  background:#3fb950;
  animation:bb-pulse 2s ease-in-out infinite;
}
@keyframes bb-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.bb-close {
  background:none;border:none;cursor:pointer;
  color:#64748b;padding:4px;border-radius:4px;
  display:flex;align-items:center;
  transition:color .15s;
}
.bb-close:hover { color:#e2e8f0; }

/* ── Messages ── */
.bb-messages {
  flex:1;overflow-y:auto;
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
  min-height:150px;max-height:450px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(110,168,254,.12) transparent;
}
.bb-messages::-webkit-scrollbar { width:4px; }
.bb-messages::-webkit-scrollbar-thumb { background:rgba(110,168,254,.12);border-radius:4px; }

.bb-msg {
  max-width:82%;padding:10px 14px;
  border-radius:10px;font-size:12px;line-height:1.65;
  word-break:break-word;
  animation:bb-msg-in .2s ease-out;
}
@keyframes bb-msg-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.bb-msg-user {
  align-self:flex-end;
  background:rgba(110,168,254,.1);
  border:1px solid rgba(110,168,254,.2);
  color:#e2e8f0;
  border-bottom-right-radius:3px;
}
.bb-msg-assistant {
  align-self:flex-start;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(110,168,254,.1);
  color:#e2e8f0;
  border-bottom-left-radius:3px;
}
.bb-msg-badge {
  font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:4px;
  margin-top:6px;display:inline-block;
  border:1px solid;
}

/* ── Input Area ── */
.bb-input-wrap {
  padding:10px 14px 14px;
  border-top:1px solid rgba(110,168,254,.12);
  background:rgba(255,255,255,.04);
  display:flex;flex-direction:column;gap:8px;
}
.bb-attach {
  background:none;border:none;cursor:pointer;
  color:#64748b;
  display:flex;align-items:center;padding:4px;
  border-radius:4px;transition:color .15s;
  align-self:flex-end;
}
.bb-attach:hover { color:#6ea8fe; }
.bb-input {
  width:100%;background:none;border:none;outline:none;
  color:#e2e8f0;
  font-size:13px;font-family:'JetBrains Mono',monospace;
  resize:none;line-height:1.5;
  padding:4px 0;
  max-height:120px;overflow-y:auto;
}
.bb-input::placeholder { color:#475569; }
.bb-bottom-bar {
  display:flex;align-items:center;justify-content:flex-end;
}
.bb-send {
  width:32px;height:32px;border-radius:8px;
  background:rgba(110,168,254,.15);
  border:1px solid rgba(110,168,254,.25);
  cursor:pointer;
  display:grid;place-items:center;
  transition:all .15s;
}
.bb-send:hover { background:rgba(110,168,254,.25);border-color:#6ea8fe; }
.bb-send svg { stroke:#6ea8fe !important; }

/* ── Loading dots ── */
.bb-dots span { animation:bb-dot 1.2s infinite;opacity:0;color:#6ea8fe; }
.bb-dots span:nth-child(2){animation-delay:.2s;}
.bb-dots span:nth-child(3){animation-delay:.4s;}
@keyframes bb-dot{0%,80%,100%{opacity:0}40%{opacity:1}}

/* ── Hint text ── */
.bb-input-wrap::after {
  content:'Shift+Enter for new line';
  font-size:9px;color:#475569;text-align:center;
  margin-top:2px;
}

/* ══ LIGHT MODE ══════════════════════════════════════════════════════════ */
.bb-panel.bb-light {
  background:#ffffff;
  border:1px solid #d0d5dd;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.bb-light .bb-header {
  border-bottom:1px solid #e5e7eb;
  background:#f9fafb;
}
.bb-light .bb-title { color:#2563eb; }
.bb-light .bb-title::before { background:#22c55e; }
.bb-light .bb-close { color:#94a3b8; }
.bb-light .bb-close:hover { color:#1e293b; }
.bb-light .bb-messages {
  scrollbar-color:rgba(0,0,0,.1) transparent;
}
.bb-light .bb-messages::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); }
.bb-light .bb-msg-user {
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  color:#1e293b;
}
.bb-light .bb-msg-assistant {
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#1e293b;
}
.bb-light .bb-input-wrap {
  border-top:1px solid #e5e7eb;
  background:#f9fafb;
}
.bb-light .bb-input { color:#1e293b; }
.bb-light .bb-input::placeholder { color:#94a3b8; }
.bb-light .bb-attach { color:#94a3b8; }
.bb-light .bb-attach:hover { color:#2563eb; }
.bb-light .bb-send {
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.25);
}
.bb-light .bb-send:hover { background:rgba(37,99,235,.2);border-color:#2563eb; }
.bb-light .bb-send svg { stroke:#2563eb !important; }
.bb-light .bb-dots span { color:#2563eb; }
.bb-light .bb-input-wrap::after { color:#94a3b8; }
.bb-light .bb-msg-badge { color:#1e293b; }

/* ══ DUSK MODE ═══════════════════════════════════════════════════════════ */
.bb-panel.bb-dusk {
  background:#212a42;
  border:1px solid #344060;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.bb-dusk .bb-header {
  border-bottom:1px solid #3f506e;
  background:#283350;
}
.bb-dusk .bb-title { color:#7db4ff; }
.bb-dusk .bb-title::before { background:#4ade80; }
.bb-dusk .bb-close { color:#8893ad; }
.bb-dusk .bb-close:hover { color:#d8dff0; }
.bb-dusk .bb-messages {
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.bb-dusk .bb-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }
.bb-dusk .bb-msg-user {
  background:rgba(125,180,255,.1);
  border:1px solid rgba(125,180,255,.2);
  color:#d8dff0;
}
.bb-dusk .bb-msg-assistant {
  background:#283350;
  border:1px solid #3f506e;
  color:#d8dff0;
}
.bb-dusk .bb-input-wrap {
  border-top:1px solid #3f506e;
  background:#283350;
}
.bb-dusk .bb-input { color:#d8dff0; }
.bb-dusk .bb-input::placeholder { color:#8893ad; }
.bb-dusk .bb-attach { color:#8893ad; }
.bb-dusk .bb-attach:hover { color:#7db4ff; }
.bb-dusk .bb-send {
  background:rgba(125,180,255,.12);
  border:1px solid rgba(125,180,255,.25);
}
.bb-dusk .bb-send:hover { background:rgba(125,180,255,.2);border-color:#7db4ff; }
.bb-dusk .bb-send svg { stroke:#7db4ff !important; }
.bb-dusk .bb-dots span { color:#7db4ff; }
.bb-dusk .bb-input-wrap::after { color:#8893ad; }
.bb-dusk .bb-msg-badge { color:#d8dff0; }
.bb-dusk .bb-receipt {
  background:rgba(255,255,255,.04);border-color:#3f506e;color:#d8dff0;
}
.bb-dusk .bb-receipt-header { color:#7db4ff;border-bottom-color:#3f506e; }
.bb-dusk .bb-confirm-bar {
  background:rgba(251,191,36,.06);border-top-color:rgba(251,191,36,.2);
}

/* ══ DAWN MODE ═══════════════════════════════════════════���═══════════════ */
.bb-panel.bb-dawn {
  background:#352826;
  border:1px solid #5a4540;
  box-shadow:0 20px 60px rgba(20,10,5,.25);
}
.bb-dawn .bb-header {
  border-bottom:1px solid #6b5550;
  background:#3e302d;
}
.bb-dawn .bb-title { color:#f0a060; }
.bb-dawn .bb-title::before { background:#6dca72; }
.bb-dawn .bb-close { color:#ad9185; }
.bb-dawn .bb-close:hover { color:#f0e0d6; }
.bb-dawn .bb-messages {
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.bb-dawn .bb-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }
.bb-dawn .bb-msg-user {
  background:rgba(240,160,96,.1);
  border:1px solid rgba(240,160,96,.2);
  color:#f0e0d6;
}
.bb-dawn .bb-msg-assistant {
  background:#3e302d;
  border:1px solid #6b5550;
  color:#f0e0d6;
}
.bb-dawn .bb-input-wrap {
  border-top:1px solid #6b5550;
  background:#3e302d;
}
.bb-dawn .bb-input { color:#f0e0d6; }
.bb-dawn .bb-input::placeholder { color:#ad9185; }
.bb-dawn .bb-attach { color:#ad9185; }
.bb-dawn .bb-attach:hover { color:#f0a060; }
.bb-dawn .bb-send {
  background:rgba(240,160,96,.12);
  border:1px solid rgba(240,160,96,.25);
}
.bb-dawn .bb-send:hover { background:rgba(240,160,96,.2);border-color:#f0a060; }
.bb-dawn .bb-send svg { stroke:#f0a060 !important; }
.bb-dawn .bb-dots span { color:#f0a060; }
.bb-dawn .bb-input-wrap::after { color:#ad9185; }
.bb-dawn .bb-msg-badge { color:#f0e0d6; }
.bb-dawn .bb-receipt {
  background:rgba(255,255,255,.04);border-color:#6b5550;color:#f0e0d6;
}
.bb-dawn .bb-receipt-header { color:#f0a060;border-bottom-color:#6b5550; }
.bb-dawn .bb-confirm-bar {
  background:rgba(245,200,66,.06);border-top-color:rgba(245,200,66,.2);
}

/* ── SteppinAI Action Receipts ── */
.bb-receipt {
  padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(110,168,254,.15);
  font-size:12px;color:#e2e8f0;
  animation:bb-msg-in .2s ease-out;
  align-self:flex-start;max-width:92%;
}
.bb-receipt-header {
  display:flex;align-items:center;gap:8px;
  margin-bottom:8px;padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:11px;font-weight:700;color:#6ea8fe;
}
.bb-receipt-item {
  display:flex;align-items:flex-start;gap:8px;
  padding:5px 0;font-size:11px;line-height:1.5;
}
.bb-receipt-icon {
  width:16px;height:16px;border-radius:4px;
  display:grid;place-items:center;flex-shrink:0;
  margin-top:1px;
}
.bb-receipt-icon.done { background:rgba(63,185,80,.15);color:#3fb950; }
.bb-receipt-icon.failed { background:rgba(248,81,73,.15);color:#f85149; }
.bb-receipt-icon.confirm { background:rgba(240,180,41,.15);color:#f0b429; }
.bb-receipt-icon.blocked { background:rgba(255,255,255,.08);color:#64748b; }

/* ── Confirmation Bar ── */
.bb-confirm-bar {
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:rgba(240,180,41,.08);
  border-top:1px solid rgba(240,180,41,.2);
}
.bb-confirm-btn {
  padding:5px 14px;border-radius:6px;
  font-size:11px;font-weight:700;
  cursor:pointer;border:1px solid;
  font-family:'JetBrains Mono',monospace;
  transition:all .15s;
}
.bb-confirm-yes {
  background:rgba(63,185,80,.15);border-color:rgba(63,185,80,.3);
  color:#3fb950;
}
.bb-confirm-yes:hover { background:rgba(63,185,80,.25); }
.bb-confirm-no {
  background:rgba(248,81,73,.1);border-color:rgba(248,81,73,.2);
  color:#f85149;
}
.bb-confirm-no:hover { background:rgba(248,81,73,.2); }

/* ── Light mode additions ── */
.bb-light .bb-receipt {
  background:#f8fafc;border-color:#e2e8f0;color:#1e293b;
}
.bb-light .bb-receipt-header { color:#2563eb;border-bottom-color:#e5e7eb; }
.bb-light .bb-confirm-bar {
  background:rgba(217,119,6,.06);border-top-color:rgba(217,119,6,.2);
}
.bb-light .bb-confirm-bar #bb-confirm-text { color:#1e293b; }
.bb-light .bb-confirm-yes { background:rgba(5,150,105,.1);border-color:rgba(5,150,105,.25);color:#059669; }
.bb-light .bb-confirm-no { background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.2);color:#dc2626; }


/* ══════════════════════════════════════════════════════════════════════════
   WEBSITE PORTAL OVERRIDES — matches /ask-steppinai aesthetic
   Scope: .bb-panel[data-portal="website"] only. Staff/client untouched.
   ══════════════════════════════════════════════════════════════════════════ */
.bb-panel[data-portal="website"] {
  width: min(900px, calc(100vw - 32px));
  max-height: 85vh;
  bottom: 84px;
  border-radius: 14px;
}
.bb-panel[data-portal="website"] .bb-messages {
  padding: 24px 28px;
  gap: 18px;
  min-height: 280px;
  max-height: calc(85vh - 200px);
}
.bb-panel[data-portal="website"] .bb-msg {
  max-width: 100%;
  padding: 6px 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 14px;
  line-height: 1.75;
  word-break: normal;
  overflow-wrap: anywhere;
}
.bb-panel[data-portal="website"] .bb-msg-user {
  align-self: flex-end;
  text-align: right;
  opacity: .9;
}
.bb-panel[data-portal="website"] .bb-msg-assistant {
  align-self: flex-start;
}
.bb-panel[data-portal="website"] .bb-msg-badge {
  font-size: 13px !important;
  font-weight: 700;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  margin: 0 0 10px 0 !important;
  border: 1px solid rgba(110,168,254,.35) !important;
  background: rgba(110,168,254,.08);
  color: #6ea8fe;
}
.bb-panel[data-portal="website"] .bb-input-wrap {
  padding: 18px 24px 20px;
  gap: 10px;
}
.bb-panel[data-portal="website"] .bb-attach { display: none; }
.bb-panel[data-portal="website"] .bb-input {
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 18px;
  border: 1px solid rgba(110,168,254,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  min-height: 56px;
  max-height: 160px;
  transition: border-color .15s;
}
.bb-panel[data-portal="website"] .bb-input:focus { border-color: #6ea8fe; }
.bb-panel[data-portal="website"] .bb-bottom-bar { margin-top: 4px; }
.bb-panel[data-portal="website"] .bb-send {
  width: auto;
  height: 44px;
  padding: 0 28px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  background: rgba(110,168,254,.18);
  border: 1px solid rgba(110,168,254,.35);
  color: #6ea8fe;
}
.bb-panel[data-portal="website"] .bb-send:hover {
  background: rgba(110,168,254,.28);
  border-color: #6ea8fe;
}
.bb-panel[data-portal="website"] .bb-send svg { display: none; }
.bb-panel[data-portal="website"] .bb-send::after { content: "Send"; }
.bb-panel[data-portal="website"] .bb-input-wrap::after { display: none; }

/* Light-mode website overrides */
.bb-panel[data-portal="website"].bb-light .bb-msg,
.bb-panel[data-portal="website"].bb-light .bb-msg-user,
.bb-panel[data-portal="website"].bb-light .bb-msg-assistant {
  color: #1e293b;
}
.bb-panel[data-portal="website"].bb-light .bb-msg-badge {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.25) !important;
  color: #2563eb;
}
.bb-panel[data-portal="website"].bb-light .bb-input {
  background: #ffffff;
  border-color: rgba(37,99,235,.2);
  color: #1e293b;
}
.bb-panel[data-portal="website"].bb-light .bb-input:focus { border-color: #2563eb; }
.bb-panel[data-portal="website"].bb-light .bb-send {
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.3);
  color: #2563eb;
}
.bb-panel[data-portal="website"].bb-light .bb-send:hover {
  background: rgba(37,99,235,.2);
  border-color: #2563eb;
}

/* Hide chat-app header on website panel — clean single-pane look */
.bb-panel[data-portal="website"] .bb-header { display: none; }

/* Force badge to render as block above text, in brand blue (overrides JS inline styles) */
.bb-panel[data-portal="website"] .bb-msg-badge {
  display: block !important;
  width: fit-content !important;
  background: rgba(37,99,235,.1) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,.35) !important;
}