/* ═══════════════════════════════════════════
   ROGUE XPRESS — Chat de atendimento (widget)
   ═══════════════════════════════════════════ */

/* --rxc-lift: altura da barra flutuante de compra, quando ela está na tela.
   O store.js atualiza no scroll para o atendimento nunca cobrir o COMPRAR AGORA. */
.rxc-bolha {
  position: fixed;
  right: 18px;
  bottom: calc(18px + var(--rxc-lift, 0px));
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #9E7118, #C38F2A 45%, #DCA940);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(195, 143, 42, 0.5);
  z-index: 1200;
  transition: transform 0.2s, bottom 0.3s ease;
}
.rxc-bolha:hover { transform: scale(1.07); }
.rxc-bolha svg { width: 26px; height: 26px; }
.rxc-bolha .rxc-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  background: #D93B3B;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-family: 'Roboto', sans-serif;
}
.rxc-bolha .rxc-badge.on { display: inline-flex; }

/* Painel */
.rxc-painel {
  position: fixed;
  right: 18px;
  bottom: calc(88px + var(--rxc-lift, 0px));
  width: min(360px, calc(100vw - 28px));
  /* dvh acompanha a barra do navegador do celular, que 100vh ignora —
     sem isso o campo de digitar fica embaixo da barra e some. */
  height: min(500px, calc(100vh - 120px - var(--rxc-lift, 0px)));
  height: min(500px, calc(100dvh - 120px - var(--rxc-lift, 0px)));
  transition: bottom 0.3s ease;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(14, 33, 56, 0.35);
  border: 1px solid #E6E9EE;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 1201;
  font-family: 'Roboto', -apple-system, sans-serif;
}
.rxc-painel.aberto { display: flex; animation: rxcSobe 0.25s ease; }
@keyframes rxcSobe {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.rxc-head {
  background: linear-gradient(135deg, #163154, #0E2138);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rxc-head .rxc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C38F2A, #DCA940);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  flex-shrink: 0;
}
.rxc-head b { font-size: 14px; display: block; }
.rxc-head small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  gap: 5px;
}
.rxc-head small::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2BC163;
}
.rxc-fechar {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.rxc-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #F4F6F9;
}
.rxc-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.rxc-msg.suporte {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #E6E9EE;
  color: #1B2733;
  border-bottom-left-radius: 5px;
}
.rxc-msg.cliente {
  align-self: flex-end;
  background: linear-gradient(135deg, #163154, #23477A);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.rxc-msg .rxc-hora {
  display: block;
  font-size: 10px;
  opacity: 0.6;
  margin-top: 3px;
  text-align: right;
}
/* Formulário de cadastro (antes da conversa) */
.rxc-form {
  flex: 1;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px;
  background: #F4F6F9;
  overflow-y: auto;
}
.rxc-form.aberto { display: flex; }
.rxc-form p {
  font-size: 13.5px;
  color: #1B2733;
  font-weight: 700;
  margin: 0 0 2px;
}
.rxc-form input {
  height: 44px;
  border: 1.5px solid #E6E9EE;
  border-radius: 11px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #fff;
}
.rxc-form input:focus { border-color: #C38F2A; }
.rxc-form .rxc-form-erro {
  color: #D93B3B;
  font-size: 12px;
  font-weight: 700;
  min-height: 14px;
}
.rxc-form button {
  height: 46px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #9E7118, #C38F2A 45%, #DCA940);
  color: #fff;
  font-size: 14.5px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(195, 143, 42, 0.35);
}
.rxc-form button:hover { filter: brightness(1.06); }

.rxc-composer {
  display: flex;
  gap: 8px;
  padding: 11px;
  background: #fff;
  border-top: 1px solid #E6E9EE;
}
.rxc-composer input {
  flex: 1;
  height: 42px;
  border: 1.5px solid #E6E9EE;
  border-radius: 999px;
  padding: 0 15px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.rxc-composer input:focus { border-color: #C38F2A; }
.rxc-composer button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #9E7118, #C38F2A 45%, #DCA940);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rxc-composer button:hover { filter: brightness(1.06); }

@media (max-width: 480px) {
  /* o --rxc-lift precisa continuar valendo aqui: é justamente no celular
     que a barra flutuante de compra passa embaixo do atendimento */
  .rxc-painel { right: 14px; bottom: calc(84px + var(--rxc-lift, 0px)); }
  .rxc-bolha { right: 14px; bottom: calc(14px + var(--rxc-lift, 0px)); }
}

/* Campo de formulário no celular: abaixo de 16px o iOS dá zoom sozinho ao
   focar e não volta. Precisa de !important para vencer as regras acima,
   que são mais específicas — é contorno de comportamento do aparelho,
   não escolha de design. */
@media (max-width: 768px) {
  .rxc-form input,
  .rxc-composer input { font-size: 16px !important; }
}