@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fontes/instrument.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fontes/instrument-italico.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/fontes/montserrat.woff2") format("woff2"); }

:root {
  --estudio: #33312F; --estudio-2: #24221F; --luz: #F4E6CF; --champanhe: #9A7748; --champanhe-claro: #E3CBA0;
  --serif: "Instrument Serif", Georgia, serif; --sans: "Montserrat", system-ui, sans-serif;
  --zap: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --topo-bg: #008069; --topo-tx: #fff; --fundo-chat: #EFEAE2; --recebida: #fff; --enviada: #D9FDD3;
  --texto: #111B21; --texto-2: #667781; --aviso: #FFEECD; --aviso-tx: #54656F; --barra: #F0F2F5; --campo: #fff;
  --painel: #FBF7F0; --painel-tx: #2A2622; --painel-2: #6F665C; --linha: #E6DDD0; --acento: #00A884;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --topo-bg: #202C33; --topo-tx: #E9EDEF; --fundo-chat: #0B141A; --recebida: #202C33; --enviada: #005C4B;
    --texto: #E9EDEF; --texto-2: #8696A0; --aviso: #182229; --aviso-tx: #FFD279; --barra: #202C33; --campo: #2A3942;
    --painel: #1C1A18; --painel-tx: #F1E9DD; --painel-2: #B5AA9C; --linha: #3A3530;
  }
}
:root[data-theme="dark"] {
  --topo-bg: #202C33; --topo-tx: #E9EDEF; --fundo-chat: #0B141A; --recebida: #202C33; --enviada: #005C4B;
  --texto: #E9EDEF; --texto-2: #8696A0; --aviso: #182229; --aviso-tx: #FFD279; --barra: #202C33; --campo: #2A3942;
  --painel: #1C1A18; --painel-tx: #F1E9DD; --painel-2: #B5AA9C; --linha: #3A3530;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--estudio-2); color: var(--texto); font: 15px/1.4 var(--zap); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; cursor: pointer; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- palco: celular no centro, apresentação e visão da loja ao lado ---------- */
.palco { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 400px minmax(0, 1fr); gap: 40px; align-items: center; padding: 24px 32px;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, #4A4540 0%, var(--estudio) 45%, var(--estudio-2) 100%); }
.apresentacao { color: var(--luz); max-width: 380px; justify-self: end; font-family: var(--sans); }
.apresentacao .selo { border-radius: 50%; display: block; margin-bottom: 20px; }
.rotulo { font: 500 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--champanhe-claro); margin: 0 0 14px; }
.apresentacao h1 { font: 400 44px/1.04 var(--serif); margin: 0 0 18px; letter-spacing: -.01em; }
.apresentacao h1 em { color: var(--champanhe-claro); }
.apresentacao p { font-size: 14px; line-height: 1.6; color: #E8DCC8; margin: 0 0 14px; }
.apresentacao .nota { color: #B9AE9E; font-size: 12.5px; border-top: 1px solid #5A544D; padding-top: 14px; }

.aparelho { height: min(860px, calc(100dvh - 48px)); width: 400px; display: flex; flex-direction: column; overflow: hidden; position: relative;
  border-radius: 36px; border: 10px solid #121110; background: var(--fundo-chat); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px #4A4540; }

/* ---------- topo estilo WhatsApp ---------- */
.topo { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: var(--topo-bg); color: var(--topo-tx); flex: none; }
.avatar { border-radius: 50%; background: #fff; flex: none; }
.quem { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.quem strong { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quem span { font-size: 12.5px; opacity: .85; }
.botao-topo { background: rgba(255,255,255,.14); color: inherit; border: 0; border-radius: 18px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.botao-topo.icone { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.botao-topo svg { width: 18px; height: 18px; fill: currentColor; }
#abrir-loja { display: none; }

/* ---------- conversa ---------- */
.conversa { flex: 1; overflow-y: auto; padding: 10px 14px 6px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain;
  background-color: var(--fundo-chat);
  background-image: radial-gradient(circle at 20% 20%, rgba(0,0,0,.025) 1.5px, transparent 1.6px), radial-gradient(circle at 70% 60%, rgba(0,0,0,.025) 1.5px, transparent 1.6px);
  background-size: 28px 28px, 36px 36px; }
.dia { align-self: center; margin: 4px 0 8px; }
.dia span { background: var(--recebida); color: var(--texto-2); font-size: 12px; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(0,0,0,.13); text-transform: uppercase; }
.aviso-sistema { align-self: center; max-width: 92%; text-align: center; background: var(--aviso); color: var(--aviso-tx); font-size: 12.5px; padding: 7px 12px; border-radius: 8px; margin: 0 0 10px; box-shadow: 0 1px .5px rgba(0,0,0,.13); }

.balao { position: relative; max-width: 82%; padding: 6px 8px 7px 9px; border-radius: 8px; box-shadow: 0 1px .5px rgba(0,0,0,.13); word-wrap: break-word; white-space: pre-wrap; animation: surge .22s ease-out; }
.balao .hora { float: right; font-size: 11px; color: var(--texto-2); margin: 6px 0 -4px 10px; line-height: 1; white-space: nowrap; }
.balao .hora svg { width: 16px; height: 11px; fill: #53BDEB; vertical-align: -1px; margin-left: 2px; }
.recebida { align-self: flex-start; background: var(--recebida); }
.enviada { align-self: flex-end; background: var(--enviada); }
.primeira.recebida { border-top-left-radius: 0; margin-top: 6px; }
.primeira.enviada { border-top-right-radius: 0; margin-top: 6px; }
.balao b { font-weight: 600; }
.balao.falhou { opacity: .75; }
.reenviar { display: block; margin: 4px 0 0 auto; background: none; border: 0; color: #D93025; font-size: 12px; padding: 0; }
@keyframes surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* fotos: como imagem do WhatsApp; duas ou mais viram álbum */
.fotos { align-self: flex-start; max-width: 82%; width: 290px; background: var(--recebida); padding: 3px; border-radius: 8px; box-shadow: 0 1px .5px rgba(0,0,0,.13); animation: surge .22s ease-out; margin-top: 4px; }
.fotos .grade { display: grid; gap: 3px; }
.fotos.varias .grade { grid-template-columns: 1fr 1fr; }
.foto { position: relative; border: 0; padding: 0; background: #D7CFC4; border-radius: 6px; overflow: hidden; display: block; width: 100%; aspect-ratio: 3 / 4; }
.fotos:not(.varias) .foto { aspect-ratio: 4 / 5; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .legenda { position: absolute; inset: auto 0 0 0; padding: 22px 7px 6px; text-align: left; color: #fff; font-size: 12px; line-height: 1.25;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.foto .legenda b { display: block; font-size: 13px; font-weight: 600; }
.fotos .hora { display: block; text-align: right; font-size: 11px; color: var(--texto-2); padding: 3px 5px 1px; }

.digitando { align-self: flex-start; background: var(--recebida); border-radius: 8px; border-top-left-radius: 0; padding: 11px 14px; margin-top: 6px; box-shadow: 0 1px .5px rgba(0,0,0,.13); display: flex; gap: 4px; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-2); opacity: .5; animation: pisca 1.2s infinite; }
.digitando i:nth-child(2) { animation-delay: .2s; } .digitando i:nth-child(3) { animation-delay: .4s; }
@keyframes pisca { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: .9; transform: translateY(-2px); } }

.sugestoes { display: flex; gap: 6px; overflow-x: auto; padding: 6px 10px 2px; background: var(--fundo-chat); flex: none; scrollbar-width: none; }
.sugestoes::-webkit-scrollbar { display: none; }
.sugestoes button { flex: none; border: 1px solid rgba(0,168,132,.4); background: var(--recebida); color: var(--acento); border-radius: 18px; padding: 7px 12px; font-size: 13px; }
.sugestoes[hidden] { display: none; }
.sugestoes .sugestao-print { background: var(--acento); color: #fff; border-color: var(--acento); font-weight: 600; }

.barra { display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--barra); flex: none; }
.barra textarea { flex: 1; resize: none; border: 0; border-radius: 22px; padding: 10px 14px; font: 15px/1.35 var(--zap); background: var(--campo); color: var(--texto); max-height: 120px; outline: none; }
.barra button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--acento); color: #fff; display: grid; place-items: center; flex: none; }
.barra button svg { width: 22px; height: 22px; fill: currentColor; margin-left: 2px; }
.barra button:disabled { opacity: .5; cursor: default; }
.anexar { width: 40px; height: 44px; display: grid; place-items: center; color: var(--texto-2); cursor: pointer; flex: none; border-radius: 50%; }
.anexar svg { width: 24px; height: 24px; fill: currentColor; transform: rotate(45deg); }
.anexar:focus-within, .anexar:hover { color: var(--acento); }
.balao .foto-enviada { display: block; max-width: 240px; width: 100%; border-radius: 6px; margin: -2px -4px 4px; cursor: zoom-in; }

/* ---------- visão da loja ---------- */
.loja { justify-self: start; width: 100%; max-width: 380px; max-height: calc(100dvh - 48px); overflow-y: auto; background: var(--painel); color: var(--painel-tx);
  border-radius: 22px; padding: 22px; font-family: var(--sans); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.loja-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.loja .rotulo { color: var(--champanhe); }
.loja h2 { font: 400 28px/1.1 var(--serif); margin: 0 0 14px; }
.fechar { background: none; border: 0; font-size: 28px; line-height: 1; color: inherit; padding: 0 4px; display: none; }
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 20px; background: #EAE2D4; color: #5B4B33; margin: 0 0 16px; }
.status.agendada { background: #D9F2E6; color: #0B6B4A; }
.status.equipe { background: #FCE3D5; color: #9A3B12; }
.secao { border-top: 1px solid var(--linha); padding: 13px 0; }
.secao h3 { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--painel-2); margin: 0 0 10px; }
.campos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.campos dt { color: var(--painel-2); }
.campos dd { margin: 0; font-weight: 500; }
.campos dd.vazio { color: #B4A994; font-weight: 400; font-style: italic; }
.miniaturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.miniaturas figure { margin: 0; font-size: 11px; line-height: 1.2; }
.miniaturas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 4px; background: #D7CFC4; }
.pedido { background: #FFF4EC; color: #6B3417; border-radius: 10px; padding: 9px 11px; font-size: 13px; margin: 0 0 6px; }
.prova { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.loja .nota { font-size: 12px; color: var(--painel-2); line-height: 1.55; margin: 10px 0 0; }
.custo { margin-top: 12px; font: 12px/1.5 ui-monospace, monospace; color: var(--painel-2); background: rgba(0,0,0,.04); padding: 8px 10px; border-radius: 8px; }

/* ---------- foto grande e bloqueio ---------- */
.foto-grande { position: fixed; inset: 0; background: rgba(10,10,10,.92); display: grid; place-items: center; z-index: 20; padding: 24px; }
.foto-grande[hidden], .bloqueio[hidden] { display: none; }
.foto-grande img { max-width: min(560px, 100%); max-height: 78dvh; border-radius: 8px; }
.foto-grande p { color: #eee; text-align: center; margin: 12px 0 0; font-size: 14px; }
.foto-grande .fechar { display: block; position: absolute; top: 14px; right: 18px; color: #fff; font-size: 36px; }
.bloqueio { position: fixed; inset: 0; z-index: 30; background: var(--estudio-2); color: var(--luz); display: grid; place-content: center; justify-items: center; gap: 16px; font-family: var(--sans); text-align: center; padding: 24px; }
.bloqueio img { border-radius: 50%; }

/* ---------- tablet e celular: a conversa ocupa a tela; a visão da loja abre por cima ---------- */
@media (max-width: 1180px) {
  .palco { grid-template-columns: 1fr; padding: 0; gap: 0; background: var(--fundo-chat); }
  .apresentacao { display: none; }
  .aparelho { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; max-width: 760px; justify-self: center; }
  #abrir-loja { display: inline-block; }
  .loja { position: fixed; inset: auto 0 0 0; max-width: none; max-height: 86dvh; border-radius: 22px 22px 0 0; z-index: 10; transform: translateY(102%); transition: transform .32s cubic-bezier(.22,1,.36,1); visibility: hidden; }
  .loja.aberta { transform: none; visibility: visible; }
  .fechar { display: block; }
}
@media (max-width: 380px) {
  .quem strong { font-size: 15px; }
  .botao-topo { padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}