/* ===================================================== */
/*  analu2.css  –  apenas complementos/overrides    */
/*  que não estão (ou que precisam diferir) do analu.css  */
/* ===================================================== */

/* ----------------------------------------------------- */
/* 1.  TEXTOS DE INTRODUÇÃO (não existem no analu.css)   */
/* ----------------------------------------------------- */
.intro-text .analu-intro  {
  font-style: italic;
  font-size: 1.1em;
  margin-bottom: 8px;
}
.intro-text .analu-title  { margin-bottom: 16px; }
.intro-text .analu-message{ margin-top: 16px;  }

.landing-question {
  font-size: 2em;
  font-weight: bold;
  margin: 0 0 8px;
}
.landing-tagline  {
  font-size: 1em;
  color: var(--text-secondary);
  margin: 0;
}

/* ----------------------------------------------------- */
/* 2.  BOTÕES PRINCIPAIS – tema escuro da landing        */
/* ----------------------------------------------------- */

/* Botão com texto (mesma classe) */
body.page-analu .refined-input-send {
  width: auto;
  height: auto;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px; /* evita “pular” com traduções curtas */
}

body.page-analu .primary-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 24px;
  background: none;
}
body.page-analu .primary-options .refined-button {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.6);
  color:   rgba(255,255,255,0.85);
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 1em;
  font-weight: 500;
  text-decoration: none;
  transition: background .3s, border-color .3s;
}
body.page-analu .primary-options .refined-button:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.85);
}

/* ----------------------------------------------------- */
/* 3.  AVATAR - só o que difere                          */
/*     (troca do padding-hack por aspect-ratio)          */
/* ----------------------------------------------------- */
.intro-avatar .analu-animated-container {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1068 / 1932;        /* ≈ 0.553 */
  overflow: visible;
}

/* ---------- FIX altura do avatar ---------- */
body.page-analu .intro-avatar .analu-animated-container {
  height: auto !important;          /* remove o colapso */
  aspect-ratio: 1068 / 1932;        /* mantém proporção */
  width: 260px;                     /* base para o cálculo */
}

body.page-analu .landing-intro.refined-intro {
  align-items: start;    /* topo-a-topo: bolha ⟷ avatar */
}

body.page-analu .intro-text,
body.page-analu .intro-avatar {
  align-self: start !important;
}

/* coloque no FINAL do analu2.css  ─  vale só para a page-analu */
body.page-analu .landing-intro.refined-intro {
  /* 1 )  mantém as duas colunas já existentes */
  grid-template-columns: 2fr 1fr;

  /* 2 )  força uma única linha com áreas nomeadas           */
  grid-template-areas: "message avatar";

  /* 3 )  alinha topo-a-topo                                   */
  align-items: start;
  /* (gap entre colunas continua valendo) */
}

/* 4 )  indica a que área cada item pertence  */
body.page-analu .intro-text   { grid-area: message; }
body.page-analu .intro-avatar { grid-area: avatar;  }

/* === INPUT AZUL ESPECÍFICO DA LANDING (page-analu) === */
body.page-analu .refined-input {
  background: #002c5d;        /* azul escuro (mesma paleta do site) */
  color: #f8f9fa;             /* texto branco */
  border: 1px solid #005ecb;  /* contorno azul-médio */
  font-size: 1.05em;   /* ⬅️ novo: texto ligeiramente maior */
}

/* === INPUT AZUL ESPECÍFICO DA LANDING (page-analu) === */
body.page-analu .refined-input:focus {
  border-color: #1e90ff;      /* realce no foco */
  box-shadow: 0 0 0 3px rgba(30,144,255,.25);
}

/* placeholder claro para contraste */
body.page-analu .refined-input::placeholder {
  color: rgba(248,249,250,.75);   /* branco 75 % */
}

/* modo claro (caso o usuário desative o dark) */
html:not(.dark) body.page-analu .refined-input {
  background: #e6f0ff;        /* azul bem claro */
  color: #002244;
  border-color: #0069d9;
}

/* ADD: avatar “sempre visível” enquanto o feed rola */
body.page-analu .intro-avatar { position: sticky; top: 12px; }

/* ADD: altura do feed um pouco maior no desktop */
body.page-analu #analuFeed,
body.page-analu .analu-body { max-height: clamp(360px, 50vh, 600px); }

/* ADD: contêiner de bolhas vira flex vertical */
.analu-body { display: flex; flex-direction: column; gap: 8px; }

/* ADD: textarea multilinha (mantém tuas classes) */
.refined-input.refined-input-multiline{
  min-height:56px; max-height:160px; resize:vertical;
  line-height:1.4; overflow:auto; white-space:pre-wrap;
}

/* (opcional) alinhamento visual user x analu */
.analu-msg.user  { align-self: flex-end; }
.analu-msg.analu { align-self: flex-start; }

/* bolhas: diferencia a Analu das mensagens do usuário */
.analu-msg.analu {
  background: rgba(30,144,255,.06);          /* leve azul */
  border-color: rgba(30,144,255,.35);
}

html.dark .analu-msg.analu {
  background: rgba(59,130,246,.10);           /* leve azul no dark */
  border-color: rgba(148,163,184,.45);        /* borda um pouco mais clara */
}

/* (opcional) user com leve cinza no light e transparente no dark */
.analu-msg.user {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.15);
}
html.dark .analu-msg.user {
  background: transparent;
  border-color: rgba(255,255,255,.25);
}

/* mantém alternância existente (.alt) mas sem brigar com a cor base */
.analu-msg.analu.alt { filter: brightness(1.03); }

/* =========================================================
   Analu Web Cards — cartões de resultados web
   ========================================================= */

/* ---------- Paleta e tokens (customize se quiser) ---------- */
:root {
  --analu-blue-50:  #eef6ff;
  --analu-blue-100: #d6e9ff;
  --analu-blue-200: #b6d7ff;
  --analu-blue-300: #8ebeff;
  --analu-blue-400: #5ea0ff;
  --analu-blue-500: #2f82ff; /* primária */
  --analu-blue-600: #1d64d6;
  --analu-blue-700: #134aa6;
  --analu-blue-800: #0e377c;

  --analu-ink-900:  #0b1324;
  --analu-ink-800:  #151b2f;
  --analu-ink-700:  #1f2740;
  --analu-ink-600:  #2a3452;
  --analu-ink-500:  #3c4666;
  --analu-ink-300:  #8592a6;
  --analu-ink-200:  #aab4c3;
  --analu-ink-100:  #d7dde6;

  --analu-bg:       #0f1422;   /* fundo geral em dark */
  --analu-card-bg:  #0f172a;   /* slate-900-ish */
  --analu-card-elev:#111a2e;   /* leve contraste */

  --analu-radius-lg: 16px;
  --analu-radius-sm: 10px;

  --analu-shadow-1: 0 6px 20px rgba(0,0,0,.22);
  --analu-shadow-2: 0 10px 28px rgba(0,0,0,.28);
  --analu-ring: 0 0 0 3px rgba(47,130,255,.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --analu-bg:       #f7fbff;
    --analu-card-bg:  #ffffff;
    --analu-card-elev:#f2f7ff;
    --analu-ink-900:  #0b172a;
    --analu-ink-800:  #11203a;
  }
}

/* ---------- Layout do container de cards ---------- */
.analu-web-results { /* opcional, caso use */
  display: block;
  margin: 1rem 0 2rem;
}

.analu-webcards {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .analu-webcards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px) {
  .analu-webcards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ---------- Card ---------- */
.analu-card {
  position: relative;
  background: linear-gradient(180deg, var(--analu-card-bg), var(--analu-card-elev));
  border: 1px solid rgba(47,130,255,.16);
  border-radius: var(--analu-radius-lg);
  box-shadow: var(--analu-shadow-1);
  padding: 14px 14px 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.analu-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--analu-shadow-2);
  border-color: rgba(47,130,255,.28);
}

.analu-card:focus-within {
  outline: none;
  box-shadow: var(--analu-shadow-2), var(--analu-ring);
  border-color: var(--analu-blue-500);
}

/* ---------- Título (link) ---------- */
.analu-card-title {
  display: inline-block;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--analu-blue-200);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color .12s ease, text-shadow .12s ease;
}
.analu-card-title:hover {
  color: #ffffff;
  text-shadow: 0 0 22px rgba(94,160,255,.35);
}
.analu-card-title:focus {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Snippet ---------- */
.analu-card-snippet {
  color: var(--analu-ink-200);
  font-size: .94rem;
  line-height: 1.45;
  margin: 0 0 10px 0;
}

/* ---------- Rodapé/meta ---------- */
.analu-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analu-card-meta small {
  color: var(--analu-ink-300);
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Botão "Abrir" ---------- */
.analu-card-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(180deg, var(--analu-blue-500), var(--analu-blue-600));
  color: #fff;
  border: 1px solid var(--analu-blue-600);
  border-radius: var(--analu-radius-sm);
  text-decoration: none;
  transition: filter .12s ease, transform .06s ease, box-shadow .12s ease;
  box-shadow: 0 2px 10px rgba(47,130,255,.28);
}
.analu-card-open:hover {
  filter: brightness(1.05);
}
.analu-card-open:active {
  transform: translateY(1px);
}
.analu-card-open:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,130,255,.32);
}

/* ---------- Avisos e estados ---------- */
.analu-note {
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: .92rem;
}

.analu-note-warning {
  background: rgba(255, 200, 0, .08);
  border: 1px solid rgba(255, 200, 0, .35);
  color: #ffd35c;
}

.analu-empty {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.12);
  color: var(--analu-ink-200);
  font-size: .94rem;
}

/* ---------- Fontes consultadas (colapsável) ---------- */
.analu-sources {
  margin-top: 8px;
  border: 1px solid rgba(47,130,255,.16);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--analu-card-bg), var(--analu-card-elev));
}
.analu-sources > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  color: var(--analu-blue-200);
  font-weight: 600;
}
.analu-sources[open] > summary {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.analu-sources-list {
  margin: 8px 12px 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.analu-sources-list a {
  color: var(--analu-ink-200);
  text-decoration: none;
  font-size: .88rem;
}
.analu-sources-list a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Acessibilidade & Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .analu-card,
  .analu-card-title,
  .analu-card-open {
    transition: none !important;
  }
}

/* Inline web results — layout limpo e consistente */
.analu-web-inline .analu-web-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0 0;
}

.analu-web-inline .analu-web-item {
  margin: 8px 0 10px 0;
}

.analu-web-inline .analu-web-link {
  display: block;           /* quebra de linha entre título e meta */
  text-decoration: none;
  font-weight: 600;
}

.analu-web-inline .analu-web-link:hover {
  text-decoration: underline;
}

.analu-web-inline .analu-web-meta {
  display: block;           /* garante nova linha */
  opacity: .8;
  font-size: 0.92em;
  margin-top: 2px;
  word-break: break-word;   /* evita overflow por URLs longas */
}

.analu-inline-sources {
  margin-top: 8px;
  font-size: 0.92em;
  opacity: .9;
}

.analu-web-inline .analu-web-list {
  list-style: disc;
  padding-left: 1.1rem; /* recuo sutil */
}