/* 1) Importa tipografía y paleta Verde oliva claro */
/* ==== IMPORTA TIPOGRAFÍA Questrial y PALeta para tu estilo elegante ==== */
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

:root {
  /* Colores base coincidentes con tu estilos.css */
  --bg:                         #0a0014;   /* igual que --color-fondo */
  --surface:                    #0a0014;   /* igual que --color-sidebar/header */
  --border:                     #0a0014;   /* igual que --color-borde */
  --text:                       #d0cbe7f5;   /* igual que --color-texto */

  /* Acentos púrpura de tu tema */
  --accent:                     #5e60ce;   /* igual que --color-acento */
  --accent-dark:                #4b4bb8;   /* versión un poco más oscura para estados activos */

  /* Medidas y transiciones homogéneas */
  --radius:                     12px;      /* igual que --radio */
  --transition:                 0.25s ease-in-out; /* igual que --transicion */
  --header-padding-vertical:    0.3rem;    /* conserva tu ajuste fino */
  --header-padding-horizontal:  1rem;
}

:root {
  /* Chat / burbujas */
  --chat-bg:             #070011;    /* mismo fondo general */
  --bubble-incoming-bg:  #1e1e1e;   /* gris muy oscuro */
  --bubble-border-in:    #333333;   /* borde un poco más claro */

  /* burbujas propias (outgoing) */
  --bubble-outgoing-bg:  #2b2b3a;   /* gris azulado oscuro */
  --bubble-border-out:   #444444;   /* borde algo más claro */
  --bubble-radius:       12px;       /* coincide con tu radio */
  --bubble-max-width:    70%;
  --chat-padding:        0.75rem;
  --bubble-padding-vert: 0.5rem;
  --bubble-padding-horiz:0.75rem;
  --font-chat:           0.85rem;    /* un poquito más pequeño */
  --line-height:         1.4;
  --transition-speed:    150ms;
}

/* Estructura principal mejorada */
.dm-layout {
  display: grid;
  /* sidebar fijo y contenido fluido */
  grid-template-columns: 280px 1fr;
  gap: 1rem;                                      /* separa columnas */
  
  /* ancho adaptativo */
  width: 90%;
  max-width: 1200px;
  margin: 1rem auto;                              /* centrado con algo de margen */
  
  /* altura calculada respecto al viewport */
  height: calc(85vh - 20px);                     /* deja espacio para header de 60px */
  
  /* estilo visual */
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  color: var(--text);
  
  /* transición suave al cambiar tamaño (opcional) */
  transition: height var(--transition), width var(--transition);
}

/* Ajuste para móvil: una sola columna */
@media (max-width: 768px) {
  .dm-layout {
    display: block;
    width: 100%;
    height: auto;
    margin: 1rem 0;
  }
}


/* Sidebar: lista de conversaciones/canales — todas las reglas con !important */
.dm-list {
  background: var(--chat-bg) !important;
  padding: var(--chat-padding) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--chat-padding) !important;
  height: 100% !important;
  overflow-y: auto !important;
  box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.03) !important;
}

.dm-list::-webkit-scrollbar {
  width: 6px !important;
}

.dm-list::-webkit-scrollbar-thumb {
  background-color: rgba(94, 96, 206, 0.2) !important;
  border-radius: 3px !important;
  transition: background var(--transition-speed) !important;
}

.dm-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(94, 96, 206, 0.3) !important;
}

.dm-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.dm-list .item {
  display: flex !important;
  align-items: center !important;
  padding: var(--bubble-padding-vert) var(--bubble-padding-horiz) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
  transition: background var(--transition), color var(--transition) !important;
  cursor: pointer !important;
}


.dm-list .item:hover {
  background: var(--color-acento-claro) !important;
  color: var(--surface) !important;
}

.dm-list .item.active {
  background: var(--color-acento) !important;
  color: var(--surface) !important;
  font-weight: 500 !important;
}


/* Área de chat refinada con !important */
.dm-chat {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}
  #placeholder:not(.hidden) ~ .chat-header,
  #placeholder:not(.hidden) ~ #chat-window,
  #placeholder:not(.hidden) ~ #chat-form {
    display: none !important;
  }
.dm-chat-header {
  flex: 0 0 auto !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  background: var(--chat-bg) !important;
}

.dm-messages {
  flex: 1 1 auto !important;
  padding: 1.5rem !important;
  overflow-y: auto !important;
  background: var(--surface) !important;
  -webkit-overflow-scrolling: touch !important;
}
@media (max-width: 768px) {
  .dm-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Altura = 100vh menos la altura del header (60px) */
    height: calc(90vh);
    /* Empuja todo el layout hacia abajo 60px */
  }

  /* 3. Sidebar oculto */
@media (max-width: 600px) {
  .dm-categories {
    position: fixed !important;
    top: -25px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
  }
}
@media (max-width: 600px) {
  /* Altura de tu barra de categorías */
  :root {
    --categories-height: 115px; /* ajusta este valor al alto real */
  }

  /* Lista de conversaciones fija y scrollable */
  .dm-list {
    position: fixed !important;
    top: var(--categories-height) !important; /* baja justo debajo de la barra */
    bottom: 0 !important;                     /* llega hasta el pie */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow-y: auto !important;              /* scroll interno */
    -webkit-overflow-scrolling: touch;         /* suaviza el scroll en iOS */
    background: var(--surface) !important;     /* mantiene fondo */
    z-index: 900 !important;
  }
 }
  /* 4. Chat como columna que ocupa todo */
  .dm-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto;      /* el padre ya define la altura */
    /* Padding superior para separar un poco el contenido */
    margin-top: 45px;  /* ajusta este valor al espacio que quieras */
  }

  /* 5. Header fijo y no hace scroll */
  .dm-chat-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--chat-bg); /* o el color que tengas */
  }
  .chat-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
  }
  /* 6. Mensajes: flex 1 + scroll */
  .dm-messages {
    flex: 1 1 auto;          
    overflow-y: auto;        
    -webkit-overflow-scrolling: touch;
  }

  /* 7. Input fijo abajo */
  .dm-input-container {
    flex: 0 0 auto;
  }
}

.dm-messages::-webkit-scrollbar {
  width: 6px !important;
}

.dm-messages::-webkit-scrollbar-thumb {
  background-color: rgba(44, 44, 44, 0.15) !important;  /* var(--text) con opacidad */
  border-radius: 3px !important;
  transition: background var(--transition-speed) !important;
}

.dm-messages::-webkit-scrollbar-thumb:hover {
  background-color: rgba(44, 44, 44, 0.25) !important;
}

.message {
  max-width: 70% !important;
  margin-bottom: 12px !important;
  padding: var(--bubble-padding-vert) var(--bubble-padding-horiz) !important;
  border-radius: var(--radius) !important;
  background: var(--bubble-incoming-bg) !important;
  line-height: var(--line-height) !important;
  position: relative !important;
}

.message.self {
  background: var(--bubble-outgoing-bg) !important;
  margin-left: auto !important;
}

.message .meta {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.message .avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  background: #c5c7cb !important;  /* avatar placeholder */
}

.message .username {
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
}

/* Entrada de texto refinada y unificada con !important */
.dm-input-container {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 1rem !important;
  border-top: 1px solid var(--border) !important;
  background: var(--chat-bg) !important;
}

.dm-input-field {
  flex: 1 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  font-size: 0.95rem !important;
  outline: none !important;
  background: var(--surface) !important;
  transition: border-color var(--transition-speed) !important;
}

.dm-input-field:focus {
  border-color: var(--accent) !important;
}

.dm-input-button {
  margin-left: 10px !important;
  padding: 8px 14px !important;
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--accent) !important;
  color: var(--surface) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--transition-speed) !important;
}

.dm-input-button:hover {
  background: var(--accent-dark) !important;
}

/* — Contenedor de categorías — refinado con !important */
.dm-categories {
  display: flex !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 90px auto 0 auto !important;
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* — Botones de categoría — refinados con !important */
.dm-categories button {
  flex: 1 !important;
  padding: 0.75rem 1rem !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition:
    background-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
    border-color var(--transition-speed) ease !important;
}

.dm-categories button:hover {
  background-color: var(--color-acento-claro) !important;
  color: var(--surface) !important;
}

.dm-categories button.active {
  color: var(--surface) !important;
  border-bottom-color: var(--color-acento) !important;
  background-color: var(--color-acento) !important;
}
@media screen and (max-width: 600px) {
  /* — Botones de categoría — refinados con !important en móvil */
  .dm-categories button {
    flex: 1 !important;
    padding: 0.75rem 1rem !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    cursor: pointer !important;
    /* Un único !important al final de la shorthand */
    transition: 
      background-color var(--transition-speed) ease, 
      color var(--transition-speed) ease, 
      border-color var(--transition-speed) ease !important;
  }

  .dm-categories button:hover {
    background-color: var(--color-acento-claro) !important;
    color: var(--surface) !important;
  }

  .dm-categories button.active {
    color: var(--surface) !important;
    border-bottom-color: var(--color-acento) !important;
    background-color: var(--color-acento) !important;
  }
}


/* — Título de lista de conversaciones — */
.dm-list h3 {
  margin-bottom: 0.75rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--border) !important;
}

/* — Lista sin estilos predeterminados — */
#conversation-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* — Cada ítem de conversación — */
.conversation-item {
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.5rem !important;
  border-radius: var(--radius) !important;
  background-color: var(--surface) !important;
  cursor: pointer !important;
  transition:
    background-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease !important;
}

.conversation-item:hover {
  background-color: var(--color-acento-claro) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* — Avatar — */
.conv-avatar {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  margin-right: 0.75rem !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background-color: #d1d3d6 !important;
}

/* — Cuerpo de texto — */
.conv-body {
  flex: 1 !important;
  overflow: hidden !important;
}


/* — Fila de título y hora — */
.conv-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.25rem !important;
}

/* — Título de conversación — */
.conv-title {
  flex: 1 !important;
  font-size: 0.95rem !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* — Hora de último mensaje — */
.conv-time {
  font-size: 0.8rem !important;
  color: #6c757d !important; /* gris suave ya que no tienes var(--text-muted) definida */
  margin-left: 0.5rem !important;
}

/* ─── 1) LISTA DE CONVERSACIONES: preview pequeña ─── */
.conv-preview {
  font-size: 0.9rem !important;
  color: #8b8f96 !important;     /* tono gris medio */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.conv-preview i {
  font-style: normal;
  color: #888;
}
.conv-preview i::before {
  content: "📎 ";
  display: inline-block;
}

/* ─── 2) CONTENEDOR GENERAL de previews en el chat-form ─── */
.preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 4px;
}

/* ─── 3) ÍTEM GENÉRICO ─── */
.preview-item {
  position: relative;
  background: #fafafa;
  border: 1px solid #a11f1f;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── 3a) IMÁGENES ─── */
.preview-item .preview-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
/* Vídeos en preview: mantienen proporción y nunca exceden 360×360 */
.preview-item .preview-video {
  max-width: 360px;      /* no más de 360px de ancho */
  max-height: 360px;     /* no más de 360px de alto */
  width: auto;           /* ancho automático según proporción */
  height: auto;          /* alto automático según proporción */
  object-fit: contain;   /* evita recorte, encaja todo el vídeo */
  background: #000;      /* opcional: fondo negro para letterbox */
  display: block;
  margin: 0 auto;        /* centra en el contenedor */
}

/* ─── 3c) AUDIOS ─── */
.preview-item .preview-audio {
  width: 120px;
}

/* ─── 3d) ARCHIVOS (texto-nombre) ─── */
.preview-item .preview-file {
  display: inline-block;
  padding: 4px 6px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* ─── 4) BOTÓN DE ELIMINAR (para cada preview-item) ─── */
.preview-item .remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

/* ─── 5) EFECTO HOVER ─── */
.preview-item:hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* 1) Por defecto (desktop): ocultar la versión “icon+nombre” */
.preview-item .video-fallback {
  display: none;
}

/* 2) En móvil: ocultar el video y mostrar icon+nombre */
@media (max-width: 600px) {
  .preview-item .preview-video {
    display: none;
  }
  .preview-item .video-fallback {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .preview-item .video-fallback .file-icon {
    font-size: 1.2em;
  }
  .preview-item .video-fallback .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* — Indicador de no leído — */
.unread-dot {
  flex-shrink: 0 !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 0.5rem !important;
  border-radius: 50% !important;
  background-color: var(--color-acento) !important;
}

/* — Placeholder cuando no hay conversación seleccionada — */
.chat-placeholder {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  background: var(--chat-bg) !important;
  color: #8a8c90 !important; /* puedes reemplazar por una nueva var si deseas */
  font-size: 1rem !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* — Cabecera de chat más delgada — */
.chat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;   /* fuerza items al inicio */
  padding: 0.75rem 1rem !important;          /* padding uniforme */
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  flex: 0 0 auto !important;

}

.chat-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-right: 0.75rem !important;
  background: #d1d3d6 !important;
}

.chat-meta {
  flex: 1 !important;
  overflow: hidden !important;
}

.chat-meta h2 {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* 1) Mantén tus propiedades de texto en .status */
.status {
  display: inline-block !important;
  margin-top: 0.25rem !important;
  font-size: 0.75rem !important;
  border-radius: 8px !important;       /* para los badges de texto */
  font-weight: 500 !important;
  white-space: nowrap !important;
  /* limpiamos el fondo por defecto (el dot vendrá por ::before) */
  background-color: transparent !important;
  color: inherit !important;
}

/* 2) Dot: antes del contenido de .status */
.status.offline-dot::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* 3) Color del dot */
.status.online-dot::before {
  background-color: #4CAF50;
}

.status.offline-dot::before {
  background-color: #F44336;
}

.status.online {
  background: transparent !important;       /* Sin fondo */
  color: #5cfc00 !important;               /* Texto verde */
  border: 2px solid #5cfc00 !important;    /* Borde verde */
}

.status.offline {
  background: transparent !important;       /* Sin fondo */
  color: #ff0000 !important;               /* Texto rojo */
  border: 2px solid #ff0000 !important;    /* Borde rojo */
}



/* — Ventana de mensajes — */
.chat-window {
  flex: 1 !important;
  padding: var(--chat-padding) !important;
  overflow-y: auto !important;
  background-color: var(--chat-bg) !important;
}

/* — Cada línea de mensaje — */
.chat-message {
  display: flex !important;
  /* reduce el espacio entre mensajes */
  margin-bottom: 4px !important;
}

/* — Alineación incoming / outgoing — */
.chat-message.incoming {
  justify-content: flex-start !important;
}
.chat-message.outgoing {
  justify-content: flex-end !important;
}

/* — Burbuja de mensaje — */
 .message-bubble {
  position: relative !important;
  max-width: var(--bubble-max-width) !important;
  padding: var(--bubble-padding-vert) var(--bubble-padding-horiz) !important;
  border-radius: var(--bubble-radius) !important;
  font-size: var(--font-chat) !important;
  line-height: var(--line-height) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: background-color var(--transition-speed) ease !important;
  word-wrap: break-word;
   white-space: normal !important;
  text-align: left;
}

/* — Distinción de colores — */
.chat-message.incoming .message-bubble {
  background-color: var(--bubble-incoming-bg) !important;
  border-color: var(--bubble-border-in) !important;
}

.chat-message.outgoing .message-bubble {
  background-color: var(--bubble-outgoing-bg) !important;
  border-color: var(--bubble-border-out) !important;
}



/* — Formulario de envío — */
.chat-form {
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 0rem !important;
  border-top: 1px solid var(--border) !important;
  background: var(--chat-bg) !important;
  flex: 0 0 auto !important;
}

/* Campo de texto */
#chat-input {
  flex: 1 !important;
  padding: 0.6rem 0.8rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  font-size: 0.95rem !important;
  margin-right: 0.75rem !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  outline: none !important;
  transition: border-color var(--transition-speed) !important;
}

#chat-input:focus {
  border-color: var(--color-acento) !important;
}

#chat-input::placeholder {
  color: #8a8c90 !important;
}

/* Botón enviar */
.enviar-btn {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-acento) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background var(--transition-speed) !important;
}

.enviar-btn:hover {
  background: var(--color-acento-claro) !important;
}

.enviar-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  color: var(--surface) !important;
}

/* Oculta permanentemente el botón “Volver” */
#btn-back-to-cats {
  display: none !important;
}


/* — Clases utilitarias — */
.hidden {
  display: none !important;
}


/* — Botones genéricos — */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
}


.icon-btn:hover {
  background: var(--bubble-incoming-bg) !important;
  color: var(--color-acento-claro) !important;
}

/* — Grupo de input de chat — */
.chat-input-group {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  background: var(--chat-bg) !important;
  border-top: 1px solid var(--border) !important;
  position: relative !important;

}

/* Íconos dentro del grupo */
.chat-input-group .icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.75rem !important;
  font-size: 1.2rem !important;
  color: var(--color-acento) !important;
  transition: color var(--transition) !important;
}

.chat-input-group .icon-btn:hover {
  color: var(--color-acento-claro) !important;
}

/* Campo de texto */
.chat-input-group #chat-input {
  flex: 1 !important;
  padding: 0.6rem 0.8rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  font-size: 0.95rem !important;
  margin-right: 0.75rem !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  outline: none !important;
  transition: border-color var(--transition-speed) !important;
}

.chat-input-group #chat-input:focus {
  border-color: var(--color-acento) !important;
}

.chat-input-group #chat-input::placeholder {
  color: #8a8c90 !important;
}

/* Botón de enviar */
.chat-input-group .enviar-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--color-acento) !important;
  color: var(--surface) !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 1.2rem !important;
  cursor: pointer !important;
  transition: background var(--transition-speed) !important;
}

.chat-input-group .enviar-btn:hover {
  background: var(--color-acento-claro) !important;
}

/* — Adjuntos en mensajes — */
.message-attachment {
  margin: 0.5rem 0 !important;
}

/* Imágenes adjuntas */
.attached-image {
  display: block !important;
  max-width: 200px !important;
  border-radius: var(--radius) !important;
  margin: 0.5rem 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  object-fit: cover !important;
}

/* Vídeos y audios adjuntos */
.attached-video,
.attached-audio {
  display: block !important;
  max-width: 250px !important;
  width: 100% !important;
  border-radius: var(--radius) !important;
  margin: 0.5rem 0 !important;
}

/* Archivos adjuntos (enlace) */
.attached-file {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.4rem 0.8rem !important;
  background: var(--bubble-incoming-bg) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  font-size: 0.9rem !important;
  transition: background var(--transition-speed) !important;
}

.attached-file:hover {
  background: #e5e6e8 !important;
}


/* — Opciones de mensaje — */
.msg-options {
  position: relative !important;
  display: inline-block !important;
}

.options-btn {
  background: none !important;
  border: none !important;
  font-size: 1.2rem !important;
  color: #6c6f75 !important;
  cursor: pointer !important;
  padding: 0.25rem !important;
  border-radius: var(--radius) !important;
transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
}


.options-btn:hover {
  background: var(--bubble-incoming-bg) !important;
  color: var(--text) !important;
}

/* Menú desplegable de opciones */
.options-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 0.25rem !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--sombra-suave) !important;
  padding: 0.25rem 0 !important;
  z-index: 100 !important;
  min-width: 8rem !important;
}

/* Ocultar menú */
.options-menu.hidden {
  display: none !important;
}

/* Botones dentro del menú */
.options-menu button {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: background var(--transition-speed) !important;
}

.options-menu button:hover {
  background: var(--bubble-incoming-bg) !important;
}



/* —— Emoji Picker sin bordes y con glow —— */
#emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.5rem;
  z-index: 300;

  width: 14rem;
  background: rgba(255, 255, 255, 0.9);
  /* Quitamos borde y sombra pesada */
  border: none;
  box-shadow: none;
  /* Un ligero glow general */
  filter: drop-shadow(0 2px 8px rgba(94, 96, 206, 0.2));

  backdrop-filter: blur(6px);
  border-radius: var(--radio);
  padding: 0.5rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
  gap: 0.4rem;
  max-height: 8rem;
  overflow-y: auto;
}

/* —— Emoji buttons con glow al hover y active —— */
#emoji-picker .emoji-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* estado normal, sin fondo */
  background: transparent;
}

#emoji-picker .emoji-item:hover,
#emoji-picker .emoji-item:focus {
  transform: scale(1.2);
  /* glow violeta */
  box-shadow: 0 0 8px rgba(94, 96, 206, 0.6);
}

/* Scrollbar minimalista */
#emoji-picker::-webkit-scrollbar {
  width: 4px;
}
#emoji-picker::-webkit-scrollbar-thumb {
  background-color: rgba(44, 44, 44, 0.2);
  border-radius: 2px;
}
#emoji-picker::-webkit-scrollbar-track {
  background: transparent;
}

  /* Contenedor general de perfil */
  #profile-view {
    /* Flex vertical centrado y con scroll interno */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    background: #fff;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
  }


/* Botón de volver */
#btn-back-to-chat {
  align-self: flex-start !important;
  margin-bottom: 1rem !important;
}

/* Contenido interior */
.profile-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 360px !important;
  width: 100% !important;
}

/* Imagen de avatar */
.profile-avatar {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-bottom: 1rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  z-index: 1 !important;
}

/* Texto de nickname */
#profile-nickname {
  margin: 0 0 0.75rem 0 !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--color-texto) !important;
}

/* Párrafos de género y biografía */
.profile-content p {
  width: 100% !important;
  margin: 0.25rem 0 0.75rem !important;
  line-height: var(--line-height) !important;
  text-align: center !important;
  color: var(--color-texto) !important;
  font-size: 0.95rem !important;
}

/* Etiquetas (strong) */
.profile-content p strong {
  font-weight: 500 !important;
  color: var(--color-acento) !important;
}

/* Seguridad visual */
#profile-view > * {
  position: relative !important;
  z-index: 0 !important;
}

/* Fondo de refuerzo (opcional si se usa clase adicional) */
.profile-view {
  background-color: var(--color-fondo) !important;
}
/* —— UI de “Añadir amigo” —— */
.add-friend-ui {
  padding: 1rem !important;
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  max-width: 360px !important;
  margin: auto !important;
  box-shadow: var(--sombra-suave) !important;
  color: var(--color-texto) !important;
}

/* —— Título —— */
.add-friend-ui h3 {
  margin-top: 0 !important;
  font-size: 1.1rem !important;
  color: var(--color-acento) !important;
  font-weight: 600 !important;
}

/* —— Campo de entrada —— */
.add-friend-ui input#friend-id-input {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.75rem 0 1rem !important;
  font-size: 0.95rem !important;
  border: 1px solid var(--color-borde) !important;
  border-radius: var(--radius) !important;
  background: var(--color-fondo) !important;
  color: var(--color-texto) !important;
  outline: none !important;
  transition: border-color var(--transicion) !important;
}

.add-friend-ui input#friend-id-input:focus {
  border-color: var(--color-acento) !important;
}

/* —— Botón de buscar —— */
.add-friend-ui button#search-friend-btn {
  display: block !important;
  width: 100% !important;
  padding: 0.6rem 1rem !important;
  font-size: 0.95rem !important;
  background: var(--color-acento) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background var(--transicion) !important;
}

.add-friend-ui button#search-friend-btn:hover {
  background: var(--color-acento-claro) !important;
}

/* —— Card de resultado —— */
.add-friend-ui .friend-card {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 0 !important;
  margin-top: 0.5rem !important;
  border-top: 1px solid var(--color-borde) !important;
}

/* —— Avatar —— */
.add-friend-ui .friend-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-right: 0.75rem !important;
  background: var(--color-borde) !important;
}

/* —— Texto —— */
.add-friend-ui .friend-info {
  flex: 1 !important;
  font-size: 0.95rem !important;
  color: var(--color-texto) !important;
}

/* —— Botón “Agregar” —— */
.add-friend-ui .friend-card button {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.85rem !important;
  background: #48bb78 !important; /* verde éxito */
  color: white !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: opacity var(--transicion) !important;
}

.add-friend-ui .friend-card button:hover {
  opacity: 0.9 !important;
}

/* —— Lista de solicitudes —— */
#pending-requests {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.5rem 0 0 !important;
}

#pending-requests li {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid var(--color-borde) !important;
}

#pending-requests li:last-child {
  border-bottom: none !important;
}

#pending-requests li .friend-avatar {
  width: 32px !important;
  height: 32px !important;
  margin-right: 0.75rem !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: var(--color-borde) !important;
}

#pending-requests li span {
  flex: 1 !important;
  font-size: 0.95rem !important;
  color: var(--color-texto) !important;
}

#pending-requests li button {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.85rem !important;
  margin-left: 0.5rem !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: opacity var(--transicion) !important;
}

/* —— Botón Aceptar —— */
#pending-requests li .aceptar-solicitud {
  background: #48bb78 !important; /* verde éxito */
  color: white !important;
}

/* —— Botón Rechazar —— */
#pending-requests li .rechazar-solicitud {
  background: #f56565 !important; /* rojo rechazo */
  color: white !important;
}

#pending-requests li button:hover {
  opacity: 0.9 !important;
}


/* — Avatar del usuario — */
.friend-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-right: 0.75rem !important;
  background: var(--color-borde) !important;
}



/* — Botón Aceptar — */
.aceptar-solicitud {
  padding: 0.4rem 0.75rem !important;
  font-size: 0.85rem !important;
  background: #48bb78 !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background var(--transicion), opacity var(--transicion) !important;
}

.aceptar-solicitud:hover {
  background: #38a169 !important;
}

/* — Botón Rechazar — */
.rechazar-solicitud {
  padding: 0.4rem 0.75rem !important;
  font-size: 0.85rem !important;
  background: #f56565 !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background var(--transicion), opacity var(--transicion) !important;
}

.rechazar-solicitud:hover {
  background: #e53e3e !important;
}


/* — Punto verde de estado online — */
.online-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  background: #48bb78 !important; /* verde elegante */
  border-radius: 50% !important;
  margin-left: 6px !important;
}

/* — Texto con tu propio ID — */
.add-friend-ui .my-id {
  margin-bottom: 12px !important;
  font-size: 0.9rem !important;
  color: var(--color-texto) !important;
}

/* — Código de ID (resaltado con monospace) — */
.add-friend-ui .my-id strong {
  font-family: monospace !important;
  background: var(--color-fondo) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  color: var(--color-texto) !important;
}
.chat-form .chat-input-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;          /* menos espacio entre elementos */
  padding: 0.25rem;
}

.chat-form .icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;      /* más compacto */
  cursor: pointer;
}

.chat-form .icon-btn svg {
  width: 1rem;           /* 16px */
  height: 1rem;
  display: block;
}
.btn,
.icon-btn {
  color: #ffffff !important;
}
.chat-form .enviar-btn svg {
  width: 1.25rem;        /* flecha un pelín más grande */
  height: 1.25rem;
}



.emoji-picker {
  position: absolute;
  bottom: 3rem;         /* ajusta según tu layout */
  right: 0.5rem;
  width: 12rem;
  max-height: 8rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.hidden {
  display: none;
}
/* Botones de ícono */
.icon-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
}

/* SVG dentro de icon-btn */
.icon-btn svg {
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important;
  display: block;
}
/* Permitir que el botón btn-emoji reciba siempre el clic, even si pinchas en el SVG */
#btn-emoji svg {
  pointer-events: none;
}
/* ==========================
   Estilos generales (PC & móvil)
   ========================== */

/* Override específico para contenido de pestañas dentro de dm-list y dm-chat */
.dm-list .friends-ui,
.dm-list .online-ui,
.dm-list .all-ui,
.dm-list .add-friend-ui,
.dm-chat .friends-ui,
.dm-chat .online-ui,
.dm-chat .all-ui,
.dm-chat .add-friend-ui {
  background-color: #000000 !important;
  padding: 1rem !important;
  border-radius: 0.75rem !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  color: #b3b3b3 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  max-height: calc(100vh - 5rem) !important;
  overflow-y: auto !important;
  font-size: 0.85rem !important;
  
}

/* Encabezados centrados dentro de los wrappers */
.dm-list .friends-ui h3,
.dm-list .online-ui h3,
.dm-list .all-ui h3,
.dm-list .add-friend-ui h3,
.dm-chat .friends-ui h3,
.dm-chat .online-ui h3,
.dm-chat .all-ui h3,
.dm-chat .add-friend-ui h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #6a1b9a !important;
  margin-bottom: 0.75rem !important;
  text-align: center !important;
}

/* Listas e ítems alineados a la izquierda */
.dm-list .friends-ui ul,
.dm-list .online-ui ul,
.dm-list .all-ui ul,
.dm-list .add-friend-ui ul,
.dm-chat .friends-ui ul,
.dm-chat .online-ui ul,
.dm-chat .all-ui ul,
.dm-chat .add-friend-ui ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.dm-list .friends-ui ul li,
.dm-list .online-ui ul li,
.dm-list .all-ui ul li,
.dm-list .add-friend-ui ul li,
.dm-chat .friends-ui ul li,
.dm-chat .online-ui ul li,
.dm-chat .all-ui ul li,
.dm-chat .add-friend-ui ul li {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  border-bottom: 1px solid #ececec !important;
  text-align: left !important;
  transition: background 0.2s ease !important;
}
.dm-list .friends-ui ul li:hover,
.dm-list .online-ui ul li:hover,
.dm-list .all-ui ul li:hover,
.dm-list .add-friend-ui ul li:hover,
.dm-chat .friends-ui ul li:hover,
.dm-chat .online-ui ul li:hover,
.dm-chat .all-ui ul li:hover,
.dm-chat .add-friend-ui ul li:hover {
  background-color: #000000 !important;
  cursor: pointer !important;
}

/* Estilos para "Todos" en móvil (conv-item) — aprovecha same look en desktop si conv-item aparece */
.dm-list .conv-item {
  background-color: #000000 !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem 0 !important;
  border-radius: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: background 0.2s ease !important;
}
.dm-list .conv-item:hover {
  background-color: #f7f0fb !important;
  cursor: pointer !important;
}
.dm-list .conv-item .conv-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #6a1b9a !important;
}
.dm-list .conv-item .conv-nick {
  flex: 1 !important;
  text-align: left !important;
  color: #333 !important;
  font-size: 0.85rem !important;
}

/* Estilos específicos para "En línea" (desktop) */
.dm-list .online-ui li,
.dm-chat .online-ui li {
  background: #0f0f0f !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem 0 !important;
  border-radius: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  border-bottom: none !important;
  transition: background 0.2s ease !important;
}
.dm-list .online-ui li:hover,
.dm-chat .online-ui li:hover {
  background-color: #0f000f !important;
  cursor: pointer !important;
}
.dm-list .online-ui li .friend-avatar,
.dm-chat .online-ui li .friend-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #48bb78 !important;
}

/* Estilos para "Añadir amigo" (desktop) */
.dm-list .add-friend-ui,
.dm-chat .add-friend-ui {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
}
.dm-list .add-friend-ui input#friend-id-input,
.dm-chat .add-friend-ui input#friend-id-input {
  width: 100% !important;
  padding: 0.5rem !important;
  border: 1px solid #ccc !important;
  border-radius: 0.4rem !important;
  font-size: 0.9rem !important;
}
.dm-list .add-friend-ui button#search-friend-btn,
.dm-chat .add-friend-ui button#search-friend-btn {
  width: auto !important;
  padding: 0.5rem 1rem !important;
  background: #6a1b9a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.4rem !important;
  font-size: 0.9rem !important;
  align-self: flex-start !important;
  transition: background 0.2s ease !important;
}
.dm-list .add-friend-ui button#search-friend-btn:hover,
.dm-chat .add-friend-ui button#search-friend-btn:hover {
  background: #4e1d6b !important;
}

/* Botones eliminar (dentro de cualquier wrapper) */
.dm-list .friends-ui button.eliminar,
.dm-list .online-ui button.eliminar,
.dm-list .all-ui button.eliminar,
.dm-list .add-friend-ui button.eliminar,
.dm-chat .friends-ui button.eliminar,
.dm-chat .online-ui button.eliminar,
.dm-chat .all-ui button.eliminar,
.dm-chat .add-friend-ui button.eliminar {
  background-color: #aa1100 !important;
  color: #fff !important;
  border: none !important;
  padding: 0.4rem 0.8rem !important;
  font-size: 0.8rem !important;
  border-radius: 0.4rem !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
  align-self: flex-start !important;
}
.dm-list .friends-ui button.eliminar:hover,
.dm-list .online-ui button.eliminar:hover,
.dm-list .all-ui button.eliminar:hover,
.dm-list .add-friend-ui button.eliminar:hover,
.dm-chat .friends-ui button.eliminar:hover,
.dm-chat .online-ui button.eliminar:hover,
.dm-chat .all-ui button.eliminar:hover,
.dm-chat .add-friend-ui button.eliminar:hover {
  background-color: #be2412 !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
  /* — Panel full‑screen móvil — */  /* — Wrappers (menos padding) — */
  .dm-list .friends-ui,
  .dm-list .online-ui,
  .dm-list .all-ui,
  .dm-list .add-friend-ui {
    padding: 0.75rem !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }

  /* — Títulos más pequeños — */
  .dm-list .friends-ui h3,
  .dm-list .online-ui h3,
  .dm-list .all-ui h3,
  .dm-list .add-friend-ui h3,
  .dm-chat .friends-ui h3,
  .dm-chat .online-ui h3,
  .dm-chat .all-ui h3,
  .dm-chat .add-friend-ui h3 {
    font-size: 0.95rem !important;
  }

  /* — Ítems más compactos — */
  .dm-list .friends-ui ul li,
  .dm-list .online-ui ul li,
  .dm-list .all-ui ul li,
  .dm-list .add-friend-ui ul li,
  .dm-chat .friends-ui ul li,
  .dm-chat .online-ui ul li,
  .dm-chat .all-ui ul li,
  .dm-chat .add-friend-ui ul li {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.6rem !important;
  }

  /* — “En línea” (móvil) — */
  #online-list {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  #online-list li {
    background: #050008 !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.25rem 0 !important;
    border-radius: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: background 0.2s ease !important;
  }
  #online-list li:hover {
    background-color: #100116 !important;
    cursor: pointer !important;
  }
  #online-list li .friend-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #48bb78 !important;
  }

  /* — “Añadir amigo” (móvil) — */
  #form-add-friend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  #form-add-friend input#nick-to-add {
    width: 100% !important;
    padding: 0.5rem !important;
    border: 1px solid #ccc !important;
    border-radius: 0.4rem !important;
    font-size: 0.9rem !important;
  }
  #form-add-friend button {
    width: auto !important;
    padding: 0.5rem 1rem !important;
    background: #6a1b9a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.4rem !important;
    font-size: 0.9rem !important;
    transition: background 0.2s ease !important;
  }
  #form-add-friend button:hover {
    background: #4e1d6b !important;
  }

  /* — Conv-item: nombre, preview, hora y puntito — */
  .dm-list .conv-item {
    position: relative !important;
    padding: 0.5rem 1rem !important;
  }
  .dm-list .conv-item .conv-info {
    flex: 1 !important;
    min-width: 0 !important;              /* <— permite ellipsis */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .dm-list .conv-item .conv-nick {
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
  .dm-list .conv-item .conv-preview {
    font-size: 0.75rem !important;
    color: #666 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
  .dm-list .conv-item .conv-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-left: 0.5rem !important;
  }
  .dm-list .conv-item .conv-time {
    font-size: 0.7rem !important;
    color: #999 !important;
  }
  .dm-list .conv-item .conv-unread-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #6a1b9a !important;
    border-radius: 50% !important;
    margin-top: 0.3rem !important;
  }
  
}
@media (max-width: 600px) {
  .enviar-btn svg {
    width: 55px !important;
    height: 40px !important;
  }
}
/* (+) Flecha “volver a Últimas” junto al avatar */
.back-arrow {
  margin-right: 0.75rem !important; /* separa del avatar */
  padding: 0 !important;
}
.back-arrow svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* Empuja las acciones al extremo derecho */
.chat-actions {
  margin-left: auto !important;
}
/* Header de chat en fila */
.chat-header {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 1rem !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Grupo flecha + avatar + nickname + estado */
.chat-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Ajustes para avatar */
.chat-avatar {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
}

/* Texto del nombre un poco más grande */
#chat-username {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* Estado alineado al centro de la misma fila */
#chat-status {
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
}

/* Empuja las acciones al extremo derecho */
.chat-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Ajusta el tamaño del SVG de la flecha */
.back-arrow svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}
/* Estilos generales para celular */
@media (max-width: 600px) {
  .chat-form {
    display: flex !important;
    flex-direction: row; /* Cambia a 'column' si necesitas los inputs apilados */
    align-items: center !important;
    justify-content: space-between;
    padding: 1rem 0.5rem !important;
    border-top: 1px solid var(--border) !important;
    background: var(--chat-bg) !important;
    gap: 0.5rem; /* Espacio entre elementos */
    flex-wrap: wrap; /* Por si se desbordan */
    
  }

  /* Opcional: si tienes un input y botón dentro */
  .chat-form input[type="text"],
  .chat-form textarea {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--input-bg, #fff);
  }


}
/* — En móvil, cuando se muestra el placeholder (sin chat abierto),
      oculta header, ventana de chat y formulario — */
@media (max-width: 600px) {
  /* Si #placeholder NO tiene hidden, significa que no hay chat activo */
  #placeholder:not(.hidden) ~ .chat-header,
  #placeholder:not(.hidden) ~ #chat-window,
  #placeholder:not(.hidden) ~ #chat-form {
    display: none !important;
  }
}
@media screen and (max-width: 600px) {
  /* Evita scroll en toda la aplicación de chat */
  body, html {
    overflow: hidden !important;
    height: 100vh !important;
  }
  /* Asegúrate de que el layout no desborde */
  .dm-layout, .dm-list, .dm-chat, .dm-messages {
    overflow: hidden !important;
  }
}


/* 🔸 Botones de emoji */
.reaction-bubble .emoji-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.reaction-bubble .emoji-btn:hover {
  transform: scale(1.3);
}

/* 📱 Móvil */
@media (max-width: 600px) {
  .reaction-bubble {
    max-width: 90vw;
    font-size: 1.6rem;
  }

  .reaction-bubble .emoji-btn {
    font-size: 1rem;
  }
}

/* 💻 Escritorio */
@media (min-width: 601px) {
  .reaction-bubble {
    font-size: 1.2rem;
    max-width: 300px;
  }

  .reaction-bubble .emoji-btn {
    font-size: 1.3rem;
  }
}
/* ─── Estilizar la hora para que esté en bloque y con un pequeño margen ─── */
.message-bubble .timestamp {
  display: block;                /* fuerza salto de línea */
  margin-top: 0.5rem;            /* espacio arriba */
  font-size: 0.75rem;            /* un poco más pequeño */
  color: var(--text-muted);      /* tono gris suave */
  opacity: 0.8;                  /* ligera transparencia para no competir con el texto */
}




/* ─── Opcional: estilizar cada emoji ─── */
.message-bubble .reaction-display .reaction-item {
  padding: 0.15rem;              /* un pelín de acolchado */
  border-radius: 4px;            /* esquinas suaves */
  transition: transform 0.2s;
}
.message-bubble .reaction-display .reaction-item:hover {
  transform: scale(1.2);         /* efecto coqueto al pasar el ratón */
}


/* — Ubica los 3 puntitos arriba a la derecha — */
.message-bubble .msg-options {
  position: absolute !important;  /* sale del flujo normal */
  top: 0.5rem !important;         /* separación del borde superior */
  right: 0.5rem !important;       /* separación del borde derecho */
  display: inline-block !important;
}
/* ─── Garantiza que la burbuja no se encoga y mantenga un ancho razonable ─── */
/* base de la burbuja */


/* posición de las reacciones */
.message-bubble .reaction-display {
  position: absolute;
  bottom: -1.4rem;
  display: flex;
  gap: 0.4rem;
}

.chat-message.outgoing .message-bubble .reaction-display {
  bottom: -0.6rem;
  left: -8px;             /* justo en la esquina */
}

.chat-message.incoming .message-bubble .reaction-display {
  bottom: -0.6rem;
  right: -8px;
}



/* ─── Si quieres ajustar el tamaño de la reacción ─── */
.message-bubble .reaction-display .reaction-item {
  font-size: 1.1rem;            /* un pelín más grande */
  padding: 0.1rem;
  border-radius: 4px;
  transition: transform 0.2s;
}
.message-bubble .reaction-display .reaction-item:hover {
  transform: scale(1.2);
}
/* Contenedor principal: referencia para absoluto */
.message-container {
  position: relative;
  display: inline-block;     /* ajusta al ancho de la burbuja */
  max-width: 80%;            /* o el % que prefieras */
  margin-bottom: 1.5rem;     /* separa mensajes verticalmente */
  vertical-align: top;       /* para que los mensajes queden alineados */
}

/* Burbuja igual que antes */
.message-container .message-bubble {
  position: relative;
  padding: 0.6rem 1rem;
  word-wrap: break-word;
  white-space: normal;
  text-align: left;
}

/* Reacción justo debajo y centrada */
.message-container .reaction-display {
  position: absolute;
  bottom: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
}

/* Tres puntitos fuera y a la derecha */
.message-container .msg-options {
  position: absolute;
  top: 0.4rem;               /* ajusta distancia del tope de la burbuja */
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Si quieres, añade transición o hover */
.message-container .msg-options:hover {
  transform: scale(1.1);
}
/* Botón de opciones sin fondo */
.options-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-in-out;
  color: var(--text) !important; /* para heredar color si tu SVG es monochrome */
}

/* Imagen dentro del botón */
.options-btn img {
  display: block;
  width: 24px !important;
  height: 24px !important;
}

/* Hover sutil */
.options-btn:hover {
  transform: scale(1.1);
}
/* — Burbuja de reacciones — */
.reaction-bubble {
  position: absolute;      /* para posicionarse relativo a .msg-options */
  top: 100%;               /* justo debajo del botón */
  margin-top: 4px;
  display: flex;           /* para alinear los emojis en fila */
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--bubble-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* Dirección de apertura */
.reaction-bubble.left   { right: 0;  left: auto;  }
.reaction-bubble.right  { left: 0;   right: auto; }

/* Asegúrate de que .hidden o .hidden aplicados sigan funcionando */
.hidden {
  display: none !important;
}
/* Botón “Eliminar amigo” con fondo rojo suave */
.eliminar-amigo {
  background-color: #b9434d;    /* rojo claro */
  color: #721c24;               /* texto rojo oscuro */
  border: 1px solid #f5c6cb;    /* borde algo más intenso */
  border-radius: 0.25rem;       /* esquinas redondeadas */
  padding: 0.25rem 0.5rem;      /* espacio interno */
  font-size: 0.875rem;          /* tamaño de texto */
  cursor: pointer;
  transition: background-color .2s;
}
.eliminar-amigo:hover {
  background-color: #c79ba0;    /* un poco más intenso al pasar */
}
.empty-message {
  display: block !important;
  list-style: none;
  padding: 0.5rem 0;
  color: #666;
  text-align: center;
}
/* Indentado para mensaje de lista vacía */
#pending-requests li.empty-request {
   padding-left: 0.5rem !important;    /* separa el texto hacia la derecha */
   color: #666;           /* un gris suave */
   list-style: none;      /* quita la viñeta si existiera */
 }
/* Botón “Vaciar conversación” con solo borde naranja */
.btn-vaciar-conv {
  background-color: transparent !important;      /* fondo transparente */
  color: #856404 !important;                     /* texto naranja oscuro */
  border: 2px solid #856404 !important;          /* borde grueso naranja oscuro */
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-vaciar-conv:hover {
  background-color: #8564041a !important;        /* fondo semitransparente al hover */
  color: #fff !important;                        /* texto blanco para contraste */
}

/* Botón “Eliminar conversación” con solo borde rojo */
.btn-eliminar-conv {
  background-color: transparent !important;      /* fondo transparente */
  color: #721c24 !important;                     /* texto rojo oscuro */
  border: 2px solid #721c24 !important;          /* borde grueso rojo oscuro */
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-eliminar-conv:hover {
  background-color: #721c241a !important;        /* fondo semitransparente al hover */
  color: #fff !important;                        /* texto blanco para contraste */
}
.options-btn img {
  /* Invierte el negro a blanco */
  filter: invert(1) brightness(2) !important;
}
/* Dentro de estilo-chat.css */

/* Icono del candado dentro del banner */
.block-banner .lock-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  /* Usamos currentColor, así que definimos color en el contenedor */
  color: #ffffff;
  filter: invert(1);
}

/* Banner de bloqueo actualizado para fondo oscuro o claro */
.block-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(85, 4, 4);       /* rojo oscuro */
  color: #fff;            /* texto blanco */
  font-size: 0.9rem;
  padding: 8px;
  border-top: 1px solid #800;
}
.preview-lock-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 4px;
  /* Si tu SVG está en negro, esto lo invierte a blanco */
  filter: invert(1);
}
/* ——— Todas las líneas inferiores en Pending, Amigos, Online, All, Add ——— */
#pending-requests li,
.dm-list .friends-ui ul li,
.dm-list .online-ui ul li,
.dm-list .all-ui ul li,
.dm-list .add-friend-ui ul li,
.dm-chat .friends-ui ul li,
.dm-chat .online-ui ul li,
.dm-chat .all-ui ul li,
.dm-chat .add-friend-ui ul li {
  /* Mantenemos el 1px sólido, pero cambiamos el color */
  border-bottom: 1px solid var(--border-violeta-negro) !important;
}

/* ——— Campo “ID de usuario” en Añadir Amigo ——— */
.add-friend-ui input#friend-id-input {
  /* Sustituye el gris claro por tu violeta-negro */
  border: 1px solid var(--border-violeta-negro) !important;
}
.friends-ui hr {
  /* Quitamos el estilo por defecto */
  border: none !important;
  /* Y añadimos solo la línea superior con nuestro color */
  border-top: 1px solid var(--border-violeta-negro) !important;
  margin: 0.75rem 0 !important; /* ajusta espacio vertical si lo deseas */
}
.image-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.image-modal.hidden {
  display: none;
}
.modal-img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}
  /* Hace que clicks sobre el SVG se transmitan al botón padre */
#btn-emoji svg,
#btn-emoji svg * {
  /* ni el SVG ni ninguno de sus hijos detendrán el clic */
  pointer-events: none !important;
}
/* en tu mensajes.css */
#send-btn svg,
#send-btn svg * {
  pointer-events: none !important;
}