/*
 * landing-public-late.css — SHIAI UI System F5A
 * Continuação de landing-public.css. Extraído do SEGUNDO bloco <style> do
 * template, que carregava DEPOIS de theme.css (normalização de contraste,
 * dark mode e o único @media do arquivo) — mantido nessa posição relativa
 * de propósito, para não alterar a cascata. Também inclui o CSS do
 * widget de chat, que no template original ficava em um terceiro bloco
 * <style> no meio do <body>; como CSS não depende de onde no documento é
 * declarado (só da ordem entre stylesheets), ele foi movido para cá sem
 * risco de mudança de aparência.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.landing-surface,
.bg-white,
.pricing-card,
.faq-item {
  color: #111827 !important;
}

.text-secondary,
.text-muted,
footer .small,
.landing-copy {
  color: #475569 !important;
  opacity: 1 !important;
}

.hero,
.hero h1,
.hero h2,
.hero h3,
.hero h5,
.hero h6,
.hero p,
.hero small,
.hero .text-secondary {
  color: #f8fafc !important;
  opacity: 1 !important;
}

.hero .lead,
.hero small,
.hero-img-card .text-secondary {
  color: #dbeafe !important;
}

.hero-badge {
  color: #ffffff !important;
  opacity: 1 !important;
  white-space: normal;
}

.access-banner,
.access-banner * {
  color: #ffffff !important;
  opacity: 1 !important;
}

.bg-light {
  background: #f8fafc !important;
}

.bg-white,
.pricing-card,
.faq-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .bg-light {
  background: #0b1120 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .navbar {
  background: #0f172a !important;
  border-color: #243044 !important;
}

html[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) brightness(1.25);
}

html[data-theme="dark"] .navbar-toggler {
  border-color: #475569 !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .audience-card,
html[data-theme="dark"] .screen-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .pain-card,
html[data-theme="dark"] .flow-card,
html[data-theme="dark"] .comparison-card,
html[data-theme="dark"] .proof-card,
html[data-theme="dark"] .proof-insight,
html[data-theme="dark"] .authority-card {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .proof-quote {
  color: #f8fafc !important;
}

html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] footer .small,
html[data-theme="dark"] .landing-copy {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .navbar-brand span,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] li {
  color: #f8fafc !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .btn-outline-custom {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

@media (max-width: 767px) {
  .access-banner { padding: 1rem 0; }

  .access-banner-content,
  .access-banner-text {
    align-items: flex-start;
    width: 100%;
  }

  .access-banner-content { flex-direction: column; }

  .access-banner-content > div:last-child,
  .access-banner .btn {
    width: 100%;
  }

  .navbar .container { gap: 0.75rem; }
  .navbar-collapse { padding-top: 0.75rem; }

  .navbar-collapse .btn {
    margin: 0.35rem 0 !important;
    width: 100%;
  }

  .hero {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 2.55rem);
    line-height: 1.08;
  }

  .hero .lead {
    font-size: 1rem;
    line-height: 1.58;
  }

  .hero .d-flex.flex-wrap.gap-3,
  .hero .d-flex.flex-wrap.gap-4 {
    flex-direction: column;
  }

  .hero .btn,
  #faq .btn {
    width: 100%;
  }

  .hero-img-card {
    border-radius: 8px;
    padding: 1rem !important;
  }

  .hero-mockup { border-radius: 8px; }

  .mockup-header,
  .mockup-grid {
    grid-template-columns: 1fr;
  }

  .mockup-header { flex-direction: column; }
  .mockup-metrics { grid-template-columns: 1fr; }

  .hero-img-card .d-flex {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero-img-card .text-end { text-align: left !important; }

  section {
    padding-left: 0;
    padding-right: 0;
  }

  .pricing-card.featured { transform: none; }
  .p-4 { padding: 1.15rem !important; }

  .floating-whatsapp {
    bottom: 14px;
    right: 14px;
  }

  .floating-whatsapp a {
    height: 50px;
    width: 50px;
  }

  .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── Widget de chat (assistente de leads) ──────────────────────────── */
.chat-widget {
  position: fixed; right: 18px; bottom: 90px; z-index: 1000;
  width: 340px; max-width: calc(100vw - 36px); max-height: min(520px, 70vh);
  background: #fff; border-radius: 16px; box-shadow: 0 20px 45px rgba(13,27,61,.25);
  display: none; flex-direction: column; overflow: hidden;
  border: 1px solid var(--shiai-gray);
}
.chat-widget.open { display: flex; }
.chat-widget-header {
  background: var(--shiai-blue-dark); color: #fff; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; font-weight: 700;
}
.chat-widget-close {
  background: none; border: none; color: #fff; font-size: 1.3rem; line-height: 1;
  cursor: pointer; padding: 2px 6px;
}
.chat-widget-body {
  flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-soft, #f6f7f9);
}
.chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: .88rem; line-height: 1.4; white-space: pre-line; }
.chat-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--shiai-gray); color: var(--shiai-text); border-bottom-left-radius: 2px; }
.chat-msg.user { align-self: flex-end; background: var(--shiai-blue); color: #fff; border-bottom-right-radius: 2px; }
.chat-msg.erro { align-self: flex-start; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.chat-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 100%; }
.chat-quick-reply {
  border: 1px solid var(--shiai-blue); color: var(--shiai-blue); background: #fff;
  border-radius: 16px; padding: 5px 12px; font-size: .8rem; cursor: pointer;
}
.chat-quick-reply:hover { background: var(--shiai-blue); color: #fff; }
.chat-widget-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--shiai-gray); background: #fff; }
.chat-widget-input input {
  flex: 1; border: 1.5px solid var(--shiai-gray); border-radius: 20px; padding: 8px 14px; font-size: .88rem;
}
.chat-widget-input input:focus { outline: none; border-color: var(--shiai-blue); }
.chat-widget-input button {
  border: none; background: var(--shiai-blue); color: #fff; border-radius: 50%;
  width: 36px; height: 36px; flex-shrink: 0; cursor: pointer; font-size: 1rem;
}
.chat-widget-input button:disabled { opacity: .5; cursor: default; }
@media (max-width: 480px) {
  .chat-widget { right: 8px; bottom: 80px; width: calc(100vw - 16px); }
}
