/* =========================================================
   UNAM | chat da Mag + botão de WhatsApp (js/chat.js)
   ========================================================= */
.mchat { --mb: max(16px, env(safe-area-inset-bottom)); font-family: var(--font); }
.mchat__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botões flutuantes */
.mchat__wa, .mchat__fab {
  position: fixed; right: 16px; z-index: 45; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; transition: transform .25s var(--ease), opacity .25s;
}
.mchat__wa { bottom: calc(var(--mb) + 72px); width: 52px; height: 52px; background: #25d366; color: #fff; box-shadow: 0 10px 26px rgba(37, 211, 102, .4); }
.mchat__wa svg { width: 28px; height: 28px; fill: currentColor; }
.mchat__fab {
  bottom: var(--mb); height: 56px; padding: 0 20px 0 8px; gap: 10px;
  background: var(--orange); color: #1a0d04; font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 30px rgba(255, 107, 26, .45);
}
.mchat__fab-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #0b2744; }
.mchat__wa:hover, .mchat__fab:hover { transform: translateY(-2px); }
.mchat.is-open .mchat__fab, .mchat.is-open .mchat__wa { opacity: 0; pointer-events: none; }
body.menu-open .mchat { display: none; }

/* Painel */
.mchat__panel {
  position: fixed; z-index: 46; left: 8px; right: 8px; bottom: 8px;
  height: min(78svh, 620px); display: flex; flex-direction: column; overflow: hidden;
  background: #071426; color: #e6eef6; border: 1px solid rgba(143, 196, 255, .2); border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  animation: mchatIn .35s var(--ease);
}
.mchat__panel[hidden] { display: none; }
@keyframes mchatIn { from { opacity: 0; transform: translateY(16px); } }
.mchat__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(120deg, #0b2744, #071b33); border-bottom: 1px solid rgba(143, 196, 255, .14); }
/* ZIG em azul, NEX em laranja */
.mchat__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--blue); box-shadow: 0 0 0 4px rgba(31, 176, 255, .18); transition: border-color .3s, box-shadow .3s; }
.mchat[data-persona="nex"] .mchat__av { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 107, 26, .2); }
.mchat__head div { flex: 1; min-width: 0; }
.mchat__title { display: block; font-size: 16px; }
.mchat__sub { display: block; font-size: 12px; color: var(--muted-d); }
.mchat__x { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px; flex-shrink: 0; }

.mchat__log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.mchat__msg { max-width: 88%; }
.mchat__msg p { padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.mchat__msg--bot { align-self: flex-start; display: flex; align-items: flex-end; gap: 8px; }
.mchat__mav { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(143, 196, 255, .35); }
.mchat__msg--bot .mchat__body { min-width: 0; }
.mchat__msg--bot p { background: rgba(255, 255, 255, .07); border-bottom-left-radius: 6px; }
.mchat__msg--visitante { align-self: flex-end; }
.mchat__msg--visitante p { background: var(--blue-2); color: #fff; border-bottom-right-radius: 6px; }
.mchat__msg--typing p { display: inline-flex; gap: 4px; padding: 14px 16px; }
.mchat__msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-d); animation: mchatDot 1.2s infinite; }
.mchat__msg--typing i:nth-child(2) { animation-delay: .15s; }
.mchat__msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mchatDot { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .4; } }

.mchat__opts { display: grid; gap: 8px; margin-top: 8px; }
.mchat__opt {
  text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(143, 196, 255, .25);
  background: rgba(31, 176, 255, .06); transition: border-color .2s, background .2s;
}
.mchat__opt:hover:not(:disabled) { border-color: var(--orange); background: rgba(255, 107, 26, .08); }
.mchat__opt b { display: block; font-size: 15px; color: #fff; }
.mchat__opt span { font-size: 13px; color: var(--muted-d); }
.mchat__opt:disabled { opacity: .45; cursor: default; }
.mchat__opt.is-on { opacity: 1; border-color: var(--orange); }

.mchat__towa {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 42px; padding: 0 16px;
  border-radius: 999px; background: #25d366; color: #062e15; font-weight: 700; font-size: 14px;
}
.mchat__towa svg { width: 20px; height: 20px; fill: currentColor; }

.mchat__form { padding: 8px 12px 12px; border-top: 1px solid rgba(143, 196, 255, .14); }
.mchat__change { font-size: 13px; color: var(--blue); padding: 4px 2px 8px; }
.mchat__row { display: flex; align-items: flex-end; gap: 8px; }
.mchat__in {
  flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 22px;
  border: 1px solid rgba(143, 196, 255, .25); background: rgba(255, 255, 255, .05); color: #fff;
  font: inherit; font-size: 16px; line-height: 1.35;
}
.mchat__in::placeholder { color: #7f94aa; }
.mchat__in:focus { outline: none; border-color: var(--blue); }
.mchat__send { width: 44px; height: 44px; border-radius: 50%; background: var(--orange); flex-shrink: 0; display: grid; place-items: center; }
.mchat__send svg { width: 20px; height: 20px; fill: #1a0d04; }
.mchat__send:disabled { opacity: .5; }
.mchat__note { margin-top: 8px; font-size: 11.5px; color: #7f94aa; text-align: center; }
.mchat__form[hidden] { display: none; }

@media (min-width: 640px) {
  .mchat__wa { right: 24px; bottom: calc(var(--mb) + 80px); width: 56px; height: 56px; }
  .mchat__fab { right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); }
  .mchat__panel { left: auto; right: 24px; bottom: 24px; width: 390px; height: min(80svh, 620px); }
}
@media (max-width: 380px) {
  .mchat__fab-label { display: none; }
  .mchat__fab { width: 56px; padding: 0; }
  .mchat__fab-av { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .mchat__panel, .mchat__msg--typing i { animation: none; }
}