/* =========================================================
   MONTE SEU PEDIDO — js/briefing.js
   Esquerda: as escolhas. Direita: a mensagem montada ao vivo, num balão.
   ========================================================= */

.br-app { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.br-form, .br-previa {
  padding: 1.6rem; border-radius: 1.6rem;
  background: var(--glass-tint); border: 1px solid var(--glass-line); box-shadow: var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
}
html.perf-low .br-form, html.perf-low .br-previa { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
.br-form { display: grid; gap: 1.4rem; }

.br-grupo { border: 0; min-width: 0; }
.br-grupo legend { margin-bottom: .7rem; font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.br-grupo legend span { margin-left: .35rem; font-size: .8rem; font-weight: 400; color: var(--gray); }
.br-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.br-chip {
  padding: .55rem 1rem; border-radius: 980px; cursor: pointer; font: inherit; font-size: .9rem; letter-spacing: -.01em; color: var(--cream);
  background: color-mix(in srgb, var(--gray) 12%, transparent); border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--ease-out);
}
.br-chip[aria-pressed="true"] { color: #111; background: var(--accent); }
body.light-theme .br-chip[aria-pressed="true"] { color: #fff; }
.br-chip:active { transform: scale(.97); }
.br-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .br-chip:not([aria-pressed="true"]):hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } }

.br-campos { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.br-campo { display: grid; gap: .4rem; font-size: .88rem; font-weight: 500; color: var(--gray); }
.br-rot span { font-weight: 400; }
.br-campo input, .br-campo textarea {
  width: 100%; padding: .7rem .85rem; border-radius: .85rem; font: inherit; font-size: 1rem; color: var(--cream); resize: vertical;
  background: color-mix(in srgb, var(--gray) 12%, transparent); border: 1px solid var(--glass-line);
}
.br-campo input:focus-visible, .br-campo textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.br-campo textarea::placeholder { color: color-mix(in srgb, var(--gray) 80%, transparent); }

.br-previa { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.br-previa-topo { display: flex; align-items: center; gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--glass-line); }
.br-av { width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; font-weight: 700; color: #111; background: var(--accent); }
body.light-theme .br-av { color: #fff; }
.br-previa-topo span { display: grid; }
.br-previa-topo b { font-size: .98rem; font-weight: 600; }
.br-previa-topo small { font-size: .8rem; color: var(--gray); }
.br-balao {
  position: relative; justify-self: end; max-width: 100%; min-height: 4.5rem; padding: .9rem 1.05rem; border-radius: 1.1rem 1.1rem .35rem 1.1rem;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.5;
  color: #10261b; background: #d9fdd3;
}
body:not(.light-theme) .br-balao { color: #e9edef; background: #144d37; }
.br-aviso { font-size: .85rem; color: var(--accent); }
.br-aviso:empty { display: none; }
.br-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.br-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem 1.1rem; border-radius: 980px; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--cream);
  background: color-mix(in srgb, var(--gray) 14%, transparent); border: 1px solid var(--glass-line);
  transition: background-color .15s ease, opacity .15s ease, transform .16s var(--ease-out);
}
.br-btn.br-whats { color: #fff; background: #1f8f4e; border-color: transparent; }
.br-btn[aria-disabled="true"] { opacity: .45; }
.br-btn:active { transform: scale(.97); }
.br-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .br-btn:not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--gray) 24%, transparent); }
  .br-btn.br-whats:not([aria-disabled="true"]):hover { background: #19773f; }
}
.br-nota { font-size: .8rem; line-height: 1.5; color: var(--gray); }

@media (max-width: 1000px) { .br-app { grid-template-columns: 1fr; } .br-previa { position: static; } }
@media (max-width: 640px) {
  .br-form, .br-previa { padding: 1.15rem; border-radius: 1.3rem; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
  .br-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .br-chip, .br-btn { transition: none; } }