/* =========================================================
   ARCHIVO: /shared/css/components.css
   Estilos para componentes reutilizables.
========================================================= */

/* ========================================
   --- COMPONENTE: Tarjeta de Publicación ---
   ======================================== */
.post-card {
    background:  var(--color-surface);
    border: 1px solid var(--color-ui);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ¡Clave! Esto empuja el botón a la derecha */
    gap: 10px;
    margin-bottom: 10px;
}


.post-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Estilos para el nuevo botón de eliminar */
.delete-post-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: var(--color-text-secondary); /* Un color sutil */
    transition: color 0.2s ease;
}

.delete-post-btn svg {
    width: 18px;
    height: 18px;
}

.delete-post-btn:hover {
    color: #ef4444; /* Rojo al pasar el ratón */
}

.post-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #333;
    object-fit: cover;
}

.post-username a {
    font-weight: bold;
    color: var(--color-text);
    font-size: 0.95rem;
}

.post-time {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.post-content {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.post-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--color-ui);
}

.post-actions button, .post-actions a button {
    background: none;
    border: none;
    color: #aaa;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.post-actions button:hover {
    color: #fff;
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}


/* ========================================
   --- COMPONENTE: Menú Lateral (Hamburguesa) ---
   ======================================== */
/* Contenedor principal del menú */
.side-menu {
    position: fixed;
    top: 0;
    left: -280px; /* Oculto inicialmente */
    width: 280px;
    height: 100%;
    background-color: var(--color-bg);

    z-index: 1001;
    display: flex;
    flex-direction: column; /* Importante para el layout */
    border-right: 1px solid var(--color-ui);

    /* 🚀 OPTIMIZACIONES AQUÍ */
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateX(-100%); /* Cambiamos left por transform */
    will-change: transform;       /* Avisamos a la GPU que este elemento se moverá */
    backface-visibility: hidden;  /* Evita parpadeos */
    perspective: 1000px;          /* Ayuda a la GPU */
}
.side-menu.open {
    transform: translateX(0);
     left: 0;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

.menu-profile {
    position: relative;
    padding-top: 40px;
    text-align: center;
    color: white;
    flex-shrink: 0; /* No deja que el perfil se encoja */
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.menu-profile-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    /* Se elimina la imagen de fondo hardcodeada */
    background-color: #333; /* Color de fondo por defecto */
    background-size: cover;
    background-position: center;
    z-index: -1;
    transition: background-image 0.3s; /* Opcional: para una transición suave */
}
.menu-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
   /* border: 3px solid var(--color-text);*/
    object-fit: cover;
    margin: 0 auto;
    margin-top: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.menu-username {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 10px;
    color:var(--color-text)
}
.menu-user-level {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.level-bar {
    width: 60%;
    height: 8px;
    background-color: #333;
    border-radius: 4px;
    margin: 8px auto 0;
    overflow: hidden;
}
.level-progress {
    width: 70%;
    height: 100%;
    background-color: #f1c40f;
    border-radius: 4px;
}
.menu-top-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;

}
.menu-button-missions, .menu-button-coins {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.8rem;
    color: white;
    cursor: pointer;
}


/* Opcional: Estilo elegante para el scrollbar en navegadores WebKit */
.menu-nav::-webkit-scrollbar {
    width: 4px;
}
.menu-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}

.menu-nav {
    flex-grow: 1; /* Ocupa todo el espacio restante */
    overflow-y: auto; /* AQUI ESTÁ LA MAGIA: Activa el scroll */
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.menu-nav-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    
    /* ¡IMPORTANTE! Aquí se define el color base del icono */
    color: var(--color-text); 
    
    text-decoration: none;
    transition: all 0.2s ease;
}

.menu-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    
    /* Aseguramos que el color fluya hacia el SVG */
    color: inherit; 
}
.menu-nav-item:hover .menu-icon-wrapper {
    color: var(--color-accent); /* Cambia de color al pasar el mouse */
}
.menu-icon-wrapper svg {
    width: 20px;
    height: 20px;
    /* Esto garantiza que el SVG use el color de .menu-nav-item */
    fill: currentColor; 
}
/* Si el SVG es de líneas (stroke), añade esto: */
.menu-icon-wrapper svg[stroke="currentColor"] {
    stroke: currentColor;
    fill: none;
}

/* EFECTO HOVER: Si quieres que el icono brille con el acento al pasar el mouse */
.menu-nav-item:hover {
    color: var(--color-accent);
    background-color: rgba(var(--color-accent-rgb), 0.1);
}




/* =========================================================
   🎤 MICRÓFONO — Evitar que el navegador robe el gesto
========================================================= */

#voice-mic-btn {
    /* Bloquea scroll/zoom nativo sobre el botón.
       Sin esto, mobile dispara pointercancel al mover el dedo. */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* Evita el "delay" de 300ms en algunos navegadores */
    -webkit-tap-highlight-color: transparent;
}

/* Por si el botón tiene hijos (svg, iconos) */
#voice-mic-btn * {
    touch-action: none;
    pointer-events: none;   /* los hijos no deben capturar el touch */
}





/* =========================================================
   Estilos para los iconos de acciones en los posts
========================================================= */

/* 1. Estilo base para TODOS los iconos de acción (estado INACTIVO) */
.post-actions .like-icon,
.post-actions .save-icon,
.post-actions .comment-icon svg {
    /* Usamos una variable de tema para el color inactivo */
    color: var(--color-text); 
    fill: var(--color-text); /* Para el ícono de comentario que usa 'fill' */
    transition: color 0.3s ease, fill 0.3s ease; /* Transición suave */
}

/* 2. Estilo para el corazón cuando está ACTIVO */
.post-actions .like-icon.liked {
    color: #FF4466 !important; /* Mantenemos el rojo específico */
    animation: pop 0.3s ease-out;
}

/* 3. NUEVO: Estilo para el guardado cuando está ACTIVO */
.post-actions .save-icon.saved {
    color: #4A90E2; /* El azul específico que ya usabas */
    /* También necesitamos llenar el ícono */
    fill: #4A90E2;
}

/* Animación 'pop' que ya tenías */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}


/*
  ========================================
  --- ESTILOS PERSONALIZADOS PARA PLYR.IO ---
  ========================================
*/
:root {
  /* Hacemos que el color principal de Plyr herede nuestro color de acento del tema */
  --plyr-color-main: var(--color-accent);
}

/*
  ================================================================
  --- NUEVA REGLA PARA LOS BORDES REDONDEADOS ---
  ================================================================
*/
.plyr__video-embed {
    border-radius: 0.5rem; /* El radio de borde que pediste */
    overflow: hidden;      /* ¡LA CLAVE! Esto recorta el video de adentro para que no se salga de las esquinas. */
    
    /* Pequeña mejora para el renderizado en algunos navegadores móviles */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}






/* ========================================
   --- COMPONENTE: Barra Lateral de Amigos ---
   ======================================== */


/* Contenedor principal de la barra de amigos */
.friends-sidebar {
    position: fixed;
    top: 0;
    right: -280px; /* Oculto a la derecha */
    width: 280px;
    height: 100%;
    background: var(--color-surface);
    z-index: 1001;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column; /* Clave: apila elementos verticalmente */
    box-shadow: -2px 0 10px rgba(0,0,0,0.5);
}

.friends-sidebar.open {
    right: 0;
}

/* Encabezado fijo */
.friends-header {
    flex-shrink: 0; /* No se encoge */
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

/* Contenedor de lista con Scroll */
.friends-list {
    flex-grow: 1;      /* Ocupa todo el espacio que sobre */
    overflow-y: auto;  /* Habilita el scroll interno */
    padding: 10px 0 60px;
    -webkit-overflow-scrolling: touch; /* Suavidad nativa en iOS */
}

/* Ajuste del scrollbar para que sea estético */
.friends-list::-webkit-scrollbar {
    width: 4px;
}
.friends-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}


.friends-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 260px;
    height: 100%;
    background-color: var(--color-bg);
    z-index: 1000;
    transform: translateX(100%); /* Oculto a la derecha por defecto */
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-ui);
}

.friends-sidebar.open {
    transform: translateX(0); /* Lo hace visible */
}

.friends-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-ui);
    flex-shrink: 0;
}

.friends-header svg {
    fill: var(--color-text);
}

.friends-list {
    overflow-y: auto;
    flex-grow: 1;
}

.friend-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.friend-item:hover {
    background-color: var(--color-surface);
}

.friend-avatar-container {
    position: relative;
    margin-right: 12px;
}

.friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-bg);  
    background-color: #95a5a6; /* Gris por defecto */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.status-dot.online {
    background-color: #2ecc71; /* Verde */
}

/* Opcional: un color diferente para cuando está jugando */
.status-dot.playing {
    background-color: var(--color-accent); /* Usa el color de acento del tema */
}

/* Estilo para el pequeño icono de la app */
.status-app-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-dot.offline {
    background-color: #95a5a6; /* Gris */
}

.friend-info {
    overflow: hidden;
}

.friend-username {
    font-weight: bold;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-status {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}







.emoji-modal-size {
    max-width: 300px !important;
}

.emoji-crop-container {
    width: 100%;
    aspect-ratio: 1;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
}

#emoji-crop-source {
    max-width: 100%;
    display: block;
}

/* Estilo para los mini-emojis en el grid */
.custom-emoji-render {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-emoji-render img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}


.folder-drag-indicator {
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
    /* Brillo para que se vea sobre cualquier fondo */
    box-shadow: 0 0 15px var(--color-accent);
}

@keyframes pulseFolder {
    from { box-shadow: 0 0 10px var(--color-accent); }
    to { box-shadow: 0 0 30px var(--color-accent); }
}

#add-emoji-trigger {
    /* 🚀 LA CLAVE: Evita que el toque en este botón active el scroll del padre */
    touch-action: none !important; 
    position: relative;
}



/* Emojis personalizados dentro del texto */
.inline-custom-emoji {
    width: 22px !important; /* Ajusta según el tamaño de tu fuente */
    height: 22px !important;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    /* Evita que flexbox intente estirar la imagen */
    flex-shrink: 0; 
    flex-grow: 0;
}


/* Ajuste por si el mensaje es solo un emoji (estilo "grande") */
p:has(> .inline-custom-emoji:only-child) .inline-custom-emoji {
    height: 40px;
    width: 40px;
}




.chat-input-editable {
    flex-grow: 1;
    background: var(--color-surface);
    border: none;
    color: var(--color-text);
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    max-height: 120px; /* Altura máxima antes de hacer scroll */
    min-height: 40px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
    display: block;
}
.chat-input-editable {
    line-height: 1.5; /* Altura de línea estable */
    
    word-wrap: break-word;
}


/* Estilo para los emojis dentro del input */
.chat-input-editable img {
    display: inline-block !important; /* Asegura que se mantenga en la misma línea */
    vertical-align: sub !important; /* Alinea con el centro del texto */
    height: 22px;
    width: 22px;
    /*margin: 0 2px;*/
    border: none;
    outline: none;
}
/* Evitar que el navegador cree bloques de párrafos internos */
.chat-input-editable div, 
.chat-input-editable p {
    margin: 0 !important;
    padding: 0 !important;
    display: block; /* O inline para que no salte, pero para Enter real suele ser block */
}

/* El truco para que los <br> finales sean visibles y no salten doble */
.chat-input-editable br {
    content: "";
    display: block;
    margin-bottom: 0;
}

/* Simular el placeholder (porque los div no tienen placeholder nativo) */
.chat-input-editable:empty:before {
    content: attr(placeholder);
    color: var(--color-text-secondary);
    opacity: 0.5;
    pointer-events: none;
}




#emoji-creator-modal .emoji-crop-container {
    width: 100%;
    max-height: 300px; /* Altura máxima similar al de stickers */
    display: flex;
    align-items: center;
    justify-content: center;
}

#emoji-crop-source {
    max-width: 100%;
    display: block;
}

/* Reutilizamos los estilos de botones de stickers para el modal de emojis */
#emoji-creator-modal .modal-btn.primary {
    background: var(--color-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    flex: 1;
}

#emoji-creator-modal .modal-btn.secondary {
    background: #222;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    flex: 1;
}



.cropper-bg {
    background-image: none !important; /* Quita los cuadros */
    background-color: #151515 !important; /* Color sólido oscuro (puedes usar var(--color-surface)) */
}

/* También aseguramos el contenedor del modal de emojis y stickers */
.emoji-crop-container, .sticker-crop-container {
    background-color: #151515 !important;
    border: 1px solid var(--color-border);
}

/* Opcional: si quieres que el área fuera del recorte sea más oscura */
.cropper-modal {
    opacity: 0.8 !important;
    background-color: #000 !important;
}





.contact-footer {
    padding: 20px;
    margin-top: auto; /* Empuja al final del contenedor flex */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0,0,0,0.2);
    font-size: 11px;
    color: #888;
    text-align: center;
}

.contact-footer a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}
.contact-footer a:hover {
    text-decoration: underline;
    filter: brightness(1.3);
}













.community-tag-footer {
    margin: 8px 16px 12px 16px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.community-tag-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
}

.community-tag-name {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    letter-spacing: 0.5px;
}








/* 🚀 Este es el que define espacio real en el documento — SIN overflow */
.status-feed-outer {
    background: var(--color-bg);
}

/* 🚀 Este es el que scrollea — vive "adentro", no afecta el flujo de lo de abajo */
.status-feed {
    display: flex;
    overflow-x: auto;
    padding: 5px;
    gap: 15px;
    scrollbar-width: none;
}

.status-feed::-webkit-scrollbar {
    display: none;
}

#friends-status-list {
    display: flex;
    gap: 15px;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 68px;
}

/* 🚀 Nuevo: solo envuelve la foto, así el + se posiciona respecto a ELLA, no al item completo */
.avatar-container {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.avatar-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 3px;
    border: 2px solid var(--color-accent);
    box-sizing: border-box;
    position: relative; /* 👈 necesario para el anillo animado */

}
/* 🚀 Anillo de progreso REAL (no gira indefinidamente, se llena según % subido) */
.avatar-wrapper.uploading::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(
        var(--color-accent) calc(var(--progress, 0) * 3.6deg),
        rgba(255, 255, 255, 0.25) calc(var(--progress, 0) * 3.6deg) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: background 0.12s linear;
    z-index: 3;
}

.avatar-wrapper.uploading {
    border-color: transparent;
}

/* 🚀 Preview local (imagen o video) que se muestra debajo del anillo mientras sube */
.my-status-preview-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
@keyframes status-ring-spin {
    to { transform: rotate(360deg); }
}
.status-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--color-ui);
}

.add-status-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    border: 2px solid var(--color-bg);
    padding: 0;
    cursor: pointer;
    z-index: 2;
    pointer-events: auto; /* asegurate que no esté en 'none' */

}

.add-status-btn:active {
    filter: brightness(0.85);
}

.status-name {
    margin-top: 5px;
    font-size: 11px;
    color: var(--color-text);
    text-align: center;
    width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-status-item .avatar-wrapper {
    border-color: var(--color-ui);
}

.status-bubble-slot {
    height: 32px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.status-text-bubble {
    position: relative;
    background: var(--color-ui);
    color: var(--color-text);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 12px;
    max-width: 96px;
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}


.status-text-bubble::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.plus-icon { bottom: 0; right: 0; background: var(--color-accent); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 2px solid var(--color-bg); }



.preview-frame {
    position: relative;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

.preview-frame img,
.preview-frame video {
    width: 100%;
    display: block;
    max-height: 320px;
    object-fit: contain;
    background: #000;
}

.preview-frame video {
    outline: none;
}

.preview-play-toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.preview-play-toggle:active {
    background: rgba(0, 0, 0, 0.7);
}

.trim-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-top: 16px;
    font-variant-numeric: tabular-nums;
}

#trim-duration-label {
    color: var(--color-text);
    font-weight: 600;
}

.trim-slider-wrap {
    position: relative;
    height: 36px;
    margin: 10px 0 6px;
}

.trim-track-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    background: #2a2a2a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.trim-track-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    background: var(--color-accent);
    left: 0%;
    width: 100%;
    cursor: grab;
    z-index: 2;
    box-shadow: 0 1px 4px var(--color-accent);
    touch-action: none;
    overflow: hidden; /* 🚀 las marcas ya no pueden dibujarse fuera de los límites del tramo */
    min-width: 24px; /* 🚀 nunca colapsa a un ancho menor al que necesitan las marcas para verse bien */
}

.trim-track-fill:active {
    cursor: grabbing;
    filter: brightness(1.08);
}

.trim-track-fill::before,
.trim-track-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.85);
}

.trim-track-fill::before { left: 6px; }
.trim-track-fill::after { right: 6px; }
.trim-playhead {
    position: absolute;
    top: 2px;
    width: 2px;
    height: 32px;
    background: #fff;
    border-radius: 1px;
    left: 0%;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    z-index: 3;
}

.trim-slider-wrap input[type="range"] {
    position: absolute;
    width: 100%;
    top: 0;
    height: 36px;
    margin: 0;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 4;
}

.trim-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}

.trim-slider-wrap input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-accent);
    cursor: ew-resize;
    margin-top: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.trim-slider-wrap input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.1);
}
.remove-audio-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    user-select: none;
}

.remove-audio-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}



.media-input-container {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.media-add-btn{
    width: 60px;
    height: 60px;
    border: 2px dashed #444;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s;
    border-color: var(--color-ui)  !important;
}

.media-add-btn:hover {
    border-color: var(--color-accent) !important;
    background: var(--color-accent)10; /* Un poco de color de acento al pasar el mouse */
}

.plus-icon {
    font-size: 24px;
    color: #888;
    font-weight: bold;
}
button#btn-publish-status {
    background: var(--color-accent);
    padding: 15px;
    border-radius: 20px;
}
span.plus-icon {
    padding: 13px;
    color: var(--color-text);
}







.color-picker-row {
    margin: 10px 0;
}
.color-swatches {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.color-swatch.selected {
    border-color: white;
    transform: scale(1.15);
}



















/* =========================================================
   🚀 LIVE CARD — misma estructura que .post-card
========================================================= */
.live-card {
    /* Borde rojo sutil + glow para distinguirlo de un post normal. */
    border: 1px solid rgba(211, 63, 73, 0.55);
    box-shadow: 0 2px 12px rgba(211, 63, 73, 0.18), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.live-card .post-username {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #D33F49;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(211, 63, 73, 0.45);
}

.live-card .post-time {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #D33F49;
}

/* Wrapper clickeable del media (mismo aspect que un video post). */
.live-post-wrapper {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.live-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a1a1f 0%, #0a0a12 100%);
    overflow: hidden;
}
/* ============================================================
   🚀 LIVE PREVIEW — loader con avatar blurreado
   ============================================================ */

/* El <video> arranca invisible hasta que haya frame real.
   Sin esto, el navegador muestra el ícono de play gris por defecto. */
.live-preview-video[data-ready="false"] {
    opacity: 0;
}
.live-preview-video {
    opacity: 1;
    transition: opacity 0.25s ease;
    background: transparent;
}

/* Overlay que tapa el video mientras carga */
.live-preview-loading {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 1;
}

/* Fondo: avatar del streamer con blur fuerte + oscurecido */
.live-preview-loading-bg {
    position: absolute;
    inset: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    object-fit: cover;
    filter: blur(28px) brightness(0.35) saturate(1.2);
    transform: scale(1.1);
    z-index: 0;
    pointer-events: none;
}

/* Contenido: avatar circular + spinner */
.live-preview-loading-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}

.live-preview-loading-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.live-preview-loading-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: live-preview-spin 0.85s linear infinite;
}

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

.live-preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}



/* Badge "EN VIVO" arriba a la izquierda del media. */
.live-preview-viewers {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.live-preview-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D33F49;
    animation: live-preview-pulse 1.2s ease-in-out infinite;
}

@keyframes live-preview-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Acciones del live card: solo Ver + Share. */
.live-actions {
    justify-content: space-between;
    padding: 0 4px;
}

.live-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #D33F49 !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(211, 63, 73, 0.3);
}

.live-watch-btn:hover {
    filter: brightness(1.1);
}

/* ============================================================
   EXTRACTED FROM pages.css (auto-generated by split-css.js)
   ============================================================ */

/* ============================================================
   ARCHIVO GENERADO AUTOMÁTICAMENTE por split-css.js
   Origen: web/css/pages.css
   NO EDITAR A MANO — regenerar con el script
   ============================================================ */



#globe-visual {
  border-radius: 50%;
  height: 150px;
  margin: 0 auto;
  overflow: hidden;
  width: 150px;
}


/* Estilo general para el contenedor del globo */
#globe-visual {
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Añade esto a tu hoja de estilos principal */
#forgot-password-trigger:hover {
    transform: scale(1.02);
    filter: brightness(0.9);
    cursor: pointer;
}



#forgot-password-trigger:active {
    transform: scale(0.98);
}


/* Animación suave para el input */
#register-password {
    border: 2px solid transparent;
}



#register-password:focus {
    /* El brillo inicial */
    box-shadow: 0 0 0 2px #4f46e5; 
}



/* Para que la barra de fuerza no parpadee */
#password-strength {
    height: 3px;
    background: rgba(255,255,255,0.1);
}




#btn-send-code:disabled {
    pointer-events: none; /* Evita cualquier clic */
    background-color: #4b5563 !important; /* Un gris neutro */
}


#password-strength,
#forgot-password-strength {
    height: 3px;
    background: rgba(255,255,255,0.1);
}



#register-password:focus,
#new-password:focus {
    box-shadow: 0 0 0 2px #4f46e5;
}



#new-password {
    border: 2px solid transparent;
}



#btn-forgot-step2:disabled {
    pointer-events: none;
    background-color: #4b5563 !important;
}


/* Nueva animación que no rompe el anclaje central */
@keyframes ufo-hover-simple {
    0%, 100% { margin-top: 0px; transform: translateY(-50%) rotate(3deg); }
    50% { margin-top: -15px; transform: translateY(-50%) rotate(-3deg); }
}



/* Keyframes para el parpadeo nítido */
@keyframes ufo-blink {
    0%, 100% { 
        opacity: 1; 
        filter: drop-shadow(0 0 15px var(--color-accent)) brightness(1.2); 
    }
    50% { 
        opacity: 0.7; 
        filter: drop-shadow(0 0 5px var(--color-accent)) brightness(0.8); 
    }
}



/* Keyframes para flotar (Suave) */
@keyframes ufo-hover {
    0%, 100% { transform: translateY(0) rotate(3deg); }
    50% { transform: translateY(-15px) rotate(-3deg); }
}


/* Animación de latido para el contador de match */
#match-countdown {
    background: #facc15;
    color: #000;
    padding: 2px 10px;
    border-radius: 6px;
    font-family: monospace;
    font-weight: 900;
    font-size: 14px;
}



@keyframes matchPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}



@keyframes pulse-like {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 128, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(255, 0, 128, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 128, 0); }
}


/* Barra de información del Match (Bio, Edad, Sexo) */
.match-info-header {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-accent);
    padding: 10px 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    margin-bottom: 0 !important; /* El grid ya se encarga del posicionamiento */
}



/* Estado especial cuando al usuario "le gustan" */
.match-like-btn.partner-liked {
    background: var(--color-accent) !important;
    box-shadow: 0 0 20px var(--color-accent);
    animation: pulse-accent 1.5s infinite;
    border: 2px solid white; /* Un borde para que resalte más */
}


@keyframes pulse-accent {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.7); 
    }
    70% { 
        transform: scale(1.05); 
        box-shadow: 0 0 0 15px rgba(var(--color-accent-rgb), 0); 
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); 
    }
}



@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}



@keyframes eq-bounce {
    0%, 100% { height: 4px; }
    50% { height: 14px; }
}



#custom-link-favicon,
.custom-link-favicon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 6px;
}


.custom-link-fallback,
#custom-link-fallback {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}



#username-input {
  background-color: var(--color-ui);
  border: none;
  border-radius: 9999px;
  caret-color: transparent;
  color: var(--color-text);
  outline: none;
  padding: 6px 16px;
  text-align: center;
  transition: background 0.3s;
}



#username-input:focus {
  background-color: var(--color-surface);
  caret-color: var(--color-text);
}



#profile-pic-container {
  background-color: var(--color-ui);
  border-radius: 50%;
  cursor: pointer;
  height: 120px;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 120px;
}



#profile-pic-container:hover {
  box-shadow: 0 0 10px var(--color-accent);
  transform: scale(1.05);
}



#profile-img {
  border-radius: 50%;
  display: none;
  height: 100%;
  object-fit: cover;
  width: 100%;
}



#default-avatar-svg {
  color: var(--color-text);
  height: 60px;
  width: 60px;
}



#complete-profile-btn {
  background-color: var(--color-accent);
  transition: background 0.3s ease;
}



#complete-profile-btn:hover {
  background-color: var(--color-ui);
}



#dice-btn path{
  fill: var(--color-text);
}



#original-post-container{
  border-color: var(--color-border);
}



.header-back-btn,
.header-output {
    flex: 0; /* Hacen que las secciones izquierda y derecha ocupen el mismo espacio */
}



.header-back-btn {
    font-size: 1.5rem; /* 2xl */
    color: var(--color-text-secondary); /* gray-400 */
    text-align: left;
}



.header-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700;   /* font-bold */
    text-align: left;
    /* El título se centrará automáticamente en el espacio disponible */
}



.comment-input-bar {
  background: var(--color-surface);
  border-top: 1px solid var(--color-ui);
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  min-height: 60px;
  padding: 5px 10px;
  position: fixed;
  right: 0;
  z-index: 10;
}



.input-row {
  align-items: center;
  display: flex;
  width: 100%;
}



#comment-content {
  background: var(--color-ui);
  border: none;
  border-radius: 20px;
  color: var(--color-text);
  flex-grow: 1;
  margin-right: 10px;
  outline: none;
  padding: 10px 15px;
  resize: none;
}



#reply-to-status {
  background-color: #2a2a2a;
  border-radius: 10px;
  color: var(--color-text-secondary);
  display: none;
  font-size: 0.75rem;
  margin-bottom: 5px;
  padding: 4px 12px;
  width: 100%;
}



.header-center .header-title {
    font-weight: 700;   /* font-bold */
    font-size: 1.125rem; /* text-lg */
}



#cancel-post-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary); /* text-gray-400 */
    cursor: pointer;
    font-size: 1rem;
}



.preview-box {
    align-items: center;
    background-color: var(--color-surface);
    border-radius: 12px;
    display: flex;
    height: 200px;
    justify-content: center;
    overflow: hidden;
    position: relative;
}



.preview-box img {
    object-fit: contain;
}



#edit-profile-btn {
  cursor: pointer;
  display: none;
}


/* Envoltura para cada insignia e su nombre */
.badge-item-wrapper {
    position: relative; /* Esto es el ancla para el nombre flotante */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}


/* El nombre que flota */
.badge-floating-name {
    position: absolute;
    top: 120%; /* Aparece justo debajo de la imagen */
    left: 50%;
    transform: translateX(-50%) translateY(-5px); /* Centrado horizontal */
    background: rgba(0, 0, 0, 0.9);
    color: var(--color-accent);
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap; /* Evita que el nombre se parta en dos líneas */
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.1);
}


/* Clase para mostrar con animación */
.badge-floating-name.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}


@keyframes floatingBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}


#modal-badge-name {
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 8px;
}


.action-btn-glow.destructive {
    color: #ef4444;
}



/* Título de la insignia en el modal */
#option-modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}



/* Iconos dentro de los botones */
.badge-opt-btn i, .badge-opt-btn span.icon {
    font-size: 1.2rem;
    width: 24px;
    display: flex;
    justify-content: center;
}



/* Colores específicos para jerarquía visual */
.badge-opt-btn.primary {
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent);
    border-color: rgba(var(--color-accent-rgb), 0.2);
}



.badge-opt-btn.danger {
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.05);
}



.badge-opt-btn.danger:hover {
    background: rgba(255, 77, 77, 0.1);
    border-color: #ff4d4d;
}


@keyframes badgeBounce {
    from { transform: scale(1) translateY(0); }
    to { transform: scale(1.1) translateY(-10px); }
}



@keyframes rotateGlow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}



.share-count:empty {
    display: none; /* Oculta el espacio si no hay compartidos */
}


.plyr__video-wrapper, 
.plyr__video-embed {
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important; /* Quita el truco de padding de Plyr */
    aspect-ratio: 16 / 9; /* Mantiene el hueco correcto */
}


/* 3. 🚀 LA CLAVE: Forzar al IFRAME de YouTube a expandirse */
.plyr__video-embed iframe {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1.01); /* Evita bordes blancos de 1px */
    object-fit: cover; /* Si es video vertical, intentará llenar mejor */
}





.v-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    text-decoration: none;
}


/* Para videos de YouTube (Iframes) */
.video-slide .plyr__video-embed iframe {
    /* Hacemos el video un 20% más alto para tener margen de maniobra */
    height: 120% !important; 
    width: 100% !important;
    /* Lo centramos y lo subimos un poco para que el título de YT quede arriba del borde */
    transform: translateY(-8%) scale(1.0) !important; 
    pointer-events: none !important;
}


/* Ajuste para evitar que el Iframe de YouTube bloquee el clic al estar pausado */
.plyr__video-embed iframe {
    pointer-events: none !important; /* 🚀 Obligamos a que el clic lo reciba nuestro JS y no YouTube */
}


/* Si quieres que el icono crezca un poco más al tocarlo (feedback visual) */
.video-actions .v-action:active svg {
    transform: scale(1.2);
}



.v-action {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
}



.v-icon-circle.liked {
    color: #ff3b5c;
}





/* 🚀 Asegurar que el Iframe de YouTube cubra el centro sin bordes */
.plyr__video-embed {
    width: 100%;
    /* 16:9 es el estándar de YouTube. Esto reserva el espacio exacto */
    aspect-ratio: 16 / 9; 
    background-color: #000; /* Fondo negro mientras carga */
    border-radius: 12px;
    overflow: hidden;
    
    /* Añadimos un efecto de pulsación sutil para que parezca un 
       "Skeleton Loader" (Carga elegante) en lugar de un error */
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}



.plyr__video-embed, 
.plyr__video-wrapper {
    aspect-ratio: 16 / 9 !important; /* El estándar de YouTube */
    width: 100%;
    height: auto !important;
}


/* Cuando Plyr está listo, quitamos la animación de carga */
.plyr--ready .plyr__video-embed,
.plyr--ready {
    animation: none !important;
}



/* Animación de carga sutil */
@keyframes skeleton-pulse {
    0% { background-color: #050505; }
    50% { background-color: #121212; }
    100% { background-color: #050505; }
}


/* Contenedor de la barra (fondo gris traslúcido) */
.custom-video-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* 🚀 Hitbox más grande para el dedo */
    z-index: 25;
    display: flex;
    align-items: flex-end; /* La línea visual se queda al fondo */
    cursor: pointer;
    pointer-events: auto; /* 🚀 AHORA SÍ RECIBE CLICS */
    touch-action: none; /* Evita que el scroll de la página interfiera al arrastrar */
}


.custom-video-progress:active .progress-bar-bg {
    height: 8px; /* Feedback visual: se engrosa al arrastrar */
}


/* La parte que se llena (color de AnarkWorld) */
.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--color-accent); /* Tu color morado/azul */
    box-shadow: 0 0 10px var(--color-accent); /* Pequeño resplandor */
    transition: width 0.1s linear; /* Movimiento suave */
    position: relative;

}


.progress-bar-fill::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}


.custom-video-progress:active .progress-bar-fill::after {
    transform: translateY(-50%) scale(1);
}




/* Corazón flotante estilo TikTok */
.floating-heart {
    position: absolute;
    width: 100px;
    height: 100px;
    pointer-events: none; /* No interrumpe toques */
    z-index: 1000;
    color: #ff3b5c; /* Rojo TikTok */
    filter: drop-shadow(0 0 15px rgba(255, 59, 92, 0.8));
    animation: heartPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}



@keyframes heartPop {
    0% { transform: scale(0) rotate(-15deg); opacity: 0; }
    25% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    50% { transform: scale(1) rotate(-5deg); opacity: 1; }
    100% { transform: scale(1.5) translateY(-50px) rotate(15deg); opacity: 0; }
}



@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}



.sheet-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
}



#sheet-comment-input {
    background: var(--color-ui);
    border: none;
    border-radius: 20px;
    color: var(--color-text);
    flex-grow: 1;
    font-family: inherit;
    margin-right: 10px;
    outline: none;
    padding: 10px 15px;
    resize: none;
    line-height: 1.4; /* Ajusta según tu fuente para que el texto y emoji se alineen */
    white-space: pre-wrap;
    font-size: 19;
}



#btn-send-sheet-comment {
    width: 46px;
    height: 46px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0; /* Impide que se aplaste */
    margin-left: auto; /* Lo ancla a la derecha */
    z-index: 100; /* Siempre por encima de todo */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* Barra de contexto de respuesta */
.sheet-reply-context {
    background: var(--color-ui); /* Antes #1a1a1a */
    padding: 8px 20px;
    border-top: 1px solid var(--color-border); /* Antes #333 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideUp 0.2s ease;
}



.reply-info {
    font-size: 11px;
    color: var(--color-text-secondary); /* Antes #aaa */
}




.reply-info strong {
    color: var(--color-accent);
}



.cancel-reply {
    background: none;
    border: none;
    color: var(--color-text-secondary); /* Antes #666 */
    font-size: 18px;
    cursor: pointer;
}



/* Contenedor de respuestas anidadas */
.replies-container-nested {
    border-left: 1px solid var(--color-border); /* Antes #222 */
    margin-top: 8px;
    padding-left: 5px;
}



.comment-context-menu {
    position: fixed;
    z-index: 3000;
    background: var(--color-surface); /* Glassmorphism con el color de superficie */
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border); /* Antes 0.1 white */
    border-radius: 16px;
    width: 200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 8px;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}


.comment-context-menu button {
    display: flex !important;
    align-items: center; /* Centrado vertical perfecto */
    gap: 12px;           /* Espacio entre el icono y el texto */
    width: 100%;
    padding: 12px 15px;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
}


.ctx-icon {
    width: 24px; 
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}


.comment-context-menu button:active {
    background: var(--color-ui);
}


.comment-context-menu button.destructive {
    color: #ff4d4d;
}


/* Fondo para cerrar */
.ctx-overlay {
    position: fixed;
    inset: 0;
    z-index: 2999;
    background: transparent;
}


@keyframes slideInFade {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
        background: rgba(var(--color-accent-rgb), 0.1); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
        background: transparent; 
    }
}



.comment-fade-out {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
}



/* Reajuste de los botones de acción para el video feed */
.video-actions .v-action {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--color-text); /* Antes white */
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
}



.video-actions .v-action svg, 
.video-actions .v-action img {
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}



.video-actions .v-action span {
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}


.video-actions .v-action svg, 
.video-actions .v-action img {
    /* Tamaño original era ~22px, subimos a 32px o 35px para que resalten */
    width: 32px !important; 
    height: 32px !important;
    
    /* Añadimos un poco más de sombra para que se vean bien sobre cualquier video */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8));
    transition: transform 0.2s ease;
}



.sheet-input-editable {
    flex-grow: 1;
    background: var(--color-ui);
    border-radius: 12px;
    padding: 10px 15px;
    color: var(--color-text);
    max-height: 100px;
    overflow-y: auto;
    outline: none;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
}



.sheet-input-editable:empty:before {
    content: attr(placeholder);
    color: var(--color-text-secondary); /* Antes #666 */
}



/* Reutilizar el diseño del picker en el sheet */
.comments-sheet .picker-container {
    height: 300px; /* Tamaño fijo del selector */
}



@keyframes wave-pulse {
    0% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.3; transform: scale(0.8); }
}


/* 🚀 FILTRO DEFINITIVO PARA NOTIFICACIONES */
html[data-mode="dark"] .notification-item dotlottie-player.is-monochrome {
    filter: invert(1) hue-rotate(180deg) brightness(2) !important;
}



/* Evitar que se aplique en modo claro */
html[data-mode="light"] .notification-item dotlottie-player.is-monochrome {
    filter: none !important;
}



/* Forzar que el player no tenga tamaño 0 */
dotlottie-player {
    min-width: 16px;
    min-height: 16px;
}



/* 🚀 EFECTO DE RESALTE MEJORADO */
.comment-highlight-flash {
    position: relative;
    z-index: 10;
    border-radius: 12px;
    /* Forzamos que el fondo cambie y se vea un brillo */
    animation: flashHighlight 3.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}



@keyframes flashHighlight {
    0% {
        background-color: var(--color-accent);
        box-shadow: 0 0 30px var(--color-accent);
        transform: scale(1.03);
    }
    15% {
        /* Mantiene el color intenso un momento */
        background-color: var(--color-accent);
        box-shadow: 0 0 30px var(--color-accent);
        transform: scale(1.03);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0px transparent;
        transform: scale(1);
    }
}



/* Asegurar que el contenido del comentario sea legible sobre el resalte */
.comment-highlight-flash .text-gray-200, 
.comment-highlight-flash .text-gray-400 {
    color: #fff !important;
}



#magic-theme-btn {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



#magic-theme-btn:active {
    transform: scale(0.95);
    filter: brightness(1.2);
}




.magic-editor-card {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-accent) !important;
}



/* Contenedor principal en el modal */
#magic-image-container {
    width: 100%;
    height: 350px; /* Altura fija para el área de trabajo */
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Importante para que nada salga del modal */
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}



/* El canvas debe estar contenido, no expandido */
#magic-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Mantiene la proporción sin desbordar */
    display: block;
}



/* Mejora opcional para los botones del modal */
.magic-editor-card .modal-actions {
    display: flex;
    gap: 10px;
}


#random-theme-btn:active span {
    display: inline-block;
    animation: dieRoll 0.3s ease-out;
}



@keyframes dieRoll {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



#last-played-icon {
    background-color: var(--color-ui);
    border-radius: 4px;
    height: 20px;
    object-fit: cover;
    width: 20px; /* Pequeño redondeo para los iconos */ /* Color de fondo mientras carga */
}



.profile-tabs {
    background-color: var(--color-ui);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 10;
}



.tab-btn {
    border-bottom: 3px solid transparent;
    color: #aaa;
    cursor: pointer;
    font-weight: bold;
    padding: 15px 10px;
    transition: color 0.3s, border-color 0.3s;
}



.tab-btn.active {
    border-bottom-color: var(--color-accent);
    color: var(--color-text);
}



#saved-tab {
    display: none;
}



/* --- INICIO DE LA CORRECCIÓN DE PESTAÑAS --- */

/* 1. Contenedor principal: Usamos Grid para superponer los paneles */

.tabs-container {
    display: grid;
    /*overflow: hidden;*/
    position: relative;
    transition: height 0.3s ease-in-out;
}



/* 2. Paneles de contenido: Todos ocupan la misma celda de la grid */

.tab-content {
    display: none;
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
    visibility: hidden;
    /* Por defecto, los paneles están fuera de la vista */ /* Empezamos con display none para el cálculo inicial */
}



/* 3. El panel activo está centrado y visible */

.tab-content.active {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}



/* 4. Clases para controlar las animaciones de entrada y salida */

.slide-in-right { transform: translateX(100%);
}



.slide-in-left  { transform: translateX(-100%);
}



.slide-out-left { transform: translateX(-100%);
}




/* --- FIN DE LA CORRECCIÓN DE PESTAÑAS --- */

#about-content {
  position: relative; /* Para que la animación funcione correctamente */
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding: 20px;
}



#posts-container,
#saved-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px;
}


button#edit-bio-btn {
    display: flex;
}



button#edit-bio-bg-btn {
    display: ruby;
}



#bio-editor.editing .ql-container.ql-snow {
  background: rgba(153, 46, 46, 0.5);
  border: 1px solid #444;
  border-radius: 0 0 5px 5px;
}



.follow-tab-btn.active {
    border-bottom-color: var(--color-accent);
    color: var(--color-accent);
}



.section-title {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
}



/* --- Estilos para el Interruptor (Toggle Switch) --- */

.switch {
    display: inline-block;
    height: 28px;
    position: relative;
    width: 50px;
}



.switch input {
    height: 0; 
    opacity: 0;
    width: 0;
}



.comments-layout .comment-input-bar {
    position: static; /* Ya no necesita ser fijo, la grid lo posiciona */
}



#search-input {
    background: none;
    border: none;
    border-bottom: 2px solid var(--color-text-secondary);
    color: var(--color-text);
    font-size: 1.1rem;
    outline: none;
    padding: 8px 4px;
    transition: border-color 0.3s ease;
    width: 100%;
}



#search-input:focus {
    border-bottom-color: var(--color-accent);
}



#search-input::-webkit-search-cancel-button:hover {
    opacity: 1;
}



.search-placeholder {
    color: var(--color-text-secondary);
    margin-top: 2rem;
    text-align: center;
}



.search-result-item {
    align-items: center;
    border-bottom: 1px solid var(--color-ui);
    display: flex;
    padding: 12px 5px;
    transition: background-color 0.2s ease;
}



.search-result-item:hover {
    background-color: var(--color-surface);
}



#clear-history-btn {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
}



.remove-history-item {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 5px;
}



.search-tab.active {
    background: var(--color-accent);
    color: #fff;
}



/* --- Resultados de hashtags --- */

.hashtag-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 5px;
    border-bottom: 1px solid var(--color-ui);
    cursor: pointer;
    transition: background-color 0.2s ease;
}



.hashtag-result-item:active {
    background-color: var(--color-surface);
}



/* --- Resultados de música --- */

.music-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 5px;
    border-bottom: 1px solid var(--color-ui);
    cursor: pointer;
}



.music-result-item:active {
    background-color: var(--color-surface);
}



.music-result-play-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}



/* --- Botón "Cargar más" genérico para resultados de búsqueda --- */

.search-load-more-btn {
    display: block;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    color: var(--color-accent);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 12px;
    border-radius: 14px;
    margin: 14px 0;
    cursor: pointer;
}




.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
}





/* --- Placeholder genérico de búsqueda --- */

.search-placeholder {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-align: center;
    padding: 30px 15px;
    margin: 0;
}



.remove-history-item {
    flex-shrink: 0;
    background: var(--color-surface);
    border: none;
    color: var(--color-text-secondary);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* --- Resultados de usuarios (búsqueda activa) --- */

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--color-text-primary, #fff);
    transition: background-color 0.2s ease;
}



.search-result-item:active {
    background-color: var(--color-surface);
}


/* --- Espaciado entre posts en resultados de búsqueda --- */

#posts-results-container > div > * + * {
    margin-top: 16px;
}



#hashtag-posts-container > div > * + * {
    margin-top: 16px;
}




/* Conversación no leída */

.chat-list-item.unread {
    background-color: rgba(138, 43, 226, 0.05); /* Un toque del color de acento */
}



/* El nombre en negrita cuando no se ha leído */

.chat-list-item.unread .chat-list-username {
    color: var(--color-accent);
}



/* 🚀 CAMBIAR COLOR DEL CURSOR (CARET) */

/* Específicamente para la barra de chat */
#chat-message-input {
    caret-color: var(--color-accent) !important;
}



/* Opcional: Aplicarlo a todos los campos de texto de la app para consistencia */
input, textarea, [contenteditable="true"] {
    caret-color: var(--color-accent);
}


#chat-message-input {
    /* Asegura que el cursor tenga el mismo alto que el texto y los emojis */
    line-height: 1.4; 
}




/* Contenedor de iconos */
.chat-list-status-icons {
    position: relative;
    display: flex;
    align-items: center;
}



/* Protege el contenedor de iconos para que el texto de la izquierda no lo empuje */
.chat-list-status-icons {
    flex-shrink: 0 !important; 
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* Contenedor principal del modal */
#group-modal .modal-content {
    width: 90% !important;
    max-width: 400px !important;
    height: 80vh !important; /* Altura fija del 80% de la pantalla */
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important; /* Evita que el modal entero rebote */
    background-color: var(--color-surface) !important;
    border-radius: 28px !important;
}



/* Los pasos (Step 1 y 2) deben ocupar todo el alto del modal */
#group-step-1, #group-step-2 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}


#group-step-2 {
    display: none !important;
}


/* 🚀 Aseguramos que el Paso 1 sea el único que se vea al inicio */
#group-step-1 {
    display: flex !important;
}


/* Cabezal (Fijo arriba) */
.modal-header-fix {
    padding: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important; /* Prohíbe que se aplaste */
}



/* 🚀 ÁREA DE SCROLL (La lista de amigos) */
#friends-selection-list {
    flex: 1 !important; /* Toma todo el espacio del medio */
    overflow-y: scroll !important; /* Fuerza el scroll vertical */
    padding: 10px !important;
    display: block !important; /* Evita conflictos de flex internos */
    -webkit-overflow-scrolling: touch; /* Scroll suave en móviles */
}



/* Pie de página (Fijo abajo) */
.modal-footer-fix {
    padding: 15px 20px !important;
    background-color: var(--color-ui) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    flex-shrink: 0 !important; /* Prohíbe que se aplaste */
}



/* Scrollbar estética */
#friends-selection-list::-webkit-scrollbar {
    width: 5px;
}


#friends-selection-list::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 10px;
}



/* Inputs con el estilo de la App */
.modern-input, .modern-textarea {
    width: 100%;
    background-color: var(--color-ui) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 12px 15px !important;
    color: white !important;
    font-size: 14px !important;
    outline: none !important;
    box-sizing: border-box;
}



.modern-input:focus, .modern-textarea:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
}



.input-label-mini {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--color-accent);
    text-transform: uppercase;
    margin-bottom: 6px;
    margin-left: 5px;
    letter-spacing: 1px;
}







/* 🚀 MOSTRAR CUANDO TENGA LA CLASE is-seen */
.chat-list-item.is-seen .chat-list-seen-receipt {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}



/* Si hay mensajes sin leer, ocultamos el visto (el numero es prioridad) */
.chat-list-item.unread .chat-list-seen-receipt {
    display: none !important;
}


/* El punto indicador de mensaje nuevo */

.unread-dot {
    min-width: 20px; /* Un poco más ancho para que quepan números */
    align-items: center;

    
    animation: pulse-dot 2s infinite;
    background-color: var(--color-accent);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--color-accent);
    color: white;
    
    flex-shrink: 0;
    font-size: 0.7rem;
    height: 20px; /* Forma de píldora */
    
    /* Centrar el número */
    display: flex;
    justify-content: center;
    
    /* Texto del número */
    font-weight: bold;
    margin-right: 15px;
    padding: 0 6px;
}



@keyframes pulse-dot {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}



/* Animación de pulso para el mensaje que acaba de llegar */
@keyframes pulse-new {
    0% { background-color: transparent; }
    50% { background-color: rgba(var(--color-accent), 0.2); }
    100% { background-color: transparent; }
}



.chat-list-item.just-arrived {
    animation: pulse-new 2s ease-in-out;
}



.chat-layout .top-bar {
        position: static;

    display: flex;
    align-items: center;
    justify-content: flex-start !important; /* Fuerza la alineación a la izquierda */
    gap: 4px; /* Espacio mínimo entre la flecha y el resto */
    padding-left: 5px;
}



.chat-layout .comment-input-bar { /* Reutilizamos la clase del input de comentarios */
    position: static;
}



/* 2. Header del Chat */

.chat-header-info {
    align-items: center;
    display: flex;
    gap: 12px;
}



.chat-header-avatar {
    border-radius: 50%;
    height: 36px;
    object-fit: cover;
    width: 36px;
}



/* 3. Contenedor de Mensajes */

.chat-messages {
    display: flex;
    flex-direction: column;
    opacity: 0;
    overflow-y: auto;
    padding: 15px;
    transition: opacity 0.5s ease-in-out;
}


.chat-messages {
    position: relative; /* <--- CRÍTICO para offsetTop */
    overflow-anchor: none !important; /* Evita que el navegador intente adivinar el scroll */
    scroll-behavior: auto !important; /* El scroll suave rompe el anclaje matemático */
}



.message-wrapper.sent {
    align-self: flex-end;
}



.message-wrapper.received {
    align-self: flex-start;
}



.message-bubble.is-media .media-relay-container {
    width: 250px !important;
    height: 250px !important;
    border-radius: 11px;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}




/* 4. Burbujas de Mensajes (Estilo General) */

.message-bubble {
    max-width: 80%; /* Damos un poco más de espacio */
    display: flex;
    flex-direction: column; 
    gap: 5px;
    line-height: 1.4;
    padding: 8px 12px;
    transition: border-radius 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
    word-wrap: break-word;
    
    /* ¡CAMBIO CLAVE! La burbuja principal ahora es un contenedor vertical */ /* Espacio entre el snippet de respuesta y el mensaje principal */
}




/* 🚀 Elevamos el mensaje durante la animación */
.is-animating-heart {
    z-index: 100 !important; /* Más alto que las otras burbujas */
    overflow: visible !important; /* Evita que el corazón se corte en los bordes */
}



.heart-pop-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 50px;
    /* 🚀 Z-index altísimo para el corazón */
    z-index: 9999 !important; 
    pointer-events: none;
    animation: heartBurst 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.6));
}



@keyframes heartBurst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.3) translateY(-20px); opacity: 0; }
}


/* Ajuste específico para reacciones sobre IMÁGENES */
.message-bubble.is-media .message-reactions-container {
    position: absolute;
    bottom: 8px; /* Un poco más arriba del borde inferior */
    left: 8px;   /* Un poco separado del borde izquierdo */
    margin: 0;
    z-index: 60; /* Por encima de la imagen y de la hora */
}



/* Sombra extra para que el emoji sea legible sobre fotos claras */
.message-bubble.is-media .reaction-badge {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}



/* Evitar que la hora y la reacción choquen si la foto es pequeña */
.message-bubble.is-media .message-timestamp {
    z-index: 50;
}


/* Asegura que la barra distribuya los elementos de punta a punta */
.chat-layout .top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 🚀 Reparte: Flecha | Nombre | Puntos */
    width: 100%;
    padding: 5px; /* Ajuste sutil de bordes */
}



/* El contenedor del nombre y avatar debe estirarse para empujar lo demás */
.chat-header-info {
    flex-grow: 1; 
    margin-left: 10px; /* Separación de la flecha */
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0; /* Evita que nombres largos rompan el layout */
}



/* Contenedor del botón de la derecha */
.top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0; /* Impide que el botón se aplaste */
}



#btn-chat-options {
    padding: 10px; /* Área de toque cómoda */
    margin-right: 5px; /* Margen final derecho */
}



/* AÑADE esta nueva regla para el contenedor del mensaje y la hora */

.message-main-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 🚀 La clave: permite que la hora baje si no cabe */
    justify-content: flex-end; /* Mantiene la hora a la derecha */
    align-items: flex-end;
    gap: 0 8px; /* Espacio horizontal de 8px entre texto y hora */
}



/* AÑADE esta nueva regla para el texto del mensaje */

.message-bubble p {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    
    /* ¡LA LÍNEA CLAVE! */
    /* Permite que el navegador corte palabras largas para evitar el desbordamiento. */
    word-break: break-word;
    white-space: pre-wrap; 
}


dotlottie-player {
    /* 🚀 LA MAGIA: Aísla el renderizado del elemento */
    contain: strict; 
    will-change: transform;
    /* Evita cálculos de suavizado costosos */
    shape-rendering: optimizeSpeed;
}



/* Imagen de emoji normal */
.inline-custom-emoji, .inline-emoji-input {
    width: 19px !important;
    height: 19px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: contain;
}




.message-bubble[data-hide-time="true"] {
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}



/* Clase para difuminar todo el chat */
.chat-blur-effect {
    filter: blur(5px) grayscale(0.5) !important;
    pointer-events: none !important; /* Bloquea clics en mensajes, header e input */
    user-select: none !important;
}



/* Transición suave para cuando se quite el blur */
.chat-messages, .top-bar, .comment-input-bar {
    transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}




/* 2. Si son emojis nativos (Unicode), subimos el tamaño de fuente del párrafo */
.message-bubble.is-emoji-only p {
    font-size: 35px !important;
    line-height: 1.2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}




/* AÑADE esta nueva regla para el timestamp */

.message-timestamp {
    color: var(--color-text);
    font-size: 0.7rem;
    margin-bottom: -2px;
    opacity: 0.6; /* Lo hacemos más sutil */
    white-space: nowrap; /* Evita que la hora se parta en dos líneas */
    align-self: flex-end; /* Se asegura de que esté abajo */ /* Ajuste fino para la alineación vertical */
}



.message-bubble {
    padding: 8px 12px;
    max-width: 80%;
    position: relative;
    word-wrap: break-word;
    border-radius: 15px; /* Radio por defecto */
    border: none !important;
}



/* Agrupación estándar (sin tema) */
.message-bubble.received { background-color: var(--color-ui); color: var(--color-text); align-self: flex-start; }


.message-bubble.sent { background-color: var(--color-accent); color: #fff; align-self: flex-end; }



/* Radio por defecto para agrupaciones */
.message-bubble.received.start-group { border-bottom-left-radius: 4px; }


.message-bubble.received.middle-group { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }


.message-bubble.received.end-group { border-top-left-radius: 4px; }



.message-bubble.sent.start-group { border-bottom-right-radius: 4px; }


.message-bubble.sent.middle-group { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }


.message-bubble.sent.end-group { border-top-right-radius: 4px; }



/* --- 2. Estilos de Tema (Sobreescritura) --- */
/* Se aplica solo si tiene el atributo, pero mantiene la lógica de agrupación original */
.message-bubble[data-bubble-theme="true"] {
    color: var(--theme-bubble-text) !important;
}


/* Forzamos que el contenido interno (p) también herede el color de texto del tema */
.message-bubble[data-bubble-theme="true"] p, 
.message-bubble[data-bubble-theme="true"] .message-timestamp {
    color: inherit !important;
}






/* Esto asegura que las partículas siempre estén detrás del texto pero dentro de la burbuja */
.message-bubble[data-bubble-theme="true"] .particle {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    /* La animación viene del JSON, el estilo de vida de la partícula aquí: */
    transition: opacity 0.5s ease;
}



/* Forzamos el orden para que el texto sea siempre legible */
.message-bubble[data-bubble-theme="true"] .message-main-content {
    position: relative;
    z-index: 1;
}



@keyframes anarkShimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



/* Animación de parpadeo suave idéntica al header */
@keyframes typingStatusFade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}



/* Opcional: resaltar un poco el nombre del usuario cuando escribe */
.chat-list-item.is-typing-active .chat-list-username {
    color: var(--color-accent);
    transition: color 0.3s ease;
}



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



/* El contenedor de mensajes empieza oculto */

/* Clase para mostrarlo cuando esté listo */

.chat-messages.ready {
    opacity: 1;
}



.scroll-bottom-btn {
    align-items: center;
    background-color: var(--color-accent);
    border: none;
    border-radius: 50%;
    bottom: 80px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    color: white;
    cursor: pointer;
    display: flex;
    height: 45px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 20px;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.3s, 
                transform 0.3s;
    width: 45px;

    z-index: 100 !important; /* Asegurar que esté por encima del panel visualmente */ /* Posición por defecto (con teclado cerrado) */
    
    /* Añadimos 'bottom' a la transición para que suba suavemente */
}



/* --- ESTADO: BOTÓN SUBIDO (Cuando el panel mide 350px) --- */
/* 350px (panel) + 80px (margen original) = 430px */

.picker-open-active .scroll-bottom-btn {
    bottom: 430px;
}



.scroll-bottom-btn.visible {
    opacity: 1;
    transform: scale(1);
}



/* Insignia de mensajes nuevos sobre la flecha */

.scroll-unread-badge {
    align-items: center;
    background-color: #ef4444;
    border: 2px solid var(--color-bg);
    border-radius: 10px;
    color: white;
    display: flex;
    font-size: 10px;
    font-weight: bold;
    height: 18px;
    justify-content: center;
    left: -5px;
    min-width: 18px;
    padding: 0 4px;
    position: absolute;
    top: -5px; /* Rojo alerta */
}



#custom-sticker-grid video::-webkit-media-controls {
    display: none !important;
}



/* Fondo desenfocado para la previsualización */

.sticker-preview-overlay {
    -webkit-backdrop-filter: none;
    align-items: center;
    backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex; height: 100%;
    justify-content: center; left: 0;
 pointer-events: none;
    position: fixed;
    top: 0; width: 100%; /* Oscurecimiento suave */ /* Sin blur al inicio */
    opacity: 0;
    transition: background-color 0.3s ease;
    visibility: hidden;
    z-index: 9000; /* 👈 IMPORTANTE: El mouse "atraviesa" el fondo al inicio */
}



/* Estado 2: Bloqueado (Cuando sale el menú de eliminar) */

.sticker-preview-overlay.locked {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.6); /* Blur solo aquí */
 pointer-events: auto; /* 👈 Aquí sí queremos detectar clics en el botón Eliminar */
}



/* Capa 2: Modal de confirmación (Nivel 10000) */
/* Ponemos un número mucho más alto para asegurar que gane */

#delete-sticker-modal {
    z-index: 10000 !important;
}



/* Mejora: Asegurar que el modal se vea bien sobre el otro fondo */

#delete-sticker-modal .modal-content {
    box-shadow: 0 0 100px rgba(0,0,0,0.8);
}



.sticker-preview-overlay.active {
    opacity: 1;
    visibility: visible;
}



.sticker-preview-overlay.active .preview-content {
    transform: scale(1.1); /* Un pequeño aumento para dar énfasis */
    opacity: 1;
}


/* El contenido cuando el fondo ya tiene el Blur (Estado 2) */

.sticker-preview-overlay.locked .preview-content {
    transform: scale(1.05); /* Crece un poquito para indicar bloqueo */
    box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.4);
}




#create-sticker-btn {
    touch-action: none !important; /* Bloquea el scroll del panel al tocar el botón */
    position: relative;
    transition: transform 0.2s, background-color 0.2s;
}



@keyframes wave-pulse {
    0% { opacity: 0; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.2); }
}




.voice-main-btn {
    width: 46px;
    height: 46px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0; /* Impide que se aplaste */
    margin-left: auto; /* Lo ancla a la derecha */
    z-index: 100; /* Siempre por encima de todo */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


#emoji-btn, #camera-btn, .chat-input-editable {
    visibility: visible;
}



/* Ocultar el input y otros botones mientras se graba para que el overlay se vea limpio */
.recording-active #emoji-btn,
.recording-active #camera-btn,
.recording-active .chat-input-editable {
    visibility: hidden;
    pointer-events: none;
}


.voice-waves-canvas {
    width: 100%;
    height: 100%;
    opacity: 0.5;
}


.recording-timer {
    font-family: 'Monaco', monospace;
    font-weight: 800; color: #ff4b4b;
}



.voice-lock-indicator {
    position: absolute;
    bottom: 60px; /* Posición inicial (oculto) */
    right: 14px;  /* Alineado con el botón de micro */
    background: var(--color-surface);
    width: 35px;
    height: 65px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    
    /* 🚀 ESTADO INICIAL */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 200; /* Asegurar que esté por encima de la barra */
}


/* 🚀 ESTADO VISIBLE */
.voice-lock-indicator.visible {
    opacity: 1;
    visibility: visible;
    bottom: 85px; /* Sube un poco para alejarse del dedo */
}


.voice-lock-indicator.visible { opacity: 1; bottom: 85px; }


.lock-arrow {
    font-weight: 900;
    font-size: 14px;
    animation: arrow-bounce 1s infinite;
}


@keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}


.mic-pulse {
    width: 10px; height: 10px; background: #ff4b4b;
    border-radius: 50%; animation: mic-pulse 1s infinite; margin-right:5px
}



@keyframes mic-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}



.slide-to-cancel {
    font-size: 11px; opacity: 0.6; font-weight: 600;
    animation: slide-left-loop 2s infinite;
}



@keyframes slide-left-loop {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(-10px); opacity: 0.8; }
}



/* Botón de pausa que reemplaza al candado */
.voice-pause-btn {
    position: absolute;
    bottom: 80px; 
    right: 14px;
    background: var(--color-surface);
    width: 42px; /* Un poquito más grande para facilitar el toque */
    height: 42px;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #ef4444;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    
    /* 🚀 LO MÁS IMPORTANTE */
    z-index: 210; /* Por encima de la barra y del candado */
    pointer-events: none; /* Desactivado por defecto */
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}




.voice-pause-btn.visible { opacity: 1; bottom: 85px; pointer-events: auto; }



/* Botón Cancelar texto */
.voice-cancel-btn {
    color: #ef4444; font-weight: 800;
    font-size: 13px; background: none; border: none;
    white-space: nowrap;
}


.voice-actions-right {
    min-width: 60px;
    display: flex;
    justify-content: flex-end;
}


.voice-action-container {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}



.voice-dl-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
}



.voice-dl-btn:hover {
    background: var(--color-accent);
}



/* Ocultar canvas si no hay audio descargado para un look más limpio */
.voice-relay-loader + .voice-wave-wrapper canvas {
    opacity: 0.1;
}



/* El botón circular oscuro detrás de la flecha */
.voice-dl-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4); /* Fondo oscuro para que resalte la flecha */
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
}



.voice-dl-btn:hover {
    background: rgba(0, 0, 0, 0.6);
}



.voice-dl-btn svg {
    width: 14px; /* Tamaño del icono un poco más pequeño para que respire */
    height: 14px;
}


/* Contenedor de la nota de voz */
.voice-note-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 210px; /* Ancho compacto ajustable */
    padding: 6px 4px;
    min-height: 45px;
}



/* Área de la onda */
.voice-wave-wrapper {
    position: relative;
    flex-grow: 1;
    height: 28px;
    display: flex;
    align-items: center;
    cursor: pointer;
}



/* Onda de fondo (Gris) */
.voice-wave-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}



/* Onda de progreso (Color Texto) */
.voice-wave-progress-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Se revela dinámicamente con JS */
    clip-path: inset(0 100% 0 0); 
    transition: none !important;
}



.voice-time {
    font-size: 10px;
    font-family: monospace;
    color: var(--color-text);
    opacity: 0.8;
}


/* Contenedor del Trimmer */
.voice-trimmer-container {
    position: absolute;
    inset: 0;
    z-index: 10;
}


.trimmer-play-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: white; border: none;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}


.trimmer-track-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}


.trimmer-selection-active {
    position: absolute;
    height: 100%;
    background: rgba(138, 43, 226, 0.2); /* Color acento muy suave */
    border-left: 2px solid var(--color-accent);
    border-right: 2px solid var(--color-accent);
    box-sizing: border-box;
}



.trim-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-accent);
    cursor: ew-resize;
    transform: translateX(-50%);
    z-index: 20;
}


.trim-handle::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px; /* 30px de ancho para el dedo */
    right: -15px;
    bottom: -10px;
    background: transparent;
}


.trim-handle::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-accent);
}





.recording-center-area {
    flex: 1;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 10px;
    min-width: 0;
}



#trim-handle-start { left: 0; }


#trim-handle-end { right: 0; }



.voice-speed-btn {
    background: rgba(255, 255, 255, 0.08); /* Fondo muy sutil */
    border: none;
    border-radius: 10px;
    
    /* 🚀 COLOR INICIAL: Secundario */
    color: var(--color-text-secondary); 
    
    font-size: 8px;
    font-weight: 900;
    padding: 1px 5px;
    cursor: pointer;
    min-width: 26px;
    text-align: center;
    transition: color 0.2s ease, background 0.2s ease;
}




/* Estado activo (cuando es > 1x) */
.voice-speed-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.2);
}



/* Ajuste del contenedor de la nota para que quepa el nuevo botón */
.voice-note-card {
    width: 200px; /* Aumentamos ligeramente de 185px a 200px para que no esté apretado */
}



/* --- NUEVO ESTILO PARA NOTAS DE VOZ CON ONDAS --- */
.voice-note-card {
    display: flex;
    align-items: center;
    gap: 8px; /* Reducimos el espacio entre botón y onda */
    width: 185px; /* <--- Ancho más compacto */
    padding: 4px 2px;
    min-height: 42px;
}



.voice-play-btn {
    width: 34px; /* Un poco más pequeño */
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15); /* Fondo sutil para que resalte el icono */
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}




.voice-wave-wrapper {
    position: relative;
    flex-grow: 1;
    height: 25px; /* Altura un poco más baja para compactar */
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 0; /* Evita que el flex se rompa */
}




.voice-wave-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}



/* La capa que "colorea" la onda según el progreso */
.voice-wave-progress-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Empieza totalmente oculta */
    clip-path: inset(0 100% 0 0); 
    transition: none !important; 
}



.voice-time {
    font-size: 9px;
    font-family: monospace;
    opacity: 0.9;
    min-width: 25px;
    margin-left: 2px;
    white-space: nowrap;
}




/* Ajuste para que la hora del mensaje no choque */
.message-bubble.received .voice-time { color: var(--color-text); }


.message-bubble.sent .voice-time { color: white; }



/* Modal de Selección de Colección */

.collection-modal-content {
    max-height: 70vh;
    overflow-y: auto;
    text-align: left;
}





/*============================================*/

/* /shared/css/pages.css */

/* Barra horizontal de colecciones (estilo WhatsApp/Telegram) */

.collection-tabs-bar {
    align-items: center;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    height: 54px;
    overflow-x: auto;
    padding: 5px 12px;
    scrollbar-width: none; /* Ocultar scrollbar en Firefox */
}



.collection-tabs-bar::-webkit-scrollbar { display: none;
}

 /* Ocultar en Chrome/Safari */

/* Item de miniatura de colección */

.collection-tab-item {
    align-items: center;
    background-color: var(--color-ui);
    border: 2px solid transparent;
    border-radius: 10px;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 38px;
    justify-content: center;
    opacity: 0.6;
    overflow: hidden;
    transition: all 0.2s ease;
    transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
    width: 38px; /* Color inactivo */
}



.collection-tab-item.active {
    border-color: var(--color-accent);
    opacity: 1;
    transform: scale(1.1);
}



.collection-tab-item svg {
    /* Esto permite que el SVG use el 'color' definido arriba */
    fill: currentColor;
}



/* Ajuste del grid para que no choque con la barra */

#custom-sticker-content {
    display: flex;
    flex-direction: column;
}











/* 1. Forzamos al panel de stickers a ser un bloque vertical */

#custom-sticker-content.active {
    display: flex !important;
    flex-direction: column;
    height: 100%; /* Ocupa los 280px del picker */
    overflow: hidden; /* El panel en sí no scrollea, scrollea el grid */
}



/* 2. La barra de pestañas se queda fija arriba */

/* 3. El GRID ahora ocupa el resto del espacio y SÍ tiene scroll */

#custom-sticker-grid {
    flex-grow: 1; 
    overflow-y: auto !important; /* El scroll ocurre solo aquí */
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    padding: 15px 12px; /* Añadimos un poco de aire arriba */
}







/* Contenedor que envuelve todos los grids */

#custom-sticker-grid-wrapper {
    -webkit-overflow-scrolling: touch;
    display: block !important;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    overflow-y: auto !important;
    position: relative;
    scroll-behavior: smooth;
}



/* Estilo para cada grid de colección individual */

.collection-grid {
    display: grid; /* Oculto por defecto */
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    padding: 0 12px 20px 12px;
}



/* Solo el grid de la colección activa se muestra */

.collection-grid.active {
    display: grid;
}



#custom-sticker-grid-wrapper .sticker-item {
    width: 80px;  /* Tamaño aproximado en el grid */
    background-color: var(--color-ui);
    border-radius: 8px;
    display: block;
    height: 80px;
    object-fit: cover;
}



.collection-title-display {
    padding: 20px 16px 10px 16px; /* Más espacio arriba */
    background-color: transparent;
    border: none;
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 900; /* Transparente para que no tape al scrolear */
    letter-spacing: 1px;
    position: relative !important;
    text-transform: uppercase; /* Quitamos el borde para un look más fluido */
    
    /* IMPORTANTE: Aseguramos que no se quede pegado */
    background: transparent;
    z-index: 2;
}



/* El wrapper debe permitir que sus hijos se apilen correctamente */

/* Opcional: Un pequeño efecto de degradado sutil */

.collection-title-display::before {
    content: '•';
    margin-right: 8px;
    opacity: 0.6;
}







/* El contenedor principal de la lista */

/* Títulos de sección: NO ANCLADOS */

/* Espaciado entre secciones */

.collection-section {
    /*min-height: 120px; /* Asegura que la sección sea detectable */

    position: relative;
    scroll-margin-top: 20px; /* Ajuste fino para el salto */
}



/* La cuadrícula de cada sección */





/* Contenedor del sticker en el grid */

.sticker-item-wrapper {
    position: relative; /* Clave para que el icono se pegue a la esquina del sticker */
    aspect-ratio: 1 / 1;
    width: 100%;
}



.preview-opt-btn.danger {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}













/* =========================================================
   --- NUEVOS ESTILOS PARA BURBUJAS AGRUPADAS ---
========================================================= */

/* Espaciado entre grupos de mensajes */

.message-bubble.single,
.message-bubble.end-group {
    margin-bottom: 10px; /* Un espaciado claro entre un grupo y el siguiente */
}



/* Espaciado DENTRO de un grupo de mensajes */

.message-bubble.start-group,
.message-bubble.middle-group {
    margin-bottom: 3px; /* Un espaciado mínimo para que parezcan unidas */
}



/* 5a. Burbujas RECIBIDAS agrupadas */

.received.single,
.received.start-group {
    border-top-left-radius: 20px;
}



.received.single,
.received.end-group {
    border-bottom-left-radius: 20px;
}



.received.single,
.received.start-group,
.received.middle-group,
.received.end-group {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}



.received.middle-group,
.received.end-group {
    border-top-left-radius: 4px;
}



.received.start-group,
.received.middle-group {
    border-bottom-left-radius: 4px;
}



/* 6a. Burbujas ENVIADAS agrupadas */

.sent.single,
.sent.start-group {
    border-top-right-radius: 20px;
}



.sent.single,
.sent.end-group {
    border-bottom-right-radius: 20px;
}



.sent.single,
.sent.start-group,
.sent.middle-group,
.sent.end-group {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}



.sent.middle-group,
.sent.end-group {
    border-top-right-radius: 4px;
}



.sent.start-group,
.sent.middle-group {
    border-bottom-right-radius: 4px;
}



/* 7. Input de Mensaje */

#chat-message-input {
    background: var(--color-ui);
    border: none;
    border-radius: 20px;
    color: var(--color-text);
    flex-grow: 1;
    font-family: inherit;
    outline: none;
    padding: 10px 15px;
    resize: none;
    line-height: 1.4; /* Ajusta según tu fuente para que el texto y emoji se alineen */
    white-space: pre-wrap;
    font-size: 19;
}



/* Asegurar que los componentes Lottie sean visibles en el input */
#chat-message-input dotlottie-player {
    display: block !important;

}



/* 🚀 LIGAR EL COMPORTAMIENTO AL SPAN QUE HACE DE EMOJI */

#chat-message-input span[data-filename] {
    /* Esto lo hace comportarse exactamente como una <img> */
    display: inline-block !important;
    vertical-align: middle !important;
    
    /* Evita que el span genere altura de texto extra */
    line-height: 0 !important;
    font-size: 0 !important;
    
    /* Impide que el navegador rompa la línea justo aquí */
    white-space: nowrap !important;
}



/* Asegurar que el reproductor interno no tenga márgenes */
#chat-message-input dotlottie-player {
    display: inline-block !important;
    vertical-align: top !important;
}




/* ========================================
   --- ESTILOS PARA EL SEPARADOR DE FECHA ---
======================================== */

.date-separator {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 15px 0 10px 0; /* Espaciado vertical */
}



.date-separator span {
    background-color: var(--color-ui);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 12px;
}



/* ========================================
   --- ESTILOS PARA EL HEADER DE FECHA ANCLADO ---
======================================== */

.sticky-date-header {
    position: absolute;
    top: 50px; /* Altura de la top-bar */
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    padding-top: 10px;
    right: 0; /* Espacio desde arriba */
    pointer-events: none;
    transform: translateY(-150%);
    z-index: 10; /* Permite hacer clic a través de él */

    /* Animación de entrada/salida */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}



.sticky-date-header.visible {
    opacity: 1;
    transform: translateY(0);
}



.sticky-date-header span {
    /* Reutilizamos el estilo de la píldora de fecha */
    background-color: var(--color-ui);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 12px;
}



/* ========================================
   --- ESTILOS PARA LA FUNCIÓN DE RESPONDER ---
======================================== */

.reply-context {
    background-color: var(--color-ui);
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: row; /* Asegura flujo horizontal */
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 5;
    
    /* Animación */
    max-height: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.3s ease, 
                max-height 0.3s ease-in-out;
    visibility: hidden;
    overflow: hidden; /* 🚀 CRÍTICO: Evita que el contenido empuje la altura */
}




/* 3. Estado activo (visible), que controlaremos desde JS */

.reply-context.visible {
    max-height: 70px; /* 🚀 Altura fija para que no crezca con el contenido */
    opacity: 1;
    padding: 25px 15px;
    transform: translateY(0);
    visibility: visible;
    height: 100%;
}



.reply-preview {
    border-left: 3px solid var(--color-accent);
    padding-left: 10px;
    
    /* 🚀 BLOQUEO DE EMPUJE: */
    flex: 1;          /* Ocupa todo el espacio sobrante */
    min-width: 0;     /* Permite que el contenedor se encoja más allá del texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}



/* 2. Ajuste de emojis para que no rompan la línea */
.reply-snippet .lottie-inline-container,
.reply-snippet .inline-custom-emoji {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 1px;
}


.cancel-reply-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    padding-left: 10px;
    flex-shrink: 0; /* 🚀 Evita que la X se mueva de su lugar */
}



/* Contenedor para el mensaje respondido dentro de una burbuja */

.replied-to-snippet {
    background-color: rgba(0,0,0,0.2);
    border-left: 3px solid var(--color-accent);
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 5px;
    padding: 6px 10px;
    transition: background-color 0.2s ease;
}



.replied-to-snippet .replied-user {
    color: var(--color-accent);
    /*display: block;*/
    font-size: 0.8rem;
    font-weight: bold;
}



.replied-to-snippet .replied-text {
    display: block; /* Asegura que se comporte como un bloque */
    color: var(--color-text);
    opacity: 0.8;

    /* Las 3 propiedades mágicas para el truncado */
    overflow: hidden;
    white-space: nowrap;
}




/* Miniatura en la barra de respuesta (encima del input) */

.reply-media-preview {
    background: var(--color-ui);
    border-radius: 6px;
    flex-shrink: 0;
    height: 36px;
    margin-left: 10px;
    object-fit: cover;
    width: 36px;
}


/* --- ESTILOS PARA EL MODAL DE CONFIRMACIÓN --- */

.modal-overlay {
    -webkit-backdrop-filter: blur(3px);
    align-items: center;
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000; /* Por encima de todo, incluso del menú contextual */
}



/* Título: Bajamos el peso de 700 a 600 */
#delete-comment-modal h4 {
    font-size: 1.1rem;
    /* font-weight: 600; */ /* Letra menos gruesa */
    color: #ffffff;
    margin-bottom: 14px;
    letter-spacing: -0.2px; /* Un poco más compacto */
}



/* Texto descriptivo */
#delete-comment-modal p {
    font-size: 0.9rem;
    font-weight: 400; /* Peso normal/fino */
    color: var(--color-text-secondary); /* Gris sutil */

    line-height: 1.5;
    margin: 10px 0 20px;
}


/* Fila de Botones (Flexbox horizontal) */
#delete-comment-modal .modal-actions {
    display: flex;
    gap: 12px; /* Espacio entre botones */
    justify-content: space-between;
}



#delete-comment-modal .modal-btn:active {
    transform: scale(0.95);
}



@keyframes modalShake {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.05); }
    50% { transform: scale(0.98); }
}



.modal-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    max-width: 400px;
    padding: 20px;
    text-align: left;
    width: 90%; /* Ancho máximo para el modal */
}



.modal-content h4 {
    color: var(--color-text);
    font-size: 1.1rem; margin-bottom: 20px;
    margin-top: 0; text-align: center;
}



.modal-content p {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin: 10px 0 20px;
}



.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: space-around;
}



.modal-btn {
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex: 1;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 10px;
}



.modal-btn.secondary {
    background-color: var(--color-ui);
    color: var(--color-text);
}



.modal-btn.danger {
    background-color: #ef4444; /* Rojo peligro */
    color: white;
}



/* Menú Flotante de Opciones */

.pack-context-menu {
    animation: fadeInScale 0.2s ease-out;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: none;
    overflow: hidden;
    position: absolute;
    right: 16px;
    top: 40px;
    width: 180px;
    z-index: 100; /* Se activa por JS */
}



@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}



.pack-context-btn.danger { color: #ef4444;
}




/* Ajuste de los iconos dentro del menú de opciones de carpeta */

.pack-context-btn .context-menu-icon {
    width: 24px; /* Espacio reservado para el icono */
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
}



/* El icono de borrar siempre es rojo */

.pack-context-btn.danger .context-menu-icon svg {
    fill: #D33F49;
}



/* Alineación general del botón */

/* ========================================
   --- ESTILOS PARA SALTAR A MENSAJE (HIGHLIGHT) ---
======================================== */

/* Hacemos que el snippet de respuesta sea clicable */

.replied-to-snippet:hover {
    background-color: rgba(0,0,0,0.3);
}



/* Animación de remarcado para el mensaje original */
@keyframes highlight-animation {
    0% {
        background-color: var(--color-accent);
        opacity: 0.7;
    }
    100% {
        /* El color de fondo volverá al original definido en las clases .sent o .received */
        background-color: inherit;
        opacity: 1;
    }
}



.message-bubble.highlighted {
    /* Aplicamos la animación */
    animation: highlight-animation 1.5s ease-out;
}




/* ========================================
   --- ESTILOS PARA MENÚ CONTEXTUAL (VERSIÓN FINAL CORREGIDA) ---
======================================== */

.message-bubble.context-hidden {
    visibility: hidden;
}


/* 1. Fondo difuminado (sin cambios) */

.context-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9000; /* Muy alto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}



.context-overlay.visible { opacity: 1; visibility: visible;
}



/* 2. Burbuja de mensaje activa */

.message-bubble.context-active {
    z-index: 9001 !important; /* Mayor que el overlay */
    position: relative; /* Mantiene su lugar en el flujo del chat */
    box-shadow: 0 0 30px 10px var(--color-accent) !important;
    transform: scale(1.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: none; /* Evita que el usuario toque la imagen mientras el menú está abierto */
}


/* En el clon, forzar que la media se vea */
.message-bubble.context-active img,
.message-bubble.context-active video {
    visibility: visible !important;
    opacity: 1 !important;
}


/* Forzar que las imágenes y videos dentro del clon sean visibles */
.message-bubble.context-active .media-relay-container,
.message-bubble.context-active .sticker-render,
.message-bubble.context-active img,
.message-bubble.context-active video {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    display: inline-block !important;

}


/* Ocultar la hora flotante original si se duplica raro, u opcionalmente dejarla */
.message-bubble.context-active .message-timestamp {
    opacity: 1;
}


/* ========================================================== */
/* === ¡NUEVA REGLA PARA EL RESPLANDOR DEL STICKER! === */
/* ========================================================== */
/* Seleccionamos la imagen del sticker (.sticker-render) SOLO CUANDO
   su contenedor (.message-bubble) tenga la clase .context-active */

.message-bubble.context-active .sticker-render {
    /* Aplicamos el mismo resplandor que en la burbuja de texto */
    box-shadow: 0 0 25px 8px var(--message-color, rgba(255,255,255,0.5));
    /* Un pequeño escalado para que coincida con el efecto de la burbuja */ 
    border-radius: 8px;
    transform: scale(1.05); /* Asegura que el resplandor siga los bordes redondeados del sticker */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}


/* ========================================================== */

/* 3. El contenedor del menú */

.context-menu {
    position: fixed;
    z-index: 9002;
    visibility: hidden;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}




.context-menu.visible {
    visibility: visible;
    opacity: 1;
}



/* 4. Las opciones del menú */
/* Opciones del menú (REDISEÑADO) */

.context-menu-options {
    display: flex;
    flex-direction: column; /* Apilamos los botones verticalmente */
    background-color: var(--color-ui);
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    min-width: 200px;
    padding: 6px; /* Ancho mínimo para el menú */
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
    
    transform-origin: top center;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease;
}



.context-menu-options svg{
    fill: var(--color-accent);
}



.context-menu.visible .context-menu-options {
    opacity: 1;
    transform: scale(1) translateY(0);
}




/* 5. Botones individuales del menú */

.context-menu-button {
    align-items: center;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 500;
    gap: 15px;
    padding: 12px 15px;
    text-align: left;
    width: 100%;
}



.context-menu-button:hover {
    background-color: var(--color-surface);
}



/* Separador entre botones */

.context-menu-button:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}



/* Iconos del menú */

.context-menu-icon {
    font-size: 1.2rem;
    width: 24px; /* Alineación vertical */
    text-align: center;
}



/* Estilo para el botón de acción destructiva */

.context-menu-button.destructive {
    color: #ef4444; /* Rojo */
}



.context-menu-button.destructive .context-menu-icon {
    color: #ef4444; /* Aseguramos que el emoji/icono también se tiña si es posible */
}



.message-bubble.pending {
    opacity: 0.7; /* Hacemos la burbuja ligeramente transparente */
    pointer-events: none; /* Desactivamos cualquier interacción (long press, etc.) */
}




/* --- Estilos para la barra de input de chat (MODIFICADOS) --- */

.comment-input-bar .input-row {
    gap: 8px; /* Añade un pequeño espacio entre los botones y el input */
}



.emoji-toggle-btn {
    flex-shrink: 0; /* Evita que el botón se encoja */
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0;
}



.emoji-toggle-btn:hover {
    color: var(--color-accent);
}



/* ========================================================== */
/* === ¡NUEVOS ESTILOS PARA EL SELECTOR DE EMOJIS/STICKERS! === */
/* ========================================================== */

.picker-container {
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-ui);
    display: flex;
    flex-direction: column;

    /* --- ¡LÓGICA DE VISIBILIDAD SIMPLIFICADA! --- */
    /* Por defecto, está completamente colapsado y oculto. */
    display: none;
}



.picker-tabs {
    background-color: var(--color-surface);
    display: flex;
    flex-shrink: 0;
    padding: 0 8px;
}



.picker-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 20px;
    opacity: 0.5;
    padding: 10px;
}



.picker-tab.active {
    border-bottom-color: var(--color-accent);
    opacity: 1;
}







/* Si es el panel de Giphy, usamos flex solo para el buscador */

#giphy-sticker-content.active {
    display: flex;
    flex-direction: column;
}




/* 3. Ajustar el botón de crear sticker */

.create-sticker-button {
    align-items: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-ui);
    border: 2px dashed var(--color-accent);
    border-radius: 12px; 
    bottom: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    color: var(--color-accent);
    
    cursor: pointer;
    display: flex;
    font-size: 32px;
    height: 100%;
    justify-content: center;
    position: relative;
    right: auto;
    width: 100%;
    
    /* Cambiamos a absolute para que se mueva CON el panel */
    transition: all 0.2s ease;
    z-index: 5;
}










/* El contenedor padre debe tener un fondo sólido para que no se transparente el chat */

.picker-content { 
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    flex-grow: 1;
    height: 250px;
    position: relative; /* Fondo sólido del tema */
    overflow: hidden;
}



/* Regla base para cada panel */

.picker-content-panel {
    display: none !important; /* Oculto por defecto */
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-bg);
    height: 100%;
    left: 0;
    overflow-x: hidden; 
    
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: 100%;
    
    /* ¡LA SOLUCIÓN!: Fondo sólido para tapar a los demás */
    z-index: 1;
}



/* El panel activo se muestra y se pone encima de todos */

.picker-content-panel.active {
    display: flex !important; /* Usamos flex para organizar el contenido interior */
    flex-direction: column;
    z-index: 5; /* Asegura que esté por encima de cualquier otro panel */
}







/* Estilos para la librería emoji-picker-element */

#emoji-content emoji-picker {
    --background: var(--color-bg);
    --border-color: var(--color-ui);
    --category-font-color: var(--color-text-secondary);
    --input-background-color: var(--color-surface);
    --input-font-color: var(--color-text);
    height: 100%;
    width: 100%;
}







/* ================================================= */
/* --- NUEVO ESTILO EMOJI PICKER (PICMO) --- */
/* ================================================= */
/* ==========================================================================
   --- PANEL DE EMOJIS (Nativo / Desde Cero) ---
   ========================================================================== */

/* 1. CONTENEDOR PRINCIPAL DEL PANEL */

#emoji-content {
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}



#emoji-search-input {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text);
    font-size: 14px;
    outline: none;
    padding: 10px 15px;
    transition: border-color 0.3s ease;

    width: 100%;
}



#emoji-search-input:focus {
    border-color: var(--color-accent);
}



#emoji-search-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}



/* 3. ÁREA DE SCROLL (Contenedor de Emojis) */

#emoji-grid-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 8px 15px 8px;
    scroll-behavior: smooth;
    /* Mejora scroll en iOS/Android */
    -webkit-overflow-scrolling: touch;
}



/* 5. CUADRÍCULA DE EMOJIS */

.emoji-grid {
    display: grid;
    /* auto-fill ajusta la cantidad de columnas según el ancho del móvil */
    gap: 4px;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    margin-bottom: 10px;
}



/* 6. EL EMOJI INDIVIDUAL */

.emoji-item {
    aspect-ratio: 1; /* Lo mantiene cuadrado */
    -webkit-user-select: none;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    font-size: 26px;
    justify-content: center; /* Tamaño optimizado para lectura */
    transition: background 0.2s ease, transform 0.1s ease;
    user-select: none;
}



/* Efecto al tocar/presionar */

.emoji-item:active {
    background-color: var(--color-ui);
    transform: scale(1.25); /* Se agranda un poco para dar feedback */
}



/* 7. ESTADO VACÍO / CARGA */

.emoji-content .search-placeholder {
    align-items: center;
    color: var(--color-text-secondary);
    display: flex;
    font-size: 14px;
    height: 100px;
    justify-content: center;
    opacity: 0.6;
    text-align: center;
}



/* Personalización del scrollbar (Opcional, para PC) */

#emoji-grid-container::-webkit-scrollbar {
    width: 4px;
}



#emoji-grid-container::-webkit-scrollbar-thumb {
    background: var(--color-ui);
    border-radius: 10px;
}





/* BARRA DE NAVEGACIÓN DE CATEGORÍAS */
/* Contenedor: Forzamos que no haya rellenos raros */

.emoji-categories-navigation {
    display: flex;
    align-items: center;
    padding: 8px 12px !important;
    background: transparent;
    overflow-x: auto;
    gap: 0; /* Quitamos el gap para que flex:1 maneje el espacio */
}



/* Estado Activo: Idéntico en ambas pestañas */

.emoji-category-btn.active {
    background: rgba(255, 255, 255, 0.1) !important; /* Fondo gris oscuro */
    color: #a855f7 !important; /* Morado */
}



/* Efecto hover opcional */

.emoji-category-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.05);
}



.emoji-categories-navigation::-webkit-scrollbar { display: none;
}



.category-icon-btn {
    align-items: center;
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 8px;
    transition: all 0.2s ease;
}



.category-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}



.category-icon-btn:active, .category-icon-btn.active {
    background: var(--color-ui);
    color: var(--color-accent);
}



/* El contenedor del botón */
.category-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



/* Estilo de la "Píldora" activa (el fondo gris que ves en tu foto) */
.category-icon-btn.active {
    background-color: var(--color-ui);
    border-radius: 10px;
}



/* Ajuste para que los títulos de categoría sirvan como anclas */


/* Emojis de imagen */

.emoji-item.custom-emoji {
    padding: 4px;
}



.emoji-item.custom-emoji img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}



/* Botón Añadir (+) dentro de emojis */

.add-custom-emoji-btn {
    background: var(--color-ui);
    border: 1px dashed var(--color-accent);
    color: var(--color-accent);
    opacity: 0.8;
}



.add-custom-emoji-btn:active {
    background: var(--color-accent);
    color: white;
    transform: scale(0.9);
}



.emoji-crop-container {
    aspect-ratio: 1;
    background: #000;
    border-radius: 12px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
}



#emoji-crop-source {
    display: block;
    max-width: 100%;
}



/* Estilo para los mini-emojis en el grid */

.custom-emoji-render {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 5px;
}



.custom-emoji-render img {
    height: 32px;
    object-fit: contain;
    width: 32px;
}





/* --- Lógica de Layout cuando el selector está abierto (ACTUALIZADA) --- */

.chat-layout.picker-open .picker-container {
    transform: translateY(0%); /* Lo deslizamos hacia arriba a su posición visible */
}



.chat-layout.picker-open .chat-messages {
    /* Acortamos el área de mensajes para hacer espacio */
    height: calc(100% - 280px);
}



/* --- Estilos para la pestaña de Stickers --- */
/* --- Estilos para la pestaña de Stickers (ACTUALIZADOS) --- */

#sticker-content {
    display: flex;
    flex-direction: column;
}





/* --- Estilos para la pestaña de Stickers Personalizados --- */

.create-sticker-button:active {
    background-color: var(--color-surface);
    transform: scale(0.95);
}



/* Contenedor de la cuadrícula */

.sticker-grid {
    background-color: var(--color-bg);
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    padding: 12px; /* Aseguramos fondo aquí también */
}



/* --- Estilos para el Modal Editor de Stickers --- */

.sticker-creator-overlay { align-items: center; backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,0.8);
    display: flex; height: 100%; justify-content: center; left: 0;
    position: fixed; top: 0; width: 100%; z-index: 110;
}



.sticker-creator-content {
    background-color: var(--color-surface);
    border-radius: 16px; display: flex; flex-direction: column;
    max-height: 80vh; max-width: 400px; width: 90%;
}



.sticker-creator-header { align-items: center; border-bottom: 1px solid var(--color-ui); display: flex; justify-content: space-between; padding: 15px;
}



.sticker-creator-header h3 { margin: 0;
}



.sticker-creator-header button { background: none; border: none; color: var(--color-text); cursor: pointer; font-size: 24px;
}



.sticker-creator-body { display: flex; flex-direction: column; flex-grow: 1; padding: 10px;
}



.sticker-crop-container { height: 300px; width: 100%;
}



.sticker-creator-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 15px;
}



#ffmpeg-log { color: #888; font-family: monospace; font-size: 0.7rem; max-height: 100px; overflow-y: auto;
}


/* --- Estilos para la cuadrícula de stickers (AÑADIR ESTA REGLA) --- */

.sticker-grid video {
    height: 100%;
    object-fit: cover;
    width: 100%; /* Asegura que el video llene el recuadro */
}



/* --- Estilos para el Trimmer de Vídeo --- */

.trimmer {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 40px;
    margin-top: 10px;
    padding: 0 10px;
    position: relative;
    width: 100%; /* Espacio para las agarraderas */
}



.trimmer-timeline {
    background-color: var(--color-ui);
    height: 4px;
    position: relative;
    width: 100%;
}



.trimmer-selection {
    background-color: var(--color-accent);
    height: 100%;
    left: 0;
    position: absolute;
    width: 50%; /* Valor inicial */
}



.trimmer-handle {
    background-color: var(--color-accent);
    border: 2px solid var(--color-surface);
    border-radius: 4px;
    box-sizing: border-box;
    cursor: ew-resize;
    height: 100%;
    position: absolute;
    width: 20px; /* Cursor de redimensionamiento horizontal */
}



#trimmer-start-handle { left: 0;
}



#trimmer-end-handle { right: 0;
}



.trimmer-playhead {
    position: absolute;
    top: -2px; /* Un poco más alto que las ondas */
    bottom: -2px;
    width: 2px;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    z-index: 15; /* Entre las ondas y las manijas */
    pointer-events: none; /* No estorba al arrastrar manijas */
    border-radius: 2px;
}



.audio-toggle-container {
    align-items: center;
    color: var(--color-text-secondary);
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 15px;
}



#sticker-search-input {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text);
    font-size: 14px;
    outline: none;
    padding: 10px 15px;
    transition: border-color 0.3s ease;

    width: 100%;
}



#sticker-search-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-accent);
}

 /* Chrome/Safari */




/* Estado Seleccionado (Como en tu imagen) */

/* --- GRID DE STICKERS --- */

#giphy-sticker-grid {
    display: grid;
    /* Ajustamos el tamaño para que sea similar a tus otros stickers */
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); 
    gap: 14px; /* Espaciado entre stickers */
    padding: 0 12px 20px 12px;
}


/* --- CADA CELDA DEL STICKER (LA TARJETA) --- */
#giphy-sticker-grid .sticker-item-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Forza a que sea un cuadrado perfecto */
    background-color: var(--color-ui); /* Fondo oscuro como en tu imagen */
    border-radius: 12px; /* Bordes redondeados elegantes */
    /*overflow: hidden;*/
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borde casi invisible */
}


/* ========================================================== */

.sticker-item {
    aspect-ratio: 1 / 1;
    background-color: var(--color-ui);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    width: 100%;
}



.sticker-item:active {
    transform: scale(0.9); /* Efecto de presión */
    opacity: 0.7;
}


/* Contenedor estándar para stickers */

.sticker-container {
    align-items: center;
    background-color: var(--color-ui);
    border-radius: 12px;
    contain: strict;
    display: flex;
    height: 150px;
    justify-content: center;
    width: 150px; /* Color de fondo mientras carga */
    
    /* Evita saltos visuales al cargar */
}



.sticker-render {
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    width: 100%;
    object-fit: contain !important; /* Los stickers no se cortan */

}



/* Cuando el elemento ya tiene SRC (se cargó), lo mostramos suavemente */

.sticker-render[src] {
    opacity: 1;
}


/* Clase para la burbuja cuando es un sticker */

.message-bubble.is-sticker {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative; /* Crucial para anclar la hora */
}


.message-bubble.is-sticker.start-group,
.message-bubble.is-sticker.middle-group {
    margin-bottom: 4px !important; 
}



/* Cuando la burbuja es un sticker, forzamos que el contenido sea vertical */

.message-bubble.is-sticker .message-main-content {
    position: relative;
    display: block; /* Cambiamos de flex a block para evitar colapsos */
    line-height: 0; /* Elimina espacios fantasma debajo de imágenes */
}


/* Estilo para que la hora se vea clara sobre el fondo oscuro */

.message-bubble.is-sticker .message-timestamp {
    position: absolute !important;
    bottom: 5px !important;
    right: 8px !important;
    
    /* Fondo estilo "píldora" traslúcida */
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(4px); /* Efecto cristalizado */
    -webkit-backdrop-filter: blur(4px);
    
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 8px 8px !important;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    z-index: 50; /* Por encima de la imagen y los overlays */
    margin: 0 !important;
    pointer-events: none;
}


/* Asegurar que el contenedor del sticker no limite el dibujo de la hora */


/* 
   Forzamos un margen inferior de 12px a todos los stickers, 
   aunque pertenezcan a un grupo (start, middle o end).
*/

/* 
   Si el sticker es el último de un grupo (end-group) o un mensaje único (single), 
   le damos un poco más de aire respecto al siguiente bloque de mensajes.
*/


/* 
   Pequeño ajuste: Si un sticker sigue a otro sticker, 
   añadimos un margen superior para asegurar la separación.
*/

.message-wrapper + .message-wrapper .message-bubble.is-sticker {
    margin-top: 5px;
}



/* Linea divisoria de no leido */



.unread-divider::before,
.unread-divider::after {
    border-bottom: 1px solid var(--color-accent);
    content: '';
    flex: 1;
    opacity: 0.3; /* Línea suave */
}



.unread-divider span {
    background-color: var(--color-ui);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0 10px;
    padding: 6px 16px;
    text-transform: uppercase;
}




/* Espacio extra al final de la lista para que el último mensaje no quede detrás del input */
#chat-messages-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative; /* <--- CRÍTICO */
    width: 100%;
}



.unread-divider {
    height: 40px; /* Altura fija para que la matemática sea constante */
    margin: 20px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}





.header-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    margin-left: 2px;

    min-width: 0;        /* 🚀 CRÍTICO: Permite que el contenedor se encoja para que el texto se corte */
}



/* El nombre propiamente dicho */
.header-title {
    font-size: 1.1rem;
    font-weight: 700;
    
    /* 🚀 REGLAS DE TRUNCADO */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}


.header-status-text {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-secondary); /* Color neutro siempre */
    opacity: 0.7;
    transition: color 0.3s ease;
}


@keyframes typingFade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


.header-status-text:contains("Escribiendo...") {
    animation: typingFade 1.5s infinite;
    font-weight: 700;
}


.typing-animation {
    animation: typingFade 1.5s infinite;
    color: var(--color-accent) !important;
}




/* Burbuja de escribiendo - Hereda estilos de mensaje normal */
.message-bubble.received.is-typing {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Dimensiones exactas */
    width: 60px !important;  
    height: 30px !important; 
    min-height: unset !important; /* 🚀 CRÍTICO: Quita el alto mínimo de los mensajes normales */
    
    padding: 0 !important;
    margin-left: 5px !important;
    margin-bottom: 15px !important;
    
    background-color: var(--color-ui) !important;
    border-radius: 15px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
    /* Evitar que se deforme si hay flex containers padres */
    flex-shrink: 0 !important;
    line-height: 0 !important;
}



@keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-5px); opacity: 1; }
}



@keyframes typingFadeIn {
    from { opacity: 0; transform: scale(0.8) translateX(-10px); }
    to { opacity: 1; transform: scale(1) translateX(0); }
}



/* Punto de estado en el avatar */
.header-status-dot {
    position: absolute;
    bottom: -2px;
    right: 7px;
    width: 14px; /* Aumentado para el icono */
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-ui);
    background-color: #95a5a6; /* Gris offline */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Corta el icono en círculo */
    transition: all 0.3s ease;
}



.header-status-dot.online { background-color: #2ecc71; }


.header-status-dot.playing { background-color: var(--color-accent); }


.header-status-dot.offline { background-color: #95a5a6; }



/* El icono dentro del punto */
.header-status-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Color del "Visto" (Doble check azul/morado) */
.message-bubble.sent.is-read .status-icon {
    fill: var(--color-accent); /* Color del tema */
}



/* Ajuste para que el check no mueva la hora */
.message-timestamp {
    display: flex;
    align-items: center;
}



/* --- ESTILOS PARA LA CUADRÍCULA DE GIPHY --- */

#giphy-sticker-content {
    display: flex;
    flex-direction: column;
}




/* Stickers de GIPHY: Siempre transparentes */

#giphy-sticker-grid .sticker-item {
    width: 85%; /* Dejamos un pequeño aire interno */
    height: 85%;
    object-fit: contain; /* Evita que el sticker se deforme o se corte */
    background-color: transparent !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); /* Sombra para que resalte */
}



/* --- EFECTO AL TOCAR --- */
#giphy-sticker-grid .sticker-item-wrapper:active {
    transform: scale(0.92);
    background-color: var(--color-surface);
}



/* --- ESTILOS PARA TUS STICKERS PERSONALIZADOS --- */

#custom-sticker-grid .sticker-item {
    background-color: var(--color-ui); /* Mantiene el fondo para los tuyos */
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: transform 0.2s ease;
}



/* Efecto al tocar cualquier sticker */

/* ========================================
   --- COMPONENTE: Panel de Notificaciones ---
   ======================================== */

/* Contenedor del icono de la campana */

#notification-bell-container {
    align-items: center;
    display: flex;
    position: relative;
}



/* Insignia roja de notificación no leída */

.notification-badge {
    background-color: #ef4444;
    border: 1.5px solid var(--color-ui);
    border-radius: 50%;
    display: none;
    height: 8px;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 8px; /* Rojo brillante */ /* Borde del color de la UI para separarlo del icono */ /* Oculto por defecto */
}



/* El panel desplegable principal */

.notification-panel {
    position: absolute;
    top: calc(100% + 10px); /* Justo debajo de la barra superior, con un pequeño margen */
    right: 0;
    width: 320px; /* Ancho fijo */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    visibility: hidden;
    z-index: 50; /* Para que el contenido respete los bordes redondeados */
    
    /* Animación de aparición */
    transform: translateY(-10px) scale(0.95);
}



/* Estilo cuando el panel está visible */

.notification-panel.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}



/* Encabezado dentro del panel */

.notification-header {
    border-bottom: 1px solid var(--color-border);
    padding: 12px 16px;
}



.notification-header h3 {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: bold;
}



/* La lista de notificaciones con scroll */

.notification-list {
    max-height: 70vh; /* Altura máxima para evitar que sea demasiado largo */
    overflow-y: auto;
}



/* Cada elemento individual de la lista */

.notification-item {
    align-items: center;
    border-bottom: 1px solid var(--color-ui);
    display: flex;
    padding: 12px 16px;
    text-decoration: none;
    transition: background-color 0.2s ease; /* Asegurarse de que no esté subrayado */
}



.notification-item:hover {
    background-color: var(--color-ui);
}



.notification-item:last-child {
    border-bottom: none;
}



/* El punto azul para notificaciones no leídas */

.notification-unread-dot {
    background-color: #3b82f6;
    border-radius: 50%;
    flex-shrink: 0;
    height: 8px;
    width: 8px; /* Azul brillante */
    margin-left: auto; /* Lo empuja a la derecha */
}



/* Item de reacción (Emoji o Lottie) */
.reaction-item {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 22px;
}



.reaction-item:active {
    transform: scale(1.4);
}



/* Ajuste para que los emojis personalizados se vean bien en la barrita */
.reaction-item dotlottie-player, .reaction-item img {
    width: 24px !important;
    height: 24px !important;
}


/* Asegurar que el picker no sea transparente y gane a los blurs */
#emoji-sticker-picker {
    background-color: var(--color-bg) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}



/* Evitar que el blur del overlay afecte a elementos con z-index superior */
.context-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.chat-messages {
    /* 🚀 BLOQUEO NUCLEAR: Evita que el navegador salte al fondo al cambiar el alto del contenedor */
    overflow-anchor: none !important; 
}



/* Contenedor de reacciones en la burbuja */
/* 🚀 REACCIONES DENTRO DE LA BURBUJA */
.message-reactions-container {
    position: relative; /* Ya no es absolute */
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;    /* Espacio entre el texto/hora y las reacciones */
    padding-bottom: 2px;
    margin-right: 25px; /* Deja espacio para que la hora no quede apretada */
    width: fit-content;
    pointer-events: auto;
}



.reaction-badge {
    background: rgba(0, 0, 0, 0.2); /* Fondo sutil para que resalte dentro del color de la burbuja */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s ease;
}



.reaction-badge:active {
    transform: scale(0.9);
}



/* Resalte si es mi reacción */
.reaction-badge.is-mine {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}



/* Ajuste de los iconos dentro de la reacción */
.reaction-badge dotlottie-player, 
.reaction-badge img {
    width: 13px !important;
    height: 13px !important;
}



/* ========================================
   --- COMPONENTE: Barra de Progreso para Carga de Stickers ---
   ======================================== */

.progress-container {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    height: 8px;
    margin-top: 15px;
    overflow: hidden;
    position: relative;
    width: 100%;
}



.progress-fill {
    height: 100%;
    width: 0%; /* Empieza en 0 */
    animation: bar-shine 1.5s infinite;
    background: linear-gradient(90deg, var(--color-accent), #a855f7) !important;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 0 8px var(--color-accent);
    transition: width 0.1s linear;
    
    /* Efecto de brillo que recorre la barra */
    background-image: linear-gradient(
        90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.3) 50%, 
        rgba(255,255,255,0) 100%
    );
    background-size: 100px 100%;
    overflow: hidden;
    position: relative;
}



@keyframes bar-shine {
    0% { background-position: -100px 0; }
    100% { background-position: calc(100% + 100px) 0; }
}






.search-wrapper {
    flex: 1;
    padding: 0 10px;
}



#chat-search {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text);
    font-size: 14px;
}



#chat-search::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}




.status-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}



.status-sheet {
    width: 100%;
    max-width: 480px;
    background: var(--color-bg);
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    animation: sheet-slide-up 0.28s ease-out forwards;
}



@keyframes sheet-slide-up {
    to { transform: translateY(0); }
}



.status-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 2px;
    margin: 10px auto 4px;
}



.status-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 12px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid var(--color-text-secondary);
}



.status-sheet-close {
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
    color: #666;
}



.status-sheet-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}




.music-results-list { display: flex; flex-direction: column; }



.music-item-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
}


.music-item-result:last-child { border-bottom: none; }



.music-item-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}


.music-item-play-btn .play-icon {
    line-height: 1;
    /* pequeño offset para que el triángulo ▶ se vea centrado ópticamente */
    transform: translateX(1px);
}


.music-item-result.preview-playing .music-item-play-btn .play-icon {
    transform: none;
}



.btn-secondary-mini {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}



.selected-music-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-accent);
    border-radius: 14px;
    padding: 6px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 🚀 clave: evita que el texto largo desborde el modal */
}



.selected-music-chip img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}



.selected-music-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    min-width: 0;   /* 🚀 clave: permite que el flex child se achique y trunque en vez de desbordar */
    flex: 1;
}



.selected-music-info span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}



.selected-music-info span:first-child {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}



.selected-music-info span:last-child {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}



#status-music-chip-remove {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



.chat-list-avatar {
    border-radius: 50%;
    height: 55px;
    margin-right: 15px;
    object-fit: cover;
    width: 55px;
}



.chat-list-username {
    flex: 1;             /* 🚀 Toma todo el espacio disponible */
    min-width: 0;        /* 🚀 CRÍTICO: Permite que el elemento se encoja */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-text);
    display: block;      /* Asegura el comportamiento de bloque para el truncado */
}



.chat-list-time {
    flex-shrink: 0;      /* 🚀 Impide que la hora se aplaste o desaparezca */
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}


/* Contenedor de la nueva barra de colección */

.new-collection-bar {
    align-items: center;
    background-color: var(--color-ui);
    border: 2px solid var(--color-border);
    border-radius: 16px;
    display: flex;
    margin-top: 15px;
    padding: 4px;
    transition: all 0.3s ease;
}



.new-collection-bar:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.3);
}



/* El input interno */

.new-collection-input-clean {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white !important;
    flex-grow: 1;
    font-size: 0.9rem;
    outline: none !important;
    padding: 10px 15px !important;
}



/* El botón + integrado */

.new-collection-add-btn {
    align-items: center;
    background-color: var(--color-accent);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    transition: transform 0.2s, filter 0.2s;
    width: 40px;
}



.new-collection-add-btn:active {
    filter: brightness(1.2);
    transform: scale(0.9);
}



.new-collection-add-btn svg {
    height: 20px;
    width: 20px;
}



#collection-view-modal {
    z-index: 100; /* Muy alto para estar por encima de todo */
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.5);
    display: none; height: 100%;
    justify-content: center; left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity 0.3s ease; width: 100%;
}



#cv-sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 por fila en el modal */
    gap: 10px;
    padding: 10px 0;
}



/* Overlay ajustado para empujar el contenido abajo */

/* Ventana del Pack convertida en Bottom Sheet */

.sticker-pack-modal {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(15px);
    background: rgba(20, 20, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* ANCLAJE ABAJO Y ANCHO TOTAL */
    animation: slideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    border-bottom: none;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100% !important;
    
    /* Bordes redondeados solo arriba */
    
    padding: 0 !important;

    /* Animación de entrada */
}



@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}


@keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}


/* Ajuste de la rejilla para que sea más cómoda en ancho total */

.sticker-grid-preview {
    display: grid;
    /* Ajustamos para que en pantallas anchas no se vea raro */ 
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
    max-height: 350px;
    overflow-y: auto;
    padding: 20px; /* Que no ocupe más del 60% de la pantalla */
}



/* Estilo para el botón de acción en modo ancho total */

.pack-footer {
    padding: 15px 20px 20px; /* Respeta el área segura de móviles */
    text-align: center;
}



/* Estado cuando está abierto */

#collection-view-modal.active {
    display: flex;
    opacity: 1;
}



/* El contenido (Bottom Sheet) */

/* Animación del contenido cuando el padre está activo */

#collection-view-modal.active .sticker-pack-modal {
    transform: translateY(0);
}



/* Estado de cierre: forzamos el regreso de las animaciones */

#collection-view-modal.closing {
    opacity: 0;
}



#collection-view-modal.closing .sticker-pack-modal {
    transform: translateY(100%);
}



/*===============================================
 MODAL DE MENCIONES
==============================================*/
.mention-selector {
    position: absolute;
    bottom: 60px; /* Sobre la barra de input */
    left: 10px;
    right: 10px;
    
    /* 🚀 EFECTO BLUR / CRISTAL */
    background: rgba(15, 15, 15, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    border-radius: 16px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.5);
}



.mention-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}



.mention-item:active { background: var(--color-ui); }



/* Estilo del texto mencionado dentro del input y chat */
.mention-link {
    color: var(--color-text) !important; /* Fuerza el color morado/azul */
    background: rgba(var(--color-accent-rgb), 0.15);
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 800;
    display: inline-block;
    text-decoration: none;
    vertical-align: baseline;
    
    /* 🚀 Evita que se vea vacío si hay problemas de renderizado */
    min-width: 20px; 
    pointer-events: auto;
}


/* Mención de Rol en el chat e input */
.role-mention-link {
    color: var(--role-color, var(--color-accent));
    background: color-mix(in srgb, var(--role-color, var(--color-accent)), transparent 85%);
    padding: 0 6px;
    border-radius: 6px;
    font-weight: 900;
    display: inline-block;
    border: 1px solid color-mix(in srgb, var(--role-color, var(--color-accent)), transparent 70%);
    text-decoration: none;
}


@keyframes pulse-mention {
    0% { transform: scale(1); box-shadow: 0 0 0px var(--color-accent); }
    50% { transform: scale(1.1); box-shadow: 0 0 10px var(--color-accent); }
    100% { transform: scale(1); box-shadow: 0 0 0px var(--color-accent); }
}



.mention-badge {
    flex-shrink: 0;
    user-select: none;
}


/* 🚀 NUEVO: Contador rojo tipo burbuja en la esquina del botón @ */
.jump-mention-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    background-color: #ef4444; /* Rojo alerta */
    color: white;
    font-size: 10px;
    font-weight: 900;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-bg); /* Borde que combina con el fondo del chat */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 2;
}


/* Animación cuando el número cambia */
.jump-mention-badge.pulse {
    animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



@keyframes badge-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}



@keyframes pulse-mention {
    0% { transform: scale(1); box-shadow: 0 0 0px var(--color-accent); }
    50% { transform: scale(1.1); box-shadow: 0 0 15px var(--color-accent); }
    100% { transform: scale(1); box-shadow: 0 0 0px var(--color-accent); }
}




/* Animación para el estado "Buscando en el historial" (Opcional, pero da buen feedback visual) */
.message-bubble.highlighted {
    animation: highlight-animation 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}







/* Estilo para el selector (Caja principal) */
.modern-select {
    width: 100%;
    background-color: var(--color-ui) !important; /* Fondo oscuro de la UI */
    color: var(--color-text) !important;        /* Texto blanco */
    border: 1px solid var(--glass-border) !important;
    border-radius: 18px !important;
    padding: 12px 16px !important;
    outline: none;
    cursor: pointer;
    appearance: none; /* Quita la flecha por defecto para estilizarla */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
}



/* 🚀 ESTO QUITA EL FONDO BLANCO DE LA LISTA DESPLEGABLE */
.modern-select option {
    background-color: var(--color-surface); /* Fondo del desplegable */
    color: var(--color-text);               /* Texto del desplegable */
    padding: 10px;
}



/* Estilo para el foco */
.modern-select:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}



/* Estado cuando el bot está en pausa (Sleep) */
.bot-card.is-paused {
    filter: grayscale(0.8) brightness(0.8);
    opacity: 0.7;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}



.bot-card.is-paused::after {
    content: 'MODO SUEÑO';
    position: absolute;
    top: 12px;
    right: 70px; /* Al lado del pill */
    font-size: 8px;
    font-weight: 900;
    color: #ef4444;
    letter-spacing: 1px;
}



.status-pill.active {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}



.status-pill.paused {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}



/* 7. Inputs Especiales del Modal */
.modern-textarea {
    width: 100%;
    background: var(--color-ui) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    color: white !important;
    font-size: 13px !important;
    outline: none !important;
    resize: none;
}



.modern-textarea:focus {
    border-color: var(--color-accent) !important;
}



.bot-context-menu button.destructive {
    color: #ff4d4d;
}








/* 🤖 Selector de comandos: Solo definimos posición y visibilidad */
#commands-selector {
    background: rgba(15, 15, 15, 0.85) !important; /* Fondo semi-transparente */
    backdrop-filter: blur(12px) !important;       /* Efecto de desenfoque */
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}



/* Estilo del botón / en la barra de entrada */
#btn-show-commands {
    display: none; /* Controlado por JS */
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.06); /* Fondo tipo cristal */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px; /* Estilo Squircle */
    
    /* Tipografía de código */
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 19px;
    color: var(--color-text-secondary);
    
    /* Centrado perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-right: 4px;
    flex-shrink: 0; /* Evita que se aplaste */
    padding: 0;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}


/* ✨ EFECTO AL PRESIONAR */
#btn-show-commands:active {
    transform: scale(0.85); /* Se encoge un poco */
    background: var(--color-accent); /* Cambia al color del tema */
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px var(--color-accent); /* Brillo de acento */
}



/* Ajuste para que el input no lo empuje demasiado */
.chat-input-editable {
    min-width: 0; /* Permite que el input ceda espacio al botón */
}





/* 🤖 Forzar tamaño exacto en el selector de comandos */
#commands-list .mention-item {
    padding: 10px 15px !important; /* Tamaño exacto de menciones */
    height: 52px !important;       /* Altura fija para consistencia */
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}



#webapp-iframe {
    flex: 1;
    width: 100%;
    background: white; /* La mayoría de webs tienen fondo claro */
}



@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}



/* 🎮 TARJETA DE MINI-APP EN EL CHAT */
.webapp-msg-card {
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 220px;
    max-width: 260px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 5px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}



.webapp-msg-card:active {
    transform: scale(0.96);
    border-color: var(--color-accent);
}





/* 🚀 EL PUNTO DE BRILLO (AJUSTADO PARA ESTAR ADENTRO) */
.game-glow-point {
    position: absolute;
    /* Ajustamos para que quede en la esquina superior derecha pero con margen */
    top: 10px; 
    right: 12px;
    
    width: 8px; /* Un poquito más pequeño para que no estorbe */
    height: 8px;
    background: #2ecc71; /* Verde neón */
    border-radius: 50%;
    
    /* Quitamos el borde para que se integre mejor con el fondo oscuro */
    border: none; 
    
    z-index: 100;
    box-shadow: 0 0 10px #2ecc71;
    animation: pulse-point-inner 1.5s infinite;
}



/* Animación ajustada para el interior */
@keyframes pulse-point-inner {
    0% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 5px #2ecc71;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 15px #2ecc71, 0 0 5px #2ecc71;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 5px #2ecc71;
    }
}



/* Aseguramos que la burbuja no corte el brillo */
.message-bubble.is-game-start {
    overflow: hidden; /* Cambiamos a hidden para que el brillo no se salga por error */
    padding-top: 10px; /* Damos un poco más de aire arriba */
    position: relative;
}





#quick-cover {
    height: 100px;
    background-size: cover;
    background-position: center;
    position: relative;
}



.member-role-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    margin-right: 5px;
    display: inline-block;
}







#quick-profile-modal {
    display: none; 
    position: fixed; 
    inset: 0; /* Asegura que cubra toda la pantalla */
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
    z-index: 10000;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Indica que se puede cerrar */
}



#quick-profile-modal .modal-content {
    cursor: default; /* El cursor vuelve a normal dentro de la tarjeta */
}



/* Botón "Siguiendo" (Estado neutro/gris) */
.btn-follow-inactive {
    background: var(--color-ui);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px;
    z-index: 1000;
}



.btn-follow-active:active, .btn-follow-inactive:active {
    transform: scale(0.95);
}


/* ==========================================================================
   --- PÁGINA: Chat Musical (Burbujas y Panel de Búsqueda) ---
   ========================================================================== */

/* 1. CONTENEDOR DE LA BURBUJA (Mensaje) */

.message-bubble.is-music {
    max-width: 300px !important;
    min-width: 280px;
    padding: 6px !important;
    padding-bottom: 26px !important;
    position: relative; /* Espacio para la hora absoluta */
    width: fit-content !important;
}



/* 2. TARJETA DE MÚSICA (Interna) */

.music-card-v3 {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    margin: 0;
}



.music-container {
    width: 280px !important;      /* Ancho fijo para simetría */
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 18px !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 115px;
    overflow: hidden;
    padding: 14px !important;
    position: relative;
    transition: transform 0.2s ease;
}



.music-container:active { transform: scale(0.98);
}



/* Efecto resplandor sutil */

.music-container::before {
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    content: ''; height: 200%; left: -50%;
    opacity: 0.05;
    pointer-events: none;
    position: absolute;
    top: -50%;
    width: 200%;
}



/* 3. INFO DE CANCIÓN (Thumb, Título, Autor) */

.music-thumb {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    flex-shrink: 0;
    height: 48px;
    object-fit: cover;
    width: 48px;
}



.music-title {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}



.play-btn {
    align-items: center;
    background: var(--color-accent) !important;
    border: none;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 0 10px rgba(255,255,255,0.2);
    color: white !important;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 40px !important;
    justify-content: center;
    width: 40px !important;
}



/* El destello (Animación de brillo) */

.progress-fill::after {
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    content: "";
    height: 100%;
    left: -100%;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%; /* Oculto por defecto */
}



/* Solo cuando el contenedor tiene la clase .is-playing se activa el destello */

.music-container.is-playing .progress-fill::after {
    animation: musicShimmer 2s infinite;
    opacity: 1;
}



@keyframes musicShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}



/* Definición del movimiento del destello */
@keyframes musicShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}



/* 5. POSICIÓN DE LA HORA (Burbuja) */

.message-bubble.is-music .message-timestamp {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    bottom: 6px !important;
    font-size: 10px;
    margin: 0 !important;
    padding: 1px 6px;
    position: absolute !important;
    right: 12px !important;
    z-index: 10;
}



/* 6. PANEL DE BÚSQUEDA (Picker) */

#music-content {
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    height: 100%;
}



.music-search-wrapper {
    background: var(--color-bg);
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}



#music-search-input {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text);
    font-size: 14px;
    outline: none;
    padding: 10px 15px;
    transition: border-color 0.3s ease;
    width: 100%;
}



#music-search-input:focus { border-color: var(--color-accent);
}



.music-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 8px 15px 8px;
}



/* Items de Resultados */

.music-item-result {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    align-items: center;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
    padding: 10px;
    transition: background 0.2s ease;
    user-select: none;
}



.music-item-result:active {
    background: var(--color-ui);
    transform: scale(0.98);
}



/* 7. ESTADOS DE CARGA Y PREVIA */

.search-placeholder-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Ocupar todo el espacio disponible del padre */
    width: 100%;
    height: 100%;
    min-height: 200px; /* Asegura un área mínima para centrar */
    
    color: var(--color-text-secondary);
    text-align: center;
    opacity: 0.6;
    
    /* Importante para que en un contenedor Grid se posicione al centro de todas las celdas */
    grid-column: 1 / -1; 
}



/* Ajuste opcional para el texto dentro */
.search-placeholder-container p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}



.search-placeholder-container svg {
    color: var(--color-accent);
    margin-bottom: 15px;
}



.music-item-result.preview-playing {
    animation: musicPulse 1.5s infinite;
    outline: 2px solid var(--color-accent);
}



@keyframes musicPulse {
    0% { background-color: var(--color-surface); }
    50% { background-color: var(--color-ui); }
    100% { background-color: var(--color-surface); }
}



/* Estado: Respuesta activa (Subir ~60px sobre la posición base) */

.reply-mode-active .scroll-bottom-btn {
    bottom: 140px; /* 80px base + 60px de la barra de respuesta */
}



/* Estado: Sticker Picker Y Respuesta activos al mismo tiempo */

.picker-open-active.reply-mode-active .scroll-bottom-btn {
    bottom: 490px; /* 430px (con picker) + 60px de respuesta */
}





/* Ventana del Pack */

/* Cabecera */

.pack-header {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: space-between;
    padding: 20px;
}



#cv-modal-title {
    color: var(--color-accent);
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
}



.pack-count {
    color: var(--color-text-secondary);
    display: block;
    font-size: 0.8rem;
}



.close-pack-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 20px;
    height: 32px;
    width: 32px;
}



/* Rejilla de Stickers */

.sticker-grid-preview .sticker-item {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    object-fit: cover;
    transition: transform 0.2s;
    width: 100%;
}



.sticker-grid-preview .sticker-item:active {
    transform: scale(0.9);
}



/* Botón de Acción */

.pack-main-btn {
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 800;
    padding: 14px;
    transition: all 0.3s ease;
    width: 100%;
}



.btn-save {
    background: var(--color-accent);
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
    color: white;
}



.btn-delete {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}



#delete-collection-modal {
    z-index: 11000 !important; /* Un nivel más alto que el collection-view-modal */
    background: rgba(0, 0, 0, 0.4); /* Fondo un poco más oscuro para centrar la atención */
    backdrop-filter: blur(3px);
}



/* ========================================
   --- ¡NUEVOS ESTILOS PARA LA PESTAÑA DE JUEGOS EN EL PERFIL! ---
======================================== */

#games-content {
    padding: 20px 15px;
}



/* --- ¡NUEVOS ESTILOS PARA EL BOTÓN "MOSTRAR MÁS"! --- */

.show-more-btn {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    font-weight: bold;
    gap: 4px;
    justify-content: center;
    margin-bottom: 24px;
    padding: 8px;
    width: 100%; /* Espacio antes de la línea divisoria */
}



.show-more-btn .arrow-icon {
    transition: transform 0.3s ease;
}


/* Cuando el contenedor está expandido, giramos la flecha */

.show-more-btn.expanded .arrow-icon {
    transform: rotate(180deg);
}





/* --- Estilos para la sección de Tarjetas de Jugador Renderizadas --- */

#player-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 15px 20px;
}

#player-cards-container {
    display: grid;
    gap: 16px;
    padding: 16px 0;

    /* Cada card mide mínimo 320px y máximo 1fr.
       El grid decide cuántas columnas poner según el ancho. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.player-card {
    background-color: var(--color-ui);
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    color: white;
    min-height: 150px;
    overflow: hidden;
    position: relative;
}



.player-card::before {
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%); bottom: 0;
    content: ''; left: 0;
    position: absolute; right: 0;
    top: 0;
}



/* --- Estilos para el Modal de Edición de Tarjeta --- */

.form-group { margin-bottom: 16px;
}



.form-group label { color: var(--color-text-secondary); display: block; font-size: 0.9rem; margin-bottom: 6px;
}



#cover-image-placeholder { color: var(--color-text-secondary); font-size: 48px;
}



#cover-image-preview-img {
    height: 100%;
    object-fit: cover;
    position: absolute;
    width: 100%;
}



.modal-btn.primary { background-color: var(--color-accent); color: var(--color-text);
}



/* En /shared/css/pages.css */

.player-card.editable {
    cursor: pointer;
    transition: transform 0.2s ease;
}



.player-card.editable:hover {
    transform: scale(1.02); /* Un ligero efecto de zoom al pasar el ratón */
}





/* El contenedor interno de la foto/video */
.media-relay-container {
    /* Usamos un fondo oscuro traslúcido para que el color de la burbuja 
       se vea en los bordes pero el centro sea neutro mientras carga */
    background-color: rgba(0, 0, 0, 0.2); 
    border-radius: 11px; /* Ligeramente menor que la burbuja para encajar */
}



.media-relay-container img, 
.media-relay-container video {
    display: block;
    max-height: 70vh; /* Para que fotos muy largas no ocupen toda la pantalla */
    background: #000;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Llena el cuadrado */
}



/* Animación de pulso mientras espera al otro usuario */
@keyframes loader-spin {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}



#prog-stats-container hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}



/* El texto dentro del círculo */
.curr-size {
    letter-spacing: -0.5px;
}



.speed-badge {
    background: var(--color-accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px !important;
    opacity: 1 !important;
}




/* Si la burbuja de mensaje contiene media, quitamos el padding para que la foto llegue al borde */
.message-bubble.is-media {
    position: relative !important; /* 🚀 Indispensable para anclar la hora */
    padding: 3px !important;
    overflow: visible !important; 
}


/* Colores dinámicos para media */
.message-bubble.is-media.sent {
    background-color: var(--color-accent) !important;
}


.message-bubble.is-media.received {
    background-color: var(--color-ui) !important;
}



/* 🚀 LA HORA FLOTANTE (ESTILO WHATSAPP) */
.message-bubble.is-media .message-timestamp {
    position: absolute !important;
    bottom: 4px !important;
    right: 6px !important;
    
    /* Fondo estilo "píldora" traslúcida */
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(4px); /* Efecto cristalizado */
    -webkit-backdrop-filter: blur(4px);
    
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 2px 8px !important;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    z-index: 50; /* Por encima de la imagen y los overlays */
    margin: 0 !important;
    pointer-events: none;
}


.message-bubble.is-media .message-main-content {
    display: block !important; 
    width: 100%;
}


.media-relay-container {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
}


/* Si el mensaje es una respuesta, bajamos un poco la hora para no chocar */
.message-bubble.is-media .replied-to-snippet {
    margin-bottom: 4px;
}




/* Mensajes RECIBIDOS (Izquierda) */
.received.start-group { border-bottom-left-radius: 4px !important; }


.received.middle-group { border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; }


.received.end-group { border-top-left-radius: 4px !important; }



/* Mensajes ENVIADOS (Derecha) */
.sent.start-group { border-bottom-right-radius: 4px !important; }


.sent.middle-group { border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; }


.sent.end-group { border-top-right-radius: 4px !important; }



/* Margen reducido entre mensajes del mismo grupo para que parezcan unidos */
.message-bubble.start-group, 
.message-bubble.middle-group {
    margin-bottom: 2px !important;
}



.message-bubble.end-group, 
.message-bubble.single {
    margin-bottom: 8px !important; /* Espacio normal al terminar grupo */
}



/* IMPORTANTE: Si es media (foto/video), mantenemos el estilo pero con su radio interno */
.message-bubble.is-media {
    overflow: hidden;
}


.theme-circle.is-custom::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    border: 1px solid white;
}



/* Esto asegura que el menú flote correctamente en la página de temas */
#theme-context-menu {
    position: fixed;
    z-index: 5000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    pointer-events: auto;
}



.add-theme-circle {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-accent);
    cursor: pointer;
    transition: all 0.2s ease;
}



.add-theme-circle:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.1);
}


#chat-preview-container {
    /* 1. Dimensiones del 'celular' simulado */
    width: 180px; 
    height: 320px;
    position: relative;
    
    /* 2. Marco estético */
    background-color: #000;
    border: 6px solid #222;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* 3. Propiedades de la Imagen de Fondo */
    background-repeat: no-repeat;
    background-size: cover;      /* Obligatorio para que el panning funcione */
    background-position: 50% 50%; /* Centro inicial */
    
    /* 4. 🚀 LA CLAVE DE LA FLUIDEZ EN MÓVIL */
    touch-action: none !important; /* Bloquea el scroll de la página para que el dedo mueva la imagen */
    cursor: move;
    user-select: none;             /* Evita que se seleccione texto al arrastrar */
    -webkit-user-drag: none;       /* Evita que el navegador intente 'arrastrar' la imagen como archivo */
    
    /* 5. Otros */
    overflow: hidden;              /* Recorta el exceso de imagen y capas */
    margin: 0 auto;                /* Centrado horizontal en el modal */
    display: flex;
    flex-direction: column;
}



/* 🚀 REFUERZO: Asegúrate de que los elementos dentro NO bloqueen el toque */
#chat-preview-overlay,
#chat-preview-container div {
    pointer-events: none !important; /* Deja que el clic pase a través de las burbujas hacia el fondo */
}






.spinner-mini {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--color-accent-rgb), 0.1);
    border-top: 2px solid var(--color-accent);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 0.8s linear infinite;
}



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



/* Spinner específico para la recarga */
.ptr-element .spinner-mini {
    width: 25px;
    height: 25px;
    border: 3px solid rgba(var(--color-accent-rgb), 0.2);
    border-top-color: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent);
}


/* REGLA BASE - TODOS los círculos tendrán estas propiedades */
/* ========================================
   --- PÁGINA: Temas (themes.html) - CSS FINAL Y DEFINITIVO ---
======================================== */

/* El contenedor exterior (el círculo) */

.theme-circle {
    border: 3px solid transparent;
    border-radius: 50%; 
    box-sizing: border-box;
    cursor: pointer;
    height: 40px;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s, border-color 0.3s;
    width: 40px; /* Mantenemos esto, es buena práctica */
}


.theme-bg-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid white;
    background-size: cover;
    background-position: center;
    background-color: #111;
    z-index: 50 !important; /* Salta al frente de todo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    pointer-events: none; /* Para que el click pase a la esfera */
}



.theme-item-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}


.theme-item-wrapper:active {
    transform: scale(0.9);
}


/* ========================================================= */
/* === INICIO DE LA CORRECCIÓN FINAL === */
/* ========================================================= */

/* REEMPLAZA LA REGLA ANTERIOR POR ESTA */

.theme-color-bands {
    /* Hacemos el div interior más grande que su contenedor */
    height: 130%;
    left: 59%;
    position: absolute;
    width: 130%;

    /* Lo centramos perfectamente dentro del círculo */
    top: 50%;
    transform: translate(-50%, -50%);
}



/* ========================================================= */
/* === FIN DE LA CORRECCIÓN === */
/* ========================================================= */


/* La clase 'active' no cambia */

.theme-circle.active {
    border-color: var(--color-accent);
    transform: scale(1.1);
}



/* El checkmark no cambia */

.theme-circle.active::before {
    color: var(--color-text);
    content: '✔';
    font-size: 18px;
    left: 50%;
    position: absolute;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Asegura que el check esté por encima de las bandas de color */
}



/* Contenedor interno del slide de directo: llena el slide */
.live-slide .vf-live-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
    cursor: pointer;
}



/* Video de fondo: SIEMPRE cover, nunca contain (ni inline ni acá) */
.live-slide .vf-live-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    background: #000;
    z-index: 0;
}



/* Audio oculto pero activo (nunca display:none en móvil) */
.live-slide .vf-live-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}



/* Overlay con gradiente para legibilidad de los controles */
.live-slide .vf-live-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.65) 0%,
            rgba(0,0,0,0.15) 25%,
            rgba(0,0,0,0.15) 60%,
            rgba(0,0,0,0.8) 100%);
}



/* Badge EN VIVO */
.live-slide .vf-live-badge {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 56px);
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #D33F49;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 20px;
    z-index: 2;
}



.live-slide .vf-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: vf-live-pulse 1.2s ease-in-out infinite;
}



@keyframes vf-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}



/* Bloque central: avatar + nombre + timer */
.live-slide .vf-live-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 80%;
    z-index: 2;
}



.live-slide .vf-live-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow:
        0 0 30px rgba(0,0,0,0.6),
        0 0 60px rgba(211, 63, 73, 0.35);
    background: rgba(0,0,0,0.35);
}



.live-slide .vf-live-username {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}



.live-slide .vf-live-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}



.live-slide .vf-live-timer {
    padding: 3px 10px;
    background: rgba(0,0,0,0.55);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}



.live-slide .vf-live-viewers {
    opacity: 0.9;
}



/* Botón "Ver transmisión" */
.live-slide .vf-live-watch-btn {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
    left: 50%;
    transform: translateX(-50%);
    padding: 11px 28px;
    background: #fff;
    color: #000;
    font-size: 14px;
    font-weight: 800;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255,255,255,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    pointer-events: auto;
    z-index: 2;
}



.live-slide .vf-live-watch-btn:active {
    transform: translateX(-50%) scale(0.96);
    box-shadow: 0 2px 10px rgba(255,255,255,0.2);
}


.live-slide .vf-live-video.vf-live-video--cover {
    object-fit: cover !important;
}



.live-slide .vf-live-video.vf-live-video--contain {
    object-fit: contain !important;
}



/* ============================================================
   🚀 LIVE SLIDE — loader con avatar blurreado
   ============================================================ */

/* El <video> arranca invisible hasta que haya frame real. */
.vf-live-video[data-ready="false"] {
    opacity: 0;
}


.vf-live-video {
    opacity: 1;
    transition: opacity 0.25s ease;
    background: transparent;
}



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








/* ============================================================
   🚀 OVERLAY: "El live ha terminado"
   Se muestra sobre el video cuando el streamer corta.
   Reutilizable en home (postCard), video_feed y live_watch.
   ============================================================ */
.live-ended-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    pointer-events: none;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}


@keyframes liveEndedIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}



/* Variante: overlay en vivo_watch — permite que el botón de "Volver" sea clicable */
.live-ended-overlay.with-action {
    pointer-events: auto;
}








/* ============================================================
   MOCK: placeholder visual para directos simulados
   ============================================================ */
.vf-mock-video-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: rgba(255,255,255,0.85);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}



.anark-tab.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb, 138 43 226) / 0.45);
}


.anark-btn.is-loading .btn-spinner { display: block; }



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


@keyframes anark-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}




/* ── TOAST ───────────────────────────────────────────────── */

#anark-toast {
    position: fixed;
    bottom: 84px;      /* encima del nav bar si lo tienes */
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--color-surface);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 999;
    white-space: nowrap;
}


#anark-toast.show        { opacity: 1; transform: translateX(-50%) translateY(0); }


.progress-bar-fill { height: 100%; background: var(--color-accent); transition: width 0.5s ease; }


.hidden-dot { display: none; }



/* El icono acrílico necesita un pequeño margen en el menú */
.menu-button-coins {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    padding: 6px 12px;
    border-radius: 12px;
}



/* 🚀 ICONO ACRÍLICO GLOBAL */
.acrylic-icon {
    width: 14px; 
    height: 14px; 
    display: inline-block; 
    vertical-align: middle;
    background: linear-gradient(135deg, #FF00FF, #00FFFF, #FFD700, #8A2BE2, #00FF00);
    background-size: 300% 300%;
    animation: flow 6s ease infinite;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0ZM10 1C10 3.38695 9.05179 5.67613 7.36396 7.36396C5.67613 9.05179 3.38695 10 1 10C3.38695 10 5.67613 10.9482 7.36396 12.636C9.05179 14.3239 10 16.6131 10 19C10 16.6131 10.9482 14.3239 12.636 12.636C14.3239 10.9482 16.6131 10 19 10C16.6131 10 14.3239 9.05179 12.636 7.36396C10.9482 5.67613 10 3.38695 10 1Z"/></svg>');
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0ZM10 1C10 3.38695 9.05179 5.67613 7.36396 7.36396C5.67613 9.05179 3.38695 10 1 10C3.38695 10 5.67613 10.9482 7.36396 12.636C9.05179 14.3239 10 16.6131 10 19C10 16.6131 10.9482 14.3239 12.636 12.636C14.3239 10.9482 16.6131 10 19 10C16.6131 10 14.3239 9.05179 12.636 7.36396C10.9482 5.67613 10 3.38695 10 1Z"/></svg>');
}



 @keyframes flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }


/* ========================================
   --- DEFINICIONES DE TEMAS ---
======================================== */

/* Tema Púrpura (Default) */

[data-theme="purple"] {
    --color-accent: #8A2BE2;
    --color-bg: #000000;
    --color-surface: #111111;
    --color-ui: #222222; /* BlueViolet */
    --color-text: #FFFFFF;
}



/* Tema Verde */

[data-theme="green"] {
    --color-accent: #26DE9D;
    --color-bg: #011C13;
    --color-surface: #0A2E22;
    --color-text: #FFFFFF;
    --color-ui: #133F31;
}



/* Tema Rosa/Marrón */

[data-theme="rose"] {
    --color-accent: #F48A9C;
    --color-bg: #2B191D;
    --color-surface: #40262C;
    --color-text: #FFFFFF;
    --color-ui: #57333B;
}



/* Tema Azul (Ejemplo adicional) */

[data-theme="blue"] {
    --color-bg: #291F37; /* Slate 900 */
    --color-surface: #3C3552; /* Slate 800 */
    --color-ui: #5D5279; /* Slate 700 */
    --color-accent: #9384A9; /* Sky 400 */
    --color-text: #DABFEE; /* Slate 50 */
}



/* ========================================
   --- LÓGICA DE MODO CLARO/OSCURO (NUEVA VERSIÓN) ---
======================================== */

/* --- TEMA PÚRPURA CLARO --- */

html[data-theme="purple"][data-mode="light"] {
    --color-bg: #f3e9ff;       /* Fondo: Lavanda muy claro */
    --color-surface: #ffffff;  /* Superficie: Blanco puro */
    --color-ui: #e9d5ff;       /* UI: Lavanda claro */
    --color-accent: #8A2BE2;   /* Acento: Se mantiene el púrpura fuerte */
    --color-text: #3b0764;     /* Texto: Púrpura muy oscuro */
    --color-text-secondary: #3b0764a6;
}



/* --- TEMA VERDE CLARO --- */

html[data-theme="green"][data-mode="light"] {
    --color-bg: #e6fff6;       /* Fondo: Menta muy claro */
    --color-surface: #ffffff;  /* Superficie: Blanco */
    --color-ui: #c1fae4;       /* UI: Menta claro */
    --color-accent: #26DE9D;   /* Acento: Se mantiene el verde fuerte */
    --color-text: #011C13;     /* Texto: Verde muy oscuro (el bg original) */
    --color-text-secondary: #011c13a6;
}



/* --- TEMA ROSA CLARO --- */

html[data-theme="rose"][data-mode="light"] {
    --color-bg: #fff0f3;       /* Fondo: Rosa muy claro */
    --color-surface: #ffffff;  /* Superficie: Blanco */
    --color-ui: #ffe0e6;       /* UI: Rosa claro */
    --color-accent: #F48A9C;   /* Acento: Se mantiene el rosa fuerte */
    --color-text: #57333B;     /* Texto: Marrón oscuro (el ui original) */
    --color-text-secondary: #57333ba6;
}



/* --- TEMA AZUL CLARO --- */
/* (Usando la lógica que mencionaste: invertir bg y text, y adaptar el resto) */

html[data-theme="blue"][data-mode="light"] {
    --color-bg: #F0EBF5;       /* Fondo: Un lavanda muy pálido, casi blanco */
    --color-surface: #ffffff;  /* Superficie: Blanco puro */
    --color-ui: #E3D9ED;       /* UI: Un lavanda un poco más oscuro */
    --color-accent: #5D5279;   /* Acento: Usamos el color UI oscuro como acento */
    --color-text: #291F37;     /* Texto: El color de fondo oscuro original */
    --color-text-secondary: #291f37b3;
}



/* 🚀 SOLO INVIERTE SI SE DETECTA QUE ES MONOCROMÁTICO */
html[data-mode="dark"] dotlottie-player.is-monochrome,
html[data-mode="dark"] [data-mode-adaptive="true"].is-monochrome dotlottie-player {
    filter: invert(1) hue-rotate(180deg) brightness(1.2) !important;
}



/* Evitar que se vea blanquecino en modo claro */
html[data-mode="light"] dotlottie-player.is-monochrome {
    filter: none !important;
}


/* Solo invierte si el script detectó que no tiene colores */
html[data-mode="dark"] dotlottie-player.is-monochrome {
    filter: invert(1) hue-rotate(180deg) brightness(1.4) !important;
}


/* ============================================================
   RESCUED (originally marked dead, but referenced in JS/HTML)
   ============================================================ */

/* ============================================================
   REGLAS RESCATADAS
   Clases SÍ referenciadas en JS/HTML del proyecto.
   Integrar a components.css (o al archivo de página correcto).
   ============================================================ */

/* matched by: "css" */
/* ============================================================
   REGLAS SIN USO DETECTADO — REVISAR A MANO
   
   El parser puede fallar con:
     - Selectores construidos por template strings
     - Clases dinámicas en frameworks (ej. is-*, has-*)
     - Selectores generados desde el backend
   
   Revisar una por una antes de borrar.
   ============================================================ */

/* =========================================================
   ARCHIVO: /shared/css/pages.css
   Estilos específicos para páginas individuales.
========================================================= */

/* ========================================
   --- PÁGINA: Login y Registro ---
   ======================================== */

.login-register-body {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
}

/* matched by: "html" */




/* 🚀 Específico para la página de Login (index.html) */
.login-register-body #globe-visual {
  border-radius: 50%;
  height: 150px;
  width: 150px;
  margin-bottom: 3rem; /* mb-12 */
}

/* matched by: "match-stats-row" */




/* Fila de Stats (Género, Edad, Reloj) */
.match-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

/* matched by: "match-bio-box" */



/* Caja de biografía estética */
.match-bio-box {
    position: relative;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden; /* Corta las imágenes que se salgan */
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 60px;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
}

/* matched by: "match-bio-overlay" */



/* Capa de legibilidad (oscurece el fondo para leer el texto) */
.match-bio-overlay {
    background: rgba(0, 0, 0, 0.4);
    padding: 12px;
    width: 100%;
    height: 100%;
}

/* matched by: "match-bio-text" */




.match-bio-text {
    font-size: 13px;
    color: white;
    line-height: 1.5;
    max-height: 150px; /* Altura máxima para no tapar todo el chat */
    overflow-y: auto;
}

/* matched by: "match-bio-text" */



/* 🚀 SOPORTE PARA CONTENIDO DE QUILL */
.match-bio-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
}

/* matched by: "match-bio-text" */



/* Quitar márgenes extra que trae Quill de la DB */
.match-bio-text p { margin-bottom: 8px; }

/* matched by: "match-bio-text" */



.match-bio-text strong { font-weight: bold; }

/* matched by: "match-like-btn" */




/* Botón de Like estilo App */
.match-like-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: var(--color-accent);
    color: white;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 1px;
    transition: transform 0.2s;
}

/* matched by: "match-like-btn" */



.match-like-btn:active {
    transform: scale(0.96);
}

/* matched by: "match-like-btn" */



.match-like-btn:disabled {
    background: #444;
    box-shadow: none;
}

/* matched by: "match-user-badges" */





/* Contenedor de las etiquetas */
.match-user-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* matched by: "match-badge" */




/* Estilo base de la píldora */
.match-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08); /* Fondo sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
}

/* matched by: "match-badge" */



/* Colores específicos según género */
.match-badge.male { border-color: #3b82f6; color: #60a5fa; }

/* matched by: "match-badge" */


 /* Azul */
.match-badge.female { border-color: #ec4899; color: #f472b6; }

/* matched by: "match-badge" */


 /* Rosa */
.match-badge.other { border-color: var(--color-accent); color: var(--color-accent); }

/* matched by: "match-badge" */




.match-badge svg {
    width: 14px;
    height: 14px;
}

/* matched by: "profile-social-link-icon" */




.profile-social-link-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

/* matched by: "profile-social-link-icon" */



.profile-social-link-icon:active { transform: scale(0.92); }

/* matched by: "profile-social-link-icon" */



.profile-social-link-icon.custom {
    background: none;
    overflow: visible;
}

/* matched by: "profile-social-link-icon" */




.profile-social-link-icon.custom img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 6px;
}

/* matched by: "profile-community-item" */




.profile-community-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 68px;
    text-decoration: none;
    color: inherit;
}

/* matched by: "profile-community-avatar" */



.profile-community-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}

/* matched by: "profile-community-name" */




.profile-community-name {
    font-size: 11px;
    text-align: center;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* matched by: "profile-community-members" */




.profile-community-members {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
}

/* matched by: "comment-thread" */




.comment-thread {
  border-bottom: 1px solid var(--color-ui);
  padding: 12px 15px;
}

/* matched by: "comment-item" */




.comment-item {
  display: flex;
  gap: 10px;
}

/* matched by: "comment-avatar" */




.comment-avatar {
  background-color: #555;
  border-radius: 50%;
  flex-shrink: 0;
  height: 30px;
  object-fit: cover;
  width: 30px;
}

/* matched by: "replies-container" */




.replies-container {
  border-left: 2px solid var( --color-ui);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-left: 25px;
}

/* matched by: "post-hashtag" */



.post-hashtag {
    color: var(--color-accent);
    font-weight: 700;
    cursor: pointer;
}

/* matched by: "post-hashtag" */



.post-hashtag:active {
    opacity: 0.7;
}

/* matched by: "select-image-btn" */




.select-image-btn {
  padding: 0.75rem; /* p-3 = 3 × 0.25rem */
  background-color: var(--color-accent); /* bg-gray-800 */
  border-radius: 9999px; /* rounded-full */
  transition: background-color 0.2s ease; /* transition */
}

/* matched by: "select-image-btn" */




.select-image-btn:hover {
  background-color: var(--color-surface); /* hover:bg-gray-700 */
}

/* matched by: "badge-img" */



/* Estilo de la insignia individual */
.badge-img {
    width: 24px;   /* Tamaño un poco más grande que el texto del nivel */
    height: 24px;
    object-fit: contain;
    /* Un ligero resplandor para que resalten sobre fondos oscuros */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}

/* matched by: "badge-img" */




.badge-img:hover {
    transform: scale(1.2);
}

/* matched by: "share-btn" */



.share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

/* matched by: "post-body-link" */



.post-body-link, .post-media-link {
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Quita el recuadro azul al tocar en móvil */
}

/* matched by: "post-body-link" */




.post-body-link:active {
    opacity: 0.8; /* Efecto visual sutil al presionar el texto */
}

/* matched by: "video-post-wrapper" */




/* Contenedor del video en el feed */
.video-post-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

/* matched by: "video-post-wrapper" */



.video-post-wrapper {
 
    background-color: #000; /* Fondo negro mientras carga */
    border-radius: 8px;
    overflow: hidden;
    min-height: 180px; /* Evita que el post se vea como una línea delgada al inicio */
}

/* matched by: "video-post-wrapper" */




.video-post-wrapper .plyr {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

/* matched by: "video-post-wrapper" */




/* 5. Ajuste del contenedor principal en el Home */
.video-post-wrapper {
    position: relative;
    background: #000;
    overflow: hidden;
    width: 100%;
}

/* matched by: "video-click-overlay" */



/* 🚀 LA CLAVE: Una capa invisible que captura el toque antes que YouTube */
.video-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px); /* Dejamos un margen abajo por si acaso */
    z-index: 10; /* Se pone por encima del video */
    background: transparent;
    cursor: pointer;
}

/* matched by: "post-media-link" */




/* Efecto visual al tocar para que el usuario sepa que hizo clic */
.post-media-link:active {
    filter: brightness(0.9);
    transition: filter 0.1s;
}

/* matched by: "video-slide" */




.video-slide {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;
    background: #000;
}

/* matched by: "video-overlay" */





/* UI Overlay */
.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    padding-bottom: 80px; /* Espacio para barra de navegación si hubiera */
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
}

/* matched by: "author-thumb" */




.author-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
}

/* matched by: "video-slide" */



/* Cada "Slide" de video */
.video-slide {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* matched by: "video-container" */




/* 🚀 CORRECCIÓN DEL REPRODUCTOR (PLYR + YOUTUBE) */
.video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    overflow: hidden;
}

/* matched by: "video-slide" */




/* Forzar a Plyr a ocupar toda la pantalla */
.video-slide .plyr {
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
}

/* matched by: "video-slide" */




.video-slide .plyr__video-wrapper {
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* matched by: "video-slide" */



/* 3. Máscara de seguridad (Capa negra superior) */
/* Esto tapa cualquier destello del encabezado de YouTube durante la carga */
.video-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px; /* Suficiente para tapar el info-bar de YouTube */
    background: linear-gradient(to bottom, #000 60%, transparent);
    z-index: 5; /* Por encima del video, debajo de la flecha de volver */
    pointer-events: none;
}

/* matched by: "video-slide" */



/* 4. Tapar el logo de YouTube abajo a la derecha (opcional) */
.video-slide::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 50px;
    background: linear-gradient(to top right, #000 40%, transparent);
    z-index: 5;
    pointer-events: none;
}

/* matched by: "video-overlay" */



/* UI Overlay (Información y botones) */
.video-overlay {
    position: absolute;
    inset: 0;
    padding: 20px;
    padding-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 40%, transparent 100%);
    pointer-events: none; /* Deja pasar los clics al video */
    z-index: 100 !important;
}

/* matched by: "video-info" */




.video-info, .video-actions {
    pointer-events: auto; /* Activa clics solo en los elementos de UI */
}

/* matched by: "video-info" */




.video-info {
    max-width: 70%;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* matched by: "video-caption" */




.video-caption {
    font-size: 14px;
    margin: 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* matched by: "video-actions" */




/* Botones laterales */
.video-actions {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 80px;
    margin-right: 5px
}

/* matched by: "video-overlay" */



/* Permitir que el clic pase a través del overlay informativo pero no de los botones */
.video-overlay {
    pointer-events: none;
}

/* matched by: "video-info" */




.video-info, .video-actions {
    pointer-events: auto;
}

/* matched by: "progress-bar-bg" */



/* La línea visual real */
.progress-bar-bg {
    width: 100%;
    height: 4px; /* Línea fina */
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    transition: height 0.2s; /* Se agranda al tocar */
}

/* matched by: "video-slide" */



/* 💡 Asegúrate de que las máscaras que pusimos antes sigan ahí 
   pero tengan un z-index menor */
.video-slide::after, .video-slide::before {
    z-index: 5 !important;
}

/* matched by: "video-slide" */




/* Para un look ultra limpio, oculta la barra nativa de Plyr en este feed */
.video-slide .plyr__controls {
    display: none !important;
}

/* matched by: "video-slide" */




/* Evitar selección de texto al dar muchos clics */
.video-slide {
    /* 🚀 Permite scroll vertical, bloquea el zoom de doble toque del sistema */
    touch-action: pan-y !important; 
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* matched by: "comment-time" */



.comment-time {
    font-size: 10px; /* Tamaño reducido */
    color: var(--color-text-secondary);
    opacity: 0.5; /* Más sutil */
    margin-left: 8px;
    font-weight: 400; /* Peso normal para contrastar con el username que es black */
}

/* matched by: "btn-reply-small" */




.btn-reply-small {
    background: none;
    border: none;
    color: var(--color-text-secondary); /* Antes #666 */
    font-size: 11px;
    font-weight: bold;
    padding: 5px 0;
    margin-top: 4px;
    cursor: pointer;
}

/* matched by: "btn-show-replies" */



/* Botón de expandir respuestas estilo TikTok */
.btn-show-replies {
    background: none;
    border: none;
    color: var(--color-text-secondary); /* Antes #888 */
    font-size: 12px;
    font-weight: 700;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* matched by: "btn-show-replies" */




.btn-show-replies::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 1px;
    background: var(--color-border); /* Antes #333 */
}

/* matched by: "btn-show-replies" */



/* Ajuste para el botón de respuestas en niveles profundos */
.comment-unit .btn-show-replies {
    font-size: 11px;
    opacity: 0.8;
}

/* matched by: "comment-content-box" */



.comment-content-box {
    padding: 4px;
    border-radius: 8px;
    transition: background 0.2s;
}

/* matched by: "comment-content-box" */




/* Efecto de selección al mantener presionado */
.comment-content-box:active {
    background: var(--color-ui); /* Antes 0.05 white */
}

/* matched by: "new-comment-animate" */



.new-comment-animate {
    animation: slideInFade 0.6s ease-out forwards;
}

/* matched by: "comment-media-render" */




/* Stickers dentro de los comentarios */
.comment-media-render {
    max-width: 120px; /* Tamaño máximo para que no tape todo */
    max-height: 120px;
    border-radius: 8px;
    margin-top: 8px;
    display: block;
    background: transparent;
}

/* matched by: "comment-media-wrapper" */



/* Contenedor del sticker en el comentario */
.comment-media-wrapper {
    position: relative;
    display: inline-block;
    width: 125px; /* Tamaño del sticker en comentarios */
    height: 125px;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
}

/* matched by: "sticker-video-comment" */




.sticker-video-comment {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* matched by: "notification-content" */




/* Estilo para las miniaturas de fotos en las notificaciones */
.notification-content p img[style*="width:17px"] {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    vertical-align: middle;
    margin-right: 4px;
    object-fit: cover;
}

/* matched by: "notification-content" */




/* Forzar que el texto no oculte el emoji si es muy largo */
.notification-content p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    line-height: 1.4;
}

/* matched by: "slide-out-right" */




.slide-out-right{ transform: translateX(100%);
}

/* matched by: "js" */



/* Corrección para el bug del tooltip fantasma de Quill.js */

.ql-tooltip {
    display: none !important;
}

/* matched by: "js" */



/* -- Editor Quill.js -- */
/* --- Editor Quill.js (¡AQUÍ ESTÁN LOS CAMBIOS!) --- */

#bio-editor {
  background-color: transparent;
  color: white;
  min-height: 100px;
  
  /* --- ¡AÑADE ESTAS DOS LÍNEAS! --- */
  max-height: 50vh; /* Altura máxima: 50% de la altura de la pantalla visible */
  overflow-y: auto; /* Muestra una barra de scroll vertical solo si es necesario */
}

/* matched by: "follow-list-item" */




.follow-list-item {
    align-items: center;
    border-bottom: 1px solid var(--color-ui);
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
}

/* matched by: "follow-list-user-info" */




.follow-list-user-info {
    align-items: center;
    display: flex;
    gap: 12px;
}

/* matched by: "follow-list-avatar" */




.follow-list-avatar {
    border-radius: 50%;
    height: 50px;
    object-fit: cover;
    width: 50px;
}

/* matched by: "follow-list-username" */




.follow-list-username {
    font-weight: bold;
}

/* matched by: "search-result-avatar" */




.search-result-avatar {
    border-radius: 50%;
    height: 45px;
    margin-right: 15px;
    object-fit: cover;
    width: 45px;
}

/* matched by: "search-result-info" */




/* NUEVA REGLA: Contenedor para alinear el nombre y la etiqueta */

.search-result-info {
    align-items: baseline;
    display: flex; /* Alinea la base del texto para un look limpio */
}

/* matched by: "search-result-username" */




.search-result-username {
    font-size: 1rem;
    font-weight: bold;
    margin-right: 0.5rem; /* Espacio entre el nombre y la etiqueta */
}

/* matched by: "you-label" */




/* NUEVA REGLA: Estilo para la etiqueta "(Tú)" */

.you-label {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 500; /* Usa un color más sutil */
}

/* matched by: "history-header" */




.history-header {
    align-items: center;
    color: var(--color-text-secondary);
    display: flex;
    font-size: 0.9rem;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* matched by: "history-item" */




.history-item {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

/* matched by: "history-term" */




.history-term {
    cursor: pointer;
    flex-grow: 1;
    font-weight: 500;
}

/* matched by: "hashtag-result-icon" */




.hashtag-result-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* matched by: "hashtag-result-info" */




.hashtag-result-info {
    min-width: 0;
}

/* matched by: "hashtag-result-tag" */




.hashtag-result-tag {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

/* matched by: "hashtag-result-count" */




.hashtag-result-count {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 2px 0 0;
}

/* matched by: "music-result-thumb" */




.music-result-thumb {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

/* matched by: "music-result-info" */




.music-result-info {
    flex-grow: 1;
    min-width: 0;
}

/* matched by: "music-result-title" */




.music-result-title {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* matched by: "music-result-author" */




.music-result-author {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* matched by: "explore-grid-item" */




.explore-grid-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-ui);
    display: block;
}

/* matched by: "explore-grid-item" */




.explore-grid-item img,
.explore-grid-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* matched by: "explore-grid-item" */




.explore-grid-item .explore-video-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
    color: #fff;
    pointer-events: none;
}

/* matched by: "history-header" */




.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 8px;
}

/* matched by: "history-header" */




.history-header span {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

/* matched by: "history-header" */




.history-header button {
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

/* matched by: "history-item" */




.history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--color-text-primary, #fff);
    transition: background-color 0.2s ease;
}

/* matched by: "history-item" */




.history-item:active {
    background-color: var(--color-surface);
}

/* matched by: "history-avatar" */




.history-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

/* matched by: "history-term" */




.history-term {
    flex-grow: 1;
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* matched by: "search-result-avatar" */




.search-result-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

/* matched by: "chat-list-snippet" */


 






/* Opcional: Color especial para iconos en el snippet */

.chat-list-snippet {
    align-items: center;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* matched by: "chat-list-snippet" */



.chat-list-snippet {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Esto pone los ... */
}

/* matched by: "chat-list-snippet" */





/* Si quieres que los emojis de los snippets resalten */

.chat-list-snippet:contains('✨'), .chat-list-snippet:contains('📷') {
    color: var(--color-accent);
}

/* matched by: "chat-list-seen-receipt" */




/* Imagen de visto */
.chat-list-seen-receipt {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-bg);
    display: none !important; /* Oculto por defecto */
    flex-shrink: 0;
}

/* matched by: "chat-list-seen-receipt" */




/* 🚀 Fuerza el tamaño de los vistos en la lista para que nunca sean óvalos */
.chat-list-seen-receipt, 
.seen-stack-list img {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    flex: 0 0 14px !important; /* No crece, no se encoge, mide 14px */
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

/* matched by: "reaction-user-item" */



/* Item de usuario en la lista de reacciones */
.reaction-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    transition: background 0.2s;
}

/* matched by: "reaction-user-item" */




.reaction-user-item:active {
    background: rgba(255, 255, 255, 0.05);
}

/* matched by: "reaction-user-avatar" */




.reaction-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-ui);
}

/* matched by: "reaction-user-name" */




.reaction-user-name {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 700;
    color: white;
}

/* matched by: "reaction-user-emoji" */




.reaction-user-emoji {
    font-size: 18px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* matched by: "reaction-user-emoji" */




.reaction-user-emoji dotlottie-player, .reaction-user-emoji img {
    width: 20px !important;
    height: 20px !important;
}

/* matched by: "reaction-user-info" */




/* Contenedor de nombre y hora */
.reaction-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* matched by: "reaction-user-name" */




.reaction-user-name {
    font-size: 14px;
    font-weight: 700;
    color: white;
    
    /* 🚀 REGLAS DE TRUNCADO */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px; /* Evita que el nombre empuje al emoji fuera del modal */
}

/* matched by: "reaction-user-time" */




.reaction-user-time {
    font-size: 10px;
    color: var(--color-text-secondary);
    opacity: 0.6;
    font-weight: 500;
}

/* matched by: "reaction-user-item" */




/* Ajuste del item para que los elementos se alineen bien verticalmente */
.reaction-user-item {
    padding: 12px 10px; /* Un poco más de aire */
    border-bottom: 1px solid rgba(255,255,255,0.02); /* Separador casi invisible */
}

/* matched by: "role-viewer-row" */




/* Contenedor de la fila (Barra horizontal) */
.role-viewer-row {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 14px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* matched by: "role-icon-mini-container" */




/* Contenedor del icono/emoji dentro de la fila */
.role-icon-mini-container {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

/* matched by: "role-icon-mini-container" */




.role-icon-mini-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* matched by: "role-icon-mini-container" */




/* Ajuste específico para Lotties en este modal */
.role-icon-mini-container dotlottie-player {
    width: 20px !important;
    height: 20px !important;
}

/* matched by: "btn-remove-role-small" */




.btn-remove-role-small {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

/* matched by: "btn-remove-role-small" */




.btn-remove-role-small:active {
    transform: scale(0.9);
    background: #ef4444;
    color: white;
}

/* matched by: "anark-skeleton-block" */




.anark-skeleton-block,
.anark-skeleton-line {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 37%, #1a1a1a 63%);
    background-size: 400% 100%;
    animation: anarkShimmer 1.4s ease infinite;
    border-radius: 8px;
}

/* matched by: "anark-skeleton-block" */




.anark-skeleton-block {
    width: 100%;
    height: 100%;
    min-height: 120px;
}

/* matched by: "particle" */




.particle {
    position: absolute;
    /* Esto es la clave: al terminar la animación, el corazón debe desaparecer */
    animation-fill-mode: forwards !important; 
    pointer-events: none;
}

/* matched by: "seen-avatar-receipt" */





.seen-avatar-receipt {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--color-bg);
    position: absolute;
    bottom: -6px;
    right: -4px; /* Lo posiciona en la esquina inferior derecha */
    object-fit: cover;
    background: var(--color-ui);
    
    /* Animación */
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20;
}

/* matched by: "typing-status-list" */



/* Texto "Escribiendo..." en la lista de chats */
/* Estilo "Escribiendo" para la lista de chats */
.typing-status-list {
    color: var(--color-accent);
    font-size: 0.9rem;
    font-weight: 600;
    /* Eliminamos el italic para que se vea más moderno como el header */
    font-style: normal; 
    animation: typingStatusFade 1.5s infinite ease-in-out;
}

/* matched by: "modal-collection-thumb" */





/* Miniatura dentro de los botones del modal */

.modal-collection-thumb {
    background-color: var(--color-bg);
    border-radius: 8px;
    flex-shrink: 0;
    height: 34px;
    object-fit: cover;
    width: 34px;
}

/* matched by: "modal-collection-placeholder" */




/* Placeholder si la carpeta está vacía */

.modal-collection-placeholder {
    align-items: center;
    background-color: var(--color-ui);
    border-radius: 8px;
    color: var(--color-accent);
    display: flex;
    flex-shrink: 0;
    height: 34px;
    justify-content: center;
    width: 34px; /* Los iconos SVG heredarán este color */
}

/* matched by: "modal-collection-placeholder" */




.modal-collection-placeholder svg {
    width: 20px;
    height: 20px;
    fill: var(--color-accent); /* Color morado para los iconos de sistema */
}

/* matched by: "collection-item-btn" */




/* Ajuste del botón para alinear la miniatura con el texto */

.collection-item-btn {
    align-items: center;
    display: flex;
    gap: 12px; /* Espacio entre imagen y nombre */
    background: var(--color-ui);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text);
    font-weight: bold;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 12px;
    text-align: left;
    width: 100%;
}

/* matched by: "preview-content" */




/* El contenedor de la miniatura en el centro */

.preview-content {
    width: 150px;           /* Mismo tamaño que el sticker del chat */
    height: 150px;          /* Mismo tamaño que el sticker del chat */
    background-color: var(--color-ui);
    border-radius: 12px;    /* Mismo redondeo que el sticker del chat */
    overflow: hidden;       /* ¡CRÍTICO! Para que el video no se salga de las esquinas */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
    opacity: 0;
 pointer-events: none;
    
    transform: scale(0.9);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease;
}

/* matched by: "preview-render" */




/* Asegurar que el contenido llene el cuadro de 150px */

.preview-render {
    background-color: #000;
    height: 100%;
    object-fit: contain;
    width: 100%; /* Muestra el sticker completo */ /* Fondo negro si el sticker no es cuadrado */
}

/* matched by: "chat-list-snippet" */




.chat-list-snippet svg {
  display: inline-block;
  vertical-align: middle;
}

/* matched by: "voice-relay-loader" */



/* Contenedor principal de la acción de voz */
.voice-relay-loader {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* matched by: "voice-progress-svg" */




/* El SVG que contiene el círculo de progreso */
.voice-progress-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 1;
}

/* matched by: "voice-progress-svg" */




.voice-progress-svg .bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2.5;
}

/* matched by: "voice-progress-svg" */




.voice-progress-svg .prog {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 94.2; /* Circunferencia (2 * PI * 15) */
    stroke-dashoffset: 94.2;
    transition: stroke-dashoffset 0.3s ease;
}

/* matched by: "voice-info-group" */




.voice-info-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 32px;
}

/* matched by: "voice-info-group" */




/* Contenedor para alinear tiempo y velocidad */
.voice-info-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-left: 4px;
}

/* matched by: "collection-item-btn" */




.collection-item-btn:active {
    background: var(--color-accent);
}

/* matched by: "tab-thumb-render" */




.tab-thumb-render {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* matched by: "preview-options-menu" */






/* Contenedor del menú debajo del sticker */

.preview-options-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    pointer-events: none;
    transform: translateY(10px);
    width: 200px;
    /* Estado inicial oculto */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    visibility: hidden;
}

/* matched by: "preview-opt-btn" */




.preview-opt-btn {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    color: white;
    display: flex;
    font-size: 0.9rem;
    font-weight: bold;
    gap: 10px;
    justify-content: center;
    padding: 12px;
}

/* matched by: "preview-opt-btn" */




.preview-opt-btn:active {
    background: var(--color-ui);
    transform: scale(0.95);
}

/* matched by: "reply-context-bar" */




/* 3. Asegurar que el botón de cerrar (X) no se desvanezca */
.reply-context-bar {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
}

/* matched by: "inline-custom-emoji" */



/* 🚀 3. AJUSTE DE EMOJIS PERSONALIZADOS */
/* Los hacemos un poquito más grandes (24px) para que destaquen junto al texto de 19px */
.inline-custom-emoji, 
#chat-message-input span[data-filename] {
    height: 19px !important;
    width: 19px !important;
    /* vertical-align: sub ayuda a que el emoji no se vea "flotando" muy arriba del texto */
    vertical-align: sub !important; 
}

/* matched by: "replied-text" */




.replied-text {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
    
    /* 🚀 LA MAGIA: Desvanece el contenido (texto y emojis) */
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

/* matched by: "replied-text-with-media" */




/* Miniatura dentro de la burbuja (mensaje citado) */

.replied-text-with-media {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* matched by: "replied-text" */



.replied-text:empty {
    display: none;
}

/* matched by: "replied-media-thumb" */



.replied-media-thumb {
    width: 32px; /* Aumentado de 24px para mejor visibilidad */
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
}

/* matched by: "collection-header-row" */





/* Contenedor del título para alinear iconos */

.collection-header-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 10px 16px 5px 0;
    position: relative;
}

/* matched by: "pack-options-trigger" */




/* Icono de opciones (tres puntos o X) */

.pack-options-trigger {
    align-items: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    padding: 8px;
    transition: background 0.2s;
}

/* matched by: "pack-options-trigger" */




.pack-options-trigger:active { background: var(--color-ui);
}

/* matched by: "pack-context-btn" */




.pack-context-btn {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 12px;
    padding: 10px 14px;
    text-align: left;
    width: 100%;
}

/* matched by: "pack-context-btn" */




.pack-context-btn:active { background: var(--color-ui);
}

/* matched by: "pack-context-btn" */




.pack-context-btn svg {
    /* El color lo hereda del botón (blanco o gris) */
    fill: currentColor;
}

/* matched by: "emoji-category-title" */




/* 4. TÍTULOS DE CATEGORÍAS */

.emoji-category-title {
    color: var(--color-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    margin: 18px 0 8px 8px;
    opacity: 0.7;
    scroll-margin-top: 10px;
    text-transform: uppercase;
}

/* matched by: "tab-emoji-thumb" */




/* Estilo para la miniatura de emoji en la barra superior */
.tab-emoji-thumb {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
    object-fit: contain;
    border-radius: 4px;
    display: block; /* Evita que colapse */
    background-color: rgba(255,255,255,0.05); /* Fondo sutil para emojis transparentes */
}

/* matched by: "tab-letter-icon" */




/* Estilo para cuando no hay imagen y se usa una letra */
.tab-letter-icon {
    font-size: 11px;
    font-weight: 900;
    color: var(--color-text);
    opacity: 0.8;
}

/* matched by: "js" */




/* Ocultar UI por defecto de Cropper.js si quieres un look más limpio */

#sticker-source-video { max-height: 300px; width: 100%;
}

/* matched by: "typing-dot" */




.typing-dot {
    width: 6px !important;
    height: 6px !important;
    margin: 0 2px !important; /* Espacio horizontal entre puntos */
    background-color: var(--color-text-secondary) !important;
    border-radius: 50% !important;
    opacity: 0.4;
    animation: typingBounce 1.4s infinite ease-in-out;
}

/* matched by: "typing-dot" */




/* Efecto de onda de WhatsApp */
.typing-dot:nth-child(2) { animation-delay: 0.2s; }

/* matched by: "typing-dot" */



.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* matched by: "status-icon" */




/* Iconos de check */
.status-icon {
    width: 14px;
    height: 14px;
    fill: #95a5a6; /* Gris por defecto (Enviado) */
    transition: fill 0.3s ease;
}

/* matched by: "notification-avatar" */




.notification-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    height: 40px;
    margin-right: 12px;
    width: 40px; /* Evita que la imagen se encoja */
}

/* matched by: "notification-content" */




.notification-content {
    color: var(--color-text-secondary);
    flex-grow: 1;
    font-size: 0.9rem;
}

/* matched by: "notification-content" */




.notification-content strong {
    color: var(--color-text);
    font-weight: bold;
}

/* matched by: "notification-time" */




.notification-time {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    margin-top: 2px;
    opacity: 0.7;
}

/* matched by: "notification-list-status" */




/* Mensajes de estado (cargando, vacío, error) */

.notification-list-status {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    padding: 24px;
    text-align: center;
}

/* matched by: "notification-list-status" */




.notification-list-status.error {
    color: #ef4444; /* Rojo */
}

/* matched by: "reaction-count" */




.reaction-count {
    color: white;
    opacity: 0.9;
}

/* matched by: "music-item-thumb" */




.music-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

/* matched by: "music-item-info" */




.music-item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

/* matched by: "music-item-title" */



.music-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* matched by: "music-item-author" */



.music-item-author {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* matched by: "music-section-title" */




.music-section-title {
    font-size: 10px;
    color: var(--color-accent);
    text-transform: uppercase;
    font-weight: bold;
    margin: 10px 0 10px 4px;
    opacity: 0.7;
}

/* matched by: "chat-list-item" */




.chat-list-item {
    align-items: center;
    color: inherit;
    display: flex;
    padding: 12px 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* matched by: "chat-list-item" */




.chat-list-item:hover {
    background-color: var(--color-surface);
}

/* matched by: "chat-list-content" */




.chat-list-content {
    flex-grow: 1;
    overflow: hidden; /* Para que el truncado funcione */
}

/* matched by: "chat-list-content" */



.chat-list-content {
    flex: 1;
    min-width: 0; /* 🚀 CRÍTICO: Permite que el contenedor se encoja */
    display: flex;
    flex-direction: column;
}

/* matched by: "chat-list-snippet-container" */



.chat-list-snippet-container {
    flex: 1;
    min-width: 0;
}

/* matched by: "chat-list-header" */



.chat-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px; /* Espacio entre nombre y hora */
}

/* matched by: "snippet-custom-emoji" */




.snippet-custom-emoji {
    display: inline-block;
    flex-shrink: 0; /* Evita que el emoji se aplaste */
}

/* matched by: "mention-avatar" */




.mention-avatar, .mention-avatar-all {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
}

/* matched by: "mention-avatar-all" */




.mention-avatar-all {
    background: var(--color-accent);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
}

/* matched by: "mention-name" */




.mention-name { font-size: 14px; font-weight: bold; display: block; }

/* matched by: "mention-tag" */



.mention-tag { font-size: 11px; opacity: 0.5; }

/* matched by: "mention-role-icon" */




/* Iconos de rol en el selector */
.mention-role-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
}

/* matched by: "bot-card" */




/* 2. Tarjeta del Bot */
.bot-card {
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 18px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* matched by: "bot-token-box" */




/* 4. Caja de Token (Estilo Código) */
.bot-token-box {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

/* matched by: "bot-token-input" */




.bot-token-input {
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    flex-grow: 1;
    outline: none;
    letter-spacing: 0.5px;
    cursor: default;
}

/* matched by: "status-pill" */




/* 5. Pills de Estado */
.status-pill {
    font-size: 9px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* matched by: "bot-context-menu" */




/* 8. Menú Contextual (Ajuste para Bot Factory) */
.bot-context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--color-surface);
    backdrop-filter: blur(15px);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* matched by: "bot-context-menu" */




.bot-context-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 15px;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    border-radius: 10px;
}

/* matched by: "bot-context-menu" */




.bot-context-menu button:active {
    background: var(--color-ui);
}

/* matched by: "bot-avatar-container" */



/* Contenedor del Avatar en la lista */
.bot-avatar-container {
    width: 50px;
    height: 50px;
    flex-shrink: 0; /* Bloquea el tamaño para que no se deforme */
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

/* matched by: "bot-avatar-img" */




.bot-avatar-img {
    width: 100%;
    height: 100%;
    display: block;
}

/* matched by: "bot-info-text" */




/* Ajuste del nombre para que no empuje al avatar */
.bot-info-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
}

/* matched by: "bot-card" */



/* Compatibilidad con Modo Claro */
html[data-mode="light"] .bot-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* matched by: "bot-token-box" */




html[data-mode="light"] .bot-token-box {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.05);
}

/* matched by: "btn-add-circle" */




/* Botones circulares de "+" */
.btn-add-circle {
    width: 20px; height: 20px;
    background: #fff; color: #000;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    font-size: 14px; font-weight: bold;
    cursor: pointer; transition: transform 0.2s;
    flex-shrink: 0;
}

/* matched by: "btn-add-circle" */



.btn-add-circle:active { transform: scale(0.8); }

/* matched by: "node-inputs" */



/* --- 🎯 CONTENEDOR DE INPUTS CENTRADOS --- */
.node-inputs {
    display: flex;
    flex-direction: column; /* Apilar uno sobre otro */
    align-items: center;    /* Centrar horizontalmente */
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

/* matched by: "input-wrapper-removable" */




.input-wrapper-removable {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    padding: 0 10px;
}

/* matched by: "node-input-small" */




.node-input-small {
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 8px 15px;
    color: #fff;
    font-size: 12px;
    width: 160px; /* Ancho fijo para simetría */
    text-align: center; /* Texto al centro */
    outline: none;
}

/* matched by: "node-input-small" */




.node-input-small:focus {
    border-color: var(--color-accent);
}

/* matched by: "btn-remove-keyword" */




/* El botón X a la derecha del input */
.btn-remove-keyword {
    position: absolute;
    right: 15px; 
    color: rgba(255,255,255,0.3);
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.2s;
}

/* matched by: "btn-remove-keyword" */



.btn-remove-keyword:hover { color: #ef4444; }

/* matched by: "btn-add-keyword-centered" */




/* Botón + centrado al final de la lista */
.btn-add-keyword-centered {
    background: rgba(255,255,255,0.05);
    color: #fff;
    width: 160px;
    height: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

/* matched by: "btn-add-keyword-centered" */



.btn-add-keyword-centered:active { transform: scale(0.95); }

/* matched by: "mention-info" */




/* 🚀 FIX: Asegurar que el contenedor interno de texto no tenga márgenes extra */
.mention-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* matched by: "mention-avatar" */




#commands-list .mention-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo para que el círculo siempre exista */
    box-sizing: border-box !important;
    
    /* 🚀 POR DEFECTO: Sin padding para que la FOTO REAL llene el círculo */
    padding: 0 !important; 
}

/* matched by: "mention-avatar" */



/* 🎯 EXCEPCIÓN: Si el src empieza por "data:image/svg", es un icono por defecto.
   Le añadimos padding para que el robot no toque los bordes. */
#commands-list .mention-avatar[src^="data:image/svg"] {
    padding: 6px !important;
}

/* matched by: "mention-info" */





#commands-list .mention-info {
    flex: 1;           /* Ocupa el espacio restante */
    min-width: 0;      /* Permite que el contenedor se encoja para activar el truncado */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* matched by: "mention-name" */




/* Evitar que el nombre del comando crezca */
#commands-list .mention-name {
    display: block !important;
    white-space: nowrap !important;   /* Evita saltos de línea */
    overflow: hidden !important;      /* Esconde lo que sobra */
    text-overflow: ellipsis !important; /* Pone los "..." */
    max-width: 100% !important;
    font-size: 14px;
    font-weight: bold;
    color: white;
}

/* matched by: "mention-tag" */




#commands-list .mention-tag {
    font-size: 11px;
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* matched by: "webapp-card-content" */




.webapp-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* matched by: "webapp-card-icon" */




.webapp-card-icon {
    width: 40px;
    height: 40px;
    background: var(--color-ui);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* matched by: "webapp-card-info" */




.webapp-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* matched by: "webapp-card-title" */




.webapp-card-title {
    font-size: 14px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* matched by: "webapp-card-tag" */




.webapp-card-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent);
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* matched by: "webapp-card-btn" */




.webapp-card-btn {
    width: 100%;
    padding: 10px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
}

/* matched by: "webapp-card-icon" */




/* Si quieres que el cuadro de icono tenga un borde neón si hay icono propio */
.webapp-card-icon:has(.webapp-custom-icon) {
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    background: #000;
}

/* matched by: "btn-follow-active" */




/* Botón "Seguir" (Acción principal) */
.btn-follow-active {
    background: var(--color-accent);
    color: var(--color-text);
    border: none;
    border-radius: 10px;
    z-index: 1000;
}

/* matched by: "music-author" */




.music-author {
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* matched by: "music-controls-row" */




/* 4. CONTROLES Y PROGRESO */

.music-controls-row {
    align-items: center;
    display: flex;
    gap: 12px;
    width: 100%;
}

/* matched by: "progress-bg" */




/* --- BARRA DE PROGRESO CON EFECTO DE DESTELLO --- */

.progress-bg {
    background: var(--color-ui) !important;
    border-radius: 10px !important;
    flex-grow: 1;
    height: 6px !important;
    overflow: hidden;
    position: relative; /* Necesario para el destello */
}

/* matched by: "time-badge" */




.time-badge {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    color: var(--color-text-secondary);
    font-family: monospace;
    font-size: 9px;
    padding: 2px 6px;
}

/* matched by: "music-item-thumb" */




.music-item-thumb {
    background: var(--color-ui);
    border-radius: 8px; height: 44px;
    object-fit: cover;
    width: 44px;
}

/* matched by: "music-item-info" */




.music-item-info { flex-grow: 1; overflow: hidden;
}

/* matched by: "music-item-title" */




.music-item-title {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* matched by: "music-item-author" */




.music-item-author {
    color: var(--color-text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* matched by: "music-item-send-icon" */




.music-item-send-icon {
    color: var(--color-accent);
    flex-shrink: 0;
    opacity: 0.6;
}

/* matched by: "replied-text" */




.replied-text::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px; /* Ancho del efecto de desvanecido */
    height: 100%;
    z-index: 10; /* 🚀 CRUCIAL: Por encima del emoji SVG/Lottie */
    pointer-events: none; /* Para que no bloquee clics */
    
    /* 🎨 AJUSTA EL COLOR: 
       Sustituye #222 por el color exacto de tu barra de respuesta 
       (puedes usar var(--color-ui-bg) si la tienes) */
    background: linear-gradient(to right, transparent, #1a1a1a); 
}

/* matched by: "games-title" */




.games-title {
    color: var(--color-text);
    flex-basis: 100%;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 16px;
    
    /* --- ¡AÑADE ESTAS DOS LÍNEAS! --- */
    width: 100%;       /* Ocupa todo el ancho */  /* Asegura que ocupe toda la base en un contenedor flex */
}

/* matched by: "game-item" */




.game-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    width: 64px;
}

/* matched by: "player-card-content" */




.player-card-content {
    align-items: flex-end;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 16px;
    position: relative;
}

/* matched by: "player-card-info" */




.player-card-info { align-items: center; display: flex; gap: 12px;
}

/* matched by: "player-card-game-icon" */




.player-card-game-icon { border-radius: 8px; flex-shrink: 0; height: 48px; width: 48px;
}

/* matched by: "player-card-details" */




.player-card-details span { display: block; font-size: 0.9rem;
}

/* matched by: "player-card-action" */




.player-card-action .invite-btn {
    background-color: var(--color-accent);
    border: none;
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
    font-weight: bold;
    padding: 8px 16px;
}

/* matched by: "sortable-ghost" */




/* --- Estilos para el arrastre de SortableJS --- */

.sortable-ghost {
    background-color: var(--color-accent);
    opacity: 0.4;
}

/* matched by: "relay-loader-wrapper" */





/* Animación del círculo de carga P2P */
.relay-loader-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* matched by: "relay-loader-wrapper" */




.relay-loader-wrapper.waiting {
    animation: loader-spin 1.5s infinite;
}

/* matched by: "relay-download-btn" */




.relay-download-btn {
    transition: background 0.3s ease, opacity 0.3s ease;
}

/* matched by: "custom-video-controls" */







.custom-video-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    z-index: 10001;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* matched by: "control-btn" */




.control-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 0.2s;
}

/* matched by: "control-btn" */




.control-btn:active { transform: scale(0.9); }

/* matched by: "control-btn" */




.control-btn span {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.7;
}

/* matched by: "video-timeline-container" */



/* Contenedor de la línea de tiempo */
.video-timeline-container {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px; /* Espacio antes de los botones */
}

/* matched by: "timeline-bg" */




.timeline-bg {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

/* matched by: "timeline-fill" */




.timeline-fill {
    height: 100%;
    width: 0%; /* Se actualiza con JS */
    background: var(--color-accent);
    border-radius: 2px;
}

/* matched by: "time-display" */




/* Relojes de tiempo */
.time-display {
    color: white;
    font-size: 10px;
    font-family: monospace;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* matched by: "color-input-custom" */




.color-input-custom {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    background: none;
}

/* matched by: "color-input-custom" */




.color-input-custom::-webkit-color-swatch {
    border-radius: 50%;
    border: 2px solid white;
}

/* matched by: "recommendations-container" */






/*CUENTAS RECOMENDADAS*/


/* Contenedor de la sección completa */
.recommendations-container {
    background: var(--color-surface);
    border: 1px solid var(--color-ui);
    border-radius: 16px;
    padding: 15px 0;
    margin: 10px 0 20px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* matched by: "recommendations-header" */




.recommendations-header {
    display: flex;
    justify-content: space-between;
    padding: 0 15px 12px;
    align-items: center;
}

/* matched by: "recommendations-header" */




.recommendations-header h3 {
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-accent);
    letter-spacing: 1px;
}

/* matched by: "recommendations-scroll" */




/* Scroll horizontal */
.recommendations-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 0 15px 5px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Ocultar scroll en Firefox */
}

/* matched by: "recommendations-scroll" */




.recommendations-scroll::-webkit-scrollbar {
    display: none; /* Ocultar scroll en Chrome/Safari */
}

/* matched by: "rec-card" */




/* Tarjeta de usuario individual */
.rec-card {
    min-width: 140px;
    background: var(--color-ui);
    border-radius: 14px;
    padding: 15px 10px;
    text-align: center;
    scroll-snap-align: start;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.2s;
}

/* matched by: "rec-card" */




.rec-card:active {
    transform: scale(0.95);
}

/* matched by: "rec-avatar" */




.rec-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin: 0 auto 10px;
    border: 2px solid var(--color-text);
    object-fit: cover;
}

/* matched by: "rec-username" */




.rec-username {
    display: block;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* matched by: "rec-reason" */




.rec-reason {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 20px; /* Altura fija para que no salte el diseño */
    margin-bottom: 10px;
}

/* matched by: "mutual-avatar-mini" */



.mutual-avatar-mini {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--color-accent);
    object-fit: cover;
}

/* matched by: "mutual-text" */




.mutual-text {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* matched by: "rec-follow-btn" */



.rec-follow-btn {
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 0;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

/* matched by: "vf-live-loading" */




/* Overlay que tapa el video mientras carga */
.vf-live-loading {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 1;
}

/* matched by: "vf-live-loading-bg" */




/* Fondo: avatar del streamer con blur fuerte + oscurecido */
.vf-live-loading-bg {
    position: absolute;
    inset: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    object-fit: cover;
    filter: blur(36px) brightness(0.3) saturate(1.2);
    transform: scale(1.15);
    z-index: 0;
    pointer-events: none;
}

/* matched by: "vf-live-loading-content" */




/* Contenido: avatar circular + spinner */
.vf-live-loading-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 18px;  ← ya no hace falta, es solo un hijo */
    pointer-events: none;
}

/* matched by: "vf-live-loading-spinner" */




.vf-live-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: vf-live-spin 0.85s linear infinite;
}

/* matched by: "live-ended-content" */




.live-ended-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 320px;
}

/* matched by: "live-ended-avatar" */




.live-ended-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    opacity: 0.85;
    filter: grayscale(0.35);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
}

/* matched by: "live-ended-title" */




.live-ended-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* matched by: "live-ended-sub" */




.live-ended-sub {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.4;
}

/* matched by: "live-ended-action" */



.live-ended-action {
    margin-top: 8px;
    padding: 10px 22px;
    background: #D33F49;
    color: #fff;
    border: none;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(211, 63, 73, 0.4);
    transition: transform 0.15s ease, filter 0.15s ease;
}

/* matched by: "live-ended-action" */



.live-ended-action:active {
    transform: scale(0.96);
    filter: brightness(0.95);
}

/* matched by: "vf-mock-video-label" */



.vf-mock-video-label {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    opacity: 0.85;
}

/* matched by: "shop-grid" */





/* Rejilla de productos */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
}

/* matched by: "anark-card__badge" */




/* Badge "Equipado" en esquina */
.anark-card__badge {
    position: absolute;
    top: 9px;
    right: 9px;
    background: var(--color-accent);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 10px;
    z-index: 1000;
}

/* matched by: "anark-card__media" */


/* Área de previsualización — nombre distinto a .preview-area de pages.css */
.anark-card__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color-bg);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
}


.anark-card__media img,
.anark-card__media dotlottie-player {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

/* matched by: "anark-card__name" */




.anark-card__name {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-text);
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

/* matched by: "anark-card__cat" */




.anark-card__cat {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin-bottom: 8px;
}

/* matched by: "anark-btn" */





/* ── BOTÓN DE ACCIÓN (3 estados) ─────────────────────────── */

.anark-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 9px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
}

/* matched by: "anark-btn" */



.anark-btn:active:not(:disabled) { transform: scale(0.96); }

/* matched by: "anark-btn--buy" */




/* COMPRAR */
.anark-btn--buy {
    background: var(--color-accent);
    color: #fff;
}

/* matched by: "anark-btn--equip" */




/* EQUIPAR */
.anark-btn--equip {
    background: rgba(255,255,255,0.08);
    color: var(--color-text);
    border: 1px solid rgba(255,255,255,0.14);
}

/* matched by: "anark-btn--equipped" */




/* EQUIPADO (deshabilitado) */
.anark-btn--equipped {
    background: var(--color-accent);
    color: var(--color-text);
    border: var(--color-border);
    cursor: default;
}

/* matched by: "anark-btn" */




/* Spinner inline mientras espera la API */
.anark-btn .btn-spinner {
    display: none;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: anark-spin 0.55s linear infinite;
}

/* matched by: "progress-bar-bg" */



.progress-bar-bg { height: 6px; background: #333; border-radius: 3px; overflow: hidden; }

/* matched by: "active-dot" */






/* Punto rojo de notificación */
.active-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    margin-left: 6px;
    box-shadow: 0 0 8px #ef4444;
}



/* Contenedor del icono de sonido */

.video-sound-indicator {
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    padding: 4px;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 8px; /* Para que el clic pase a través del icono al video */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
}

.video-sound-indicator svg {
    color: white;
    height: 14px;
    width: 14px;
}

/* Ocultar el indicador cuando el video se des-silencia (opcional) */

.video-sticker:not([muted]) + .video-sound-indicator {
    opacity: 0;
}
.video-sound-indicator.is-playing {
    background: var(--color-accent); /* Cambia al color del tema cuando suena */
    box-shadow: 0 0 10px var(--color-accent);
    transform: scale(1.1);
}

/* Animación de las ondas del altavoz */

.video-sound-indicator.is-playing svg .sound-wave {
    animation: wave-pulse 1s infinite;
    transform-origin: center left;
}

/* Retraso para la segunda onda para que se vea progresivo */

.video-sound-indicator.is-playing svg .sound-wave-2 {
    animation-delay: 0.3s;
}
/* Icono de silenciado (opcional: una raya cruzada) */

.video-sound-indicator.is-muted svg .sound-wave {
    display: none; /* Escondemos las ondas si está mudo */
}

/* Ajuste del icono para que sea más pequeño en el panel que en el chat */

.sticker-item-wrapper .video-sound-indicator {
    padding: 2px;
    right: 5px;
    top: 5px; /* Un poco más pequeño */
}

.sticker-item-wrapper .video-sound-indicator svg {
    width: 10px; /* Icono más sutil para la cuadrícula */
    height: 10px;
}





/* ═══════════════════════════════════════════════════════════════
   🚀 MOBILE VIDEO CTA
   Reemplaza al reproductor de YouTube en móvil cuando no estamos
   dentro de la app nativa (Capacitor). Se usa en:
   - video_feed.js  → renderVideoSlide()  (variante por defecto, slide completo)
   - postCard.js    → createPostHTML()    (variante --card, dentro de un post)

   La detección de móvil + app nativa se hace en utils.js
   (IS_MOBILE_DEVICE) y el HTML lo genera buildVideoPlayerHTML().
   ═══════════════════════════════════════════════════════════════ */

.mobile-video-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 32px 24px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        var(--color-bg, #000) 0%,
        var(--color-surface, #111) 100%
    );
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Halo de fondo sutil (acento del tema) */
.mobile-video-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 35%,
        color-mix(in srgb, var(--color-accent, #8A2BE2) 25%, transparent) 0%,
        transparent 60%
    );
    pointer-events: none;
    opacity: 0.7;
}

.mobile-video-cta > * {
    position: relative;
    z-index: 1;
}

/* ─── Icono (emoji) ─── */
.mobile-video-cta-icon {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--color-accent, #8A2BE2) 60%, transparent));
    animation: vf-cta-float 3s ease-in-out infinite;
}

@keyframes vf-cta-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ─── Título ─── */
.mobile-video-cta-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ─── Texto descriptivo ─── */
.mobile-video-cta-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

/* ─── Botón de descarga ─── */
.mobile-video-cta-btn {
    display: inline-block;
    padding: 14px 28px;
    background: linear-gradient(
        135deg,
        var(--color-accent, #8A2BE2) 0%,
        color-mix(in srgb, var(--color-accent, #8A2BE2) 70%, #ffffff) 100%
    );
    color: #fff;
    text-decoration: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--color-accent, #8A2BE2) 45%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-video-cta-btn:hover {
    filter: brightness(1.08);
    box-shadow:
        0 12px 34px color-mix(in srgb, var(--color-accent, #8A2BE2) 55%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.mobile-video-cta-btn:active {
    transform: scale(0.96);
    filter: brightness(0.95);
}

/* ═══════════════════════════════════════════════════════════════
   VARIANTE --card  (usada dentro de un post en el feed)
   - Menos padding (el post ya aporta margen)
   - Icono más pequeño
   - Sin animación de flotado (evita ruido visual en un feed denso)
   - Respeta el aspect-ratio que le pasa buildVideoPlayerHTML()
   ═══════════════════════════════════════════════════════════════ */

.mobile-video-cta--card {
    padding: 20px 16px;
    gap: 10px;
    border-radius: 12px;
    /* El aspect-ratio viene inline desde el helper; aquí solo aseguramos
       que el contenido se centre si la altura es pequeña. */
    min-height: 180px;
}

.mobile-video-cta--card::before {
    opacity: 0.5;
}

.mobile-video-cta--card .mobile-video-cta-icon {
    font-size: 36px;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-accent, #8A2BE2) 50%, transparent));
    animation: none;
}

.mobile-video-cta--card .mobile-video-cta-title {
    font-size: 1rem;
    font-weight: 800;
}

.mobile-video-cta--card .mobile-video-cta-text {
    font-size: 0.8rem;
    max-width: 240px;
    line-height: 1.4;
}

.mobile-video-cta--card .mobile-video-cta-btn {
    padding: 11px 22px;
    font-size: 0.82rem;
    border-radius: 12px;
    box-shadow:
        0 6px 20px color-mix(in srgb, var(--color-accent, #8A2BE2) 40%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* ═══════════════════════════════════════════════════════════════
   AJUSTES PARA PANTALLAS MUY PEQUEÑAS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
    .mobile-video-cta {
        padding: 24px 18px;
        gap: 12px;
    }

    .mobile-video-cta-icon {
        font-size: 44px;
    }

    .mobile-video-cta-title {
        font-size: 1.1rem;
    }

    .mobile-video-cta-text {
        font-size: 0.82rem;
    }

    .mobile-video-cta-btn {
        padding: 12px 22px;
        font-size: 0.85rem;
    }

    .mobile-video-cta--card {
        padding: 16px 12px;
        gap: 8px;
        min-height: 160px;
    }

    .mobile-video-cta--card .mobile-video-cta-icon {
        font-size: 30px;
    }

    .mobile-video-cta--card .mobile-video-cta-title {
        font-size: 0.92rem;
    }

    .mobile-video-cta--card .mobile-video-cta-text {
        font-size: 0.74rem;
    }

    .mobile-video-cta--card .mobile-video-cta-btn {
        padding: 9px 18px;
        font-size: 0.76rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MODO CLARO (si en algún momento añades data-mode="light")
   En modo claro, el gradiente se invierte para dar contraste.
   ═══════════════════════════════════════════════════════════════ */

[data-mode="light"] .mobile-video-cta {
    background: linear-gradient(
        180deg,
        var(--color-surface, #f5f5f5) 0%,
        var(--color-bg, #ffffff) 100%
    );
}

[data-mode="light"] .mobile-video-cta-title {
    color: var(--color-text, #111);
}

[data-mode="light"] .mobile-video-cta-text {
    color: rgba(0, 0, 0, 0.6);
}






/* ============================================================================
   🚀 DISCOVER PLAYERS — Carrusel horizontal con flechas
   ============================================================================ */

.recommendations-container {
    margin: 24px 0;
}

/* ─── Header con título + flechas ─────────────────────────────────────── */
.recommendations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 12px;
}

.recommendations-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* ─── Botones prev/next: ocultos en mobile (swipe táctil) ─────────────── */
.recommendations-arrows {
    display: none;
    gap: 6px;
    flex-shrink: 0;
}

/* ─── Contenedor scrollable ───────────────────────────────────────────── */
.recommendations-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 4px;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

/* ─── Cada card ───────────────────────────────────────────────────────── */
.rec-card {
    flex: 0 0 auto;
    width: 140px;
    scroll-snap-align: start;
}

/* ─── Tablet y desktop: mostrar flechas ───────────────────────────────── */
@media (min-width: 768px) {
    .recommendations-arrows {
        display: flex;
    }

    .rec-arrow {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-surface);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .rec-arrow:hover:not(:disabled) {
        background: var(--color-ui);
    }

    .rec-arrow:active:not(:disabled) {
        transform: scale(0.92);
    }

    .rec-arrow:disabled {
        opacity: 0.25;
        cursor: not-allowed;
    }

    /* Desktop: cards un poco más anchas + gap mayor */
    .rec-card {
        width: 150px;
    }

    .recommendations-scroll {
        gap: 16px;
    }
}