/* ==========================================================================
   OREGONS CHAT - MÓDULO: BOTÓN DE OPCIONES (TRES PUNTOS) Y SUBMENÚ
   Estilos independientes y clasificados para evitar código espagueti
   ========================================================================== */

/* Contenedor inteligente que empuja y alinea los botones en la barra gris */
.header-actions {
    margin-left: auto !important; /* Desplaza el grupo entero al filo derecho */
    display: flex !important;
    align-items: center !important;
    gap: 14px !important; /* Espaciado perfecto entre el teléfono y los tres puntos */
}

/* Estilo del botón de tres puntos verticales */
#btn-opciones {
    background: transparent !important;
    border: none !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.1s ease !important;
    padding: 0 !important;
}

#btn-opciones:active {
    transform: scale(0.85) !important;
}

#btn-opciones svg {
    width: 22px !important;
    height: 22px !important;
}

/* SUBMENÚ DESPLEGABLE SUPERIOR (COMPLETAMENTE LIMPIO Y GRIS OSCURO) */
#options-menu {
    position: absolute !important;
    top: 60px !important; /* Se posiciona justo debajo de la barra superior */
    right: 12px !important; /* Alineación fija al borde derecho seguro del celular */
    width: 160px !important; /* Ancho estándar serio de un menú emergente */
    height: auto !important; /* Se adapta al tamaño de las 3 opciones automáticamente */
    padding: 6px 0 !important; /* Limpieza de aire en los extremos superiores e inferiores */
    background-color: #2d2d2d !important; /* Mismo color gris corporativo para camuflarse */
    border-radius: 8px !important; /* Esquinas redondeadas suaves estilo WhatsApp */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; /* Sombra imponente para dar relieve */
    border: 1px solid #383838 !important; /* Borde muy sutil para notar la separación del fondo */

    /* Configuración de la animación: Se desliza suavemente hacia abajo y aparece */
    transform: translateY(-15px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 20 !important; /* Máxima prioridad por sobre los mensajes */
}

/* Regla de activación controlada por JavaScript */
#options-menu.activo {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Estilos quirúrgicos para las filas de texto internas del submenú */
.option-item {
    padding: 12px 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #383838 !important; /* Separador sutil entre cada opción */
    transition: background-color 0.15s ease !important;
}

.option-item:last-child {
    border-bottom: none !important; /* Eliminamos la línea divisoria a la última opción */
}

.option-item span {
    color: #ffffff !important; /* Letras blancas corporativas limpias */
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
}

/* Efecto visual de selección gris al presionar con el dedo en el teléfono */
.option-item:active {
    background-color: #383838 !important;
}