/* Simulador de Atendimento WhatsApp — Ortobom. Mobile-first, ~480px centralizado. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #dfe4e8;
  color: #111;
  line-height: 1.4;
}

/* container único */
.page-header, #app, .landing { max-width: 480px; margin: 0 auto; }

/* header de página (casca da loja) */
.page-header {
  display: flex; align-items: center; gap: 8px;
  background: #075E54; color: #fff;
  padding: 12px 14px;
  position: sticky; top: 0; z-index: 20;
}
.page-back {
  color: #fff; text-decoration: none; font-size: 26px; line-height: 1;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.page-title { font-size: 15px; font-weight: 600; }

/* 68px = altura real do .page-header (botão back 44px + padding 12px*2) */
#app { background: #fff; min-height: calc(100vh - 68px); display: block; }

/* ---- landing ---- */
.landing { padding: 24px 16px 40px; }
.landing h1 { font-size: 20px; margin-bottom: 6px; }
.landing .sub { color: #555; font-size: 14px; margin-bottom: 20px; }
.loja-card {
  display: block; text-decoration: none; color: #111;
  background: #f5f6f8; border: 1px solid #d7dbe0; border-radius: 12px;
  padding: 18px 16px; margin-bottom: 14px;
}
.loja-card:hover { background: #eef0f3; }
.loja-card .nome { font-size: 17px; font-weight: 700; color: #075E54; }
.loja-card .meta { font-size: 13px; color: #555; margin-top: 4px; }
.aviso {
  margin-top: 20px; font-size: 12px; color: #666;
  background: #fff8e1; border: 1px solid #ffe0a3; border-radius: 8px; padding: 10px 12px;
}

/* ---- lista de cenários ---- */
.lista { padding: 14px 12px 32px; }
.lista-sub { font-size: 13px; color: #555; margin: 4px 4px 14px; }
.cenario-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #d7dbe0; border-radius: 12px;
  padding: 14px; margin-bottom: 12px; font: inherit; color: inherit;
}
.cenario-card:hover { border-color: #075E54; }
.cenario-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cenario-titulo { font-size: 16px; font-weight: 700; }
.cenario-estrelas { color: #e0a800; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.cenario-ctx { font-size: 13px; color: #555; margin: 6px 0; }
.cenario-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cenario-cliente { font-size: 12px; color: #5a5a5a; }
.cenario-best, .cenario-ultima { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }

/* cores de nota (badge/feedback) — texto escuro pra contraste */
.cor-verde { background: #d4edda; color: #145724; }
.cor-amarela { background: #fff3cd; color: #7a5b00; }
.cor-vermelha { background: #f8d7da; color: #7a1c25; }

/* ---- chat ---- */
.chat-screen { display: flex; flex-direction: column; }
.chat-header {
  display: flex; align-items: center; gap: 10px;
  background: #075E54; color: #fff; padding: 8px 10px;
  position: sticky; top: 68px; z-index: 10; /* 68px = altura do .page-header acima */
}
.chat-back {
  background: none; border: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-progresso { margin-left: auto; font-size: 12px; color: #cfeee8; white-space: nowrap; }
.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #0b7a6e;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.chat-id { display: flex; flex-direction: column; line-height: 1.2; }
.chat-nome { font-size: 15px; font-weight: 600; }
.chat-perfil { font-size: 12px; color: #cfeee8; }

.chat-body {
  min-height: 52vh;
  padding: 12px 10px;
  background-color: #e5ddd5;
  background-image: radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px);
  background-size: 18px 18px;
  display: flex; flex-direction: column;
}
.bolha {
  max-width: 82%; padding: 8px 11px; margin-bottom: 8px; border-radius: 8px;
  font-size: 14px; word-wrap: break-word; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}
.bolha-cliente { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.bolha-vendedor { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 2px; }
.bolha-typing { color: #888; font-style: italic; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

.chat-foot { padding: 10px; background: #f0f2f5; border-top: 1px solid #d7dbe0; }
.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao-btn {
  width: 100%; min-height: 44px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #c8ccd2; border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 14px; color: #111;
}
.opcao-btn:hover { border-color: #075E54; background: #f7fdfb; }
.dica-btn {
  margin-bottom: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  background: #fff8e1; border: 1px solid #ffe0a3; color: #7a5b00; border-radius: 8px;
  padding: 6px 12px; min-height: 44px;
}
.dica-btn[disabled] { opacity: .5; cursor: default; }
.dica-texto { font-size: 13px; color: #7a5b00; background: #fff8e1; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }

.feedback { border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.feedback-nota { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.feedback-txt { font-size: 13px; }
.feedback-regra { font-size: 12px; margin-top: 6px; opacity: .85; }
.cont-btn, .btn-primario {
  width: 100%; min-height: 46px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600;
  background: #075E54; color: #fff; border: none; border-radius: 10px; padding: 11px;
}
.cont-btn:hover, .btn-primario:hover { background: #064a42; }

/* ---- resultado ---- */
.resultado { padding: 22px 16px 36px; text-align: center; }
.res-nota {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800;
}
.res-veredito { font-size: 16px; font-weight: 600; margin-bottom: 22px; }
.res-h { font-size: 14px; text-align: left; color: #555; margin-bottom: 10px; }
.res-revisao { text-align: left; }
.rev-item { border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.rev-top { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; }
.rev-escolha { font-size: 13px; margin-top: 4px; }
.rev-feedback { font-size: 12px; margin-top: 4px; }
.rev-regra { font-size: 12px; margin-top: 4px; opacity: .85; }
.rev-ideal { font-size: 12px; margin-top: 6px; font-weight: 600; color: #145724; background: #eaf6ec; border-radius: 6px; padding: 6px 8px; }
.res-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.btn-secundario {
  width: 100%; min-height: 46px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600;
  background: #fff; color: #075E54; border: 1px solid #075E54; border-radius: 10px; padding: 11px;
}
.btn-secundario:hover { background: #f0faf8; }

/* ---- erro ---- */
.erro { padding: 30px 20px; text-align: center; }
.erro h2 { font-size: 18px; margin-bottom: 10px; color: #7a1c25; }
.erro p { font-size: 14px; color: #555; margin-bottom: 8px; }
.erro-dica { font-size: 12px; color: #888; }

/* ---- utilitários ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.copy-helper { position: absolute; left: -9999px; top: 0; opacity: 0; }

/* ---- desktop (>=768px): lista em grid, chat/resultado seguem 480px ---- */
@media (min-width: 768px) {
  .page-header, #app, .landing { max-width: 900px; }
  .lista { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .lista .lista-sub { grid-column: 1 / -1; }
  .lista .cenario-card { margin-bottom: 0; }
  .chat-screen, .resultado { max-width: 480px; margin-left: auto; margin-right: auto; }
}