/* ========================================= */
/* CONFIGURAÇÕES DO FEED E STORIES           */
/* ========================================= */

.stories-container { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scroll-behavior: smooth; }
.stories-container::-webkit-scrollbar { height: 6px; display: none; }
.stories-container::-webkit-scrollbar-thumb { background-color: #d1e7dd; border-radius: 10px; }

/* Largura aumentada para acomodar o avatar maior sem quebrar o nome */
.story-item { width: 76px; flex-shrink: 0; text-align: center; cursor: pointer; transition: transform 0.2s ease; }
.story-item:hover { transform: scale(1.05); }

/* Avatar aumentado de 52px para 68px e borda ajustada para 2.5px */
.story-avatar { width: 68px; height: 68px; border-radius: 50%; border-width: 2.5px; border-style: solid; padding: 2px; object-fit: cover; background-color: white; transition: border-color 0.3s ease; }

.story-unread { border-color: #198754; } 
.story-read { border-color: #dee2e6; } 
.story-name { font-size: 0.65rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #495057; font-weight: 600; }

/* CSS DO CARROSSEL ESTILO INSTAGRAM */
.story-carousel-item { height: 85vh; background-color: black; border-radius: 1rem; }
.story-carousel-item.active { display: flex; align-items: center; justify-content: center; }
.carousel-indicators { position: absolute; top: 15px; bottom: auto; margin: 0 10px; z-index: 20; }
.carousel-indicators [data-bs-target] { position: relative; height: 3px; border-radius: 3px; margin: 0 3px; flex: 1; background-color: rgba(255, 255, 255, 0.4); overflow: hidden; border: none; }
.carousel-indicators .active::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; background-color: white; animation: fillProgress 5s linear forwards; }
@keyframes fillProgress { 0% { width: 0%; } 100% { width: 100%; } }

/* Elementos de Interação e Comentários */
.feed-post-row { transition: background-color 0.2s ease; }
.feed-post-row:hover { background-color: #f8f9fa; }
.btn-interacao { transition: background-color 0.2s ease, color 0.2s ease; }
.btn-interacao:hover { background-color: #e2e3e5 !important; color: #212529 !important; }
.comentarios-lista::-webkit-scrollbar { width: 6px; }
.comentarios-lista::-webkit-scrollbar-thumb { background-color: #dee2e6; border-radius: 10px; }
.link-perfil:hover h6 { color: #198754 !important; }

/* ========================================== */
/* BARRA DE NAVEGAÇÃO INFERIOR E RESPONSIVIDADE */
/* ========================================== */

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1040;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav .nav-item {
    flex: 1;
    text-decoration: none;
    transition: transform 0.1s ease-in-out;
}

.mobile-bottom-nav .nav-item:active {
    transform: scale(0.90);
}

@media (max-width: 991.98px) {
    body { padding-bottom: 75px; background-color: #f0f2f5 !important; }
    .edge-to-edge-mobile { border-radius: 0 !important; border-left: none !important; border-right: none !important; margin-bottom: 6px !important; box-shadow: none !important; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); }
    .container.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .navbar-brand span { font-size: 1.25rem !important; }
    .form-card-responsive { margin-top: -4px !important; margin-bottom: 0 !important; border-bottom: 1px solid rgba(0,0,0,0.03) !important; border-radius: 0 !important; box-shadow: none !important; }
    /* Stories card agora cola perfeitamente na barra superior e no feed */
    .stories-card-responsive { margin-top: 0 !important; margin-bottom: 0 !important; border-top: none !important; border-radius: 0 !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
    .feed-textarea { height: 42px !important; min-height: 42px !important; border-radius: 50rem !important; padding-top: 9px !important; background-color: #f8f9fa !important; overflow: hidden; white-space: nowrap; }
}

@media (min-width: 992px) {
    .feed-textarea { min-height: 50px; background-color: transparent !important; }
}