/* ============ Mascote / chat ============ */
.mb-root{ position:fixed; right:18px; bottom:16px; z-index:90; font-family: var(--font, 'Poppins', Tahoma, sans-serif); }

/* ---- launcher ---- */
.mb-launch-wrap{ position:relative; width:124px; }
.mb-launch{ position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mb-launch:focus-visible{ outline:3px solid var(--cyan, #00CAD4); outline-offset:4px; border-radius:16px; }
.mb-svg{ display:block; width:100%; height:auto; overflow:visible; }
.mb-svg--launch{ animation: mb-float 4.2s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(16,38,104,.28)); transform-origin:50% 90%; }
.mb-launch:hover .mb-svg--launch{ animation-duration: 2.6s; }
.mb-shadow{ display:none; }
.mb-hide{
  position:absolute; top:-6px; right:-4px; z-index:2; width:22px; height:22px; border-radius:50%;
  border:0; background:rgba(16,38,104,.85); color:#fff; font-size:15px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .15s;
}
.mb-launch-wrap:hover .mb-hide, .mb-hide:focus-visible{ opacity:1; }
@media (hover:none){ .mb-hide{ opacity:.85; } }

@keyframes mb-float{
  0%,100%{ transform: translateY(0) rotate(-1.2deg); }
  50%{ transform: translateY(-9px) rotate(1.2deg); }
}
.is-greeting .mb-svg--launch{ animation: mb-hop 1.1s ease-in-out 2, mb-float 4.2s ease-in-out 2.2s infinite; }
@keyframes mb-hop{
  0%,100%{ transform: translateY(0) rotate(0); }
  30%{ transform: translateY(-22px) rotate(-5deg); }
  55%{ transform: translateY(0) rotate(3deg); }
  75%{ transform: translateY(-9px) rotate(-2deg); }
}

/* ---- rosto animado ---- */
.mb-face{ fill:#28DBF2; transform: translate(var(--fx, 0px), var(--fy, 0px)); transition: transform .16s ease-out; }
.mb-eye, .mb-smile, .mb-open{ fill:#28DBF2; }
.mb-eye{ transform-box:fill-box; transform-origin:50% 55%; animation: mb-blink 5.2s infinite; }
@keyframes mb-blink{ 0%,93%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(.08); } }
.mb-svg.wink .mb-eye--r{ animation: mb-wink .55s ease-in-out 1; }
@keyframes mb-wink{ 0%,100%{ transform:scaleY(1); } 35%,65%{ transform:scaleY(.08); } }
.mb-smile{ transform-box:fill-box; transform-origin:50% 15%; transition: transform .2s ease-out; }
.mb-svg.is-happy .mb-smile{ transform: scale(1.22, 1.45); }
.mb-open{ opacity:0; transform-box:fill-box; transform-origin:50% 0%; }
.is-talking .mb-smile{ opacity:0; }
.is-talking .mb-open{ opacity:1; transform: scaleY(.3); transition: transform .09s ease-out; }
.is-talking.mo .mb-open{ transform: scaleY(1); }
.mb-dots{ opacity:0; }
.mb-dot{ transform-box:fill-box; transform-origin:center; }
.is-thinking .mb-smile{ opacity:0; }
.is-thinking .mb-dots{ opacity:1; }
.is-thinking .mb-dot{ animation: mb-dot 1s ease-in-out infinite; }
.is-thinking .mb-dot--1{ animation-delay:.15s; }
.is-thinking .mb-dot--2{ animation-delay:.3s; }
@keyframes mb-dot{ 0%,100%{ transform:scale(.55); opacity:.55; } 50%{ transform:scale(1.25); opacity:1; } }
.is-thinking .mb-eye{ animation:none; transform: translateY(-14px) scaleY(.82); transition: transform .25s; }

/* ---- balão de saudação ---- */
.mb-bubble{
  position:absolute; right:8px; bottom:122px; width:230px; padding:12px 30px 12px 14px;
  background:#fff; color: var(--ink, #10182B); font-size:.85rem; line-height:1.45; font-weight:500;
  border-radius:14px 14px 4px 14px; box-shadow:0 14px 34px -12px rgba(16,38,104,.45), 0 0 0 1px var(--border, #E3E8F0);
  opacity:0; transform: translateY(8px) scale(.96); transform-origin:bottom right; pointer-events:none; transition:opacity .25s, transform .25s; cursor:pointer;
}
.mb-bubble.is-show{ opacity:1; transform:none; pointer-events:auto; }
.mb-bubble__x{ position:absolute; top:4px; right:6px; border:0; background:none; font-size:18px; line-height:1; color: var(--ink-soft, #4B5468); cursor:pointer; }

/* ---- painel ---- */
.mb-panel{
  position:absolute; right:0; bottom:132px; width:372px; max-width:calc(100vw - 24px);
  height:min(540px, calc(100vh - 170px)); display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:18px; box-shadow:0 28px 70px -18px rgba(16,38,104,.55), 0 0 0 1px var(--border, #E3E8F0);
  opacity:0; transform: translateY(14px) scale(.97); transform-origin:bottom right; pointer-events:none; visibility:hidden;
  transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.mb-panel.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition: opacity .2s, transform .2s; }
.mb-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; color:#fff; background: linear-gradient(135deg, #16307d, var(--navy, #102668)); }
.mb-avatar{ flex:none; width:46px; height:46px; border-radius:50%; background:#fff; overflow:hidden; box-shadow:0 0 0 2px rgba(255,255,255,.35); }
.mb-avatar .mb-svg{ width:100%; height:100%; }
.mb-title{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.mb-title strong{ font-size:.92rem; font-weight:700; }
.mb-title span{ font-size:.72rem; color:rgba(255,255,255,.78); display:flex; align-items:center; gap:6px; }
.mb-title i{ width:7px; height:7px; border-radius:50%; background: var(--green, #8DBA38); flex:none; }
.mb-close{ flex:none; width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.mb-close:hover{ background:rgba(255,255,255,.26); }

.mb-list{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background: var(--bg-muted, #F4F7FA); scroll-behavior:smooth; }
.mb-msg{ max-width:88%; padding:10px 13px; border-radius:14px; font-size:.88rem; line-height:1.5; overflow-wrap:anywhere; }
.mb-msg p{ margin:0 0 .55em; }
.mb-msg p:last-child{ margin-bottom:0; }
.mb-msg ul, .mb-msg ol{ margin:.2em 0 .55em; padding-left:1.15em; }
.mb-msg li{ margin-bottom:.2em; list-style:disc; }
.mb-msg ol li{ list-style:decimal; }
.mb-msg a{ color: var(--blue, #1F609E); font-weight:600; }
.mb-msg--bot{ align-self:flex-start; background:#fff; color: var(--ink, #10182B); border:1px solid var(--border, #E3E8F0); border-bottom-left-radius:4px; }
.mb-msg--user{ align-self:flex-end; background: var(--navy, #102668); color:#fff; border-bottom-right-radius:4px; }
.mb-typing{ display:flex; gap:5px; padding:13px 15px; }
.mb-typing span{ width:7px; height:7px; border-radius:50%; background: var(--blue, #1F609E); opacity:.4; animation: mb-typing 1s infinite; }
.mb-typing span:nth-child(2){ animation-delay:.15s; }
.mb-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes mb-typing{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

.mb-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.mb-chips button{
  border:1px solid var(--blue, #1F609E); background:#fff; color: var(--blue, #1F609E); border-radius:999px;
  padding:7px 12px; font-weight:600; font-size:.78rem; line-height:1.2; font-family:inherit; cursor:pointer; text-align:left;
  transition: background .15s, color .15s;
}
.mb-chips button:hover{ background: var(--blue, #1F609E); color:#fff; }

.mb-form{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--border, #E3E8F0); background:#fff; }
.mb-form input{ flex:1; min-width:0; font-weight:500; font-size:.9rem; font-family:inherit; padding:.65em 1em; border:1px solid var(--border, #E3E8F0); border-radius:999px; background: var(--bg-muted, #F4F7FA); }
.mb-form input:focus{ outline:2px solid var(--cyan, #00CAD4); outline-offset:1px; background:#fff; }
.mb-form button{ flex:none; width:40px; height:40px; border-radius:50%; border:0; background: var(--cyan, #00CAD4); color: var(--navy, #102668); display:grid; place-items:center; cursor:pointer; }
.mb-form button:disabled{ opacity:.5; cursor:default; }
.mb-note{ margin:0; padding:0 14px 10px; font-size:.68rem; line-height:1.4; color: var(--ink-soft, #4B5468); text-align:center; background:#fff; }
.mb-note a{ color: var(--blue, #1F609E); font-weight:600; }

@media (max-width: 560px){
  .mb-root{ right:10px; bottom:10px; }
  .mb-launch-wrap{ width:92px; }
  .mb-panel{ position:fixed; left:8px; right:8px; bottom:8px; width:auto; max-width:none; height:min(78vh, 600px); }
  .mb-bubble{ width:200px; bottom:96px; }
  .mb-root.is-open .mb-launch-wrap, .mb-root.is-open .mb-bubble{ display:none; }
}
/* Quem pediu menos movimento: sem flutuar/pular (movimentos grandes). Piscar, olhar e falar continuam,
   pois são pequenos e indicam o que o Blue está fazendo (pensando/falando). */
@media (prefers-reduced-motion: reduce){
  .mb-svg--launch, .is-greeting .mb-svg--launch{ animation:none !important; }
  .mb-panel, .mb-bubble{ transition:none; }
}

/* ---- voz do Blue (botão no cabeçalho do chat) ---- */
.mb-sound{ flex:none; width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:grid; place-items:center; }
.mb-sound:hover{ background:rgba(255,255,255,.26); }
.mb-sound .mb-slash{ display:none; }
.mb-sound.is-off .mb-slash{ display:block; }
.mb-sound.is-off .mb-waves{ display:none; }