/* SophIA — estetica warm-therapeutic (herda paleta do funil oddsee).
   Acolhimento, ritmo lento, quente e sobrio. Mobile-first. */
:root {
  --ink: #16130F;
  --panel: #1E1A15;
  --panel-2: #262019;
  --cream: #F4EFE7;
  --cream-2: #EAE3D6;
  --text-dark: #2A241C;
  --text-soft: #5A5045;
  --text-light: #ECE5D8;
  --text-mute: #A99C88;
  --brass: #C69A5B;
  --brass-deep: #A97D3E;
  --terra: #B4674A;
  --line: rgba(198,154,91,0.22);
  --serif: "Spectral", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --maxw: 640px;
  --radius: 16px;
  --ease: cubic-bezier(0.22,0.61,0.36,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--text-dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
.app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

/* ---- header ---- */
.top {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  color: var(--text-light);
  padding: 18px 20px 14px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass), var(--brass-deep));
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 20px; color: #1a1712;
  flex: 0 0 auto;
}
.brand h1 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 0; letter-spacing: .2px; }
.brand p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-mute); }

/* ---- disclaimer permanente (guardrail c) ---- */
.disclaimer {
  background: rgba(180,103,74,0.12);
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.5;
  padding: 9px 20px;
}
.disclaimer strong { color: var(--brass-deep); font-weight: 600; }

/* ---- fluxo de mensagens ---- */
.stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg { display: flex; }
.msg .bubble {
  max-width: 84%;
  padding: 12px 15px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.62;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.assistant { justify-content: flex-start; }
.msg.assistant .bubble {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-deep) 100%);
  color: #1c1710;
  border-bottom-right-radius: 5px;
}
/* mensagem de acolhimento em crise — cartao de cuidado destacado */
.msg.assistant .bubble.care {
  background: #fbf3ea;
  border: 1px solid var(--brass-deep);
  border-left: 4px solid var(--terra);
}

/* indicador de digitacao */
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
  display: inline-block; opacity: .35; animation: blink 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.3} 40%{opacity:.95} }

/* ---- barra de entrada ---- */
.composer {
  border-top: 1px solid var(--line);
  background: var(--cream-2);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.composer textarea {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--text-dark);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  padding: 11px 14px;
  max-height: 120px;
  outline: none;
}
.composer textarea:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(198,154,91,0.18); }
.send {
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  width: 46px; height: 46px;
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-deep) 100%);
  color: #1c1710;
  font-size: 20px;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.send:hover:not(:disabled), .send:focus-visible { box-shadow: 0 6px 18px rgba(169,125,62,0.4); transform: translateY(-1px); }
.send:disabled { opacity: .45; cursor: default; }
.foot { text-align: center; font-size: 10.5px; color: var(--text-mute); padding: 0 16px 8px; }