/* Diamond SV Chat Widget
   Todos los selectores usan #dc-widget como prefijo (especificidad 1-1-0)
   para ganar contra cualquier CSS del tema de Shopify. */

/* ─── Reset ─────────────────────────────────────────────────────────────────── */
#dc-widget,
#dc-widget * {
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#dc-widget *:not(style):not(script) {
  margin: 0;
  padding: 0;
}

/* ─── FAB ────────────────────────────────────────────────────────────────────── */
#dc-widget .dc-fab {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: #40A600 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(64, 166, 0, 0.5) !important;
  z-index: 99998 !important;
  outline: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  animation: dc-pulse 2s ease-in-out infinite !important;
  padding: 0 !important;
}
#dc-widget .dc-fab:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 28px rgba(64, 166, 0, 0.65) !important;
}
#dc-widget .dc-fab.is-open {
  animation: none !important;
}

#dc-widget .dc-fab svg {
  position: absolute !important;
  width: 28px !important;
  height: 28px !important;
  fill: #fff !important;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
#dc-widget .dc-fab .dc-ico-chat  { opacity: 1 !important; transform: scale(1) rotate(0deg) !important; }
#dc-widget .dc-fab .dc-ico-close { opacity: 0 !important; transform: scale(0.4) rotate(-80deg) !important; }
#dc-widget .dc-fab.is-open .dc-ico-chat  { opacity: 0 !important; transform: scale(0.4) rotate(80deg) !important; }
#dc-widget .dc-fab.is-open .dc-ico-close { opacity: 1 !important; transform: scale(1) rotate(0deg) !important; }

@keyframes dc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(64, 166, 0, 0.6); }
  70%  { box-shadow: 0 0 0 18px rgba(64, 166, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(64, 166, 0, 0); }
}

/* ─── Globo flotante ─────────────────────────────────────────────────────────── */
#dc-widget .dc-bubble-hint {
  position: fixed !important;
  bottom: 96px !important;
  right: 16px !important;
  max-width: 220px !important;
  background: #ffffff !important;
  border-radius: 16px 16px 4px 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #111111 !important;
  line-height: 1.4 !important;
  z-index: 99998 !important;
  cursor: pointer !important;
  animation: dc-hint-in 0.4s ease !important;
}
#dc-widget .dc-bubble-hint::after {
  content: '' !important;
  position: absolute !important;
  bottom: -7px !important;
  right: 22px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 8px solid #ffffff !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.07)) !important;
}
#dc-widget .dc-hint-close {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #999 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  outline: none !important;
  transition: color 0.15s !important;
}
#dc-widget .dc-hint-close:hover { color: #555 !important; }
#dc-widget .dc-hint-text {
  padding-right: 16px !important;
  display: block !important;
}
@keyframes dc-hint-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Badge ──────────────────────────────────────────────────────────────────── */
#dc-widget .dc-badge {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  background: #ff3b30 !important;
  border: 2px solid #fff !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  animation: dc-badge-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes dc-badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ─── Chat Window ────────────────────────────────────────────────────────────── */
#dc-widget .dc-window {
  position: fixed !important;
  bottom: 96px !important;
  right: 24px !important;
  width: 370px !important;
  height: 580px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 99997 !important;
  /* estado oculto */
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.92) translateY(16px) !important;
  transform-origin: bottom right !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease !important;
}
#dc-widget .dc-window.is-open {
  opacity: 1 !important;
  pointer-events: all !important;
  transform: scale(1) translateY(0) !important;
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */
#dc-widget .dc-header {
  height: 64px !important;
  min-height: 64px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f0f0f0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

#dc-widget .dc-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: #40A600 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  letter-spacing: 0.5px !important;
}

#dc-widget .dc-header-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
#dc-widget .dc-header-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}
#dc-widget .dc-header-status {
  font-size: 12px !important;
  color: #22c55e !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1 !important;
}
#dc-widget .dc-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

#dc-widget .dc-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

#dc-widget .dc-new-btn,
#dc-widget .dc-close-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: #f5f5f5 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  outline: none !important;
  transition: background 0.15s !important;
  padding: 0 !important;
}
#dc-widget .dc-new-btn:hover  { background: #e8e8e8 !important; }
#dc-widget .dc-close-btn:hover { background: #e8e8e8 !important; }
#dc-widget .dc-new-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: #888888 !important;
}
#dc-widget .dc-close-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: #666666 !important;
}

/* ─── Messages Area ──────────────────────────────────────────────────────────── */
#dc-widget .dc-body {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fafafa !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  /* sin gap — cada .dc-row tiene su propio margin-bottom */
}
#dc-widget .dc-body::-webkit-scrollbar { width: 3px; }
#dc-widget .dc-body::-webkit-scrollbar-track { background: transparent; }
#dc-widget .dc-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

/* ─── Separador de fecha ─────────────────────────────────────────────────────── */
#dc-widget .dc-date-sep {
  text-align: center !important;
  font-size: 12px !important;
  color: #999999 !important;
  margin: 8px 0 12px !important;
  align-self: center !important;
  user-select: none !important;
  display: block !important;
}

/* ─── Filas de mensajes (wrapper burbuja + timestamp) ───────────────────────── */
#dc-widget .dc-row {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 12px !important;   /* espacio entre mensajes */
  animation: dc-msg-in 0.18s ease !important;
}
#dc-widget .dc-row:last-child {
  margin-bottom: 0 !important;
}
#dc-widget .dc-row.bot {
  align-items: flex-start !important;
}
#dc-widget .dc-row.user {
  align-items: flex-end !important;
}

@keyframes dc-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Burbujas ───────────────────────────────────────────────────────────────── */
#dc-widget .dc-bubble {
  max-width: 75% !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  display: block !important;
}
#dc-widget .dc-row.bot .dc-bubble {
  background: #ffffff !important;
  color: #111111 !important;
  border-radius: 4px 18px 18px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  align-self: flex-start !important;
}
#dc-widget .dc-row.user .dc-bubble {
  background: #40A600 !important;
  color: #ffffff !important;
  border-radius: 18px 4px 18px 18px !important;
  align-self: flex-end !important;
}

/* ─── Timestamp ──────────────────────────────────────────────────────────────── */
#dc-widget .dc-msg-time {
  font-size: 11px !important;
  color: #aaaaaa !important;
  margin-top: 4px !important;
  padding: 0 2px !important;
  display: block !important;
  line-height: 1 !important;
}
#dc-widget .dc-row.bot  .dc-msg-time { text-align: left !important; }
#dc-widget .dc-row.user .dc-msg-time { text-align: right !important; }

/* ─── Imagen en chat ─────────────────────────────────────────────────────────── */
#dc-widget .dc-img-wrap {
  cursor: zoom-in !important;
  line-height: 0 !important;
  display: block !important;
}
#dc-widget .dc-img-wrap img {
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 12px !important;
  margin-top: 4px !important;
  display: block !important;
  transition: opacity 0.15s !important;
}
#dc-widget .dc-img-wrap img:hover { opacity: 0.9 !important; }

/* ─── Indicador de escritura ─────────────────────────────────────────────────── */
#dc-widget .dc-typing-bubble {
  background: #ffffff !important;
  border-radius: 4px 18px 18px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 14px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
#dc-widget .dc-typing-bubble span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #bbbbbb !important;
  display: inline-block !important;
  animation: dc-bounce 1s ease-in-out infinite !important;
}
#dc-widget .dc-typing-bubble span:nth-child(2) { animation-delay: 0.2s !important; }
#dc-widget .dc-typing-bubble span:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes dc-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

/* ─── Catálogo ───────────────────────────────────────────────────────────────── */
#dc-widget .dc-catalog-intro {
  background: #ffffff !important;
  color: #111111 !important;
  border-radius: 4px 18px 18px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  max-width: 85% !important;
  display: block !important;
  align-self: flex-start !important;
}

#dc-widget .dc-catalog-grid {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 2px 8px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  width: 100% !important;
  align-self: stretch !important;
}
#dc-widget .dc-catalog-grid::-webkit-scrollbar { height: 3px; }
#dc-widget .dc-catalog-grid::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

#dc-widget .dc-card {
  position: relative !important;
  min-width: 138px !important;
  max-width: 138px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  display: block !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
#dc-widget .dc-card-num {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 3px 5px !important;
  border-radius: 4px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#dc-widget .dc-card:hover,
#dc-widget .dc-card:focus {
  border-color: #40A600 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(64, 166, 0, 0.18) !important;
}
#dc-widget .dc-card-img {
  width: 100% !important;
  height: 110px !important;
  object-fit: cover !important;
  display: block !important;
  background: #f5f5f5 !important;
}
#dc-widget .dc-card-body { padding: 8px 10px 10px !important; }
#dc-widget .dc-card-name {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #111111 !important;
  line-height: 1.35 !important;
  min-height: 32px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#dc-widget .dc-card-prices { margin-top: 5px !important; }
#dc-widget .dc-card-compare {
  display: block !important;
  font-size: 10px !important;
  color: #aaaaaa !important;
  text-decoration: line-through !important;
  line-height: 1.3 !important;
}
#dc-widget .dc-card-price {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #40A600 !important;
  line-height: 1.3 !important;
}
#dc-widget .dc-card-btn {
  display: block !important;
  width: 100% !important;
  margin-top: 7px !important;
  padding: 6px 0 !important;
  background: #40A600 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  text-align: center !important;
}
#dc-widget .dc-card-btn:hover { background: #358c00 !important; }

/* ─── Input Footer ───────────────────────────────────────────────────────────── */
#dc-widget .dc-footer {
  flex-shrink: 0 !important;
  padding: 12px 16px !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  background: #ffffff !important;
  border-top: 1px solid #f0f0f0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

#dc-widget .dc-input {
  flex: 1 !important;
  min-width: 0 !important;
  height: 44px !important;
  background: #f5f5f5 !important;
  border: none !important;
  border-radius: 22px !important;
  padding: 0 16px !important;
  font-size: 16px !important;     /* evita zoom automático en iOS */
  color: #111111 !important;
  outline: none !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}
#dc-widget .dc-input::placeholder { color: #bbbbbb; }

#dc-widget .dc-send-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: #40A600 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  outline: none !important;
  padding: 0 !important;
  transition: background 0.15s, transform 0.1s !important;
}
#dc-widget .dc-send-btn:hover { background: #358c00 !important; }
#dc-widget .dc-send-btn:active { transform: scale(0.93) !important; }
#dc-widget .dc-send-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff !important;
}

/* ─── Móvil — Pantalla Completa ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  #dc-widget .dc-window {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    transform: translateY(100%) !important;
    transform-origin: bottom center !important;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.15s ease !important;
  }
  #dc-widget .dc-window.is-open {
    transform: translateY(0) !important;
  }

  #dc-widget .dc-fab { bottom: 20px !important; right: 20px !important; }
  #dc-widget .dc-bubble { max-width: 82% !important; }
  #dc-widget .dc-img-wrap img { max-width: 65vw !important; }
  #dc-widget .dc-catalog-intro { max-width: 90% !important; }
}