/* Root container aligns content to the side */
.alx-chat-widget-root {
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* right align by default */
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.alx-chat-widget-root.left {
  right: auto; left: 20px;
  align-items: flex-start; /* left align when pinned left */
}
.alx-dark { color-scheme: dark; }

/* WhatsApp-like card (desktop only) */
.alx-wa-card {
  width: 320px;
  max-width: 86vw;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.alx-dark .alx-wa-card { background: #101010; }

/* Header */
.alx-wa-header {
  background: #25D366;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alx-wa-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4' fill='white'/><path d='M4 20c0-4 4-6 8-6s8 2 8 6' fill='white'/></svg>");
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}
.alx-wa-title { font-weight: 700; line-height: 1.2; }
.alx-wa-sub   { font-size: 12px; opacity: .9; }

/* Chat area */
.alx-wa-chat {
  background: #ece5dd;
  background-image:
    radial-gradient(#e0dacf 1px, transparent 2px),
    radial-gradient(#e0dacf 1px, transparent 2px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  padding: 10px;
  min-height: 160px;
  max-height: 280px;
  overflow: auto;
}
.alx-dark .alx-wa-chat { background: #0b141a; background-image: none; }

.alx-msg {
  max-width: 80%;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.alx-msg.in  { background: #fff; }
.alx-msg.out { background: #dcf8c6; margin-left: auto; }
.alx-dark .alx-msg.in  { background: #1f2c34; color: #e8e8e8; }
.alx-dark .alx-msg.out { background: #005c4b; color: #e8e8e8; }

/* Composer */
.alx-wa-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #f7f7f7;
}
.alx-dark .alx-wa-composer { background: #111; border-top-color: #222; }

.alx-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.alx-dark .alx-input { background: #0d0d0d; color: #f0f0f0; box-shadow: inset 0 0 0 1px #222; }

.alx-send {
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.alx-send:active { transform: translateY(1px); opacity: .95; }

/* Telegram button (desktop) — stays on the right due to root flex alignment */
.alx-tg-fab {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #229ED9;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(34,158,217,.45);
  cursor: pointer;
  border: none;
}
.alx-tg-fab:hover { transform: translateY(-1px); }
.alx-tg-fab:active { transform: translateY(0); opacity: .95; }

/* Mobile-only buttons bar — vertical stack */
.alx-mobile-bar {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column; /* vertical */
  gap: 12px;
  z-index: 10000;
}
.alx-chat-widget-root.left .alx-mobile-bar { left: 16px; right: auto; }

.alx-fab {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  text-decoration: none;
}
.alx-fab.wa { background: #25D366; color: #fff; }
.alx-fab.tg { background: #229ED9; color: #fff; }

/* Hide desktop elements on mobile */
@media (max-width: 480px) {
  .alx-wa-card, .alx-tg-fab { display: none !important; }
}


/* Center and enlarge SVG icons inside circular buttons */
.alx-fab, .alx-tg-fab {
  line-height: 0;
  padding: 0;
}
.alx-fab svg, .alx-tg-fab svg {
  width: 80% !important;
  height: 80% !important;
  display: block;
}


/* --- Icon alignment fix --- */
.alx-fab, .alx-tg-fab {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding: 0 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 0 0 3px #fff !important; /* uniform white ring */
}

.alx-fab svg, .alx-tg-fab svg {
  width: 64% !important;
  height: 64% !important;
  display: block !important;
  margin: 0 auto !important;
  transform-origin: 50% 50% !important;
}
/* Mobile bar spacing to avoid overlap with rounded borders */
.alx-mobile-bar { gap: 14px; }


/* --- v1.2.7: smaller buttons, no white ring, equalized glyphs --- */
.alx-fab, .alx-tg-fab {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding: 0 !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.18) !important; /* removed inset white ring */
}

/* Base glyph size a bit smaller */
.alx-fab svg, .alx-tg-fab svg {
  width: 60% !important;
  height: 60% !important;
  display: block !important;
  margin: 0 auto !important;
  transform-origin: 50% 50% !important;
}

/* Telegram glyph visually lighter — scale it up slightly */
.alx-fab.tg svg, .alx-tg-fab svg {
  width: 70% !important;
  height: 70% !important;
}