/* WhatsApp widget. */
.wac-widget {
  --wac-color: #25D366;
  --wac-header: #128C7E;
  --wac-surface: #EEF5F1;
  --wac-card: #ffffff;
  --wac-ink: #111827;
  --wac-muted: #8a8a8a;
  --wac-border: rgba(0, 0, 0, .08);
  position: fixed;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wac-bottom-right { right: 24px; align-items: flex-end; }
.wac-bottom-left { left: 24px; align-items: flex-start; }

.wac-launcher {
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--wac-color);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.wac-launcher:hover { transform: scale(1.05); }
.wac-launcher svg { width: 32px; height: 32px; }

.wac-panel {
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  margin-bottom: 16px;
  animation: wac-in .18s ease;
}
@keyframes wac-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header (shared teal for both views). */
.wac-head { color: #fff; padding: 18px 20px; background: var(--wac-header); }
.wac-head-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; }
.wac-head-title svg { width: 26px; height: 26px; }
.wac-head-sub { margin-top: 8px; font-size: 14px; line-height: 1.4; opacity: .95; }

/* Agent selector. */
.wac-list { padding: 14px 14px 12px; background: var(--wac-surface); max-height: 60vh; overflow-y: auto; }
.wac-reply { color: #6b7280; font-size: 13px; margin: 2px 4px 12px; }
.wac-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wac-card);
  border: 0.5px solid var(--wac-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease;
}
.wac-card:hover { border-color: rgba(0, 0, 0, .22); }
.wac-av-wrap { position: relative; flex: 0 0 auto; }
.wac-card-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.wac-dot { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.wac-dot-online { background: #22c55e; }
.wac-dot-offline { background: #f59e0b; }
.wac-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wac-card-role { font-size: 12px; color: var(--wac-muted); }
.wac-card-name { font-size: 16px; font-weight: 700; color: var(--wac-ink); }
.wac-card-go { color: #c2c2c2; display: flex; flex: 0 0 auto; }
.wac-card-go svg { width: 22px; height: 22px; }
.wac-list-footer { text-align: center; font-size: 12px; color: #4a5f59; padding: 8px 4px 2px; margin: 0; }

/* Chat bubble view. */
.wac-head-chat { display: flex; align-items: center; gap: 12px; }
.wac-back { background: none; border: 0; color: #fff; cursor: pointer; padding: 0; display: flex; }
.wac-back svg { width: 24px; height: 24px; }
.wac-chat-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.wac-chat-meta { display: flex; flex-direction: column; }
.wac-chat-name { font-size: 16px; font-weight: 700; }
.wac-chat-status { font-size: 13px; opacity: .9; }
.wac-chat-body { padding: 22px 18px; min-height: 120px; background: var(--wac-surface); }
.wac-bubble { background: var(--wac-card); border: 0.5px solid var(--wac-border); border-radius: 2px 12px 12px 12px; padding: 10px 14px; max-width: 82%; }
.wac-bubble p { margin: 0; font-size: 15px; color: var(--wac-ink); line-height: 1.4; }
.wac-bubble p + p { margin-top: 2px; }

.wac-compose { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f0f0f0; }
.wac-input { flex: 1; border: 0; border-radius: 24px; padding: 12px 16px; font-size: 14px; outline: none; }
.wac-send { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--wac-color); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.wac-send svg { width: 22px; height: 22px; }

.wac-initials { display: flex; align-items: center; justify-content: center; background: var(--wac-color); color: #fff; font-weight: 700; }

.wac-branding { text-align: center; font-size: 12px; color: #9aa0a6; padding: 9px 10px; background: #fff; border-top: 0.5px solid var(--wac-border); }
.wac-branding-link { color: var(--wac-color); text-decoration: none; font-weight: 500; }
.wac-branding-link:hover { text-decoration: underline; }

/* Contextual "edit block" menu: the widget sits at the bottom of the viewport,
   so open the menu above the pencil instead of below (where it gets clipped).
   Force absolute positioning and a strong selector so this holds on any admin
   theme (Claro, Gin, etc.), which may set the list to position:relative. */
.wac-widget.contextual-region .contextual .contextual-links {
  position: absolute;
  top: auto;
  bottom: 100%;
  margin: 0;
}
/* Transparent hover bridge under the menu so moving the pointer from the pencil
   up to the options never leaves the hoverable region (the menu opens above the
   fixed launcher), which otherwise makes Drupal hide the contextual links. */
.wac-widget.contextual-region .contextual .contextual-links::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}
.wac-widget.wac-bottom-right .contextual .contextual-links { left: auto; right: 0; }
.wac-widget.wac-bottom-left .contextual .contextual-links { left: 0; right: auto; }