/* ==========================================================================
   SHOTAPP - STYLESHEET PRINCIPAL (V11.3 - VIRTUAL DOM & GPU ACCELERATION)
   ========================================================================== */

/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS (RESET & BASE)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
    height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* ==========================================================================
   2. O NOVO MOTOR DE FEED (VIRTUALIZAÇÃO GPU)
   ========================================================================== */
#feedViewport {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    /* Removemos o scroll nativo. O JS vai assumir a física do toque */
    touch-action: none; 
    background: #000;
}

.video-slot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    
    /* A magia da Placa Gráfica: Avisa o telemóvel que isto vai mexer rápido */
    will-change: transform;
    /* Força a criação de uma camada de GPU independente (Hardware Acceleration) */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

/* 🔥 CORREÇÃO DO BUG DO AVATAR GIGANTE: O Player e a Imagem DE FUNDO devem cobrir tudo, e NENHUMA outra imagem mais! */
.video-slot > video, .video-slot > img.placeholder-blur {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Deixa os toques passarem para o feedViewport */
}

/* Efeito de Blur Premium para a Capa de fundo enquanto o vídeo não carrega */
.video-slot > img.placeholder-blur {
    filter: blur(15px) brightness(0.4);
    transform: scale(1.1); /* Evita bordas brancas do blur */
    transition: opacity 0.4s ease;
}

/* ==========================================================================
   3. COMPONENTES VISUAIS PREMIUM & HASHTAGS
   ========================================================================== */
.text-shadow-premium {
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.9);
}

.shadow-glow {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    border: 2px solid #fff !important;
}

.skeleton {
    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
}

/* ==========================================================================
   4. EDITOR DE FOTOS E CAPAS (CROPPIE CUSTOMIZATION)
   ========================================================================== */
.croppie-container { 
    padding: 0; 
}

.croppie-container .cr-viewport {
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.85); 
    cursor: move;
}

.croppie-container .cr-slider-wrap {
    position: absolute;
    bottom: 15px;
    left: 10%;
    width: 80%;
    z-index: 100;
    margin: 0;
}

.croppie-container .cr-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
}

.croppie-container .cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #3b82f6; 
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    margin-top: -8px;
}

.croppie-container .cr-slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    cursor: pointer;
}

/* ==========================================================================
   5. ANIMAÇÕES (KEYFRAMES EXCLUSIVAS)
   ========================================================================== */

.animate-ping-short {
    animation: popStar 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes popStar {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; filter: drop-shadow(0 0 0px rgba(59, 130, 246, 0)); }
    30% { transform: scale(1.5) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.8)); }
    100% { transform: scale(1.2) rotate(0deg); opacity: 0; filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0)); }
}

.animate-bounce-short {
    animation: bounceShort 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes bounceShort {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-slide-up { 
    animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}
@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in { 
    animation: fadeIn 0.4s ease-out forwards; 
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   6. EFEITOS DE GAMIFICAÇÃO (PAINEL DE PATENTES / ELITE)
   ========================================================================== */
.animate-shimmer {
    animation: shimmer 2.5s infinite linear;
}
@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.animate-pulse-slow {
    animation: pulse-slow 3s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==========================================================================
   7. CORREÇÕES DE UI (REMOÇÃO DE FUNDOS DOS BOTÕES)
   ========================================================================== */

/* Remove o fundo redondo do botão Play/Pause central */
.play-pause-indicator > div {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Garante que o ícone Play/Pause ganhe uma sombra para não sumir em vídeos claros */
.play-pause-icon {
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.8));
}

/* Remove o fundo redondo do botão de pesquisa (Lupa) no topo direito */
#feed-categories button {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Adiciona sombra ao ícone da lupa para legibilidade */
#feed-categories button svg {
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8));
}

/* Correção de opacidade para garantir que o Play/Pause e loading não bloqueiem a visão acidentalmente */
.play-pause-indicator.opacity-0, .buffer-indicator.opacity-0 {
    opacity: 0 !important;
    pointer-events: none !important;
}