/* =============================================================
   SolarZ Hub — Chatwoot v4.10.1 Theme Override
   Paleta Zinc + Orange, coesa com o dashboard SolarZ Hub
   Injetado via nginx sub_filter no </head>
   ============================================================= */

/* ---------------------------------------------------------------
   1. LIGHT MODE — :root
   --------------------------------------------------------------- */
:root {
  /* --- Slate → Zinc neutral scale --- */
  --slate-1: 255 255 255 !important;
  --slate-2: 250 250 250 !important;
  --slate-3: 244 244 245 !important;
  --slate-4: 228 228 231 !important;
  --slate-5: 212 212 216 !important;
  --slate-6: 196 196 202 !important;
  --slate-7: 175 175 182 !important;
  --slate-8: 149 149 157 !important;
  --slate-9: 113 113 122 !important;
  --slate-10: 82 82 91 !important;
  --slate-11: 63 63 70 !important;
  --slate-12: 9 9 11 !important;

  /* --- Blue → Orange primary scale --- */
  --blue-1: 245 251 245 !important;
  --blue-2: 232 245 233 !important;
  --blue-3: 200 230 201 !important;
  --blue-4: 165 214 167 !important;
  --blue-5: 129 199 132 !important;
  --blue-6: 102 187 106 !important;
  --blue-7: 76 175 80 !important;
  --blue-8: 67 160 71 !important;
  --blue-9: 56 142 60 !important;
  --blue-10: 46 125 50 !important;
  --blue-11: 35 109 35 !important;
  --blue-12: 27 74 27 !important;

  /* --- Iris → Orange (era purple accent) --- */
  --iris-1: 245 251 245 !important;
  --iris-2: 232 245 233 !important;
  --iris-3: 200 230 201 !important;
  --iris-4: 165 214 167 !important;
  --iris-5: 129 199 132 !important;
  --iris-6: 102 187 106 !important;
  --iris-7: 76 175 80 !important;
  --iris-8: 67 160 71 !important;
  --iris-9: 56 142 60 !important;
  --iris-10: 46 125 50 !important;
  --iris-11: 35 109 35 !important;
  --iris-12: 27 74 27 !important;

  /* --- Gray → Zinc gray --- */
  --gray-1: 250 250 250 !important;
  --gray-2: 244 244 245 !important;
  --gray-3: 228 228 231 !important;
  --gray-4: 212 212 216 !important;
  --gray-5: 196 196 202 !important;
  --gray-6: 175 175 182 !important;
  --gray-7: 161 161 170 !important;
  --gray-8: 149 149 157 !important;
  --gray-9: 113 113 122 !important;
  --gray-10: 82 82 91 !important;
  --gray-11: 63 63 70 !important;
  --gray-12: 9 9 11 !important;

  /* --- Semantic variables --- */
  --brand: 56 142 60 !important;
  --background-color: 255 255 255 !important;
  --text-blue: 35 109 35 !important;
  --border-container: 228 228 231 !important;
  --border-strong: 228 228 231 !important;
  --border-weak: 228 228 231 !important;
  --solid-1: 255 255 255 !important;
  --solid-2: 250 250 250 !important;
  --solid-3: 244 244 245 !important;
  --solid-active: 244 244 245 !important;
  --solid-amber: 232 245 233 !important;
  --solid-blue: 232 245 233 !important;
  --solid-iris: 232 245 233 !important;

  /* --- Amber → Green override (botões, slides, textos) --- */
  --amber-1: 245 251 245 !important;
  --amber-2: 232 245 233 !important;
  --amber-3: 200 230 201 !important;
  --amber-4: 165 214 167 !important;
  --amber-5: 129 199 132 !important;
  --amber-6: 102 187 106 !important;
  --amber-7: 76 175 80 !important;
  --amber-8: 67 160 71 !important;
  --amber-9: 56 142 60 !important;
  --amber-10: 46 125 50 !important;
  --amber-11: 35 109 35 !important;
  --amber-12: 27 74 27 !important;

  --alpha-1: 9, 9, 11, 0.06 !important;
  --alpha-2: 161, 161, 170, 0.15 !important;
  --alpha-3: 255, 255, 255, 0.96 !important;
  --black-alpha-1: 0, 0, 0, 0.12 !important;
  --black-alpha-2: 0, 0, 0, 0.04 !important;
  --border-blue: 56, 142, 60, 0.5 !important;
  --white-alpha: 255, 255, 255, 0.8 !important;
}

/* ---------------------------------------------------------------
   2. DARK MODE — .dark
   --------------------------------------------------------------- */
.dark {
  /* --- Slate → Blue-gray dark scale (aligned with Hub shadcn.css 220° hue) --- */
  --slate-1: 23 25 29 !important;
  --slate-2: 31 33 37 !important;
  --slate-3: 43 45 49 !important;
  --slate-4: 48 50 54 !important;
  --slate-5: 56 58 62 !important;
  --slate-6: 66 68 72 !important;
  --slate-7: 82 84 89 !important;
  --slate-8: 104 106 112 !important;
  --slate-9: 128 130 137 !important;
  --slate-10: 144 146 153 !important;
  --slate-11: 161 163 170 !important;
  --slate-12: 250 250 250 !important;

  /* --- Blue → Orange dark scale --- */
  --blue-1: 15 25 15 !important;
  --blue-2: 20 35 20 !important;
  --blue-3: 25 50 25 !important;
  --blue-4: 30 65 30 !important;
  --blue-5: 35 80 35 !important;
  --blue-6: 40 95 40 !important;
  --blue-7: 50 115 50 !important;
  --blue-8: 56 135 56 !important;
  --blue-9: 56 142 60 !important;
  --blue-10: 46 125 50 !important;
  --blue-11: 129 199 132 !important;
  --blue-12: 200 230 201 !important;

  /* --- Iris → Orange dark scale --- */
  --iris-1: 15 25 15 !important;
  --iris-2: 20 35 20 !important;
  --iris-3: 25 50 25 !important;
  --iris-4: 30 65 30 !important;
  --iris-5: 35 80 35 !important;
  --iris-6: 40 95 40 !important;
  --iris-7: 50 115 50 !important;
  --iris-8: 56 135 56 !important;
  --iris-9: 56 142 60 !important;
  --iris-10: 46 125 50 !important;
  --iris-11: 129 199 132 !important;
  --iris-12: 200 230 201 !important;

  /* --- Gray → Blue-gray dark (aligned with Hub) --- */
  --gray-1: 23 25 29 !important;
  --gray-2: 31 33 37 !important;
  --gray-3: 43 45 49 !important;
  --gray-4: 48 50 54 !important;
  --gray-5: 56 58 62 !important;
  --gray-6: 66 68 72 !important;
  --gray-7: 82 84 89 !important;
  --gray-8: 104 106 112 !important;
  --gray-9: 128 130 137 !important;
  --gray-10: 144 146 153 !important;
  --gray-11: 161 163 170 !important;
  --gray-12: 250 250 250 !important;

  /* --- Semantic dark variables (aligned with Hub blue-gray) --- */
  --brand: 76 175 80 !important;
  --background-color: 23 25 29 !important;
  --text-blue: 129 199 132 !important;
  --border-strong: 48 50 54 !important;
  --border-weak: 43 45 49 !important;
  --border-container: 43, 45, 49, 0 !important;
  --solid-1: 31 33 37 !important;
  --solid-2: 31 33 37 !important;
  --solid-3: 43 45 49 !important;
  --solid-active: 48 50 54 !important;
  --solid-amber: 20 40 20 !important;
  --solid-blue: 20 40 20 !important;
  --solid-iris: 20 40 20 !important;

  /* --- Amber → Green override dark mode --- */
  --amber-1: 15 25 15 !important;
  --amber-2: 20 35 20 !important;
  --amber-3: 25 50 25 !important;
  --amber-4: 30 60 30 !important;
  --amber-5: 35 75 35 !important;
  --amber-6: 40 90 40 !important;
  --amber-7: 50 110 50 !important;
  --amber-8: 56 130 56 !important;
  --amber-9: 56 142 60 !important;
  --amber-10: 72 165 72 !important;
  --amber-11: 102 195 102 !important;
  --amber-12: 180 230 180 !important;

  --alpha-1: 43, 45, 49, 0.8 !important;
  --alpha-2: 161, 163, 170, 0.15 !important;
  --alpha-3: 31, 33, 37, 0.9 !important;
  --black-alpha-1: 0, 0, 0, 0.3 !important;
  --black-alpha-2: 0, 0, 0, 0.2 !important;
  --border-blue: 56, 142, 60, 0.5 !important;
  --white-alpha: 255, 255, 255, 0.1 !important;
}

/* ---------------------------------------------------------------
   3. SCROLLBAR (matches SolarZ Hub dashboard)
   --------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(113, 113, 122, 0.3) !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(113, 113, 122, 0.5) !important;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(161, 161, 170, 0.3) !important;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(161, 161, 170, 0.5) !important;
}

/* ---------------------------------------------------------------
   4. FOCUS RING + SELECTION
   --------------------------------------------------------------- */
*:focus-visible {
  outline-color: rgb(249, 115, 22) !important;
}
.dark *:focus-visible {
  outline-color: #4CAF50 !important;
}

::selection {
  background-color: rgba(113, 113, 122, 0.25) !important;
}
.dark ::selection {
  background-color: rgba(76, 175, 80, 0.25) !important;
}

/* ---------------------------------------------------------------
   5. HARDCODED BRAND COLOR OVERRIDES
   --------------------------------------------------------------- */

/* Login / Auth buttons that may use woot-600 (hardcoded blue) */
.login-button,
button[data-testid="submit_button"],
.auth-button {
  background-color: rgb(249, 115, 22) !important;
}
.login-button:hover,
button[data-testid="submit_button"]:hover,
.auth-button:hover {
  background-color: rgb(234, 88, 12) !important;
}

/* Send button in reply editor */
[data-key="reply-editor--send-button"],
.reply-editor--send-button {
  background-color: rgb(249, 115, 22) !important;
}

/* Branding link logo — fallback hue shift if JS doesn't replace */
.branding--link img {
  filter: hue-rotate(-200deg) saturate(1.5) !important;
}

/* ---------------------------------------------------------------
   6. CONVERSATION PAGE — COMPONENT OVERRIDES (Phase 2)
   Matches SolarZ Figma mockup: black agent bubbles, gray chat bg,
   purple-tinted bot bubbles, amber date pills, black send button
   --------------------------------------------------------------- */

/* --- 6a. Chat area background — SVG pattern with icons --- */
.conversation-panel,
.conversation-panel.bg-n-background {
  background-color: #FFFFFF !important;
  background-image: url('/static/img/bg-icons.png') !important;
  background-size: 1208px 1000px !important;
  background-repeat: repeat !important;
  background-position: center center !important;
}
/* Hide Chatwoot shortcut hints and original placeholder content when SolarZ empty state is active */
.flex.flex-col.items-center.justify-center:has(> .sz-empty-state) > *:not(.sz-empty-state) {
  display: none !important;
}
/* Ensure empty-state container fills full parent height */
.flex.flex-col.items-center.justify-center:has(> .sz-empty-state) {
  flex: 1 1 0% !important;
  min-height: 0 !important;
}

/* Empty state (no conversation selected) — same background as conversation panel */
.conversation-details-wrap > .flex.h-full.min-h-0 {
  background-color: #FFFFFF !important;
  background-image: url('/static/img/bg-icons.png') !important;
  background-size: 1208px 1000px !important;
  background-repeat: repeat !important;
  background-position: center center !important;
}
.dark .conversation-panel,
.dark .conversation-panel.bg-n-background {
  background-color: #1F2125 !important;
  background-image: none !important;
}
.dark .conversation-details-wrap > .flex.h-full.min-h-0 {
  background-color: #1F2125 !important;
  background-image: none !important;
}

/* Card background pattern when empty state is active (fills 80px padding gap) */
.conversation-details-wrap:has(.sz-empty-state) {
  padding-top: 0 !important;
  background-color: #FFFFFF !important;
  background-image: url('/static/img/bg-icons.png') !important;
  background-size: 1208px 1000px !important;
  background-repeat: repeat !important;
  background-position: center center !important;
}
.dark .conversation-details-wrap:has(.sz-empty-state) {
  background-color: #1F2125 !important;
  background-image: none !important;
}

/* Message list inside conversation panel */
ul.bg-n-background {
  background-color: transparent !important;
}
.dark ul.bg-n-background {
  background-color: #1F2125 !important;
}

/* --- 6.FLOAT — Conversation area como card flutuante --- */

/* Container pai (3 colunas) — fundo neutro para contraste */
section.flex.w-full.h-full.min-w-0 {
  background: #EEEEF0 !important;
}
.dark section.flex.w-full.h-full.min-w-0 {
  background: #17191D !important;
}

/* Card flutuante — área de conversa central */
.conversation-details-wrap {
  margin: 12px 8px !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}
.dark .conversation-details-wrap {
  background: #1F2125 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

/* Header dentro do card — cantos superiores arredondados + bg solido */
.conversation-details-wrap > div:first-child {
  border-radius: 16px 16px 0 0 !important;
  background: #FFFFFF !important;
  position: relative !important;
  z-index: 2 !important;
}
.dark .conversation-details-wrap > div:first-child {
  background: #1F2125 !important;
}

/* Header — altura ajustada para avatar/nome maiores */
.conversation-details-wrap > div:first-child {
  height: auto !important;
  min-height: 56px !important;
  padding: 10px 12px !important;
}

/* Header — nome do lead maior (+30%) */
.conversation-details-wrap .text-sm.font-medium.truncate.leading-tight {
  font-size: 18px !important;
  line-height: 1.3 !important;
}

/* Header — avatar wrapper + imagem do lead maior (+20%) */
.conversation-details-wrap span.relative.inline-flex.flex-shrink-0 {
  width: 38px !important;
  height: 38px !important;
}
.conversation-details-wrap span[role="img"] {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}
.conversation-details-wrap span[role="img"] > span.select-none {
  font-size: 15px !important;
}

/* Header — espaçamento entre avatar e texto */
.conversation-details-wrap span[role="img"] + div,
.conversation-details-wrap span.relative.inline-flex.flex-shrink-0 + div {
  margin-left: 12px !important;
}

/* Sidebar esquerda — fundo branco */
.conversations-list-wrap {
  background: #FFFFFF !important;
  border-right: none !important;
}
.dark .conversations-list-wrap {
  background: #1C1E22 !important;
}

/* --- 6b. Incoming messages (User/Contact) — white bubble --- */
.left-bubble {
  background-color: #FFFFFF !important;
  color: #1C2024 !important;
  border: none !important;
  border-radius: 0 12px 12px 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.left-bubble .text-n-slate-11 {
  color: #60646C !important;
}
.dark .left-bubble {
  background-color: #282A2E !important;
  color: #EDEEEF !important;
  box-shadow: none !important;
}
.dark .left-bubble .text-n-slate-11 {
  color: #9CA3AF !important;
}
/* Timestamp aligned right on incoming messages (text + audio) */
.left-bubble > [class*="justify-start"][class*="text-n-slate-11"] {
  justify-content: flex-end !important;
}

/* --- 6c. Outgoing messages (Agent) — soft green bubble --- */
.right-bubble {
  background-color: #DEEDE1 !important;
  color: #1C2024 !important;
  border-radius: 12px 0 12px 12px !important;
}
.right-bubble .text-n-slate-11 {
  color: #4A6741 !important;
}
.right-bubble .i-lucide-check-check,
.right-bubble .text-n-slate-10 {
  color: #388E3C !important;
}
.dark .right-bubble {
  background-color: #2A3E24 !important;
  color: #EDEEEF !important;
}
.dark .right-bubble .text-n-slate-11 {
  color: #9CA3AF !important;
}
.dark .right-bubble .i-lucide-check-check,
.dark .right-bubble .text-n-slate-10 {
  color: #66BB6A !important;
}

/* --- Hide external avatar on sent messages (badge inside bubble replaces it) --- */
.message-bubble-container.justify-end [class*="grid-area:avatar"] {
  display: none !important;
}
/* Collapse avatar grid column so bubble extends to the edge */
.message-bubble-container.justify-end > div {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

/* --- Sender badge inside agent bubbles --- */
.sz-sender-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 2px;
  background: rgba(255,255,255,0.7);
  border-radius: 20px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #1C2024;
  line-height: 1;
}
.sz-sender-badge .sz-sender-avatar {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8E8E8;
}
.sz-sender-badge .sz-sender-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sz-sender-badge .sz-sender-initials {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E8E8E8;
  color: #60646C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  flex-shrink: 0;
}
.dark .sz-sender-badge {
  background: rgba(0,0,0,0.3);
  color: #EDEEEF;
}
.dark .sz-sender-badge .sz-sender-initials {
  background: #363840;
  color: #B0B4BA;
}
/* Contact badge inside incoming bubbles */
.left-bubble .sz-contact-badge {
  background: rgba(0,0,0,0.08);
  color: #1C2024;
}
.dark .left-bubble .sz-contact-badge {
  background: rgba(255,255,255,0.12);
  color: #EDEEEF;
}

/* --- 6d. Bot messages — same green as agent outgoing --- */
.right-bubble.bg-n-solid-iris {
  background-color: #DEEDE1 !important;
  color: #1C2024 !important;
  border-radius: 12px 0 12px 12px !important;
}
.dark .right-bubble.bg-n-solid-iris {
  background-color: #2A3E24 !important;
  color: #EDEEEF !important;
}

/* Bot messages — also override via JS-added class */
.solarz-bot-bubble {
  background-color: #DEEDE1 !important;
  color: #1C2024 !important;
  border-radius: 12px 0 12px 12px !important;
}
.dark .solarz-bot-bubble {
  background-color: #2A3E24 !important;
  color: #EDEEEF !important;
}

/* --- 6e. Activity/System messages — white pill with border (Figma) --- */
[data-bubble-name="activity"] {
  background-color: #FFFFFF !important;
  color: #262626 !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 30px !important;
  padding: 2px 24px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
[data-bubble-name="activity"] span {
  color: #262626 !important;
}
.dark [data-bubble-name="activity"] {
  background-color: #1F2125 !important;
  color: #E5E5E5 !important;
  border-color: #363840 !important;
}
.dark [data-bubble-name="activity"] span {
  color: #E5E5E5 !important;
}

/* --- 6f. Brand color — green everywhere --- */
.bg-n-brand {
  background-color: #388E3C !important;
}
.outline-n-brand,
.focus\:outline-n-brand:focus,
.dark .focus\:outline-n-brand:focus,
.dark\:focus\:outline-n-brand:focus {
  outline-color: #388E3C !important;
}
.ring-n-brand,
.focus\:ring-n-brand:focus,
.focus\:ring-1:focus {
  --tw-ring-color: #388E3C !important;
}
.text-n-brand {
  color: #388E3C !important;
}
.border-n-brand {
  border-color: #388E3C !important;
}

/* --- 6g. Reply box — gray background, clean input, card corners --- */
.reply-box {
  background-color: #FFFFFF !important;
  border-color: #D1D5DB !important;
  border-radius: 16px !important;
}

/* Esconder botão Inteligência Artificial (magic wand + radar ping) */
.reply-box .relative:has(.i-ph-magic-wand) {
  display: none !important;
}

/* Esconder botão Ativar Assinatura */
.reply-box button:has(.i-ph-signature) {
  display: none !important;
}
.reply-box.is-private {
  background-color: #DEEDE1 !important;
}
.dark .reply-box {
  background-color: #282A2E !important;
  border-color: #363840 !important;
}
.dark .reply-box.is-private {
  background-color: #2A3E24 !important;
}
/* Bot IA active — blue tint on reply box (mirrors is-private green pattern) */
.reply-box:has([data-sz-mode="bot"]) {
  background-color: #A5C4A6 !important;
}
.dark .reply-box:has([data-sz-mode="bot"]) {
  background-color: #1E2A3A !important;
}
/* Bot IA active — disable editor area */
.reply-box:has([data-sz-mode="bot"]) .reply-editor--container {
  pointer-events: none !important;
  opacity: 0.5 !important;
}
.reply-box:has([data-sz-mode="bot"]) .ProseMirror {
  pointer-events: none !important;
  user-select: none !important;
}
.reply-box:has([data-sz-mode="bot"]) .right-wrap {
  pointer-events: none !important;
  opacity: 0.4 !important;
}

/* Reply box container background */
.flex.relative.flex-col.bg-n-background {
  background-color: #F3F3F4 !important;
}
.dark .flex.relative.flex-col.bg-n-background {
  background-color: #1F2125 !important;
}

/* --- 6h. Send button — GREEN --- */
[data-key="reply-editor--send-button"],
.reply-editor--send-button {
  background-color: #388E3C !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}
[data-key="reply-editor--send-button"]:hover,
.reply-editor--send-button:hover {
  background-color: #2E7D32 !important;
}

/* NextButton with color="blue" in reply box (the actual send button in v4.10.1) */
.reply-box .right-wrap button,
.reply-box .right-wrap .bg-n-blue-9 {
  background-color: #388E3C !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}
.reply-box .right-wrap button:hover,
.reply-box .right-wrap .bg-n-blue-9:hover {
  background-color: #2E7D32 !important;
}

/* --- "Assumir conversa" + "Atribuir a mim" — texto verde --- */
button.text-n-blue-text {
  color: #388E3C !important;
}

/* --- 6h2. Reply toggle — Figma DS Vox UI --- */
/* Container pill: gray background */
.reply-box .flex.justify-between > button.rounded-full.bg-n-alpha-2 {
  background: #F3F3F4 !important;
  color: #000000 !important;
  border: none !important;
  height: 28px !important;
  padding: 2px !important;
}
/* All chip text — black */
.reply-box .flex.justify-between > button.rounded-full.bg-n-alpha-2 > div.z-20 {
  color: #000000 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
/* The sliding pill indicator (active chip) — soft green */
.reply-box .flex.justify-between > button.rounded-full.bg-n-alpha-2 > div.absolute.shadow-sm {
  background: #DEEDE1 !important;
  box-shadow: none !important;
}
/* Sliding pill — blue when Bot IA active */
button[data-sz-mode="bot"] > div.absolute.shadow-sm {
  background: #A5C4A6 !important;
}
.dark button[data-sz-mode="bot"] > div.absolute.shadow-sm {
  background: #1E2A3A !important;
}
/* User avatar inside the reply toggle */
.sz-reply-avatar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 30;
  position: relative;
}
.sz-reply-avatar .sz-reply-avatar-img,
.sz-reply-avatar .sz-reply-avatar-initials {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid #FFFFFF;
  box-sizing: border-box;
}
.sz-reply-avatar .sz-reply-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sz-reply-avatar .sz-reply-avatar-initials {
  background: #FF5500;
  color: #FFFFFF;
  font-size: 8px;
  font-weight: 700;
  border: 1.5px solid #FFFFFF;
}
.sz-reply-avatar .sz-reply-avatar-name {
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
}
/* --- Reply toggle dark mode --- */
.dark .reply-box .flex.justify-between > button.rounded-full.bg-n-alpha-2 {
  background: #282A2E !important;
  color: #FAFAFA !important;
}
.dark .reply-box .flex.justify-between > button.rounded-full.bg-n-alpha-2 > div.z-20 {
  color: #FAFAFA !important;
}
.dark .reply-box .flex.justify-between > button.rounded-full.bg-n-alpha-2 > div.absolute.shadow-sm {
  background: #1A3318 !important;
}
.dark .sz-reply-avatar .sz-reply-avatar-initials {
  border-color: #282A2E !important;
}

/* --- Bot IA chip in reply toggle --- */
.sz-bot-chip {
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  line-height: 1;
}
.sz-bot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: none;
  color: #236D23;
  flex-shrink: 0;
  z-index: 30;
  position: relative;
  border: none;
  box-sizing: border-box;
}
/* Active state — Bot IA selected */
button[data-sz-mode="bot"] .sz-bot-chip {
  font-weight: 500;
  color: #236D23;
}
button[data-sz-mode="bot"] .sz-bot-icon {
  background: none;
  color: #236D23;
}
/* Dark mode — Bot IA chip */
.dark .sz-bot-icon {
  background: none;
  border: none;
  color: #4ADE80;
}
.dark button[data-sz-mode="bot"] .sz-bot-chip {
  color: #4ADE80;
}
.dark button[data-sz-mode="bot"] .sz-bot-icon {
  background: none;
  color: #4ADE80;
}

/* --- 6i. Conversation List — Layout Figma --- */

/* === Conversation List Header (Figma: Content-2.svg) === */
/* Container — 56px height, white bg, bottom border */
.conversations-list-wrap > div:first-child {
  background: #FFFFFF !important;
  min-height: 56px !important;
  border-bottom: 1px solid #E5E7EB !important;
}
.dark .conversations-list-wrap > div:first-child {
  background: #1C1E22 !important;
  border-bottom-color: #282A2E !important;
}

/* Title h1 — black */
.conversations-list-wrap > div:first-child h1 {
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dark .conversations-list-wrap > div:first-child h1 {
  color: #FAFAFA !important;
}

/* Chat icon before title (Figma: Vector-2.svg) */
.conversations-list-wrap > div:first-child h1::before {
  content: '' !important;
  display: inline-block !important;
  width: 17px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.75H12.5V1.25C12.5 0.918479 12.3683 0.600537 12.1339 0.366116C11.8995 0.131696 11.5815 0 11.25 0H1.25C0.918479 0 0.600537 0.131696 0.366116 0.366116C0.131696 0.600537 0 0.918479 0 1.25V11.25C0.000366963 11.3676 0.0338962 11.4827 0.096736 11.5821C0.159576 11.6814 0.249177 11.7611 0.355245 11.8118C0.461314 11.8626 0.579547 11.8824 0.696363 11.869C0.813178 11.8555 0.923836 11.8094 1.01562 11.7359L3.75 9.53125V11.875C3.75 12.2065 3.8817 12.5245 4.11612 12.7589C4.35054 12.9933 4.66848 13.125 5 13.125H12.3117L15.2344 15.4859C15.345 15.5754 15.4828 15.6244 15.625 15.625C15.7908 15.625 15.9497 15.5592 16.0669 15.4419C16.1842 15.3247 16.25 15.1658 16.25 15V5C16.25 4.66848 16.1183 4.35054 15.8839 4.11612C15.6495 3.8817 15.3315 3.75 15 3.75ZM3.32422 8.26406L1.25 9.94141V1.25H11.25V8.125H3.71719C3.57414 8.12502 3.43544 8.1741 3.32422 8.26406ZM15 13.6914L12.9258 12.0141C12.8152 11.9246 12.6774 11.8756 12.5352 11.875H5V9.375H11.25C11.5815 9.375 11.8995 9.2433 12.1339 9.00888C12.3683 8.77446 12.5 8.45652 12.5 8.125V5H15V13.6914Z' fill='black'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.dark .conversations-list-wrap > div:first-child h1::before {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3.75H12.5V1.25C12.5 0.918479 12.3683 0.600537 12.1339 0.366116C11.8995 0.131696 11.5815 0 11.25 0H1.25C0.918479 0 0.600537 0.131696 0.366116 0.366116C0.131696 0.600537 0 0.918479 0 1.25V11.25C0.000366963 11.3676 0.0338962 11.4827 0.096736 11.5821C0.159576 11.6814 0.249177 11.7611 0.355245 11.8118C0.461314 11.8626 0.579547 11.8824 0.696363 11.869C0.813178 11.8555 0.923836 11.8094 1.01562 11.7359L3.75 9.53125V11.875C3.75 12.2065 3.8817 12.5245 4.11612 12.7589C4.35054 12.9933 4.66848 13.125 5 13.125H12.3117L15.2344 15.4859C15.345 15.5754 15.4828 15.6244 15.625 15.625C15.7908 15.625 15.9497 15.5592 16.0669 15.4419C16.1842 15.3247 16.25 15.1658 16.25 15V5C16.25 4.66848 16.1183 4.35054 15.8839 4.11612C15.6495 3.8817 15.3315 3.75 15 3.75ZM3.32422 8.26406L1.25 9.94141V1.25H11.25V8.125H3.71719C3.57414 8.12502 3.43544 8.1741 3.32422 8.26406ZM15 13.6914L12.9258 12.0141C12.8152 11.9246 12.6774 11.8756 12.5352 11.875H5V9.375H11.25C11.5815 9.375 11.8995 9.2433 12.1339 9.00888C12.3683 8.77446 12.5 8.45652 12.5 8.125V5H15V13.6914Z' fill='%23FAFAFA'/%3E%3C/svg%3E") !important;
}

/* Status badge ("Abertas") — white bg + D4D4D4 border pill (Figma dropdown style) */
.conversations-list-wrap > div:first-child span.rounded-md {
  background: #FFFFFF !important;
  border: 1px solid #D4D4D4 !important;
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-transform: capitalize !important;
}
.dark .conversations-list-wrap > div:first-child span.rounded-md {
  background: #1F2125 !important;
  border-color: #363840 !important;
  color: #FAFAFA !important;
}

/* Action buttons — white bg + D4D4D4 border (Figma) */
.conversations-list-wrap > div:first-child button {
  background: #FFFFFF !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  min-height: 32px !important;
  min-width: 32px !important;
  color: #000000 !important;
}
.conversations-list-wrap > div:first-child button:hover {
  background: #F5F5F5 !important;
}
.dark .conversations-list-wrap > div:first-child button {
  background: #1F2125 !important;
  border-color: #363840 !important;
  color: #FAFAFA !important;
}
.dark .conversations-list-wrap > div:first-child button:hover {
  background: #282A2E !important;
}

/* Hide collapse sidebar button */
.conversations-list-wrap button:has(.i-lucide-arrow-right-to-line) {
  display: none !important;
}

/* === Filter Panel — ShadCN UI Redesign === */
/* IMPORTANT: All selectors use > (child combinator) to avoid
   leaking styles into dropdown menus (.n-dropdown-body) */

/* --- Color variable restore (broad — catches all dialogs) --- */
div.z-40.rounded-xl.shadow-lg {
  --blue-9: 62 99 221 !important;
  --blue-10: 53 88 205 !important;
  --blue-11: 52 81 178 !important;
  --text-blue: 62 99 221 !important;
  --border-blue: 62, 99, 221, 0.5 !important;
}
.dark div.z-40.rounded-xl.shadow-lg {
  --blue-9: 62 99 221 !important;
  --blue-11: 147 164 252 !important;
  --text-blue: 147 164 252 !important;
}

/* --- Panel container (ShadCN Popover) --- */
#conversationFilterTeleportTarget > div > div.rounded-xl {
  background: #FFFFFF !important;
  border: 1px solid #E4E4E7 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
              0 4px 6px -4px rgba(0, 0, 0, 0.06) !important;
  padding: 20px !important;
  gap: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl {
  background: #17191D !important;
  border-color: #282A2E !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35),
              0 4px 6px -4px rgba(0, 0, 0, 0.25) !important;
}

/* --- Title (ShadCN text-sm font-semibold) --- */
#conversationFilterTeleportTarget > div > div.rounded-xl > h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #09090B !important;
  line-height: 20px !important;
  letter-spacing: -0.011em !important;
  margin: 0 0 4px 0 !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > h3 {
  color: #FAFAFA !important;
}

/* --- Filter row UL — ONLY the panel's direct child UL --- */
#conversationFilterTeleportTarget > div > div.rounded-xl > ul {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  width: auto !important;
}
#conversationFilterTeleportTarget > div > div.rounded-xl > ul > li > div.flex {
  gap: 8px !important;
}

/* --- Filter select triggers — ONLY the direct > button of div.relative --- */
#conversationFilterTeleportTarget > div > div.rounded-xl > ul > li div.relative > button {
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid #E4E4E7 !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #09090B !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 0 12px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  min-width: initial !important;
  transition: all 0.15s ease !important;
}
#conversationFilterTeleportTarget > div > div.rounded-xl > ul > li div.relative > button:hover {
  background: #FAFAFA !important;
  border-color: #A1A1AA !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > ul > li div.relative > button {
  background: #17191D !important;
  border-color: #282A2E !important;
  color: #FAFAFA !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > ul > li div.relative > button:hover {
  background: #1F2125 !important;
  border-color: #363840 !important;
}

/* --- Trash button — direct child of flex row only --- */
#conversationFilterTeleportTarget > div > div.rounded-xl > ul > li > div > button.flex-shrink-0 {
  border: none !important;
  background: rgba(239, 68, 68, 0.3) !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#conversationFilterTeleportTarget > div > div.rounded-xl > ul > li > div > button.flex-shrink-0:hover {
  background: #FEF2F2 !important;
  color: #EF4444 !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > ul > li > div > button.flex-shrink-0 {
  color: #52525B !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > ul > li > div > button.flex-shrink-0:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #F87171 !important;
}

/* --- Action row — direct child of panel --- */
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between {
  padding-top: 0 !important;
  border-top: none !important;
  margin-top: 0 !important;
}

/* --- "Adicionar filtro" — ShadCN Button secondary --- */
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > button {
  height: 36px !important;
  border: 1px solid #E4E4E7 !important;
  background: #F4F4F5 !important;
  color: #09090B !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  min-height: initial !important;
  min-width: initial !important;
}
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > button:hover {
  background: #F4F4F5 !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > button {
  color: #FAFAFA !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > button:hover {
  background: #282A2E !important;
}

/* --- "Limpar filtros" — ShadCN Button outline --- */
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-slate-9"] {
  height: 36px !important;
  border: 1px solid #E4E4E7 !important;
  background: transparent !important;
  color: #71717A !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  min-height: initial !important;
  min-width: initial !important;
}
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-slate-9"]:hover {
  background: #F4F4F5 !important;
  color: #09090B !important;
  border-color: #A1A1AA !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-slate-9"] {
  border-color: #282A2E !important;
  color: #71717A !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-slate-9"]:hover {
  background: #282A2E !important;
  color: #FAFAFA !important;
  border-color: #363840 !important;
}

/* --- "Aplicar filtros" — ShadCN Button default (primary) --- */
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-brand"],
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-blue"] {
  height: 36px !important;
  border: none !important;
  background: #388E3C !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  border-radius: 6px !important;
  min-height: initial !important;
  min-width: initial !important;
}
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-brand"]:hover,
#conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-blue"]:hover {
  background: #2E7D32 !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-brand"],
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-blue"] {
  background: #FAFAFA !important;
  color: #09090B !important;
}
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-brand"]:hover,
.dark #conversationFilterTeleportTarget > div > div.rounded-xl > div.justify-between > div > button[class*="bg-n-blue"]:hover {
  background: #E4E4E7 !important;
}

/* --- All blue text/icons inside filter → green #388E3C --- */
#conversationFilterTeleportTarget [class*="text-n-blue-text"],
#conversationFilterTeleportTarget [class*="text-n-blue"] {
  color: #388E3C !important;
}
/* Lucide icons use background-color as mask (bg-n-blue-text) */
#conversationFilterTeleportTarget [class*="bg-n-blue-text"] {
  background-color: #388E3C !important;
}
.dark #conversationFilterTeleportTarget [class*="text-n-blue-text"],
.dark #conversationFilterTeleportTarget [class*="text-n-blue"] {
  color: #4CAF50 !important;
}
.dark #conversationFilterTeleportTarget [class*="bg-n-blue-text"] {
  background-color: #4CAF50 !important;
}

/* --- Fallback resets for any other z-40 dialogs (sort, etc.) --- */
div.z-40.rounded-xl.shadow-lg button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  min-height: initial !important;
  min-width: initial !important;
  color: rgb(var(--slate-12)) !important;
}
div.z-40.rounded-xl.shadow-lg button[class*="bg-n-brand"] {
  background: rgb(var(--blue-9)) !important;
  color: white !important;
}
div.z-40.rounded-xl.shadow-lg button[class*="bg-n-slate-9"] {
  background: rgb(var(--slate-9) / 0.1) !important;
}
div.z-40.rounded-xl.shadow-lg button[class*="bg-n-solid-3"] {
  background: rgb(var(--solid-3)) !important;
}
div.z-40.rounded-xl.shadow-lg button[class*="bg-n-alpha-2"] {
  background: rgba(var(--alpha-2)) !important;
}
div.z-40.rounded-xl.shadow-lg [class*="text-n-blue-text"] {
  color: rgb(var(--text-blue)) !important;
}

/* === Tabs (Figma: Tabs.svg) === */
/* Container border — bottom separator */
.conversations-list-wrap .border-b-n-weak,
.conversations-list-wrap > div.border-b {
  border-bottom-color: #D1D5DB !important;
}
.dark .conversations-list-wrap .border-b-n-weak,
.dark .conversations-list-wrap > div.border-b {
  border-bottom-color: #363840 !important;
}

/* Tab list — full stretch (exclude dropdown menus with :not) */
.conversations-list-wrap ul:not(.n-dropdown-body):not(.reset-base):not([class*="n-dropdown"]) {
  border-bottom: 1px solid #D1D5DB !important;
  width: 100% !important;
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dark .conversations-list-wrap ul:not(.n-dropdown-body):not(.reset-base):not([class*="n-dropdown"]) {
  border-bottom-color: #363840 !important;
}

/* Tab items — equal width full stretch (exclude dropdown items) */
.conversations-list-wrap ul:not(.n-dropdown-body):not(.reset-base) > li:not(.n-dropdown-item) {
  flex: 1 1 0% !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Todos os <a> dentro das tabs — base inativa */
.conversations-list-wrap ul li a {
  font-size: 14px !important;
  color: #525252 !important;
  border-bottom: 2px solid transparent !important;
  font-weight: 500 !important;
  justify-content: center !important;
  width: 100% !important;
  white-space: nowrap !important;
}
.dark .conversations-list-wrap ul li a {
  color: #9CA3AF !important;
}

/* Tab ativa <a> — verde + borda 2px verde */
.conversations-list-wrap ul li a.text-n-blue-text,
.conversations-list-wrap ul li a[class*="border-n-brand"] {
  color: #236D23 !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #236D23 !important;
}
.dark .conversations-list-wrap ul li a.text-n-blue-text,
.dark .conversations-list-wrap ul li a[class*="border-n-brand"] {
  color: #6ABF6A !important;
  border-bottom-color: #6ABF6A !important;
}

/* Badge (counter) inativo — fundo cinza claro */
.conversations-list-wrap ul li a div.rounded-md {
  background: #F5F5F5 !important;
  color: #525252 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-width: 25px !important;
  height: 28px !important;
  padding: 0 8px !important;
  margin: 0 0 0 6px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.dark .conversations-list-wrap ul li a div.rounded-md {
  background: #282A2E !important;
  color: #A1A1AA !important;
}

/* Badge (counter) ativo — fundo verde claro */
.conversations-list-wrap ul li a.text-n-blue-text div.rounded-md,
.conversations-list-wrap ul li a[class*="border-n-brand"] div.rounded-md {
  background: #C7DDBD !important;
  color: #236D23 !important;
}
.dark .conversations-list-wrap ul li a.text-n-blue-text div.rounded-md,
.dark .conversations-list-wrap ul li a[class*="border-n-brand"] div.rounded-md {
  background: #1A3A1A !important;
  color: #6ABF6A !important;
}

/* === Conversation Cards === */
.conversation {
  padding: 12px !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
  position: relative !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.dark .conversation {
  background: #1C1E22 !important;
  border-bottom-color: #282A2E !important;
}

/* Active card — green tint (Figma) */
.conversation.active,
.conversation.active-chat {
  background: #EEF6F0 !important;
  border-left: none !important;
}
.dark .conversation.active,
.dark .conversation.active-chat {
  background: #1F2125 !important;
  border-left: none !important;
}

/* Hover */
.conversation:hover {
  background-color: #FAFAFA !important;
}
.dark .conversation:hover {
  background-color: #1F2125 !important;
}

/* ================================================================
   AVATAR — 48px, alinhado ao topo (sem mt-8)
   ================================================================ */
.conversation > div:first-child > span[style*="width: 32px"],
.conversation > div:first-child > span[style*="width:32px"],
.conversation > .relative > span[style*="width: 32px"],
.conversation > .relative > span[style*="width:32px"] {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin-top: 0px !important;
}
.conversation span[role="img"].rounded-full {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  font-size: 18px !important;
}
.conversation span[role="img"].rounded-full img {
  width: 48px !important;
  height: 48px !important;
}

/* Checkbox overlay no hover do avatar — escalar para 48px (design nativo Chatwoot) */
.conversation span[role="img"].rounded-full > label {
  width: 48px !important;
  height: 48px !important;
}
.conversation span[role="img"].rounded-full > label input[type="checkbox"],
input[type="checkbox"].checkbox {
  accent-color: #388e3c !important;
}
/* Upload overlay também precisa escalar */
.conversation span[role="img"].rounded-full > div.absolute.inset-0 {
  width: 48px !important;
  height: 48px !important;
}

/* ================================================================
   CONTENT AREA — flex column + reordering (Figma layout)
   DOM order:  1.InboxRow  2.Name(h4)  3.Message  4.Timestamp  5.Labels
   Figma order: Name → Message → InboxRow → Labels
   ================================================================ */
.conversation > div.flex-1.min-w-0 {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding-top: 0 !important;
  padding-bottom: 4px !important;
  border-bottom: none !important;
  gap: 2px !important;
}

/* --- Row 1: Nome (h4) --- */
.conversation h4.conversation--user {
  order: 1 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #262626 !important;
  line-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-right: 50px !important;
}
.dark .conversation h4.conversation--user {
  color: #F4F4F5 !important;
}

/* --- Row 2: Message preview --- */
.conversation > div.flex-1.min-w-0 > div.leading-6 {
  order: 2 !important;
  font-size: 13px !important;
  color: #525252 !important;
  line-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.conversation > div.flex-1.min-w-0 > div.leading-6 span {
  color: #525252 !important;
}
.dark .conversation > div.flex-1.min-w-0 > div.leading-6,
.dark .conversation > div.flex-1.min-w-0 > div.leading-6 span {
  color: #A1A1AA !important;
}

/* --- Row 3: Inbox row — below avatar, aligned left (Figma) --- */
.conversation > div.flex-1.min-w-0 > div:first-child {
  order: 3 !important;
  margin: 4px 0 0 -62px !important; /* -(48px avatar + 14px gap) = align with avatar left */
  padding: 0 !important;
}

/* Inbox icon + nome */
.conversation .text-n-slate-11.text-xs {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #737373 !important;
}
.dark .conversation .text-n-slate-11.text-xs {
  color: #71717A !important;
}

/* Agent name (ao lado direito do inbox) */
.conversation .text-n-slate-11.text-xs.font-medium {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #525252 !important;
}
.dark .conversation .text-n-slate-11.text-xs.font-medium {
  color: #A1A1AA !important;
}

/* --- Row 4: Labels — below inbox row, aligned left (Figma) --- */
.conversation > div.flex-1.min-w-0 > div:has(.label) {
  order: 4 !important;
  margin: 4px 0 0 -62px !important; /* align with avatar left */
  padding: 0 !important;
}

/* --- Timestamp — reposicionar para alinhar com o nome (row 1) --- */
.conversation > div.flex-1.min-w-0 > div.absolute {
  top: 0px !important;
  right: 0px !important;
}

/* Timestamp text */
.conversation .text-xxs,
.conversation .text-xxs span {
  font-size: 12px !important;
  color: #737373 !important;
  font-weight: 400 !important;
}
.dark .conversation .text-xxs,
.dark .conversation .text-xxs span {
  color: #71717A !important;
}

/* === Unread badge === */
.conversation span.shadow-lg.rounded-full.bg-n-teal-9 {
  background-color: #388E3C !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(56,142,60,0.3) !important;
  font-size: 10px !important;
  min-width: 19px !important;
  height: 19px !important;
  line-height: 19px !important;
}

/* === Unread Separator (barra "N mensagens não lidas") === */
span.shadow-lg.rounded-full.bg-n-brand {
  background-color: #236D23 !important;
  color: #FFFFFF !important;
}
.dark span.shadow-lg.rounded-full.bg-n-brand {
  background-color: #236D23 !important;
  color: #FFFFFF !important;
}

/* === Labels (pills com dot — Figma) === */
.conversation .label {
  height: 16px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  padding: 0 8px 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  border: none !important;
}
.conversation .label::before {
  content: '' !important;
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background-color: var(--label-color, currentColor) !important;
  opacity: 1 !important;
}

/* === Message preview — extra padding for unread badge gap === */
.conversation div.text-ellipsis.whitespace-nowrap.leading-6.h-6 {
  padding-right: 36px !important;
  padding-inline-end: 36px !important;
}

/* === Separador entre cards === */
.conversation + .conversation {
  border-top: none !important;
}

/* === Stacked Agent Avatars (assignee + watchers) === */
.sz-agent-stack {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.sz-agent-stack .sz-stack-item {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 50% !important;
  border: 1.5px solid #FFFFFF !important;
  flex-shrink: 0 !important;
  margin-left: -6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}
.dark .sz-agent-stack .sz-stack-item {
  border-color: #1C1E22 !important;
}
.sz-agent-stack .sz-stack-item:first-child {
  margin-left: 0 !important;
  z-index: 3 !important;
}
.sz-agent-stack .sz-stack-item:nth-child(2) {
  z-index: 2 !important;
}
.sz-agent-stack .sz-stack-item img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.sz-agent-stack .sz-stack-initials {
  background: #E5E7EB !important;
  color: #6B7280 !important;
  font-size: 8px !important;
  font-weight: 600 !important;
}
.dark .sz-agent-stack .sz-stack-initials {
  background: #363840 !important;
  color: #A1A1AA !important;
}
.sz-agent-stack .sz-stack-more {
  background: #D1D5DB !important;
  color: #4B5563 !important;
  font-size: 8px !important;
  font-weight: 600 !important;
}
.dark .sz-agent-stack .sz-stack-more {
  background: #52525B !important;
  color: #A1A1AA !important;
}
.sz-agent-stack .sz-stack-name {
  font-size: 12px !important;
  color: #525252 !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100px !important;
  line-height: 20px !important;
}
.dark .sz-agent-stack .sz-stack-name {
  color: #A1A1AA !important;
}

/* --- 6j. Private note bubble — keep amber but with rounded style --- */
.right-bubble.bg-n-solid-amber {
  border-radius: 12px 0 12px 12px !important;
}

/* --- 6k. Grouped messages — tighter border radius --- */
.group-with-next + .message-bubble-container .left-bubble {
  border-radius: 4px 12px 12px 12px !important;
}
.group-with-next + .message-bubble-container .right-bubble {
  border-radius: 12px 4px 12px 12px !important;
}

/* --- 6l. Typing indicator pill --- */
.bg-white.dark\:bg-n-solid-3 {
  background-color: #FFFFFF !important;
  color: #525252 !important;
}
.dark .dark\:bg-n-solid-3 {
  background-color: #282A2E !important;
  color: #9EA1A7 !important;
}

/* --- 6m. Message text links inside bubbles --- */
.right-bubble a {
  color: #93C5FD !important;
  text-decoration: underline !important;
}
.left-bubble a {
  color: #2563EB !important;
  text-decoration: underline !important;
}
.dark .left-bubble a {
  color: #93C5FD !important;
}

/* --- 6n. Audio bubbles — Custom waveform player (injected via JS) --- */

/* Audio bubble base */
[data-bubble-name="audio"] {
  padding: 6px 10px 14px 10px !important;
  min-width: 280px !important;
}

/* SZ Custom audio player — horizontal: [speed] [play] [waveform] */
.sz-audio-player {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 0;
}

/* Speed pill — LEFT of play button */
.sz-audio-speed {
  border: none;
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s;
  white-space: nowrap;
}
.right-bubble .sz-audio-speed {
  background: #BECCBE;
  color: #11361A;
}
.right-bubble .sz-audio-speed:hover {
  background: #A8BCA8;
}
.left-bubble .sz-audio-speed {
  background: rgba(107, 114, 128, 0.12);
  color: #374151;
}
.left-bubble .sz-audio-speed:hover {
  background: rgba(107, 114, 128, 0.2);
}

/* Play button — no background, sized to match waveform */
.sz-audio-play {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  transition: background 0.15s;
}
.right-bubble .sz-audio-play {
  background: transparent;
  color: #236D23;
}
.right-bubble .sz-audio-play:hover {
  background: rgba(35,109,35,0.08);
}
.left-bubble .sz-audio-play {
  background: transparent;
  color: #1C2024;
}
.left-bubble .sz-audio-play:hover {
  background: rgba(0,0,0,0.05);
}

/* Waveform wrapper — fixed height so time-row doesn't shift alignment */
.sz-audio-wave-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Waveform bars container — same height as play button */
.sz-audio-waveform {
  display: flex;
  align-items: center;
  gap: 1.5px;
  height: 36px;
  cursor: pointer;
  position: relative;
}

/* Scrubber thumb — draggable seek ball */
.sz-audio-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transform: translate(-50%, -50%) scale(0);
  cursor: grab;
  z-index: 5;
  transition: left 0.08s linear, transform 0.15s;
  pointer-events: none;
  touch-action: none;
  opacity: 0;
}
.sz-audio-thumb.visible {
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  opacity: 1;
}
.sz-audio-thumb.visible:hover {
  transform: translate(-50%, -50%) scale(1.2);
}
.sz-audio-thumb.dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.25);
  transition: transform 0.1s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
/* Sent bubble thumb */
.right-bubble .sz-audio-thumb {
  box-shadow: 0 1px 4px rgba(35,109,35,0.3);
}
/* Received bubble thumb */
.left-bubble .sz-audio-thumb {
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Individual bar */
.sz-audio-bar {
  flex: 1;
  min-width: 1.5px;
  max-width: 3px;
  border-radius: 1px;
  transition: opacity 0.15s;
}
/* Sent bars — green */
.right-bubble .sz-audio-bar {
  background: #388E3C;
  opacity: 0.3;
}
.right-bubble .sz-audio-bar.played {
  opacity: 1;
}
/* Received bars — gray */
.left-bubble .sz-audio-bar {
  background: #71717A;
  opacity: 0.25;
}
.left-bubble .sz-audio-bar.played {
  background: #1C2024;
  opacity: 0.75;
}

/* Time row — absolutely positioned so it doesn't affect vertical centering */
.sz-audio-time-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  position: absolute;
  left: 0;
  bottom: -14px;
}
/* Mic icon — injected into native Chatwoot metadata row */
.sz-audio-mic {
  flex-shrink: 0;
  opacity: 1;
  vertical-align: middle;
}
.right-bubble .sz-audio-mic {
  color: #388E3C;
}
.left-bubble .sz-audio-mic {
  color: #71717A;
}
.right-bubble .sz-audio-time {
  font-size: 11px;
  color: #4A6741;
}
.left-bubble .sz-audio-time {
  font-size: 11px;
  color: #71717A;
}

/* === Dark mode audio === */
.dark .right-bubble .sz-audio-play {
  background: transparent;
  color: #66BB6A;
}
.dark .right-bubble .sz-audio-play:hover {
  background: rgba(102,187,106,0.08);
}
.dark .right-bubble .sz-audio-bar {
  background: #66BB6A;
}
.dark .right-bubble .sz-audio-time {
  color: #A5D6A7;
}
.dark .right-bubble .sz-audio-speed {
  background: #3A4F3A;
  color: #D4E8D4;
}
.dark .right-bubble .sz-audio-mic {
  color: #66BB6A;
}
.dark .left-bubble .sz-audio-play {
  color: #EDEEEF;
  background: transparent;
}
.dark .left-bubble .sz-audio-bar {
  background: #9CA3AF;
}
.dark .left-bubble .sz-audio-bar.played {
  background: #EDEEEF;
}
.dark .left-bubble .sz-audio-speed {
  background: rgba(156, 163, 175, 0.15);
  color: #D1D5DB;
}
.dark .left-bubble .sz-audio-time {
  color: #9CA3AF;
}
.dark .left-bubble .sz-audio-mic {
  color: #9CA3AF;
}
/* Dark mode thumb */
.dark .sz-audio-thumb {
  background: #E5E7EB;
}
.dark .right-bubble .sz-audio-thumb {
  box-shadow: 0 1px 4px rgba(102,187,106,0.35);
}
.dark .left-bubble .sz-audio-thumb {
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   6r. CONTACT PANEL — Sempre visível na conversa
   ═══════════════════════════════════════════════════════════════ */

/* Esconder botão toggle flutuante (SidepanelSwitch) */
.bg-n-solid-2\/90.backdrop-blur-lg {
  display: none !important;
}

/* Esconder botão X de fechar no header do painel de contatos */
.md\:static.md\:w-\[320px\] button:has(.i-lucide-x) {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   6s. CONTACT INFO — Layout Figma (avatar + nome lado a lado)
   Escopo: .solarz-contact-info (classe adicionada via JS)
   DOM real: ContactInfo root = div.relative.items-center.w-full.p-4
             Inner wrapper = div.flex.flex-col.w-full.gap-2.text-left
   ═══════════════════════════════════════════════════════════════ */

/* Layout agora é tratado direto no template patched do ContactInfo.vue
   (avatar + nome em flex row, separator via border-t no template) */

/* === Esconder botões desnecessários === */

/* Chat button (target BUTTON, não .relative wrapper!) */
.solarz-contact-info button:has(.i-ph-chat-circle-dots) {
  display: none !important;
}
/* Chat button wrapper (child direto da action row) */
.solarz-contact-info .flex.items-center.mt-0\.5 > .relative:has(.i-ph-chat-circle-dots) {
  display: none !important;
}
/* Chat button */
.solarz-contact-info button:has(.i-ph-chat-circle-dots) {
  display: none !important;
}
/* Merge button */
.solarz-contact-info button:has(.i-ph-arrows-merge) {
  display: none !important;
}
/* Delete button */
.solarz-contact-info button:has(.i-ph-trash) {
  display: none !important;
}
/* Info icon ao lado do nome */
.solarz-contact-info .i-lucide-info {
  display: none !important;
}
/* Wrapper de ícones na linha do nome (fica vazio após mover ext link) */
.solarz-contact-info .flex.items-center.min-w-0.gap-3 > .flex.flex-row.items-center.gap-2 {
  display: none !important;
}

/* 6t. ADICIONAR ETIQUETA — agora estilizado direto no AddLabel.vue (plain <button>) */

/* === Reordenar campos: telefone → email → empresa === */
.solarz-contact-info [title="Número de telefone"] { order: 1 !important; }
.solarz-contact-info [title="Endereço de e-mail"] { order: 2 !important; }
.solarz-contact-info [title="Empresa"] { order: 3 !important; }

/* === Ícones de contato (telefone, email, empresa) — +15% === */
.solarz-contact-info svg.icon--font {
  width: 16px !important;
  height: 16px !important;
}

/* === Estilo Figma (Buttons.svg): botão editar — fundo branco + borda cinza === */
.solarz-contact-info button:has(.i-ph-pencil-simple) {
  width: 32px !important;
  height: 32px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  outline: none !important;
  box-shadow: none !important;
}
.solarz-contact-info button:has(.i-ph-pencil-simple):hover {
  background-color: #F5F5F5 !important;
  border-color: #A3A3A3 !important;
}
.dark .solarz-contact-info button:has(.i-ph-pencil-simple) {
  background-color: #1F2125 !important;
  border-color: #363840 !important;
}
.dark .solarz-contact-info button:has(.i-ph-pencil-simple):hover {
  background-color: #282A2E !important;
  border-color: #52525B !important;
}
/* External link button (criado via JS no action row) */
/* === Estilo Figma (Buttons-2.svg): botão link externo — fundo branco + borda cinza === */
.solarz-ext-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.solarz-ext-link:hover {
  background-color: #F5F5F5 !important;
  border-color: #A3A3A3 !important;
}
.dark .solarz-ext-link {
  background-color: #1F2125 !important;
  border-color: #363840 !important;
}
.dark .solarz-ext-link:hover {
  background-color: #282A2E !important;
  border-color: #52525B !important;
}

/* ═══════════════════════════════════════════════════════════════
   6u. PRIMARY SIDEBAR (Navbar) — Match Figma Navbar.svg
   Sidebar de navegação esquerda (200px) com menus, canais, etiquetas
   ═══════════════════════════════════════════════════════════════ */

/* --- 6u-1. Sidebar — Fundo branco + Borda direita + Largura 230px (+15%) --- */
aside.bg-n-solid-2[class*="w-[200px]"],
aside[class*="bg-n-solid-2"][class*="w-[200px]"] {
  background: #FFFFFF !important;
  border-right-color: #D1D5DB !important;
  width: 230px !important;
  min-width: 230px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
/* Sidebar bottom fixed container */
.sz-sidebar-bottom {
  margin-top: auto !important;
  padding: 8px 12px !important;
  border-top: 1px solid #E5E5E5 !important;
  width: 100% !important;
}
.sz-sidebar-bottom a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  width: 100% !important;
  text-align: left !important;
}
.dark .sz-sidebar-bottom {
  border-top-color: #282A2E !important;
}
/* All children respect 230px width */
aside[class*="w-[200px]"] * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
/* Links com max-width Tailwind — liberar para 100% */
aside[class*="w-[200px]"] a[class*="max-w-"] {
  max-width: 100% !important;
}
/* Padding lateral no sidebar — removido */
/* Texto longo em child-items (nomes de inbox) — quebra de linha */
aside[class*="w-[200px]"] .child-item a .truncate,
aside[class*="w-[200px]"] .child-item a .flex-1,
aside[class*="w-[200px]"] .child-item a span {
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.3 !important;
}
/* Child-items com texto multi-linha — ajustar altura */
aside[class*="w-[200px]"] .child-item a {
  height: auto !important;
  min-height: 36px !important;
  align-items: center !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.dark aside.bg-n-solid-2[class*="w-[200px]"],
.dark aside[class*="bg-n-solid-2"][class*="w-[200px]"] {
  background: #1C1E22 !important;
  border-right-color: #282A2E !important;
}

/* --- 6u-1b. Logo sidebar — +62% total (16px→26px, container 24px→38px) --- */
aside[class*="w-[200px]"] > section:first-child .place-content-center.size-6 {
  width: 38px !important;
  height: 38px !important;
}
aside[class*="w-[200px]"] > section:first-child .place-content-center.size-6 img {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}
/* Esconder SVG padrão do Chatwoot (evita flash no reload) */
aside[class*="w-[200px]"] > section:first-child .place-content-center.size-6 svg {
  display: none !important;
}

/* --- 6u-2. Separador abaixo do header (logo + search + compose) --- */
aside[class*="w-[200px]"] > section:first-child {
  position: relative !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}
aside[class*="w-[200px]"] > section:first-child::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: #E5E5E5 !important;
  display: block !important;
}
.dark aside[class*="w-[200px]"] > section:first-child::after {
  background: #282A2E !important;
}

/* Gradient overlay no fundo — match sidebar bg */
aside[class*="w-[200px]"] .from-n-solid-2 {
  --tw-gradient-from: #FFFFFF !important;
}
.dark aside[class*="w-[200px]"] .from-n-solid-2 {
  --tw-gradient-from: #1C1E22 !important;
}

/* Border inferior na barra de perfil */
aside[class*="w-[200px]"] .border-n-weak {
  border-color: #D1D5DB !important;
}
.dark aside[class*="w-[200px]"] .border-n-weak {
  border-color: #282A2E !important;
}

/* --- 6u-2. Item Ativo — Verde (#EEF6F0 bg, #236D23 text) --- */
aside[class*="w-[200px]"] a.active,
aside[class*="w-[200px]"] a.text-n-blue-text,
aside[class*="w-[200px]"] .child-item a.active,
aside[class*="w-[200px]"] .child-item a.text-n-blue-text {
  background: #EEF6F0 !important;
  color: #236D23 !important;
}
aside[class*="w-[200px]"] a.active svg,
aside[class*="w-[200px]"] a.active span[class*="i-"],
aside[class*="w-[200px]"] a.text-n-blue-text svg,
aside[class*="w-[200px]"] a.text-n-blue-text span[class*="i-"] {
  color: #236D23 !important;
}
.dark aside[class*="w-[200px]"] a.active,
.dark aside[class*="w-[200px]"] a.text-n-blue-text,
.dark aside[class*="w-[200px]"] .child-item a.active,
.dark aside[class*="w-[200px]"] .child-item a.text-n-blue-text {
  background: #1A3A1A !important;
  color: #6ABF6A !important;
}
.dark aside[class*="w-[200px]"] a.active svg,
.dark aside[class*="w-[200px]"] a.active span[class*="i-"],
.dark aside[class*="w-[200px]"] a.text-n-blue-text svg,
.dark aside[class*="w-[200px]"] a.text-n-blue-text span[class*="i-"] {
  color: #6ABF6A !important;
}

/* Group header ativo (seção com filho ativo) */
aside[class*="w-[200px]"] [role="button"].text-n-blue-text,
aside[class*="w-[200px]"] [role="button"].bg-n-alpha-2 {
  background: #EEF6F0 !important;
  color: #236D23 !important;
}
aside[class*="w-[200px]"] [role="button"].text-n-blue-text svg,
aside[class*="w-[200px]"] [role="button"].text-n-blue-text span[class*="i-"] {
  color: #236D23 !important;
}
.dark aside[class*="w-[200px]"] [role="button"].text-n-blue-text,
.dark aside[class*="w-[200px]"] [role="button"].bg-n-alpha-2 {
  background: #1A3A1A !important;
  color: #6ABF6A !important;
}
.dark aside[class*="w-[200px]"] [role="button"].text-n-blue-text svg,
.dark aside[class*="w-[200px]"] [role="button"].text-n-blue-text span[class*="i-"] {
  color: #6ABF6A !important;
}

/* Count badge no item ativo */
aside[class*="w-[200px]"] a.active .text-n-blue-text,
aside[class*="w-[200px]"] a.text-n-blue-text .text-n-blue-text,
aside[class*="w-[200px]"] [role="button"].text-n-blue-text .text-n-blue-text {
  color: #236D23 !important;
}
aside[class*="w-[200px]"] a.active .outline-n-slate-6,
aside[class*="w-[200px]"] a.text-n-blue-text .outline-n-slate-6 {
  outline-color: #236D23 !important;
}
.dark aside[class*="w-[200px]"] a.active .text-n-blue-text,
.dark aside[class*="w-[200px]"] a.text-n-blue-text .text-n-blue-text {
  color: #6ABF6A !important;
}
.dark aside[class*="w-[200px]"] a.active .outline-n-slate-6 {
  outline-color: #6ABF6A !important;
}

/* --- 6u-3. Itens Inativos — Texto #525252 --- */
aside[class*="w-[200px]"] .child-item {
  color: #525252 !important;
}
aside[class*="w-[200px]"] .child-item a:not(.active):not(.text-n-blue-text) {
  color: #525252 !important;
}
aside[class*="w-[200px]"] .child-item a:not(.active):not(.text-n-blue-text) svg,
aside[class*="w-[200px]"] .child-item a:not(.active):not(.text-n-blue-text) span[class*="i-"] {
  color: #525252 !important;
}
/* Group headers inativos */
aside[class*="w-[200px]"] [role="button"].text-n-slate-11 {
  color: #525252 !important;
}
aside[class*="w-[200px]"] [role="button"].text-n-slate-11 svg,
aside[class*="w-[200px]"] [role="button"].text-n-slate-11 span[class*="i-"] {
  color: #525252 !important;
}
.dark aside[class*="w-[200px]"] .child-item,
.dark aside[class*="w-[200px]"] .child-item a:not(.active):not(.text-n-blue-text) {
  color: #9CA3AF !important;
}
.dark aside[class*="w-[200px]"] .child-item a:not(.active):not(.text-n-blue-text) svg,
.dark aside[class*="w-[200px]"] .child-item a:not(.active):not(.text-n-blue-text) span[class*="i-"] {
  color: #9CA3AF !important;
}
.dark aside[class*="w-[200px]"] [role="button"].text-n-slate-11,
.dark aside[class*="w-[200px]"] [role="button"].text-n-slate-11 svg,
.dark aside[class*="w-[200px]"] [role="button"].text-n-slate-11 span[class*="i-"] {
  color: #9CA3AF !important;
}

/* --- 6u-4. Tree Lines — #D4D4D4 --- */
aside[class*="w-[200px]"] .sidebar-group-children .child-item::before {
  background-color: #D4D4D4 !important;
}
aside[class*="w-[200px]"] .sidebar-group-children .child-item::after {
  border-color: #D4D4D4 !important;
}
.dark aside[class*="w-[200px]"] .sidebar-group-children .child-item::before {
  background-color: #363840 !important;
}
.dark aside[class*="w-[200px]"] .sidebar-group-children .child-item::after {
  border-color: #363840 !important;
}

/* --- 6u-5. Label Dots — Círculos (border-radius 50%) --- */
aside[class*="w-[200px]"] span[class*="rounded-sm"][style*="background"] {
  border-radius: 50% !important;
}

/* --- 6u-6. Altura dos Itens — min 36px (permite quebra de linha) --- */
aside[class*="w-[200px]"] .child-item a {
  min-height: 36px !important;
  height: auto !important;
}
aside[class*="w-[200px]"] [role="button"][class*="h-8"] {
  height: 36px !important;
}

/* --- 6u-7. Headers de Seção — Texto #000 (bold) --- */
aside[class*="w-[200px]"] [role="button"] .text-sm.font-medium {
  color: #000000 !important;
}
aside[class*="w-[200px]"] [role="button"].text-n-slate-12 {
  color: #000000 !important;
}
.dark aside[class*="w-[200px]"] [role="button"] .text-sm.font-medium {
  color: #FFFFFF !important;
}
.dark aside[class*="w-[200px]"] [role="button"].text-n-slate-12 {
  color: #FFFFFF !important;
}

/* --- 6u-8. Botões "+" das Seções --- */
aside[class*="w-[200px]"] [role="button"] + button,
aside[class*="w-[200px]"] li button[class*="size-"] {
  background: #FFFFFF !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  color: #525252 !important;
}
.dark aside[class*="w-[200px]"] [role="button"] + button,
.dark aside[class*="w-[200px]"] li button[class*="size-"] {
  background: #1F2125 !important;
  border-color: #363840 !important;
  color: #9CA3AF !important;
}

/* --- 6u-9. Perfil do Usuário — Rodapé --- */
/* Avatar com borda */
aside[class*="w-[200px]"] [class*="flex-shrink-0"] img[class*="rounded-full"],
aside[class*="w-[200px]"] .user-thumbnail-box {
  border: 1px solid #D4D4D4 !important;
}
.dark aside[class*="w-[200px]"] [class*="flex-shrink-0"] img[class*="rounded-full"],
.dark aside[class*="w-[200px]"] .user-thumbnail-box {
  border-color: #363840 !important;
}

/* Nome do usuário — preto */
aside[class*="w-[200px]"] .text-n-slate-12 {
  color: #000000 !important;
}
.dark aside[class*="w-[200px]"] .text-n-slate-12 {
  color: #FFFFFF !important;
}

/* Email / subtítulo */
aside[class*="w-[200px]"] .text-n-slate-11 {
  color: #525252 !important;
}
.dark aside[class*="w-[200px]"] .text-n-slate-11 {
  color: #9CA3AF !important;
}

/* --- 6u-10. Hover suave nos itens --- */
aside[class*="w-[200px]"] .child-item a:not(.active):not(.text-n-blue-text):hover {
  background: #F5F5F5 !important;
}
.dark aside[class*="w-[200px]"] .child-item a:not(.active):not(.text-n-blue-text):hover {
  background: #1F2125 !important;
}

/* Search bar — match sidebar bg */
aside[class*="w-[200px]"] .bg-n-solid-3 {
  background: #F5F5F5 !important;
}
.dark aside[class*="w-[200px]"] .bg-n-solid-3 {
  background: #1F2125 !important;
}

/* Brand notification dot — verde */
aside[class*="w-[200px]"] .bg-n-brand {
  background: #236D23 !important;
}
.dark aside[class*="w-[200px]"] .bg-n-brand {
  background: #6ABF6A !important;
}

/* Channel icon ativo — verde */
aside[class*="w-[200px]"] .bg-n-solid-blue {
  background: #236D23 !important;
}
.dark aside[class*="w-[200px]"] .bg-n-solid-blue {
  background: #1A3A1A !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. SZ COLLAPSIBLE SECTIONS (CRM, Monitoramento, Pay)
   Injetados via JS abaixo de "Notas do contato"
   ═══════════════════════════════════════════════════════════════ */

/* --- 7a. Container geral --- */
.sz-collapsible {
  width: 100%;
  border-bottom: 1px solid #E0E1E6;
}
#sz-crm {
  border-top: 1px solid #E0E1E6;
}
.dark .sz-collapsible {
  border-bottom-color: #2B2F36;
}
.dark #sz-crm {
  border-top-color: #2B2F36;
}

/* --- 7b. Header clicável --- */
.sz-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px;
  cursor: pointer;
  background: rgb(255, 255, 255);
  user-select: none;
  gap: 8px;
}
.dark .sz-collapsible-header {
  background: rgb(22, 23, 26);
}
.sz-collapsible-header:hover {
  background: rgb(247, 247, 247);
}
.dark .sz-collapsible-header:hover {
  background: rgb(28, 29, 32);
}

/* Icon badge (24x24 colored square with SZ logo) */
.sz-collapsible-icon {
  width: 24px;
  height: 24px;
  border-radius: 4.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* Title */
.sz-collapsible-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #1C2024;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dark .sz-collapsible-title {
  color: #EDEEEF;
}

/* Chevron wrapper (white rounded square per Figma) */
.sz-collapsible-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgb(255, 255, 255);
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.dark .sz-collapsible-chevron {
  background: rgb(34, 37, 41);
}
.sz-collapsible.open .sz-collapsible-chevron {
  transform: rotate(180deg);
}

/* --- 7c. Content area (collapsible) --- */
.sz-collapsible-content {
  display: none;
}
.sz-collapsible.open .sz-collapsible-content {
  display: block;
}

/* --- 7d. "Em breve..." coming soon card --- */
.sz-coming-soon {
  padding: 24px 16px;
  background: rgb(247, 247, 247);
  position: relative;
  overflow: hidden;
}
.dark .sz-coming-soon {
  background: rgb(28, 29, 32);
}
/* Decorative blurred shapes behind the card */
.sz-coming-soon::before,
.sz-coming-soon::after {
  content: '';
  position: absolute;
  border-radius: 8px;
  background: #C1C5CD;
  opacity: 0.5;
  filter: blur(8px);
  z-index: 0;
}
.sz-coming-soon::before {
  width: 60px;
  height: 60px;
  top: 12px;
  left: 20px;
  transform: rotate(8deg);
}
.sz-coming-soon::after {
  width: 50px;
  height: 50px;
  top: 50px;
  right: 30px;
  transform: rotate(-12deg);
}
.dark .sz-coming-soon::before,
.dark .sz-coming-soon::after {
  background: #3A3F47;
}
.sz-coming-soon-card {
  position: relative;
  z-index: 1;
  background: rgb(254, 254, 254);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.dark .sz-coming-soon-card {
  background: rgb(20, 21, 23);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.sz-coming-soon-title {
  font-size: 20px;
  font-weight: 700;
  color: #1C2024;
  margin-bottom: 4px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dark .sz-coming-soon-title {
  color: #EDEEEF;
}
.sz-coming-soon-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #1C2024;
  line-height: 1.4;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dark .sz-coming-soon-subtitle {
  color: #EDEEEF;
}
.sz-coming-soon-desc {
  font-size: 13px;
  color: #60646C;
  line-height: 1.5;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dark .sz-coming-soon-desc {
  color: #B0B4BA;
}
.sz-coming-soon-illustration {
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.sz-coming-soon-illustration svg {
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* --- Botão "+" Canais — base + hover --- */
.sz-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: 1px solid #D4D4D4 !important;
  background: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  pointer-events: auto !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sz-add-btn svg { color: #525252; }
.sz-add-btn:hover {
  background: #F5F5F5 !important;
  border-color: #A3A3A3 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dark .sz-add-btn {
  border-color: #363840 !important;
  background: #282A2E !important;
}
.dark .sz-add-btn svg { color: #9EA1A7; }
.dark .sz-add-btn:hover {
  background: #363840 !important;
  border-color: #52525B !important;
}

/* --- Popup modal --- */
@keyframes szFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sz-popup-overlay { background: rgba(0,0,0,0.45); }
.sz-popup-modal { background: #fff; box-shadow: 0 24px 48px rgba(0,0,0,0.18); }
.sz-popup-header { border-bottom: 1px solid #E5E5E5; }
.sz-popup-title { color: #171717; }
.sz-popup-close { color: #525252; }
.sz-popup-close:hover { background: #F5F5F5; }

.dark .sz-popup-overlay { background: rgba(0,0,0,0.6); }
.dark .sz-popup-modal { background: #1F2125; border: 1px solid #282A2E; box-shadow: 0 24px 48px rgba(0,0,0,0.4); }
.dark .sz-popup-header { border-bottom-color: #282A2E; }
.dark .sz-popup-title { color: #FAFAFA; }
.dark .sz-popup-close { color: #9EA1A7; }
.dark .sz-popup-close:hover { background: #282A2E; }

/* --- Override i-lucide-mailbox → Canais custom icon --- */
.i-lucide-mailbox {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.875%2010.625C6.875%2010.7908%206.80915%2010.9497%206.69194%2011.0669C6.57473%2011.1842%206.41576%2011.25%206.25%2011.25H3.125C2.95924%2011.25%202.80027%2011.1842%202.68306%2011.0669C2.56585%2010.9497%202.5%2010.7908%202.5%2010.625C2.5%2010.4592%202.56585%2010.3003%202.68306%2010.1831C2.80027%2010.0658%202.95924%2010%203.125%2010H6.25C6.41576%2010%206.57473%2010.0658%206.69194%2010.1831C6.80915%2010.3003%206.875%2010.4592%206.875%2010.625ZM17.5%207.8125V12.5C17.5%2012.8315%2017.3683%2013.1495%2017.1339%2013.3839C16.8995%2013.6183%2016.5815%2013.75%2016.25%2013.75H9.375V16.25C9.375%2016.4158%209.30915%2016.5747%209.19194%2016.6919C9.07473%2016.8092%208.91576%2016.875%208.75%2016.875C8.58424%2016.875%208.42527%2016.8092%208.30806%2016.6919C8.19085%2016.5747%208.125%2016.4158%208.125%2016.25V13.75H1.25C0.918479%2013.75%200.600537%2013.6183%200.366116%2013.3839C0.131696%2013.1495%200%2012.8315%200%2012.5V7.8125C0.00144735%206.56974%200.495772%205.3783%201.37454%204.49954C2.2533%203.62077%203.44474%203.12645%204.6875%203.125H10.625V0.625C10.625%200.45924%2010.6908%200.300268%2010.8081%200.183058C10.9253%200.065848%2011.0842%200%2011.25%200H13.75C13.9158%200%2014.0747%200.065848%2014.1919%200.183058C14.3092%200.300268%2014.375%200.45924%2014.375%200.625C14.375%200.79076%2014.3092%200.949732%2014.1919%201.06694C14.0747%201.18415%2013.9158%201.25%2013.75%201.25H11.875V3.125H12.8125C14.0553%203.12645%2015.2467%203.62077%2016.1255%204.49954C17.0042%205.3783%2017.4986%206.56974%2017.5%207.8125ZM8.125%2012.5V7.8125C8.125%206.90082%207.76284%206.02648%207.11818%205.38182C6.47352%204.73716%205.59918%204.375%204.6875%204.375C3.77582%204.375%202.90148%204.73716%202.25682%205.38182C1.61216%206.02648%201.25%206.90082%201.25%207.8125V12.5H8.125ZM16.25%207.8125C16.249%206.90114%2015.8865%206.02739%2015.242%205.38296C14.5976%204.73853%2013.7239%204.37603%2012.8125%204.375H11.875V10C11.875%2010.1658%2011.8092%2010.3247%2011.6919%2010.4419C11.5747%2010.5592%2011.4158%2010.625%2011.25%2010.625C11.0842%2010.625%2010.9253%2010.5592%2010.8081%2010.4419C10.6908%2010.3247%2010.625%2010.1658%2010.625%2010V4.375H7.87109C8.34552%204.81309%208.72407%205.34469%208.98291%205.93631C9.24174%206.52793%209.37524%207.16674%209.375%207.8125V12.5H16.25V7.8125Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.875%2010.625C6.875%2010.7908%206.80915%2010.9497%206.69194%2011.0669C6.57473%2011.1842%206.41576%2011.25%206.25%2011.25H3.125C2.95924%2011.25%202.80027%2011.1842%202.68306%2011.0669C2.56585%2010.9497%202.5%2010.7908%202.5%2010.625C2.5%2010.4592%202.56585%2010.3003%202.68306%2010.1831C2.80027%2010.0658%202.95924%2010%203.125%2010H6.25C6.41576%2010%206.57473%2010.0658%206.69194%2010.1831C6.80915%2010.3003%206.875%2010.4592%206.875%2010.625ZM17.5%207.8125V12.5C17.5%2012.8315%2017.3683%2013.1495%2017.1339%2013.3839C16.8995%2013.6183%2016.5815%2013.75%2016.25%2013.75H9.375V16.25C9.375%2016.4158%209.30915%2016.5747%209.19194%2016.6919C9.07473%2016.8092%208.91576%2016.875%208.75%2016.875C8.58424%2016.875%208.42527%2016.8092%208.30806%2016.6919C8.19085%2016.5747%208.125%2016.4158%208.125%2016.25V13.75H1.25C0.918479%2013.75%200.600537%2013.6183%200.366116%2013.3839C0.131696%2013.1495%200%2012.8315%200%2012.5V7.8125C0.00144735%206.56974%200.495772%205.3783%201.37454%204.49954C2.2533%203.62077%203.44474%203.12645%204.6875%203.125H10.625V0.625C10.625%200.45924%2010.6908%200.300268%2010.8081%200.183058C10.9253%200.065848%2011.0842%200%2011.25%200H13.75C13.9158%200%2014.0747%200.065848%2014.1919%200.183058C14.3092%200.300268%2014.375%200.45924%2014.375%200.625C14.375%200.79076%2014.3092%200.949732%2014.1919%201.06694C14.0747%201.18415%2013.9158%201.25%2013.75%201.25H11.875V3.125H12.8125C14.0553%203.12645%2015.2467%203.62077%2016.1255%204.49954C17.0042%205.3783%2017.4986%206.56974%2017.5%207.8125ZM8.125%2012.5V7.8125C8.125%206.90082%207.76284%206.02648%207.11818%205.38182C6.47352%204.73716%205.59918%204.375%204.6875%204.375C3.77582%204.375%202.90148%204.73716%202.25682%205.38182C1.61216%206.02648%201.25%206.90082%201.25%207.8125V12.5H8.125ZM16.25%207.8125C16.249%206.90114%2015.8865%206.02739%2015.242%205.38296C14.5976%204.73853%2013.7239%204.37603%2012.8125%204.375H11.875V10C11.875%2010.1658%2011.8092%2010.3247%2011.6919%2010.4419C11.5747%2010.5592%2011.4158%2010.625%2011.25%2010.625C11.0842%2010.625%2010.9253%2010.5592%2010.8081%2010.4419C10.6908%2010.3247%2010.625%2010.1658%2010.625%2010V4.375H7.87109C8.34552%204.81309%208.72407%205.34469%208.98291%205.93631C9.24174%206.52793%209.37524%207.16674%209.375%207.8125V12.5H16.25V7.8125Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* --- Override i-lucide-chart-spline → Dashboard pie chart icon --- */
.i-lucide-chart-spline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8.125%200C6.51803%200%204.94714%200.476523%203.611%201.36931C2.27485%202.2621%201.23344%203.53105%200.618482%205.0157C0.00352044%206.50035%20-0.157382%208.13401%200.156123%209.71011C0.469628%2011.2862%201.24346%2012.7339%202.37976%2013.8702C3.51606%2015.0065%204.9638%2015.7804%206.5399%2016.0939C8.11599%2016.4074%209.74966%2016.2465%2011.2343%2015.6315C12.719%2015.0166%2013.9879%2013.9752%2014.8807%2012.639C15.7735%2011.3029%2016.25%209.73197%2016.25%208.125C16.2477%205.97081%2015.391%203.90551%2013.8677%202.38227C12.3445%200.85903%2010.2792%200.00227486%208.125%200ZM13.7398%204.16172L8.75%207.04219V1.27891C9.74079%201.36974%2010.7001%201.67454%2011.5616%202.17226C12.4231%202.66998%2013.1663%203.34876%2013.7398%204.16172ZM7.5%201.27891V7.76328L1.8836%2011.0055C1.42253%2010.0061%201.20813%208.9107%201.2584%207.81128C1.30868%206.71185%201.62216%205.64056%202.17251%204.68747C2.72285%203.73438%203.49396%202.92734%204.42103%202.3342C5.34809%201.74106%206.40401%201.37915%207.5%201.27891ZM8.125%2015C7.02437%2014.9995%205.93993%2014.7349%204.96286%2014.2282C3.98579%2013.7215%203.14465%2012.9876%202.51016%2012.0883L14.3664%205.24375C14.8499%206.29121%2015.062%207.4435%2014.9832%208.59447C14.9045%209.74545%2014.5373%2010.8581%2013.9156%2011.8299C13.2939%2012.8017%2012.4376%2013.6015%2011.4257%2014.1555C10.4138%2014.7094%209.27867%2014.9999%208.125%2015Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8.125%200C6.51803%200%204.94714%200.476523%203.611%201.36931C2.27485%202.2621%201.23344%203.53105%200.618482%205.0157C0.00352044%206.50035%20-0.157382%208.13401%200.156123%209.71011C0.469628%2011.2862%201.24346%2012.7339%202.37976%2013.8702C3.51606%2015.0065%204.9638%2015.7804%206.5399%2016.0939C8.11599%2016.4074%209.74966%2016.2465%2011.2343%2015.6315C12.719%2015.0166%2013.9879%2013.9752%2014.8807%2012.639C15.7735%2011.3029%2016.25%209.73197%2016.25%208.125C16.2477%205.97081%2015.391%203.90551%2013.8677%202.38227C12.3445%200.85903%2010.2792%200.00227486%208.125%200ZM13.7398%204.16172L8.75%207.04219V1.27891C9.74079%201.36974%2010.7001%201.67454%2011.5616%202.17226C12.4231%202.66998%2013.1663%203.34876%2013.7398%204.16172ZM7.5%201.27891V7.76328L1.8836%2011.0055C1.42253%2010.0061%201.20813%208.9107%201.2584%207.81128C1.30868%206.71185%201.62216%205.64056%202.17251%204.68747C2.72285%203.73438%203.49396%202.92734%204.42103%202.3342C5.34809%201.74106%206.40401%201.37915%207.5%201.27891ZM8.125%2015C7.02437%2014.9995%205.93993%2014.7349%204.96286%2014.2282C3.98579%2013.7215%203.14465%2012.9876%202.51016%2012.0883L14.3664%205.24375C14.8499%206.29121%2015.062%207.4435%2014.9832%208.59447C14.9045%209.74545%2014.5373%2010.8581%2013.9156%2011.8299C13.2939%2012.8017%2012.4376%2013.6015%2011.4257%2014.1555C10.4138%2014.7094%209.27867%2014.9999%208.125%2015Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* --- Override i-lucide-contact → Contatos custom icon --- */
.i-lucide-contact {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M16.1735%2014.6896C14.9836%2012.6326%2013.15%2011.1576%2011.0102%2010.4584C12.0686%209.82826%2012.891%208.86812%2013.351%207.7254C13.8109%206.58268%2013.8831%205.32056%2013.5563%204.13287C13.2296%202.94518%2012.522%201.89759%2011.5422%201.15097C10.5624%200.404356%209.36466%200%208.13284%200C6.90102%200%205.70325%200.404356%204.72349%201.15097C3.74372%201.89759%203.03612%202.94518%202.70936%204.13287C2.3826%205.32056%202.45474%206.58268%202.91471%207.7254C3.37467%208.86812%204.19703%209.82826%205.2555%2010.4584C3.11565%2011.1568%201.28206%2012.6318%200.0922159%2014.6896C0.0485822%2014.7608%200.0196403%2014.8399%200.0070978%2014.9225C-0.00544473%2015.005%20-0.00133381%2015.0892%200.019188%2015.1701C0.0397098%2015.251%200.0762269%2015.3269%200.126585%2015.3935C0.176942%2015.46%200.24012%2015.5158%200.312392%2015.5576C0.384663%2015.5993%200.464563%2015.6262%200.547378%2015.6365C0.630193%2015.6469%200.714246%2015.6406%200.794576%2015.6179C0.874907%2015.5953%200.949888%2015.5568%201.0151%2015.5047C1.08031%2015.4526%201.13442%2015.388%201.17425%2015.3146C2.64612%2012.7709%205.24768%2011.2521%208.13284%2011.2521C11.018%2011.2521%2013.6196%2012.7709%2015.0914%2015.3146C15.1313%2015.388%2015.1854%2015.4526%2015.2506%2015.5047C15.3158%2015.5568%2015.3908%2015.5953%2015.4711%2015.6179C15.5514%2015.6406%2015.6355%2015.6469%2015.7183%2015.6365C15.8011%2015.6262%2015.881%2015.5993%2015.9533%2015.5576C16.0256%2015.5158%2016.0887%2015.46%2016.1391%2015.3935C16.1895%2015.3269%2016.226%2015.251%2016.2465%2015.1701C16.267%2015.0892%2016.2711%2015.005%2016.2586%2014.9225C16.246%2014.8399%2016.2171%2014.7608%2016.1735%2014.6896ZM3.75784%205.62713C3.75784%204.76183%204.01443%203.91597%204.49516%203.19651C4.97589%202.47704%205.65917%201.91629%206.4586%201.58515C7.25803%201.25402%208.13769%201.16738%208.98636%201.33619C9.83503%201.505%2010.6146%201.92168%2011.2264%202.53353C11.8383%203.14539%2012.255%203.92494%2012.4238%204.77361C12.5926%205.62227%2012.5059%206.50194%2012.1748%207.30137C11.8437%208.10079%2011.2829%208.78407%2010.5635%209.2648C9.844%209.74554%208.99813%2010.0021%208.13284%2010.0021C6.9729%2010.0009%205.86082%209.53955%205.04062%208.71935C4.22042%207.89915%203.75908%206.78707%203.75784%205.62713Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M16.1735%2014.6896C14.9836%2012.6326%2013.15%2011.1576%2011.0102%2010.4584C12.0686%209.82826%2012.891%208.86812%2013.351%207.7254C13.8109%206.58268%2013.8831%205.32056%2013.5563%204.13287C13.2296%202.94518%2012.522%201.89759%2011.5422%201.15097C10.5624%200.404356%209.36466%200%208.13284%200C6.90102%200%205.70325%200.404356%204.72349%201.15097C3.74372%201.89759%203.03612%202.94518%202.70936%204.13287C2.3826%205.32056%202.45474%206.58268%202.91471%207.7254C3.37467%208.86812%204.19703%209.82826%205.2555%2010.4584C3.11565%2011.1568%201.28206%2012.6318%200.0922159%2014.6896C0.0485822%2014.7608%200.0196403%2014.8399%200.0070978%2014.9225C-0.00544473%2015.005%20-0.00133381%2015.0892%200.019188%2015.1701C0.0397098%2015.251%200.0762269%2015.3269%200.126585%2015.3935C0.176942%2015.46%200.24012%2015.5158%200.312392%2015.5576C0.384663%2015.5993%200.464563%2015.6262%200.547378%2015.6365C0.630193%2015.6469%200.714246%2015.6406%200.794576%2015.6179C0.874907%2015.5953%200.949888%2015.5568%201.0151%2015.5047C1.08031%2015.4526%201.13442%2015.388%201.17425%2015.3146C2.64612%2012.7709%205.24768%2011.2521%208.13284%2011.2521C11.018%2011.2521%2013.6196%2012.7709%2015.0914%2015.3146C15.1313%2015.388%2015.1854%2015.4526%2015.2506%2015.5047C15.3158%2015.5568%2015.3908%2015.5953%2015.4711%2015.6179C15.5514%2015.6406%2015.6355%2015.6469%2015.7183%2015.6365C15.8011%2015.6262%2015.881%2015.5993%2015.9533%2015.5576C16.0256%2015.5158%2016.0887%2015.46%2016.1391%2015.3935C16.1895%2015.3269%2016.226%2015.251%2016.2465%2015.1701C16.267%2015.0892%2016.2711%2015.005%2016.2586%2014.9225C16.246%2014.8399%2016.2171%2014.7608%2016.1735%2014.6896ZM3.75784%205.62713C3.75784%204.76183%204.01443%203.91597%204.49516%203.19651C4.97589%202.47704%205.65917%201.91629%206.4586%201.58515C7.25803%201.25402%208.13769%201.16738%208.98636%201.33619C9.83503%201.505%2010.6146%201.92168%2011.2264%202.53353C11.8383%203.14539%2012.255%203.92494%2012.4238%204.77361C12.5926%205.62227%2012.5059%206.50194%2012.1748%207.30137C11.8437%208.10079%2011.2829%208.78407%2010.5635%209.2648C9.844%209.74554%208.99813%2010.0021%208.13284%2010.0021C6.9729%2010.0009%205.86082%209.53955%205.04062%208.71935C4.22042%207.89915%203.75908%206.78707%203.75784%205.62713Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* ===================================================================
   FIXED HEADER — Barra superior full-width (Figma Header.svg)
   Sobrepõe toda a página exceto a navbar lateral (200px)
   =================================================================== */
.sz-fixed-header {
  position: fixed !important;
  top: 0 !important;
  /* left é definido dinamicamente via JS (injectFixedHeader) */
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 80px !important;
  padding: 0 20px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #D4D4D4 !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
}
.dark .sz-fixed-header {
  background: #1F2125 !important;
  border-bottom-color: #282A2E !important;
}
/* Empurrar conteúdo abaixo do header fixo — exclui sidebar e settings */
section.flex.w-full.h-full.min-w-0 > *:not(aside):not(.sz-settings-panel) {
  padding-top: 80px !important;
  box-sizing: border-box !important;
}

/* Settings pages (Agentes, Equipes, etc.) — container scrollável com bg-n-background */
div.overflow-auto.bg-n-background {
  padding-top: 105px !important;
  box-sizing: border-box !important;
}
/* Contact detail pages — container com header visível (flex-1 diferencia de settings) */
div.flex-1.overflow-auto.bg-n-background {
  padding-top: 80px !important;
  box-sizing: border-box !important;
}
/* Search results page — reduzir espaçamento superior */
section.flex-grow.overflow-hidden {
  padding-top: 0 !important;
}
/* Esconder div separador com botão "Anterior" na busca */
div.flex.w-full.p-4:has(> button[primary]) {
  display: none !important;
}
/* Reset padding dentro de iframes (popups de criação de canal, etc.) */
.sz-in-iframe div.overflow-auto.bg-n-background,
.sz-in-iframe section.flex.w-full.h-full.min-w-0 > *:not(aside):not(.sz-settings-panel) {
  padding-top: 0 !important;
}

/* Search + Edit actions wrapper */
.sz-header-actions {
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.sz-header-actions .flex.gap-2 {
  gap: 12px !important;
  align-items: center !important;
}
.sz-header-actions a {
  text-decoration: none !important;
}
/* (search link replaced by .sz-search-input-wrap — styles in SEARCH DROPDOWN section) */
/* Override: Pen-line button → 47×48px (Figma Header-2.svg) */
.sz-header-actions .relative button {
  width: 47px !important;
  height: 48px !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  outline: none !important;
}
.dark .sz-header-actions .relative button {
  background: #282A2E !important;
  border-color: #363840 !important;
}

/* Spacer */
.sz-header-spacer {
  flex: 1 !important;
}

/* Botão sino/notificação (31×32px, Figma Header-2.svg) */
.sz-header-btn.sz-btn-bell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 31px !important;
  height: 32px !important;
  background: #FFFFFF !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.sz-header-btn.sz-btn-bell:hover {
  background: #F5F5F5 !important;
}
.dark .sz-header-btn.sz-btn-bell {
  background: #282A2E !important;
  border-color: #363840 !important;
}
.dark .sz-header-btn.sz-btn-bell svg path {
  fill: #D1D5DB !important;
}

/* Painel SolarZ branding — trigger do dropdown */
.sz-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 60px !important;
  padding: 0 16px !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  cursor: pointer !important;
  position: relative !important;
  border: 2px solid transparent !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.sz-header-brand:hover {
  border-color: #D4D4D4 !important;
}
.sz-header-brand.sz-brand-open {
  border-color: #388E3C !important;
  box-shadow: 0 0 0 1px rgba(56,142,60,0.15) !important;
}
.dark .sz-header-brand {
  background: #282A2E !important;
}
.dark .sz-header-brand:hover {
  border-color: #4B5563 !important;
}
.dark .sz-header-brand.sz-brand-open {
  border-color: #388E3C !important;
}
.sz-brand-icon {
  flex-shrink: 0 !important;
}
.sz-brand-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.sz-brand-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1.2 !important;
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
}
.dark .sz-brand-title {
  color: #FFFFFF !important;
}
.sz-brand-subtitle {
  font-size: 11px !important;
  color: #525252 !important;
  line-height: 1.2 !important;
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
}
.dark .sz-brand-subtitle {
  color: #9CA3AF !important;
}
.sz-brand-chevron {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  color: #000000 !important;
  margin-left: 4px !important;
  transition: transform 0.2s ease !important;
}
.sz-brand-open .sz-brand-chevron {
  transform: rotate(180deg) !important;
}
.dark .sz-brand-chevron {
  color: #D1D5DB !important;
}

/* ===== Dropdown de módulos SolarZ ===== */
.sz-brand-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 8px 0;
  z-index: 10000;
  animation: szDropFade 0.15s ease;
}
.sz-brand-open .sz-brand-dropdown {
  display: block;
}
@keyframes szDropFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dark .sz-brand-dropdown {
  background: #282A2E;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Item do dropdown */
.sz-brand-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.1s ease;
}
/* Ativo (selecionado) — verde 10% */
.sz-brand-item[data-module="Chat"] {
  background: rgba(56, 142, 60, 0.10);
}

/* Hover por módulo — cor específica 10% */
.sz-brand-item[data-module="Chat"]:hover {
  background: rgba(56, 142, 60, 0.18);
}
.sz-brand-item[data-module="Monitoramento"]:hover {
  background: rgba(191, 100, 48, 0.10);
}
.sz-brand-item[data-module="CRM"]:hover {
  background: rgba(46, 108, 196, 0.10);
}
.sz-brand-item[data-module="Pay"]:hover {
  background: rgba(245, 125, 0, 0.10);
}
.sz-brand-item[data-module="Gerenciamento"]:hover {
  background: rgba(173, 70, 255, 0.10);
}

/* Dark mode hover */
.dark .sz-brand-item[data-module="Chat"] {
  background: rgba(56, 142, 60, 0.15);
}
.dark .sz-brand-item[data-module="Chat"]:hover {
  background: rgba(56, 142, 60, 0.25);
}
.dark .sz-brand-item[data-module="Monitoramento"]:hover {
  background: rgba(191, 100, 48, 0.15);
}
.dark .sz-brand-item[data-module="CRM"]:hover {
  background: rgba(46, 108, 196, 0.15);
}
.dark .sz-brand-item[data-module="Pay"]:hover {
  background: rgba(245, 125, 0, 0.15);
}
.dark .sz-brand-item[data-module="Gerenciamento"]:hover {
  background: rgba(173, 70, 255, 0.15);
}

/* Ícone do módulo (Logo.svg com cor dinâmica) */
.sz-brand-item-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sz-brand-item-icon svg {
  width: 34px;
  height: 34px;
  border-radius: 0;
  overflow: visible;
}

/* Texto do item */
.sz-brand-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.sz-brand-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
}
.dark .sz-brand-item-name {
  color: #F3F4F6;
}
.sz-brand-item-meta {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.3;
}
.dark .sz-brand-item-meta {
  color: #9CA3AF;
}

/* Ícone direito (check / lock) */
.sz-brand-item-status {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
}
.sz-brand-item-status.sz-active {
  color: #388E3C;
}

/* Backdrop para fechar ao clicar fora */
.sz-brand-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9998;
}
.sz-brand-backdrop.active {
  display: block;
}

/* ===== Esconder menu secundário nativo do Chatwoot em settings ===== */
.secondary-menu {
  display: none !important;
}
/* Esconder sub-itens de settings na sidebar primária */
ul.sidebar-group-children:has(li[name^="Settings"]) {
  display: none !important;
}
.settings-root > div:first-child:not(.settings-content) {
  display: none !important;
}
.settings-root .settings-content,
.settings-root > div:last-child {
  max-width: 100% !important;
  flex: 1 !important;
  margin: 0 !important;
}
/* Settings root e conteúdo — responsivo */
.settings-root {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.settings-root .settings-content,
.settings-root > div:last-child {
  max-width: 100% !important;
  flex: 1 !important;
}

/* ===== Painel Secundário de Ajustes Gerais ===== */
.sz-settings-panel {
  position: static;
  width: 220px;
  min-width: 220px;
  height: 100%;
  flex-shrink: 0;
  background: #FFFFFF;
  border-right: 1px solid #D1D5DB;
  box-shadow: 2px 0 8px rgba(0,0,0,0.06);
  padding: 16px 0;
  overflow-y: auto;
  animation: szSlideIn 0.15s ease-out;
}
@keyframes szSlideIn {
  from { transform: translateX(-10px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.sz-settings-panel .sz-sp-header {
  padding: 8px 16px 12px;
  font-weight: 600;
  font-size: 14px;
  color: #000;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 8px;
}
.sz-settings-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 2px 8px;
  color: #525252;
  text-decoration: none;
  font-size: 14px;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.sz-settings-panel a:hover {
  background: #F5F5F5;
}
/* Item ativo no painel de settings */
.sz-settings-panel a.sz-sp-active {
  background: #EEF6F0;
  color: #236D23;
}
.sz-settings-panel a.sz-sp-active svg {
  stroke: #236D23;
}
/* Link "Ajustes Gerais" ativo na navbar principal (painel aberto) */
.sz-settings-active {
  background: #EEF6F0 !important;
  color: #236D23 !important;
}
.sz-settings-active svg,
.sz-settings-active span[class*="i-"] {
  color: #236D23 !important;
}
/* Dark mode */
.dark .sz-settings-panel {
  background: #1C1E22;
  border-right-color: #282A2E;
  box-shadow: 2px 0 8px rgba(0,0,0,0.2);
}
.dark .sz-settings-panel .sz-sp-header {
  color: #E5E5E5;
  border-bottom-color: #282A2E;
}
.dark .sz-settings-panel a {
  color: #9CA3AF;
}
.dark .sz-settings-panel a svg {
  stroke: #9CA3AF;
}
.dark .sz-settings-panel a:hover {
  background: #1F2125;
}
.dark .sz-settings-panel a.sz-sp-active {
  background: #1A3A1A;
  color: #6ABF6A;
}
.dark .sz-settings-panel a.sz-sp-active svg {
  stroke: #6ABF6A;
}
.dark .sz-settings-active {
  background: #1A3A1A !important;
  color: #6ABF6A !important;
}
.dark .sz-settings-active svg,
.dark .sz-settings-active span[class*="i-"] {
  color: #6ABF6A !important;
}

/* Hide native sidebar search bar (replaced by header search) */
a[href="/app/accounts/5/search"] { display: none !important; }
a[href="/app/accounts/5/search"] + div { display: none !important; }
a[href="/app/accounts/5/search"]:has(~ div) { display: none !important; }
div.flex.gap-2.px-2:has(> a[href="/app/accounts/5/search"]) { display: none !important; }

/* Sidebar top section: match header height (80px) */
section.grid:has(> div > a[href="/app/accounts/5/search"]) {
  height: 80px !important;
  min-height: 80px !important;
  margin: 0 0 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid #D4D4D4 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* ===== SEARCH DROPDOWN (iframe-based) ===== */
.sz-search-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  background: transparent;
}
.sz-search-backdrop.active { display: block; }

.sz-search-panel {
  display: none;
  position: fixed;
  /* top/left/width set dynamically via JS */
  width: 700px;
  height: calc(100vh - 120px);
  min-height: 500px;
  background: #FFFFFF;
  z-index: 10001;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #E2E8F0;
}
.sz-search-panel.active { display: flex; }

/* Search result tabs — cores SolarZ */
div.bg-n-alpha-1.rounded-lg > .bg-n-solid-active {
  background: rgba(56, 142, 60, 0.10) !important;
  outline-color: rgba(56, 142, 60, 0.20) !important;
}
div.bg-n-alpha-1.rounded-lg > button.text-n-blue-text {
  color: #388E3C !important;
}
div.bg-n-alpha-1.rounded-lg > button.text-n-slate-10 {
  color: #525252 !important;
}
div.bg-n-alpha-1.rounded-lg > button:hover {
  color: #6B7280 !important;
}

.sz-search-iframe {
  width: 100%;
  height: 100%;
  border: none;
  flex: 1;
}

/* --- Search input (lives in the header bar) --- */
.sz-fixed-header .sz-search-input-wrap {
  display: flex;
  align-items: center;
  width: 419px;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid #D4D4D4;
  border-radius: 8px;
  background: #FFFFFF;
  gap: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sz-fixed-header .sz-search-input-wrap:focus-within {
  border-color: #59AA59;
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.10);
  outline: none;
}
.sz-fixed-header .sz-search-input-wrap:focus { outline: none; }
.sz-search-icon { flex-shrink: 0; width: 18px; height: 18px; color: #D4D4D4; }
.sz-search-icon svg { width: 18px; height: 18px; }
.sz-search-input,
.sz-search-input:focus,
.sz-search-input:active,
.sz-search-input:hover {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 15px;
  color: #1E293B;
  line-height: 1.5;
  border-radius: 0 !important;
}
.sz-search-input::placeholder { color: #D4D4D4; }

/* --- Body (2 columns) --- */
.sz-search-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  border-top: 1px solid #E2E8F0;
}

/* Sidebar categories */
.sz-search-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid #E2E8F0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sz-search-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-size: 14px;
  color: #64748B;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
}
.sz-search-cat:hover { background: #F1F5F9; }
.sz-search-cat.active {
  color: #388E3C;
  font-weight: 600;
}
.sz-search-cat-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: inherit;
}
.sz-search-cat-icon svg { width: 20px; height: 20px; }

/* Content area (right) */
.sz-search-content {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Results title */
.sz-search-results-title {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  padding: 14px 20px 10px 20px;
  flex-shrink: 0;
}

/* Recent searches */
.sz-search-recent { padding: 16px 20px; }
.sz-search-recent-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 13px; font-weight: 500; color: #64748B;
}
.sz-search-recent-header .sz-recent-title { flex: 1; }
.sz-search-recent-header .sz-recent-clear {
  font-size: 12px; color: #94A3B8; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit;
}
.sz-search-recent-header .sz-recent-clear:hover { color: #1E293B; }
.sz-search-recent-list { list-style: none; margin: 0; padding: 0; }
.sz-search-recent-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: #1E293B; transition: background 0.1s;
}
.sz-search-recent-item:hover { background: #F1F5F9; }
.sz-search-recent-icon { width: 16px; height: 16px; color: #94A3B8; flex-shrink: 0; }

/* Loading */
.sz-search-loading {
  display: none; text-align: center; padding: 40px 20px;
  color: #94A3B8; font-size: 14px;
}
.sz-search-spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 2px solid #E2E8F0; border-top-color: #388E3C;
  border-radius: 50%; animation: sz-spin 0.6s linear infinite;
}
@keyframes sz-spin { to { transform: rotate(360deg); } }

/* Empty state */
.sz-search-empty {
  display: none; padding: 32px 20px; text-align: center;
  font-size: 14px; color: #64748B;
}

/* Results area */
.sz-search-results-area { padding: 0 8px 12px 8px; flex: 1; }
.sz-search-section { margin-bottom: 0; }
.sz-search-section-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}

/* Result item (row) */
.sz-search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; transition: background 0.1s; text-decoration: none;
}
.sz-search-item:hover { background: #F1F5F9; }

/* Contact avatar */
.sz-search-contact-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  background: #E8F5E9;
  display: flex; align-items: center; justify-content: center;
}
.sz-search-contact-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.sz-search-avatar-initials {
  font-size: 14px; font-weight: 600; color: #388E3C; text-transform: uppercase;
}

/* Item info */
.sz-search-item-info { flex: 1; min-width: 0; }
.sz-search-item-name {
  font-size: 14px; font-weight: 500; color: #1E293B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sz-search-item-detail {
  font-size: 13px; color: #64748B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Priority badge */
.sz-search-item-badge {
  flex-shrink: 0; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 4px;
  display: flex; align-items: center; gap: 4px;
}
.sz-search-badge-urgent,
.sz-search-badge-alta { background: #E8F5E9; color: #2E7D32; }
.sz-search-badge-medium,
.sz-search-badge-media { background: #FFF3E0; color: #E65100; }
.sz-search-badge-low,
.sz-search-badge-baixa { background: #E3F2FD; color: #1565C0; }
.sz-search-badge-none { display: none; }

/* Message/conversation icon */
.sz-search-msg-icon {
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0;
  background: #F1F5F9;
  display: flex; align-items: center; justify-content: center;
  color: #64748B;
}
.sz-search-msg-icon svg { width: 20px; height: 20px; }

/* Item content (multiline) */
.sz-search-item-content {
  font-size: 14px; color: #1E293B; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Highlight */
.sz-search-highlight { color: #388E3C; font-weight: 600; }

/* --- Search panel dark mode --- */
.dark .sz-search-panel {
  background: #1F2125;
  border-color: #282A2E;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
}
.dark .sz-fixed-header .sz-search-input-wrap {
  background: #282A2E;
  border-color: #363840;
}
.dark .sz-fixed-header .sz-search-input-wrap:focus-within {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}
.dark .sz-search-input,
.dark .sz-search-input:focus,
.dark .sz-search-input:active,
.dark .sz-search-input:hover { color: #FAFAFA; }
.dark .sz-search-input::placeholder { color: #6B6E75; }
.dark .sz-search-icon { color: #6B6E75; }
.dark .sz-search-body { border-top-color: #282A2E; }
.dark .sz-search-sidebar { border-right-color: #282A2E; }
.dark .sz-search-cat { color: #9EA1A7; }
.dark .sz-search-cat:hover { background: #282A2E; }
.dark .sz-search-cat.active { color: #4CAF50; }
.dark .sz-search-results-title { color: #FAFAFA; }
.dark .sz-search-recent { }
.dark .sz-search-recent-header { color: #9EA1A7; border-bottom-color: #282A2E; }
.dark .sz-search-recent-header .sz-recent-clear { color: #6B6E75; }
.dark .sz-search-recent-header .sz-recent-clear:hover { color: #FAFAFA; }
.dark .sz-search-recent-item { color: #FAFAFA; }
.dark .sz-search-recent-item:hover { background: #282A2E; }
.dark .sz-search-recent-icon { color: #6B6E75; }
.dark .sz-search-loading { color: #6B6E75; }
.dark .sz-search-spinner { border-color: #282A2E; border-top-color: #4CAF50; }
.dark .sz-search-empty { color: #6B6E75; }
.dark .sz-search-results-area { }
.dark .sz-search-item:hover { background: #282A2E; }
.dark .sz-search-contact-avatar { background: #1A3318; }
.dark .sz-search-avatar-initials { color: #4CAF50; }
.dark .sz-search-item-name { color: #FAFAFA; }
.dark .sz-search-item-detail { color: #9EA1A7; }
.dark .sz-search-item-content { color: #FAFAFA; }
.dark .sz-search-msg-icon { background: #282A2E; color: #9EA1A7; }
.dark .sz-search-highlight { color: #4CAF50; }
/* Search result tabs dark */
.dark div.bg-n-alpha-1.rounded-lg > .bg-n-solid-active {
  background: rgba(76, 175, 80, 0.15) !important;
  outline-color: rgba(76, 175, 80, 0.25) !important;
}
.dark div.bg-n-alpha-1.rounded-lg > button.text-n-blue-text { color: #4CAF50 !important; }
.dark div.bg-n-alpha-1.rounded-lg > button.text-n-slate-10 { color: #9EA1A7 !important; }
.dark div.bg-n-alpha-1.rounded-lg > button:hover { color: #FAFAFA !important; }
/* Search badge priorities dark */
.dark .sz-search-badge-urgent,
.dark .sz-search-badge-alta { background: #1A3318; color: #4CAF50; }
.dark .sz-search-badge-medium,
.dark .sz-search-badge-media { background: #3D2800; color: #F59E0B; }
.dark .sz-search-badge-low,
.dark .sz-search-badge-baixa { background: #0C2D48; color: #60A5FA; }

/* =============================================================
   AMBER → GREEN — Override direto das classes Tailwind
   Botões e slides: #388E3C | Texto de seleção: #236D23
   ============================================================= */

/* --- Backgrounds amber → green --- */
.bg-n-amber-1  { background-color: rgb(245 251 245) !important; }
.bg-n-amber-2  { background-color: rgb(232 245 233) !important; }
.bg-n-amber-3  { background-color: rgb(200 230 201) !important; }
.bg-n-amber-4  { background-color: rgb(165 214 167) !important; }
.bg-n-amber-5  { background-color: rgb(129 199 132) !important; }
.bg-n-amber-6  { background-color: rgb(102 187 106) !important; }
.bg-n-amber-7  { background-color: rgb(76 175 80) !important; }
.bg-n-amber-8  { background-color: rgb(67 160 71) !important; }
.bg-n-amber-9  { background-color: #388E3C !important; }
.bg-n-amber-10 { background-color: #2E7D32 !important; }
.bg-n-amber-11 { background-color: #236D23 !important; }
.bg-n-amber-12 { background-color: #1B4A1B !important; }
.bg-n-solid-amber { background-color: rgb(232 245 233) !important; }

/* --- Backgrounds amber com opacity --- */
[class*="bg-n-amber-9\/"] { background-color: rgba(56, 142, 60, 0.10) !important; }

/* --- Text amber → green --- */
.text-n-amber-1  { color: rgb(245 251 245) !important; }
.text-n-amber-2  { color: rgb(232 245 233) !important; }
.text-n-amber-3  { color: rgb(200 230 201) !important; }
.text-n-amber-4  { color: rgb(165 214 167) !important; }
.text-n-amber-5  { color: rgb(129 199 132) !important; }
.text-n-amber-6  { color: rgb(102 187 106) !important; }
.text-n-amber-7  { color: rgb(76 175 80) !important; }
.text-n-amber-8  { color: rgb(67 160 71) !important; }
.text-n-amber-9  { color: #388E3C !important; }
.text-n-amber-10 { color: #2E7D32 !important; }
.text-n-amber-11 { color: #236D23 !important; }
.text-n-amber-12 { color: #1B4A1B !important; }

/* --- Border amber → green --- */
.border-n-amber-1  { border-color: rgb(245 251 245) !important; }
.border-n-amber-2  { border-color: rgb(232 245 233) !important; }
.border-n-amber-3  { border-color: rgb(200 230 201) !important; }
.border-n-amber-4  { border-color: rgb(165 214 167) !important; }
.border-n-amber-5  { border-color: rgb(129 199 132) !important; }
.border-n-amber-6  { border-color: rgb(102 187 106) !important; }
.border-n-amber-7  { border-color: rgb(76 175 80) !important; }
.border-n-amber-8  { border-color: rgb(67 160 71) !important; }
.border-n-amber-9  { border-color: #388E3C !important; }
.border-n-amber-10 { border-color: #2E7D32 !important; }
.border-n-amber-11 { border-color: #236D23 !important; }
.border-n-amber-12 { border-color: #1B4A1B !important; }

/* --- Outline amber → green --- */
.outline-n-amber-9  { outline-color: #388E3C !important; }
.outline-n-amber-10 { outline-color: #2E7D32 !important; }

/* --- Hover states --- */
.hover\:enabled\:bg-n-amber-10:hover:enabled { background-color: #2E7D32 !important; }
.hover\:bg-n-amber-5:hover { background-color: rgb(129 199 132) !important; }
.hover\:bg-n-amber-4:hover { background-color: rgb(165 214 167) !important; }

/* --- Dark mode overrides --- */
.dark .bg-n-amber-2  { background-color: rgb(20 35 20) !important; }
.dark .bg-n-amber-3  { background-color: rgb(25 50 25) !important; }
.dark .bg-n-amber-6  { background-color: rgb(40 90 40) !important; }
.dark .bg-n-amber-9  { background-color: #388E3C !important; }
.dark .bg-n-amber-10 { background-color: rgb(72 165 72) !important; }
.dark .bg-n-solid-amber { background-color: rgb(20 40 20) !important; }
.dark .text-n-amber-9  { color: #4CAF50 !important; }
.dark .text-n-amber-10 { color: #66BB6A !important; }
.dark .text-n-amber-11 { color: #81C784 !important; }
.dark .text-n-amber-12 { color: rgb(180 230 180) !important; }
.dark .border-n-amber-6  { border-color: rgb(40 90 40) !important; }
.dark .border-n-amber-10 { border-color: rgb(72 165 72) !important; }

/* ===== Botao "Alterar Tema" — visível para toggle dark/light ===== */

/* ===== SolarZ Login Page Override ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
#sz-login-wrapper { font-family: 'Inter', system-ui, sans-serif; }
#sz-login-wrapper * { box-sizing: border-box; margin: 0; }
/* Dark mode login */
.dark #sz-login-wrapper { background: #17191D !important; }
.dark #sz-login-wrapper h1 { color: #FAFAFA !important; }
.dark #sz-login-wrapper p { color: #9CA3AF !important; }
.dark #sz-login-wrapper form {
  background: #1F2125 !important;
  border-color: #282A2E !important;
}
.dark #sz-login-wrapper input {
  color: #FAFAFA !important;
  border-color: #363840 !important;
  background: #1F2125 !important;
}
.dark #sz-login-wrapper input::placeholder { color: #6B7280 !important; }
.dark #sz-login-wrapper label { color: #FAFAFA !important; }
.dark #sz-login-wrapper .logo-border,
.dark #sz-login-wrapper div[style*="border:1px solid #e4e4e7"] {
  border-color: #363840 !important;
  background: #282A2E !important;
}
.dark #sz-login-wrapper span[style*="color:#71717a"] { color: #9CA3AF !important; }

/* Dark mode reply avatar */
.dark .sz-reply-avatar .sz-reply-avatar-name { color: #EDEEEF !important; }

@keyframes sz-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sz-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* =============================================================
   EMPTY STATE — Componente nativo SolarZ
   ============================================================= */

.sz-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 24px;
  max-width: 420px;
  width: 100%;
  animation: sz-empty-enter 0.5s ease;
}
@keyframes sz-empty-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Ilustração central animada --- */
.sz-empty-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sz-empty-icon-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.sz-empty-ring-outer {
  width: 120px;
  height: 120px;
  background: rgba(56, 142, 60, 0.04);
  border: 1.5px solid rgba(56, 142, 60, 0.08);
  animation: sz-ring-pulse 3s ease-in-out infinite;
}
.sz-empty-ring-inner {
  width: 88px;
  height: 88px;
  background: rgba(56, 142, 60, 0.06);
  border: 1.5px solid rgba(56, 142, 60, 0.12);
}
.sz-empty-icon-center {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #E8F5E9;
  color: #388E3C;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(56, 142, 60, 0.12);
}
@keyframes sz-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.85; }
}

/* --- Texto --- */
.sz-empty-text {
  text-align: center;
}
.sz-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: #18181B;
  margin: 0 0 6px;
  line-height: 1.3;
}
.sz-empty-subtitle {
  font-size: 13.5px;
  color: #71717A;
  margin: 0;
  line-height: 1.5;
  max-width: 300px;
}

/* --- Cards de ação --- */
.sz-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.sz-empty-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1.5px solid #E4E4E7;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.sz-empty-card:hover {
  border-color: #BBF7D0;
  box-shadow: 0 2px 12px rgba(56, 142, 60, 0.08);
}
.sz-empty-card:active {
  transform: scale(0.985);
}

/* Card icon */
.sz-empty-card-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sz-empty-card-icon-msg {
  background: #E8F5E9;
  color: #388E3C;
}
.sz-empty-card-icon-contact {
  background: #EDE9FE;
  color: #7C3AED;
}

/* Card text */
.sz-empty-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sz-empty-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #18181B;
  line-height: 1.3;
}
.sz-empty-card-desc {
  font-size: 12.5px;
  color: #A1A1AA;
  line-height: 1.4;
}

/* Card arrow */
.sz-empty-card-arrow {
  flex-shrink: 0;
  color: #D4D4D8;
  transition: color 0.15s, transform 0.15s;
}
.sz-empty-card:hover .sz-empty-card-arrow {
  color: #388E3C;
  transform: translateX(2px);
}

/* --- Dark mode --- */
.dark .sz-empty-ring-outer {
  background: rgba(76, 175, 80, 0.04);
  border-color: rgba(76, 175, 80, 0.10);
}
.dark .sz-empty-ring-inner {
  background: rgba(76, 175, 80, 0.06);
  border-color: rgba(76, 175, 80, 0.14);
}
.dark .sz-empty-icon-center {
  background: #1A3318;
  color: #4CAF50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.dark .sz-empty-title {
  color: #FAFAFA;
}
.dark .sz-empty-subtitle {
  color: #71717A;
}
.dark .sz-empty-card {
  background: #1F2125;
  border-color: #282A2E;
}
.dark .sz-empty-card:hover {
  border-color: rgba(76, 175, 80, 0.3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.dark .sz-empty-card-icon-msg {
  background: #1A3318;
  color: #4CAF50;
}
.dark .sz-empty-card-icon-contact {
  background: #1E1533;
  color: #A78BFA;
}
.dark .sz-empty-card-title {
  color: #FAFAFA;
}
.dark .sz-empty-card-desc {
  color: #6B6E75;
}
.dark .sz-empty-card-arrow {
  color: #363840;
}
.dark .sz-empty-card:hover .sz-empty-card-arrow {
  color: #4CAF50;
}

/* =============================================================
   MODAIS: Nova Mensagem + Novo Contato
   Design system: Zinc + Green, border-radius 12px, shadows
   ============================================================= */

/* --- Backdrop --- */
.sz-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sz-fade-in 0.15s ease-out;
  backdrop-filter: blur(4px);
}

/* --- Modal container --- */
.sz-modal {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.2);
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sz-modal-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sz-modal-enter {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Header redesenhado --- */
.sz-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #F4F4F5;
}
.sz-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sz-modal-header-badge {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #E8F5E9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #388E3C;
  flex-shrink: 0;
}
.sz-modal-header-badge svg { width: 18px; height: 18px; }
.sz-modal-header-badge-purple {
  background: #EDE9FE;
  color: #7C3AED;
}
.sz-modal-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sz-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #09090B;
  line-height: 1.3;
}
.sz-modal-header-hint {
  font-size: 12px;
  color: #A1A1AA;
  line-height: 1.3;
}
.sz-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #A1A1AA;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sz-modal-close svg { width: 16px; height: 16px; }
.sz-modal-close:hover {
  background: #F4F4F5;
  color: #52525B;
}

/* --- Stepper --- */
.sz-modal-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 24px;
  border-bottom: 1px solid #F4F4F5;
}
.sz-modal-step {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.sz-modal-step.active,
.sz-modal-step.done {
  opacity: 1;
}
.sz-modal-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E4E4E7;
  color: #71717A;
  transition: background 0.2s, color 0.2s;
}
.sz-modal-step.active .sz-modal-step-dot {
  background: #388E3C;
  color: #FFFFFF;
}
.sz-modal-step.done .sz-modal-step-dot {
  background: #BBF7D0;
  color: #166534;
}
.sz-modal-step-label {
  font-size: 12px;
  font-weight: 500;
  color: #71717A;
}
.sz-modal-step.active .sz-modal-step-label {
  color: #09090B;
}
.sz-modal-step.done .sz-modal-step-label {
  color: #388E3C;
}
.sz-modal-step-line {
  width: 32px;
  height: 2px;
  background: #E4E4E7;
  margin: 0 8px;
  border-radius: 1px;
  transition: background 0.2s;
}
.sz-modal-step-line.done {
  background: #86EFAC;
}

/* --- Modal body / step panels --- */
.sz-modal-body {
  padding: 16px 20px;
}
.sz-modal-step-panel {
  animation: sz-step-in 0.2s ease-out;
}
@keyframes sz-step-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --- Search wrap --- */
.sz-modal-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 42px;
  border: 1.5px solid #E4E4E7;
  border-radius: 10px;
  background: #FAFAFA;
  margin-bottom: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sz-modal-search-wrap:focus-within {
  border-color: #388E3C;
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.08);
  background: #FFFFFF;
}
.sz-modal-search-icon {
  flex-shrink: 0;
  color: #A1A1AA;
  display: flex;
  align-items: center;
}
.sz-modal-search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13.5px;
  color: #09090B;
  font-family: inherit;
  height: auto !important;
  min-height: 0 !important;
}
.sz-modal-search-input::placeholder { color: #A1A1AA; }

/* --- Results area --- */
.sz-modal-results {
  overflow-y: auto;
  max-height: 280px;
}
.sz-modal-results-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #A1A1AA;
  font-size: 13px;
  padding: 28px 16px;
  text-align: center;
}
.sz-modal-results-hint-icon {
  opacity: 0.5;
  display: flex;
}
.sz-modal-loading {
  display: flex;
  justify-content: center;
  padding: 28px 16px;
}

/* --- Contact list --- */
.sz-modal-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sz-modal-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.sz-modal-contact-item:hover {
  background: #F4F4F5;
}
.sz-modal-contact-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: #E8F5E9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sz-modal-contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sz-modal-avatar-initials {
  font-size: 13px;
  font-weight: 600;
  color: #388E3C;
  text-transform: uppercase;
}
.sz-modal-avatar-sm {
  width: 26px;
  height: 26px;
}
.sz-modal-avatar-sm .sz-modal-avatar-initials {
  font-size: 10px;
}
.sz-modal-contact-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sz-modal-contact-name {
  font-size: 13.5px;
  font-weight: 500;
  color: #09090B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sz-modal-contact-detail {
  font-size: 12px;
  color: #A1A1AA;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sz-modal-contact-pick {
  flex-shrink: 0;
  color: #D4D4D8;
  display: flex;
  transition: color 0.15s, transform 0.15s;
}
.sz-modal-contact-item:hover .sz-modal-contact-pick {
  color: #388E3C;
  transform: translateX(2px);
}

/* --- Selected bar --- */
.sz-modal-selected-bar {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  border-radius: 10px;
  margin-bottom: 14px;
}
.sz-modal-selected-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sz-modal-selected-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #166534;
}
.sz-modal-selected-detail {
  font-size: 12px;
  color: #4ADE80;
  margin-left: 4px;
}

/* --- Message context mini bar (step 3) --- */
.sz-modal-msg-context {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #FAFAFA;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #71717A;
}
.sz-modal-msg-context strong {
  color: #09090B;
  font-weight: 500;
}

/* --- Inbox selector --- */
.sz-modal-inbox-wrap {
  /* no extra padding — inside step panel */
}
.sz-modal-inbox-label {
  font-size: 12px;
  font-weight: 600;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 8px;
}
.sz-modal-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.sz-modal-inbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #E4E4E7;
  background: #FAFAFA;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: left;
  width: 100%;
}
.sz-modal-inbox-item:hover {
  background: #F4F4F5;
  border-color: #BBF7D0;
}
.sz-modal-inbox-item.active {
  border-color: #388E3C;
  background: #F0FDF4;
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.08);
}
.sz-modal-inbox-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #E8F5E9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #388E3C;
  flex-shrink: 0;
}
.sz-modal-inbox-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: #09090B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sz-modal-inbox-channel {
  font-size: 11px;
  color: #71717A;
  background: #F4F4F5;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.sz-modal-inbox-empty {
  font-size: 13px;
  color: #71717A;
  padding: 8px 0;
}

/* --- Textarea --- */
.sz-modal-textarea {
  width: 100%;
  border: 1.5px solid #E4E4E7;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-family: inherit;
  color: #09090B;
  background: #FAFAFA;
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.sz-modal-textarea:focus {
  outline: none;
  border-color: #388E3C;
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.08);
  background: #FFFFFF;
}
.sz-modal-textarea::placeholder { color: #A1A1AA; }

/* --- Form fields (Novo Contato) --- */
.sz-modal-form {
  padding: 18px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sz-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sz-modal-label {
  font-size: 13px;
  font-weight: 500;
  color: #3F3F46;
}
.sz-modal-required {
  color: #EF4444;
}
.sz-modal-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 44px;
  border: 1.5px solid #E4E4E7;
  border-radius: 10px;
  background: #FAFAFA;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sz-modal-input-wrap:focus-within {
  border-color: #388E3C;
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.10);
  background: #FFFFFF;
}
.sz-modal-input-icon {
  flex-shrink: 0;
  color: #A1A1AA;
  display: flex;
  align-items: center;
}
.sz-modal-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px;
  color: #09090B;
  font-family: inherit;
  height: auto !important;
  min-height: 0 !important;
}
.sz-modal-input::placeholder { color: #A1A1AA; }
.sz-modal-field-hint {
  font-size: 11.5px;
  color: #A1A1AA;
  padding-left: 2px;
}
.sz-modal-phone-prefix {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #388E3C;
  background: rgba(56, 142, 60, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  user-select: none;
}
.sz-input-error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
  animation: sz-shake 0.3s ease;
}
@keyframes sz-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* --- Footer --- */
.sz-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid #F4F4F5;
}
.sz-modal-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  background: #388E3C;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}
.sz-modal-btn-primary:hover:not(:disabled) {
  background: #2E7D32;
}
.sz-modal-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}
.sz-modal-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sz-btn-success {
  background: #16A34A !important;
  pointer-events: none;
}
.sz-modal-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 16px;
  background: #FFFFFF;
  color: #52525B;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.sz-modal-btn-secondary:hover {
  background: #F4F4F5;
  border-color: #D4D4D8;
}

/* =============================================================
   MODAIS — Dark Mode
   ============================================================= */
.dark .sz-modal-backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.dark .sz-modal {
  background: #1F2125;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}
.dark .sz-modal-header {
  border-bottom-color: #282A2E;
}
.dark .sz-modal-header-badge {
  background: #1A3318;
  color: #4CAF50;
}
.dark .sz-modal-header-badge-purple {
  background: #1E1533;
  color: #A78BFA;
}
.dark .sz-modal-title {
  color: #FAFAFA;
}
.dark .sz-modal-header-hint {
  color: #6B6E75;
}
.dark .sz-modal-close {
  color: #6B6E75;
}
.dark .sz-modal-close:hover {
  background: #282A2E;
  color: #FAFAFA;
}
/* Stepper dark */
.dark .sz-modal-stepper {
  border-bottom-color: #282A2E;
}
.dark .sz-modal-step-dot {
  background: #363840;
  color: #6B6E75;
}
.dark .sz-modal-step.active .sz-modal-step-dot {
  background: #388E3C;
  color: #FFFFFF;
}
.dark .sz-modal-step.done .sz-modal-step-dot {
  background: #1A3318;
  color: #4CAF50;
}
.dark .sz-modal-step-label { color: #6B6E75; }
.dark .sz-modal-step.active .sz-modal-step-label { color: #FAFAFA; }
.dark .sz-modal-step.done .sz-modal-step-label { color: #4CAF50; }
.dark .sz-modal-step-line { background: #363840; }
.dark .sz-modal-step-line.done { background: #2D5A2D; }
/* Msg context dark */
.dark .sz-modal-msg-context {
  background: #282A2E;
  color: #9EA1A7;
}
.dark .sz-modal-msg-context strong { color: #FAFAFA; }
.dark .sz-modal-search-wrap {
  background: #282A2E;
  border-color: #363840;
}
.dark .sz-modal-search-wrap:focus-within {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
  background: #1F2125;
}
.dark .sz-modal-search-icon { color: #6B6E75; }
.dark .sz-modal-search-input { color: #FAFAFA; }
.dark .sz-modal-search-input::placeholder { color: #6B6E75; }
.dark .sz-modal-results-empty { color: #6B6E75; }
.dark .sz-modal-contact-item:hover { background: #282A2E; }
.dark .sz-modal-contact-avatar { background: #1A3318; }
.dark .sz-modal-avatar-initials { color: #4CAF50; }
.dark .sz-modal-contact-name { color: #FAFAFA; }
.dark .sz-modal-contact-detail { color: #9EA1A7; }
.dark .sz-modal-selected-bar {
  background: #1A3318;
  border-color: #2D5A2D;
}
.dark .sz-modal-selected-name { color: #86EFAC; }
.dark .sz-modal-selected-detail { color: #4ADE80; }
.dark .sz-modal-contact-pick { color: #363840; }
.dark .sz-modal-contact-item:hover .sz-modal-contact-pick { color: #4CAF50; }
.dark .sz-modal-inbox-label { color: #9EA1A7; }
.dark .sz-modal-inbox-item {
  background: #282A2E;
  border-color: #363840;
}
.dark .sz-modal-inbox-item:hover {
  background: #363840;
  border-color: #52545A;
}
.dark .sz-modal-inbox-item.active {
  border-color: #4CAF50;
  background: #1A3318;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}
.dark .sz-modal-inbox-icon {
  background: #1A3318;
  color: #4CAF50;
}
.dark .sz-modal-inbox-name { color: #FAFAFA; }
.dark .sz-modal-inbox-channel {
  color: #9EA1A7;
  background: #363840;
}
.dark .sz-modal-inbox-empty { color: #6B6E75; }
.dark .sz-modal-textarea {
  background: #282A2E;
  border-color: #363840;
  color: #FAFAFA;
}
.dark .sz-modal-textarea:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
  background: #1F2125;
}
.dark .sz-modal-textarea::placeholder { color: #6B6E75; }
.dark .sz-modal-form .sz-modal-label { color: #9EA1A7; }
.dark .sz-modal-input-wrap {
  background: #282A2E;
  border-color: #363840;
}
.dark .sz-modal-input-wrap:focus-within {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
  background: #1F2125;
}
.dark .sz-modal-input-icon { color: #6B6E75; }
.dark .sz-modal-phone-prefix {
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.12);
}
.dark .sz-modal-input { color: #FAFAFA; }
.dark .sz-modal-input::placeholder { color: #6B6E75; }
.dark .sz-modal-field-hint { color: #52545A; }
.dark .sz-modal-footer { border-top-color: #282A2E; }
.dark .sz-modal-btn-primary {
  background: #388E3C;
}
.dark .sz-modal-btn-primary:hover:not(:disabled) {
  background: #43A047;
}
.dark .sz-modal-btn-secondary {
  background: #282A2E;
  border-color: #363840;
  color: #FAFAFA;
}
.dark .sz-modal-btn-secondary:hover {
  background: #363840;
}



/* ====== Hide Chatwoot update banner from end users ====== */
.banner.woot-banner.primary {
  display: none !important;
}

/* ====== Hide Chatwoot update banner from end users ====== */
.banner.woot-banner.primary {
  display: none !important;
}

/* ====== Dashboard sidebar: no submenu + direct link + active state ====== */
.sz-no-submenu > ul {
  display: none !important;
}
.sz-no-submenu .i-lucide-chevron-up {
  display: none !important;
}
[data-sz-dash-active="1"] {
  color: #388E3C !important;
  background-color: #EEF6F0 !important;
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
}
.dark [data-sz-dash-active="1"] {
  color: #4ADE80 !important;
  background-color: #1A3A1A !important;
}

/* ====== Hide Chatwoot update banner from end users ====== */
.banner.woot-banner.primary {
  display: none !important;
}



/* ====== Profile menu: fix background width ====== */
/* Remove max-width from profile section so button bg is full width */
aside[class*="w-[200px]"] > section:last-child,
aside[class*="w-[200px]"] > section:last-child * {
  max-width: none !important;
}

/* ====== Profile dropdown teleported to body ====== */
.sz-profile-dropdown {
  position: fixed !important;
  z-index: 99999 !important;
  width: 320px !important;
}
.sz-profile-dropdown .n-dropdown-body {
  width: 320px !important;
  max-width: 320px !important;
}


/* =====================================================
   SSE STATUS ANIMATIONS on Bot IA chip
   ===================================================== */
.sz-bot-thinking .sz-bot-icon { animation: sz-bot-pulse 1.5s ease-in-out infinite; }
.sz-bot-typing .sz-bot-icon   { animation: sz-bot-pulse 0.8s ease-in-out infinite; }
.sz-bot-tool .sz-bot-icon     { animation: sz-bot-spin 1s linear infinite; }
.sz-bot-error .sz-bot-icon    { background: #ef4444 !important; border-radius: 50%; }
.sz-bot-thinking, .sz-bot-typing { color: #1565C0 !important; }
.sz-bot-tool { color: #D97706 !important; }
.sz-bot-error { color: #ef4444 !important; }
.dark .sz-bot-thinking, .dark .sz-bot-typing { color: #42A5F5 !important; }
.dark .sz-bot-tool { color: #FBBF24 !important; }
.dark .sz-bot-error { color: #F87171 !important; }

@keyframes sz-bot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes sz-bot-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* =====================================================
   BOT AI TAB STYLING - Figma Mock
   Aplica APENAS quando data-sz-mode="bot" ativo
   ===================================================== */

@property --sz-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Animated gradient border */
.reply-box.sz-bot-active {
  border: 2px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--sz-angle), transparent, #388E3C, #C8E6C9, transparent) border-box !important;
  border-radius: 12px !important;
  animation: sz-border-spin 3s linear infinite !important;
}

.dark .reply-box.sz-bot-active {
  background:
    linear-gradient(#1f2937, #1f2937) padding-box,
    conic-gradient(from var(--sz-angle), transparent, #4ADE80, #1B5E20, transparent) border-box !important;
}

@keyframes sz-border-spin {
  to { --sz-angle: 360deg; }
}

/* Sliding pill - no green here, bg is on .sz-bot-chip directly */

/* Bot AI chip text + icon green */
.reply-box.sz-bot-active .sz-bot-chip {
  color: #236D23 !important;
  font-weight: 500 !important;
}

.reply-box.sz-bot-active .sz-bot-icon {
  color: #236D23 !important;
}

.dark .reply-box.sz-bot-active .sz-bot-chip {
  color: #4ADE80 !important;
}

.dark .reply-box.sz-bot-active .sz-bot-icon {
  color: #4ADE80 !important;
}

/* Typing badge - pushed to right via margin-left auto */
.sz-bot-typing-indicator {
  display: flex;
  align-items: center;
  padding: 2px 10px 2px 6px;
  gap: 4px;
  height: 24px;
  background: #EEF6F0;
  border-radius: 24px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: 10px;
}

.dark .sz-bot-typing-indicator {
  background: #2A2F4A;
}

.sz-bot-typing-indicator .sz-typing-star {
  width: 12px;
  height: 12px;
  fill: #11361A;
  animation: sz-star-spin 1.5s linear infinite;
  flex-shrink: 0;
}

.dark .sz-bot-typing-indicator .sz-typing-star {
  fill: #818CF8;
}

@keyframes sz-star-spin {
  to { transform: rotate(360deg); }
}

.sz-bot-typing-indicator .sz-typing-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: #11361A;
}

.dark .sz-bot-typing-indicator .sz-typing-text {
  color: #E3E8FF;
}

/* Typing dots animation: . > .. > ... */
.sz-typing-dots {
  display: inline-block;
  width: 1.2em;
  text-align: left;
}

.sz-typing-dots::after {
  content: '...';
  animation: sz-typing-dots 1.5s steps(1) infinite;
}

@keyframes sz-typing-dots {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
}


/* =====================================================
   TAB MENU (Responder / Msg Privada / Bot AI) - Figma
   ===================================================== */

/* Main tab container pill */
.reply-box button[data-sz-mode] {
  background: #F3F3F4 !important;
  border: none !important;
  height: 28px !important;
  padding: 2px !important;
  gap: 4px !important;
  border-radius: 24px !important;
}

.dark .reply-box button[data-sz-mode] {
  background: #2D2D30 !important;
}

/* All chip items (exclude sliding pill) */
.reply-box button[data-sz-mode] > div:not(.absolute) {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  line-height: 20px !important;
  height: 24px !important;
  border-radius: 999px !important;
  color: #000000 !important;
}

.dark .reply-box button[data-sz-mode] > div:not(.absolute) {
  color: #E5E5E5 !important;
}

/* Chip 1: Responder (avatar + name) */
.reply-box button[data-sz-mode] > div:first-child {
  padding: 2px 8px 2px 2px !important;
  font-weight: 600 !important;
  gap: 4px !important;
}

/* Avatar inside Responder chip */
.reply-box .sz-reply-avatar {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 999px !important;
}

.reply-box .sz-reply-avatar .sz-reply-avatar-initials {
  font-size: 8px !important;
}

/* Chip 2: Mensagem Privada */
.reply-box button[data-sz-mode] > div:nth-child(2) {
  padding: 2px 8px !important;
  font-weight: 400 !important;
}

/* Chip 3: Bot AI */
.reply-box .sz-bot-chip {
  padding: 2px 8px 2px 4px !important;
  font-weight: 500 !important;
  gap: 4px !important;
}

/* Sliding pill - match 24px height */
.reply-box button[data-sz-mode] > .absolute.rounded-full {
  height: 24px !important;
  top: 2px !important;
}

/* Sliding pill hidden when bot active (bg is on .sz-bot-chip) */
.reply-box.sz-bot-active button[data-sz-mode="bot"] > .absolute.rounded-full {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Bot AI chip - no bg, sliding pill handles it */
.reply-box.sz-bot-active .sz-bot-chip {
  position: relative;
  z-index: 25;
}

/* Chevron styling */
.sz-bot-chevron {
  display: inline-flex;
  align-items: center;
  color: inherit;
  flex-shrink: 0;
}



/* Bot AI chip text + chevron always green when active */
.reply-box.sz-bot-active .sz-bot-chip,
.reply-box.sz-bot-active .sz-bot-chip .sz-bot-chevron {
  color: #236D23 !important;
}

.dark .reply-box.sz-bot-active .sz-bot-chip,
.dark .reply-box.sz-bot-active .sz-bot-chip .sz-bot-chevron {
  color: #4ADE80 !important;
}

/* Bot AI chip + chevron green text when active (high specificity) */
.reply-box.sz-bot-active button[data-sz-mode] > div.sz-bot-chip {
  color: #236D23 !important;
}

.dark .reply-box.sz-bot-active button[data-sz-mode] > div.sz-bot-chip {
  color: #4ADE80 !important;
}

/* =============================================================
   FIX: Empty state — centralizar vertical + background full
   ============================================================= */

/* Quando empty state ativo: wrap preenche 100% e centraliza */
.conversation-details-wrap:has(.sz-empty-state) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Filho direto que contém o empty state: flex grow + centraliza */
.conversation-details-wrap:has(.sz-empty-state) > .flex.h-full.min-h-0,
.conversation-details-wrap:has(.sz-empty-state) > div:last-child {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Background pattern só no wrap pai — sem sobreposição */
.conversation-details-wrap:has(.sz-empty-state) {
  background-color: #FFFFFF !important;
  background-image: url('/static/img/bg-icons.png') !important;
  background-size: 1208px 1000px !important;
  background-repeat: repeat !important;
  background-position: center center !important;
}
.dark .conversation-details-wrap:has(.sz-empty-state) {
  background-color: #1F2125 !important;
  background-image: none !important;
}

/* Container do empty state: centralizar conteúdo */
.conversation-details-wrap .flex.flex-col.items-center.justify-center:has(> .sz-empty-state) {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100% !important;
  background: transparent !important;
}



/* =============================================================
   FIX: Empty state — centralizar vertical + background full
   ============================================================= */

/* Quando empty state ativo: wrap preenche 100% e centraliza */
.conversation-details-wrap:has(.sz-empty-state) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Filho direto que contém o empty state: flex grow + centraliza */
.conversation-details-wrap:has(.sz-empty-state) > .flex.h-full.min-h-0,
.conversation-details-wrap:has(.sz-empty-state) > div:last-child {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Background pattern só no wrap pai — sem sobreposição */
.conversation-details-wrap:has(.sz-empty-state) {
  background-color: #FFFFFF !important;
  background-image: url('/static/img/bg-icons.png') !important;
  background-size: 1208px 1000px !important;
  background-repeat: repeat !important;
  background-position: center center !important;
}
.dark .conversation-details-wrap:has(.sz-empty-state) {
  background-color: #1F2125 !important;
  background-image: none !important;
}

/* Container do empty state: centralizar conteúdo */
.conversation-details-wrap .flex.flex-col.items-center.justify-center:has(> .sz-empty-state) {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100% !important;
  background: transparent !important;
}



/* FIX: Card de conversa — trocar padding-top por margin-top (margin é transparente) */
/* Especificidade alta para vencer a regra geral *:not(aside):not(.sz-settings-panel) */
section.flex.w-full.h-full.min-w-0 > div.conversation-details-wrap.flex.flex-col {
  padding-top: 0 !important;
  margin-top: 90px !important;
}

/* =====================================================
   BOT IA PANEL — Replaces editor when Bot IA active
   ===================================================== */

/* Hide editor elements when bot panel is active */
.reply-box.sz-bot-active .reply-editor,
.reply-box.sz-bot-active .ProseMirror-wrapmargin,
.reply-box.sz-bot-active .reply-box__top {
  display: none !important;
}

/* Hide send button, attachments, and toolbar when bot active */
.reply-box.sz-bot-active .right-wrap,
.reply-box.sz-bot-active .reply-box__bottom > .flex:last-child,
.reply-box.sz-bot-active .reply-box--note-indicator {
  display: none !important;
}

/* Panel container */
#sz-bot-panel {
  display: flex;
  flex-direction: column;
  min-height: 80px;
  max-height: 220px;
  padding: 10px 20px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  overflow: hidden;
  user-select: text;
}

/* Status badge styles moved to bottom bar section */

.sz-log-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.dark .sz-log-entry { color: #94a3b8; }

.sz-log-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.sz-log-icon.sz-log-spin {
  animation: sz-bot-spin 1.2s linear infinite;
}

.sz-log-icon.sz-log-pulse {
  animation: sz-bot-pulse 1.2s ease-in-out infinite;
}

/* Preview area (typing animation) */
#sz-bot-preview {
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 8px;
  padding-top: 8px;
  min-height: 0;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
  max-height: 140px;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: min-height 0.2s ease;
}

#sz-bot-preview:not(:empty) {
  min-height: 32px;
}

#sz-bot-preview:empty {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.dark #sz-bot-preview {
  border-top-color: rgba(255,255,255,0.08);
  color: #e2e8f0;
}

#sz-bot-preview::-webkit-scrollbar { width: 4px; }
#sz-bot-preview::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }

/* Char-by-char fade-up entrance (shadcn style) */
.sz-char-enter {
  display: inline-block;
  animation: sz-char-fadeup 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sz-char-fadeup {
  from {
    opacity: 0;
    transform: translateY(3px);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Typing cursor */
.sz-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: #388E3C;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: sz-cursor-blink 0.6s step-end infinite;
}

.dark .sz-typing-cursor { background: #4ADE80; }

@keyframes sz-cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes sz-log-fadein {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Idle state — pill style matching typing-indicator */
.sz-bot-idle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  background: #EEF6F0;
  border-radius: 999px;
  height: auto;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  color: #11361A;
  white-space: nowrap;
}

.dark .sz-bot-idle {
  background: #2A2F4A;
  color: #E3E8FF;
}

.sz-bot-idle .sz-idle-star {
  width: 12px;
  height: 12px;
  color: #11361A;
  flex-shrink: 0;
  animation: sz-star-spin 1.5s linear infinite;
}

.dark .sz-bot-idle .sz-idle-star {
  fill: #818CF8;
}

/* --- Bot status badge in bottom bar (next to toggle) --- */
#sz-bot-status {
  display: none !important;
}
.reply-box.sz-bot-active #sz-bot-status {
  display: inline-flex !important;
  align-items: center;
  color: #388E3C;
  white-space: nowrap;
  margin: 0;
  line-height: 1;
}
.dark .reply-box.sz-bot-active #sz-bot-status {
  color: #4ADE80;
}
.reply-box.sz-bot-active #sz-bot-status .sz-idle-star {
  width: 14px;
  height: 14px;
}
.reply-box.sz-bot-active #sz-bot-status .sz-log-icon {
  width: 14px;
  height: 14px;
}

/* Hide left-wrap action buttons when bot active, keep badge visible */
.reply-box.sz-bot-active .left-wrap > *:not(#sz-bot-status) {
  display: none !important;
}

/* Badge pill style for ALL status states */
#sz-bot-status.sz-log-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  background: #EEF0F5;
  color: #374151;
}
#sz-bot-status.sz-log-entry.sz-bot-idle {
  background: #EEF6F0;
  color: #11361A;
}
#sz-bot-status.sz-log-entry.sz-log-done {
  background: #EEF6F0;
  color: #388E3C;
}
.dark #sz-bot-status.sz-log-entry {
  background: #2A2D33;
  color: #94a3b8;
}
.dark #sz-bot-status.sz-log-entry.sz-bot-idle {
  background: #1a2e1a;
  color: #6ee7b7;
}
.dark #sz-bot-status.sz-log-entry.sz-log-done {
  background: #1a2e1a;
  color: #6ee7b7;
}

/* ===== Call Bubble Card v4 ===== */

/* Grid layout: card on top, badge + timestamp side-by-side below */
.sz-call-bubble-active {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  padding: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* Answered call: green bubble background */
.sz-call-bubble-active {
  background-color: #BAD5BD !important;
}

/* Missed call: red bubble background */
.sz-call-bubble-active:has(.sz-call-missed) {
  background-color: #EABAB9 !important;
}

/* Card spans full width on row 1 */
.sz-call-bubble-active > .gap-3 {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-bottom: 0;
}

/* Badge: row 2, left */
.sz-call-bubble-active > .sz-sender-badge {
  grid-row: 2;
  grid-column: 1;
  margin: 4px 0 6px 12px;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  padding: 3px 8px 3px 4px;
  gap: 5px;
  align-self: center;
  width: fit-content;
  justify-self: start;
}

.sz-call-bubble-active > .sz-sender-badge .sz-sender-avatar,
.sz-call-bubble-active > .sz-sender-badge .sz-sender-initials {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  font-size: 7px;
}

.sz-call-bubble-active > .sz-sender-badge > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
  display: inline-block;
  vertical-align: middle;
}

/* Timestamp: row 2, right */
.sz-call-bubble-active > [class*="text-xs"] {
  grid-row: 2;
  grid-column: 2;
  margin: 4px 12px 6px 0;
  padding: 0;
  font-size: 11px;
  align-self: center;
}

/* Hide the original prose text */
.sz-call-bubble-active .prose-bubble[style*="display: none"],
.sz-call-bubble-active .prose-bubble[style*="display:none"],
.sz-call-bubble-active .prose[style*="display: none"],
.sz-call-bubble-active .prose[style*="display:none"] {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The card layout */
.sz-call-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 8px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  min-width: 300px;
}

/* Phone icon in circle */
.sz-call-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(35, 109, 35, 0.15);
  color: #236D23;
}

/* Red icon for missed calls */
.sz-call-missed .sz-call-card-icon {
  background: rgba(211, 47, 47, 0.12);
  color: #D32F2F;
}

/* Body: title + status row */
.sz-call-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sz-call-card-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: #1a1a1a;
}

.sz-call-card-status {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.sz-call-status-label {
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
}

.sz-call-answered-text {
  color: #236D23;
}

.sz-call-missed-text {
  color: #D32F2F;
}

.sz-call-duration-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #4a6741;
  margin-left: auto;
}

/* === Dark mode === */
.dark .sz-call-card-icon {
  background: rgba(102, 187, 106, 0.2);
  color: #66BB6A;
}

.dark .sz-call-card-title {
  color: #e5e7eb;
}

.dark .sz-call-answered-text {
  color: #66BB6A;
}

.dark .sz-call-missed-text {
  color: #EF9A9A;
}

.dark .sz-call-missed .sz-call-card-icon {
  background: rgba(239, 154, 154, 0.2);
  color: #EF9A9A;
}

.dark .sz-call-duration-text {
  color: #A5D6A7;
}

/* --- SZ: Chamadas sidebar active state + iframe --- */
[data-sz-chamadas-active="1"] {
  color: #388E3C !important;
  background-color: #EEF6F0 !important;
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
}
.dark [data-sz-chamadas-active="1"] {
  color: #4ADE80 !important;
  background-color: #1A3A1A !important;
}
.sz-chamadas-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* --- SZ: Chamadas sidebar link color --- */
.sz-chamadas-link,
.sz-chamadas-link .truncate {
  color: #000000 !important;
}
.sz-chamadas-link .sz-icon-done {
  color: var(--n-slate-11, #71717a) !important;
}
.sz-chamadas-link .sz-icon-done svg {
  stroke: currentColor !important;
}
[data-sz-chamadas-active=1].sz-chamadas-link {
  color: #388E3C !important;
}
[data-sz-chamadas-active=1].sz-chamadas-link .sz-icon-done {
  color: #388E3C !important;
}
.dark [data-sz-chamadas-active=1].sz-chamadas-link {
  color: #4ADE80 !important;
}
.dark [data-sz-chamadas-active=1].sz-chamadas-link .sz-icon-done {
  color: #4ADE80 !important;
}

/* Fix Chamadas text weight to match other sidebar items */
.sz-chamadas-link {
  font-weight: 400 !important;
}
[data-sz-chamadas-active=1].sz-chamadas-link {
  font-weight: 400 !important;
}

/* Fix 24h banner area: grandparent should inherit chat panel background */
.conversation-details-wrap .flex.h-full.min-h-0.m-0 {
  background-color: transparent !important;
}

/* ===== Hide sidebar + native search bar inside search iframe ===== */
.sz-search-iframe-mode aside,
.sz-search-iframe-mode aside[class*="w-[200px]"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  flex-basis: 0 !important;
  overflow: hidden !important;
}
.sz-search-iframe-mode div.rounded-xl:has(input[type="search"]) {
  display: none !important;
}
.sz-search-iframe-mode .sz-fixed-header {
  display: none !important;
}
.sz-search-iframe-mode section.flex.w-full.h-full.min-w-0 > *:not(aside) {
  padding-top: 0 !important;
}