* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #18191a;
  color: #e4e6eb;
}

/* TOPO */
.topbar {
  background: #242526;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 40%;
  padding: 8px;
  border-radius: 20px;
  border: none;
  background: #3a3b3c;
  color: white;
}

/* LAYOUT */
.main {
  display: flex;
  max-width: 1100px;
  margin: 20px auto;
  gap: 20px;
}

/* ESQUERDA */
.sidebar-left {
  width: 25%;
  background: #242526;
  padding: 15px;
  border-radius: 10px;
}

.suggestion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 15px;
  gap: 5px;
  cursor: pointer;
  outline: none;
}

.suggestion img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
}

/* FEED */
.feed {
  width: 75%;
}

.create-post {
  background: #242526;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.create-post textarea {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  padding: 10px;
  border: none;
  background: #3a3b3c;
  color: white;
}

.create-post button {
  background: #1877f2;
  color: white;
  border: none;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* POSTS */
.post {
  background: #242526;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

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

.post-header img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}




/* BOTÕES */
.post-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

.action-btn {
  border: none;
  background: none;
  font-weight: bold;
  cursor: pointer;
  color: #e4e6eb;
}

.like.liked {
  color: #1877f2;
}

/* COMMENTS */
.comment-box input {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: #3a3b3c;
  color: white;
}

.comment-item {
  background: #3a3b3c;
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 5px;
}
/* ===== PÁGINA DE PERFIL ===== */

.perfil-container {
  max-width: 900px;
  margin: 20px auto;
  background: #242526;
  border-radius: 12px;
  overflow: hidden;
  padding-bottom: 20px;
}

.perfil-topo {
  text-align: center;
  padding: 30px 20px 20px;
}

.perfil-foto {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #1877f2;
  background: #3a3b3c;
}

#perfilNome {
  font-size: 24px;
  margin-top: 10px;
  color: #e4e6eb;
}

#perfilBio {
  font-size: 14px;
  color: #b0b3b8;
  margin-top: 5px;
}

.perfil-container hr {
  border: none;
  height: 1px;
  background-color: #3a3b3c;
  margin: 10px 0 20px;
}

.perfil-container h3 {
  padding-left: 20px;
  font-size: 18px;
  color: #e4e6eb;
}

/* ===== POSTS NO PERFIL ===== */

#perfilPosts {
  padding: 0 20px;
}

#perfilPosts .post {
  background: #242526;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #3a3b3c;
}

#perfilPosts .post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#perfilPosts .post-header img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

#perfilPosts .post p {
  font-size: 15px;
  line-height: 1

}
/* ===== AJUSTE FINAL - LAYOUT ESTILO FACEBOOK ===== */

/* Container principal mais centralizado */
.main {
  max-width: 1100px !important;
  margin: 15px auto !important;
  gap: 20px !important;
  align-items: flex-start;
}

/* Coluna esquerda (sugestões) */
.sidebar-left {
  width: 260px !important;
  background-color: #242526 !important;
  border-radius: 10px !important;
  padding: 15px !important;
  position: sticky;
  top: 80px;
  height: fit-content;
}

/* Feed central */
.feed {
  flex: 1 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

/* Caixa de criação de post */
.create-post {
  width: 100%;
  background-color: #242526 !important;
  border-radius: 10px !important;
  padding: 15px !important;
}

/* Campo de texto */
.create-post textarea {
  background-color: #3a3b3c !important;
  color: white !important;
  border: none !important;
}

/* Botão publicar */
.create-post button {
  float: right;
  margin-top: 10px;
}

/* Postagens */
.post {
  background-color: #242526 !important;
  border-radius: 10px !important;
  padding: 15px !important;
  max-width: 100%;
}

/* Cabeçalho do post */
.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Imagem do post */


/* Ações dos posts */
.post-actions {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid #3a3b3c;
}

/* Comentários */
.comment-box input {
  background: #3a3b3c !important;
  color: white !important;
  border: 1px solid #555 !important;
}

/* Topo fixo estilo Facebook */
.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Avatar e nome no topo */
.top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Links dos perfis na lateral */
.suggestion a,
.suggestion span {
  color: #4599ff !important;
  text-align: center;
  font-size: 14px;
}

/* Hover dos perfis */
.suggestion:hover {
  background-color: #3a3b3c !important;
  border-radius: 10px;
  padding: 4px;
}

/* Scroll mais bonito */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: #3a3b3c;
  border-radius: 10px;
}

/* Mobile */
@media (max-width: 900px) {
  .sidebar-left {
    display: none;

  }

  .feed {
    max-width: 100% !important;
  }
}
/* ===== AJUSTE DO CAMPO DE ARQUIVO + BOTÃO PUBLICAR ===== */

.create-post input[type="file"] {
  width: 100%;
  background-color: #1877f2;
  color: white;
  padding: 10px;
  border-radius: 10px;
  border: none;
  margin-top: 10px;
  cursor: pointer;
  font-size: 14px;
}

/* Remove estilo feio do navegador */
.create-post input[type="file"]::file-selector-button {
  background-color: transparent;
  color: transparent;
  border: none;
  padding: 0;
}

/* Botão Publicar corrigido */
#create-post button,
#create-post #publishBtn,
.create-post button {
  width: 100%;
  background-color: #1877f2;
  padding: 12px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 15px;
  margin-top: 10px;
}

/* Corrige alinhamento da box */
.create-post {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ===== NOME DO PERFIL (página perfil.html) ===== */
#profileName {
  font-size: 28px;              /* deixa maior */
  font-weight: 700;             /* mais destaque */
  color: #e4e6eb;               /* branco suave (modo escuro) */
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* subtítulo/bio do perfil */
.profile-info,
#profileBio {
  font-size: 14px;
  color: #b0b3b8;
}

/* se estiver usando h2 no nome em algum lugar */
.profile-card h2 {
  font-size: 26px;
  font-weight: bold;
  color: #e4e6eb;
}
/* ===== INPUT FILE (Escolher arquivo) – estilo Facebook ===== */
.create-post input[type="file"] {
  width: auto;                 /* não ocupa a linha inteira */
  color: white;                /* texto branco */
  background-color: #3a3b3c;   /* fundo escuro */
  border: 1px solid #555;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 10px;
  float: left;                 /* joga pra esquerda da box */
}

/* botão real do input file */
.create-post input[type="file"]::-webkit-file-upload-button {
  background-color: #1877f2;   /* azul estilo Facebook */
  color: white;                /* texto branco */
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

/* remove o efeito feio padrão ao focar */
.create-post input[type="file"]:focus {
  outline: none;
}

/* garante que o botão Publicar não fique desalinhado */
#create-post button,
.create-post #publishBtn {
  clear: both;
  display: block;
  margin-top: 15px;
}
/* ===== AJUSTE DA IMAGEM DO POST ===== */
.post-image {
  width: 100%;           /* ocupa toda a largura do post */
  height: auto;          /* mantém a proporção */
  max-height: none;      /* remove qualquer corte */
  object-fit: contain;   /* mostra a imagem inteira */
  border-radius: 10px;
  margin-top: 10px;
}

.screen {
  position: fixed;
  inset: 0;
  background: #18191a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.box {
  background: #242526;
  padding: 30px;
  border-radius: 12px
}
#nameScreen, #welcomeScreen {
  position: fixed;
  inset: 0;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#welcomeScreen { display: none; }

.box {
  background: #222;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
}

input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}

button {
  padding: 10px 25px;
  background: #1877f2;
  color: white;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
/* Tela de pergunta animada */

#nameScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(24, 25, 26, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.name-box {
  background: #242526;
  padding: 30px 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  animation: fadeIn 0.6s ease;
}

.name-box input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #3a3b3c;
  color: white;
  margin-top: 10px;
}

.name-box button {
  margin-top: 15px;
  background: #1877f2;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
}

/* animação */

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
/* Tela Seja Bem-vindo */

#welcomeScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(24, 25, 26, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}

.welcome-box {
  background: #242526;
  padding: 30px 40px;
  border-radius: 20px;
  text-align: center;
  color: white;
  animation: fadeIn 0.6s ease;
}

#nameScreen, #welcomeScreen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#welcomeScreen {
  display: none;
}

.name-box, .welcome-box {
  background: #1f1f1f;
  padding: 35px;
  border-radius: 16px;
  text-align: center;
  width: 320px;
  max-width: 90%;
}

.name-box input {
  width: 100%;
  padding: 12px;
  margin: 12px 0;
  border-radius: 8px;
  border: none;
}

.name-box button {
  width: 100%;
  padding: 12px;
  background: #1877f2;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}