/* Conversa com a Flora dentro da Casa (flora-conversa.js; doc 19 §27). Balões no mundo: a fala da pessoa (rosa) sai
   para a esquerda da cabeça do avatar; a da Flora (creme e sálvia) para a direita da cabeça dela. O JS põe left/top a
   cada quadro e o --cauda (onde o rabinho encontra a cabeça). Acima do jogo e do HUD (40), abaixo do aviso (80). */
.fc-casa { position: fixed; inset: 0; z-index: 60; pointer-events: none; --fc-kb: 0px; --fc-rosa: #C9447A; --fc-salvia: #5E6E50; --fc-creme: #FFFBF4; --fc-tinta: #3B2A2F; }
.fc-casa[hidden] { display: none; }
.fc-casa__palco { position: absolute; inset: 0; pointer-events: none; }
.fc-casa__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Balões */
.fc-balao { position: absolute; left: 0; top: 0; width: max-content; pointer-events: auto; box-sizing: border-box; padding: 10px 13px 11px; border-radius: 18px; font-family: var(--sans, 'DM Sans', system-ui, sans-serif); font-size: 14px; line-height: 1.42;
  box-shadow: 0 10px 26px #51453f2b; opacity: 0; transform: translateY(14px) scale(.35); transform-origin: var(--cauda, 50%) 100%;
  transition: opacity .2s ease, transform .34s cubic-bezier(.2, .9, .3, 1.35); }
.fc-balao--dentro { opacity: 1; transform: none; }
.fc-balao--sai { opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity .2s ease, transform .22s ease; }
.fc-balao::after { content: ""; position: absolute; left: calc(var(--cauda, 50%) - 7px); bottom: -7px; width: 14px; height: 14px; transform: rotate(45deg); border-radius: 0 0 4px 0; }
.fc-balao--solto::after { display: none; }
.fc-balao__texto { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.fc-balao--pessoa { max-width: min(280px, 42vw); background: var(--fc-rosa); color: #fff; border-radius: 18px 18px 6px 18px; }
.fc-balao--pessoa::after { background: var(--fc-rosa); }
.fc-balao--flora { max-width: min(340px, 52vw); max-height: min(48vh, 400px); display: flex; flex-direction: column; background: var(--fc-creme); color: var(--fc-tinta);
  border: 1px solid #D9E1CF; border-radius: 18px 18px 18px 6px; }
.fc-balao--flora::before { content: "Flora"; display: block; margin-bottom: 2px; color: var(--fc-salvia); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fc-balao--flora::after { background: var(--fc-creme); border-right: 1px solid #D9E1CF; border-bottom: 1px solid #D9E1CF; }
.fc-balao__corpo { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.fc-balao--erro { border-color: #E7C2CF; }
.fc-balao--pensando .fc-balao__texto { min-width: 46px; }
.fc-balao__pontos { display: inline-flex; gap: 5px; padding: 4px 2px; }
.fc-balao__pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--fc-salvia); opacity: .35; animation: fc-ponto 1s infinite ease-in-out; }
.fc-balao__pontos i:nth-child(2) { animation-delay: .15s; }
.fc-balao__pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes fc-ponto { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* Peças, sacola e botões dentro do balão da Flora */
.fc-balao__pecas { display: flex; gap: 7px; margin: 9px 0 2px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.fc-balao__pecas { scrollbar-width: none; }
.fc-balao__pecas::-webkit-scrollbar { display: none; }
.fc-peca { flex: 0 0 96px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; padding: 0 0 7px; border: 1px solid #EFE4D6; border-radius: 12px; background: #fff; color: var(--fc-tinta); text-decoration: none; overflow: hidden; font-size: 11px; line-height: 1.25; }
.fc-peca img { width: 100%; height: 78px; object-fit: cover; background: #F7F1EA; }
.fc-peca span { padding: 3px 7px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-peca strong { padding: 0 7px; color: var(--fc-rosa); font-size: 12px; }
.fc-peca em { padding: 0 7px; color: #8A6F75; font-size: 10px; font-style: normal; }
.fc-balao__sacola { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 9px; padding: 8px 10px; border-radius: 12px; background: #EAF0E2; color: #2E4A2B; font-size: 12.5px; font-weight: 600; }
.fc-balao__sacola button { padding: 2px 0; border: 0; background: none; color: #2E4A2B; font: inherit; text-decoration: underline; cursor: pointer; }
.fc-balao__acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.fc-acao { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px solid #D9E1CF; background: #fff; color: var(--fc-tinta); font: 600 12.5px/1.2 var(--sans, 'DM Sans', system-ui, sans-serif); text-decoration: none; cursor: pointer; }
.fc-acao--ir { background: var(--fc-salvia); border-color: var(--fc-salvia); color: #fff; }
.fc-acao--studio { background: var(--fc-tinta); border-color: var(--fc-tinta); color: #fff; }
.fc-acao--equipe { background: #25D366; border-color: #25D366; color: #fff; }
.fc-balao__nota { margin: 8px 0 0; color: #7D666B; font-size: 11.5px; }

/* Barra de escrever: sugestões em cima; conversa completa, campo e sair embaixo. Sobe com o teclado do celular. */
.fc-casa__barra { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--fc-kb) + 10px); width: min(640px, calc(100vw - 20px)); transform: translate(-50%, 16px); opacity: 0;
  display: flex; flex-direction: column; gap: 8px; pointer-events: auto; transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1); font-family: var(--sans, 'DM Sans', system-ui, sans-serif); }
.fc-casa--aberta .fc-casa__barra { opacity: 1; transform: translate(-50%, 0); }
.fc-casa__sugestoes { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.fc-casa__sugestoes::-webkit-scrollbar { display: none; }
.fc-casa__sugestoes[hidden] { display: none; }
.fc-casa__sugestoes button { flex: none; padding: 8px 13px; border: 1px solid #E6DCCB; border-radius: 999px; background: #fffdf9eb; color: var(--fc-tinta); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; box-shadow: 0 4px 12px #51453f1a; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fc-casa__linha { display: flex; align-items: center; gap: 8px; }
.fc-casa__form { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 4px 4px 14px; border: 1px solid #E6DCCB; border-radius: 999px; background: #fffdf9f2; box-shadow: 0 8px 22px #51453f26; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fc-casa__form:focus-within { border-color: #C9D4BC; box-shadow: 0 8px 22px #51453f26, 0 0 0 3px #5E6E5026; }
/* 16px: com letra menor o iPhone dá zoom ao tocar no campo (a tela inteira aumentava e o balão saía da tela). */
.fc-casa__campo { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--fc-tinta); font-family: inherit; font-size: 16px; line-height: 1.2; outline: none; }
/* O casa.css põe um contorno grosso em todo input:focus-visible; aqui quem mostra o foco é a borda do formulário. */
.fc-casa .fc-casa__campo:focus, .fc-casa .fc-casa__campo:focus-visible { outline: none; }
.fc-casa__enviar { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fc-rosa); color: #fff; cursor: pointer; }
.fc-casa__enviar:disabled { background: #E9D3DB; cursor: default; }
.fc-casa__enviar svg, .fc-casa__icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fc-casa__icone { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #E6DCCB; border-radius: 50%; background: #fffdf9eb; color: #635642; box-shadow: 0 6px 18px #51453f1f; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fc-casa__icone:focus-visible, .fc-casa__enviar:focus-visible, .fc-acao:focus-visible, .fc-peca:focus-visible, .fc-casa__sugestoes button:focus-visible { outline: 3px solid #314a35; outline-offset: 2px; }

/* Conversa completa: folha no celular, painel à direita no computador. */
.fc-casa__historico { position: absolute; right: 12px; top: 12px; bottom: calc(env(safe-area-inset-bottom) + var(--fc-kb) + 12px); width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column; pointer-events: auto;
  background: var(--fc-creme); border: 1px solid #E6DCCB; border-radius: 22px; box-shadow: 0 18px 48px #51453f3d; overflow: hidden; z-index: 2; font-family: var(--sans, 'DM Sans', system-ui, sans-serif); }
.fc-casa__historico[hidden] { display: none; }
.fc-casa__hist-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 10px 18px; border-bottom: 1px solid #EFE4D6; font-family: var(--serif, Georgia, serif); font-size: 17px; color: var(--fc-tinta); }
.fc-casa__hist-topo .fc-casa__icone { width: 38px; height: 38px; box-shadow: none; }
.fc-casa__hist-lista { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.fc-hist { max-width: 88%; padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.42; }
.fc-hist p { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.fc-hist--flora { align-self: flex-start; background: #fff; border: 1px solid #EFE4D6; color: var(--fc-tinta); border-bottom-left-radius: 6px; }
.fc-hist--pessoa { align-self: flex-end; background: var(--fc-rosa); color: #fff; border-bottom-right-radius: 6px; }
.fc-hist__quem { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.fc-hist__hora { display: block; margin-top: 3px; font-size: 10.5px; opacity: .65; }
.fc-hist__peca { display: block; margin-top: 5px; color: var(--fc-rosa); font-size: 12.5px; font-weight: 600; }

/* Enquanto conversam, o controle e a bandeja saem de cena (os controles do jogo ficam bloqueados). */
body.casa-conversando .movement-pad, body.casa-conversando .tray-toggle, body.casa-conversando .overview-button, body.casa-conversando .interaction-button { visibility: hidden !important; }

@media (max-width: 640px) {
  .fc-balao { font-size: 13.5px; padding: 9px 12px 10px; }
  .fc-casa__historico { left: 8px; right: 8px; top: auto; width: auto; height: min(72dvh, 560px); border-radius: 22px 22px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-balao, .fc-balao--sai, .fc-casa__barra { transition: none; }
  .fc-balao__pontos i { animation: none; opacity: .7; }
}