/* ==========================================================================
   Nitro Simracing — Chat Component (nc-*) + Chat Burbuja Móvil
   Cargado via index.css → siempre disponible cuando sn_chat_sim está activo
   ========================================================================== */

/* ──────────────────────────────────────────────
   1. CONTENEDOR RAÍZ (chat desktop)
   ────────────────────────────────────────────── */
.nitro-chat-v2 {
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(155deg, rgba(7, 12, 22, 0.92), rgba(10, 16, 28, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  font-family: var(--sn-font-sans, 'Akshar', system-ui, sans-serif) !important;
  font-size: 0.9rem !important;
  color: #e2e8f0 !important;
  min-height: 280px !important;
  position: relative !important;
}

.nitro-chat-v2 .nc-chat {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}

/* ──────────────────────────────────────────────
   2. HEADER del CHAT
   ────────────────────────────────────────────── */
.nitro-chat-v2 .nc-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
}

.nitro-chat-v2 .nc-header__main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.nitro-chat-v2 .nc-title {
  margin: 0 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.nitro-chat-v2 .nc-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Botón mute/sound */
.nitro-chat-v2 .nc-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border: none !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s !important;
}

.nitro-chat-v2 .nc-control:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  filter: none !important;
}

.nitro-chat-v2 .nc-control[aria-pressed="true"] {
  background: rgba(201, 13, 5, 0.15) !important;
  color: #ff4d4d !important;
}

.nitro-chat-v2 .nc-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
}

.nitro-chat-v2 .nc-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.nitro-chat-v2 .nc-icon--sound-off {
  display: none !important;
}

.nitro-chat-v2 .nc-control[aria-pressed="true"] .nc-icon--sound-on {
  display: none !important;
}

.nitro-chat-v2 .nc-control[aria-pressed="true"] .nc-icon--sound-off {
  display: inline-flex !important;
}

/* Contador */
.nitro-chat-v2 .nc-users {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  white-space: nowrap !important;
}

.nitro-chat-v2 .nc-users__count {
  font-weight: 700 !important;
  color: #34c759 !important;
}

/* ──────────────────────────────────────────────
   3. ÁREA DE MENSAJES
   ────────────────────────────────────────────── */
.nitro-chat-v2 .nc-messages {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-height: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent !important;
  background: transparent !important;
}

.nitro-chat-v2 .nc-messages::-webkit-scrollbar {
  width: 4px;
}

.nitro-chat-v2 .nc-messages::-webkit-scrollbar-track {
  background: transparent;
}

.nitro-chat-v2 .nc-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.nitro-chat-v2 .nc-message {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  width: 100% !important;
  padding: 4px 0 !important;
}

.nitro-chat-v2 .nc-message--self {
  flex-direction: row-reverse !important;
}

.nitro-chat-v2 .nc-avatar {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex: 0 0 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.nitro-chat-v2 .nc-avatar img {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.nitro-chat-v2 .nc-bubble {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 44px) !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.nitro-chat-v2 .nc-message--self .nc-bubble {
  background: rgba(201, 13, 5, 0.12) !important;
  border-color: rgba(201, 13, 5, 0.24) !important;
}

.nitro-chat-v2 .nc-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.nitro-chat-v2 .nc-author,
.nitro-chat-v2 .nc-author-link {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #c8d6f0 !important;
  text-decoration: none !important;
}

.nitro-chat-v2 .nc-time {
  font-size: 0.65rem !important;
  color: rgba(255, 255, 255, 0.38) !important;
}

.nitro-chat-v2 .nc-text {
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  color: #d4dcea !important;
  word-break: break-word !important;
}

.nitro-chat-v2 .nc-message--system {
  justify-content: center !important;
}

.nitro-chat-v2 .nc-message--system .nc-bubble {
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 2px 0 !important;
}

/* Mensaje */
.nitro-chat-v2 .nc-msg {
  display: flex !important;
  gap: 7px !important;
  align-items: flex-start !important;
  padding: 4px 0 !important;
  animation: ncFadeIn 0.18s ease;
}

.nitro-chat-v2 .nc-msg__avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.nitro-chat-v2 .nc-msg__body {
  flex: 1;
  min-width: 0;
}

.nitro-chat-v2 .nc-msg__meta {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}

.nitro-chat-v2 .nc-msg__author {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #c8d6f0 !important;
}

.nitro-chat-v2 .nc-msg__time {
  font-size: 0.65rem !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

.nitro-chat-v2 .nc-msg__text {
  font-size: 0.85rem !important;
  color: #d4dcea !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
  background: transparent !important;
}

.nitro-chat-v2 .nc-msg.is-system .nc-msg__text {
  font-size: 0.73rem !important;
  color: rgba(255, 255, 255, 0.3) !important;
  font-style: italic !important;
  text-align: center !important;
}

/* ──────────────────────────────────────────────
   4. INPUT AREA
   ────────────────────────────────────────────── */
.nitro-chat-v2 .nc-input-wrap {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.nitro-chat-v2 .nc-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
}

/* Botón emoji — override total del tema */
.nitro-chat-v2 .nc-emoji-btn,
.nitro-chat-v2 button.nc-emoji-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.35) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: color 0.15s, background 0.15s !important;
}

.nitro-chat-v2 .nc-emoji-btn:hover,
.nitro-chat-v2 button.nc-emoji-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  filter: none !important;
}

/* Input de texto — override total del tema */
.nitro-chat-v2 .nc-input,
.nitro-chat-v2 input.nc-input,
.nitro-chat-v2 input[type="text"].nc-input {
  flex: 1 !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(5, 9, 18, 0.75) !important;
  color: #e2e8f0 !important;
  font-size: 0.82rem !important;
  font-family: inherit !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
}

.nitro-chat-v2 .nc-input::placeholder {
  color: rgba(255, 255, 255, 0.28) !important;
}

.nitro-chat-v2 .nc-input:focus,
.nitro-chat-v2 input.nc-input:focus {
  border-color: rgba(201, 13, 5, 0.5) !important;
  background: rgba(8, 13, 24, 0.85) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Botón enviar — override total del tema */
.nitro-chat-v2 .nc-send,
.nitro-chat-v2 button.nc-send {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #c90d05, #790802) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(201, 13, 5, 0.3) !important;
  transition: opacity 0.15s, transform 0.15s !important;
  letter-spacing: 0 !important;
}

.nitro-chat-v2 .nc-send:hover,
.nitro-chat-v2 button.nc-send:hover {
  opacity: 0.88 !important;
  filter: none !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────────
   5. EMOJI PICKER
   ────────────────────────────────────────────── */
.nitro-chat-v2 .nc-emoji-picker {
  display: none !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 8px !important;
  background: rgba(8, 13, 24, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
}

.nitro-chat-v2 .nc-emoji-picker:not(.sn-d-none),
.nitro-chat-v2 .nc-emoji-picker[style*="display: block"],
.nitro-chat-v2 .nc-emoji-picker[style*="display:block"],
.nitro-chat-v2 .nc-emoji-picker[style*="display: flex"],
.nitro-chat-v2 .nc-emoji-picker[style*="display:flex"] {
  display: flex !important;
}

.nitro-chat-v2 .nc-emoji {
  font-size: 1.3rem !important;
  cursor: pointer !important;
  padding: 2px !important;
  border-radius: 6px !important;
  background: transparent !important;
  line-height: 1 !important;
  user-select: none !important;
}

.nitro-chat-v2 .nc-emoji:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ──────────────────────────────────────────────
   6. NOTIFICACIONES
   ────────────────────────────────────────────── */
.nitro-chat-v2 .nc-notification {
  position: absolute !important;
  top: 44px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 10px !important;
}

/* ──────────────────────────────────────────────
   7. ESTADOS (loading, error)
   ────────────────────────────────────────────── */
.nitro-chat-v2 .chat-loading,
.nitro-chat-v2 .chat-error {
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 24px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  flex: 1 !important;
  background: transparent !important;
}

.nitro-chat-v2 .chat-loading:not(.sn-d-none),
.nitro-chat-v2 .chat-error:not(.sn-d-none),
.nitro-chat-v2 .chat-loading[style*="display: block"],
.nitro-chat-v2 .chat-loading[style*="display:block"],
.nitro-chat-v2 .chat-loading[style*="display: flex"],
.nitro-chat-v2 .chat-loading[style*="display:flex"],
.nitro-chat-v2 .chat-error[style*="display: block"],
.nitro-chat-v2 .chat-error[style*="display:block"],
.nitro-chat-v2 .chat-error[style*="display: flex"],
.nitro-chat-v2 .chat-error[style*="display:flex"] {
  display: flex !important;
}

.nitro-chat-v2 .spinner {
  width: 28px !important;
  height: 28px !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: #c90d05 !important;
  border-radius: 50% !important;
  animation: nc-spin 0.7s linear infinite !important;
  background: transparent !important;
}

.nitro-chat-v2 .nc-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin-left: auto !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.nitro-chat-v2 .nc-delete .nc-icon {
  width: 12px !important;
  height: 12px !important;
}

.nitro-chat-v2 .nc-delete:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────────
   8. MODAL TÉRMINOS
   ────────────────────────────────────────────── */
.nitro-chat-v2 .chat-modal,
.nitro-chat-terms-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(4, 7, 14, 0.78) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 0 !important;
  pointer-events: auto !important;
}

.nitro-chat-v2 .chat-modal:not(.sn-d-none),
.nitro-chat-terms-modal:not(.sn-d-none),
.nitro-chat-v2 .chat-modal.is-open,
.nitro-chat-terms-modal.is-open {
  display: flex !important;
}

.nitro-chat-v2 .chat-modal-content,
.nitro-chat-terms-modal .chat-modal-content {
  width: min(380px, 90%) !important;
  max-height: 80% !important;
  overflow-y: auto !important;
  background: linear-gradient(155deg, rgba(10, 15, 28, 0.98), rgba(6, 10, 20, 0.99)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

.nitro-chat-v2 .chat-modal-content h3,
.nitro-chat-terms-modal .chat-modal-content h3 {
  margin: 0 0 12px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.nitro-chat-v2 .terms-content,
.nitro-chat-terms-modal .terms-content {
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.6 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  margin-bottom: 14px !important;
}

.nitro-chat-v2 .terms-actions,
.nitro-chat-terms-modal .terms-actions {
  display: flex !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 1000001 !important;
  pointer-events: auto !important;
}

.nitro-chat-v2 .terms-actions .accept-terms,
.nitro-chat-v2 .terms-actions .decline-terms,
.nitro-chat-terms-modal .terms-actions .accept-terms,
.nitro-chat-terms-modal .terms-actions .decline-terms {
  flex: 1 !important;
  min-height: 36px !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.nitro-chat-v2 .terms-actions .accept-terms,
.nitro-chat-terms-modal .terms-actions .accept-terms {
  background: linear-gradient(135deg, #c90d05, #790802) !important;
  color: #fff !important;
  border: none !important;
}

.nitro-chat-v2 .terms-actions .decline-terms,
.nitro-chat-terms-modal .terms-actions .decline-terms {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ──────────────────────────────────────────────
   9. LOGIN REQUIRED
   ────────────────────────────────────────────── */
.chat-login-required {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.chat-login-required a {
  color: #c90d05 !important;
  font-weight: 600;
  text-decoration: none;
}

/* ──────────────────────────────────────────────
   10. UTILIDADES
   ────────────────────────────────────────────── */
.sn-d-none {
  display: none !important;
}

/* ──────────────────────────────────────────────
   11. CHAT BURBUJA MÓVIL (simulador.php)
   Siempre disponible porque sn_chat_sim carga index.css
   ────────────────────────────────────────────── */

/* Oculto en desktop */
.sn-chat-mobile {
  display: none;
}

@media (max-width: 991px) {

  /* Wrapper flotante fijo */
  .sn-chat-mobile {
    display: block !important;
    position: fixed !important;
    right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
    z-index: 8000 !important;
  }

  /* Botón burbuja */
  .sn-chat-toggle,
  button.sn-chat-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 50% !important;
    border: none !important;
    background: linear-gradient(135deg, #c90d05, #790802) !important;
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(201, 13, 5, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
    padding: 0 !important;
    outline: none !important;
  }

  .sn-chat-toggle svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
  }

  /* Badge */
  .sn-chat-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #ff3b30 !important;
    border: 2px solid #060b14 !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  /* Overlay */
  .sn-chat-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 7900 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(2px);
  }

  .sn-chat-overlay.active {
    display: block !important;
    animation: ncFadeIn 0.18s ease;
  }

  /* Panel — sube desde la parte inferior */
  .sn-chat-container {
    display: none;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 8100 !important;
    height: min(78vh, 560px) !important;
    border-radius: 22px 22px 0 0 !important;
    background: linear-gradient(170deg, rgba(8, 13, 24, 0.98), rgba(4, 8, 18, 0.99)) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.7) !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  .sn-chat-container.open {
    display: flex !important;
    animation: ncSlideUp 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Header del panel */
  .sn-chat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: rgba(0, 0, 0, 0.32) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    flex-shrink: 0 !important;
  }

  #sn-chat-title,
  .sn-chat-header h4 {
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: var(--sn-font-sans, 'Akshar', system-ui, sans-serif) !important;
  }

  /* Botón cerrar */
  .sn-chat-close,
  button.sn-chat-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .sn-chat-close:hover,
  button.sn-chat-close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    filter: none !important;
  }

  /* Contenido scrollable */
  .sn-chat-content.sn-chat-mobile-wrapper {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* El nitro-chat-container dentro del panel ocupa todo */
  .sn-chat-mobile-wrapper .nitro-chat-container.nitro-chat-v2 {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sn-chat-item-mobile {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* Chat desktop oculto en móvil */
  .sn-chat-desktop {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────
   12. ANIMACIONES
   ────────────────────────────────────────────── */
@keyframes ncFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes nc-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ncSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0.6;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}