/* Versão fluida da caixa "Como posso te ajudar?" (home-civia.html).
   Complementa assistente.css: a Cívia cumprimenta num balão, o campo responde a ela,
   exemplos em chips, eco da pergunta no card e painel deslizando. */

.ask-card.civia-card-fluida { padding: 22px 26px 18px; overflow: visible; }

/* a Cívia cumprimenta: rosto e ombros num círculo com moldura, encostado na borda de cima do card */
.civia-hello { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; animation: civia-hello-in .55s ease-out both; }
.civia-hello-av { width: 132px; height: 132px; flex: 0 0 auto; margin: -36px 0 0 -8px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #eaf3fc, #cfe0f2); border: 4px solid #fff; box-shadow: 0 8px 18px rgba(8, 28, 52, .25); }
.civia-hello-av img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.civia-hello-bubble { position: relative; background: var(--blue-soft); color: var(--navy); border-radius: 4px 18px 18px 18px; padding: 12px 16px; font-size: 17px; line-height: 1.45; min-width: 0; }
.civia-hello-bubble p { margin: 0; }
.civia-hello-bubble b { font-weight: 800; }
.civia-hello-bubble::before { content: ""; position: absolute; left: -8px; top: 14px; border: 8px solid transparent; border-right-color: var(--blue-soft); border-left: 0; }

/* o campo responde a ela */
.civia-card-fluida .ask-field { border-radius: 999px; padding: 4px 4px 4px 20px; }
.civia-card-fluida .ask-field input { font-size: 17px; }
.civia-card-fluida .ask-field input::placeholder { color: #6b7d8f; transition: opacity .38s; }
.civia-card-fluida .ask-field input.civia-ph-fade::placeholder { opacity: 0; }
.civia-go { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: 0; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; cursor: pointer; transition: transform .15s, background .2s; }
.civia-go:hover, .civia-go:focus-visible { background: #e0a31a; transform: scale(1.06); }
.civia-card-fluida .ask-suggest { border-radius: 18px; }

/* exemplos em chips, com cara de mensagem rápida */
.civia-exemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.civia-ex { border: 1px solid #b7cde0; background: #fff; color: var(--blue); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.civia-ex:hover, .civia-ex:focus-visible { background: var(--blue-soft); border-color: var(--blue-bright); }

/* eco da pergunta enquanto a Cívia pensa */
.civia-eco { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; animation: civia-in .25s ease-out; }
.civia-eco[hidden] { display: none; }
.civia-eco .voce { align-self: flex-end; max-width: 80%; background: var(--blue-bright); color: #fff; border-radius: 16px 16px 4px 16px; padding: 9px 14px; font-size: 15px; line-height: 1.4; }
.civia-eco .civia-pensa { display: flex; align-items: center; gap: 8px; }
.civia-eco .civia-pensa img { width: 32px; height: 32px; object-fit: contain; }
.civia-eco .civia-typing { background: #fff; border: 1px solid #e1e8ef; border-radius: 16px 16px 16px 4px; padding: 8px 12px; }

/* o painel desliza em vez de pipocar */
.civia-panel { animation: civia-slide .35s ease-out; }

@keyframes civia-hello-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes civia-slide { from { opacity: 0; transform: translateX(28px); } }

@media (max-width: 980px) {
  /* capital.css empilha o campo nessa largura; aqui a seta fica dentro do campo */
  .civia-card-fluida .ask-field { flex-wrap: nowrap; padding: 4px 4px 4px 16px; }
  .civia-card-fluida .ask-field input { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 600px) {
  .ask-card.civia-card-fluida { padding: 18px 16px 16px; }
  .civia-hello { gap: 10px; }
  .civia-hello-av { width: 72px; height: 72px; margin: -26px 0 0 -2px; border-width: 3px; }
  .civia-hello-bubble { font-size: 15px; padding: 10px 13px; }
  .civia-card-fluida .ask-field { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .civia-hello, .civia-eco, .civia-panel { animation: none; }
  .civia-card-fluida .ask-field input::placeholder, .civia-go, .civia-ex { transition: none; }
  .civia-go:hover { transform: none; }
}