/* Check-in do concerto: tela de conversa. Cores tiradas do cartaz da OSFAB. */
:root {
  --noite: #070a12;
  --palco: #0c1328;
  --balao: #131c36;
  --ouro: #e3a339;
  --ouro-claro: #f4cd7c;
  --prata: #b8c4d9;
  --texto: #eef1f7;
  --sutil: #8d98ad;
  --linha: rgba(227, 163, 57, .22);
  --tinta: #1b1306;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--noite); }
body {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; }

/* ---------- estrutura ---------- */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 1fr; }
.palco { display: none; }
.conversa {
  display: flex; flex-direction: column; min-height: 0; height: 100vh; height: 100dvh;
  background: linear-gradient(180deg, var(--noite) 0%, var(--palco) 100%);
}
.rolagem { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2a3555 transparent; }

.cartaz { margin: 0; position: relative; line-height: 0; }
.cartaz img { width: 100%; height: auto; display: block; }
.cartaz::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(180deg, rgba(7, 10, 18, 0), var(--noite));
}

@media (min-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr) 460px; }
  .palco { display: block; position: relative; overflow: hidden; background: #05070d; }
  .palco::before {
    content: ""; position: absolute; inset: -80px;
    background: url(banner-osfab-960.jpg) center / cover no-repeat;
    filter: blur(48px) brightness(.32) saturate(1.2);
  }
  .palco img { position: relative; width: 100%; height: 100%; object-fit: contain; }
  .cartaz { display: none; }
  .conversa { border-left: 1px solid var(--linha); }
}

/* ---------- barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(7, 10, 18, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.barra-emblema { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.barra-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-texto strong { font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 16px; color: var(--ouro-claro); letter-spacing: .01em; }
.barra-texto span { font-size: 12.5px; color: var(--sutil); }
.recomecar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid rgba(184, 196, 217, .22); background: transparent; color: var(--prata);
  display: grid; place-items: center;
}
.recomecar:hover { color: var(--ouro-claro); border-color: var(--ouro); }

/* ---------- mensagens ---------- */
.fio {
  list-style: none; margin: 0 auto; padding: 18px 14px 12px; max-width: 640px;
  display: flex; flex-direction: column; gap: 10px;
}
.msg { display: flex; align-items: flex-end; gap: 8px; animation: entra .2s ease-out; }
.msg.eu { justify-content: flex-end; }
.avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.balao {
  max-width: 82%; padding: 11px 15px;
  font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere;
}
.bot .balao {
  background: var(--balao); border: 1px solid rgba(184, 196, 217, .1);
  border-radius: 18px 18px 18px 6px;
}
.bot .balao b { color: var(--ouro-claro); font-weight: 600; }
.eu .balao {
  background: var(--ouro); color: var(--tinta); font-weight: 600;
  border-radius: 18px 18px 6px 18px;
}
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.digitando { display: inline-flex; gap: 5px; padding: 4px 0; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--prata); opacity: .35; animation: pisca 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pisca { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: .9; transform: translateY(-3px); } }

/* ---------- compositor ---------- */
.compositor {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(7, 10, 18, .94);
  border-top: 1px solid var(--linha);
}
.compositor:empty { padding: 0 0 env(safe-area-inset-bottom); border-top: 0; }
.compositor > * { max-width: 612px; margin-left: auto; margin-right: auto; }

.com-opcoes { display: flex; flex-direction: column; gap: 8px; }
.com-opcoes.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.com-opcoes.grade .discreto { grid-column: 1 / -1; }
.com-opcoes > .opcao { width: 100%; max-width: 612px; }

.opcao {
  min-height: 50px; padding: 12px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(227, 163, 57, .5); background: transparent;
  color: var(--ouro-claro); font-size: 16px; font-weight: 600; line-height: 1.25;
  transition: background .15s, transform .1s;
}
@media (hover: hover) { .opcao:hover { background: rgba(227, 163, 57, .1); } }
.opcao:active { transform: scale(.98); }
.opcao.destaque { background: var(--ouro); border-color: var(--ouro); color: var(--tinta); }
@media (hover: hover) { .opcao.destaque:hover { background: var(--ouro-claro); } }
.opcao.discreto { border-color: rgba(184, 196, 217, .25); color: var(--prata); font-weight: 500; }
.opcao:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.opcao.largo { width: 100%; display: block; }
.pular { width: 100%; display: block; margin-top: 8px; min-height: 44px; }

:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 2px; }

.campo { display: flex; gap: 8px; }
.campo input {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px; border-radius: 14px;
  border: 1px solid rgba(184, 196, 217, .28); background: #0f1730; color: var(--texto);
  font: 500 17px Inter, sans-serif; outline: none;
}
.campo input::placeholder { color: #6f7a91; }
.campo input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(227, 163, 57, .2); }
.enviar {
  width: 52px; height: 52px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ouro); color: var(--tinta); display: grid; place-items: center;
}
.treme { animation: treme .35s; }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* lista de ingressos do mesmo e-mail ou nome */
.lista { max-height: 46vh; overflow-y: auto; margin-bottom: 10px; }
.item {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 12px;
  border: 1px solid rgba(184, 196, 217, .18); background: #0f1730;
}
.item input { position: absolute; opacity: 0; pointer-events: none; }
.marca {
  width: 24px; height: 24px; flex: none; border-radius: 7px;
  border: 2px solid var(--ouro); display: grid; place-items: center;
}
.item input:checked + .marca { background: var(--ouro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231b1306' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.item:has(input:checked) { border-color: var(--ouro); background: rgba(227, 163, 57, .08); }
.item input:focus-visible + .marca { outline: 3px solid var(--ouro-claro); outline-offset: 2px; }
.item .nome { font-size: 16px; font-weight: 500; display: flex; flex-direction: column; }
.item small { color: var(--sutil); font-size: 13px; font-weight: 400; }
.item.feito { opacity: .55; cursor: default; }
.item.feito .marca { border-color: var(--sutil); }

/* ---------- confirmação ---------- */
.msg.final { justify-content: center; }
.bilhete {
  position: relative; width: 100%; max-width: 420px; margin: 8px auto 4px;
  padding: 26px 22px 18px; text-align: center; border-radius: 20px;
  background: linear-gradient(165deg, #182446 0%, #0c1329 70%);
  border: 1px solid rgba(227, 163, 57, .6);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(244, 205, 124, .15);
}
/* recortes de canhoto de ingresso */
.bilhete::before, .bilhete::after {
  content: ""; position: absolute; bottom: 64px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--palco); border: 1px solid rgba(227, 163, 57, .6);
}
.bilhete::before { left: -12px; clip-path: inset(0 0 0 50%); }
.bilhete::after { right: -12px; clip-path: inset(0 50% 0 0); }

.anel { display: inline-block; width: 84px; height: 84px; }
.anel svg { width: 100%; height: 100%; }
.anel circle { fill: rgba(227, 163, 57, .08); stroke: var(--ouro); stroke-width: 2.5; }
.anel path { fill: none; stroke: var(--ouro-claro); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.anel.anima circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: traca .6s ease-out forwards; }
.anel.anima path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: traca .35s .5s ease-out forwards; }
@keyframes traca { to { stroke-dashoffset: 0; } }

.bilhete h2 {
  font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 25px; line-height: 1.2;
  color: var(--ouro-claro); margin: 10px 0 14px;
}
.pessoas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pessoas li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.p-nome { font-size: 18px; font-weight: 600; }
.p-hora {
  font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 34px; line-height: 1.1;
  color: var(--ouro); font-variant-numeric: tabular-nums;
}
.selo {
  margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ouro-claro);
  padding: 3px 10px; border-radius: 20px; background: rgba(227, 163, 57, .12);
}
.bilhete-pe {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed rgba(227, 163, 57, .4);
  font-size: 13.5px; line-height: 1.5; color: var(--sutil);
}

.aviso-js { margin: 16px; padding: 14px; border-radius: 12px; background: var(--balao); }
.aviso-js a { color: var(--ouro-claro); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 380px) {
  .balao { font-size: 15px; }
  .p-hora { font-size: 30px; }
}