/* =========================================================================
   MercyBeam Voice AI Agent — Widget Styles
   Bottom-right · minimized by default · never auto-interrupts
   ========================================================================= */

.mba-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 9999;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  border: 0; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(37, 99, 235, .45);
  transition: transform .2s, box-shadow .2s;
}
.mba-launcher:hover { transform: scale(1.07); box-shadow: 0 16px 40px rgba(37, 99, 235, .55); }
.mba-launcher svg { width: 30px; height: 30px; color: #fff; }
.mba-launcher .mba-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, .5); animation: mbaPulse 2.4s infinite;
}
@keyframes mbaPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}
.mba-launcher-label {
  position: fixed; right: 96px; bottom: 38px; z-index: 9999;
  background: #0a1228; color: #fff; font: 600 .82rem/1.3 'Inter', sans-serif;
  padding: 8px 14px; border-radius: 10px; pointer-events: none;
  opacity: 0; transform: translateX(8px); transition: .25s;
}
.mba-launcher:hover + .mba-launcher-label { opacity: 1; transform: none; }

/* ---------- Panel ---------- */
.mba-panel {
  position: fixed; right: 22px; bottom: 100px; z-index: 9999;
  width: min(400px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 130px));
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(10, 18, 40, .35);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(20px) scale(.97); pointer-events: none;
  transition: opacity .25s, transform .25s;
  font-family: 'Inter', system-ui, sans-serif;
}
.mba-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.mba-head {
  background: linear-gradient(135deg, #0a1228 0%, #1d3a8a 100%);
  color: #fff; padding: 18px 20px; display: flex; align-items: center; gap: 13px; flex: none;
}
.mba-head-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  display: grid; place-items: center; position: relative;
}
.mba-head-avatar svg { width: 22px; height: 22px; color: #fff; }
.mba-head-avatar .status {
  position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-radius: 50%; background: #10b981; border: 2.5px solid #0e1c46;
}
.mba-head-info { flex: 1; min-width: 0; }
.mba-head-info strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; }
.mba-head-info span { font-size: .76rem; color: #9db4ec; }
.mba-head button {
  background: rgba(255,255,255,.1); border: 0; color: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  transition: background .2s;
}
.mba-head button:hover { background: rgba(255,255,255,.22); }
.mba-head button svg { width: 17px; height: 17px; }
.mba-head button.active { background: #06b6d4; }

/* ---------- Messages ---------- */
.mba-messages {
  flex: 1; overflow-y: auto; padding: 20px 18px;
  background: #f6f8fc; display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.mba-msg { max-width: 84%; padding: 12px 16px; border-radius: 16px; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.mba-msg.bot { background: #fff; color: #16203b; border: 1px solid #e4e9f2; border-bottom-left-radius: 6px; align-self: flex-start; box-shadow: 0 2px 8px rgba(13,30,70,.05); }
.mba-msg.user { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.mba-msg.system { align-self: center; background: transparent; color: #8a96b3; font-size: .76rem; padding: 2px 8px; }

.mba-typing { display: inline-flex; gap: 5px; padding: 14px 18px; }
.mba-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: #94a3c8; display: block;
  animation: mbaBlink 1.2s infinite;
}
.mba-typing i:nth-child(2) { animation-delay: .2s; }
.mba-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes mbaBlink { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Quick replies */
.mba-quick { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 95%; }
.mba-quick button {
  background: #fff; border: 1.5px solid #c7d6f5; color: #2563eb; cursor: pointer;
  font: 600 .82rem/1.2 'Inter', sans-serif; padding: 9px 15px; border-radius: 999px;
  transition: background .18s, color .18s;
}
.mba-quick button:hover { background: #2563eb; color: #fff; border-color: #2563eb; }

/* ---------- Input bar ---------- */
.mba-inputbar {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 13px 14px; background: #fff; border-top: 1px solid #e4e9f2;
}
.mba-inputbar input {
  flex: 1; border: 1.5px solid #e4e9f2; border-radius: 999px;
  padding: 11px 18px; font: 400 .93rem 'Inter', sans-serif; min-width: 0;
}
.mba-inputbar input:focus { outline: none; border-color: #2563eb; }
.mba-iconbtn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  display: grid; place-items: center; transition: transform .15s, background .2s;
}
.mba-iconbtn svg { width: 20px; height: 20px; }
.mba-iconbtn:active { transform: scale(.92); }
.mba-send { background: linear-gradient(135deg, #2563eb, #06b6d4); color: #fff; }
.mba-mic { background: #eef2f9; color: #16203b; position: relative; }
.mba-mic.listening { background: #ef4444; color: #fff; }
.mba-mic.listening::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, .5); animation: mbaPulse 1.4s infinite;
}
.mba-mic[disabled] { opacity: .4; cursor: not-allowed; }

/* Voice status strip */
.mba-voicestate {
  flex: none; text-align: center; font: 600 .78rem 'Inter', sans-serif;
  color: #2563eb; background: #eaf1ff; padding: 7px; display: none;
}
.mba-voicestate.show { display: block; }

.mba-footnote {
  flex: none; text-align: center; font-size: .68rem; color: #9aa6c0;
  padding: 7px 12px 10px; background: #fff;
}

@media (max-width: 480px) {
  .mba-panel { right: 16px; bottom: 92px; border-radius: 18px; }
  .mba-launcher { right: 16px; bottom: 16px; }
}