/* ===================================================== */
/* 1.   SEÇÃO GERAL / GRID PRINCIPAL                     */
/* ===================================================== */
.landing-container.refined {
  margin-top: 40px;
  padding: 0 5%;
}

.landing-intro.refined-intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 32px;
  max-width: 920px;
  margin: 0 auto 40px;
  max-height: none !important;
  overflow: visible !important;
}

/* ===================================================== */
/* 2.   TEXTOS DE INTRODUÇÃO                             */
/* ===================================================== */
.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; }

/* ===================================================== */
/* 3.   BOTÕES PRINCIPAIS (GRADE OU FLEX)                */
/* ===================================================== */
body.page-analu .primary-options {
  display: flex !important;
  flex-direction: row !important;   /* garante linha horizontal */
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 0 auto 24px !important;
  background: none !important;
}

/* Botões “pill” */
body.page-analu .primary-options .refined-button {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font-size: 1em !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.3s, border-color 0.3s !important;
}
body.page-analu .primary-options .refined-button:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.85) !important;
}

/* ===================================================== */
/* 4.   CAMPO DE ENTRADA                                 */
/* ===================================================== */
.refined-input {
  flex: 1;
  min-width: 0;
  padding: 14px 20px;
  border: 1px solid #ccc;
  border-radius: 24px;
  font-size: 1em;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
  transition: border-color 0.3s;
}

.refined-input:focus { outline: none; border-color: #0069d9; }

.refined-input-send {
  width: 48px; height: 48px;
  border: none; border-radius: 50%;
  background-color: #0069d9; color:#fff;
  font-size: 1.2em; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.1);
  transition: background-color .3s;
}

.refined-input-send:hover { background:#0056b3; }

/* ===================================================== */
/* 5.   AVATAR                                           */
/* ===================================================== */
.intro-avatar .analu-portrait {
  width: 100%; max-width:260px;
  border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.15);
  object-fit:cover;
}

/* ===================================================== */
/* 6.   INPUT-AREA GRID                                  */
/* ===================================================== */
.input-area{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:8px !important; width:100%; max-width:800px; margin:0 auto 32px;
}

.input-area .refined-input { width:100%; min-width:0; }
.input-area .refined-input-send{ width:48px; height:48px; }

/* ===================================================== */
/* 7.   RESPONSIVO PARA TOUCH                            */
/* ===================================================== */
@media(max-width:1024px) and (pointer:coarse){
  .landing-intro.refined-intro{ grid-template-columns:1fr; text-align:center; }
  .intro-avatar{ justify-self:center; }
  .primary-options{ grid-template-columns:1fr; }
}

/* ─── 1) BOLHA DE MENSAGEM (sem all:unset!) ───────────────── */
body.page-analu .landing-intro.refined-intro,
body.page-analu .intro-text .analu-message {
  max-height: none !important;
  overflow: visible !important;
}

body.page-analu .intro-text .analu-message {
  max-height: 280px !important;   /* ou ajuste conforme seu layout */
  overflow-y: auto !important;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.analu-message::-webkit-scrollbar {
  width: 8px;
}
.analu-message::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
.analu-message::-webkit-scrollbar-track {
  background-color: transparent;
}

body.page-analu .analu-body {
  box-sizing: border-box;
  padding: 20px 20px 32px;
  border-radius: 10px;
  background-color: #012A4A;
  color: #fff;
  font-size: 1.05em;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: none;
  max-height: 60vh;  /* mais altura disponível */
  /* max-height: none;  <-- ou remova de vez */
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ─── 2) LINKS DENTRO DA BOLHA ───────────────────────────── */
body.page-analu .analu-body a,
body.page-analu .analu-body a:visited {
  color: #4cc2ff;
  text-decoration: underline;
  background: none;
  display: inline;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* ─── 4) TYPING INDICATOR ───────────────────────────────── */
body.page-analu .typing-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 10px !important;
  min-width: 60px !important;
  height: 20px !important;
}

body.page-analu .typing-indicator span {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  background-color: #fff !important;
  border-radius: 50% !important;
  animation: typing-bounce 1.4s infinite ease-in-out !important;
}

@keyframes typing-bounce {
  0%,80%,100% { transform: scale(0.8); opacity: 0.6; }
  40%         { transform: scale(1);   opacity: 1;   }
}

/* === AJUSTES PARA MODO CLARO === */
html:not(.dark) body.page-analu .primary-options .refined-button {
  background-color: transparent !important;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
  color: #012A4A !important;
}

html:not(.dark) body.page-analu .primary-options .refined-button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
}

html:not(.dark) body.page-analu .analu-body {
  background-color: #f4faff !important;
  color: #002244 !important;
}

html:not(.dark) body.page-analu .typing-indicator span {
  background-color: #333 !important;
}

/* === AJUSTES PARA MODO ESCURO === */

/* 1) Remover fundo do wrapper geral */
html.dark body.page-analu .landing-intro.refined-intro {
  background: none !important;
}

/* 2) Inner-text: tirar fundo/branco/scroll, manter só o texto */
html.dark body.page-analu .intro-text .analu-message {
  background: none    !important;
  padding:    0       !important;
  border:     none    !important;
  /* se precisar ajustar cor aqui, mas herda #fff de .analu-body abaixo */
}

/* 3) Bolha gerada pelo JS: sem fundo nem borda — exceto onboarding */
html.dark body.page-analu .analu-msg:not(.analu-onboarding-msg) {
  background: none    !important;
  padding:    0       !important;
  border:     none    !important;
}

/* 4) A única bolha com fundo/navy e texto claro */
html.dark body.page-analu .analu-body {
  background-color: #012A4A !important;
  color:            #fff    !important;
}

/* 5) Campo de entrada em dark mode */
html.dark .refined-input {
  background-color: #012A4A !important;
  border-color:     #33475b !important;
  color:            #fff    !important;
}
html.dark .refined-input::placeholder {
  color: rgba(255,255,255,0.6) !important;
}