.mg-chat-launcher {
  position: fixed;
  z-index: 2400;
  right: 1.25rem;
  bottom: 1.35rem;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 2px solid rgba(161, 18, 38, .35);
  border-radius: 50%;
  background: linear-gradient(145deg, #f8cf65, #d98a00);
  color: #24190b;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  font-size: 1.45rem;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mg-chat-launcher:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0, 0, 0, .34); }
.mg-chat-launcher:focus-visible, .mg-chat-panel :focus-visible { outline: 3px solid #f4b400; outline-offset: 3px; }
.mg-chat-launcher-dot { position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #20a85a; }
.mg-chat-panel {
  position: fixed;
  z-index: 2401;
  right: 1.25rem;
  bottom: 6.1rem;
  display: flex;
  width: min(410px, calc(100vw - 2rem));
  max-height: min(680px, calc(100dvh - 8rem));
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(217, 138, 0, .48);
  border-radius: 22px;
  background: #171410;
  color: #faf6ee;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.mg-chat-panel.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
.mg-chat-panel[hidden], .mg-chat-thread[hidden], .mg-chat-gate [hidden] { display: none !important; }
.mg-chat-header { display: flex; flex: 0 0 auto; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(135deg, #30483a, #17251c); }
.mg-chat-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #f8cf65, #d98a00); }
.mg-chat-avatar img { width: 76%; height: 76%; object-fit: contain; border-radius: 50%; }
.mg-chat-header-copy { display: grid; min-width: 0; flex: 1; gap: .28rem; }
.mg-chat-header-copy strong { overflow: hidden; color: #fff; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.mg-chat-header-copy > span { color: rgba(255, 255, 255, .78); font-size: .72rem; }
.mg-chat-header-copy > span i { display: inline-block; width: 8px; height: 8px; margin-right: .3rem; border-radius: 50%; background: #7edda0; }
.mg-chat-close { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.mg-chat-gate { display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; padding: 1.25rem; }
.mg-chat-welcome { margin: 0 0 .25rem; color: rgba(250, 246, 238, .8); font-size: .9rem; line-height: 1.55; }
.mg-chat-welcome strong { display: block; margin-bottom: .25rem; color: #fff; font-size: 1.15rem; }
.mg-chat-gate label { color: rgba(250, 246, 238, .82); font-size: .77rem; font-weight: 700; }
.mg-chat-gate input { width: 100%; min-height: 54px; margin: 0; padding: .8rem 1rem; border: 1px solid #e5e2dc; border-radius: 12px; outline: none; background: #fff; color: #171410; font: inherit; font-size: 1rem; }
.mg-chat-gate input::placeholder { color: #8f8b83; }
.mg-chat-start, .mg-chat-whatsapp { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: .55rem; width: 100%; border: 0; border-radius: 12px; font: 700 .86rem var(--font-sans, system-ui); cursor: pointer; text-decoration: none; transition: background .2s, transform .2s; }
.mg-chat-start { background: #e88900; color: #171410; letter-spacing: .11em; text-transform: uppercase; }
.mg-chat-start:hover { transform: translateY(-1px); background: #f3a31c; }
.mg-chat-start:disabled { opacity: .65; cursor: wait; }
.mg-chat-whatsapp { background: #1fa855; color: #fff; }
.mg-chat-whatsapp:hover { transform: translateY(-1px); background: #17924a; color: #fff; }
.mg-chat-whatsapp i { font-size: 1.12rem; }
.mg-chat-divider { display: flex; align-items: center; gap: .65rem; color: rgba(250, 246, 238, .45); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.mg-chat-divider::before, .mg-chat-divider::after { height: 1px; flex: 1; background: rgba(255, 255, 255, .15); content: ''; }
.mg-chat-error, .mg-chat-thread-error { margin: 0; color: #ffaaa5; font-size: .8rem; line-height: 1.45; }
.mg-chat-thread { display: flex; min-height: 250px; flex: 1; flex-direction: column; }
.mg-chat-messages { display: flex; min-height: 200px; flex: 1; flex-direction: column; gap: .65rem; overflow-y: auto; padding: 1rem; background: radial-gradient(ellipse at 50% 0, rgba(217, 138, 0, .08), transparent 65%), #171410; }
.mg-chat-bubble { max-width: 86%; padding: .65rem .85rem; overflow-wrap: anywhere; border-radius: 16px; color: #faf6ee; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; }
.mg-chat-bubble--guest { align-self: flex-end; border-bottom-right-radius: 5px; background: linear-gradient(145deg, #f8cf65, #d98a00); color: #171410; }
.mg-chat-bubble--staff { align-self: flex-start; border: 1px solid rgba(255, 255, 255, .1); border-bottom-left-radius: 5px; background: rgba(255, 255, 255, .1); }
.mg-chat-bubble--system { max-width: 100%; align-self: center; padding: .25rem .5rem; background: transparent; color: rgba(255, 255, 255, .55); font-size: .72rem; text-align: center; }
.mg-chat-bubble time { display: block; margin-top: .2rem; opacity: .68; font-size: .64rem; }
.mg-chat-thread-error { padding: .45rem .8rem 0; }
.mg-chat-composer { display: flex; flex: 0 0 auto; align-items: flex-end; gap: .55rem; padding: .7rem .8rem; border-top: 1px solid rgba(255, 255, 255, .1); background: #1d1a15; }
.mg-chat-composer textarea { min-height: 44px; max-height: 110px; flex: 1; resize: none; padding: .68rem .8rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: #29251f; color: #fff; font: inherit; font-size: 16px; line-height: 1.4; }
.mg-chat-composer textarea::placeholder { color: rgba(255, 255, 255, .5); }
.mg-chat-composer button { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e88900; color: #171410; cursor: pointer; }
.mg-chat-composer button:disabled { opacity: .55; cursor: wait; }
.mg-chat-new { display: none; margin: .35rem .8rem .7rem; min-height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.mg-chat-panel.is-closed .mg-chat-composer { display: none; }
.mg-chat-panel.is-closed .mg-chat-new { display: block; }
@media (max-width: 768px) {
  .mg-chat-launcher { right: 1rem; bottom: calc(100px + env(safe-area-inset-bottom)); width: 58px; height: 58px; }
  .mg-chat-panel { right: .65rem; bottom: calc(168px + env(safe-area-inset-bottom)); width: min(430px, calc(100% - 1.3rem)); max-height: calc(100dvh - 190px - env(safe-area-inset-bottom)); border-radius: 20px; }
  .mg-chat-gate { padding: 1.1rem; }
}
@media (max-width: 380px) { .mg-chat-panel { right: .4rem; width: calc(100% - .8rem); } }
@media (prefers-reduced-motion: reduce) { .mg-chat-panel, .mg-chat-launcher { transition: none; } }
