.mfa-root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
.mfa-fab {
  position: fixed;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
  z-index: 99999;
  transition: transform .15s ease, filter .15s ease;
}
.mfa-fab:hover { transform: translateY(-1px); filter: brightness(1.03); }
.mfa-fab svg { width: 24px; height: 24px; }

\
.mfa-panel {
  position: fixed;
  bottom: 86px;
  width: 372px;
  max-width: calc(100vw - 24px);
  height: 540px;
  max-height: calc(100vh - 120px);
  color: rgba(255,255,255,.92);
  background: rgba(10, 14, 18, .78);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  z-index: 99999;
  display: none !important;
}
.mfa-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:20px;
  padding:1px;
  background: linear-gradient(135deg, rgba(34,197,94,.65), rgba(56,189,248,.35), rgba(34,197,94,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.65;
}
.mfa-panel[data-open="1"] { display: flex !important; flex-direction: column; }

\
.mfa-header {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.mfa-avatar { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.06); background: white; }
.mfa-avatar img { width: 100%; height: 100%; object-fit: cover; display:block; }
.mfa-title { line-height: 1.2; }
.mfa-title strong { display:block; font-size: 14px; }
.mfa-title small { display:block; font-size: 12px; opacity: .75; }
.mfa-actions { margin-left: auto; display:flex; gap: 8px; }
.mfa-iconbtn { width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.9); display:grid; place-items:center; cursor:pointer; }
.mfa-iconbtn svg{ width: 18px; height:18px; }

.mfa-messages { padding: 14px; overflow:auto; flex: 1 1 auto; display:flex; flex-direction: column; gap: 10px; }
\
.mfa-bubble {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
}
\
.mfa-bubble.user { margin-left: auto; background: rgba(255,255,255,.10); }
.mfa-bubble.assistant { margin-right: auto; }
.mfa-meta { font-size: 11px; opacity: .65; margin-top: 4px; }

.mfa-cards { display:grid; grid-template-columns: 1fr; gap: 10px; }
\
.mfa-card {
  display:flex;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.mfa-card img { width: 62px; height: 62px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(0,0,0,.06); background:#fff; }
.mfa-card h4 { margin: 0; font-size: 13px; line-height: 1.2; }
.mfa-card .mfa-price { font-size: 12px; opacity: .85; margin-top: 4px; }
.mfa-card .mfa-card-actions { margin-left: auto; display:flex; flex-direction: column; justify-content: space-between; align-items:flex-end; gap: 8px; }
.mfa-btn {
  padding: 8px 10px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  color: #0b0b0b;
  background: rgba(0,0,0,.06);
}
.mfa-btn.primary { color: white; }
\
.mfa-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.mfa-inputrow { display:flex; gap: 8px; align-items: center; }
\
.mfa-input {
  flex: 1 1 auto;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  padding: 0 12px;
  outline: none;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
}
.mfa-input::placeholder{ color: rgba(255,255,255,.55); }
.mfa-send { width: 42px; height: 40px; border-radius: 14px; border: 0; cursor: pointer; display:grid; place-items:center; }
.mfa-send svg{ width:18px; height:18px; }
.mfa-note { font-size: 11px; opacity: .7; margin-top: 8px; }

.mfa-embed { position: relative; width: 100%; min-height: 560px; border-radius: 18px; border: 1px solid rgba(0,0,0,.06); overflow:hidden; background: rgba(255,255,255,.65); }
.mfa-embed .mfa-panel { position: relative; bottom: auto; left: auto; right: auto; width: 100%; height: 560px; max-height: none; display:flex; }
.mfa-embed .mfa-fab { display: none !important; }

.mfa-title strong{ color: rgba(255,255,255,.95);} .mfa-title small{ color: rgba(255,255,255,.70);} 

.mfa-iconbtn{
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.mfa-iconbtn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.mfa-send{
  position: relative;
  overflow: hidden;
}
.mfa-send::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  opacity:.55;
  pointer-events:none;
}
.mfa-send{
  box-shadow: 0 10px 28px rgba(34,197,94,.25), 0 14px 35px rgba(0,0,0,.28);
}
.mfa-send:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.mfa-fab{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,14,18,.72);
}
.mfa-fab img{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(34,197,94,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.38);
  display:block;
}


/* Astra/theme hardening */
.mfa-root, .mfa-root * { box-sizing: border-box; }
.mfa-root button, .mfa-root input { font-family: inherit; }
.mfa-root button.mfa-fab,
.mfa-root button.mfa-iconbtn,
.mfa-root button.mfa-send{
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Force floating geometry (avoid any [class*="panel"] rules from theme) */
.mfa-root[data-mode="floating"] .mfa-panel {
  position: fixed !important;
  width: 372px !important;
  max-width: calc(100vw - 24px) !important;
  height: 540px !important;
  max-height: calc(100vh - 120px) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.mfa-root[data-pos="right"] .mfa-panel { right: 18px !important; left: auto !important; }
.mfa-root[data-pos="left"]  .mfa-panel { left: 18px !important; right: auto !important; }

.mfa-root[data-pos="right"] .mfa-fab{ right: 18px !important; left: auto !important; }
.mfa-root[data-pos="left"]  .mfa-fab{ left: 18px !important; right: auto !important; }

/* Make FAB avatar pop */
.mfa-fab{
  width: 60px !important;
  height: 60px !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 18, .82) !important;
  display: grid !important;
  place-items: center !important;
}
.mfa-fab img{
  width: 50px !important;
  height: 50px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  border: 2px solid rgba(34,197,94,.70) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 6px rgba(34,197,94,.12) !important;
}

.mfa-panel[data-open="1"]{ display:flex !important; }

.mfa-fab img{ pointer-events: none !important; }

.mfa-panel.mfa-open{ display:flex !important; flex-direction: column; }

.mfa-panel[data-open="1"]{ display:flex !important; flex-direction: column; }

/* Force always-on-top (some themes use huge z-index for sticky headers/whatsapp buttons) */
.mfa-fab{ z-index: 2147483647 !important; pointer-events: auto !important; }
.mfa-panel{ z-index: 2147483646 !important; pointer-events: auto !important; }
.mfa-panel *{ pointer-events: auto !important; }

.mfa-panel{
  bottom: 86px !important;
}

.mfa-fab{ cursor:pointer !important; touch-action: manipulation !important; }

/* High-contrast visibility fix */
.mfa-panel{
  background-color: #0a0e12 !important;
  background: linear-gradient(180deg, rgba(10,14,18,.96), rgba(10,14,18,.92)) !important;
  color: rgba(255,255,255,.94) !important;
}
.mfa-header{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
}
.mfa-messages{ color: rgba(255,255,255,.94) !important; }
.mfa-bubble{ color: rgba(255,255,255,.94) !important; }
.mfa-bubble.user{ background: rgba(255,255,255,.12) !important; }
.mfa-bubble.assistant{ background: rgba(255,255,255,.08) !important; }
.mfa-card{ background: rgba(255,255,255,.08) !important; }
.mfa-card h4{ color: rgba(255,255,255,.95) !important; }
.mfa-card .mfa-price{ color: rgba(255,255,255,.80) !important; }
.mfa-note{ color: rgba(255,255,255,.72) !important; }
.mfa-input{
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.95) !important;
}
.mfa-input::placeholder{ color: rgba(255,255,255,.55) !important; }
.mfa-iconbtn{ color: rgba(255,255,255,.90) !important; }
.mfa-title strong{ color: rgba(255,255,255,.96) !important; }
.mfa-title small{ color: rgba(255,255,255,.75) !important; }

/* So the decorative border overlay never washes out content */
.mfa-panel::before{ opacity: .45 !important; }