:root{
  --m2m-wc-bg: #0b141a;
  --m2m-wc-panel: #111b21;
  --m2m-wc-header: #202c33;
  --m2m-wc-bot: #202c33;
  --m2m-wc-user: #005c4b;
  --m2m-wc-text: #e9edef;
  --m2m-wc-muted: #8696a0;
  --m2m-wc-shadow: 0 18px 55px rgba(0,0,0,.35);
  --m2m-wc-radius: 18px;
}

.m2m-wc-root, .m2m-wc-shortcode { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.m2m-wc-widget{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}

.m2m-wc-embedded{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.m2m-wc-panel{
  width: 360px;
  height: 540px;
  background: var(--m2m-wc-panel);
  color: var(--m2m-wc-text);
  border-radius: var(--m2m-wc-radius);
  box-shadow: var(--m2m-wc-shadow);
  overflow: hidden;
  display: none;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.06);
}

.m2m-wc-embedded .m2m-wc-panel{
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
}

.m2m-wc-panel.is-open{ display: flex; }

.m2m-wc-header{
  height: 64px;
  padding: 10px 12px;
  background: var(--m2m-wc-header);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.m2m-wc-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  font-size: 18px;
}

.m2m-wc-title{ flex: 1; min-width: 0; }
.m2m-wc-brand{ font-weight: 700; font-size: 14px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2m-wc-status{ font-size: 12px; color: var(--m2m-wc-muted); margin-top: 2px; }

.m2m-wc-voice{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.m2m-wc-mic, .m2m-wc-spk{
  border: none;
  background: rgba(255,255,255,.08);
  color: var(--m2m-wc-text);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}
.m2m-wc-mic.is-on{
  outline: 2px solid rgba(0,168,132,.6);
}

.m2m-wc-close{
  border: none;
  background: transparent;
  color: var(--m2m-wc-text);
  font-size: 18px;
  padding: 8px 10px;
  cursor: pointer;
  opacity: .9;
}
.m2m-wc-close:hover{ opacity: 1; }

.m2m-wc-body{
  flex: 1;
  overflow: auto;
  padding: 14px 12px;
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(0,92,75,.22), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(32,44,51,.55), transparent 55%),
    var(--m2m-wc-bg);
}

.m2m-wc-messages{ display: flex; flex-direction: column; gap: 10px; }

.m2m-wc-bubble-wrap{ display: flex; }
.m2m-wc-bubble-wrap.is-user{ justify-content: flex-end; }
.m2m-wc-bubble-wrap.is-bot{ justify-content: flex-start; }

.m2m-wc-bubble{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid rgba(255,255,255,.06);
}

.m2m-wc-bubble-wrap.is-user .m2m-wc-bubble{
  background: var(--m2m-wc-user);
  border-bottom-right-radius: 6px;
}

.m2m-wc-bubble-wrap.is-bot .m2m-wc-bubble{
  background: var(--m2m-wc-bot);
  border-bottom-left-radius: 6px;
}

.m2m-wc-composer{
  display: flex;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: #0f191f;
}

.m2m-wc-input{
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--m2m-wc-text);
  border-radius: 999px;
  padding: 10px 12px;
  outline: none;
}

.m2m-wc-input::placeholder{ color: rgba(233,237,239,.55); }

.m2m-wc-send{
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  background: #00a884;
  color: #061a13;
}

.m2m-wc-send:disabled{ opacity: .55; cursor: not-allowed; }

.m2m-wc-launcher{
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--m2m-wc-shadow);
  background: #00a884;
  color: #062015;
  display: grid;
  place-items: center;
  position: relative;
}

.m2m-wc-launcher.is-hidden{ display: none; }

.m2m-wc-wa{ font-size: 22px; line-height: 1; }

.m2m-wc-typing{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
}
.m2m-wc-typing span{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(233,237,239,.7);
  opacity: .5;
  animation: m2m-wc-bounce 1s infinite ease-in-out;
}
.m2m-wc-typing span:nth-child(2){ animation-delay: .15s; }
.m2m-wc-typing span:nth-child(3){ animation-delay: .3s; }

@keyframes m2m-wc-bounce{
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-5px); opacity: .9; }
}

@media (max-width: 420px){
  .m2m-wc-panel{ width: calc(100vw - 24px); height: 72vh; }
  .m2m-wc-widget{ right: 12px; bottom: 12px; }
}