/* Comban-specific overrides for the whatsapp_baileys gem chat component.
   All base styles live in the gem: whatsapp_baileys/whatsapp_chat.css */

/* Embedded chat inside card modal */
.whatsapp-embedded .whatsapp-chat-shell {
  height: 400px;
  border-radius: 8px;
}

.whatsapp-embedded .wa-chat-list {
  display: none;
}

.whatsapp-embedded .wa-messages-body {
  padding: 1rem 1.5rem;
}

/* A thread on a disconnected/unlinked session is history-only — hide the
   composer so nobody types into a dead session (the "Desconectada" badge in the
   card header explains why). */
.whatsapp-embedded--readonly .wa-compose {
  display: none;
}

/* Official (Kapso) number outside the 24h window: free-form text would silently
   fail at WhatsApp, so hide the composer and steer to the template form (the
   "Ventana cerrada" badge + banner explain why). */
.whatsapp-embedded--window-closed .wa-compose {
  display: none;
}

/* Agent-name tag on outbound bubbles. Injected by the whatsapp-sender-tag
   Stimulus controller (listens to the gem's wa-chat:message-rendered event).
   The host wrapper uses display:contents so it never affects the gem layout. */
.wa-sender-tag-host {
  display: contents;
}

.wa-message.sent .wa-bubble-sent-by {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.65;
  margin-bottom: 2px;
}

/* Failed delivery (e.g. sending free-form text after the 24h window closed).
   The gem applies .wa-msg-status-failed from the message status; make it clearly
   red and label it so a failed send never reads as delivered. */
.wa-msg-status-failed {
  color: #dc3545;
}

.wa-msg-status-failed::after {
  content: " · no entregado";
  font-size: 0.62rem;
  font-weight: 600;
  color: #dc3545;
}

/* WhatsApp-style live preview of a template in the card's "Enviar plantilla". */
.wa-tpl-preview {
  background: #d9fdd3;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  line-height: 1.35;
  min-height: 60px;
  word-break: break-word;
}

.wa-tpl-preview .wa-tpl-header {
  font-weight: 600;
  margin-bottom: 3px;
}

.wa-tpl-preview .wa-tpl-footer {
  font-size: 0.72rem;
  color: #667781;
  margin-top: 5px;
}