/* ================================================================
   The 99 Percent — Health Navigator Chatbot
   All layout-critical rules use !important to guard against
   Breakdance / page-builder CSS resets overriding flex/display.
   ================================================================ */

/* ── Base reset scoped to our root ─────────────────────────────── */
#mlhc-root,
#mlhc-root *,
#mlhc-root *::before,
#mlhc-root *::after {
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
#mlhc-root * {
  margin: 0;
  padding: 0;
  line-height: normal;
}

#mlhc-root {
  --mc: #1d6fa4;
  --mc-bg: #ffffff;
  --mc-bot-bubble: #f1f5f9;
  --mc-text: #0f172a;
  --mc-muted: #64748b;
  --mc-border: #e2e8f0;
  --mc-light: rgba(29,111,164,0.1);
  font-size: 15px;
  color: var(--mc-text);
}

/* ── Toggle button ──────────────────────────────────────────────── */
.mc-toggle {
  position: fixed !important;
  bottom: 24px !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--mc) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483640 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  padding: 0 !important;
}
.mc-toggle.mc-right { right: 24px !important; left: auto !important; }
.mc-toggle.mc-left  { left: 24px !important;  right: auto !important; }
.mc-toggle:hover { transform: scale(1.07) !important; }

.mc-toggle-ring {
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 2px solid var(--mc) !important;
  opacity: 0 !important;
  animation: mc-pulse 2.4s ease-out infinite !important;
}
@keyframes mc-pulse {
  0%   { transform: scale(1);    opacity: .6; }
  70%  { transform: scale(1.35); opacity: 0;  }
  100% { transform: scale(1.35); opacity: 0;  }
}

.mc-ico {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}
.mc-ico-x { display: none !important; }

/* ── Chat panel ─────────────────────────────────────────────────── */
.mc-panel {
  position: fixed !important;
  bottom: 96px !important;
  width: 380px !important;
  max-width: calc(100vw - 32px) !important;
  height: 580px !important;
  max-height: calc(100dvh - 130px) !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 2147483639 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20px) scale(.97) !important;
  transition: opacity .28s ease, transform .28s ease !important;
}
.mc-panel.mc-right { right: 24px !important; left: auto !important; }
.mc-panel.mc-left  { left: 24px !important;  right: auto !important; }
.mc-panel.mc-open  {
  opacity: 1 !important;
  pointer-events: all !important;
  transform: translateY(0) scale(1) !important;
}

/* ── Header ─────────────────────────────────────────────────────── */
.mc-header {
  background: var(--mc) !important;
  padding: 14px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.mc-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.mc-bot-avatar {
  font-size: 26px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}
.mc-header-name {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}
.mc-header-status {
  color: rgba(255,255,255,.85) !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.3 !important;
}
.mc-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
.mc-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
}
.mc-lang-select {
  font-size: 11px !important;
  padding: 3px 5px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  cursor: pointer !important;
  flex: 1 !important;
  min-width: 0 !important;
  max-width: 130px !important;
  height: 28px !important;
}
.mc-lang-select option { background: #1e3a5f !important; color: #fff !important; }
.mc-icon-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.mc-icon-btn:hover { background: rgba(255,255,255,.28) !important; }
.mc-icon-btn svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}
.mc-speaker-off { opacity: .45 !important; }

/* ── Messages ───────────────────────────────────────────────────── */
#mc-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 14px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  scroll-behavior: smooth !important;
}
#mc-messages::-webkit-scrollbar { width: 4px !important; }
#mc-messages::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 99px !important; }

.mc-msg {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px !important;
  animation: mc-slide-in .2s ease-out both !important;
  width: 100% !important;
}
@keyframes mc-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-msg-bot  { justify-content: flex-start !important; }
.mc-msg-user { justify-content: flex-end !important; flex-direction: row-reverse !important; }

.mc-avatar {
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-bottom: 18px !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
  display: block !important;
}
.mc-msg-body {
  display: flex !important;
  flex-direction: column !important;
  max-width: 80% !important;
  min-width: 0 !important;
}
.mc-msg-bot  .mc-msg-body { align-items: flex-start !important; }
.mc-msg-user .mc-msg-body { align-items: flex-end !important; }

.mc-bubble {
  padding: 10px 13px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  word-break: break-word !important;
  border-radius: 14px !important;
  display: block !important;
}
.mc-msg-bot  .mc-bubble {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-bottom-left-radius: 4px !important;
}
.mc-msg-user .mc-bubble {
  background: var(--mc) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}
.mc-time {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 3px !important;
  padding: 0 2px !important;
  display: block !important;
}

/* ── Typing indicator ───────────────────────────────────────────── */
.mc-typing-bubble {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 13px 16px !important;
}
.mc-typing-bubble span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
  display: inline-block !important;
  animation: mc-bounce 1.3s infinite ease-in-out !important;
}
.mc-typing-bubble span:nth-child(2) { animation-delay: .18s !important; }
.mc-typing-bubble span:nth-child(3) { animation-delay: .36s !important; }
@keyframes mc-bounce {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-7px); }
}

/* ── Voice bar — hidden by default, shown via .mc-visible class ─── */
.mc-voice-bar {
  display: none !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  background: #fffbeb !important;
  border-top: 1px solid #fde68a !important;
  flex-shrink: 0 !important;
}
.mc-voice-bar.mc-visible {
  display: flex !important;
}
.mc-waveform {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}
.mc-waveform span {
  width: 3px !important;
  border-radius: 99px !important;
  background: #f59e0b !important;
  display: inline-block !important;
  animation: mc-wave 1s infinite ease-in-out !important;
}
.mc-waveform span:nth-child(1) { height: 8px !important;  animation-delay: 0s !important;   }
.mc-waveform span:nth-child(2) { height: 16px !important; animation-delay: .1s !important;  }
.mc-waveform span:nth-child(3) { height: 22px !important; animation-delay: .2s !important;  }
.mc-waveform span:nth-child(4) { height: 16px !important; animation-delay: .3s !important;  }
.mc-waveform span:nth-child(5) { height: 8px !important;  animation-delay: .4s !important;  }
@keyframes mc-wave {
  0%,100% { transform: scaleY(1);   opacity: .7; }
  50%      { transform: scaleY(.4); opacity: 1;  }
}
#mc-voice-text {
  flex: 1 !important;
  font-size: 13px !important;
  color: #92400e !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.mc-cancel-btn {
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid #fcd34d !important;
  background: transparent !important;
  color: #92400e !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* ── Disclaimer ─────────────────────────────────────────────────── */
.mc-disclaimer {
  font-size: 11px !important;
  color: #94a3b8 !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 6px 14px !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* ── Input area ─────────────────────────────────────────────────── */
.mc-input-area {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}
.mc-mic-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: all .18s !important;
}
.mc-mic-btn:hover { border-color: var(--mc) !important; color: var(--mc) !important; }
.mc-mic-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; }
.mc-mic-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}
.mc-mic-btn.mc-recording {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  animation: mc-mic-pulse 1.1s infinite ease-in-out !important;
}
@keyframes mc-mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
  50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

#mc-input {
  flex: 1 !important;
  resize: none !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  line-height: 1.5 !important;
  max-height: 110px !important;
  overflow-y: auto !important;
  outline: none !important;
  font-family: inherit !important;
  display: block !important;
  min-width: 0 !important;
  transition: border-color .18s, background .18s !important;
}
#mc-input:focus {
  border-color: var(--mc) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(29,111,164,0.1) !important;
}
#mc-input::placeholder { color: #94a3b8 !important; }
#mc-input:disabled { opacity: .5 !important; }

.mc-send-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: all .18s !important;
}
.mc-send-btn svg { width: 16px !important; height: 16px !important; display: block !important; }
.mc-send-btn.mc-send-active {
  background: var(--mc) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}
.mc-send-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 500px) {

  /* Toggle — above iPhone home bar; hidden when panel is open */
  .mc-toggle {
    width: 56px !important;
    height: 56px !important;
    bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
  }
  .mc-toggle.mc-right { right: 16px !important; }
  .mc-toggle.mc-left  { left: 16px !important; }
  /* Hide toggle when panel is open so it doesn't cover the input area */
  .mc-toggle.mc-panel-open { display: none !important; }

  /* Panel — floating card with even margins on all sides */
  .mc-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - 90px) !important;
    max-height: calc(100dvh - 90px) !important;
    border-radius: 20px !important;
    transform: translateY(calc(100% + 20px)) !important;
    transition: transform .32s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    opacity: 1 !important;
  }
  .mc-panel.mc-open {
    transform: translateY(0) !important;
    pointer-events: all !important;
  }

  /* Header — single compact row on mobile */
  .mc-header {
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px 12px !important;
    gap: 10px !important;
  }
  .mc-header-left { flex: 1 !important; min-width: 0 !important; gap: 8px !important; }
  .mc-header-right { flex-shrink: 0 !important; gap: 4px !important; }
  .mc-bot-avatar { font-size: 22px !important; }
  .mc-header-name { font-size: 14px !important; }
  .mc-header-status { font-size: 10px !important; }
  .mc-lang-select { max-width: 90px !important; font-size: 11px !important; }

  /* Larger touch targets (min 44px for mic/send) */
  .mc-icon-btn { width: 36px !important; height: 36px !important; }
  .mc-mic-btn  { width: 44px !important; height: 44px !important; }
  .mc-send-btn { width: 44px !important; height: 44px !important; }

  /* Messages */
  #mc-messages { padding: 16px 14px 10px !important; }

  /* Input area — safe area for iPhone home bar */
  .mc-input-area {
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #mc-input { font-size: 16px !important; } /* prevents iOS auto-zoom on focus */

  /* Disclaimer */
  .mc-disclaimer { padding: 5px 12px !important; font-size: 10.5px !important; }
}

/* ── Mobile drag handle ─────────────────────────────────────────── */
@media (max-width: 500px) {
  .mc-panel::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    background: rgba(0,0,0,0.15) !important;
    border-radius: 99px !important;
    margin: 10px auto 0 !important;
    flex-shrink: 0 !important;
  }
}

/* ── Reduce motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mc-toggle-ring,
  .mc-typing-bubble span,
  .mc-waveform span,
  .mc-mic-btn.mc-recording { animation: none !important; }
}