:root{
  /* paleta do mock */
  --blue:#3b82f6;          /* header e bolha do usuário */
  --blue-600:#2563eb;
  --bg:#f5f7fb;            /* fundo da página */
  --panel:#ffffff;         /* cartões/bolhas */
  --text:#0f172a;          /* texto padrão bot */
  --muted:#6b7280;         /* subtítulos/horário */
  --shadow:0 10px 24px rgba(15,23,42,.08);
  --r:18px;                /* raio padrão */
}

/* reset básico */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* layout base */
.app{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:18px;
}
.card{
  width:min(920px,100%);
  background:var(--panel);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ---------- HEADER estilo do print ---------- */
.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:var(--blue); color:#fff;
}
.header-left{display:flex;align-items:center;gap:10px}
.back{
  appearance:none; border:0; background:rgba(255,255,255,.2);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  font-weight:600; transition:background .2s;
}
.back:hover{background:rgba(255,255,255,.3)}
.title{
  font-weight:700; font-size:16px;
}
.subtitle{
  font-size:12px; opacity:.9;
}

/* ---------- corpo com rolagem ---------- */
.chat{
  display:flex; flex-direction:column; height:min(86dvh,760px);
}
.chat-body{
  flex:1; overflow-y:auto; padding:16px 14px;
  background:linear-gradient(180deg,#f7f9fc 0%, #eef2f6 100%);
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}

/* ---------- bolhas (branca p/ bot, azul p/ usuário) ---------- */
.msg{
  max-width:72%;
  padding:10px 12px;
  border-radius:18px;
  font-size:15px; line-height:1.45;
  word-break:break-word; white-space:pre-wrap;
  display:inline-block; position:relative;
  box-shadow:0 2px 10px rgba(2,6,23,.06);
}
.msg .time{display:block; font-size:11px; color:var(--muted); margin-top:4px; text-align:right}

/* bot = branco */
.msg.bot{
  background:#fff; color:var(--text);
  border-top-left-radius:8px;
}
/* user = azul */
.msg.user{
  align-self:flex-end;
  background:var(--blue); color:#fff;
  border-top-right-radius:8px;
}
.msg.user .time{color:rgba(255,255,255,.85)}

/* links visíveis */
.msg a{color:var(--blue-600); text-decoration:underline}
.msg.user a{color:#fff}

/* ---------- indicador “digitando” em pílula ---------- */
.msg.typing{
  background:#fff; color:var(--muted); border-top-left-radius:8px;
  display:inline-flex; align-items:center; gap:8px;
}
.typing .dots{display:inline-flex; gap:4px}
.typing .dots i{
  width:8px;height:8px;border-radius:999px;background:#cbd5e1;
  animation:blink 1.1s infinite ease-in-out;
}
.typing .dots i:nth-child(2){animation-delay:.15s}
.typing .dots i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.35; transform:translateY(0)}40%{opacity:1; transform:translateY(-2px)}}

/* ---------- composer (barra inferior) ---------- */
.composer{
  display:flex; align-items:center; gap:10px;
  padding:12px; background:#fff; border-top:1px solid #e5e7eb;
}
.composer textarea{
  flex:1; resize:none; min-height:44px; max-height:140px;
  padding:12px 14px; border:1px solid #e5e7eb; border-radius:999px;
  font-size:15px; line-height:1.35; outline:none; background:#fff;
}
.composer textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.btn-send{
  width:44px; height:44px; border-radius:50%;
  border:0; background:#e5e7eb; color:#374151; font-size:18px; cursor:pointer;
  transition:filter .2s, transform .02s;
}
.btn-send:hover{filter:brightness(.95)}
.btn-send:active{transform:translateY(1px)}

/* ---------- formulário (mantém simples) ---------- */
.form-card{max-width:560px; padding:20px}
.brand{font-weight:700; font-size:20px; margin:0 0 8px}
.sub{color:#6b7280; margin:0 0 14px}
.lead .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.lead label{display:block}
.lead label span{display:block; font-size:12px; color:#6b7280; margin:6px 0}
input{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px; outline:none;
}
input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.btn{border:0; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer}
.btn.btn-primary{background:var(--blue); color:#fff}

/* barras de rolagem suaves */
.chat-body::-webkit-scrollbar,
textarea::-webkit-scrollbar{width:8px}
.chat-body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb{background:#cfd8e3; border-radius:8px}

/* responsivo */
@media (max-width:720px){
  .lead .row{grid-template-columns:1fr}
  .chat{height:calc(100dvh - 24px)}
  .msg{max-width:86%}
}