body.inbox-react-page .content {
    padding: 0 !important;
  }

  /* Botões do Inbox React na cor de marca do white label (variante padrão do
     components/ui/button.jsx). O bg vem da utility bg-[var(--primary-color)];
     aqui ficam só hover e anel de foco, para não sobrepor bg-* passados via className. */
  body.inbox-react-page .ir-btn-brand:not(:disabled):hover {
    filter: brightness(0.92);
  }
  body.inbox-react-page .ir-btn:focus-visible {
    --tw-ring-color: var(--primary-color);
    --tw-ring-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
  }

  body.inbox-react-page.inbox-modal .content {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  body.inbox-react-page.inbox-modal #inbox-react-root {
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
  }

  /* 25/09/2026: com a barra superior fixa o Inbox encosta nos 4 cantos — sem cantos arredondados nem sombra. */
  @media (min-width: 1025px) {
    body.inbox-react-page #inbox-react-root {
      border-radius: 0;
      border-left-width: 0;
      border-right-width: 0;
      border-bottom-width: 0;
      box-shadow: none;
    }
  }

  body.inbox-react-page .inbox-right-sidebar {
    position: relative;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-details-panel-html,
  body.inbox-react-page .inbox-right-sidebar .inbox-contact-info {
    height: 100%;
    min-height: 0;
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-right-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 12;
    background: rgba(248, 250, 252, 0.96);
    backdrop-filter: blur(8px);
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-right-sidebar-body {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.65) 0%, rgba(241, 245, 249, 0.95) 100%);
  }

  /* .inbox-contact-tabs removido — agora usamos .inbox-contact-accordion */

  body.inbox-react-page .inbox-right-sidebar .contact-info-tab {
    width: 100%;
    border: 1px solid #d8e2ef;
    color: #334155;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  body.inbox-react-page .inbox-right-sidebar .contact-info-tab:hover {
    color: #0f172a;
    background: #f8fafc;
    border-color: #c7d6e7;
    box-shadow: 0 8px 22px -18px rgba(15, 23, 42, 0.45);
  }

  body.inbox-react-page .inbox-right-sidebar .contact-info-tab.active {
    color: #0f172a;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #b8cee6;
    box-shadow: 0 10px 24px -20px rgba(37, 99, 235, 0.6);
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .contact-info-tab {
    border-color: #3f3f46;
    color: #d4d4d8;
    background: #18181b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .contact-info-tab:hover {
    color: #fafafa;
    background: #1f1f23;
    border-color: #52525b;
    box-shadow: 0 8px 22px -18px rgba(0, 0, 0, 0.75);
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .contact-info-tab.active {
    color: #fafafa;
    background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
    border-color: #71717a;
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.65);
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-main {
    min-width: 0;
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-icon {
    color: #64748b;
    flex-shrink: 0;
  }

  body.inbox-react-page .inbox-right-sidebar .contact-info-tab:hover .inbox-contact-tab-icon,
  body.inbox-react-page .inbox-right-sidebar .contact-info-tab.active .inbox-contact-tab-icon {
    color: #475569;
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-icon {
    color: #a1a1aa;
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .contact-info-tab:hover .inbox-contact-tab-icon,
  html.dark body.inbox-react-page .inbox-right-sidebar .contact-info-tab.active .inbox-contact-tab-icon {
    color: #e4e4e7;
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-label {
    font-size: 0.98rem;
    line-height: 1.2rem;
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-meta {
    color: #94a3b8;
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    border: 1px solid #bbf7d0;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-chevron {
    transition: transform 0.18s ease, color 0.18s ease;
  }

  body.inbox-react-page .inbox-right-sidebar .contact-info-tab.active .inbox-contact-tab-chevron {
    color: #475569;
    transform: rotate(180deg);
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-meta {
    color: #71717a;
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-contact-tab-badge {
    border-color: #166534;
    background: #14532d;
    color: #bbf7d0;
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .contact-info-tab.active .inbox-contact-tab-chevron {
    color: #e4e4e7;
  }

  /* .inbox-contact-panels removido — conteúdo agora é inline no accordion */

  /* Garantir que tab-content.hidden fica invisível mesmo sem Tailwind JIT */
  body.inbox-react-page .inbox-right-sidebar .tab-content.hidden {
    display: none !important;
  }

  body.inbox-react-page .inbox-right-sidebar .tab-content {
    animation: inboxTabFadeIn 0.16s ease-out;
    padding: 0.25rem 0;
  }

  @keyframes inboxTabFadeIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  html.dark body.inbox-react-page .inbox-right-sidebar {
    background: linear-gradient(180deg, #0f0f10 0%, #171717 100%);
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-right-sidebar-header {
    background: rgba(24, 24, 27, 0.93);
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-right-sidebar-body {
    background: linear-gradient(180deg, rgba(39, 39, 42, 0.55) 0%, rgba(9, 9, 11, 0.92) 100%);
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-contact-card,
  body.inbox-react-page .inbox-right-sidebar .inbox-proposal-card,
  body.inbox-react-page .inbox-right-sidebar .inbox-proposal-empty,
  body.inbox-react-page .inbox-right-sidebar .inbox-media-url-item {
    border-color: #dbe4ef;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 18px -16px rgba(15, 23, 42, 0.25);
  }

  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-contact-card,
  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-proposal-card,
  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-proposal-empty,
  html.dark body.inbox-react-page .inbox-right-sidebar .inbox-media-url-item {
    border-color: #3f3f46;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-proposal-create-btn {
    box-shadow: 0 10px 20px -16px rgba(0, 0, 0, 0.55);
  }

  body.inbox-react-page .inbox-right-sidebar .inbox-proposal-create-btn:hover {
    box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.72);
  }

  body.inbox-react-page.proposal-modal-open {
    overflow: hidden;
  }

  /* Modo escuro: troca o fundo bege do WhatsApp pelo fundo escuro na conversa.
     Mira no elemento da área de mensagens pelo style inline (background-image inbox-whatsapp-bg)
     e sobrescreve cor + imagem só no dark — sem precisar rebuildar o bundle React. */
  html.dark body.inbox-react-page [style*="inbox-whatsapp-bg"] {
    background-color: #181818 !important;
    background-image: none !important;
  }