/* Assistente comercial da landing: superfície pública, sem compartilhar estilos do Core ERP. */
.landing-ai-assistant {
  --assistant-surface: #1f1f23;
  --assistant-surface-raised: #29292e;
  --assistant-border: rgba(255, 255, 255, .11);
  --assistant-text: #fafafa;
  --assistant-muted: #c4c4d0;
  --assistant-accent: #a78bfa;
  /* Identidade Nivela IA: violeta → azul → magenta (mesma família do app) */
  --nv-ai-1: #7c3aed;
  --nv-ai-2: #4f8bff;
  --nv-ai-3: #e879f9;
  --nv-ai-4: #a78bfa;
  --nv-ai-glow: rgba(124, 58, 237, .42);
  --nv-ai-glow-2: rgba(79, 139, 255, .26);
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  max-width: calc(100vw - 32px);
  font-family: 'Inter', sans-serif;
}

.landing-ai-assistant__panel {
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100dvh - 112px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--assistant-text);
  background: var(--assistant-surface);
  border: 1px solid var(--assistant-border);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .025) inset;
  position: relative;
  transform: translate3d(0, 14px, 0) scale(.96);
  transform-origin: bottom right;
  opacity: 0;
  /* Só transform/opacity: rodam na GPU. Blur/filter animado travava a abertura. */
  transition: opacity 220ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}
.landing-ai-assistant__panel[hidden] { display: none; }

.landing-ai-assistant.is-open .landing-ai-assistant__panel {
  opacity: 1;
  transform: none;
}

@keyframes nv-ai-rotate { to { transform: rotate(1turn); } }

/* Borda em gradiente que acende ao abrir e assenta discreta (só opacidade anima) */
.landing-ai-assistant__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--nv-ai-1), var(--nv-ai-2) 40%, var(--nv-ai-3) 75%, var(--nv-ai-4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .32;
  pointer-events: none;
  will-change: opacity;
}
.landing-ai-assistant.is-open .landing-ai-assistant__panel::before {
  animation: nv-ai-border-settle 1.2s ease-out 1;
}
@keyframes nv-ai-border-settle { from { opacity: 1; } to { opacity: .32; } }

.landing-ai-assistant__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #202124;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.landing-ai-assistant__identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.landing-ai-assistant__mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 13px;
  background: #17171b;
  box-shadow: 0 0 20px rgba(124, 58, 237, .2), 0 7px 18px rgba(0, 0, 0, .28);
}
.landing-ai-assistant__mark img { width: 25px; height: 25px; }
.landing-ai-assistant.is-open .landing-ai-assistant__mark img { animation: nv-ai-twinkle 900ms cubic-bezier(.22, 1, .36, 1) 1; }
@keyframes nv-ai-twinkle {
  0% { transform: scale(.4) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.landing-ai-assistant__eyebrow { display: block; margin-bottom: 2px; color: #a7a7ad; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.landing-ai-assistant__title { margin: 0; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.2; }
.landing-ai-assistant__subtitle { margin: 3px 0 0; color: #b5b5bb; font-size: 11.5px; line-height: 1.35; }

.landing-ai-assistant__close,
.landing-ai-assistant__toggle,
.landing-ai-assistant__send {
  display: inline-grid;
  place-items: center;
  border: 0;
  cursor: pointer;
}
.landing-ai-assistant__close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #fff;
  background: transparent;
  font-size: 21px;
  line-height: 1;
}
.landing-ai-assistant__close:hover { background: rgba(255, 255, 255, .13); }

.landing-ai-assistant__messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 130px;
  max-height: 342px;
  padding: 16px;
  overflow-y: auto;
  scrollbar-color: rgba(196, 181, 253, .42) transparent;
}
/* Cada mensagem nova entra com leve fade + foco */
.landing-ai-assistant__messages > * { animation: nv-ai-msg-in 360ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes nv-ai-msg-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }

/* "Pensando" da Nivela IA: pontos em gradiente + texto com brilho correndo */
.nv-ai-thinking { display: inline-flex; align-items: center; gap: 4px; }
.nv-ai-thinking i { width: 6px; height: 6px; border-radius: 999px; background: linear-gradient(135deg, var(--nv-ai-2), var(--nv-ai-3)); animation: nv-ai-dot 900ms infinite ease-in-out; }
.nv-ai-thinking i:nth-child(2) { animation-delay: 120ms; }
.nv-ai-thinking i:nth-child(3) { animation-delay: 240ms; }
.nv-ai-thinking::after {
  content: 'Pensando';
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(90deg, var(--nv-ai-4), var(--nv-ai-2), var(--nv-ai-3), var(--nv-ai-4));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nv-ai-shimmer 1.6s linear infinite;
}
@keyframes nv-ai-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes nv-ai-shimmer { to { background-position: -200% 0; } }
.landing-ai-assistant__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .11); }
.landing-ai-assistant__input {
  min-width: 0;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  color: var(--assistant-text);
  background: var(--assistant-surface-raised);
  font: inherit;
  font-size: 13px;
}
.landing-ai-assistant__input::placeholder { color: #a8a7b5; }
.landing-ai-assistant__input:focus { border-color: var(--assistant-accent); box-shadow: 0 0 0 3px rgba(167, 139, 250, .18); }
.landing-ai-assistant__send { width: 42px; min-width: 42px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #a78bfa, #7c3aed); box-shadow: 0 8px 18px rgba(91, 33, 175, .3); font-size: 16px; }
.landing-ai-assistant__send:hover { filter: brightness(1.1); transform: translateY(-1px); }

.landing-ai-assistant__toggle {
  position: relative;
  isolation: isolate;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: radial-gradient(circle at 32% 26%, #2e2742 0%, #1b1922 62%, #121017 100%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .46);
  transition: transform 200ms cubic-bezier(.22, 1, .36, 1);
}
/* Anel em gradiente girando: a borda "viva" da IA. Gira por transform (GPU),
   não por @property, que repintava o botão a cada quadro. */
.landing-ai-assistant__ring {
  position: absolute;
  inset: -2px;
  z-index: 0;
  overflow: hidden;
  border-radius: 21px;
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.landing-ai-assistant__ring::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(var(--nv-ai-1), var(--nv-ai-2), var(--nv-ai-3), var(--nv-ai-4), var(--nv-ai-1));
  animation: nv-ai-rotate 6s linear infinite;
  will-change: transform;
}
/* Brilho que respira: sombra fixa, só a opacidade anima */
.landing-ai-assistant__toggle::after {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 24px;
  box-shadow: 0 0 36px var(--nv-ai-glow), 0 0 64px var(--nv-ai-glow-2);
  opacity: .3;
  animation: nv-ai-breathe 3.6s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity;
}
@keyframes nv-ai-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }
.landing-ai-assistant__toggle:hover { transform: translate3d(0, -3px, 0) scale(1.04); }
.landing-ai-assistant__toggle:hover::after { opacity: 1; animation: none; }
.landing-ai-assistant__toggle img { position: relative; z-index: 1; width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(167, 139, 250, .55)); }
.landing-ai-assistant__toggle:not([aria-expanded='true']) img { animation: nv-ai-icon-pulse 3.6s ease-in-out infinite; }
@keyframes nv-ai-icon-pulse { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(6deg); } }
.landing-ai-assistant__toggle[aria-expanded='true'] { transform: scale(.94); }
.landing-ai-assistant__toggle[aria-expanded='true']::after { animation: none; opacity: .3; }

/* Etiqueta que aparece ao lado do botão por alguns segundos para chamar atenção */
.landing-ai-assistant__hint {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #f4f0ff;
  background: rgba(24, 22, 31, .94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 18px var(--nv-ai-glow);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translate(8px, -50%);
  animation: nv-ai-hint 9s ease 2.2s 1 both;
}
.landing-ai-assistant__hint b {
  font-weight: 800;
  background: linear-gradient(90deg, var(--nv-ai-4), var(--nv-ai-2), var(--nv-ai-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes nv-ai-hint {
  0% { opacity: 0; transform: translate(8px, -50%); }
  6%, 88% { opacity: 1; transform: translate(0, -50%); }
  100% { opacity: 0; transform: translate(8px, -50%); }
}
.landing-ai-assistant__toggle[aria-expanded='true'] .landing-ai-assistant__hint,
.landing-ai-assistant__toggle.chat-toggle-pulse .landing-ai-assistant__hint { display: none; }
.landing-ai-assistant__toggle:focus-visible,
.landing-ai-assistant__close:focus-visible,
.landing-ai-assistant__send:focus-visible,
#chatMessages button:focus-visible { outline: 3px solid #ddd6fe; outline-offset: 3px; }

#chatMessages .chat-bot { background: rgba(124, 58, 237, .14); border: 1px solid rgba(167, 139, 250, .25); border-radius: 14px 14px 14px 3px; padding: 10px 12px; font-size: 13px; color: #efeff5; line-height: 1.55; max-width: 92%; align-self: flex-start; }
#chatMessages .chat-user { background: #2b2a35; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px 14px 3px 14px; padding: 10px 12px; font-size: 13px; color: #fff; max-width: 88%; align-self: flex-end; text-align: right; }
#chatMessages .chat-cupom { background: linear-gradient(135deg, rgba(124, 58, 237, .2), rgba(168, 85, 247, .12)); border: 1px solid rgba(196, 181, 253, .35); border-radius: 14px; padding: 14px; max-width: 94%; align-self: flex-start; }
#chatMessages .chat-cupom .cupom-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #c4b5fd; margin-bottom: 8px; }
#chatMessages .chat-cupom .cupom-code { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .25); border-radius: 9px; padding: 8px 12px; margin-bottom: 8px; cursor: pointer; }
#chatMessages .chat-cupom .cupom-code span { font: 700 16px 'Courier New', monospace; letter-spacing: 1px; color: #fff; }
#chatMessages .chat-cupom .cupom-code small, #chatMessages .chat-cupom .cupom-timer { font-size: 11px; color: #c4b5fd; }
#chatMessages .chat-cupom .cupom-timer { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, .57); }
#chatMessages .chat-cupom .cupom-btn, #chatMessages .chat-contato button { display: block; width: 100%; border: 0; border-radius: 9px; padding: 9px; color: #fff; background: #7c3aed; font: 600 13px 'Inter', sans-serif; cursor: pointer; transition: background .15s; }
#chatMessages .chat-cupom .cupom-btn:hover, #chatMessages .chat-contato button:hover { background: #8b5cf6; }
#chatMessages .chat-contato { background: rgba(124, 58, 237, .1); border: 1px solid rgba(167, 139, 250, .24); border-radius: 14px; padding: 14px; max-width: 94%; align-self: flex-start; }
#chatMessages .chat-contato p { font-size: 12px; color: #c4c4d0; margin: 0 0 10px; }
#chatMessages .chat-contato input { box-sizing: border-box; width: 100%; margin-bottom: 8px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 9px; padding: 9px 12px; outline: none; color: #fafafa; background: #27272f; font: 13px 'Inter', sans-serif; }
#chatMessages .chat-contato input:focus { border-color: #a78bfa; }
#chatMessages .chat-contato button:disabled { background: #52525b; cursor: not-allowed; }
.chat-badge { position: absolute; top: -3px; right: -3px; z-index: 3; width: 14px; height: 14px; border: 2px solid #121017; border-radius: 50%; background: linear-gradient(135deg, #ddd6fe, #9a4dff); box-shadow: 0 0 0 3px rgba(167, 139, 250, .22), 0 0 12px rgba(154, 77, 255, .55); font-size: 0; pointer-events: none; animation: chat-badge-pop .32s cubic-bezier(.22, 1.4, .36, 1); }
@keyframes chat-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
.chat-toggle-pulse::before { position: absolute; inset: 0; border: 2px solid rgba(196, 181, 253, .72); border-radius: inherit; content: ''; pointer-events: none; animation: chat-ping 1.9s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes chat-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
#chatMessages .chat-rich { background: rgba(124, 58, 237, .1); border: 1px solid rgba(167, 139, 250, .24); border-radius: 14px; padding: 12px 13px; max-width: 94%; align-self: flex-start; display: flex; flex-direction: column; gap: 8px; }
#chatMessages .chat-rich .rich-title { font-size: 13px; font-weight: 700; color: #f4f0ff; }
#chatMessages .chat-rich .rich-text { font-size: 12.5px; color: #d5d0e2; line-height: 1.5; }
#chatMessages .chat-rich .rich-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
#chatMessages .chat-rich button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; padding: 9px 12px; color: #ede9fe; background: rgba(255, 255, 255, .04); font: 600 12.5px 'Inter', sans-serif; cursor: pointer; transition: background .18s, border-color .18s, transform .12s; }
#chatMessages .chat-rich button:hover { border-color: rgba(196, 181, 253, .55); background: rgba(124, 58, 237, .26); }
#chatMessages .chat-rich button.rich-primary { border-color: rgba(124, 58, 237, .6); color: #fff; background: linear-gradient(180deg, #9a4dff, #7c3aed); }
#chatMessages .chat-rich button:active { transform: scale(.98); }
.price-card.price-card--flash { animation: price-flash 1.7s cubic-bezier(.22, 1, .36, 1); }
@keyframes price-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); } 16% { box-shadow: 0 0 0 3px rgba(196, 181, 253, .75), 0 18px 50px -12px rgba(124, 58, 237, .6); } }

@media (max-width: 520px) {
  .landing-ai-assistant { right: max(12px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); gap: 10px; }
  .landing-ai-assistant__panel { width: min(100%, calc(100vw - 24px)); max-height: min(72dvh, 560px); border-radius: 20px; }
  .landing-ai-assistant__messages { max-height: min(44dvh, 320px); }
  .landing-ai-assistant__input { font-size: 16px; }
  .landing-ai-assistant__toggle { width: 54px; height: 54px; border-radius: 17px; }
  .landing-ai-assistant__toggle::after { border-radius: 18px; }
  .landing-ai-assistant__toggle img { width: 30px; height: 30px; }
  .landing-ai-assistant__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-ai-assistant__panel, .landing-ai-assistant__toggle, .landing-ai-assistant__send, #chatMessages .chat-rich button { transition: none; }
  .chat-toggle-pulse::before, .chat-badge, .price-card.price-card--flash { animation: none; }
  .landing-ai-assistant__ring::before, .landing-ai-assistant__toggle::after, .landing-ai-assistant__toggle img,
  .landing-ai-assistant.is-open .landing-ai-assistant__panel::before, .landing-ai-assistant.is-open .landing-ai-assistant__mark img,
  .landing-ai-assistant__messages > *, .nv-ai-thinking i, .nv-ai-thinking::after { animation: none; }
  .landing-ai-assistant__hint { display: none; }
  .price-card.price-card--flash { outline: 2px solid rgba(196, 181, 253, .75); }
}
