:root {
    --body-bg-light: #e2e2e2;
    --text-color-light: #000000;
    --container-bg-light: #f9f9f9;
    --border-color-light: #dddddd;
    --input-bg-light: #ffffff;
    --input-border-light: #cccccc;
    --input-text-light: #000000;
    --placeholder-text-light: #777777;
    --button-primary-bg-light: #ff8800;
    --button-primary-text-light: #ffffff;
    --button-secondary-bg-light: #007bff;
    --button-secondary-text-light: #ffffff;
    --link-color-light: #007bff;
    --post-bg-light: #ffffff;
    --comment-bg-light: #f1f1f1;
    --header-bg-light: #eeeeee;
    --nav-bg-light: #000000;
    --nav-link-light: #ffffff;
    --icon-color-light: #000000;

    

    --body-bg-dark: #070707;
    --text-color-dark: #e0e0e0;
    --container-bg-dark: #1e1e1e;
    --border-color-dark: #222222d8;
    --input-bg-dark: #161616;
    --input-border-dark: #44444400;
    --input-text-dark: #e0e0e0;
    --placeholder-text-dark: #888888;
    --button-primary-bg-dark: #d86a00;
    --button-primary-text-dark: #ffffff;
    --button-secondary-bg-dark: #007bff;
    --button-secondary-text-dark: #ffffff;
    --link-color-dark: #8ab4f8;
    --post-bg-dark: #1e1e1e;
    --comment-bg-dark: #2c2c2c;
    --header-bg-dark: #1a1a1a;
    --nav-bg-dark: #000000;
    --nav-link-dark: #e0e0e0;
    --icon-color-dark: #e0e0e0;

    /* Adicionando variáveis de cor para o spinner, se quiser centralizar */
    --spinner-bg-color-light: #f3f3f3;
    --spinner-active-color-light: #007bff; /* Ou var(--button-primary-bg-light) */
    --spinner-bg-color-dark: #444444;
    --spinner-active-color-dark: #8ab4f8; /* Ou var(--button-primary-bg-dark) */

    --error-text-color-light: red;
    --error-text-color-dark: #ff5c5c;
}


/* Base styles - Mobile First Approach */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center; /* PADRÃO: Centraliza conteúdo verticalmente */
    min-height: 100vh;
    flex-direction: column;
    color: var(--text-color-light);
    background-color: var(--body-bg-light); /* Adicionado para transição */
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
    box-sizing: border-box; /* Para padding não afetar dimensões totais */
}
body.theme-dark {
    color: var(--text-color-dark);
    background-color: var(--body-bg-dark); /* Adicionado para transição */
}


.background-black {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -2;
    filter: none;
    transition: filter 0.3s ease-in-out;
}
body.theme-dark .background-black {
    filter: none;
}

#dynamic-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}
#dynamic-background-container img,
#dynamic-background-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.profile-picture {
    z-index: 1000;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1em;
    cursor: pointer;
    display: none;
    box-shadow: 0 0 1px var(--text-color-light);
    position: relative;
}
body.theme-dark .profile-picture {
    box-shadow: 0 0 1px var(--text-color-dark);
}
.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#profile-input, #story-input, #new-post-image-input, #new-post-video-input { display: none; }

.splash-screen {
    text-align: center;
    animation: fade 3s ease-in-out forwards;
}
.logo {
    font-size: 3em;
    font-weight: bold;
    color: var(--text-color-light);
}
body.theme-dark .logo { color: var(--text-color-dark); }


.login-container, .register-container,
.transfer-container, .admin-container, .admin-content-management-page,
.withdraw-container {
    background-color: var(--container-bg-light);
    width: 90%;
    max-width: 350px;
    padding: 1.5em;
    border: 1px solid var(--border-color-light);
    box-sizing: border-box;
    border-radius: 10px;
    display: none;
    flex-direction: column;
    align-items: center;
}
body.theme-dark .login-container, body.theme-dark .register-container,
body.theme-dark .transfer-container, body.theme-dark .admin-container, body.theme-dark .admin-content-management-page,
body.theme-dark .withdraw-container {
    background-color: var(--container-bg-dark);
    border-color: var(--border-color-dark);
}
.register-container { position: relative; z-index: 1000; }
.withdraw-container p { margin-bottom: 1em; text-align: center; }
.admin-content-management-page label { display: block; margin-bottom: 0.5em; text-align: left; width: 100%;}
.admin-content-management-page select { width: 100%; padding: 0.8em 1em; margin-bottom: 1em; border-radius: 5px; background-color: var(--input-bg-light); border: 1px solid var(--input-border-light); color: var(--input-text-light); font-family: 'Poppins', sans-serif; font-size: 1rem; }
body.theme-dark .admin-content-management-page select { background-color: var(--input-bg-dark); border-color: var(--input-border-dark); color: var(--input-text-dark); }

input, textarea, button, select { box-sizing: border-box; } 
input[type="text"], input[type="password"], input[type="number"], input[type="email"], textarea {
    width: 100%;
    padding: 0.8em 1em;
    margin-bottom: 1em;
    border-radius: 5px;
    background-color: var(--input-bg-light);
    border: 1px solid var(--input-border-light);
    color: var(--input-text-light);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}
input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="email"]::placeholder,
input[type="number"]::placeholder, textarea::placeholder { color: var(--placeholder-text-light); }
body.theme-dark input[type="text"], body.theme-dark input[type="password"], body.theme-dark input[type="email"],
body.theme-dark input[type="number"], body.theme-dark textarea {
    background-color: var(--input-bg-dark);
    border-color: var(--input-border-dark);
    color: var(--input-text-dark);
}
body.theme-dark input[type="text"]::placeholder, body.theme-dark input[type="password"]::placeholder, body.theme-dark input[type="email"]::placeholder,
body.theme-dark input[type="number"]::placeholder, body.theme-dark textarea::placeholder { color: var(--placeholder-text-dark); }

.input-wrapper { position: relative; width: 100%; margin-bottom: 1em; }
.input-wrapper input { width: 100%; margin-bottom: 0; }
#login-page .input-wrapper input#password,
#login-page .input-wrapper input[type="text"]#password { padding-right: 35px; }
.input-wrapper .toggle-password-icon {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%); cursor: pointer;
    color: var(--placeholder-text-light); font-size: 0.9em;
}
body.theme-dark .input-wrapper .toggle-password-icon { color: var(--placeholder-text-dark); }


button {
    width: 100%; padding: 0.8em 1em; margin-bottom: 1em; border-radius: 5px;
    background-color: var(--button-primary-bg-light); color: var(--button-primary-text-light);
    border: none; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 1rem;
}
button:hover:not(:disabled) { opacity: 0.8; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
body.theme-dark button { background-color: var(--button-primary-bg-dark); color: var(--button-primary-text-dark); }
.login-container button.register-style-button {
    background-color: var(--input-bg-light); color: var(--text-color-light);
    border: 1px solid var(--input-border-light);
}
body.theme-dark .login-container button.register-style-button {
    background-color: var(--input-bg-dark) !important; color: var(--text-color-dark) !important;
    border: 1px solid var(--input-border-dark) !important;
}

.error { color: var(--error-text-color-light); font-size: 0.9rem; }
body.theme-dark .error { color: var(--error-text-color-dark); }
.success { color: green; font-size: 0.9rem; }

.app-container {
    text-align: center;
    position: relative;
    width: 100%;
    padding-bottom: 70px; /* Espaço para bottom-nav */
    box-sizing: border-box;
}


/* Bloco Novo com Centralização Total */
.app-container header#app-header {
    /* Estilos visuais mantidos */
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    border: px solid rgba(255, 255, 255, 0.25);
    width: 90%;
    max-width: 560px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
    
    /* Novas propriedades para centralização */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */

    /* Ajustes de espaçamento */
    margin: -2em auto 1.5em auto; /* Mantém o espaçamento da página */
    padding: 1.em; /* Um padding geral para não colar nas bordas */
    min-height: 160px; /* Altura mínima para o alinhamento vertical fazer efeito */
}
body.theme-dark .app-container header#app-header {
    background-color: rgba(40, 40, 40, 0.3);
    border-color: rgba(70, 70, 70, 0.35);
}
#app-header h1 {
    margin-top: 15px;
    font-size: 2em;
    position: relative; z-index: 0;
}
/* Estilo Novo (Centralizado no fluxo) */
#virtual-coin-image {
    /* Removemos o position: absolute e as coordenadas top/right/left */
    width: 100px;  /* Tamanho ajustado para alinhar melhor com a foto de perfil */
    height: 100px; /* Tamanho ajustado */
    animation: floatAnimation 3s ease-in-out infinite; /* A animação de flutuar continua funcionando */
}
@keyframes floatAnimation {
    0%, 100% { transform: translateX(10%) translateY(6px); }
    50% { transform: translateX(10%) translateY(-6px); }
}


.bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background-color: var(--nav-bg-light); display: none; /* Começa escondida, JS mostra */
    justify-content: space-around; padding: 8px 0; z-index: 1001;
}
body.theme-dark .bottom-nav { background-color: var(--nav-bg-dark); }
.bottom-nav a {
    color: var(--nav-link-light); text-decoration: none; font-size: 22px;
    padding: 5px 10px; display: flex; align-items: center;
}
.bottom-nav a i { font-size: 18px; color: var(--button-primary-bg-light); }
body.theme-dark .bottom-nav a i { color: var(--button-primary-bg-dark); }
body.theme-dark .bottom-nav a { color: var(--nav-link-dark); }

@keyframes fade {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

.action-buttons { display: flex; justify-content: center; flex-wrap: wrap; margin-top: -1em; }
.action-buttons button { padding: 0.8em 1.2em; margin: 0.5em; width: auto; border-radius: 30px; font-size: 0.9rem; }
#rede-social-button {
    background-image: linear-gradient(45deg, var(--button-primary-bg-light), #e60099);
    color: var(--button-primary-text-light); border: none;
    transition: opacity 0.3s ease, transform 0.2s ease;
}
#rede-social-button:hover { opacity: 0.9; transform: scale(1.03); }
body.theme-dark #rede-social-button { background-image: linear-gradient(45deg, var(--button-primary-bg-dark), #e60099); }

/* Estilo específico para o novo botão "Vídeos" */
#video-feed-button {
    background-color: var(--button-secondary-bg-light);
    color: var(--button-secondary-text-light);
    transition: opacity 0.3s ease, transform 0.2s ease;
}
body.theme-dark #video-feed-button {
    background-color: var(--button-secondary-bg-dark);
    color: var(--button-secondary-text-dark);
}
#video-feed-button:hover { opacity: 0.9; transform: scale(1.03); }


.logout-icon { position: absolute; top: 10px; right: 15px; width: 28px; height: 28px; cursor: pointer; }
body.theme-dark .logout-icon { filter: invert(0.8) brightness(1.2) saturate(0.5); }

.two-column-layout-container {
    display: none; width: 100%; max-width: 1200px; margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 70px; /* Espaço para bottom-nav */
    box-sizing: border-box;
}
.two-column-layout-container > header {
    display: flex; justify-content: center; align-items: center;
    padding: 0 15px; margin-bottom: 10px; min-height: 40px;
}
.two-column-layout-container > header h1 { margin: 0; font-size: 1.8em; }
/* Para rede social (três colunas em desktop) */
#rede-social-page main { display: flex; flex-direction: column; gap: 10px; padding: 0 10px; align-items: stretch; }
/* Para feed de vídeos (coluna única centralizada, como posts normais) */
#video-feed-page main {
    display: flex; /* Mantém flex para centralizar o conteúdo */
    flex-direction: column; /* Força coluna única */
    align-items: center; /* Centraliza a seção de vídeos */
    padding: 0 10px;
    gap: 10px;
}


#stories, #feed, #profile-info-column, #profile-posts-column, #video-posts-section {
    border-radius: 8px; padding: 10px; overflow-y: auto;
    margin-bottom: 10px; box-sizing: border-box; width: 100%;
}
#stories, #profile-info-column, #video-posts-section {
    min-height: auto; padding: 15px; overflow-x: hidden;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
body.theme-dark #stories, body.theme-dark #profile-info-column, body.theme-dark #video-posts-section {
    background-color: rgba(40, 40, 40, 0.3); border: 1px solid rgba(70, 70, 70, 0.35);
}
#stories h2, #video-posts-section h2 { font-size: 1em; margin: 0 0 10px 0; text-align: left; }
#stories-list {
    display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#stories-list::-webkit-scrollbar { display: none; }

#profile-info-column { text-align: center; }
#profile-info-main-image {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    margin-bottom: 12px; border: 2px solid var(--border-color-light); cursor: pointer;
}
body.theme-dark #profile-info-main-image { border-color: var(--border-color-dark); }
#profile-info-username { margin: 0 0 5px 0; font-size: 1.5em; font-weight: bold;}
#profile-info-fullname { margin: 0 0 5px 0; font-size: 1em; color: var(--placeholder-text-light); }
#profile-info-email { margin: 0 0 15px 0; font-size: 0.9em; color: var(--placeholder-text-light); word-break: break-all; }
#profile-info-post-count-display { margin: 0 0 15px 0; font-size: 0.9em; }
#profile-info-edit-button {
    width: auto; padding: 8px 20px; font-size: 0.9em; margin-top: 10px;
    background-color: transparent; border: 1px solid var(--input-border-light);
    color: var(--text-color-light);
}
body.theme-dark #profile-info-edit-button { border-color: var(--input-border-dark); color: var(--text-color-dark); }
body.theme-dark #profile-info-fullname, body.theme-dark #profile-info-email { color: var(--placeholder-text-dark); }

.story-item, .add-story-item {
    display: inline-flex; flex-direction: column; align-items: center;
    text-align: center; margin-right: 12px; cursor: pointer;
    width: 70px; flex-shrink: 0;
}
.add-story-item .story-item-image-wrapper { border: 2px dashed var(--border-color-light); background: none; }
.add-story-item .story-item-image-wrapper::before { display: none; }
.add-story-item .story-item-image-wrapper i.fa-plus { font-size: 24px; color: var(--text-color-light); }
body.theme-dark .add-story-item .story-item-image-wrapper { border-color: var(--border-color-dark); }
body.theme-dark .add-story-item .story-item-image-wrapper i.fa-plus { color: var(--text-color-dark); }
.story-item:last-child, .add-story-item:last-child { margin-right: 0; }
.story-item-image-wrapper {
    width: 60px; height: 60px; border-radius: 50%; position: relative;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; margin-bottom: 5px; transition: transform 0.2s ease-in-out;
    border: none; padding: 0;
}
.story-item-image-wrapper::before {
    content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%; background: linear-gradient(to right bottom, #FFDD00, #F7921E, #ED1C24, #C71E82, #7C2E8B);
    z-index: 0;
}
.story-item img {
    display: block; width: calc(100% - 8px); height: calc(100% - 8px);
    margin: 4px; object-fit: cover; border-radius: 50%;
    position: relative; z-index: 1; background-color: var(--body-bg-light);
}
body.theme-dark .story-item img { background-color: var(--body-bg-dark); }
.story-item:hover .story-item-image-wrapper { transform: scale(1.05); }
.story-item .story-username {
    font-size: 0.75em; color: var(--text-color-light); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 65px;
}
body.theme-dark .story-item .story-username { color: var(--text-color-dark); }

#feed, #profile-posts-column { order: 2; min-height: 250px; }
#video-posts-section { order: 1; min-height: 250px; max-width: 600px; margin: 0 auto; } /* Centra a seção de vídeos */
#video-posts-section h2 { text-align: center; } /* Centraliza o título do feed de vídeos */
#video-posts-container { width: 100%; } /* Garante que o container de vídeos ocupe a largura total da sua seção */

#chat-fab {
    display: none; position: fixed; bottom: 80px; right: 20px;
    width: 56px; height: 56px; background-color: var(--button-primary-bg-light);
    color: var(--button-primary-text-light); border-radius: 50%; border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); font-size: 24px;
    justify-content: center; align-items: center; cursor: pointer;
    z-index: 1050; transition: transform 0.2s ease-out;
}
#chat-fab:hover { transform: scale(1.1); }
body.theme-dark #chat-fab { background-color: var(--button-primary-bg-dark); color: var(--button-primary-text-dark); }

#chat {
    box-sizing: border-box; background-color: rgba(245, 245, 245, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px;
    display: flex; flex-direction: column; position: relative;
    width: 100%; order: 3; min-height: 200px; margin-bottom: 10px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.theme-dark #chat { background-color: rgba(45, 45, 45, 0.3); border: 1px solid rgba(65, 65, 65, 0.35); }
#close-chat-popup {
    display: none; position: absolute; top: 10px; right: 10px;
    background: none; border: none; font-size: 24px; color: var(--text-color-light);
    cursor: pointer; padding: 5px; line-height: 1; z-index: 10;
    width: auto; margin-bottom: 0;
}
body.theme-dark #close-chat-popup { color: var(--text-color-dark); }

@media (max-width: 767px) {
    .two-column-layout-container main { padding-bottom: 10px; }
    #chat {
        position: fixed;
        bottom: -100vh; /* Escondido por padrão, para surgir */
        left: 0;
        right: 0;
        width: 100%;
        height: 80vh;
        max-height: 80vh;
        border-radius: 15px 15px 0 0;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
        z-index: 2000;
        transition: bottom 0.3s ease-in-out; /* Transição para surgir/descer */
        padding: 15px;
        margin-bottom: 0;
    }
    #chat.chat-popup-active {
        bottom: 0; /* Aparece na tela */
    }
    #close-chat-popup { display: block; }
}

.story-viewer-modal {
    display: none; position: fixed; z-index: 2000; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8);
    justify-content: center; align-items: center;
}
.story-viewer-modal-content {
    background-color: rgba(250, 250, 250, 0.4); margin: auto; padding: 20px;
    border-radius: 8px; width: 90%; max-width: 500px; position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}
body.theme-dark .story-viewer-modal-content { background-color: rgba(35, 35, 35, 0.5); border: 1px solid rgba(60, 60, 60, 0.45); }
.story-viewer-modal .close-story-viewer {
    color: #aaa; position: absolute; top: 10px; right: 15px;
    font-size: 28px; font-weight: bold; cursor: pointer;
}
body.theme-dark .story-viewer-modal .close-story-viewer { color: #777; }
.story-viewer-modal .close-story-viewer:hover, .story-viewer-modal .close-story-viewer:focus { color: var(--text-color-light); text-decoration: none; }
body.theme-dark .story-viewer-modal .close-story-viewer:hover, body.theme-dark .story-viewer-modal .close-story-viewer:focus { color: var(--text-color-dark); }
#story-viewer-image { max-width: 100%; max-height: 70vh; border-radius: 4px; margin-bottom: 0; }
#story-viewer-username { font-weight: bold; }
@media (max-width: 767px) {
    .story-viewer-modal-content { width: 95%; max-height: 90vh; padding: 15px; }
    #story-viewer-image { max-height: 75vh; }
}
#story-action-area .delete-story-icon-btn-style {
    background: none; border: none; color: var(--placeholder-text-light);
    font-size: 1.1em; padding: 5px; margin-right: 5px; cursor: pointer;
    line-height: 1; vertical-align: middle; transition: color 0.2s;
}
body.theme-dark #story-action-area .delete-story-icon-btn-style { color: var(--placeholder-text-dark); }
#story-action-area .delete-story-icon-btn-style:hover { color: var(--text-color-light); }
body.theme-dark #story-action-area .delete-story-icon-btn-style:hover { color: var(--text-color-dark); }
#story-action-area .delete-story-icon-btn-style .spinner {
    border-top-color: var(--text-color-light) !important; width: 16px !important;
    height: 16px !important; margin: 0 !important;
}
body.theme-dark #story-action-area .delete-story-icon-btn-style .spinner { border-top-color: var(--text-color-dark) !important; }

.spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid var(--spinner-bg-color-light, rgba(0,0,0,0.1));
    border-radius: 50%;
    border-top-color: var(--spinner-active-color-light, #333);
    animation: spin 1s ease-in-out infinite; margin-left: 8px; vertical-align: middle;
}
body.theme-dark .spinner { 
    border-color: var(--spinner-bg-color-dark, rgba(255,255,255,0.1));
    border-top-color: var(--spinner-active-color-dark, #fff);
}

.create-post-container {
    background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(221, 221, 221, 0.3);
    padding: 15px; margin-bottom: 20px; border-radius: 8px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.theme-dark .create-post-container { background-color: rgba(30, 30, 30, 0.3); border: 1px solid rgba(51, 51, 51, 0.4); }
.create-post-container h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.2em; }
.create-post-container textarea { width: 100%; min-height: 80px; resize: vertical; font-size: 0.9rem; }
.create-post-container button#submit-post-button { width: auto; padding: 0.7em 1em; margin-top: 5px; margin-bottom: 0; font-size: 0.9rem; }

.button-like-input {
    display: inline-block; padding: 8px 12px; font-size: 0.9rem;
    background-color: var(--input-bg-light); color: var(--text-color-light);
    border: 1px solid var(--input-border-light); border-radius: 5px;
    cursor: pointer; transition: background-color 0.2s; font-family: 'Poppins', sans-serif;
    margin-right: 8px;
}
.create-post-media-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}
.create-post-media-controls .button-like-input {
    flex-grow: 1;
    text-align: center;
    justify-content: center;
    display: flex;
}
body.theme-dark .button-like-input { background-color: var(--input-bg-dark); color: var(--text-color-dark); border-color: var(--input-border-dark); }
.button-like-input:hover { background-color: var(--border-color-light); }
body.theme-dark .button-like-input:hover { background-color: var(--border-color-dark); }
.button-like-input i { margin-right: 6px; }

#new-post-media-preview-container {
    display: none;
    margin-top: 10px;
    position: relative;
    max-width: 200px;
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    overflow: hidden;
}
body.theme-dark #new-post-media-preview-container {
    border-color: var(--border-color-dark);
}
#new-post-media-preview-container img,
#new-post-media-preview-container video {
    width: 100%;
    height: auto;
    display: block;
}
#remove-post-media-button {
    position: absolute;
    top: -5px;
    right: -5px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    padding:0;
    z-index: 5;
}


.post, .video-post {
    background-color: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px; margin-bottom: 15px; border-radius: 8px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
body.theme-dark .post, body.theme-dark .video-post { background-color: rgba(40, 40, 40, 0.35); border: 1px solid rgba(70, 70, 70, 0.4); }
.post-header { display: flex; align-items: center; margin-bottom: 12px; }
.post-user-image {
    width: 35px; height: 35px; border-radius: 50%;
    margin-right: 8px; object-fit: cover; border: 1px solid var(--border-color-light);
}
body.theme-dark .post-user-image { border-color: var(--border-color-dark); }
.post-username { font-weight: bold; margin-right: 8px; font-size: 0.9rem; }
.post-timestamp { font-size: 0.75em; color: #777; }
body.theme-dark .post-timestamp { color: #aaa; }
.post-content p { margin-top: 0; margin-bottom: 10px; line-height: 1.5; word-wrap: break-word; font-size: 0.9rem; }
.post-meta-options { margin-top: 8px; margin-bottom: 4px; text-align: right; }
/* --- Estilos Finais e Forçados para Ícones de Editar/Deletar Post --- */

.post-meta-options button {
  background: none !important;  /* Força a remoção de qualquer fundo */
  border: none !important;      /* Força a remoção de qualquer borda */
  padding: 5px;
  margin-left: 8px;
  color: #888;
  cursor: pointer;
  font-size: 1.1em;
  transition: color 0.2s ease;
  width: auto;
  margin-bottom: 0;
}

/* Cor do ícone no tema escuro */
body.theme-dark .post-meta-options button {
  color: #999;
}

/* Efeito ao passar o mouse (hover) */
.post-meta-options button:hover {
  color: #000;
}

/* Efeito ao passar o mouse no tema escuro */
body.theme-dark .post-meta-options button:hover {
  color: #fff;
}

.post-image-container {
    width: 100%; 
    max-width: 500px; 
    height: 0; 
    padding-bottom: 100%;
    background-color: var(--input-bg-light, #e9e9e9);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    margin: 10px auto; 
    display: flex;
    justify-content: center;
    align-items: center;
}
body.theme-dark .post-image-container {
    background-color: var(--input-bg-dark, #2a2a2a);
}
.post-image-container img.post-image-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 15px; 
    display: none;
}

.post-image-loader {
    border: 5px solid var(--spinner-bg-color-light, #f3f3f3);
    border-top: 5px solid var(--spinner-active-color-light, #007bff);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: absolute; 
}
body.theme-dark .post-image-loader {
    border-color: var(--spinner-bg-color-dark, #444);
    border-top-color: var(--spinner-active-color-dark, #8ab4f8);
}

.post-image-container p.error {
    color: var(--error-text-color-light, red); 
    font-size: 0.9em;
    padding: 10px;
    text-align: center;
    width: 100%;
}
body.theme-dark .post-image-container p.error {
    color: var(--error-text-color-dark, #ff5c5c);
}

.post-video-container {
    width: 100%;
    max-width: 308px;
    height: 550px;
    background-color: #000000;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.post-video-container video.post-video-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

@media (max-width: 767px) {
    .post-video-container {
        height: 740px;
        max-width: 95%;
    }
}


.post-actions {
    margin-top: 8px; margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color-light); display: flex; align-items: center;
}
body.theme-dark .post-actions { border-bottom-color: var(--border-color-dark); }
.post-actions .reaction-button {
    background-color: transparent; color: var(--text-color-light);
    border: 1px solid var(--border-color-light); padding: 6px 10px;
    border-radius: 20px; cursor: pointer; margin-right: 8px; font-size: 0.85em;
    width: auto; margin-bottom: 0; display: inline-flex; align-items: center;
}
.post-actions .reaction-button i { margin-right: 4px; }
.post-actions .reaction-button .spinner-small {
    width: 12px; height: 12px; border-width: 1.5px; margin-left: 5px;
    border-top-color: var(--text-color-light) !important;
}
body.theme-dark .post-actions .reaction-button .spinner-small { border-top-color: var(--text-color-dark) !important; }
body.theme-dark .post-actions .reaction-button { color: var(--text-color-dark); border-color: var(--border-color-dark); }
.post-actions .reaction-button:hover { background-color: var(--comment-bg-light); }
body.theme-dark .post-actions .reaction-button:hover { background-color: var(--comment-bg-dark); }
.post-actions .reaction-count { font-size: 0.85em; color: #555; }
.post-actions .reaction-count.loading { color: var(--placeholder-text-light); }
body.theme-dark .post-actions .reaction-count { color: #bbb; }
body.theme-dark .post-actions .reaction-count.loading { color: var(--placeholder-text-dark); }

.post-comments h4 { margin-top: 8px; margin-bottom: 8px; font-size: 0.95em; }
.comments-list .comment {
    background-color: var(--comment-bg-light); padding: 6px 8px; border-radius: 15px;
    margin-bottom: 6px; font-size: 0.85em; line-height: 1.4;
    display: flex; align-items: flex-start;
}
body.theme-dark .comments-list .comment { background-color: var(--comment-bg-dark); }
.comment-user-image-small {
    width: 24px; height: 24px; border-radius: 50%; margin-right: 6px;
    object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-color-light);
}
body.theme-dark .comment-user-image-small { border-color: var(--border-color-dark); }
.comment-details { display: flex; flex-direction: column; }
.comments-list .comment-user { font-weight: bold; margin-right: 4px; }
.comments-list .comment-text { word-wrap: break-word; }
.add-comment { display: flex; margin-top: 8px; align-items: center; }
.add-comment .comment-input {
    flex-grow: 1; padding: 6px 8px; border-radius: 15px;
    margin-right: 6px; margin-bottom: 0; font-size: 0.85rem;
}
.add-comment .submit-comment-button {
    background-color: var(--button-secondary-bg-light); color: var(--button-secondary-text-light);
    border: none; padding: 6px 10px; border-radius: 5px;
    cursor: pointer; font-size: 0.85em; width: auto; margin-bottom: 0;
}
body.theme-dark .add-comment .submit-comment-button { background-color: var(--button-secondary-bg-dark); color: var(--button-secondary-text-dark); }
.add-comment .submit-comment-button .spinner {
    width: 12px; height: 12px; border-width: 1.5px; margin-left: 5px;
    border-top-color: var(--button-secondary-text-light);
}
body.theme-dark .add-comment .submit-comment-button .spinner { border-top-color: var(--button-secondary-text-dark); }

.chat-header {
    border-bottom: 1px solid var(--border-color-light); padding-bottom: 10px;
    margin-bottom: 10px; display: flex; align-items: center; padding-right: 40px; /* ADICIONE ESTA LINHA */
    position: relative;
}
body.theme-dark .chat-header { border-bottom-color: var(--border-color-dark); }
#mensagens {
    background-color: transparent; border: none;
    flex-grow: 1; overflow-y: auto; padding: 10px; margin-bottom: 10px;
}
body.theme-dark #mensagens { background-color: transparent; border: none; }
#chat #mensagem-input { margin-bottom: 5px; font-size: 0.9rem; }
#chat #enviar-mensagem-chat-btn {
    background-color: var(--button-secondary-bg-light); color: var(--button-secondary-text-light);
    width: 100%; margin-top: 5px; margin-bottom: 0; font-size: 0.9rem; padding: 0.7em 1em;
}
body.theme-dark #chat #enviar-mensagem-chat-btn { background-color: var(--button-secondary-bg-dark); color: var(--button-secondary-text-dark); }
.chat-message {
    padding: 5px 8px; margin-bottom: 5px; border-radius: 10px;
    max-width: 80%; word-wrap: break-word; font-size: 0.85rem;
}
.chat-message.sent {
    background-color: var(--button-primary-bg-light); color: var(--button-primary-text-light);
    margin-left: auto; text-align: right;
}
body.theme-dark .chat-message.sent { background-color: var(--button-primary-bg-dark); color: var(--button-primary-text-dark); }
.chat-message.received {
    background-color: var(--comment-bg-light); color: var(--text-color-light);
    margin-right: auto; text-align: left;
}
body.theme-dark .chat-message.received { background-color: var(--comment-bg-dark); color: var(--text-color-dark); }
.chat-message .sender { font-weight: bold; font-size: 0.8em; display: block; margin-bottom: 2px; }

#password-hint-bubble {
    display: none; position: absolute; background-color: var(--comment-bg-light);
    color: var(--text-color-light); padding: 10px 15px; border-radius: 10px 10px 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-size: 0.85em;
    opacity: 0; width: max-content; max-width: 90%;
}
body.theme-dark #password-hint-bubble { background-color: var(--comment-bg-dark); color: var(--text-color-dark); }


@keyframes jumpAndSettleAnimation {
    0% { opacity: 0; transform: translateY(30px) scale(0.8); }
    60% { opacity: 1; transform: translateY(-10px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
#password-hint-bubble.animate-popup {
    display: block !important;
    animation: jumpAndSettleAnimation 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    z-index: 1002;
}


#notification-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 90%;
}

.app-notification {
    position: relative;
    background-color: var(--comment-bg-light);
    color: var(--text-color-light);
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    font-size: 0.9em;
    opacity: 0;
    width: auto;
    min-width: 250px;
    max-width: 100%;
    text-align: center;
    border: 1px solid var(--border-color-light);
    margin-bottom: 12px;
}


.app-notification::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--comment-bg-light);
}

body.theme-dark .app-notification {
    background-color: var(--comment-bg-dark);
    color: var(--text-color-dark);
    border-color: var(--border-color-dark);
}

body.theme-dark .app-notification::after {
    border-top-color: var(--comment-bg-dark);
}

.app-notification.animate-popup {
    animation: jumpAndSettleAnimation 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeOutNotificationAnimation {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

.app-notification.animate-hide {
    animation: fadeOutNotificationAnimation 0.5s ease-out forwards;
}

#app-page-top-content-wrapper { width: 100%; }
#featured-content-section {
    background-color: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px; padding: 15px;
    margin: 0 auto 55px auto;
    width: 90%; max-width: 700px; box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
}
body.theme-dark #featured-content-section { background-color: rgba(40, 40, 40, 0.2); border-color: rgba(70, 70, 70, 0.25); }
#featured-content-section h2 {
    font-size: 1.2em; font-weight: bold; margin: 0 0 12px 0;
    text-align: left; color: var(--text-color-light);
}
body.theme-dark #featured-content-section h2 { color: var(--text-color-dark); }
.aspect-ratio-16-9 {
    position: relative; width: 100%; padding-bottom: 56.25%; height: 0;
    overflow: hidden; background-color: var(--input-bg-light);
    border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
body.theme-dark .aspect-ratio-16-9 { background-color: var(--input-bg-dark); }
.aspect-ratio-16-9 img, .aspect-ratio-16-9 video, .aspect-ratio-16-9 iframe,
.aspect-ratio-16-9 > div { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: none; border-radius: 8px; object-fit: cover;
}
.featured-caption-single {
    font-size: 0.9em; color: var(--placeholder-text-light);
    text-align: center; margin-top: 12px; padding: 0 5px;
}
body.theme-dark .featured-caption-single { color: var(--placeholder-text-dark); }
.featured-cta-button {
    display: block; width: auto; min-width: 120px; margin: 0;
    padding: 9px 20px; font-size: 0.95em; font-weight: bold;
    background-color: var(--button-primary-bg-light); color: var(--button-primary-text-light);
    border: none; border-radius: 6px; cursor: pointer; text-align: center;
    transition: opacity 0.2s;
}
body.theme-dark .featured-cta-button { background-color: var(--button-primary-bg-dark); color: var(--button-primary-text-dark); }
.featured-cta-button:hover:not(:disabled) { opacity: 0.88; }

#featured-content-fab {
    display: none; position: fixed;
    bottom: 20px;
    left: 20px;
    width: 56px; height: 56px;
    background-color: var(--button-secondary-bg-light); color: var(--button-secondary-text-light);
    border-radius: 50%; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    font-size: 22px; justify-content: center; align-items: center;
    cursor: pointer; z-index: 1049;
    transition: transform 0.2s ease-out, background-color 0.3s;
}
#featured-content-fab:hover { transform: scale(1.1); }
body.theme-dark #featured-content-fab { background-color: var(--button-secondary-bg-dark); color: var(--button-secondary-text-dark); }

.featured-content-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px); justify-content: center; align-items: center;
    z-index: 2050; padding: 20px; box-sizing: border-box;
    opacity: 0; transition: opacity 0.3s ease-in-out;
}
.featured-content-modal-overlay.active { display: flex; opacity: 1; }
.featured-content-modal-content-wrapper {
    background-color: var(--container-bg-light); padding: 25px; border-radius: 12px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.15); width: 90%; max-width: 750px;
    position: relative; text-align: center; transform: scale(0.95);
    opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.featured-content-modal-overlay.active .featured-content-modal-content-wrapper { transform: scale(1); opacity: 1; }
body.theme-dark .featured-content-modal-content-wrapper { background-color: var(--container-bg-dark); }
.featured-content-modal-content-wrapper h2 {
    font-size: 1.6em; margin-top: 0; margin-bottom: 18px;
    color: var(--text-color-light);
}
body.theme-dark .featured-content-modal-content-wrapper h2 { color: var(--text-color-dark); }
.featured-content-modal-content-wrapper .modal-cta-button { margin: 0; }
.close-featured-content-modal {
    position: absolute; top: 12px; right: 18px; font-size: 30px;
    font-weight: bold; color: var(--placeholder-text-light);
    cursor: pointer; line-height: 1;
}
.close-featured-content-modal:hover { color: var(--text-color-light); }
body.theme-dark .close-featured-content-modal { color: var(--placeholder-text-dark); }
body.theme-dark .close-featured-content-modal:hover { color: var(--text-color-dark); }


body.theme-dark #youtube-audio-toggle-mobile,
body.theme-dark #youtube-audio-toggle-modal {
    color: var(--text-color-dark);
}

@media (min-width: 768px) {
    #app-page-top-content-wrapper { display: none !important; }
    #featured-content-fab { display: flex; }
#app-page {
    padding-top: 120px;
}

    /* Layout de três colunas para a Rede Social */
    #rede-social-page main { flex-direction: row; justify-content: flex-start; align-items: flex-start; padding: 0 15px; }
    #stories { width: 28%; order: 1; height: calc(100vh - 160px); margin-bottom: 0; padding: 15px; border-radius: 8px; }
    #stories h2 { text-align: center; }
    #stories-list { flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; white-space: normal; padding-bottom: 0; }
    .story-item, .add-story-item { flex-direction: row; align-items: center; width: 100%; margin-right: 0; margin-bottom: 10px; text-align: left; }
    .story-item-image-wrapper { width: 40px; height: 40px; margin-right: 8px; margin-bottom: 0; border: 2px solid var(--button-primary-bg-light); padding: 2px; }
    .story-item-image-wrapper::before { display: none; }
    .story-item img { width: 100%; height: 100%; margin: 0; }
    body.theme-dark .story-item-image-wrapper { border-color: var(--button-primary-bg-dark); }
    .story-item .story-username { font-size: 0.85em; max-width: calc(100% - 50px); }
    .add-story-item .story-item-image-wrapper { width: 40px; height: 40px; font-size: 20px; margin-right: 8px; }
    .add-story-item .story-username { font-size: 0.85em; }
    #feed { width: 44%; order: 2; height: calc(100vh - 160px); margin-bottom: 0; }
    #chat { position: static; width: 22%; order: 3; height: calc(100vh - 160px); margin-bottom: 0; border-radius: 8px; box-shadow: none; transition: none; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    body.theme-dark #chat { background-color: rgba(50, 50, 50, 0.15); border: 1px solid rgba(70, 70, 70, 0.2); }
    #chat-fab, #close-chat-popup { display: none !important; }

    /* Layout de duas colunas para a Página de Perfil */
    #user-profile-page main {
        display: flex;
        flex-direction: row;
        align-items: flex-start; /* Alinha os itens no topo */
        gap: 15px; /* Espaço entre as colunas */
        padding: 0 15px;
    }

    #user-profile-page #profile-info-column {
        width: 35%; /* Largura da coluna de informações */
        max-width: 400px; /* Largura máxima para a coluna de perfil */
        order: 1; /* Garante que a coluna de perfil venha primeiro */
        height: auto; /* A altura se ajusta ao conteúdo */
    }

    #user-profile-page #profile-posts-column {
        width: 65%; /* Largura da coluna de posts */
        order: 2; /* Garante que a coluna de posts venha depois */
        height: calc(100vh - 160px); /* Mantém a altura com rolagem para consistência */
    }

    /* Ajustes para o Feed de Vídeos em Desktop: Coluna única centralizada */
    #video-feed-page main { /* Anula flex-direction: row e volta para coluna única centralizada */
        flex-direction: column;
        align-items: center; /* Centraliza a coluna de conteúdo */
        padding: 0px; /* Mantém o padding lateral para alinhamento */
    }
    #video-posts-section { /* Garante que a seção de vídeos ocupe toda a largura disponível no main do video-feed-page */
        width: 100%; /* Ocupa 100% do main do video-feed-page */
        max-width: 600px; /* Limite de largura para o conteúdo do feed */
        order: 1; /* Apenas uma coluna principal */
        height: auto; /* Altura automática, não fixa */
        margin-bottom: 0; /* Remove margem inferior extra */
        padding: 0px; /* Mantém o padding interno */
    }
    #video-posts-section h2 { text-align: center; } /* Centraliza o título do feed de vídeos */
}

@media (min-width: 1024px) {
    /* Ajustes para a Rede Social (três colunas maiores) */
    #stories, #profile-info-column { width: 25%; }
    #feed, #profile-posts-column { width: 50%; }
    #chat    { width: 30%; }

    /* Mantém o Feed de Vídeos como coluna única centralizada também para larguras maiores */
    #video-posts-section {
        max-width: 500px; /* Aumenta um pouco a largura máxima para monitores maiores, se desejar */
    }
}


#mobile-ad-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 99999;
    pointer-events: none;
}

#mobile-ad-container {
    position: relative;
    width: 100%;
    max-width: 728px;
    margin: 10px auto -110px auto;
    text-align: center;
    background-color: var(--container-bg-light);
    border-radius: 8px;
    overflow: hidden;
    padding: 5px;
    box-shadow: 0 px 10px rgba(29, 29, 29, 0.1);
}

body.theme-dark #mobile-ad-container {
    background-color: var(--container-bg-dark);
    border-color: var(--border-color-dark);
}

@media (max-width: 767px) {
    #mobile-ad-overlay {
        display: block;
        pointer-events: auto;
        background-color: rgba(255, 0, 0, 0);
        border: 0px solid rgba(255, 0, 0, 0);
    }

    #mobile-ad-container {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        z-index: auto;

        width: 90%;
        max-width: none;
        height: 250px;
        padding: 0;
        border-radius: 10px;

        margin-top: 0px;
        margin-bottom: -60px;
        margin-left: auto;
        margin-right: auto;

        text-align: center;

        background-color: var(--container-bg-light);
        border: 0px solid var(--border-color-light);
        box-shadow: 0 px 10px rgba(39, 39, 39, 0);
        backdrop-filter: blur(8px);
    }
    
    body.theme-dark #mobile-ad-container {
        background-color: var(--container-bg-dark);
        border-color: var(--border-color-dark);
    }

    #container-c62272358744cf4067f2495e8644a6d8 {
        width: 100%;
        height: 100%;
        margin: 0;
    }
}

@media (min-width: 768px) {
    #mobile-ad-overlay {
        display: none;
    }
    #mobile-ad-container {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        z-index: auto;
        background-color: var(--container-bg-light);
        border: 1px solid var(--border-color-light);
    }
    body.theme-dark #mobile-ad-container {
        background-color: var(--container-bg-dark);
        border-color: var(--border-color-dark);
    }
}

/* --- Profile Analytics Styles --- */
#profile-analytics-container {
    display: none; /* Oculto por padrão, JS exibe para admins */
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    border-top: 1px solid var(--border-color-light);
    background-color: rgba(0,0,0,0.02);
    border-radius: 0 0 8px 8px;
}
body.theme-dark #profile-analytics-container {
    border-top-color: var(--border-color-dark);
    background-color: rgba(255,255,255,0.02);
}

.analytics-main-title {
    font-size: 1.1em;
    text-align: center;
    margin-bottom: 20px;
    color: var(--placeholder-text-light);
    font-weight: bold;
}
body.theme-dark .analytics-main-title {
    color: var(--placeholder-text-dark);
}

.analytics-charts-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.chart-box {
    text-align: center;
    flex: 1;
    min-width: 120px;
}

.chart-box h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.9em;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Doughnut Chart (Engagement) */
.doughnut-chart-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.chart-percentage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-color-light);
}
body.theme-dark .chart-percentage-text {
    color: var(--text-color-dark);
}

/* Battery Chart (Activity) */
.battery-chart-container {
    width: 120px;
    height: 50px;
    margin: 25px auto; /* Margem para alinhar verticalmente com o gráfico de anel */
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery-outline {
    position: relative;
    width: 100%;
    height: 100%;
    border: 3px solid var(--text-color-light);
    border-radius: 8px;
    padding: 3px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.1);
}
body.theme-dark .battery-outline {
    border-color: var(--text-color-dark);
    background-color: rgba(255,255,255,0.1);
}

.battery-outline::after { /* A ponta da bateria */
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 7px;
    height: 20px;
    background-color: var(--text-color-light);
    border-radius: 0 4px 4px 0;
}
body.theme-dark .battery-outline::after {
    background-color: var(--text-color-dark);
}

.battery-level {
    width: 0%; /* Será definido pelo JS */
    height: 100%;
    background: linear-gradient(90deg, #d84400 0%, #ffb937 100%);
    border-radius: 3px;
    transition: width 0.5s ease-in-out;
}
body.theme-dark .battery-level {
     background: linear-gradient(90deg, #1f00ac 0%, #0084ff 100%);
}

.battery-text {
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.user-card {
  display: flex;
  align-items: center;
  background-color: var(--container-bg-light);
  border: 1px solid var(--border-color-light);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  gap: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
body.theme-dark .user-card {
  background-color: var(--container-bg-dark);
  border-color: var(--border-color-dark);
}
.user-card-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-color-light);
}
body.theme-dark .user-card-image {
  border-color: var(--border-color-dark);
}
.user-card-info p {
  margin: 2px 0;
  font-size: 0.9em;
}
/* --- Estilos para os Gráficos na Lista de Usuários --- */

/* Ajusta o card de usuário para usar flexbox e organizar o conteúdo */
.user-card {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.user-card-main-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Container para os dois gráficos, lado a lado */
.user-card-charts-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--border-color-light);
  padding-top: 15px;
  margin-top: 10px;
}
body.theme-dark .user-card-charts-container {
  border-top-color: var(--border-color-dark);
}

/* Caixa individual para cada gráfico */
.user-card-chart-box {
  text-align: center;
  flex: 1;
}

.user-card-chart-box h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 0.8em;
  font-weight: normal;
  text-transform: uppercase;
}

/* Tamanho menor para o gráfico de anel */
.doughnut-chart-container-small {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto;
}

/* Versões menores para o gráfico de bateria */
.battery-chart-container-small {
  width: 90px;
  height: 38px;
  margin: 16px auto; /* 16px para alinhar verticalmente com o de anel */
}

.battery-outline-small {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid var(--text-color-light);
  border-radius: 6px;
  padding: 2px;
  box-sizing: border-box;
}
body.theme-dark .battery-outline-small {
  border-color: var(--text-color-dark);
}

.battery-outline-small::after { /* Ponta da bateria */
  content: '';
  position: absolute;
  top: 50%;
  right: -7px;
  transform: translateY(-50%);
  width: 5px;
  height: 14px;
  background-color: var(--text-color-light);
  border-radius: 0 3px 3px 0;
}
body.theme-dark .battery-outline-small::after {
  background-color: var(--text-color-dark);
}

.battery-level-small {
  width: 0%; /* Definido pelo JS */
  height: 100%;
  background: linear-gradient(90deg, #d86a00 0%, #FE7D01 100%);
  border-radius: 3px;
  transition: width 0.5s ease-in-out;
}
body.theme-dark .battery-level-small {
    background: linear-gradient(90deg, #5cb85c 0%, #84e184 100%);
}

/* Estilo do texto de porcentagem para os gráficos menores */
.chart-percentage-text-small {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9em;
  font-weight: bold;
}
.battery-text-small {
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
/* --- Estilos para o Link de Usuário no Card de Admin --- */

.user-card-username-link {
  color: var(--link-color-light);
  text-decoration: none;
  cursor: pointer;
  transition: text-decoration 0.2s ease-in-out;
}

.user-card-username-link:hover {
  text-decoration: underline;
}

body.theme-dark .user-card-username-link {
  color: var(--link-color-dark);
}

/* --- Estilo para o link "Esqueceu a senha?" --- */

.login-container p.forgot-password-link {
  margin-top: 15px;
  margin-bottom: 0;
  text-align: center;
  font-size: 0.9em;
}

.login-container p.forgot-password-link a {
  color: var(--link-color-light);
  text-decoration: none;
  cursor: pointer;
}

.login-container p.forgot-password-link a:hover {
  text-decoration: underline;
}

body.theme-dark .login-container p.forgot-password-link a {
  color: var(--link-color-dark);
}
/* --- Estilos Corrigidos para Ícones (Com Clique Funcionando) --- */

/* Container que segura os ícones de upload */
.create-post-media-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

/* Estilo principal para os botões que agora serão ícones */
.create-post-media-controls .button-like-input {
  background-color: var(--comment-bg-light);
  border: 1px solid var(--border-color-light);
  color: var(--text-color-light);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease;

  /* MUDANÇA PRINCIPAL: Esconde o texto "Imagem" e "Vídeo" zerando o tamanho da fonte */
  font-size: 0;
}

/* Define o tamanho do ícone, que foi zerado no elemento pai (o botão) */
.create-post-media-controls .button-like-input i {
  margin: 0;
  font-size: 16px; /* Define um tamanho de fonte explícito apenas para o ícone */
}

/* Efeito ao passar o mouse */
.create-post-media-controls .button-like-input:hover {
  background-color: var(--button-primary-bg-light);
  color: var(--button-primary-text-light);
  border-color: var(--button-primary-bg-light);
}

/* Estilos para o tema escuro */
body.theme-dark .create-post-media-controls .button-like-input {
  background-color: var(--comment-bg-dark);
  border-color: var(--border-color-dark);
  color: var(--text-color-dark);
}

body.theme-dark .create-post-media-controls .button-like-input:hover {
  background-color: var(--button-primary-bg-dark);
  color: var(--button-primary-text-dark);
  border-color: var(--button-primary-bg-dark);
}

/* Garante que os ícones não se estiquem */
.create-post-media-controls .button-like-input {
    flex-grow: 0;
}

/* Estilos para o container do nome de usuário e botão de compartilhar */
.profile-username-container {
  display: flex;
  justify-content: center; /* Centraliza o conjunto */
  align-items: center;     /* Alinha verticalmente o nome e o ícone */
  gap: 12px;               /* Espaço entre o nome e o ícone */
  margin-bottom: 5px;      /* Ajusta a margem que antes estava no h2 */
}

/* Remove a margem do H2 para que o container controle o espaçamento */
#profile-info-username {
    margin: 0;
}

/* Estilo para os botões de ícone no perfil */
#share-profile-button,
#private-message-button {
  background: none;
  border: none;
  color: var(--text-color-light);
  font-size: 1.2em; /* Tamanho do ícone */
  cursor: pointer;
  padding: 5px;
  margin: 0;
  width: auto;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

body.theme-dark #share-profile-button,
body.theme-dark #private-message-button {
  color: var(--text-color-dark);
}

#share-profile-button:hover,
#private-message-button:hover {
  transform: scale(1.15);
  color: var(--button-primary-bg-light);
}

body.theme-dark #share-profile-button:hover,
body.theme-dark #private-message-button:hover {
    color: var(--button-primary-bg-dark);
}

/* Estilos para o novo menu inferior de usuário deslogado */
.bottom-nav.logged-out-style {
  justify-content: space-evenly; /* Espaçar os botões igualmente */
  padding: 10px;
  gap: 10px;
}

.logged-out-nav-button {
  width: 45%; /* Cada botão ocupa quase metade do espaço */
  padding: 10px;
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  border: 1px solid transparent;
}

/* Estilo para o botão de Login */
.logged-out-nav-button {
    background-color: var(--button-primary-bg-light);
    color: var(--button-primary-text-light);
}
body.theme-dark .logged-out-nav-button {
    background-color: var(--button-primary-bg-dark);
}

/* Estilo para o botão de Cadastrar (fundo diferente) */
.logged-out-nav-button.register {
    background-color: var(--input-bg-light);
    color: var(--text-color-light);
    border-color: var(--border-color-light);
}
body.theme-dark .logged-out-nav-button.register {
    background-color: var(--input-bg-dark);
    color: var(--text-color-dark);
    border-color: var(--border-color-dark);
}

/* Estilos para a navegação e progresso dos stories */
.story-progress-container {
    display: flex;
    gap: 4px;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    height: 3px;
}

.story-progress-bar {
    flex-grow: 1;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
}

.story-progress-bar.active {
    background-color: #ffffff;
}

.story-content-wrapper {
    position: relative;
}

.story-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.story-nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.story-nav-arrow.left {
    left: 5px;
}

.story-nav-arrow.right {
    right: 5px;
}

/* --- Steam Page / Games --- */

.games-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espaço entre os cards */
    padding: 20px 10px;
    width: 100%;
    /* NEW: Ajuste a escala de visualização aqui */
    transform: scale(0.85); /* Diminui para 85% do tamanho original. Ajuste este valor (ex: 0.9, 0.75) */
    transform-origin: top center; /* Garante que a escala se origine do topo e centro */
    box-sizing: border-box; /* Inclui padding e border no cálculo do width/height */
    margin-bottom: -5%; /* Ajusta a margem inferior para compensar o encolhimento */
    padding-top: 0; /* Remove padding top para subir o container */
}

.game-card {
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 280px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.theme-dark .game-card {
    background-color: rgba(40, 40, 40, 0.3);
    border: 1px solid rgba(70, 70, 70, 0.35);
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.game-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.game-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.3em;
    color: var(--text-color-light);
}

body.theme-dark .game-card h3 {
    color: var(--text-color-dark);
}

.game-card p {
    font-size: 0.9em;
    color: var(--placeholder-text-light);
    line-height: 1.5;
    margin: 0 0 20px 0;
    flex-grow: 1; /* Faz o parágrafo ocupar o espaço, empurrando o botão para baixo */
}

body.theme-dark .game-card p {
    color: var(--placeholder-text-dark);
}

.game-card .play-game-button {
    width: 100%;
    padding: 12px;
    margin: 0; /* Reseta a margem */
    background-color: var(--button-secondary-bg-light);
    color: var(--button-secondary-text-light);
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

body.theme-dark .game-card .play-game-button {
    background-color: var(--button-secondary-bg-dark);
    color: var(--button-secondary-text-dark);
}

.game-card .play-game-button:hover {
    opacity: 0.85;
}

/* --- Admin Steam Management Page --- */
#existing-games-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaço entre os itens da lista */
}

.admin-game-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: var(--comment-bg-light);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
}

body.theme-dark .admin-game-item {
    background-color: var(--comment-bg-dark);
    border-color: var(--border-color-dark);
}

.admin-game-item-image {
    width: 80px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0; /* Impede que a imagem seja esmagada */
}

.admin-game-item-info {
    flex-grow: 1; /* Faz com que esta div ocupe o espaço restante */
    text-align: left;
}

.admin-game-item-info h4 {
    margin: 0 0 5px 0;
    font-size: 1em;
    color: var(--text-color-light);
}

body.theme-dark .admin-game-item-info h4 {
     color: var(--text-color-dark);
}

.admin-game-item-info p {
    margin: 0;
    font-size: 0.8em;
    color: var(--placeholder-text-light);
    word-break: break-all; /* Quebra a URL se for muito longa */
}

body.theme-dark .admin-game-item-info p {
    color: var(--placeholder-text-dark);
}

.admin-game-item-actions {
    display: flex;
    gap: 8px;
}

.admin-game-item-actions button {
    padding: 5px 10px;
    font-size: 0.8em;
    width: auto;
    margin: 0;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
}

.edit-game-btn {
    background-color: #007bff; /* Azul */
}
body.theme-dark .edit-game-btn {
    background-color: #0056b3;
}

.delete-game-btn {
    background-color: #dc3545; /* Vermelho */
}
body.theme-dark .delete-game-btn {
    background-color: #a71d2a;
}

/* --- Estilos para o Modal de Jogo --- */

/* Reutilizamos o estilo de overlay já existente, mas adicionamos um seletor para o botão de fechar */
.close-game-viewer {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 30px;
    font-weight: bold;
    color: var(--placeholder-text-light);
    cursor: pointer;
    line-height: 1;
    z-index: 10; /* Garante que fique sobre o título */
}

.close-game-viewer:hover {
    color: var(--text-color-light);
}

body.theme-dark .close-game-viewer {
    color: var(--placeholder-text-dark);
}

body.theme-dark .close-game-viewer:hover {
    color: var(--text-color-dark);
}

/* Container para o iframe para garantir o preenchimento correto */
.game-iframe-container {
    width: 100%;
    /* 80% da altura da janela, deixando espaço para o título e o botão de fechar */
    height: 80vh; 
    margin-top: 15px;
    background-color: #000000; /* Fundo preto para o caso de o jogo demorar a carregar */
    border-radius: 8px;
    overflow: hidden; /* Garante que o iframe não ultrapasse as bordas arredondadas */
}

#game-iframe {
    width: 100%;
    height: 100%;
    border: none; /* Remove qualquer borda do iframe */
}

/* --- Cores Customizadas dos Botões de Ação --- */

/* Cor preta para os botões Steam e Admin */
#steam-button,
#admin-button {
    background-color: #000000; /* Um tom de preto/cinza escuro */
    color: #ffffff; /* Garante que o texto fique branco e legível */
}

/* Cor vermelha para o botão Vídeos (COM CORREÇÃO PARA MODO ESCURO) */
#video-feed-button {
    background-color: #dc3545; /* Vermelho para o tema claro */
    color: #ffffff;
}

body.theme-dark #video-feed-button {
    background-color: #ff0019; /* Garante o vermelho também para o tema escuro */
}

/* Efeito Hover para os botões customizados (opcional, mas recomendado) */
#steam-button:hover,
#admin-button:hover,
#video-feed-button:hover {
    opacity: 0.85; /* Suaviza a cor ao passar o mouse */
}

/* --- Estilo para Ícones nos Botões de Ação --- */

.action-buttons button i {
    margin-right: 8px; /* Cria um espaço entre o ícone e o texto */
    font-size: 0.9em;  /* Deixa o ícone um pouco menor que o texto */
}



/* Transforma o container principal em um layout flexível (lado a lado) */
.header-content-wrapper {
    margin-top: -15px;
    display: flex;
    justify-content: center; /* Centraliza o conjunto (foto + detalhes) */
    align-items: center;     /* Alinha a foto com a coluna de detalhes verticalmente */
    gap: 15px;               /* Espaço entre a foto e a coluna de detalhes */
}

/* Estilos da foto de perfil (mantidos do passo anterior) */
#header-profile-pic {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 0px solid var(--container-bg-light);
    flex-shrink: 0; /* Impede que a imagem encolha */
}

body.theme-dark #header-profile-pic {
    border-color: var(--container-bg-dark);
}

/* Novo container para a coluna de detalhes */
.header-details-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens da coluna à esquerda */
    text-align: left;
}

#username-display {
    font-size: 1.em;
    font-weight: bold;
}

.coins-row p {
    margin: 4px 0; /* Ajusta o espaçamento da linha de moedas */
    font-size: 1em;
}

.icon-row {
    display: flex;
    justify-content: flex-start; /* Alinha os ícones à esquerda */
    align-items: center;
    gap: 30px; /* Espaço entre os ícones */
    margin-top: 5px;
}

.header-icon {
    font-size: 0.9em;
    color: var(--text-color-light);
    cursor: pointer;
    transition: transform 0.2s ease;
}

body.theme-dark .header-icon {
    color: var(--text-color-dark);
}

.header-icon:hover {
    transform: scale(1.15);
}
/* style.css */

/* Estilo para os botões no header do chat */
#chat-header-buttons button {
    background: none;
    border: none;
    color: var(--text-color-light);
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
    margin: 0;
    width: auto;
    line-height: 1;
}
body.theme-dark #chat-header-buttons button {
    color: var(--text-color-dark);
}

/* Estilo para o item na lista da caixa de entrada */
.inbox-item {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: background-color 0.2s;
}
.inbox-item:hover {
    background-color: var(--comment-bg-light);
}
body.theme-dark .inbox-item:hover {
    background-color: var(--comment-bg-dark);
}
.inbox-item img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}
.inbox-item-details {
    overflow: hidden;
}
.inbox-item-details h4 {
    margin: 0;
    font-size: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-item-details p {
    margin: 2px 0 0 0;
    font-size: 0.85em;
    color: var(--placeholder-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-dark .inbox-item-details p {
    color: var(--placeholder-text-dark);
}

/* Classe para esconder a área de input */
#chat-input-area.hidden {
    display: none;
}
#enviar-mensagem-privada-btn {
    background-color: #007bff; /* Um tom de azul padrão */
    color: white;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 0.9rem;
    padding: 0.7em 1em;
    border: none;
    border-radius: 5px;
}

#enviar-mensagem-privada-btn:hover {
    opacity: 0.85;
}

/* ====================================================== */
/* ========= ESTILOS PARA O CARROSSEL DE VÍDEOS ========= */
/* ====================================================== */

/* O container principal, com estilo similar ao de "Criar Publicação" */
.youtube-carousel-container {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(221, 221, 221, 0.3);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Estilo do título dentro do container */
.youtube-carousel-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    text-align: left;
}

/* O wrapper que segura os vídeos e permite a rolagem */
.youtube-carousel-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding-bottom: 10px;
    cursor: grab;

    /* ===== LINHA DE CORREÇÃO ADICIONADA AQUI ===== */
    align-items: center; /* Impede que os itens estiquem para a altura do item ativo */

    /* Esconde a barra de rolagem para um visual mais limpo */
    scrollbar-width: none; /* Para Firefox */
    -ms-overflow-style: none;  /* Para IE e Edge */
}

.youtube-carousel-content::-webkit-scrollbar {
    display: none; /* Para Chrome, Safari, e Opera */
}

/* Cada item individual do carrossel (que conterá o vídeo) */
.youtube-carousel-item {
    /* MODIFICAÇÃO: Ajuste da largura para caberem 4 vídeos 9:16 */
    /* Uma largura menor para acomodar o formato alto e estreito. */
    flex: 0 0 115px; /* Não encolhe, não estica, base de 115px de largura */

    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

    /* MODIFICAÇÃO: Alterado para o formato vertical 9:16 */
    aspect-ratio: 9 / 16; /* Mantém a proporção de vídeo vertical */

    background-color: #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Estilo para o iframe do YouTube */
.youtube-carousel-item iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Adaptação para o tema escuro */
body.theme-dark .youtube-carousel-container {
    background-color: rgba(30, 30, 30, 0.3);
    border: 1px solid rgba(51, 51, 51, 0.4);
}

/* Adicionar ao final da seção de estilos do carrossel */

/* Efeito de destaque para o vídeo centralizado/ativo */
.youtube-carousel-item.is-active {
    transform: scale(1.05); /* Aumenta um pouco o tamanho */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--button-primary-bg-light);
}

body.theme-dark .youtube-carousel-item.is-active {
    border-color: var(--button-primary-bg-dark);
}

/* Transição suave para o efeito */
.youtube-carousel-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Adicionar junto com os outros estilos do carrossel */

/* Estilo para o placeholder antes do vídeo carregar */
.youtube-carousel-item.placeholder {
    background-color: var(--comment-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.theme-dark .youtube-carousel-item.placeholder {
    background-color: var(--comment-bg-dark);
}

/* Opcional: Adiciona um ícone de "play" ao placeholder */
.youtube-carousel-item.placeholder::before {
    content: '\f144'; /* Código do ícone de play do Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 32px;
    color: var(--placeholder-text-light);
    opacity: 0.5;
}

body.theme-dark .youtube-carousel-item.placeholder::before {
    color: var(--placeholder-text-dark);
}



.carousel-header {
display: flex;
justify-content: space-between;
align-items: center; 
margin-bottom: 10px;
}

/* Estilos para o botão de ação pequeno */
.small-action-button {
    /* Cor de fundo laranja, usando a variável principal do app */
    background-image: linear-gradient(to right, #ff0000, #ff69b4); 
 color: white; 
 border: none;
 padding: 5px 10px;
 border-radius: 5px;
 font-size: 0.8em;
 font-weight: bold;
 cursor: pointer;
 transition: opacity 0.2s ease;
 width: 70px; / 
}
.small-action-button:hover {
    /* Efeito de hover simples para botões sólidos */
    opacity: 0.9;
}

body.theme-dark .small-action-button {
    /* Versão escura da cor laranja principal */
    background-color: var(--button-primary-bg-dark);
    color: var(--button-primary-text-dark);
}

/* --- Estilos para o Ícone de Som do Carrossel --- */

/* Ajusta o wrapper do item para permitir posicionamento absoluto do ícone */
.youtube-carousel-item {
    position: relative;
}

.volume-icon-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0; /* Começa invisível */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Não pode ser clicado quando invisível */
}

/* Mostra o ícone apenas no item ativo */
.youtube-carousel-item.is-active .volume-icon-overlay {
    opacity: 1;
    pointer-events: auto; /* Pode ser clicado quando visível */
}
/* Remove a margem superior padrão do título do Feed */
#feed h2 {
    margin-top: 0;
}
/* ====================================================== */
/* ===== ESTILIZAÇÃO DA BARRA DE ROLAGEM (SCROLLBAR) ==== */
/* ====================================================== */

/* Aplica o estilo apenas à barra de rolagem da seção #feed */
#feed::-webkit-scrollbar {
    width: 8px; /* Largura da barra de rolagem */
}

/* Estiliza o "trilho" (a parte fixa da barra) */
#feed::-webkit-scrollbar-track {
    /* Usa uma cor de fundo sutil do seu tema */
    background: var(--comment-bg-light);
    border-radius: 4px;
}

/* Estiliza o "polegar" (a parte móvel que você arrasta) */
#feed::-webkit-scrollbar-thumb {
    /* Usa uma cor de destaque do seu tema */
    background-color: var(--placeholder-text-light);
    border-radius: 4px;
}

/* Efeito ao passar o mouse sobre a barra de rolagem */
#feed::-webkit-scrollbar-thumb:hover {
    background-color: var(--link-color-light);
}

/* Adaptação para o TEMA ESCURO */
body.theme-dark #feed::-webkit-scrollbar-track {
    background: var(--comment-bg-dark);
}

body.theme-dark #feed::-webkit-scrollbar-thumb {
    background-color: var(--placeholder-text-dark);
}

body.theme-dark #feed::-webkit-scrollbar-thumb:hover {
    background-color: var(--link-color-dark);
}

/* Estilos para o Wrapper do Ícone e o Ponto de Notificação */
.icon-wrapper {
    position: relative;
    display: inline-block;
}

.notification-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 7px;
    height: 7px;
    background-color: #ff0000; /* Vermelho vivo para a notificação */
    border: px solid var(--container-bg-light); /* Borda na cor do fundo para destacar */
    border-radius: 50%;
}

body.theme-dark .notification-dot {
    border-color: var(--container-bg-dark);
}

/* Estilo para o container da foto de perfil na lista de chats */
.inbox-item .profile-pic-wrapper {
    position: relative;
    /* Adicionado para garantir o alinhamento correto da imagem e da bolinha */
    display: flex; 
    align-items: center;
    justify-content: center;
}

/* Posiciona a bolinha de notificação dentro do wrapper da foto */
.inbox-item .profile-pic-wrapper .notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    /* O resto dos estilos da bolinha (tamanho, cor) já foram definidos antes */
}
/* ============================================= */
/* ===== ESTILOS DO POP-UP DE NOTIFICAÇÕES ===== */
/* ============================================= */

/* O fundo que cobre a tela e aplica o desfoque */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2100; /* Z-index alto para ficar sobre tudo */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Animação de fade-in */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Classe 'active' para mostrar o overlay */
.notification-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* O contêiner do pop-up */
.notification-popup {
    background-color: var(--container-bg-light);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 450px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    /* Animação de "surgir" */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.notification-overlay.active .notification-popup {
    transform: scale(1);
}

body.theme-dark .notification-popup {
    background-color: var(--container-bg-dark);
}

/* Cabeçalho do pop-up */
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color-light);
}

body.theme-dark .notification-header {
    border-bottom-color: var(--border-color-dark);
}

.notification-header h2 {
    margin: 0;
    font-size: 1.2em;
}

.close-notification-popup {
    font-size: 28px;
    font-weight: bold;
    color: var(--placeholder-text-light);
    cursor: pointer;
    line-height: 1;
}

body.theme-dark .close-notification-popup {
    color: var(--placeholder-text-dark);
}

/* Lista de notificações */
.notification-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 20px;
}

.notification-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color-light);
}

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

body.theme-dark .notification-item {
    border-bottom-color: var(--border-color-dark);
}

.notification-item p {
    margin: 0 0 5px 0;
    font-size: 0.9em;
}

.notification-item small {
    font-size: 0.75em;
    color: var(--placeholder-text-light);
}

body.theme-dark .notification-item small {
    color: var(--placeholder-text-dark);
}
/* ... (previous CSS rules) ... */


#admin-push-notification-page {
    max-width: 900px; /* Mantém a largura máxima do contêiner principal */
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px; /* Ajuste conforme necessário */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos no tamanho */

    /* NEW: Aplicar escala de visualização ao contêiner principal da Notificação Push */
    transform: scale(0.9); /* Diminui para 90% do tamanho original. Ajuste este valor. */
    transform-origin: top center; /* A escala se origina do topo e centro */
    
    /* NEW: Ajustar margem inferior para compensar o encolhimento, se necessário */
    margin-bottom: -5%; /* Exemplo: -5% para puxar o conteúdo abaixo para cima */
    
    /* NEW: Permite rolagem se o conteúdo escalado for maior que a viewport */
    overflow-y: auto; 
    min-height: calc(100vh - 70px); /* Garante altura mínima para considerar a barra inferior */
}

/* NEW: Style for the H1 title within the push notification page */
#admin-push-notification-page h1 {
    font-size: 1.0em; /* Decrease the font size of the title */
    margin-top: 0.5em; /* Reduce top margin */
    margin-bottom: 0.5em; /* Reduce bottom margin */
    text-align: center; /* Ensure title is centered */
}

#admin-push-notification-page iframe {
    width: 100%;
    height: 700px; /* Keep height as previously set or adjust if needed */
    display: block;
    margin: 0 auto; /* Ensure iframe is centered */
    /* NEW: Adjust margin-top to pull the iframe up closer to the title */
    margin-top: 10px; /* Reduce space between title and iframe */
}

/* ... (rest of your CSS, including media queries) ... */

/* Styles for the "Gerenciar Steam" page */
#admin-steam-management-page {
    /* Main container styling for Admin Steam Page */
    background-color: var(--container-bg-light); /* Inherit from other admin pages */
    border: 1px solid var(--border-color-light); /* Inherit from other admin pages */
    border-radius: 10px; /* Inherit from other admin pages */
    padding: 1.5em; /* Match general padding of admin forms */
    box-sizing: border-box; /* Crucial for padding/border not affecting total width/height */

    width: 90%; /* Start with a mobile-friendly width */
    max-width: 900px; /* Max width for larger screens */
    margin: 20px auto 70px auto; /* Center and add top/bottom margin. 70px for bottom nav. */

    display: flex; /* Use flexbox to stack internal sections */
    flex-direction: column; /* Stack vertically */
    align-items: center; /* Center items horizontally within this container */

    /* REMOVIDO: overflow-y: auto e height/min-height daqui */
    /* Deixaremos o corpo da página lidar com a rolagem geral se o conteúdo total for muito longo,
       ou a lista de jogos terá sua própria rolagem se for configurada para isso. */
    height: auto; /* Permite que a altura se ajuste ao conteúdo */
    overflow-y: visible; /* Garante que o contêiner principal não tenha sua própria rolagem */
}

body.theme-dark #admin-steam-management-page {
    background-color: var(--container-bg-dark);
    border-color: var(--border-color-dark);
}

/* Ensure sub-containers within admin-steam-management-page also center and adjust width */
#admin-steam-management-page .create-post-container {
    width: 100%; /* Make it fill the admin-steam-management-page */
    max-width: 500px; /* Keep its original max-width if desired, but remove the inline style */
    margin: 0 0 2em 0; /* Adjust internal margins for spacing */
}

#admin-steam-management-page #existing-games-list {
    width: 100%;
    max-width: 500px;
    margin-top: 1em; /* Adiciona margem superior para subir a lista */
    margin-bottom: 2em;
    max-height: 800px;
    overflow-y: auto;
    padding-right: 5px;
    box-sizing: border-box;
}

/* Styles for the "Voltar para Admin" button at the bottom of the page */
#admin-steam-management-page button[onclick="showAdminPage()"] {
    margin-top: 1em; /* Adjust spacing as needed */
    width: auto; /* Allow button to size to content */
    padding: 10px 20px; /* Standard button padding */
}

/* Apply desktop-specific overrides for two-column layouts on larger screens */
@media (min-width: 768px) {
    /* The main admin pages should typically be flex column with centered content */
    .admin-container,
    .admin-content-management-page,
    #admin-steam-management-page, /* Applies to Steam management page as well */
    #admin-push-notification-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Keep max-width for desktop, but allow margin auto for centering */
        margin-left: auto;
        margin-right: auto;
    }

    /* Override the height and overflow for admin-steam-management-page on desktop */
    #admin-steam-management-page {
        height: auto; /* Let content define height on desktop if max-height is used on sub-elements */
        overflow-y: visible; /* Let the body scroll if total content is long */
    }
}

@media (max-width: 767px) {
    #admin-push-notification-page,
    #admin-steam-management-page {
        max-width: 90%;
        height: auto; /* Allow height to adjust to content */
        overflow-y: visible; /* Revert to default for better mobile scroll behavior */
        margin-bottom: 70px; /* Account for bottom navigation */
    }
    #admin-push-notification-page iframe {
        height: 500px;
    }
}

/* Add or adjust scrollbar styles if desired for #existing-games-list */
#admin-steam-management-page #existing-games-list::-webkit-scrollbar {
    width: 8px;
}

#admin-steam-management-page #existing-games-list::-webkit-scrollbar-track {
    background: var(--comment-bg-light);
    border-radius: 4px;
}

#admin-steam-management-page #existing-games-list::-webkit-scrollbar-thumb {
    background-color: var(--placeholder-text-light);
    border-radius: 4px;
}

#admin-steam-management-page #existing-games-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--link-color-light);
}

body.theme-dark #admin-steam-management-page #existing-games-list::-webkit-scrollbar-track {
    background: var(--comment-bg-dark);
}

body.theme-dark #admin-steam-management-page #existing-games-list::-webkit-scrollbar-thumb {
    background-color: var(--placeholder-text-dark);
}

body.theme-dark #admin-steam-management-page #existing-games-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--link-color-dark);
}

/* --- Estilos para o Wrapper do Input de Chat --- */
.chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.chat-input-wrapper input {
    flex-grow: 1; /* Faz o input de texto ocupar o espaço disponível */
    margin-bottom: 0 !important; /* Remove margem para alinhar com o botão */
}

/* --- Estilos para o Botão de Gravação de Áudio --- */
.chat-icon-button {
    flex-shrink: 0; /* Impede que o botão seja esmagado */
    background-color: transparent;
    border: 1px solid var(--border-color-light);
    color: var(--text-color-light);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
    margin: 0;
}

body.theme-dark .chat-icon-button {
    border-color: var(--border-color-dark);
    color: var(--text-color-dark);
}

.chat-icon-button:hover {
    background-color: var(--comment-bg-light);
}

body.theme-dark .chat-icon-button:hover {
    background-color: var(--comment-bg-dark);
}

/* --- Estilos para o Indicador de Gravação --- */
#recording-status {
    display: flex; /* O JS vai alterar para 'flex' quando estiver gravando */
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    width: 100%;
    justify-content: center;
}

.recording-dot {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    animation: pulseAnimation 1.5s infinite;
}

#recording-timer {
    font-size: 0.9em;
    color: var(--placeholder-text-light);
    font-family: 'poppins'; /* Deixa o timer com aparência de digital */
}

body.theme-dark #recording-timer {
    color: var(--placeholder-text-dark);
}

@keyframes pulseAnimation {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* --- Estilos para o Player de Áudio Customizado no Chat --- */
.chat-audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    max-width: 250px;
}

.chat-audio-player .play-pause-btn {
    background: #333;
    color: var(--button-secondary-text-light);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

body.theme-dark .chat-audio-player .play-pause-btn {
    background: #ff0000;
    color: var(--button-secondary-text-dark);
}

.chat-audio-player .progress-bar-container {
    flex-grow: 1;
    background-color: var(--comment-bg-dark);
    border-radius: 5px;
    height: 6px;
    cursor: pointer;
    overflow: hidden;
}

body.theme-dark .chat-audio-player .progress-bar-container {
    background-color: var(--comment-bg-light);
}

.chat-audio-player .progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--button-secondary-bg-light);
    border-radius: 5px;
}

body.theme-dark .chat-audio-player .progress-bar {
    background-color: var(--button-secondary-bg-dark);
}

.chat-audio-player .time-display {
    font-size: 0.75em;
    color: var(--placeholder-text-light);
    font-family: 'poppins';
    min-width: 35px; /* Evita que o layout pule */
}

body.theme-dark .chat-audio-player .time-display {
    color:#ffffff;
}

/* ====================================================== */
/* ===== DEFINIÇÕES DE ANIMAÇÃO (KEYFRAMES) ===== */
/* ====================================================== */

/* Animação para os spinners (círculos de carregamento) */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Animação de fade in/out para a tela de splash */
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Animação de flutuação para a moeda virtual */
@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Animação de "pulo" para notificações e dicas */
@keyframes jumpAndSettleAnimation {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animação de fade out para as notificações */
@keyframes fadeOutNotificationAnimation {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}

/* Animação de pulso para o indicador de gravação */
@keyframes pulseAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* Adicione no final do seu arquivo style.css */

/* --- Estilos para o Cabeçalho do Destaque com Ícone de Busca --- */
.featured-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px; /* Mantém o espaçamento original do h2 */
}

.featured-content-header h2 {
    margin: 0; /* Remove a margem do h2, pois o wrapper agora a controla */
}

#user-search-icon {
    font-size: 1.3em;
    color: var(--text-color-light);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

#user-search-icon:hover {
    transform: scale(1.1);
    color: var(--button-primary-bg-light);
}

body.theme-dark #user-search-icon {
    color: var(--text-color-dark);
}

body.theme-dark #user-search-icon:hover {
    color: var(--button-primary-bg-dark);
}

/* --- Estilos para o Overlay e Popup de Busca de Usuário --- */
/* A classe .notification-overlay já existe e serve perfeitamente para o fundo */

.user-search-popup {
    background-color: var(--container-bg-light);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 500px;
    max-height: 80vh; /* Altura máxima para não ocupar a tela toda */
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

body.theme-dark .user-search-popup {
    background-color: var(--container-bg-dark);
}

/* Ativa a animação de "surgir" */
#user-search-overlay.active .user-search-popup {
    transform: scale(1);
}

.user-search-input-container {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color-light);
}

body.theme-dark .user-search-input-container {
    border-bottom-color: var(--border-color-dark);
}

#user-search-input {
    width: 100%;
    margin: 0;
    font-size: 1rem;
}

/* A classe .notification-list já existe e pode ser usada para a lista de resultados */
#user-search-results {
    flex-grow: 1; /* Faz a lista ocupar o espaço restante */
    overflow-y: auto; /* Adiciona scroll se a lista for longa */
}

/* Estilo para cada item na lista de resultados */
.user-search-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: background-color 0.2s;
}

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

.user-search-item:hover {
    background-color: var(--comment-bg-light);
}

body.theme-dark .user-search-item {
    border-bottom-color: var(--border-color-dark);
}

body.theme-dark .user-search-item:hover {
    background-color: var(--comment-bg-dark);
}

.user-search-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.user-search-item-info strong {
    font-size: 0.9em;
}

.user-search-item-info small {
    display: block;
    font-size: 0.8em;
    color: var(--placeholder-text-light);
}

body.theme-dark .user-search-item-info small {
    color: var(--placeholder-text-dark);
}

/* ============================================= */
/* ===== ESTILOS PARA O CARROSSEL DE ANÚNCIO ===== */
/* ============================================= */

/* Altera o container principal para esconder o conteúdo que transborda */
#mobile-ad-container {
    overflow: hidden;
    position: relative; /* Necessário para posicionar as bolinhas */
}

/* O wrapper que contém os slides e se move */
#ad-carousel-wrapper {
    display: flex;
    width: 200%; /* Largura total de 2 slides (100% cada) */
    transition: transform 2.5s ease-in-out;
}

/* Cada slide individual */
.ad-carousel-slide {
    width: 50%; /* Cada slide ocupa metade do wrapper (ou 100% do container) */
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px; /* Altura fixa do container do anúncio */
    padding: 10px;
}

/* Estilo para o slide que contém a postagem */
.ad-carousel-slide.post-slide {
    background-color: var(--body-bg-light);
}

body.theme-dark .ad-carousel-slide.post-slide {
    background-color: var(--body-bg-dark);
}

/* Estilo para a postagem DENTRO do carrossel para que ela caiba */
.carousel-post-item {
    transform: scale(0.75); /* Reduz o tamanho do post para 75% */
    transform-origin: center center;
    width: 133.33%; /* Compensa a redução de escala (100 / 0.75) */
    height: 133.33%;
    /* Remove a sombra e o fundo para se misturar melhor */
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Garante que o conteúdo dentro do post escalado não transborde */
.carousel-post-item .post-content,
.carousel-post-item .post-header {
    max-width: 100%;
}


/* Estilo para as bolinhas de navegação */
#ad-carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.ad-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.ad-dot.active {
    background-color: var(--button-primary-bg-light);
}

body.theme-dark .ad-dot.active {
    background-color: var(--button-primary-bg-dark);
}

/* Altera a cor do botão no Destaque Principal para preto */
#featured-cta-mobile,
#featured-cta-modal {
    background-color: #000000; /* Cor de fundo preta */
    color: #ffffff;           /* Cor do texto branca para bom contraste */
}

/* ============================================= */
/* ===== ESCUDO ANTI-CLIQUE PARA O ANÚNCIO ===== */
/* ============================================= */

/* Prepara o slide do anúncio para conter o escudo posicionado */
.ad-carousel-slide.ad-slide {
    position: relative;
}

/* Estilo do escudo anti-clique */
.ad-click-shield {
    display: none; /* Por padrão, o escudo é invisível (em telas de desktop) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Totalmente transparente */
    z-index: 10; /* Garante que fique sobre o conteúdo do anúncio dentro do slide */
}

/* Ativa o escudo apenas em telas de celular (o mesmo ponto de quebra do seu CSS antigo) */
@media (max-width: 767px) {
    .ad-click-shield {
        display: block;
    }
}

/* Estilos para o container de mensagens */
.mensagens {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaçamento entre as mensagens */
    padding: 10px;
}

/* Estilo base para cada balão de mensagem */
.mensagem {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 70%;
}

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

.mensagem-conteudo {
    background-color: #f1f0f0; /* Cor de fundo para mensagens de outros */
    border-radius: 18px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
}

.mensagem-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    gap: 15px;
}

.mensagem-usuario {
    font-weight: bold;
    font-size: 0.9em;
}

.mensagem-timestamp {
    font-size: 0.75em;
    color: #888;
}

.mensagem-texto {
    margin: 0;
    word-wrap: break-word; /* Garante que textos longos quebrem a linha */
}

/* Estilo para o player de áudio */
.chat-audio-player {
    height: 40px;
    max-width: 250px;
}

/* --- Estilo para as SUAS mensagens --- */
.minha-mensagem {
    align-self: flex-end; /* Alinha o balão inteiro à direita */
    flex-direction: row-reverse; /* Inverte a ordem (conteúdo, depois avatar) */
}

.minha-mensagem .mensagem-conteudo {
    background-color: #dcf8c6; /* Cor de fundo para as suas mensagens */
}

.minha-mensagem .mensagem-header {
    flex-direction: row-reverse; /* Inverte a ordem do nome e horário */
}

/* Estilos para o Player de Vídeo em Tela Cheia (Overlay) */

.video-viewer-overlay {
    display: none; /* Começa oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro semi-transparente */
    backdrop-filter: blur(8px); /* Efeito de desfoque no fundo */
    -webkit-backdrop-filter: blur(8px);
    z-index: 3000; /* Garante que fique sobre todo o conteúdo */
    justify-content: center;
    align-items: center;
    /* Animação suave de entrada */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.video-viewer-overlay.active {
    display: flex; /* Torna visível */
    opacity: 1;
}

#video-viewer-container {
    width: 100%;
    max-width: 420px; /* Largura similar a um celular */
    height: 85vh; /* Ocupa 85% da altura da tela */
    max-height: 800px;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

#video-viewer-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.close-video-viewer-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 35px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 3001; /* Garante que fique sobre o vídeo */
    text-shadow: 0 0 5px black;
}

#video-viewer-container.animate-swipe-indication {
    animation: swipeIndication 0.8s ease-in-out;
}

@keyframes swipeIndication {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px); /* Pequeno movimento para cima */
    }
    100% {
        transform: translateY(0);
    }
}

/* Estilos ATUALIZADOS para o Player de Vídeo com Efeito de Rolagem */

.video-viewer-overlay {
    /* ... (as propriedades do overlay continuam as mesmas) ... */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.video-viewer-overlay.active {
    display: flex;
    opacity: 1;
}

/* O container agora é uma "máscara" que esconde o que está fora */
#video-viewer-container {
    width: 100%;
    max-width: 420px;
    height: 85vh;
    max-height: 800px;
    border-radius: 12px;
    position: relative;
    overflow: hidden; /* ESSENCIAL: Esconde os vídeos de cima e de baixo */
    cursor: grab; /* Indica que pode ser arrastado */
}

/* O "rolo" com os três vídeos empilhados verticalmente */
#video-reel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300%; /* 3x a altura do container */
    /* Posiciona o vídeo do meio (o atual) no centro */
    transform: translateY(-33.333%); 
}

/* Cada slide individual dentro do rolo */
.video-slide {
    width: 100%;
    height: 33.333%; /* Ocupa 1/3 da altura do rolo */
    background-color: #000;
}

.video-slide iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.close-video-viewer-btn {
    /* ... (o estilo do botão de fechar continua o mesmo) ... */
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 35px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 3001;
    text-shadow: 0 0 5px black;
}

/* Adicione este novo bloco ao seu CSS */

.video-event-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Garante que fique sobre o iframe do YouTube */
    background-color: transparent; /* Totalmente invisível */
}

/* Adicione este novo bloco ao seu CSS */

.expand-video-hotspot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 10px 10px 10px; /* Aumentei um pouco o padding superior para dar mais espaço ao gradiente */
    
    /* MODIFICAÇÃO PRINCIPAL: Gradiente mais intenso e concentrado na base */
    background: linear-gradient(to top, rgb(0, 0, 0) 70%, transparent 100%);

    color: #ffffff;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    z-index: 15;
    opacity: 0.95;
    transition: opacity 0.5s ease-in-out;

    /* SOMBRA DE TEXTO MAIS FORTE para complementar o fundo escuro */
    text-shadow: 0px 0px 40px black, 0px 0px 40px black;
}

.expand-video-hotspot:hover {
    opacity: 1;
}

.expand-video-hotspot i {
    margin-left: 1px;
    vertical-align: middle;
}

/* Adicionar ao final do style.css */
#typing-indicator {
    padding: 0 10px 5px 10px;
    height: 20px; /* Altura fixa para não "pular" o layout */
    font-size: 0.8em;
    color: var(--placeholder-text-light);
    font-style: italic;
    text-align: left;
    transition: opacity 0.3s ease;
}

body.theme-dark #typing-indicator {
    color: var(--placeholder-text-dark);
}

/* Adicionar ao final do style.css */

/* Estilo para o ícone de resposta no balão de mensagem */
.reply-icon {
    font-size: 0.8em;
    color: var(--placeholder-text-light);
    cursor: pointer;
    margin-left: 10px;
    opacity: 0; /* Começa invisível */
    transition: opacity 0.2s, color 0.2s;
}
.chat-message:hover .reply-icon {
    opacity: 2; /* Aparece ao passar o mouse */
}
.reply-icon:hover {
    color: var(--link-color-light);
}
body.theme-dark .reply-icon {
    color: var(--placeholder-text-dark);
}
body.theme-dark .reply-icon:hover {
    color: var(--link-color-dark);
}

/* Estilo para a barra de pré-visualização da resposta */
#reply-preview-bar {
    display: none; /* Começa escondida */
    padding: 8px 10px;
    margin: 0 10px 5px 10px;
    background-color: var(--comment-bg-light);
    border-left: 3px solid var(--button-primary-bg-light);
    border-radius: 4px;
    font-size: 0.8em;
    position: relative;
}
body.theme-dark #reply-preview-bar {
    background-color: var(--comment-bg-dark);
    border-left-color: var(--button-primary-bg-dark);
}
#reply-preview-bar strong {
    display: block;
    color: var(--button-primary-bg-light);
}
body.theme-dark #reply-preview-bar strong {
    color: var(--button-primary-bg-dark);
}
#reply-preview-bar p {
    margin: 2px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--placeholder-text-light);
}
body.theme-dark #reply-preview-bar p {
    color: var(--placeholder-text-dark);
}
#cancel-reply-btn {
    position: absolute;
    top: -30px; /* Ajusta a distância do topo */
    right: -70px; /* Mantém a distância da direita */
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: white; /* Cor branca para o "X" */
    opacity: 0.7; /* Um pouco de transparência */
    transition: opacity 0.2s;
}

#cancel-reply-btn:hover {
    opacity: 1;
    color: red; /* Cor vermelha ao passar o mouse */
}

body.theme-dark #cancel-reply-btn {
    color: white; /* Garante branco no tema escuro também */
}

body.theme-dark #cancel-reply-btn:hover {
    color: red;
}

/* Estilo para o contexto da resposta DENTRO de um balão de mensagem */
.reply-context {
    background-color: rgb(255, 229, 157);
    padding: 5px 8px;
    border-radius: 8px;
    margin-bottom: 5px;
    border-left: 2px solid var(--button-primary-bg-light);
    font-size: 0.9em;
}
body.theme-dark .reply-context {
    background-color: rgba(0, 0, 0, 0.452);
    border-left-color: var(--button-primary-bg-dark);
}
.reply-context strong {
    color: var(--button-primary-bg-light);
}
body.theme-dark .reply-context strong {
    color: var(--button-primary-bg-dark);
}
.reply-context p {
    margin: 0;
    opacity: 0.8;
}

/* Adicionar ao final do style.css ou com outros estilos de 'body' */
body.body-no-scroll {
    overflow: hidden;
    position: fixed; /* Ajuda a prevenir 'pulos' no layout em alguns navegadores */
    width: 100%;
    height: 100%;
}

/* Adicionar ao final do style.css */
#start-audio-call-btn {
    display: none; /* JS irá mostrar apenas no chat privado */
}

.audio-call-overlay {
    display: none; /* Começa escondido */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 4000;
    justify-content: center;
    align-items: center;
}

.audio-call-container {
    text-align: center;
    color: white;
}

#call-partner-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid white;
    object-fit: cover;
    margin-bottom: 20px;
}

#call-status-text {
    font-size: 1.2em;
    margin-top: 10px;
    animation: pulseStatus 2s infinite;
}

@keyframes pulseStatus {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.call-controls {
    display: flex; /* Para alinhar os itens horizontalmente */
    justify-content: center; /* Para centralizar os botões */
    gap: 50px; /* Espaço entre os botões */
    margin-top: 20px; /* Espaçamento da parte superior, ajuste conforme necessário */
}

.call-btn {
    /* Seus estilos existentes para os botões (padding, border-radius, etc.) */
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    border: none;
    cursor: pointer;
    color: white;
    transition: background-color 0.2s ease;
    margin-right: 10px;
}
.call-btn.answer { background-color: #28a745; }
.call-btn.decline { background-color: #dc3545; }

/* Estilo para o botão de viva-voz */
.call-btn.speaker {
    background-color: #555; /* Um cinza neutro */
    transition: background-color 0.2s ease;
}

/* Estilo para quando o viva-voz estiver ATIVO */
.call-btn.speaker.active {
    background-color: #007bff; /* Azul para indicar que está ligado */
}

.call-btn i {
    font-size: 1.5em;
}

/* Estilos para os visualizadores de espectro de áudio */
.audio-visualizer-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    color: #ccc;
}
.audio-visualizer-container canvas {
    border: 1px solid #555;
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
}
.audio-visualizer-container small {
    display: block;
    margin-top: 5px;
    font-size: 0.8em;
}
/* Adicionar ao final do arquivo */
#call-timer-display {
    font-size: 1.2em;
    margin: 5px 0 15px 0; /* Espaçamento acima e abaixo */
    color: #f0f0f0;
    font-family: 'Poppins', monospace; /* Usa uma fonte monoespaçada como fallback */
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    letter-spacing: 2px; /* Espaçamento entre os caracteres para um visual de relógio */
}

#call-reconnecting-indicator {
    position: absolute;
    bottom: 80px; /* Posiciona um pouco acima dos controles */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* Estilo específico para o botão de mute/unmute (opcional) */
#toggle-mute-btn.muted i {
    color: #ccc; /* Cor cinza quando mutado */
}

/* ====================================================== */
/* ===== ESTILOS DEFINITIVOS PARA CHAMADA MINIMIZADA ==== */
/* ====================================================== */

.minimized-call-overlay {
    position: fixed;
    top: 70px;
    left: 10px;
    background-color: rgba(40, 40, 40, 0.85); /* Fundo escuro padrão para AMBOS os temas */
    color: white;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 5px;
    z-index: 2500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: grab;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Regra explícita para o tema escuro para garantir que NADA seja alterado */
body.theme-dark .minimized-call-overlay {
    background-color: rgba(40, 40, 40, 0.85); /* Exatamente a mesma cor de fundo */
    border-color: rgba(255, 255, 255, 0.1);    /* Exatamente a mesma cor de borda */
}

#minimized-call-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.minimized-call-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.minimized-call-button {
    background: transparent; /* Garante que os botões não tenham fundo no modo claro */
    border: none;
    outline: none;
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    transition: opacity 0.2s ease;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* --- INÍCIO DA CORREÇÃO --- */
/* Regra explícita para forçar o fundo transparente também no modo escuro */
body.theme-dark .minimized-call-button {
    background: transparent !important; /* Força o fundo a ser transparente, ignorando o tema */
}
/* --- FIM DA CORREÇÃO --- */


.minimized-call-button:hover {
    opacity: 0.7;
}

.minimized-call-button.hangup {
    color: #ff5252;
}


/* Adicione este bloco ao final do seu style.css */

/* Estilo para o botão de silenciar microfone (tela cheia) */
#toggle-mute-btn {
    background-color: #007bff; /* Cor de fundo azul */
}

/* Estilo para quando o botão de silenciar estiver ATIVO (mutado) */
#toggle-mute-btn.muted {
    background-color: #6c757d; /* Cor de fundo cinza quando mutado */
}

/* Estilo para o botão de minimizar (opcional, para consistência) */
#minimize-call-btn {
    background-color: #555; /* Cinza neutro, igual ao viva-voz */
}
/* Adicione este bloco ao final do seu style.css */


#toggle-mute-btn,
#minimize-call-btn {
width: 50px;      /* Define uma nova largura (era 50px) */
height: 50px;     /* Define uma nova altura (era 50px) */
font-size: 1.1em; /* Ajusta o tamanho do ícone interno (era 1.2em) \*/
}

/* Adicione este bloco ao final do seu style.css */

#active-call-controls {
gap: 20px;
}

/* Adicione este bloco de código ao final do seu arquivo style.css */

/* ============================================= */
/* ===== ESTILOS PARA O NOVO SUPORTE EM MODAL ==== */
/* ============================================= */

/* Estilo para o novo ícone de suporte (?) no cabeçalho */
#support-icon {
    width: 28px;
    height: 28px;
    background-color: black;
    color: #fec301; /* Laranja */
    border-radius: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
}





#support-icon:hover {
    transform: scale(1.1);
}

/* Estilo para o container que vai abrigar o chat do N8N dentro do modal */
#n8n-chat-fullscreen-container {
    width: 100%;
    height: 80vh; /* Ocupa 65% da altura da tela */
    margin-top: 0px;
    border-radius: 8px;
    overflow: hidden; /* Garante que o chat não ultrapasse as bordas */
}
/* Adicione este bloco de código ao final do seu arquivo style.css */

/* Garante que o cabeçalho da rede social possa conter um item posicionado */
#rede-social-page > header {
    position: relative;
}

/* Estilo para o novo ícone de suporte (reutilizável) */
.header-support-icon {
    width: 28px;
    height: 28px;
    background-color: rgb(255, 145, 0);
    color: #ffffff; /* Laranja */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s ease;
    
    /* Posicionamento no canto superior direito do cabeçalho */
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.header-support-icon:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Adicione este bloco ao final do seu style.css */

/* Altera a cor do ícone de aviso (triângulo de exclamação) */
#warnings-icon {
    color: #c45f00; /* Cor amarela/âmbar para destaque */
}

/* Opcional: Efeito de cor ao passar o mouse sobre o ícone */
#warnings-icon:hover {
    color: #ff6600; /* Um tom mais escuro para o efeito hover */
}

/* Adicione este bloco de código ao final do seu arquivo style.css */

/* ============================================= */
/* ===== ESTILOS PARA O CONSOLE DE ADMIN     ===== */
/* ============================================= */

/* Estilo do botão flutuante (FAB) */
#admin-console-fab {
    display: none; /* Começa escondido, JS mostra para admins */
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #000000; /* Cinza escuro */
    color: #ffffff; /* Verde-limão, estilo terminal */
    border-radius: 50%;
    border: 2px solid #ff9900;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.705);
    font-size: 20px;
    
    align-items: center;
    justify-content: center;
    cursor: grab; /* Indica que pode ser arrastado */
    z-index: 4999;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: scale(1);
}

#admin-console-fab:hover {
    transform: scale(1.1);
}

/* Container principal do console */
#admin-console-container {
    display: none; /* Começa escondido */
    position: fixed;
    top: 50px;
    left: 50px;
    width: 80vw;
    max-width: 600px;
    height: 50vh;
    background-color: rgba(0, 0, 0, 0.849);
    color: #e0e0e0;
    border: 1px solid #000000;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgb(255, 123, 0);
    z-index: 5000;
    
    flex-direction: column;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Cabeçalho do console (área para arrastar) */
.admin-console-header {
    background-color: #000000;
    padding: 20px 12px;
    cursor: grab; /* Indica que pode ser arrastado */
    
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ffffff;
    border-radius: 8px 8px 0 0;
}

.admin-console-header span {
    font-weight: bold;
    font-family: monospace;
}

#close-admin-console {
    background: none;
    border: none;
    color: rgb(255, 115, 0);
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

/* Área de saída dos logs */
#admin-console-output {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    font-family: monospace;
    font-size: 0.85em;
}

/* Estilos para os diferentes tipos de log */
.log-message {
    padding: 8px 0;
    border-bottom: 1px solid #ffbb00;
    white-space: pre-wrap; /* Mantém a formatação de objetos */
    word-break: break-all;
}
.log-message.log-type-warn {
    color: #ffc107; /* Amarelo para avisos */
}
.log-message.log-type-error {
    color: #ff0019; /* Vermelho para erros */
}
.log-message.log-type-info {
    color: #17a2b8; /* Azul para informações */
}
/* EM: style.css (no final do arquivo) */

/* Reseta o cursor na área de conteúdo do console para o padrão */
#admin-console-output {
    cursor: auto;
    overscroll-behavior: contain;
}