/* Mensajería — estilos auxiliares */
html, body { height: 100%; }

/* Altura dinámica del viewport móvil (teclado visible) */
#chatBody, #loginBody {
  height: 100vh;
  height: 100dvh;
}

input, textarea { font-size: 16px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

.bubble { position: relative; max-width: 82%; word-wrap: break-word; overflow-wrap: anywhere; word-break: break-word; }
.bubble.mine { background: #166534; border-radius: 16px 4px 16px 16px; }
.bubble.theirs { background: #1e293b; border-radius: 4px 16px 16px 16px; }

.msg-menu-btn { width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.msg-menu-btn:hover { background: #1e293b; }

.chat-row { padding: 12px 16px; }
.chat-row.active { background: #1e293b; }
.contact-row { padding: 12px 16px; }
.contact-row:hover { background: #1e293b; }

/* Elementos del menú lateral (lista de opciones) */
.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #cbd5e1;
  text-align: left;
}
.menu-item:hover { background: #1e293b; }

.typing-dot { width: 5px; height: 5px; border-radius: 9999px; background: #94a3b8; animation: blink 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,100% { opacity: .2; } 50% { opacity: 1; } }

.online-dot { width: 10px; height: 10px; border-radius: 9999px; }

.pulse { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Animaciones estilo Telegram para la lista de chats */
.chat-row { will-change: transform; }
.row-new { animation: rowFlash 1.6s ease-out; }
@keyframes rowFlash {
  0% { background: rgba(14, 165, 233, 0.45); }
  100% { background: transparent; }
}
.row-updated { animation: rowPulse 0.9s ease-out; }
@keyframes rowPulse {
  0% { background: rgba(16, 185, 129, 0.35); }
  100% { background: transparent; }
}
.badge-pop { animation: badgePop 0.35s cubic-bezier(.2, .8, .2, 1); }
@keyframes badgePop {
  0% { transform: scale(.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.nuevo-pill {
  background: #0ea5e9;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 9999px;
  letter-spacing: .02em;
}

/* Destello del mensaje nuevo al hacer scroll al final */
.msg-flash { animation: msgFlash 1.3s ease-out; }
@keyframes msgFlash {
  0% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.9); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

/* Subida de archivos: barra de progreso en la burbuja */
.upload-progress { height: 6px; background: #1e293b; border-radius: 3px; overflow: hidden; }
.upload-bar { height: 100%; width: 0; background: linear-gradient(90deg, #0ea5e9, #3b82f6); transition: width .2s ease; }

/* Control de velocidad de reproducción para audio/nota de voz */
.speed-selector { gap: 4px; }
.speed-btn {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  background: #334155;
  color: #cbd5e1;
}
.speed-btn:hover { background: #475569; }
.speed-btn.speed-on { background: #0ea5e9; color: #fff; }