/* =========================================================
   Chatwoot Federal Prec - CSS Override
   Paleta Liquid Ledger: dark slate + accent turquesa
   Aplicado via DASHBOARD_SCRIPTS injeta <link>
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root,
:root.dark,
[data-color-scheme="dark"] {
  /* Paleta Federal Prec */
  --fp-bg:        #2D3436;
  --fp-bg-deep:   #1F2426;
  --fp-cell:      #353C3F;
  --fp-cell-edge: rgba(61,203,168,0.18);
  --fp-teal:      #3DCBA8;
  --fp-teal-dim:  rgba(61,203,168,0.45);
  --fp-teal-glow: rgba(61,203,168,0.18);
  --fp-white:     #F2F2F2;
  --fp-white-dim: rgba(242,242,242,0.55);
  --fp-white-far: rgba(242,242,242,0.28);
  --fp-whatsapp:  #25D366;
  --fp-danger:    #E26A5C;

  /* Override variaveis CSS do Chatwoot (tailwind tokens v4) */
  --color-woot-50:  #c2f5e5;
  --color-woot-100: #a3eed7;
  --color-woot-200: #84e6c8;
  --color-woot-300: #65deb9;
  --color-woot-400: #3DCBA8;
  --color-woot-500: #3DCBA8;
  --color-woot-600: #2fb695;
  --color-woot-700: #289d80;
  --color-woot-800: #21846b;
  --color-woot-900: #1a6b57;
  --color-primary: #3DCBA8;

  /* Slate dark tokens viram nossa paleta */
  --color-slate-50:  #F2F2F2;
  --color-slate-100: #E5E5E5;
  --color-slate-200: #cccccc;
  --color-slate-300: #999999;
  --color-slate-400: #666666;
  --color-slate-500: #555555;
  --color-slate-600: #353C3F;
  --color-slate-700: #2D3436;
  --color-slate-800: #1F2426;
  --color-slate-900: #14171a;

  --color-bg-base: var(--fp-bg);
  --color-bg-soft: var(--fp-bg-deep);
  --color-bg-deep: var(--fp-bg-deep);
}

/* Force dark on body */
html, body {
  background: var(--fp-bg) !important;
  color: var(--fp-white) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Grain sutil global */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay; z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.12 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* App root */
#app, .app-wrapper, .main, .columns {
  background: var(--fp-bg) !important;
  color: var(--fp-white) !important;
}

/* Sidebar primary (nav rail icones esquerda) */
.app-sidebar, aside.sidebar, .primary--sidebar,
nav[class*="sidebar"], div[class*="primary-sidebar"] {
  background: var(--fp-bg-deep) !important;
  border-right: 1px solid var(--fp-cell-edge) !important;
}

.app-sidebar a, aside.sidebar a, .primary--sidebar a {
  color: var(--fp-white-dim) !important;
}
.app-sidebar a.active, .app-sidebar a:hover,
aside.sidebar a.active, aside.sidebar a:hover {
  color: var(--fp-teal) !important;
  background: var(--fp-cell) !important;
}

/* Secondary sidebar (conversation list) */
.secondary-sidebar, .conversation-list--root,
[class*="secondary-sidebar"], [class*="conversation-list"] {
  background: var(--fp-bg) !important;
  border-right: 1px solid var(--fp-cell-edge) !important;
}

/* Logos no header / sidebar */
.logo, .nav-logo, [class*="logo-wrapper"] img {
  filter: none !important;
}

/* Headers gerais */
.header, .conv-header, .ui-header, [class*="header-wrap"],
[class*="page-header"], [class*="dashboard-header"] {
  background: var(--fp-bg-deep) !important;
  border-bottom: 1px solid var(--fp-cell-edge) !important;
  color: var(--fp-white) !important;
}

/* Tipografia headings — Inter limpo, sem letter-spacing exagerado */
h1, h2, h3, h4, .title, .page-title, [class*="heading"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--fp-white) !important;
}

/* Nomes de contato/conversa — peso medio, legivel */
.conversation--name, .contact-name, [class*="contact-name"],
[class*="conversation-name"], [class*="user-name"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Labels e small text em monospace SO em badges/tags tecnicos */
.tag, [class*="status-badge"], [class*="badge--tag"] {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 1.2px !important;
}
.label, .form-label, label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* Cards / containers */
.card, .conversation--card, .row,
[class*="card"], [class*="panel-body"], [class*="panel-content"] {
  background: var(--fp-cell) !important;
  border-color: var(--fp-cell-edge) !important;
  color: var(--fp-white) !important;
}

/* Conversation list items */
.conversation--list .conversation,
li.conversation,
[class*="conversation-card"] {
  background: transparent !important;
  border-bottom: 1px solid var(--fp-cell-edge) !important;
  color: var(--fp-white) !important;
}
.conversation--list .conversation:hover,
[class*="conversation-card"]:hover {
  background: var(--fp-cell) !important;
}
.conversation--list .conversation.active,
.conversation--list .conversation.compact.active,
[class*="conversation-card"][class*="active"] {
  background: var(--fp-cell) !important;
  border-left: 3px solid var(--fp-teal) !important;
}

/* Buttons primarios */
button.button.primary, button.button--primary,
.button.button--primary, .btn-primary,
[class*="button"][class*="primary"],
[class*="--primary"] button {
  background: var(--fp-teal) !important;
  color: var(--fp-bg-deep) !important;
  border-color: var(--fp-teal) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
}
button.button.primary:hover, .button.button--primary:hover, .btn-primary:hover {
  background: var(--fp-teal) !important;
  opacity: 0.85 !important;
}

/* Buttons secundarios / clear */
button.button.clear, .button.clear, button.button.hollow,
button.secondary, .btn-secondary, .btn-default {
  background: transparent !important;
  color: var(--fp-white-dim) !important;
  border: 1px solid var(--fp-cell-edge) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 1.5px !important;
  border-radius: 2px !important;
}
button.button.clear:hover, .button.clear:hover {
  color: var(--fp-teal) !important;
  border-color: var(--fp-teal-dim) !important;
}

/* Inputs */
input, textarea, select, .multiselect__tags,
.input--container input, [class*="input-wrap"] input {
  background: var(--fp-bg-deep) !important;
  color: var(--fp-white) !important;
  border: 1px solid var(--fp-cell-edge) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--fp-teal) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--fp-white-far) !important; }

/* Messages thread (centro) */
.conversation-main, .conv-main, .conversation-panel-wrap,
[class*="conv-container"], [class*="conversation-view"] {
  background: var(--fp-bg) !important;
  color: var(--fp-white) !important;
}

/* Message bubbles */
.bubble.message, .message-bubble,
[class*="message-text"], [class*="bubble"] {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Incoming (cliente) - cinza */
.message--incoming .bubble, .bubble.incoming,
[class*="message--incoming"] {
  background: var(--fp-cell) !important;
  color: var(--fp-white) !important;
  border-radius: 8px 8px 8px 2px !important;
}

/* Outgoing (agente/bot) - turquesa */
.message--outgoing .bubble, .bubble.outgoing,
[class*="message--outgoing"] {
  background: rgba(61, 203, 168, 0.16) !important;
  color: var(--fp-white) !important;
  border: 1px solid var(--fp-teal-dim) !important;
  border-radius: 8px 8px 2px 8px !important;
}

/* Private notes */
.message--activity, .bubble.activity, .private-note,
[class*="message--private"], [class*="activity"] {
  background: rgba(226, 106, 92, 0.08) !important;
  border: 1px dashed var(--fp-danger) !important;
  color: var(--fp-white-dim) !important;
}

/* Contact panel direito */
.contact-panel, .conversation-sidebar,
[class*="contact--panel"], [class*="conversation-sidebar"] {
  background: var(--fp-bg-deep) !important;
  border-left: 1px solid var(--fp-cell-edge) !important;
  color: var(--fp-white) !important;
}

/* Tags / chips */
.tag, .label--tag, [class*="tag-item"], [class*="label-item"] {
  background: transparent !important;
  border: 1px solid var(--fp-teal-dim) !important;
  color: var(--fp-teal) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  border-radius: 2px !important;
  padding: 4px 8px !important;
}

/* Status dots / indicators */
.online-indicator, .indicator-online,
[class*="status-indicator"][class*="online"] {
  background: var(--fp-whatsapp) !important;
  box-shadow: 0 0 10px var(--fp-whatsapp) !important;
}

/* Reply box / message input */
.reply-box, .message-input,
[class*="reply-box"], [class*="message-input-wrap"] {
  background: var(--fp-bg-deep) !important;
  border-top: 1px solid var(--fp-cell-edge) !important;
}
.reply-box textarea, .message-input textarea {
  background: var(--fp-cell) !important;
  color: var(--fp-white) !important;
  border: 1px solid var(--fp-cell-edge) !important;
}

/* Modals / dialogs */
.modal, .modal-dialog, [class*="modal-content"], [class*="dialog"] {
  background: var(--fp-cell) !important;
  border: 1px solid var(--fp-cell-edge) !important;
  color: var(--fp-white) !important;
}
.modal-header, [class*="modal-header"] {
  background: var(--fp-bg-deep) !important;
  border-bottom: 1px solid var(--fp-cell-edge) !important;
}

/* Toasts / notifications */
.ui-notif, .ui-notif--success, .notifications,
[class*="toast"], [class*="notification"] {
  background: var(--fp-bg-deep) !important;
  border: 1px solid var(--fp-teal) !important;
  color: var(--fp-white) !important;
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 2px !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: var(--fp-bg-deep) !important; }
::-webkit-scrollbar-thumb {
  background: var(--fp-cell) !important;
  border: 2px solid var(--fp-bg-deep) !important;
  border-radius: 5px !important;
}
::-webkit-scrollbar-thumb:hover { background: var(--fp-teal-dim) !important; }

/* Links */
a, .link, [class*="link-item"] { color: var(--fp-teal) !important; }
a:hover { opacity: 0.85 !important; }

/* Badges de count */
.badge, .conversation-badge, [class*="unread-count"] {
  background: var(--fp-teal) !important;
  color: var(--fp-bg-deep) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Login page */
.login.page, .signup.page, .login-card, [class*="login-form"] {
  background: var(--fp-bg) !important;
}
.login.page .column, .signup.page .column {
  background: var(--fp-cell) !important;
  border: 1px solid var(--fp-cell-edge) !important;
  border-radius: 2px !important;
}

/* Loading / spinners — manter cor turquesa */
.spinner, .spinner-circular,
[class*="spinner"] { border-top-color: var(--fp-teal) !important; }

/* Override paddings/borders genericos em utility classes */
.bg-white, .bg-slate-25, .bg-slate-50, .bg-slate-100,
[class*="bg-white"], [class*="bg-slate-"] {
  background: var(--fp-cell) !important;
}
.bg-slate-200, .bg-slate-300, .bg-slate-700, .bg-slate-800, .bg-slate-900 {
  background: var(--fp-bg-deep) !important;
}
.text-slate-700, .text-slate-800, .text-slate-900,
.text-black, [class*="text-black"] {
  color: var(--fp-white) !important;
}
.text-slate-500, .text-slate-600 {
  color: var(--fp-white-dim) !important;
}
.text-slate-300, .text-slate-400 {
  color: var(--fp-white-far) !important;
}
.border-slate-50, .border-slate-100, .border-slate-200,
.border-slate-300, .border-slate-400 {
  border-color: var(--fp-cell-edge) !important;
}

/* Empty states / placeholders */
.empty-state, [class*="empty-state"] {
  color: var(--fp-white-dim) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 1.5px !important;
}