/* =========================================================
   Chatwoot Custom Theme — v5 (full redesign)
   Design system for 6-8hr/day daily use.

   PRINCIPLE: three separate concerns, three separate visual
   languages, never mixed:
     1. CHANNEL identity  -> thin left border + icon color only
     2. READ / UNREAD     -> neutral brightness + font-weight
     3. SELECTED / ACTIVE -> the one accent color, softly

   This replaces all earlier rounds' background-wash approach,
   which made rows look like unrelated colored boxes.
   ========================================================= */

:root {
  /* base surfaces */
  --bg-app:        #121417;
  --bg-elevated:   #1c2024;
  --border:        #262a2f;

  /* text */
  --text-primary:   #edeef0;
  --text-secondary: #9aa0a6;
  --text-tertiary:  #6b7078;

  /* the ONE accent — used for every interactive / "mine" /
     selected element in the app. Indigo: doesn't collide
     with any of the four channel colors below. */
  --accent:         #6366f1;
  --accent-dim:     #2f316b;   /* outgoing bubble fill */
  --accent-wash:    rgba(99, 102, 241, 0.14);  /* active row */

  /* channel identity colors — border + icon ONLY, never a
     background fill */
  --ch-whatsapp:  #2fb463;
  --ch-email:     #d1922f;
  --ch-facebook:  #4b93f0;
  --ch-instagram: #cf4f8f;

  /* neutral unread wash — deliberately colorless so it never
     competes with channel or accent color */
  --unread-wash: rgba(255, 255, 255, 0.075);
}


/* ---------- BASE SURFACES ---------- */
.bg-n-surface-1 { background-color: var(--bg-app) !important; }
.text-n-slate-12 { color: var(--text-primary) !important; }
.text-n-slate-11 { color: var(--text-secondary) !important; }
.text-n-slate-10 { color: var(--text-tertiary) !important; }
.border-n-slate-3,
.border-n-weak,
.border-b-n-weak { border-color: var(--border) !important; }


/* ---------- CONVERSATION ROWS ---------- */

/* default: transparent border, no background tint at all */
.conversation {
  border-left: 3px solid transparent !important;
  background-color: transparent !important;
  /* nudges the browser to keep :has()-driven border color in
     sync when Chatwoot recycles this row for different data
     during virtual scrolling — reduces (may not fully
     eliminate) the momentary border-disappearing glitch */
  will-change: border-color;
}

/* --- 1. CHANNEL IDENTITY: border + icon color only --- */
.conversation:has(.i-woot-whatsapp)  { border-left-color: color-mix(in srgb, var(--ch-whatsapp) 40%, transparent) !important; }
.conversation:has(.i-woot-mail)      { border-left-color: color-mix(in srgb, var(--ch-email) 40%, transparent) !important; }
.conversation:has(.i-woot-messenger)  { border-left-color: color-mix(in srgb, var(--ch-facebook) 40%, transparent) !important; }
.conversation:has(.i-woot-instagram) { border-left-color: color-mix(in srgb, var(--ch-instagram) 40%, transparent) !important; }

.i-woot-whatsapp   { color: var(--ch-whatsapp) !important; }
.i-woot-mail       { color: var(--ch-email) !important; }
.i-woot-messenger   { color: var(--ch-facebook) !important; }
.i-woot-instagram  { color: var(--ch-instagram) !important; }

/* --- 2. READ / UNREAD: neutral brightness, not color --- */
.conversation:has(.bg-n-teal-9) {
  background-color: var(--unread-wash) !important;
}
.conversation:has(.bg-n-teal-9) h4.conversation--user {
  color: #ffffff !important;
  font-weight: 700 !important;
}
/* unread border goes to full channel saturation (still just
   that channel's hue — never a new color) */
.conversation:has(.i-woot-whatsapp):has(.bg-n-teal-9)  { border-left-color: var(--ch-whatsapp) !important; }
.conversation:has(.i-woot-mail):has(.bg-n-teal-9)      { border-left-color: var(--ch-email) !important; }
.conversation:has(.i-woot-messenger):has(.bg-n-teal-9)  { border-left-color: var(--ch-facebook) !important; }
.conversation:has(.i-woot-instagram):has(.bg-n-teal-9) { border-left-color: var(--ch-instagram) !important; }

/* the unread badge itself matches its channel's color */
.conversation:has(.i-woot-whatsapp) .bg-n-teal-9   { background-color: var(--ch-whatsapp) !important; }
.conversation:has(.i-woot-mail) .bg-n-teal-9       { background-color: var(--ch-email) !important; color: #2b1d02 !important; }
.conversation:has(.i-woot-messenger) .bg-n-teal-9   { background-color: var(--ch-facebook) !important; }
.conversation:has(.i-woot-instagram) .bg-n-teal-9  { background-color: var(--ch-instagram) !important; }

/* fallback for a channel icon class we haven't confirmed yet */
.conversation:not(:has(.i-woot-whatsapp)):not(:has(.i-woot-mail)):not(:has(.i-woot-messenger)):not(:has(.i-woot-instagram)):has(.bg-n-teal-9) {
  border-left-color: var(--accent) !important;
}

/* --- 3. SELECTED / ACTIVE: the one accent color, softly ---
   Applied last so it layers on top of whichever channel
   border is already showing, without replacing it. */
/* ROUND 11: active was using the same kind of soft tint as
   unread/channel borders — three subtle washes on a dark bg
   all blur together. Making active a genuinely different
   mechanism: a thick, solid accent bar that overrides the
   thin channel border while selected. You already know the
   channel from the header once you've opened it, so this
   isn't a real loss of information — and it makes "this is
   the one I'm looking at" impossible to miss. */
.conversation.active {
  background-color: rgba(99, 102, 241, 0.22) !important;
  border-left-color: var(--accent) !important;
  border-left-width: 5px !important;
}


/* ---------- REPLY BOX — separated from thread ---------- */
.reply-box {
  background-color: var(--bg-elevated) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25) !important;
}


/* ---------- MESSAGE BUBBLES ---------- */
/* incoming (customer) — neutral gray, unchanged */
.bg-n-slate-4 { background-color: #23282d !important; }

/* outgoing (agent/Husk) — the single accent, muted dark so
   it's calm for long reading, and matches every other
   "interactive / mine" element in the app */
.bg-n-solid-iris,
.bg-n-blue-9,
.bg-n-blue-10,
.bg-n-solid-blue {
  background-color: var(--accent-dim) !important;
}
/* read-tick checkmarks: was hardcoded blue, move into the
   same accent family instead of a leftover blue */
[class*="text-\[\#7EB6FF\]"] {
  color: #a5a8f5 !important;
}


/* ---------- BRAND / INTERACTIVE ELEMENTS — unify under accent ---------- */
/* send button, active-tab underline */
.bg-n-brand { background-color: var(--accent) !important; }
/* active "Mine" tab text, links */
.text-n-blue-11 { color: var(--accent) !important; }
/* "Mine 11" tab counter badge — was pairing my accent text
   color with Chatwoot's own unrelated dark-navy background,
   two uncoordinated purples stacked on each other. Give it a
   soft accent wash instead, same visual family as the rest
   of the accent system. */
.bg-n-blue-3 {
  background-color: var(--accent-wash) !important;
}
/* Resolve button — primary action in the whole app, give it
   real visual weight instead of blending into other buttons.
   Scoped to .resolve-actions specifically — bg-n-button-color
   is shared with the compose/pencil button in the sidebar,
   which was getting caught by a plain button.bg-n-button-color
   selector. This only touches buttons inside the Resolve
   control itself. */
.resolve-actions button.bg-n-button-color {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}
.resolve-actions button.bg-n-button-color:hover {
  filter: brightness(1.1);
}
/* everything else sharing this class (compose/pencil button,
   etc) stays neutral */
button.bg-n-button-color {
  background-color: #2f3540 !important;
  color: var(--text-primary) !important;
}


/* ---------- LINKS — restore visibility, lost in v5 rewrite ----------
   FIXED: bare "a" selector below previously caught every link on the
   page, including sidebar nav (Mentions, Teams, Labels, etc), which
   is why everything got underlined. Scoped to message bubble links
   only now. */
.prose-bubble a.link {
  color: #6cc7ff !important;
  text-decoration: underline !important;
}

/* ---------- SELECTED row: always bright, regardless of read state ---------- */
.conversation.active h4.conversation--user {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* =========================================================
   ROUND 6 — name color fix, accent hue change, label redesign,
   search bar polish
   ========================================================= */

/* ---------- FIX: read names were as bright as unread ----------
   Global .text-n-slate-12 override made every name white
   regardless of state. h4.conversation--user is more specific
   (element+class) than .text-n-slate-12 (class only), so this
   correctly wins for names without touching anything else that
   still needs to be bright white. */
h4.conversation--user {
  color: var(--text-secondary) !important;
  font-weight: 700 !important;
}
/* unread still overrides this via higher specificity below,
   already defined earlier in the file — kept for reference:
   .conversation:has(.bg-n-teal-9) h4.conversation--user { color:#fff; font-weight:700; } */


/* ---------- ACCENT COLOR — moved off indigo ----------
   Indigo/violet is the default "generic SaaS" accent (Linear,
   Notion, Teams all use it) — not distinct, not considered.
   Terracotta: unclaimed by any channel color, warm rather than
   corporate-cold, still enough contrast for white button text.
   Because every earlier rule references var(--accent), this
   redefinition alone re-tones every button, active tab, focus
   ring, and outgoing bubble — no other rules need touching. */
:root {
  --accent:      #6366f1;
  --accent-dim:  #2f316b;
  --accent-wash: rgba(99, 102, 241, 0.14);
}


/* ---------- LABEL PILLS — redesigned, same footprint ---------- */
.label {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 1px 7px 1px 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
}
.label-color-dot {
  width: 7px !important;
  height: 7px !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) !important;
}


/* ---------- SEARCH BAR — real element confirmed via DevTools:
   it's an <a> tag (href="/app/accounts/1/search"), not an
   <input>. All earlier input[placeholder="Search..."] rules
   were dead code — this element never matched them, which is
   why nothing ever visibly changed no matter what I tried. */
a.bg-n-button-color {
  background-color: #2f3540 !important;
  color: var(--text-primary) !important;
}
a.bg-n-button-color:hover {
  background-color: #363d49 !important;
}

/* =========================================================
   ROUND 7 — counter Chatwoot's own border-hiding rule
   Chatwoot ships a rule (visible in the very first list DOM
   you sent) that hides the border of the row directly above
   whichever row is active, presumably to avoid a double-line
   seam in their default (borderless-channel) design. It wins
   over our channel-color border because Chatwoot's styles
   appear to be injected dynamically at runtime, which can
   land after our static stylesheet in the cascade even though
   ours loads first in <head>. Duplicating the class here is a
   standard, harmless way to boost specificity so our border
   wins regardless of injection timing.
   ========================================================= */
.conversation.conversation:has(.i-woot-whatsapp)  { border-left-color: color-mix(in srgb, var(--ch-whatsapp) 40%, transparent) !important; }
.conversation.conversation:has(.i-woot-mail)      { border-left-color: color-mix(in srgb, var(--ch-email) 40%, transparent) !important; }
.conversation.conversation:has(.i-woot-messenger)  { border-left-color: color-mix(in srgb, var(--ch-facebook) 40%, transparent) !important; }
.conversation.conversation:has(.i-woot-instagram) { border-left-color: color-mix(in srgb, var(--ch-instagram) 40%, transparent) !important; }

.conversation.conversation:has(.i-woot-whatsapp):has(.bg-n-teal-9)  { border-left-color: var(--ch-whatsapp) !important; }
.conversation.conversation:has(.i-woot-mail):has(.bg-n-teal-9)      { border-left-color: var(--ch-email) !important; }
.conversation.conversation:has(.i-woot-messenger):has(.bg-n-teal-9)  { border-left-color: var(--ch-facebook) !important; }
.conversation.conversation:has(.i-woot-instagram):has(.bg-n-teal-9) { border-left-color: var(--ch-instagram) !important; }

/* =========================================================
   ROUND 8 — breathing room + de-emphasize activity log
   Reference: Teams isn't a perfect design, but its generous
   padding keeps a dense chat feeling calm. Current Chatwoot
   spacing is tight edge-to-edge, which is a real contributor
   to the "overwhelming" feeling independent of color choices.
   ========================================================= */

/* conversation list rows — more vertical air per row */
.conversation .py-3 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* space between the stacked elements WITHIN a row — channel
   label, contact name, message snippet, tag pill — which were
   still packed tight even after the row itself got more
   padding */
.conversation h4.conversation--user {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.conversation .leading-6.h-6 {
  margin-bottom: 5px !important;
}

/* message bubbles — more space between messages so the
   thread doesn't feel like a solid wall of blocks */
.message-bubble-container {
  margin-bottom: 14px !important;
}

/* ---------- ACTIVITY LOG — confirmed via data-bubble-name
   attribute ("Husk added holding-sent", "Assigned to X by
   Automation System" etc). These are audit trail, not the
   conversation itself, and were rendered at the same visual
   weight as real messages — competing for attention instead
   of receding. Turning them into quiet inline text instead
   of solid pills. ---------- */
[data-bubble-name="activity"] {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  padding: 3px 4px !important;
}

/* channel border was nearly invisible at 40% — bumping up so
   it still functions as a fast-scan signal, per the original
   point of having it at all */
.conversation.conversation:has(.i-woot-whatsapp)  { border-left-color: color-mix(in srgb, var(--ch-whatsapp) 55%, transparent) !important; }
.conversation.conversation:has(.i-woot-mail)      { border-left-color: color-mix(in srgb, var(--ch-email) 55%, transparent) !important; }
.conversation.conversation:has(.i-woot-messenger)  { border-left-color: color-mix(in srgb, var(--ch-facebook) 55%, transparent) !important; }
.conversation.conversation:has(.i-woot-instagram) { border-left-color: color-mix(in srgb, var(--ch-instagram) 55%, transparent) !important; }

/* =========================================================
   ROUND 9 — embedded email preview card
   Confirmed via DOM: not an iframe, real inline content with
   its own inline white/light styling (the sender's actual
   email HTML). Not attempting to force dark-mode this — that
   reliably breaks logos/images senders color-matched on
   purpose. Instead, framing it as a deliberate "external
   document" card, same pattern Gmail/Outlook use for quoted
   email content sitting inside a dark inbox UI.
   ========================================================= */

/* give the embedded email its own card frame instead of
   floating edge-to-edge inside the dark bubble.
   FIXED AGAIN: .letter-render is applied to EVERY message in
   an email-channel conversation, including your own short
   replies — not unique to embedded content either. The real,
   confirmed-via-DOM differentiator: only genuine embedded
   emails get wrapped in a max-h-[400px] truncation container
   (since raw email HTML can be long); your own replies never
   get that wrapper. Scoping to that instead. */
.max-h-\[400px\] .prose-bubble {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* same corrected scoping for the gradient/button */
.max-h-\[400px\] .bg-gradient-to-t {
  background: linear-gradient(to top, #f4f4f6 0%, #f4f4f6 25%, transparent 100%) !important;
}
.max-h-\[400px\] .bg-gradient-to-t button {
  color: #3a3f47 !important;
}

/* =========================================================
   ROUND 10 — hide "Change appearance" from profile dropdown
   Confirmed via DOM: the button is identifiable by its
   i-lucide-palette icon, scoped to its containing dropdown
   item so nothing else in the menu is affected.
   ========================================================= */
li.n-dropdown-item:has(.i-lucide-palette) {
  display: none !important;
}
/* the li's wrapping <div> was still occupying a row in the
   dropdown's grid layout even with the item hidden, leaving
   an empty gap. Hiding the wrapper too closes it. */
.n-dropdown-body > div:has(li.n-dropdown-item .i-lucide-palette) {
  display: none !important;
}