:root {
  --ai-green-950: #041911;
  --ai-green-900: #06251a;
  --ai-green-800: #0b3c2b;
  --ai-green-700: #0f6b48;
  --ai-green-600: #18b76f;
  --ai-green-500: #2bdf83;
  --ai-green-100: #dff8ec;
  --ai-green-50: #f1fff8;
  --ai-blue-700: #125fcb;
  --ai-blue-600: #2783ff;
  --ai-slate-950: #07111d;
  --ai-slate-800: #172033;
  --ai-slate-600: #59677b;
  --ai-bg: #f5faf7;
  --ai-card: rgba(255, 255, 255, .94);
  --ai-border: rgba(15, 61, 46, .12);
  --ai-shadow: 0 18px 55px rgba(5, 38, 28, .10);
  --ai-topbar-h: 78px;
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 6% 5%, rgba(43,223,131,.13), transparent 25rem),
    radial-gradient(circle at 88% 6%, rgba(39,131,255,.08), transparent 30rem),
    linear-gradient(135deg, #f8fff9 0%, #f8fbff 48%, #f6fbf8 100%) !important;
  color: var(--ai-slate-800) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15,61,46,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,61,46,.030) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 82%);
}

/* Paleta Atitude IA sem alterar regra de negócio. */
.bg-blue-600 { background-color: var(--ai-green-600) !important; }
.hover\:bg-blue-700:hover { background-color: var(--ai-green-700) !important; }
.bg-blue-700 { background-color: var(--ai-green-700) !important; }
.text-blue-600 { color: var(--ai-green-700) !important; }
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover { color: var(--ai-green-700) !important; }
.bg-blue-50, .bg-blue-50\/70 { background-color: var(--ai-green-50) !important; }
.border-blue-100, .border-blue-150, .border-blue-200 { border-color: rgba(25,184,115,.22) !important; }
.text-blue-700 { color: var(--ai-green-800) !important; }
.focus\:ring-blue-600:focus { --tw-ring-color: rgba(25,184,115,.34) !important; }
.from-blue-600 { --tw-gradient-from: var(--ai-green-600) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(25,184,115,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-indigo-600 { --tw-gradient-to: var(--ai-blue-600) var(--tw-gradient-to-position) !important; }
.to-blue-50 { --tw-gradient-to: var(--ai-green-50) var(--tw-gradient-to-position) !important; }

/* Polimento geral: produto final, não área técnica. */
a, button { -webkit-tap-highlight-color: transparent; }
button, a, input, textarea, select { transition-duration: .18s !important; }
input, textarea, select {
  background-color: rgba(255,255,255,.96) !important;
  border-color: rgba(15,61,46,.14) !important;
  box-shadow: 0 1px 0 rgba(15,61,46,.03) !important;
}
input:hover, textarea:hover, select:hover { border-color: rgba(25,184,115,.36) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--ai-green-600) !important;
  box-shadow: 0 0 0 4px rgba(25,184,115,.13) !important;
  outline: none !important;
}
label { color: rgba(23,32,51,.66) !important; }
main .bg-white, section .bg-white, aside.bg-white, .ai-card-polish {
  background: var(--ai-card) !important;
  border-color: var(--ai-border) !important;
  box-shadow: 0 12px 34px rgba(5,38,28,.055) !important;
  backdrop-filter: blur(14px);
}
.rounded-2xl { border-radius: 1.35rem !important; }
.rounded-xl { border-radius: 1rem !important; }
.shadow-sm { box-shadow: 0 9px 26px rgba(5,38,28,.045) !important; }
table { border-collapse: separate !important; border-spacing: 0 !important; }
thead tr, tr.bg-slate-50 { background: rgba(240,255,247,.74) !important; }
tbody tr:hover { background-color: rgba(240,255,247,.52) !important; }
button[type="submit"], .ai-primary-action {
  background: linear-gradient(135deg, var(--ai-green-600), var(--ai-green-800)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(25,184,115,.22) !important;
}
button[type="submit"]:hover, .ai-primary-action:hover { filter: brightness(.98); transform: translateY(-1px); }
.text-slate-400 { color: #718096 !important; }

/* Topbar nova: ocupa pouco espaço, não empurra conteúdo para fora da tela. */
body.ai-app-page { display: flex !important; flex-direction: column !important; min-height: 100vh; }
body.ai-app-page > header.ai-topbar {
  position: sticky !important;
  top: 10px;
  z-index: 60;
  width: calc(100% - 28px);
  max-width: 1660px;
  margin: 10px auto 8px;
  padding: 0 !important;
  border: 1px solid rgba(43,223,131,.20) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(4,25,17,.96), rgba(6,37,26,.94)),
    radial-gradient(circle at 18% 0%, rgba(43,223,131,.28), transparent 18rem) !important;
  box-shadow: 0 22px 60px rgba(4,25,17,.18) !important;
  backdrop-filter: blur(18px);
  overflow: visible;
}
.ai-topbar-inner {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
}
.ai-topbar-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 196px;
  height: 48px;
  border-radius: 17px;
  overflow: hidden;
  background: rgba(1,13,9,.72);
  border: 1px solid rgba(43,223,131,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.ai-topbar-logo-full { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ai-topbar-logo-icon { display: none; width: 42px; height: 42px; object-fit: cover; border-radius: 14px; }
.ai-topnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ai-topnav::-webkit-scrollbar { display: none; }
.ai-topnav-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.76) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid transparent !important;
  background: transparent !important;
}
.ai-topnav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.ai-topnav-link.ai-active-nav {
  color: var(--ai-green-950) !important;
  background: linear-gradient(135deg, var(--ai-green-500), var(--ai-green-600)) !important;
  box-shadow: 0 12px 30px rgba(43,223,131,.26) !important;
}
.ai-top-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  white-space: nowrap;
}
.ai-system-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}
.ai-system-pill span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ai-green-500);
  box-shadow: 0 0 0 4px rgba(43,223,131,.15);
}
.ai-logout, .ai-mobile-menu {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  min-height: 38px;
  padding: 0 13px !important;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.06) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
.ai-logout:hover, .ai-mobile-menu:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.ai-mobile-menu { display: none !important; }

body.ai-app-page > main {
  width: min(100%, 1660px) !important;
  max-width: calc(100vw - 28px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.ai-app-page > main.max-w-7xl { max-width: min(1560px, calc(100vw - 28px)) !important; }
body.ai-app-page > main.fade-in { animation-duration: .25s !important; }

/* Evita blocos decorativos exagerados ou sobreposições da versão reprovada. */
.ai-page-intro { display: none !important; }
body.ai-app-page > header h1,
body.ai-app-page > header p,
body.ai-app-page > header svg:not(.ai-password-toggle svg) { all: unset; }

/* Melhorias específicas sem mexer na lógica das telas. */
#chatsListContainer > div, .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: rgba(15,61,46,.08) !important; }
#messagesContainer, #conversationMessages, .bg-slate-50 { background-color: rgba(248,252,250,.72) !important; }
.bg-emerald-50 { background-color: rgba(230,255,242,.86) !important; }
.text-emerald-700, .text-emerald-800 { color: var(--ai-green-800) !important; }
.border-emerald-100, .border-emerald-200 { border-color: rgba(25,184,115,.20) !important; }

/* Auth pages */
body.ai-auth-page {
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh;
  overflow-x: hidden;
}
body.ai-auth-page::after {
  content: "";
  position: fixed;
  width: 560px;
  height: 560px;
  right: -190px;
  bottom: -210px;
  background: radial-gradient(circle, rgba(25,184,115,.20), transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.ai-auth-shell {
  width: min(1160px, calc(100vw - 32px));
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .82fr);
  gap: 24px;
  align-items: stretch;
}
.ai-auth-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(43,223,131,.20);
  border-radius: 34px;
  padding: 42px;
  background:
    linear-gradient(135deg, rgba(4,25,17,.98), rgba(6,37,26,.96)),
    radial-gradient(circle at 90% 10%, rgba(48,224,139,.36), transparent 18rem);
  color: #fff;
  box-shadow: 0 28px 80px rgba(4,25,17,.22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ai-auth-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  background-image:
    radial-gradient(circle at 72% 20%, rgba(48,224,139,.28), transparent 18rem),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 46%);
  pointer-events: none;
}
.ai-auth-hero > * { position: relative; z-index: 1; }
.ai-auth-logo {
  width: 238px;
  height: 80px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  border: 1px solid rgba(43,223,131,.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.ai-auth-kicker {
  margin-top: 38px;
  color: var(--ai-green-500);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 900;
}
.ai-auth-title {
  margin-top: 16px;
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(2.15rem, 4vw, 4.1rem);
  line-height: .98;
  font-weight: 850;
  letter-spacing: -0.055em;
}
.ai-auth-subtitle {
  margin-top: 22px;
  max-width: 560px;
  color: rgba(255,255,255,.82);
  font-size: 1.02rem;
  line-height: 1.7;
}
.ai-auth-feature-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.ai-auth-feature {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}
.ai-auth-robot {
  position: absolute;
  right: -44px;
  bottom: -68px;
  width: min(310px, 45%);
  filter: drop-shadow(0 24px 46px rgba(0,0,0,.22));
}
.ai-auth-panel {
  align-self: center;
  width: 100% !important;
  max-width: none !important;
  border-radius: 32px !important;
  border-color: rgba(15,61,46,.12) !important;
  box-shadow: var(--ai-shadow) !important;
}
.ai-auth-panel .animate-bounce,
.ai-auth-panel .animate-pulse { animation: none !important; }
.ai-auth-panel h1 { color: var(--ai-green-950) !important; }
.ai-auth-panel p { color: var(--ai-slate-600) !important; }
.ai-auth-panel button[type="submit"] {
  background: linear-gradient(135deg, var(--ai-green-600), var(--ai-green-800)) !important;
  box-shadow: 0 16px 32px rgba(25,184,115,.22) !important;
}
.ai-mini-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ai-green-950);
  border: 1px solid rgba(25,184,115,.18);
  box-shadow: 0 16px 34px rgba(15,61,46,.10);
}
.ai-mini-brand img { width: 100%; height: 100%; object-fit: cover; }

/* Password visibility */
.ai-password-wrap { position: relative !important; }
.ai-password-wrap input[type="password"],
.ai-password-wrap input[type="text"].ai-password-input { padding-right: 3.25rem !important; }
.ai-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px !important;
  height: 36px;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(15,61,46,.06) !important;
  color: var(--ai-green-800) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer;
}
.ai-password-toggle:hover { background: rgba(25,184,115,.15) !important; }
.ai-password-toggle svg { width: 18px; height: 18px; }

@media (max-width: 1120px) {
  .ai-topbar-inner { grid-template-columns: auto auto; gap: 10px; }
  .ai-mobile-menu { display: inline-flex !important; justify-self: end; }
  .ai-topnav {
    display: none;
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 8px 2px 2px;
  }
  .ai-topnav.is-open { display: flex; }
  .ai-top-actions { display: none; }
}
@media (max-width: 980px) {
  .ai-auth-shell { grid-template-columns: 1fr; min-height: auto; }
  .ai-auth-hero { display: none; }
  .ai-auth-panel { max-width: 520px !important; margin: 0 auto; }
}
@media (max-width: 620px) {
  body.ai-app-page > header.ai-topbar { width: calc(100% - 16px); top: 8px; border-radius: 20px !important; }
  .ai-topbar-inner { min-height: 60px; padding: 8px; }
  .ai-topbar-brand { width: 58px; height: 46px; }
  .ai-topbar-logo-full { display: none; }
  .ai-topbar-logo-icon { display: block; }
  .ai-topnav-link { width: calc(50% - 5px); }
  body.ai-app-page > main { max-width: calc(100vw - 14px) !important; }
  .ai-auth-panel { padding: 1.5rem !important; border-radius: 24px !important; }
}


/* v9B.9.0 REV3 — acabamento visual: mais tecnologia, menos burocracia, sem tocar no backend. */
:root {
  --ai-glow-green: rgba(43, 223, 131, .34);
  --ai-glow-blue: rgba(39, 131, 255, .16);
  --ai-panel-tint: rgba(238, 255, 247, .58);
}
body {
  background:
    radial-gradient(circle at 12% 10%, rgba(43,223,131,.20), transparent 24rem),
    radial-gradient(circle at 92% 0%, rgba(39,131,255,.16), transparent 32rem),
    radial-gradient(circle at 60% 88%, rgba(43,223,131,.09), transparent 28rem),
    linear-gradient(135deg, #f6fff9 0%, #f7fbff 46%, #effcf6 100%) !important;
}
body::before {
  background-image:
    linear-gradient(rgba(11,60,43,.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,60,43,.048) 1px, transparent 1px),
    radial-gradient(circle at 22px 22px, rgba(43,223,131,.10) 1.2px, transparent 1.4px) !important;
  background-size: 38px 38px, 38px 38px, 76px 76px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 90%) !important;
}
body.ai-app-page > header.ai-topbar {
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(43,223,131,.30), transparent 22rem),
    radial-gradient(circle at 74% 0%, rgba(39,131,255,.10), transparent 26rem),
    linear-gradient(135deg, #03150f 0%, #08271c 50%, #03150f 100%) !important;
  box-shadow: 0 22px 70px rgba(4,25,17,.23), 0 1px 0 rgba(255,255,255,.05) inset !important;
}
.ai-topbar-logo-full,
.ai-topbar-logo-icon,
.ai-auth-logo,
.ai-mini-brand img { object-fit: contain !important; object-position: center !important; }
.ai-topbar-brand {
  background: rgba(2, 14, 9, .56) !important;
  width: 210px !important;
  padding: 5px 16px !important;
  overflow: visible !important;
}
.ai-topbar-logo-full { width: 100% !important; height: 100% !important; }
.ai-topbar-logo-icon { padding: 6px !important; background: rgba(2,14,9,.56); }
.ai-topnav-link.ai-active-nav {
  background: linear-gradient(135deg, #2bdf83 0%, #19bd74 45%, #0f7a50 100%) !important;
  color: #03150f !important;
}
.ai-system-pill { background: rgba(255,255,255,.10) !important; }

body.ai-app-page > main {
  padding-top: 16px !important;
}
body.ai-app-page main .bg-white,
body.ai-app-page section .bg-white,
body.ai-app-page aside.bg-white,
body.ai-app-page .ai-card-polish {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,255,253,.94)) !important;
  border: 1px solid rgba(13,82,55,.14) !important;
  box-shadow: 0 18px 54px rgba(5,38,28,.072) !important;
}
body.ai-app-page main .bg-white:hover,
body.ai-app-page section .bg-white:hover {
  box-shadow: 0 22px 64px rgba(5,38,28,.095) !important;
}
body.ai-app-page h1,
body.ai-app-page h2,
body.ai-app-page h3,
body.ai-app-page h4 { letter-spacing: -.025em; }

/* Botões e chips com identidade mais forte. */
button[type="submit"], .ai-primary-action,
.bg-emerald-600, .hover\:bg-emerald-700:hover,
.bg-blue-600, .hover\:bg-blue-700:hover {
  background: linear-gradient(135deg, #26df83 0%, #12aa68 48%, #076040 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(18,170,104,.24) !important;
}
.bg-indigo-50, .bg-purple-50 { background: linear-gradient(135deg, rgba(39,131,255,.10), rgba(43,223,131,.08)) !important; }
.text-indigo-700, .text-purple-700 { color: #23489a !important; }
.border-indigo-100, .border-purple-100 { border-color: rgba(39,131,255,.18) !important; }

/* Login/Cadastro REV3 */
.ai-auth-shell { width: min(1220px, calc(100vw - 32px)) !important; min-height: 650px !important; }
.ai-auth-hero {
  background:
    radial-gradient(circle at 74% 18%, rgba(43,223,131,.34), transparent 18rem),
    radial-gradient(circle at 92% 88%, rgba(39,131,255,.14), transparent 18rem),
    linear-gradient(135deg, #03140e 0%, #073221 62%, #041810 100%) !important;
}
.ai-auth-logo {
  width: 250px !important;
  height: 92px !important;
  padding: 12px 20px !important;
  background: rgba(0,0,0,.20) !important;
  border: 1px solid rgba(43,223,131,.18) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
.ai-auth-kicker { color: #7bffd0 !important; background: rgba(123,255,208,.10); display: inline-flex; width: fit-content; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(123,255,208,.14); }
.ai-auth-title { max-width: 640px; font-size: clamp(2.15rem, 3.6vw, 3.85rem) !important; }
.ai-auth-subtitle { max-width: 560px !important; }
.ai-auth-feature-grid { width: min(560px, 68%) !important; }
.ai-auth-feature { background: rgba(255,255,255,.105) !important; }
.ai-auth-robot {
  right: 10px !important;
  bottom: -48px !important;
  width: min(250px, 34%) !important;
  opacity: .98;
}
.ai-auth-panel { background: rgba(255,255,255,.97) !important; }
.ai-auth-panel .ai-mini-brand { background: rgba(2,14,9,.92) !important; padding: 7px !important; }
.ai-mini-brand img { border-radius: 14px; }
.ai-forgot-password {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ai-green-800) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ai-forgot-password:hover { color: var(--ai-green-600) !important; }
.ai-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 20, 14, .52);
  backdrop-filter: blur(10px);
}
.ai-modal-backdrop.is-open { display: flex; }
.ai-modal-card {
  width: min(440px, 100%);
  border-radius: 28px;
  padding: 28px;
  background: linear-gradient(180deg, #fff, #f6fff9);
  border: 1px solid rgba(43,223,131,.22);
  box-shadow: 0 28px 90px rgba(3,20,14,.30);
}
.ai-modal-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #063c29; background: linear-gradient(135deg, #2bdf83, #19bd74); font-size: 24px; }

/* Banner de página discreto e tecnológico. */
.ai-page-banner {
  width: min(1660px, calc(100vw - 28px));
  margin: 12px auto 4px;
  border-radius: 28px;
  border: 1px solid rgba(43,223,131,.18);
  background:
    radial-gradient(circle at 86% 20%, rgba(43,223,131,.20), transparent 22rem),
    radial-gradient(circle at 10% 100%, rgba(39,131,255,.10), transparent 24rem),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,255,247,.88));
  box-shadow: 0 18px 54px rgba(5,38,28,.07);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.ai-page-banner h1 { font-family: Outfit, Inter, sans-serif; font-size: clamp(1.7rem, 2.8vw, 2.65rem); font-weight: 900; color: #03150f; margin: 0; }
.ai-page-banner p { margin-top: 6px; color: rgba(23,32,51,.68); font-weight: 600; }
.ai-page-banner-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(43,223,131,.12); color: #075c3d; font-size: 12px; font-weight: 900; border: 1px solid rgba(43,223,131,.20); white-space: nowrap; }
.ai-page-banner-pill::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: #20d87d; box-shadow: 0 0 0 5px rgba(32,216,125,.14); }
body.ai-app-page.has-ai-page-banner > main { padding-top: 8px !important; }

/* Calendário REV3: próximos 7 dias como padrão. */
.ai-week-agenda-card {
  flex: 1 1 auto;
  min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,255,249,.94));
  border: 1px solid rgba(13,82,55,.14);
  border-radius: 28px;
  box-shadow: 0 20px 58px rgba(5,38,28,.08);
  padding: 24px;
}
.ai-week-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(13,82,55,.10); }
.ai-week-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 900; color: #075c3d; background: rgba(43,223,131,.12); border: 1px solid rgba(43,223,131,.20); padding: 7px 10px; border-radius: 999px; margin-bottom: 10px; }
.ai-week-head h2 { font-family: Outfit, Inter, sans-serif; font-size: clamp(1.45rem, 2.5vw, 2.15rem); font-weight: 900; color: #03150f; margin: 0; }
.ai-week-range { color: rgba(23,32,51,.62); font-size: 13px; font-weight: 700; margin-top: 4px; }
.ai-week-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ai-week-btn { border: 1px solid rgba(13,82,55,.13); background: rgba(255,255,255,.86); color: #172033; border-radius: 14px; min-height: 38px; padding: 0 13px; font-size: 12px; font-weight: 900; }
.ai-week-btn:hover { border-color: rgba(43,223,131,.32); background: rgba(240,255,247,.88); }
.ai-week-btn.primary { background: linear-gradient(135deg, #26df83, #08714b); color: white; border-color: transparent; box-shadow: 0 14px 30px rgba(18,170,104,.20); }
.ai-week-grid { display: grid; grid-template-columns: repeat(7, minmax(145px, 1fr)); gap: 12px; padding-top: 18px; overflow-x: auto; scroll-snap-type: x proximity; }
.ai-week-day { min-height: 360px; border-radius: 22px; border: 1px solid rgba(13,82,55,.12); background: rgba(255,255,255,.84); padding: 14px; scroll-snap-align: start; box-shadow: 0 8px 28px rgba(5,38,28,.045); }
.ai-week-day.is-today { background: linear-gradient(180deg, rgba(43,223,131,.13), rgba(255,255,255,.92)); border-color: rgba(43,223,131,.34); }
.ai-week-day-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(13,82,55,.08); }
.ai-week-dow { font-size: 12px; font-weight: 900; color: #075c3d; text-transform: uppercase; letter-spacing: .07em; }
.ai-week-date { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; font-weight: 900; color: #03150f; background: rgba(43,223,131,.14); }
.ai-week-list { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; }
.ai-week-event { border-radius: 16px; padding: 11px; background: linear-gradient(135deg, rgba(12,107,72,.08), rgba(39,131,255,.07)); border: 1px solid rgba(13,82,55,.10); }
.ai-week-event-time { color: #075c3d; font-weight: 950; font-size: 12px; }
.ai-week-event-name { margin-top: 4px; font-size: 12px; font-weight: 900; color: #172033; }
.ai-week-event-meta { margin-top: 3px; font-size: 10px; color: rgba(23,32,51,.58); line-height: 1.35; }
.ai-week-empty { display: grid; place-items: center; min-height: 245px; color: rgba(23,32,51,.38); font-size: 12px; font-weight: 800; text-align: center; border: 1px dashed rgba(13,82,55,.12); border-radius: 18px; background: rgba(248,255,251,.65); }
.ai-month-back { margin-left: auto; }
.ai-month-hidden { display: none !important; }

/* Menos burocracia: alguns blocos administrativos viram cards mais guiados. */
#advancedSchedulePanel h2,
#calendarIntegrationsSection h2,
#settingsForm h2,
#settingsForm h3 { color: #061b13 !important; }
#advancedSchedulePanel textarea,
#settingsForm textarea { min-height: 74px; }
#advancedSchedulePanel .grid,
#settingsForm .grid { align-items: start; }

@media (max-width: 1280px) {
  .ai-week-grid { grid-template-columns: repeat(7, minmax(185px, 1fr)); }
  .ai-week-day { min-height: 300px; }
}
@media (max-width: 980px) {
  .ai-auth-feature-grid { width: 100% !important; }
  .ai-auth-robot { display: none; }
  .ai-page-banner { flex-direction: column; align-items: flex-start; }
  .ai-week-head { flex-direction: column; }
  .ai-week-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .ai-topbar-brand { width: 58px !important; padding: 4px !important; }
  .ai-page-banner { width: calc(100vw - 16px); padding: 18px; border-radius: 22px; }
  .ai-week-agenda-card { padding: 16px; border-radius: 22px; }
  .ai-week-grid { grid-template-columns: repeat(7, minmax(220px, 1fr)); }
}

/* ==========================================================
   v9B.9.0 REV4 — refinamento final de acabamento visual
   Somente CSS/UX: não altera backend, endpoints, IA ou agenda.
   ========================================================== */

/* Fundo com mais profundidade, menos branco puro. */
body {
  background:
    radial-gradient(circle at 4% 3%, rgba(43,223,131,.20), transparent 24rem),
    radial-gradient(circle at 92% 4%, rgba(39,131,255,.13), transparent 30rem),
    radial-gradient(circle at 42% 92%, rgba(43,223,131,.10), transparent 32rem),
    linear-gradient(135deg, #f2fff7 0%, #f6fbff 44%, #effbf5 100%) !important;
}
body::before {
  opacity: .82;
  background-size: 31px 31px;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 36%, rgba(6,37,26,.025));
}

/* Logo oficial sem aparência de adesivo. */
.ai-topbar-brand {
  width: 238px !important;
  height: 58px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.ai-topbar-logo-full {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 10px 22px rgba(43,223,131,.15));
}
.ai-topbar-logo-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
.ai-auth-logo {
  width: 330px !important;
  height: 116px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 20px 38px rgba(43,223,131,.18));
}
.ai-auth-panel .ai-mini-brand {
  width: 76px !important;
  height: 76px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ai-auth-panel .ai-mini-brand img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 14px 26px rgba(43,223,131,.18));
}

/* Login: frase sem cápsula, robô sem sobrepor, card premium. */
.ai-auth-kicker {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin-top: 22px !important;
  margin-bottom: 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #99ffd4 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 22px rgba(43,223,131,.26);
}
.ai-auth-robot {
  right: -2px !important;
  bottom: -58px !important;
  width: min(218px, 29%) !important;
  opacity: .98 !important;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.30));
}
.ai-auth-feature-grid {
  width: min(540px, 62%) !important;
}
.ai-auth-panel {
  position: relative !important;
  border: 1px solid rgba(43,223,131,.26) !important;
  box-shadow:
    0 28px 84px rgba(5,38,28,.14),
    0 0 0 1px rgba(255,255,255,.70) inset,
    0 0 34px rgba(43,223,131,.10) !important;
  overflow: hidden;
}
.ai-auth-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(43,223,131,.58), rgba(255,255,255,.10), rgba(8,113,75,.34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.ai-forgot-password {
  cursor: default !important;
}

/* Toggle e opções marcadas em verde, não azul. */
.peer:checked ~ .peer-checked\:bg-blue-600,
.peer:checked ~ .peer-checked\:bg-blue-500 {
  background: linear-gradient(135deg, #2bdf83, #0f7a50) !important;
}
.peer:checked ~ .peer-checked\:bg-blue-50 {
  background: linear-gradient(135deg, rgba(43,223,131,.16), rgba(15,107,72,.08)) !important;
}
.peer:checked ~ .peer-checked\:border-blue-500,
.peer:checked ~ .peer-checked\:border-blue-600 {
  border-color: rgba(43,223,131,.54) !important;
}
.peer:checked ~ .peer-checked\:text-blue-700,
.peer:checked ~ .peer-checked\:text-blue-800 {
  color: #075c3d !important;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: #18b76f !important;
}

/* Bordas suaves em degradê/glow para separar ambientes sem poluir. */
input, textarea, select {
  border-color: rgba(18,170,104,.20) !important;
  box-shadow:
    0 1px 0 rgba(15,61,46,.03),
    0 0 0 1px rgba(43,223,131,.035),
    0 10px 26px rgba(5,38,28,.035) !important;
}
input:hover, textarea:hover, select:hover {
  border-color: rgba(43,223,131,.40) !important;
  box-shadow:
    0 0 0 1px rgba(43,223,131,.055),
    0 12px 30px rgba(5,38,28,.05) !important;
}
body.ai-app-page main .bg-white,
body.ai-app-page section .bg-white,
body.ai-app-page aside.bg-white,
body.ai-app-page .ai-card-polish,
body.ai-app-page main .rounded-2xl.border,
body.ai-app-page main .rounded-xl.border {
  border-color: rgba(18,170,104,.18) !important;
  box-shadow:
    0 18px 54px rgba(5,38,28,.075),
    0 0 0 1px rgba(43,223,131,.030) inset,
    0 0 26px rgba(43,223,131,.035) !important;
}
body.ai-app-page main .bg-white:hover,
body.ai-app-page section .bg-white:hover,
body.ai-app-page main .rounded-2xl.border:hover {
  border-color: rgba(43,223,131,.24) !important;
  box-shadow:
    0 22px 64px rgba(5,38,28,.095),
    0 0 0 1px rgba(43,223,131,.048) inset,
    0 0 30px rgba(43,223,131,.050) !important;
}
#settingsForm .rounded-2xl,
#settingsForm .rounded-xl,
#advancedSchedulePanel .rounded-2xl,
#advancedSchedulePanel .rounded-xl,
#calendarIntegrationsPanel .rounded-2xl,
#calendarIntegrationsPanel .rounded-xl {
  border-color: rgba(18,170,104,.20) !important;
  box-shadow:
    0 16px 44px rgba(5,38,28,.058),
    0 0 0 1px rgba(43,223,131,.040) inset !important;
}

/* Banner das páginas: mesmo texto, menor altura vertical. */
.ai-page-banner {
  padding: 16px 22px !important;
  border-radius: 24px !important;
  margin-top: 10px !important;
  margin-bottom: 2px !important;
  min-height: 96px !important;
}
.ai-page-banner h1 {
  font-size: clamp(1.45rem, 2.25vw, 2.2rem) !important;
  line-height: 1.02 !important;
}
.ai-page-banner p {
  margin-top: 5px !important;
  font-size: 14px !important;
  line-height: 1.38 !important;
}
.ai-page-banner-pill {
  padding: 8px 12px !important;
  font-size: 11px !important;
}

/* Agenda de 7 dias: ações iguais às do calendário inteiro. */
.ai-week-main-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  margin-top: 2px;
}
.ai-week-btn.soft {
  background: linear-gradient(135deg, rgba(43,223,131,.12), rgba(255,255,255,.90)) !important;
  border-color: rgba(43,223,131,.24) !important;
  color: #075c3d !important;
  box-shadow: 0 12px 28px rgba(5,38,28,.045);
}
.ai-week-btn.soft-alt {
  background: linear-gradient(135deg, rgba(39,131,255,.12), rgba(255,255,255,.92)) !important;
  border-color: rgba(39,131,255,.18) !important;
  color: #244a98 !important;
  box-shadow: 0 12px 28px rgba(5,38,28,.045);
}
.ai-week-agenda-card {
  border-color: rgba(43,223,131,.22) !important;
  box-shadow:
    0 24px 72px rgba(5,38,28,.10),
    0 0 38px rgba(43,223,131,.045) !important;
}
.ai-week-day {
  border-color: rgba(18,170,104,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.91), rgba(245,255,250,.88)) !important;
  box-shadow: 0 14px 34px rgba(5,38,28,.065) !important;
}
.ai-week-empty {
  background: linear-gradient(180deg, rgba(248,255,251,.72), rgba(255,255,255,.60)) !important;
  border-color: rgba(18,170,104,.18) !important;
}

/* Microinterações e contraste final. */
.ai-topnav-link,
.ai-week-btn,
button,
a,
[role="button"] {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
}
.ai-topnav-link:hover,
.ai-week-btn:hover,
button:hover,
a:hover {
  transform: translateY(-1px);
}
.text-slate-500,
.text-slate-400,
.text-gray-500,
.text-gray-400 {
  color: #647184 !important;
}

@media (max-width: 980px) {
  .ai-auth-robot { display: none !important; }
  .ai-auth-feature-grid { width: 100% !important; }
  .ai-week-main-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .ai-topbar-brand { width: 62px !important; height: 50px !important; }
  .ai-auth-logo { width: 250px !important; height: 92px !important; }
  .ai-page-banner { min-height: auto !important; }
}


/* REV5 final Fase 1: refinamentos finais aprovados.
   Somente UI/CSS: não altera backend, endpoints, IA, agenda ou banco. */
.ai-auth-logo {
  width: min(375px, 92%) !important;
  height: auto !important;
  max-height: 112px !important;
  object-fit: contain !important;
  object-position: left center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-left: 0 !important;
  margin-bottom: 26px !important;
  filter: drop-shadow(0 18px 30px rgba(43,223,131,.18));
}
.ai-auth-robot {
  right: -2px !important;
  bottom: -58px !important;
  width: min(262px, 35%) !important;
}
.ai-week-head {
  display: block !important;
  padding-bottom: 16px !important;
}
.ai-week-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.ai-week-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.ai-week-title-copy {
  min-width: 220px;
}
.ai-week-title-row h2,
.ai-week-head h2 {
  font-size: clamp(1.38rem, 2.05vw, 1.88rem) !important;
  line-height: 1.05 !important;
}
.ai-week-main-actions {
  padding-top: 0 !important;
  margin-top: 0 !important;
  justify-content: flex-end !important;
}
@media (max-width: 980px) {
  .ai-week-head-top,
  .ai-week-title-row {
    align-items: flex-start;
  }
  .ai-week-main-actions,
  .ai-week-actions {
    justify-content: flex-start !important;
  }
}
@media (max-width: 620px) {
  .ai-auth-logo {
    width: min(330px, 92%) !important;
    max-height: 96px !important;
  }
}


/* REV6 final polish: logo hero alinhado e modal de agendamento responsivo.
   Somente UI/CSS + asset recortado transparente. Não altera backend, endpoints, IA, agenda ou banco. */
.ai-auth-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ai-auth-logo {
  width: min(255px, 48%) !important;
  height: auto !important;
  max-height: 104px !important;
  margin-left: 0 !important;
  margin-bottom: 30px !important;
  object-fit: contain !important;
  object-position: left center !important;
  align-self: flex-start !important;
  display: block !important;
}
.ai-auth-kicker,
.ai-auth-title,
.ai-auth-subtitle,
.ai-auth-feature-grid {
  align-self: flex-start !important;
}

/* Modal manual de agenda: acima do topbar, sem ficar cortado, mais horizontal no desktop. */
#appointmentModal {
  z-index: 50000 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 104px 20px 32px !important;
  overflow-y: auto !important;
}
#appointmentModal.hidden {
  display: none !important;
}
#appointmentModal > div {
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  max-height: calc(100vh - 128px) !important;
  overflow-y: auto !important;
  border-radius: 28px !important;
  border: 1px solid rgba(43,223,131,.28) !important;
  box-shadow: 0 32px 90px rgba(2,14,9,.22), 0 0 34px rgba(43,223,131,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,255,252,.96)) !important;
}
#appointmentForm {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
}
#appointmentForm.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}
#appointmentForm > div {
  min-width: 0 !important;
}
#appointmentForm > div:nth-of-type(5),
#appointmentForm > div:nth-of-type(6),
#appointmentForm > div:nth-of-type(8) {
  grid-column: 1 / -1 !important;
}
#appointmentForm textarea#apptDetails {
  min-height: 84px !important;
  resize: vertical !important;
}
#appointmentForm button[type="submit"] {
  background: linear-gradient(135deg, #26df83, #08714b) !important;
  box-shadow: 0 16px 34px rgba(18,170,104,.22) !important;
}
#appointmentForm input:focus,
#appointmentForm textarea:focus,
#appointmentForm select:focus {
  --tw-ring-color: rgba(43,223,131,.34) !important;
  border-color: rgba(43,223,131,.55) !important;
}
@media (max-width: 780px) {
  #appointmentModal {
    padding: 88px 12px 24px !important;
  }
  #appointmentModal > div {
    max-height: calc(100vh - 104px) !important;
    padding: 18px !important;
  }
  #appointmentForm {
    grid-template-columns: 1fr !important;
  }
  #appointmentForm > div {
    grid-column: 1 / -1 !important;
  }
}


/* ==========================================================
   v9B.11 FASE 8B — responsividade mobile segura
   Somente CSS/UX + helper visual de instalação PWA.
   Não altera backend, banco, IA, WhatsApp, Agenda, CRM lógico,
   Google, Outlook, APIs ou regras de negócio.
   ========================================================== */
.ai-pwa-install-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(43,223,131,.30) !important;
  background: linear-gradient(135deg, #0f8f5f, #086344) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.ai-pwa-install-button:hover { background: linear-gradient(135deg, #10a76f, #07593d) !important; color: #fff !important; }

@media (max-width: 780px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
  body.ai-app-page { display: block !important; min-height: 100dvh !important; }
  body.ai-app-page > header.ai-topbar {
    width: calc(100% - 16px) !important;
    margin: 8px auto 10px !important;
    top: 6px !important;
    border-radius: 18px !important;
  }
  .ai-topbar-inner { min-height: 56px !important; padding: 7px 8px !important; gap: 8px !important; }
  .ai-mobile-menu { width: 44px !important; min-height: 44px !important; padding: 0 !important; font-size: 18px !important; }
  .ai-topnav.is-open { gap: 7px !important; padding-top: 8px !important; }
  .ai-topnav-link { width: calc(50% - 4px) !important; min-height: 42px !important; font-size: 12px !important; padding: 0 8px !important; }
  .ai-pwa-install-button { width: 100%; grid-column: 1 / -1; min-height: 42px; }

  body.ai-app-page > main,
  body.ai-app-page > section {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ai-page-banner {
    width: calc(100vw - 16px) !important;
    margin: 10px auto 10px !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }
  .ai-page-banner h1 { font-size: clamp(1.55rem, 9vw, 2.05rem) !important; line-height: 1.05 !important; }
  .ai-page-banner p { font-size: .94rem !important; line-height: 1.42 !important; }
  .ai-page-banner-pill { white-space: normal !important; }

  input, textarea, select { font-size: 16px !important; max-width: 100% !important; }
  textarea { min-height: 96px !important; }
  button, a, [role="button"] { max-width: 100%; }
  .fixed.inset-0 > .bg-white,
  .fixed.inset-0 > div { max-width: calc(100vw - 18px) !important; }
}

/* LIVE CHAT: no celular vira uma pilha vertical para não cortar mensagens/perfil pela lateral. */
@media (max-width: 780px) {
  body.ai-route-chat > main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 0 8px 18px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  body.ai-route-chat > main > aside:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 44dvh !important;
    min-height: 275px !important;
    border: 1px solid rgba(15,61,46,.12) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 36px rgba(5,38,28,.06) !important;
  }
  body.ai-route-chat #chatsListContainer { max-height: calc(44dvh - 92px) !important; }
  body.ai-route-chat #chatsListContainer > div { padding: 14px !important; }
  body.ai-route-chat > main > section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 68dvh !important;
    height: auto !important;
    border: 1px solid rgba(15,61,46,.12) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: rgba(248,252,250,.88) !important;
    box-shadow: 0 14px 36px rgba(5,38,28,.055) !important;
  }
  body.ai-route-chat #noChatSelectedState {
    position: relative !important;
    min-height: 360px !important;
    border-radius: 22px !important;
  }
  body.ai-route-chat #chatHeader {
    padding: 12px !important;
    gap: 10px !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }
  body.ai-route-chat #chatHeader > div:first-child { min-width: 0 !important; }
  body.ai-route-chat #chatHeader .flex.items-center.space-x-4 { align-items: flex-start !important; gap: 10px !important; }
  body.ai-route-chat #currentCustomerPhone {
    max-width: calc(100vw - 120px) !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.ai-route-chat #toggleIaButton {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  body.ai-route-chat #messagesWrapper {
    min-height: 52dvh !important;
    max-height: 58dvh !important;
    padding: 12px !important;
    overflow-y: auto !important;
  }
  body.ai-route-chat .message-item { max-width: 96% !important; }
  body.ai-route-chat .message-item > div { max-width: 100% !important; overflow-wrap: anywhere !important; }
  body.ai-route-chat #chatInputBar {
    padding: 12px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
  }
  body.ai-route-chat #sendMessageForm {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  body.ai-route-chat #sendMessageForm input,
  body.ai-route-chat #sendMessageForm button { width: 100% !important; }
  body.ai-route-chat #leadProfileSidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border: 1px solid rgba(15,61,46,.12) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 36px rgba(5,38,28,.055) !important;
  }
  body.ai-route-chat #leadProfileSidebar.hidden { display: none !important; }
}

/* AGENDA: cards e ações cabem na tela, sem botão vazando para a lateral. */
@media (max-width: 780px) {
  body.ai-route-calendar > main {
    padding: 0 8px 18px !important;
    gap: 14px !important;
    flex-direction: column !important;
    overflow: visible !important;
  }
  body.ai-route-calendar > main > div,
  body.ai-route-calendar #calendarIntegrationsSection > div,
  body.ai-route-calendar #advancedSchedulePanel,
  body.ai-route-calendar #calendarIntegrationsPanel {
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 22px !important;
  }
  body.ai-route-calendar > main > div:first-child { padding: 14px !important; }
  body.ai-route-calendar > main > div:first-child > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  body.ai-route-calendar #calendarMonthTitle { min-width: 0 !important; font-size: 1.28rem !important; flex: 1 1 auto !important; }
  body.ai-route-calendar > main > div:first-child > div:first-child > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.ai-route-calendar > main > div:first-child > div:first-child > div:last-child button {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    min-height: 44px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
  body.ai-route-calendar #calendarDaysGrid { gap: 4px !important; min-height: auto !important; }
  body.ai-route-calendar #calendarDaysGrid > div {
    min-height: 58px !important;
    border-radius: 14px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }
  body.ai-route-calendar .ai-week-agenda-card { padding: 15px !important; border-radius: 22px !important; }
  body.ai-route-calendar .ai-week-head,
  body.ai-route-calendar .ai-week-head-top,
  body.ai-route-calendar .ai-week-title-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  body.ai-route-calendar .ai-week-main-actions,
  body.ai-route-calendar .ai-week-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; }
  body.ai-route-calendar .ai-week-btn { width: 100% !important; min-height: 42px !important; white-space: normal !important; }
  body.ai-route-calendar .ai-week-grid {
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }
  body.ai-route-calendar .ai-week-day { min-height: 170px !important; padding: 12px !important; }
  body.ai-route-calendar .ai-week-empty { min-height: 105px !important; }
}

/* CRM: no celular o kanban deixa de ser painel lateral e vira colunas empilhadas. */
@media (max-width: 780px) {
  body.ai-route-crm > section { padding-left: 8px !important; padding-right: 8px !important; }
  body.ai-route-crm main { overflow: visible !important; }
  body.ai-route-crm main > .flex.overflow-x-auto {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    min-height: auto !important;
    padding: 8px 0 18px !important;
  }
  body.ai-route-crm main > .flex.overflow-x-auto > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    border-radius: 20px !important;
  }
  body.ai-route-crm [draggable="true"] { max-width: 100% !important; overflow-wrap: anywhere !important; }
  body.ai-route-crm [draggable="true"] .flex { flex-wrap: wrap !important; }
}

/* ONBOARDING/PERFIL/AJUSTES: evita rodapé sobreposto e textos presos em caixas pequenas. */
@media (max-width: 780px) {
  body.ai-route-onboarding main,
  body.ai-route-profile main,
  body.ai-route-config main,
  body.ai-route-dashboard main { padding-left: 8px !important; padding-right: 8px !important; }
  body.ai-route-onboarding form .sticky.bottom-0 {
    position: static !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.95) !important;
  }
  body.ai-route-onboarding .segment-card > div,
  body.ai-route-onboarding .feature-check > span { min-width: 0 !important; }
  body.ai-route-onboarding textarea,
  body.ai-route-config textarea { min-height: 112px !important; max-height: none !important; }
  body.ai-route-profile .grid,
  body.ai-route-config .grid,
  body.ai-route-dashboard .grid { min-width: 0 !important; }
}


/* ==========================================================
   v9B.11 FASE 8C — refinamento mobile premium/PWA instalável
   Somente CSS/UX e helper visual. Não altera backend, banco,
   IA, WhatsApp, Agenda lógica, CRM lógico, Google, Outlook ou APIs.
   Objetivo: mobile mais bonito, moderno e escalável sem quebrar desktop.
   ========================================================== */
@media (max-width: 780px) {
  body.ai-app-page {
    --ai-mobile-pad: 10px;
    background:
      radial-gradient(circle at 5% 2%, rgba(32,216,125,.22), transparent 15rem),
      radial-gradient(circle at 95% 14%, rgba(39,131,255,.14), transparent 18rem),
      linear-gradient(180deg, #f0fff7 0%, #f8fbff 52%, #effbf5 100%) !important;
  }
  body.ai-app-page > header.ai-topbar {
    box-shadow: 0 16px 40px rgba(2,24,16,.20) !important;
  }
  .ai-page-banner {
    padding: 16px !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 38px rgba(5,38,28,.07) !important;
  }
  .ai-page-banner h1 { font-size: clamp(1.42rem, 7vw, 1.86rem) !important; line-height: 1.06 !important; }
  .ai-page-banner p { font-size: .92rem !important; line-height: 1.42 !important; }

  /* Botão de instalação: aparece mesmo quando o Chrome não dispara banner automático. */
  .ai-pwa-install-button {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0f8f5f, #07593d) !important;
    border-color: rgba(15,143,95,.55) !important;
    color: #ffffff !important;
  }
  .ai-topnav.is-open .ai-pwa-install-button { width: 100% !important; }
}

/* Dashboard mobile: mais executivo, compacto e tecnológico. */
@media (max-width: 780px) {
  body.ai-route-dashboard .dashboard-shell {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 0 0 18px !important;
  }
  body.ai-route-dashboard .dashboard-hero {
    border-radius: 22px !important;
    padding: 16px !important;
    min-height: auto !important;
    box-shadow: 0 18px 46px rgba(4,25,17,.16) !important;
  }
  body.ai-route-dashboard .dashboard-kicker {
    font-size: 10px !important;
    padding: 6px 9px !important;
  }
  body.ai-route-dashboard .dashboard-title {
    font-size: clamp(1.68rem, 8vw, 2rem) !important;
    line-height: 1.04 !important;
  }
  body.ai-route-dashboard .dashboard-subtitle {
    font-size: .88rem !important;
    line-height: 1.42 !important;
  }
  body.ai-route-dashboard .dashboard-filter-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  body.ai-route-dashboard .dashboard-filter {
    width: 100% !important;
    min-height: 38px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }
  body.ai-route-dashboard .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
  body.ai-route-dashboard .metric-card {
    grid-column: auto !important;
    min-height: 112px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }
  body.ai-route-dashboard .metric-top { gap: 6px !important; }
  body.ai-route-dashboard .metric-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    font-size: 1rem !important;
  }
  body.ai-route-dashboard .metric-spark {
    width: 30px !important;
    height: 16px !important;
    opacity: .65 !important;
  }
  body.ai-route-dashboard .metric-label {
    margin-top: 8px !important;
    font-size: 9.5px !important;
    letter-spacing: .055em !important;
    line-height: 1.18 !important;
  }
  body.ai-route-dashboard .metric-value {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    margin-top: 2px !important;
  }
  body.ai-route-dashboard .metric-hint {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }
  body.ai-route-dashboard .dashboard-panel {
    grid-column: 1 / -1 !important;
    padding: 14px !important;
    border-radius: 20px !important;
    min-height: auto !important;
  }
  body.ai-route-dashboard .panel-title { font-size: 1rem !important; }
  body.ai-route-dashboard .panel-subtitle { font-size: .78rem !important; line-height: 1.35 !important; }
  body.ai-route-dashboard .timeline-shell {
    min-height: 190px !important;
    border-radius: 18px !important;
  }
  body.ai-route-dashboard .timeline-svg {
    min-width: 520px !important;
    height: 180px !important;
  }
  body.ai-route-dashboard .timeline-empty { min-height: 170px !important; }
  body.ai-route-dashboard .chart-legend { font-size: 11px !important; gap: 7px !important; }
  body.ai-route-dashboard .detail-item,
  body.ai-route-dashboard .kpi-item,
  body.ai-route-dashboard .upcoming-item {
    border-radius: 15px !important;
    padding: 10px 11px !important;
    gap: 8px !important;
  }
  body.ai-route-dashboard .detail-name,
  body.ai-route-dashboard .kpi-name,
  body.ai-route-dashboard .upcoming-name { font-size: 12px !important; }
  body.ai-route-dashboard .kpi-note,
  body.ai-route-dashboard .upcoming-note { font-size: 10.5px !important; }
}

/* CRM mobile escalável: stage tabs. Evita página infinita quando houver muitos leads. */
.ai-crm-mobile-stage-tabs { display: none; }
@media (max-width: 780px) {
  body.ai-route-crm main > .flex.overflow-x-auto {
    display: block !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
  }
  .ai-crm-mobile-stage-tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 2px 12px !important;
    margin: 0 0 6px !important;
    scroll-snap-type: x proximity;
  }
  .ai-crm-stage-tab {
    flex: 0 0 auto;
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(13,82,55,.14);
    background: rgba(255,255,255,.82);
    color: #172033;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    scroll-snap-align: start;
    box-shadow: 0 10px 26px rgba(5,38,28,.045);
  }
  .ai-crm-stage-tab .ai-crm-tab-count {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(13,82,55,.08);
    color: #075c3d;
    font-size: 11px;
  }
  .ai-crm-stage-tab.is-active {
    background: linear-gradient(135deg, #2bdf83, #08714b);
    color: #041911;
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(18,170,104,.20);
  }
  .ai-crm-stage-tab.is-active .ai-crm-tab-count { background: rgba(255,255,255,.38); color: #041911; }
  body.ai-route-crm .ai-crm-mobile-hidden-column { display: none !important; }
  body.ai-route-crm main > .flex.overflow-x-auto > div {
    margin-bottom: 12px !important;
    max-height: calc(100dvh - 245px) !important;
    min-height: 420px !important;
    overflow: hidden !important;
  }
  body.ai-route-crm main > .flex.overflow-x-auto > div > div[id^="column-"] {
    max-height: calc(100dvh - 322px) !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
  }
  body.ai-route-crm [draggable="true"] {
    border-radius: 18px !important;
    padding: 14px !important;
  }
}

/* Live Chat mobile: lista compacta, leitura focada e menos risco de confusão com vários leads. */
@media (max-width: 780px) {
  body.ai-route-chat > main { gap: 10px !important; }
  body.ai-route-chat > main > aside:first-child {
    max-height: 42dvh !important;
    min-height: 255px !important;
  }
  body.ai-route-chat #chatsListContainer { max-height: calc(42dvh - 90px) !important; }
  body.ai-route-chat #chatsListContainer > div {
    padding: 12px !important;
    gap: 6px !important;
  }
  body.ai-route-chat #searchChatInput {
    min-height: 44px !important;
    font-size: 15px !important;
  }
  body.ai-route-chat > main > section { min-height: 66dvh !important; }
  body.ai-route-chat #messagesWrapper {
    min-height: 48dvh !important;
    max-height: 54dvh !important;
  }
  body.ai-route-chat #macrosContainer { max-width: 100% !important; }
  body.ai-route-chat #leadProfileSidebar { margin-top: 0 !important; }
}

/* Agenda mobile: mês inteiro sem botões vazando e com botões em grade clara. */
@media (max-width: 780px) {
  body.ai-route-calendar .ai-calendar-month-card { padding: 14px !important; }
  body.ai-route-calendar .ai-calendar-month-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }
  body.ai-route-calendar .ai-calendar-month-title-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.ai-route-calendar .ai-calendar-month-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.ai-route-calendar .ai-calendar-month-actions button,
  body.ai-route-calendar .ai-calendar-month-title-row button {
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 8px !important;
    white-space: normal !important;
    line-height: 1.12 !important;
    justify-content: center !important;
  }
  body.ai-route-calendar #calendarMonthTitle {
    min-width: 0 !important;
    text-align: center !important;
    font-size: 1.14rem !important;
    line-height: 1.1 !important;
  }
  body.ai-route-calendar #calendarDaysGrid { gap: 5px !important; }
  body.ai-route-calendar #calendarDaysGrid > div {
    min-height: 54px !important;
    padding: 4px !important;
    border-radius: 13px !important;
  }
  body.ai-route-calendar .ai-week-main-actions,
  body.ai-route-calendar .ai-week-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Onboarding/config: menos sensação de bloco gigante no celular. */
@media (max-width: 780px) {
  body.ai-route-onboarding main > section,
  body.ai-route-config main > section,
  body.ai-route-profile main > section { border-radius: 22px !important; }
  body.ai-route-onboarding .rounded-3xl,
  body.ai-route-config .rounded-3xl,
  body.ai-route-profile .rounded-3xl { border-radius: 22px !important; }
  body.ai-route-onboarding .p-6,
  body.ai-route-config .p-6,
  body.ai-route-profile .p-6 { padding: 16px !important; }
}

/* v9B.11 FASE 9A — Notificações internas seguras do Live Chat.
   Apenas UI/contadores internos; não ativa push e não altera IA/webhook/agenda. */

/* v9B.11 FASE 9C.3 REV2 — alertas agrupados e menos poluição no menu. */
.ai-alerts-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  order: -2;
}
.ai-panel-alerts-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 6px;
  min-height: 38px;
  border-radius: 999px !important;
  border: 1px solid rgba(43,223,131,.28) !important;
  background: rgba(255,255,255,.075) !important;
  color: #f8fffb !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ai-panel-alerts-button:hover,
.ai-panel-alerts-button[aria-expanded="true"] {
  transform: translateY(-1px);
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border-color: rgba(43,223,131,.52) !important;
}
.ai-panel-alerts-button.is-enabled {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(13,148,87,.64), rgba(14,165,233,.24)) !important;
  border-color: rgba(110,231,183,.58) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 10px 24px rgba(16,185,129,.16) !important;
}
.ai-panel-alerts-button.is-muted {
  color: #f8fafc !important;
  background: rgba(148,163,184,.14) !important;
  border-color: rgba(226,232,240,.22) !important;
}
.ai-panel-alerts-button.is-blocked {
  color: rgba(255,255,255,.86) !important;
  background: rgba(127,29,29,.20) !important;
  border-color: rgba(252,165,165,.32) !important;
}
.ai-panel-alerts-popover[hidden] { display: none !important; }
.ai-panel-alerts-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(330px, calc(100vw - 28px));
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(2,25,16,.98), rgba(5,40,29,.95));
  box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
}
.ai-alerts-menu-title {
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 6px 9px;
}
.ai-alerts-menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.08);
}
.ai-alerts-menu-row + .ai-alerts-menu-row { margin-top: 8px; }
.ai-alerts-menu-label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1.25;
}
.ai-alerts-menu-label strong {
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}
.ai-alerts-menu-label small {
  color: rgba(226,232,240,.70);
  font-size: 11px;
  font-weight: 700;
}
.ai-panel-sound-button,
.ai-panel-native-button,
.ai-panel-app-push-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  min-width: 92px;
  min-height: 34px;
  border-radius: 999px !important;
  border: 1px solid rgba(43,223,131,.28) !important;
  background: rgba(255,255,255,.075) !important;
  color: #f8fffb !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ai-panel-sound-button:hover,
.ai-panel-native-button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border-color: rgba(43,223,131,.52) !important;
}
.ai-panel-sound-button.is-enabled,
.ai-panel-native-button.is-enabled {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(13,148,87,.72), rgba(16,185,129,.42)) !important;
  border-color: rgba(110,231,183,.72) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 10px 24px rgba(16,185,129,.20) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
.ai-panel-native-button.is-enabled {
  background: linear-gradient(135deg, rgba(37,99,235,.72), rgba(14,165,233,.42)) !important;
  border-color: rgba(125,211,252,.72) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 10px 24px rgba(59,130,246,.20) !important;
}
.ai-panel-native-button.is-blocked {
  color: rgba(255,255,255,.82) !important;
  background: rgba(127,29,29,.22) !important;
  border-color: rgba(252,165,165,.34) !important;
}
.ai-panel-sound-button.is-muted,
.ai-panel-native-button.is-muted {
  color: #f8fafc !important;
  background: rgba(148,163,184,.16) !important;
  border-color: rgba(226,232,240,.26) !important;
}
.ai-panel-sound-button.is-disabled,
.ai-panel-native-button.is-disabled {
  color: rgba(255,255,255,.74) !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.ai-panel-alert-toast.is-utility {
  cursor: default;
}
@media (max-width: 1120px) {
  .ai-top-actions {
    display: flex !important;
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 2px 2px;
  }
  .ai-alerts-menu {
    position: static;
  }
  .ai-panel-alerts-button {
    min-height: 42px !important;
  }
  .ai-panel-alerts-popover {
    position: static;
    width: 100%;
    flex-basis: 100%;
    margin-top: 2px;
    order: 99;
  }
}
@media (max-width: 620px) {
  .ai-top-actions {
    gap: 6px;
  }
  .ai-alerts-menu {
    width: calc(50% - 3px) !important;
  }
  .ai-panel-alerts-button {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  .ai-panel-alerts-popover {
    width: 100% !important;
  }
  .ai-alerts-menu-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ai-panel-sound-button,
  .ai-panel-native-button {
    width: 100% !important;
    min-height: 38px !important;
  }
}

.ai-livechat-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(239,68,68,.22);
}
.ai-livechat-nav-badge[hidden] { display: none !important; }
.ai-chat-filter-tab {
  min-height: 32px;
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  transition: all .18s ease;
}
.ai-chat-filter-tab:hover { background: #f8fafc; color: #334155; }
.ai-chat-filter-tab.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.14);
}
.ai-chat-filter-chip.is-active {
  outline: 2px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  transform: translateY(-1px);
}
@media (max-width: 780px) {
  
.ai-livechat-nav-badge {
    margin-left: auto;
  }
  body.ai-route-chat #chatNotificationOverview {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ==========================================================
   v9B.11 FASE 9B — preferências de notificação por empresa
   Ajustes visuais: Ajustes IA + contraste do botão PWA.
   ========================================================== */
.ai-auth-panel .ai-pwa-install-button,
body.ai-route-login .ai-pwa-install-button {
  background: linear-gradient(135deg, #0f8f5f, #064f38) !important;
  color: #ffffff !important;
  border-color: rgba(15,143,95,.65) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.20) !important;
}
.ai-notification-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ai-notification-option:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(52,211,153,.34);
}
.ai-notification-option input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #34d399;
  flex: 0 0 auto;
}
.ai-notification-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-notification-option strong {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.25;
}
.ai-notification-option small {
  color: rgba(236,253,245,.72);
  font-size: 10.5px;
  line-height: 1.35;
}
@media (max-width: 780px) {
  #notification-preferences-section {
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .ai-notification-option {
    padding: 10px !important;
    border-radius: 14px !important;
  }
}

/* ==========================================================
   v9B.11 FASE 9C.1 — alertas visuais com painel aberto
   UI global, sem áudio, sem push, sem alteração de backend/IA/agenda.
   ========================================================== */
.ai-livechat-nav-badge.is-attention {
  animation: aiBadgePulse9c 1.45s ease-in-out infinite;
  box-shadow: 0 0 0 4px rgba(239,68,68,.14), 0 10px 24px rgba(239,68,68,.32);
}
@keyframes aiBadgePulse9c {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.ai-panel-alert-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(390px, calc(100vw - 28px));
  pointer-events: none;
}
.ai-panel-alert-toast {
  pointer-events: auto;
  width: 100%;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 13px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(43,223,131,.28) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(43,223,131,.25), transparent 13rem),
    linear-gradient(135deg, rgba(3,21,15,.98), rgba(8,39,28,.96)) !important;
  color: #fff !important;
  box-shadow: 0 24px 70px rgba(3,21,15,.28), 0 1px 0 rgba(255,255,255,.08) inset !important;
  text-align: left;
  transform: translateY(14px);
  opacity: 0;
  animation: aiPanelToastIn9c .26s ease-out forwards;
}
.ai-panel-alert-toast:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(43,223,131,.42) !important;
  filter: brightness(1.02);
}
.ai-panel-alert-toast.is-hiding {
  animation: aiPanelToastOut9c .25s ease-in forwards;
}
.ai-panel-alert-icon {
  width: 38px;
  height: 38px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(43,223,131,.16);
  border: 1px solid rgba(43,223,131,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.ai-panel-alert-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-panel-alert-content strong {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 950;
  color: #fff;
}
.ai-panel-alert-line {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  color: rgba(255,255,255,.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-panel-alert-content small {
  max-width: 100%;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.68);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-panel-alert-action {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ai-green-500), var(--ai-green-600));
  color: var(--ai-green-950);
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(43,223,131,.22);
}
@keyframes aiPanelToastIn9c {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes aiPanelToastOut9c {
  to { transform: translateY(14px); opacity: 0; }
}
@media (max-width: 780px) {
  .ai-panel-alert-host {
    right: 8px;
    left: 8px;
    bottom: 10px;
    width: auto;
  }
  .ai-panel-alert-toast {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px !important;
    border-radius: 18px !important;
  }
  .ai-panel-alert-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* v9B.11 FASE 9C.3 REV4 — acabamento responsivo do menu Alertas.
   Escopo: só UI do topo; sem IA, webhook, agenda, banco, CRM lógico, push worker ou badge de app. */
.ai-panel-alerts-popover {
  width: min(430px, calc(100vw - 32px)) !important;
  padding: 12px !important;
}
.ai-alerts-menu-row {
  grid-template-columns: minmax(0, 1fr) minmax(74px, 86px) !important;
  gap: 12px !important;
  min-height: 64px !important;
  padding: 12px !important;
  align-items: center !important;
}
.ai-alerts-menu-label {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.ai-alerts-menu-label strong,
.ai-alerts-menu-label small {
  display: block !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.ai-alerts-menu-label small {
  line-height: 1.25 !important;
}
.ai-panel-sound-button,
.ai-panel-native-button,
.ai-panel-app-push-button {
  min-width: 74px !important;
  max-width: 86px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}
@media (max-width: 1120px) {
  .ai-top-actions {
    display: none !important;
  }
  .ai-topbar.is-menu-open .ai-top-actions {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 7px 2px 2px;
    width: 100%;
    white-space: normal;
  }
  .ai-topbar.is-menu-open .ai-alerts-menu {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-button {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-popover {
    position: static !important;
    grid-column: 1 / -1;
    width: 100% !important;
    margin-top: 8px !important;
    order: 99;
  }
  .ai-topbar.is-menu-open .ai-pwa-install-button {
    grid-column: 1 / -1;
    width: 100% !important;
  }
}
@media (max-width: 620px) {
  .ai-topbar.is-menu-open .ai-top-actions {
    grid-template-columns: 1fr auto auto !important;
    gap: 7px !important;
  }
  .ai-topbar.is-menu-open .ai-alerts-menu {
    width: 100% !important;
  }
  .ai-topbar.is-menu-open .ai-system-pill,
  .ai-topbar.is-menu-open .ai-logout {
    min-height: 42px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-popover {
    border-radius: 18px !important;
    padding: 10px !important;
  }
  .ai-alerts-menu-title {
    padding: 2px 5px 8px !important;
    font-size: 11px !important;
  }
  .ai-alerts-menu-row {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 11px !important;
    min-height: auto !important;
  }
  .ai-alerts-menu-label strong {
    font-size: 12px !important;
  }
  .ai-alerts-menu-label small {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }
  .ai-panel-sound-button,
  .ai-panel-native-button {
    width: 100% !important;
    max-width: none !important;
    min-height: 36px !important;
  }
}


/* v9B.11 FASE 9C.3 REV4 — acabamento premium do menu Alertas no smartphone.
   Escopo: só UI/responsividade do topo; sem IA, webhook, agenda, banco, CRM lógico, push worker ou badge de app. */
@media (max-width: 620px) {
  body.ai-app-page > header.ai-topbar {
    overflow: visible !important;
  }
  .ai-topbar.is-menu-open .ai-topbar-inner {
    gap: 9px !important;
    padding: 8px !important;
  }
  .ai-topbar.is-menu-open .ai-topnav.is-open {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 0 0 !important;
  }
  .ai-topbar.is-menu-open .ai-topnav-link {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
  }
  .ai-topbar.is-menu-open .ai-topnav-link.ai-active-nav {
    background: linear-gradient(135deg, var(--ai-green-500), var(--ai-green-600)) !important;
    border-color: rgba(43,223,131,.34) !important;
    box-shadow: 0 10px 22px rgba(43,223,131,.20) !important;
  }
  .ai-topbar.is-menu-open .ai-top-actions {
    position: relative !important;
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px 0 0 !important;
    align-items: center !important;
  }
  .ai-topbar.is-menu-open .ai-alerts-menu {
    position: relative !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-button {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.055)) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-button[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(43,223,131,.18), rgba(14,165,233,.10)) !important;
    border-color: rgba(43,223,131,.38) !important;
  }
  .ai-topbar.is-menu-open .ai-system-pill {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
    border-radius: 18px !important;
  }
  .ai-topbar.is-menu-open .ai-logout {
    grid-column: 2 / 3 !important;
    min-width: 76px !important;
    min-height: 40px !important;
    border-radius: 18px !important;
  }
  .ai-topbar.is-menu-open .ai-pwa-install-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 18px !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-popover {
    position: absolute !important;
    z-index: 120 !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 11px !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(4,25,17,.98), rgba(7,47,34,.97)) !important;
    border: 1px solid rgba(43,223,131,.18) !important;
    box-shadow: 0 26px 60px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.045) !important;
  }
  .ai-alerts-menu-title {
    padding: 2px 4px 9px !important;
    font-size: 11px !important;
    letter-spacing: .06em !important;
    color: rgba(255,255,255,.86) !important;
  }
  .ai-alerts-menu-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(82px, 92px) !important;
    gap: 9px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
  }
  .ai-alerts-menu-row + .ai-alerts-menu-row {
    margin-top: 8px !important;
  }
  .ai-alerts-menu-label {
    gap: 2px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .ai-alerts-menu-label strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  .ai-alerts-menu-label small {
    font-size: 10.5px !important;
    line-height: 1.18 !important;
    color: rgba(226,232,240,.68) !important;
    overflow-wrap: normal !important;
  }
  .ai-panel-sound-button,
  .ai-panel-native-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 14px !important;
  }
}
@media (max-width: 390px) {
  .ai-topbar.is-menu-open .ai-topnav-link {
    font-size: 11px !important;
    min-height: 38px !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-popover {
    padding: 10px !important;
  }
  .ai-alerts-menu-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .ai-panel-sound-button,
  .ai-panel-native-button {
    min-height: 34px !important;
  }
}


/* v9B.11 FASE 9C.3 REV5 — ajuste final do menu mobile: Alertas, IA online e Sair na mesma linha.
   Escopo: somente CSS responsivo do topo; desktop aprovado preservado; sem IA, webhook, agenda, banco, CRM lógico, push worker ou badge de app. */
@media (max-width: 620px) {
  .ai-topbar.is-menu-open .ai-top-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .ai-topbar.is-menu-open .ai-alerts-menu {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-button,
  .ai-topbar.is-menu-open .ai-system-pill,
  .ai-topbar.is-menu-open .ai-logout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 6px !important;
    border-radius: 18px !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-button {
    grid-column: auto !important;
  }
  .ai-topbar.is-menu-open .ai-system-pill {
    grid-column: 2 / 3 !important;
    gap: 5px !important;
  }
  .ai-topbar.is-menu-open .ai-system-pill span {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
  }
  .ai-topbar.is-menu-open .ai-logout {
    grid-column: 3 / 4 !important;
  }
  .ai-topbar.is-menu-open .ai-pwa-install-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 2px !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-popover {
    left: 0 !important;
    right: auto !important;
    width: calc(300% + 16px) !important;
    max-width: none !important;
  }
}
@media (max-width: 390px) {
  .ai-topbar.is-menu-open .ai-panel-alerts-button,
  .ai-topbar.is-menu-open .ai-system-pill,
  .ai-topbar.is-menu-open .ai-logout {
    min-height: 38px !important;
    height: 38px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 11px !important;
  }
  .ai-topbar.is-menu-open .ai-panel-alerts-popover {
    width: calc(300% + 16px) !important;
  }
}


/* v9B.11 FASE 9D.1 — Fundação Push Real PWA.
   Escopo: só UI de cadastro/teste manual de notificações do aplicativo; sem disparo automático, IA, webhook, agenda ou CRM lógico. */
.ai-app-push-row .ai-alerts-menu-label small {
  max-width: 245px;
}
.ai-panel-app-push-button {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ai-panel-app-push-button:hover {
  transform: translateY(-1px);
  border-color: rgba(43,223,131,.34) !important;
  background: rgba(43,223,131,.13) !important;
}
.ai-panel-app-push-button.is-enabled {
  background: linear-gradient(135deg, var(--ai-green-500), var(--ai-green-600)) !important;
  color: var(--ai-green-950) !important;
  border-color: rgba(43,223,131,.52) !important;
  box-shadow: 0 10px 24px rgba(43,223,131,.20);
}
.ai-panel-app-push-button.is-muted {
  background: rgba(245,158,11,.14) !important;
  border-color: rgba(245,158,11,.28) !important;
  color: rgba(255,237,213,.94) !important;
}
.ai-panel-app-push-button.is-disabled,
.ai-panel-app-push-button.is-blocked {
  cursor: not-allowed;
  opacity: .72;
  transform: none !important;
}
.ai-panel-app-push-button.is-blocked {
  background: rgba(248,113,113,.14) !important;
  border-color: rgba(248,113,113,.30) !important;
  color: rgba(254,226,226,.94) !important;
}
@media (max-width: 620px) {
  .ai-app-push-row .ai-alerts-menu-label small {
    max-width: none;
  }
}

/* v9B.11 FASE 9D.4 REV2 — ajustes visuais e linguagem para usuário final */
#notification-preferences-section label[for="notificationPanelSoundType"],
#notification-preferences-section label[for="notificationPanelSoundVolume"],
#notification-preferences-section label[for="notificationAntiSpamMinutes"] {
  color: #ecfdf5 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  letter-spacing: .08em !important;
}
#notification-preferences-section select#notificationPanelSoundType,
#notification-preferences-section select#notificationPanelSoundVolume,
#notification-preferences-section select#notificationAntiSpamMinutes {
  color: #0f172a !important;
  background: rgba(255,255,255,.97) !important;
}