/* ============================================================================
   Chrome PADRÃO das páginas públicas do SaaS (cardápio, checkout, conta).
   Só o topo: logo à esquerda, acesso do cliente à direita. Sem rodapé.
   A cor vem da casa via --casa, então o padrão veste a marca de cada cliente.
   ========================================================================== */

/* ── As alturas do chrome, em UM lugar só ─────────────────────────────────────
   Quem gruda embaixo do topo (a barra do cardápio, as abas de categoria) precisa
   saber exatamente onde ele acaba. Enquanto esses números viviam copiados dentro
   de cada página, o cardápio grudava a 86px — a altura do MENU RICO, que ele nem
   carrega — e sobrava um vão de 14px por onde o conteúdo passava por trás da
   barra enquanto o cliente rolava. Mexeu na altura do topo, mexeu aqui, e as
   três barras continuam empilhadas. */
:root {
  --cs-topo-h: 4.5rem;      /* .cs-topo */
  --cs-cardbar-h: 3.75rem;  /* a barra "Cardápio + busca" */
  --cs-tabs-h: 3.5rem;      /* as abas de categoria */
}

.cs-topo {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0 4%;
  height: var(--cs-topo-h);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cs-marca { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.cs-marca img { height: 2.6rem; width: auto; max-width: 42vw; object-fit: contain; }
.cs-marca-txt {
  font-weight: 800; font-size: 1.05rem; color: #23161C; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cs-acesso { flex: 0 0 auto; }

.cs-entrar {
  display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1.15rem;
  border-radius: 999px; text-decoration: none;
  background: var(--casa, #E5147E); color: #fff;
  font-weight: 700; font-size: .88rem;
  box-shadow: 0 8px 20px -10px var(--casa, #E5147E);
  transition: filter .16s, transform .16s;
}
.cs-entrar:hover { filter: brightness(1.07); transform: translateY(-1px); }

.cs-conta {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 2.4rem; padding: .25rem .95rem .25rem .3rem;
  border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(0, 0, 0, .09); background: #fff; color: #2B1620;
  transition: border-color .16s;
}
.cs-conta:hover { border-color: var(--casa, #E5147E); }
.cs-av {
  width: 1.85rem; height: 1.85rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--casa, #E5147E); color: #fff; font-weight: 800; font-size: .82rem;
}
.cs-nome {
  font-size: .86rem; font-weight: 600; max-width: 8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 30rem) {
  :root { --cs-topo-h: 4rem; --cs-cardbar-h: 3.5rem; --cs-tabs-h: 3.25rem; }
  .cs-topo { padding: 0 4%; }
  .cs-marca img { height: 2.2rem; }
  .cs-nome { display: none; }
}

/* Chamada do cardápio (texto do Editor de Site). Some quando o dono não escreve. */
.sc-hero { padding: 2.2rem 5% 1.2rem; text-align: center; }
.sc-hero-t { margin: 0; font-size: clamp(1.4rem, 3.6vw, 2.1rem); font-weight: 800;
  letter-spacing: -.02em; color: #23161C; text-wrap: balance; }
.sc-hero-s { margin: .5rem auto 0; max-width: 34rem; font-size: clamp(.9rem, 1.8vw, 1rem);
  color: #6E5A64; line-height: 1.5; }

/* Único elemento de rodapé do padrão SaaS: uma linha discreta. Nada mais. */
.cs-credito {
  padding: .7rem 5%;
  margin: 0;
  text-align: center;
  font-size: .72rem;
  line-height: 1.3;
  color: #A2919B;
  border-top: 1px solid rgba(0, 0, 0, .05);
}
.cs-credito b { font-weight: 600; color: #8A7280; }

/* ══════════════════════════════════════════════════════════════════════════
   Cheff Jarvis no site do restaurante — mesmo modelo do Jarvis da home do
   Cheffzy (gatilho no canto + painel), vestindo a cor da casa via --casa.
   ════════════════════════════════════════════════════════════════════════ */

.cj-gatilho {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9000;
  display: flex; align-items: center; gap: .6rem;
  border: 0; border-radius: 999px; padding: .5rem .95rem .5rem .5rem;
  background: var(--casa, #E5147E); color: #fff; cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: transform .16s, filter .16s;
}
.cj-gatilho:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cj-gatilho[aria-expanded="true"] { opacity: 0; pointer-events: none; transform: translateY(10px); }
.cj-gatilho-face {
  width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #fff; color: var(--casa, #E5147E);
}
.cj-gatilho-face img { width: 100%; height: 100%; object-fit: cover; }
.cj-gatilho-copy { text-align: left; line-height: 1.15; }
.cj-gatilho-copy strong { display: block; font-size: .86rem; }
.cj-gatilho-copy span { display: block; font-size: .68rem; opacity: .9; margin-top: .1rem; }

.cj-painel {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9001;
  width: min(23rem, calc(100% - 2rem)); height: min(32rem, calc(100% - 2rem));
  display: none; grid-template-rows: auto 1fr auto auto;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 28px 70px -22px rgba(0, 0, 0, .45);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cj-painel.aberto { display: grid; }

.cj-topo {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .75rem .9rem; background: var(--casa, #E5147E); color: #fff;
}
.cj-topo-info { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cj-face {
  width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #fff; color: var(--casa, #E5147E);
}
.cj-face img { width: 100%; height: 100%; object-fit: cover; }
.cj-topo strong { display: block; font-size: .92rem; }
.cj-topo span { display: flex; align-items: center; gap: .3rem; font-size: .68rem; opacity: .9; }
.cj-pulso { width: .4rem; height: .4rem; border-radius: 50%; background: #7BE0AE; display: inline-block; }
.cj-x { border: 0; background: rgba(255,255,255,.16); color: #fff; width: 1.8rem; height: 1.8rem;
  border-radius: 8px; cursor: pointer; font-size: .8rem; flex: none; }

.cj-corpo {
  overflow-y: auto; padding: .9rem; background: #FAF7F9;
  display: flex; flex-direction: column; gap: .5rem;
}
.cj-msg {
  max-width: 85%; padding: .55rem .8rem; border-radius: 14px;
  font-size: .87rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.cj-msg--bot, .cj-msg--atendente {
  align-self: flex-start; background: #fff; color: #2B1620;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
/* O cliente precisa perceber de relance quando passou a falar com GENTE. */
.cj-msg--atendente { border-left: 3px solid var(--casa, #E5147E); }
.cj-msg--cliente { align-self: flex-end; background: var(--casa, #E5147E); color: #fff; }
.cj-msg--sistema { align-self: center; background: none; color: #8A7280;
  font-size: .75rem; text-align: center; padding: .15rem .4rem; }
.cj-typing { opacity: .6; }

.cj-sugestoes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.cj-sugestao {
  border: 1px solid #E3D6DD; background: #fff; color: #6E5A64;
  border-radius: 999px; padding: .3rem .65rem; font: inherit; font-size: .74rem; cursor: pointer;
}
.cj-sugestao:hover { border-color: var(--casa, #E5147E); color: var(--casa, #E5147E); }

.cj-chamar {
  border: 0; border-top: 1px solid rgba(0, 0, 0, .07); background: #fff;
  color: var(--casa, #E5147E); font: 700 .82rem inherit; padding: .6rem; cursor: pointer;
}
.cj-chamar:hover { background: #FBF7F9; }

.cj-envio { display: flex; gap: .4rem; padding: .6rem; background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .07); }
.cj-campo {
  flex: 1 1 auto; min-width: 0; border: 1px solid #E3D6DD; border-radius: 999px;
  padding: .55rem .9rem; font: inherit; font-size: .86rem; outline: none; color: #2B1620;
}
.cj-campo:focus { border-color: var(--casa, #E5147E); }
.cj-enviar {
  flex: none; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%;
  background: var(--casa, #E5147E); color: #fff; cursor: pointer; font-size: .85rem;
}

@media (max-width: 30rem) {
  .cj-painel { right: .5rem; bottom: .5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); }
  .cj-gatilho-copy { display: none; }
  .cj-gatilho { padding: .5rem; }
}