:root {
  --transition-theme: 180ms ease;
}

/* MODO ESCURO */

html[data-theme="dark"] {
  --app-background:#080d17;--sidebar-background:#0b1220;--header-background:rgba(8,13,23,.92);
  --surface-background:#101827;--surface-secondary:#141f31;--field-background:#111b2b;
  --border-primary:#223149;--border-secondary:#19263a;
  --text-primary:#f5f8ff;--text-secondary:#c7d0df;--text-muted:#8390a5;--text-soft:#5f6c81;
  --brand-primary:#2382ff;--brand-primary-2:#54a0ff;--brand-soft:#102a4f;
  --shadow-card:0 18px 45px rgba(0,0,0,.28);
}

/* MODO CLARO */

html[data-theme="light"] {
  --app-background:#f6f8fc;--sidebar-background:#ffffff;--header-background:rgba(255,255,255,.92);
  --surface-background:#ffffff;--surface-secondary:#f1f5fa;--field-background:#ffffff;
  --border-primary:#dce5f0;--border-secondary:#e8eef6;
  --text-primary:#111827;--text-secondary:#465166;--text-muted:#7b8799;--text-soft:#a6b0bf;
  --brand-primary:#1677ff;--brand-primary-2:#3b8cff;--brand-soft:#eaf3ff;
  --shadow-card:0 12px 34px rgba(18,41,74,.08);
}

/*
 * PORTAL — MODO CLARO MAIS HARMÔNICO
 *
 * O admin mantém a paleta clara atual.
 * Apenas o portal recebe o fundo mais quente e suave.
 */
html[data-theme="light"] body[data-theme-scope="portal"] {
  --app-background: #f4f2ef;
  --sidebar-background: #fbfaf8;
  --header-background: rgba(251, 250, 248, 0.94);
  --surface-background: #fffdfa;
  --surface-secondary: #f1f5fa;
  --field-background: #fffdfa;

  --border-primary: #dce5f0;
  --border-secondary: #ece7e1;

  --text-primary: #111827;
  --text-secondary: #465166;
  --text-muted: #7b8799;
  --text-soft: #a6b0bf;

  --shadow-card: 0 10px 28px rgba(68, 56, 46, 0.065);
}

/* ESTRUTURA PRINCIPAL */

html,
body {
  background: var(--app-background);
  color: var(--text-primary);
}

body,
.surface,
.field-card,
input,
textarea,
select,
button,
aside,
header,
main {
  transition:
    background-color var(--transition-theme),
    border-color var(--transition-theme),
    color var(--transition-theme),
    box-shadow var(--transition-theme);
}

.surface {
  background: var(--surface-background) !important;
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-card);
}

.field-card {
  background: var(--surface-secondary) !important;
  border-color: var(--border-primary) !important;
}

/* CAMPOS */

input,
textarea,
select {
  background: var(--field-background) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-soft) !important;
}

/* SIDEBAR E CABEÇALHO */

[data-theme-sidebar] {
  background: var(--sidebar-background) !important;
  border-color: var(--border-primary) !important;
}

[data-theme-header] {
  background: var(--header-background) !important;
  border-color: var(--border-secondary) !important;
  backdrop-filter: blur(18px);
}

/* BOTÃO DO TEMA */

.theme-toggle {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: rgba(22, 119, 255, 0.55);
  color: #1677ff;
}

/* COMPATIBILIDADE COM AS CLASSES ESCURAS JÁ EXISTENTES */

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-zinc-200 {
  color: var(--text-primary) !important;
}

html[data-theme="light"] .text-zinc-300,
html[data-theme="light"] .text-zinc-400 {
  color: var(--text-secondary) !important;
}

html[data-theme="light"] .text-zinc-500,
html[data-theme="light"] .text-zinc-600 {
  color: var(--text-muted) !important;
}

html[data-theme="light"] .border-zinc-700,
html[data-theme="light"] .border-zinc-800,
html[data-theme="light"] .border-white\/5 {
  border-color: var(--border-primary) !important;
}

html[data-theme="light"] .bg-zinc-900,
html[data-theme="light"] .bg-zinc-950 {
  background-color: var(--surface-secondary) !important;
}

html[data-theme="light"] .bg-black\/20,
html[data-theme="light"] .bg-black\/25,
html[data-theme="light"] .bg-black\/30,
html[data-theme="light"] .bg-black\/40,
html[data-theme="light"] .bg-black\/50 {
  background-color: var(--surface-secondary) !important;
}

/* MODAL */

html[data-theme="light"] #modalRoot > div {
  background-color: rgba(24, 24, 27, 0.28) !important;
}

/* SCROLLBAR */

html[data-theme="light"] {
  scrollbar-color: #c7c7cc #f5f5f6;
}

html[data-theme="dark"] {
  scrollbar-color: #3f3f46 #09090b;
}

/* =====================================================
   MENSAGENS DO PORTAL
   ===================================================== */

/* MODO ESCURO */

html[data-theme="dark"] .bubble-in {
  background: #27272a !important;
  color: #fafafa !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .bubble-out {
  background: #1677ff !important;
  color: #ffffff !important;
  border: 1px solid rgba(22, 119, 255, 0.35) !important;
}

/* MODO CLARO */

html[data-theme="light"] .bubble-in {
  background: #f1f5fa !important;
  color: #111827 !important;
  border: 1px solid #dce5f0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .bubble-out {
  background: #eaf3ff !important;
  color: #184f96 !important;
  border: 1px solid #bcd8ff !important;
  box-shadow: none !important;
}

/* Nome de quem enviou a mensagem */

html[data-theme="light"] .bubble-in b,
html[data-theme="light"] .bubble-in strong {
  color: #465166 !important;
}

html[data-theme="light"] .bubble-out b,
html[data-theme="light"] .bubble-out strong {
  color: #174c90 !important;
}

/* Texto principal */

html[data-theme="light"] .bubble-in p,
html[data-theme="light"] .bubble-in div {
  color: #111827;
}

html[data-theme="light"] .bubble-out p,
html[data-theme="light"] .bubble-out div {
  color: #184f96;
}

/* Data e horário das mensagens */

html[data-theme="light"] .bubble-in small,
html[data-theme="light"] .bubble-in time {
  color: #7b8799 !important;
}

html[data-theme="light"] .bubble-out small,
html[data-theme="light"] .bubble-out time {
  color: #4b7fbe !important;
}

/* Compatibilidade com classes Tailwind inseridas pelo portal.js */

html[data-theme="light"] .bubble-in .text-zinc-400,
html[data-theme="light"] .bubble-in .text-zinc-500,
html[data-theme="light"] .bubble-in .text-zinc-600 {
  color: #7b8799 !important;
}

html[data-theme="light"] .bubble-out .text-zinc-400,
html[data-theme="light"] .bubble-out .text-zinc-500,
html[data-theme="light"] .bubble-out .text-zinc-600 {
  color: #4b7fbe !important;
}

/* =====================================================
   PORTAL — CONVERSAS RECOLHÍVEIS
   ===================================================== */

.portal-conversation-card {
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-card);
}

.portal-conversation-toggle {
  color: var(--text-primary);
  background: transparent;
}

.portal-conversation-toggle:hover {
  background: var(--surface-secondary) !important;
}

.portal-conversation-preview,
.portal-last-activity {
  color: var(--text-muted);
}

.portal-message-count {
  color: var(--text-secondary);
}

.portal-contact-avatar,
.portal-chevron {
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}

.portal-chevron {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.portal-conversation-card.is-open .portal-chevron {
  transform: rotate(180deg);
  background: rgba(22, 119, 255, 0.1);
  color: #1677ff;
  border-color: rgba(22, 119, 255, 0.24);
}

.portal-conversation-card.is-open {
  border-color: rgba(22, 119, 255, 0.22) !important;
}

.portal-conversation-body {
  border-top: 1px solid var(--border-secondary);
  background: var(--surface-background);
}

.portal-message-area {
  background: var(--surface-secondary);
}

.portal-see-all,
.portal-conversation-actions {
  border-color: var(--border-secondary) !important;
}

html[data-theme="light"] body[data-theme-scope="portal"] .portal-conversation-card {
  box-shadow: 0 8px 24px rgba(68, 56, 46, 0.055);
}

html[data-theme="light"] body[data-theme-scope="portal"] .portal-conversation-toggle:hover {
  background: #f6f9fd !important;
}

html[data-theme="light"] body[data-theme-scope="portal"] .portal-message-area {
  background: #f7f9fc;
}

html[data-theme="light"] body[data-theme-scope="portal"] .portal-contact-avatar {
  background: #edf3fa;
  color: #53627a;
}

html[data-theme="light"] body[data-theme-scope="portal"] .portal-chevron {
  background: #f1f5fa;
}

/* =====================================================
   DASHBOARD ADMIN — CLIENTES / CONVERSAS
   ===================================================== */

.dashboard-client-card {
  border-color: var(--border-primary) !important;
}

.dashboard-client-toggle {
  color: var(--text-primary);
}

.dashboard-client-toggle:hover,
.dashboard-conversation-row:hover {
  background: var(--surface-secondary) !important;
}

.dashboard-chevron {
  transition: transform 180ms ease;
}

.dashboard-conversation-row {
  color: var(--text-primary);
  border-color: var(--border-secondary) !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.dashboard-modal-meta {
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
}

html[data-theme="light"] .dashboard-client-toggle:hover,
html[data-theme="light"] .dashboard-conversation-row:hover {
  background: #f6f6f7 !important;
}

html[data-theme="dark"] .dashboard-client-toggle:hover,
html[data-theme="dark"] .dashboard-conversation-row:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}


/* =====================================================
   PORTAL — COMENTÁRIOS RESPONDIDOS
   ===================================================== */

.portal-comment-card {
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-card);
}

.portal-comment-toggle {
  color: var(--text-primary);
  background: transparent;
}

.portal-comment-toggle:hover {
  background: var(--surface-secondary) !important;
}

.portal-comment-body {
  border-top: 1px solid var(--border-secondary);
  background: var(--surface-background);
}

.portal-comment-received {
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
}

.portal-comment-card.is-open {
  border-color: rgba(22, 119, 255, 0.22) !important;
}

html[data-theme="light"] body[data-theme-scope="portal"] .portal-comment-card {
  box-shadow: 0 8px 24px rgba(68, 56, 46, 0.055);
}

html[data-theme="light"] body[data-theme-scope="portal"] .portal-comment-toggle:hover {
  background: #f6f9fd !important;
}

html[data-theme="light"] body[data-theme-scope="portal"] .portal-comment-received {
  background: #f7f9fc;
  border-color: #dce5f0;
}

/* A foto do perfil fica circular e não perde o fallback se a imagem falhar. */
.portal-contact-avatar img {
  border-radius: inherit;
}