/* Floating chat widget styles */
/* Floating chat widget (FAB) and panel */
/* Container is a fixed element at the bottom-right. Use column-reverse so the
   panel appears above the FAB and opens upwards. */
#chat-widget {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1080;
  font-family: inherit;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}

#chat-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(13,110,253,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#chat-toggle:focus { outline: 3px solid rgba(13,110,253,0.2); }
#chat-toggle i { font-size: 1.25rem; }

/* Chat panel (hidden by default) */

/* The panel is absolutely positioned within the fixed container so it opens
   upward from the FAB (anchored above). */
#chat-panel {
  position: absolute;
  right: 0;
  bottom: 72px; /* FAB height (56px) + gap */
  width: 320px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transform-origin: bottom right;
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
}

#chat-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chat-panel-header { padding: 12px 14px; border-bottom: 1px solid #f1f1f1; }
.chat-panel-body { padding: 12px 14px 16px; }
.chat-panel p.small { margin-bottom: 8px; }

/* Responsive: full-width panel near bottom on very small screens */
@media (max-width: 420px) {
  #chat-panel { width: calc(100% - 32px); border-radius: 10px; right: 8px; left: 8px; bottom: 80px; }
}

/* Better mobile layout for small phones/tablets */
@media (max-width: 576px) {
  #chat-widget {
    right: 12px;
    bottom: 12px;
    gap: 10px;
  }

  /* Make the panel span most of the viewport width and sit above the FAB */
  #chat-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 76px; /* FAB height + small gap */
    width: auto;
    border-radius: 12px;
    max-height: calc(100vh - 140px);
    overflow: auto;
  }

  .chat-panel.open { transform: translateY(0) scale(1); }

  /* Stack action buttons vertically and make them full-width */
  .chat-panel-body .d-grid, .chat-panel-body .d-flex {
    display: flex !important;
    flex-direction: column;
    gap: .5rem;
  }

  .chat-panel-body .btn { width: 100%; }

  /* Header adjustments */
  .chat-panel-header { padding: 10px 12px; }
  .chat-panel-header strong { display: block; white-space: normal; font-size: 1rem; }

  /* Ensure small helper text wraps cleanly */
  .chat-panel-body p.small { white-space: normal; }
}

  /* WhatsApp icon styling: use official WhatsApp green inside buttons */
  #chat-whatsapp .bi-whatsapp {
    color: #25D366 !important;
    font-size: 1.05rem;
  }

  /* If the icon appears elsewhere inside the widget, ensure it's green */
  .chat-panel .bi-whatsapp { color: #25D366 !important; }