/* Reset de cores (Posting / AMOLED) — sem quebrar layout */

/* Fundo AMOLED */
html,
body,
main,
.main-content,
.stick-feed,
.stick-shell,
.app-layout,
#postsFeed,
#profilePostsFeed,
.profile-page,
.profile-page-surface {
  background-color: #0f1419 !important;
  background: #0f1419 !important;
  background-image: none !important;
}

/* Texto */
body,
.post-card,
.post-caption,
.comment-text,
.profile-name,
.profile-bio,
.video-username-line {
  color: #ffffff !important;
}
.post-user-at,
.post-handle,
.username-tag,
.video-handle-line,
.timestamp,
.comment-time,
.post-time-inline {
  color: #71767b !important;
}

/* Botões / destaques */
.btn-post,
.plus-icon,
.progress-bar-fill,
.bottom-nav-fab-inner,
.stick-publish-btn,
.feed-composer-publish,
.btn-primary,
.btn-connect:not(.following):not(.connected),
.btn-follow:not(.following),
.profile-publish-btn,
.btn-profile-action-split[data-open-upload-post],
.btn-profile-action-split#profileConnectBtn {
  background-color: #3D56F1 !important;
  background: #3D56F1 !important;
  color: #ffffff !important;
  border-color: #3D56F1 !important;
}

/* Barra inferior */
.bottom-nav {
  background-color: #0f1419 !important;
  border-top: 1px solid #2f3336 !important;
}
.bottom-nav-item,
.bottom-nav-item .icon,
.bottom-nav-item .icon i {
  color: #ffffff !important;
}
.bottom-nav-item.active,
.bottom-nav-item.active .icon,
.bottom-nav-item.active .icon i,
.bottom-nav-item.active > span:not(.icon):not(.bottom-nav-fab-inner) {
  color: #3D56F1 !important;
}

/* Posts: sem “caixa cinza”, só divisória */
.post-card,
#postsFeed .post-card,
#profilePostsFeed .post-card,
#profilePostsFeed .profile-post-card {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #2f3336 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Sugestões (cards de seguir/conectar): garantir contraste e avatares visíveis */
.suggested-section,
#profileUserSuggestionsWrap,
.profile-user-suggestions-wrap,
.feed-suggestion-list,
.explore-user-suggestions {
  background: #16181c !important;
  border-color: #2f3336 !important;
}

.suggested-user,
.feed-suggested-user {
  background: transparent !important;
}

.suggested-user-name,
.suggested-user-name a,
.feed-suggested-user .suggested-user-name,
.feed-suggested-user .suggested-user-name a {
  color: #ffffff !important;
}

.suggested-user-sub,
.feed-suggested-user .suggested-user-sub {
  color: #71767b !important;
}

.suggested-user img,
.feed-suggested-avatar-link img,
.avatar,
.profile-suggest-avatar-link img,
.profile-suggest-avatar {
  background: transparent !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
}

.btn-connect-sm,
.btn-follow-sm {
  color: #3D56F1 !important;
  border-color: #3D56F1 !important;
  background: transparent !important;
}

/* Cards do carrossel de sugestões no perfil: botão é "filled" azul, texto branco */
.btn-profile-suggest-follow {
  background: #3D56F1 !important;
  border-color: #3D56F1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 700 !important;
}
.btn-profile-suggest-follow.following,
.btn-profile-suggest-follow.connected {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #2f3336 !important;
}

/* === Mobile: paleta “Poosting” + mesma base do login (Vercel) — só max-width 768px === */
/* Não afeta a tela de login (body.login-page tem estilo próprio com maior prioridade em login.html) */
@media (max-width: 768px) {
  html:not(:has(body.login-page)),
  body:not(.login-page),
  .app-layout,
  .stick-shell,
  .stick-grid,
  .stick-feed,
  .stick-widget,
  main.main-content,
  main.main-content.profile-page-surface,
  #postsFeed,
  #profilePostsFeed,
  .profile-page,
  .profile-page-layout,
  .profile-content {
    background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(0, 149, 246, 0.16), transparent 52%),
      radial-gradient(ellipse 100% 70% at 100% 100%, rgba(0, 120, 212, 0.12), transparent 48%),
      #0e1117 !important;
  }

  .mobile-header {
    background: #1a1f2b !important; /* Poosting: header navy */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .bottom-nav {
    background: #1a1f2b !important; /* Poosting: bottom bar navy */
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  /* Ícones/textos: inativo cinza, ativo azul */
  .bottom-nav-item,
  .bottom-nav-item .icon,
  .bottom-nav-item .icon i,
  .mobile-header,
  .mobile-header i,
  .mobile-actions button,
  .mobile-actions a {
    color: #a0aec0 !important;
  }

  .bottom-nav-item.active,
  .bottom-nav-item.active .icon,
  .bottom-nav-item.active .icon i,
  .bottom-nav-item.active > span:not(.icon):not(.bottom-nav-fab-inner) {
    color: #3D56F1 !important;
  }

  /* FAB (botão +): azul “Poosting/login” com borda sutil */
  .bottom-nav-fab-inner {
    background: linear-gradient(135deg, #3D56F1, #2F46D6) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 24px rgba(61, 86, 241, 0.22) !important;
  }

  /* Botões do header sem “quadrado” visível */
  .mobile-actions button,
  .mobile-actions a {
    background: transparent !important;
    border: none !important;
  }

  /* Cartões: navy-slate (Poosting) */
  body.stick-page-feed .stick-stories,
  body.stick-page-feed .stick-composer-card,
  .suggested-section,
  #profileUserSuggestionsWrap,
  .profile-user-suggestions-wrap,
  .feed-suggestion-list,
  .explore-user-suggestions {
    background: #1c222e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Perfil (mobile): o profile tem overrides em style.css com fundo #000.
     Aqui “pinta” o topo/área do perfil para bater com Poosting/login. */
  body.stick-page-profile main.main-content.profile-page-surface,
  body.stick-page-profile .main-content.profile-page-surface {
    background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(61, 86, 241, 0.16), transparent 52%),
      radial-gradient(ellipse 100% 70% at 100% 100%, rgba(47, 70, 214, 0.12), transparent 48%),
      #0e1117 !important;
  }

  body.stick-page-profile .profile-header,
  body.stick-page-profile .profile-header.clean-profile,
  body.stick-page-profile .clean-profile,
  body.stick-page-profile .profile-head-rn {
    background: #1c222e !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  body.stick-page-profile #profileTabs,
  body.stick-page-profile .profile-tabs {
    background: rgba(28, 34, 46, 0.88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  body.stick-page-profile .profile-actions-clean,
  body.stick-page-profile .profile-actions-row,
  body.stick-page-profile .profile-actions-clean .btn-profile-action-split.btn-help-stick {
    background: transparent !important;
  }

  /* Composer: inputs como no login */
  body.stick-page-feed .stick-composer-input,
  body.stick-page-feed .stick-composer-chip:not(.btn-help-stick) {
    background: #111426 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #a0aec0 !important;
  }

  /* Destaque verde (Poosting) no chip secundário */
  body.stick-page-feed .stick-composer-chip.btn-help-stick {
    background: #1a1f2b !important;
    border: 1px solid rgba(72, 187, 120, 0.4) !important;
    color: #ffffff !important;
  }

  /* Avatar: halo suave (referência Poosting) */
  body.stick-page-feed .stick-composer-avatar {
    border-color: rgba(99, 102, 241, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2), 0 8px 24px rgba(59, 130, 246, 0.18) !important;
  }

  /* Ações principais: gradiente igual ao login */
  .btn-post,
  .plus-icon,
  .progress-bar-fill,
  .bottom-nav-fab-inner,
  .stick-publish-btn,
  .feed-composer-publish,
  .btn-primary,
  .btn-connect:not(.following):not(.connected),
  .btn-follow:not(.following),
  .profile-publish-btn,
  .btn-profile-action-split[data-open-upload-post],
  .btn-profile-action-split#profileConnectBtn {
    background: linear-gradient(135deg, #3D56F1, #2F46D6) !important;
    border-color: transparent !important;
  }

  .btn-connect-sm,
  .btn-follow-sm {
    color: #3D56F1 !important;
    border-color: rgba(61, 86, 241, 0.62) !important;
    background: transparent !important;
  }

  .btn-profile-suggest-follow {
    background: linear-gradient(135deg, #3D56F1, #2F46D6) !important;
    border-color: transparent !important;
  }

  .bottom-nav-item.active,
  .bottom-nav-item.active .icon,
  .bottom-nav-item.active .icon i,
  .bottom-nav-item.active > span:not(.icon):not(.bottom-nav-fab-inner) {
    color: #3D56F1 !important;
  }

  /* Stories: anel gradiente (Poosting) */
  body.stick-page-feed .stick-stories__row .active-member-ring {
    background: linear-gradient(135deg, #6366f1, #ec4899, #fbbf24) !important;
  }

  .post-user-at,
  .post-handle,
  .username-tag,
  .timestamp,
  .post-time-inline,
  .suggested-user-sub,
  .feed-suggested-user .suggested-user-sub {
    color: #a0aec0 !important;
  }

  .mobile-logo-icon {
    background: linear-gradient(135deg, rgba(61, 86, 241, 0.32), rgba(47, 70, 214, 0.26)) !important;
    border: 1px solid rgba(61, 86, 241, 0.45) !important;
  }
}