/* Base da pagina: fonte, fundo e espacamento externo */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 24px;
  line-height: 1.4;
  background: #f5f7fb;
  color: #1f2937;
}

/* Container central da aplicacao */
.app-shell {
  width: min(920px, 100%);
  margin: 0 auto;
}

/* Header com cara de aplicacao (hierarquia + separacao visual) */
.app-header {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.app-kicker {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.app-header h1 {
  margin: 0;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
}

/* Estrutura principal em secoes */
.app-main {
  display: grid;
  gap: 16px;
}

/* Blocos de busca e resultados com cartao branco */
.search-section,
.results-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

/* Titulo de secao */
.search-section h2,
.results-section h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

/* Input e botao na mesma linha, com espacamento */
.search-form {
  display: flex;
  gap: 10px;
}

/* Input com visual moderno */
.search-form input {
  flex: 1;
  padding: 11px 13px;
  border: 1px solid #cfd6df;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Destaque de foco para acessibilidade e feedback visual */
.search-form input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* Botao com estilo proprio */
.search-form button {
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  font-weight: 600;
  color: #ffffff;
  background: #2563eb;
  cursor: pointer;
}

.search-form button:hover {
  background: #1d4ed8;
}

/* Historico inicia oculto e o JS controla quando exibir */
.hidden {
  display: none;
}

/* Container de historico logo abaixo do input */
.history-container {
  margin-top: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
}

.history-container p {
  margin: 0 0 8px;
  font-weight: 600;
  color: #4b5563;
}

.history-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-container li {
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
}

/* Hover suave para destaque discreto do historico */
.history-container li:hover {
  background: #f3f5f7;
}

/* Cabecalho da area de resultados com tag de exemplo */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.results-header h2 {
  margin: 0;
}

/* Container principal de resultados com scroll */
.results-container {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  max-height: 350px;
  min-height: 140px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

/* Bloco de feedback visual para loading, erro e sem resultados */
.result-feedback {
  min-height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  border-radius: 10px;
  padding: 14px;
}

.result-feedback p {
  margin: 0;
  font-weight: 600;
}

.feedback-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
}

.result-feedback.loading {
  background: #eff6ff;
  color: #1e40af;
}

.result-feedback.loading .feedback-icon {
  background: #dbeafe;
  animation: pulse 1.2s ease-in-out infinite;
}

.result-feedback.error {
  background: #fef2f2;
  color: #b91c1c;
}

.result-feedback.error .feedback-icon {
  background: #fee2e2;
}

.result-feedback.empty {
  background: #f8fafc;
  color: #475569;
}

.result-feedback.empty .feedback-icon {
  background: #e2e8f0;
}

/* Card base de usuario dentro da lista de resultados */
.user-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
}

.user-card h3 {
  margin: 0 0 4px;
}

.user-card p {
  margin: 0 0 6px;
  color: #6b7280;
}

.user-card a {
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: none;
}

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

.user-card img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

/* Animacao suave para o estado de carregamento */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* Pequeno ajuste para telas menores */
@media (max-width: 560px) {
  body {
    padding: 14px;
  }

  .search-form {
    flex-direction: column;
  }

  .search-form button {
    height: 42px;
  }

  /* Em mobile, organiza avatar + username + link em coluna */
  .user-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .user-card img {
    width: 52px;
    height: 52px;
  }
}