/* ============================================================
   EDITORIAL TROPICAL v2 — overrides on Chatwoot real RGB vars
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..125,200..800&family=JetBrains+Mono:wght@300;400;600&display=swap");

/* ------------------------------------------------------------
   Loud diagnostic: 6px terracotta strip at top + small mark
   If you see this, the CSS IS loading.
   ------------------------------------------------------------ */
html::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #c9421a 0 33%, #c79422 33% 66%, #0f3d2e 66% 100%) !important;
  z-index: 99999; pointer-events: none;
}
html::after {
  content: "EDIÇÃO · EFICAZ CONSULT · " attr(data-edition);
  position: fixed; bottom: 6px; right: 10px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 100;
  font-size: 11px;
  color: #4a3f30;
  z-index: 99999; pointer-events: none;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------
   Override Chatwoot's RGB color tokens
   Format is "R G B" without commas — used as rgb(var(--name))
   ------------------------------------------------------------ */
:root,
html,
html[data-theme="light"],
html[data-color-scheme="light"],
.light,
[data-theme="light"] {
  /* paper background scale (slate / b / n / off-white) */
  --background-color: 241 234 217 !important;

  /* "b" neutral scale (used everywhere as bg/border) */
  --b-50:  248 243 229 !important;
  --b-100: 241 234 217 !important;
  --b-200: 230 220 195 !important;
  --b-300: 200 187 156 !important;
  --b-400: 138 125 104 !important;
  --b-500: 74 63 48 !important;
  --b-600: 60 50 38 !important;
  --b-700: 45 38 27 !important;
  --b-800: 32 27 18 !important;
  --b-900: 26 22 15 !important;

  /* "n" neutral scale, same path */
  --n-50:  248 243 229 !important;
  --n-100: 241 234 217 !important;
  --n-200: 230 220 195 !important;
  --n-300: 200 187 156 !important;
  --n-400: 138 125 104 !important;
  --n-500: 74 63 48 !important;
  --n-600: 60 50 38 !important;
  --n-700: 45 38 27 !important;
  --n-800: 32 27 18 !important;
  --n-900: 26 22 15 !important;

  /* "w" — Chatwoot brand (woot teal) → terracota */
  --w-50:  255 244 238 !important;
  --w-100: 255 234 222 !important;
  --w-200: 249 216 200 !important;
  --w-300: 241 173 141 !important;
  --w-400: 226 130 90  !important;
  --w-500: 201  66  26 !important;
  --w-600: 163  51  18 !important;
  --w-700: 122  37   9 !important;
  --w-800:  86  24   4 !important;
  --w-900:  46  12   0 !important;

  /* blues used for links and accents → muted forest */
  --blue-9: 15  61  46 !important;
  --blue-10: 29 107  81 !important;
  --blue-11: 29 107  81 !important;

  /* rose / red (alerts) keep readable on cream */
  --color-woot: #c9421a !important;

  /* border tokens */
  --border-strong: 26 22 15 !important;
  --border-weak:  200 187 156 !important;
  --border-container: 200 187 156 !important;
}

/* dark theme: tone everything to a deep ink-on-paper warm dark */
html[data-theme="dark"],
html[data-color-scheme="dark"],
.dark,
[data-theme="dark"] {
  --background-color: 26 22 15 !important;
  --b-50:  32 27 18 !important;
  --b-100: 45 38 27 !important;
  --b-200: 60 50 38 !important;
  --b-900: 248 243 229 !important;
}

/* ------------------------------------------------------------
   Hard background paint (in case any element didn't pick var)
   ------------------------------------------------------------ */
html, body, .app-wrapper, .app, #app, .page-wrap, .dashboard-app--container {
  background-color: #f1ead9 !important;
}

/* sidebar / rails — slightly deeper paper */
.app-wrapper > nav,
.app-wrapper > aside,
.conversations-list-wrap,
.conversation-sidebar-wrap,
.sidebar,
[class*="sidebar-wrap"]:not([class*="conversation-sidebar"]),
.conversation-details-wrap,
.contact-conversation--list,
.conversation--details {
  background-color: #e6dcc3 !important;
}

/* center conversation panel — pure paper */
.conversation-panel,
.conversation--main,
.dashboard-app--main {
  background-color: #f1ead9 !important;
}

/* ------------------------------------------------------------
   Type system override
   ------------------------------------------------------------ */
html, body, #app, .app-wrapper, button, input, select, textarea, .ui-snackbar {
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif !important;
  font-variation-settings: "wdth" 96, "wght" 400, "opsz" 24 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* serif on display & body copy of conversations */
h1, h2, h3, h4,
.title, .page-title,
.conversation--header h1,
.conversation--header h2,
.modal-header h2,
.settings--title,
.empty-state-title,
.conversation--user,
.conversation--user-name,
.message-text,
.message-text__wrap,
.bubble,
.user-message-content,
.text-content {
  font-family: "Fraunces", Georgia, serif !important;
}

h1, h2, h3, h4, .title, .page-title, .empty-state-title {
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 30 !important;
  letter-spacing: -0.012em !important;
  color: #1a160f !important;
}

.message-text, .message-text__wrap, .bubble, .user-message-content {
  font-variation-settings: "opsz" 22, "wght" 380, "SOFT" 30 !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}

.conversation--user, .conversation--user-name {
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 50 !important;
  font-size: 15.5px !important;
  color: #1a160f !important;
}

/* mono for ids, timestamps */
.timestamp, .conversation-timestamp, .duration, [class*="time"], code, kbd {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  color: #4a3f30 !important;
}

/* ------------------------------------------------------------
   Active conversation marker
   ------------------------------------------------------------ */
.conversation,
.conversation--card {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(26,22,15,.18) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  position: relative;
}
.conversation:hover, .conversation--card:hover {
  background-color: #fdf8eb !important;
}
.conversation.active,
.conversation--card.active,
.conversation.compact.active,
.conversation-selected,
[class*="conversation"].active {
  background-color: #f8f3e5 !important;
  border-radius: 0 !important;
}
.conversation.active::before,
.conversation--card.active::before,
.conversation-selected::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #c9421a !important;
}

/* ------------------------------------------------------------
   Header (the "folio" strip)
   ------------------------------------------------------------ */
.conversation--header,
.conv-header,
header[class*="conversation"],
.header,
.conversation--header--actions {
  background-color: #f1ead9 !important;
  border-bottom: 1.5px solid #1a160f !important;
}

/* ------------------------------------------------------------
   Buttons — letterpress feel
   ------------------------------------------------------------ */
.button, button.button, .ui-button,
[class*="button--"], .btn, button[class*="btn"] {
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-variation-settings: "wdth" 92, "wght" 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  border-radius: 0 !important;
  border: 1px solid #1a160f !important;
  background-color: #fdf8eb !important;
  color: #1a160f !important;
  padding: 8px 14px !important;
  box-shadow: 2px 2px 0 -1px #1a160f !important;
  transition: transform .08s, box-shadow .08s, background .12s, color .12s !important;
}
.button:hover, button.button:hover, [class*="button--"]:hover, .btn:hover {
  background-color: #1a160f !important;
  color: #fdf8eb !important;
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 -1px #1a160f !important;
}
.button.success, .button--primary, button.primary, [class*="button--success"] {
  background-color: #0f3d2e !important; color: #fdf8eb !important; border-color: #0f3d2e !important;
}
.button.alert, .button--alert, .button.warning, [class*="button--alert"] {
  background-color: #c9421a !important; color: #fdf8eb !important; border-color: #c9421a !important;
}

/* clear icon-button quirks: tiny circle icons */
.button.icon, button[class*="icon"][class*="button"], [class*="icon-button"] {
  border-radius: 0 !important;
  padding: 6px 8px !important;
}

/* ------------------------------------------------------------
   Inputs / reply box
   ------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
select, textarea,
.reply-box, .reply-box-wrap, .reply-box .ProseMirror,
.ProseMirror, .editor-wrapper {
  background-color: #fdf8eb !important;
  border: 1px solid #1a160f !important;
  border-radius: 0 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-variation-settings: "opsz" 22, "wght" 380, "SOFT" 30 !important;
  color: #1a160f !important;
  font-size: 15px !important;
}
input:focus, select:focus, textarea:focus, .ProseMirror:focus {
  outline: 2px solid #c9421a !important; outline-offset: -1px !important;
}
.reply-box {
  border-top: 1.5px solid #1a160f !important;
  border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
}

/* ------------------------------------------------------------
   Avatars — circles with hard shadow
   ------------------------------------------------------------ */
.user-thumbnail, .avatar, [class*="avatar"], .user-thumbnail-box {
  border-radius: 50% !important;
  background-color: #c9421a !important;
  color: #fdf8eb !important;
  font-family: "Fraunces", serif !important;
  font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 30 !important;
  border: 2px solid #f1ead9 !important;
  box-shadow: 0 0 0 1px #1a160f !important;
}

/* ------------------------------------------------------------
   Tabs
   ------------------------------------------------------------ */
.tabs--container .tabs--item, .tab--item, [role="tab"] {
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-variation-settings: "wdth" 92, "wght" 560 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #4a3f30 !important;
  background: transparent !important;
}
.tabs--container .tabs--item.active, .tab--item.active, [role="tab"][aria-selected="true"] {
  color: #1a160f !important;
  border-bottom: 3px solid #c9421a !important;
}

/* ------------------------------------------------------------
   Badges / labels / status pills
   ------------------------------------------------------------ */
.badge, .label, .conversation--label, [class*="status-badge"], .pill {
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-variation-settings: "wdth" 88, "wght" 600 !important;
  font-size: 9.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 2px 8px !important;
}

/* ------------------------------------------------------------
   Login / auth pages
   ------------------------------------------------------------ */
.login, .auth-wrap, .signup, .reset-password, .signup-wrap {
  background-color: #f1ead9 !important;
}
.login__hero, .auth-illustration, .signup-banner { display: none !important; }
.login form, .auth-form, .auth-wrap form, .signup-wrap form {
  background-color: #fdf8eb !important;
  border: 1px solid #1a160f !important;
  box-shadow: 6px 6px 0 -2px #1a160f !important;
  border-radius: 0 !important;
  padding: 36px 32px !important;
}

/* ------------------------------------------------------------
   Modals & dropdowns
   ------------------------------------------------------------ */
.modal-container, .modal, .ui-modal, [class*="modal-content"] {
  background-color: #fdf8eb !important;
  border: 1px solid #1a160f !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 -2px #1a160f !important;
}
.dropdown-pane, .multiselect__content-wrapper, [class*="dropdown-menu"], [class*="dropdown-pane"] {
  background-color: #fdf8eb !important;
  border: 1px solid #1a160f !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 -1px #1a160f !important;
}

/* ------------------------------------------------------------
   Selection + scrollbar
   ------------------------------------------------------------ */
::selection { background: #c9421a !important; color: #fdf8eb !important; }
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: #e6dcc3 !important; }
::-webkit-scrollbar-thumb { background: #1a160f !important; border: 2px solid #e6dcc3 !important; }

/* ------------------------------------------------------------
   Paper grain overlay (subtle)
   ------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 99998;
  opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.085  0 0 0 0 0.06  0 0 0 0.06 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

/* nuke any solid white backgrounds that survived */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color:#fff"],
[style*="background:#fff"],
[style*="background-color: white"] { background-color: #f1ead9 !important; }

/* powered-by hide */
.powered-by, [class*="powered-by"] { display: none !important; }