/* Teslakala agent-dashboard theme for Chatwoot.
   Loaded through the DASHBOARD_SCRIPTS installation config, so no Chatwoot
   file is patched and the theme survives an upgrade untouched.

   It matches panel.teslakala.com: YekanBakh FaNum, brand #FF9900 on ink
   #060707, zinc neutrals, white cards on a zinc-100 page.

   Chatwoot 4.16 drives almost all of its colour from RGB-triple custom
   properties (`rgb(var(--blue-9))`), so re-pointing those variables recolours
   the whole app. The exception is `n-brand`, which theme/colors.js hardcodes
   as #2781F6 and Tailwind compiles to a literal — those utilities are listed
   out explicitly at the bottom. */

@font-face {
  font-family: 'YekanBakhFaNum';
  src: url('/brand/fonts/YekanBakhFaNum-VF.woff2') format('woff2-variations'),
       url('/brand/fonts/YekanBakhFaNum-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tk-font: 'YekanBakhFaNum', 'Estedad', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --tk-brand: #FF9900;
  --tk-brand-hover: #FFB733;
  --tk-brand-ink: #060707;
}

/* ---------- typography ----------
   Chatwoot's `font-sans` stack ends in `sans-serif !important`, so every
   override here has to be !important too or the utility wins. */
body,
#app,
.font-sans,
.font-inter,
.font-interDisplay,
.font-estedad,
input, textarea, select, button,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tk-font) !important;
}
/* code and message-source blocks stay monospace */
.font-mono, code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }

/* Persian text sits lower in its line box than Latin; the stock 1.5 crowds
   descenders in the conversation list and sidebar. */
body { -webkit-font-smoothing: antialiased; }

/* ============================================================
   LIGHT THEME TOKENS
   ============================================================ */
:root {
  /* --- brand ramp: Chatwoot's `blue` is its accent, repoint it to orange ---
     step 9 is the solid brand, 11 is accent text on light (#B06000 keeps
     4.9:1 on white — #FF9900 itself is only 2.1:1 and unreadable as text). */
  --blue-1: 255 253 250;
  --blue-2: 255 250 242;
  --blue-3: 255 243 224;
  --blue-4: 255 234 199;
  --blue-5: 255 223 173;
  --blue-6: 255 209 143;
  --blue-7: 250 190 110;
  --blue-8: 243 164 61;
  --blue-9: 255 153 0;
  --blue-10: 235 138 0;
  --blue-11: 176 96 0;
  --blue-12: 78 42 0;

  /* --- neutrals: slate -> zinc, same lightness, blue tint removed --- */
  --slate-1: 252 252 252;
  --slate-2: 250 250 250;
  --slate-3: 244 244 245;
  --slate-4: 237 237 239;
  --slate-5: 228 228 231;
  --slate-6: 221 221 225;
  --slate-7: 212 212 216;
  --slate-8: 184 184 192;
  --slate-9: 161 161 170;
  --slate-10: 130 130 140;
  --slate-11: 90 90 99;
  --slate-12: 24 24 27;

  /* --- surfaces: white cards on a zinc-100 page, like the panel --- */
  --background-color: 244 244 245;
  --surface-1: 255 255 255;
  --surface-2: 255 255 255;
  --border-container: 228 228 231;
  --border-strong: 212 212 216;
  --border-weak: 228 228 231;
  --label-background: 244 244 245;

  /* --- accent-derived semantics --- */
  --solid-blue: 255 235 204;
  --solid-blue-2: 255 252 245;
  --border-blue-strong: 122 61 0;
  --border-blue: 255, 153, 0, 0.5;
  --text-blue: 44 24 1;
}

/* ============================================================
   DARK THEME TOKENS
   ============================================================ */
.dark {
  --blue-1: 24 17 8;
  --blue-2: 31 22 10;
  --blue-3: 56 33 6;
  --blue-4: 74 42 0;
  --blue-5: 92 53 0;
  --blue-6: 110 68 8;
  --blue-7: 136 87 24;
  --blue-8: 176 112 30;
  --blue-9: 255 153 0;
  --blue-10: 255 170 36;
  --blue-11: 255 184 77;
  --blue-12: 255 228 179;

  --slate-1: 17 17 18;
  --slate-2: 24 24 27;
  --slate-3: 32 32 36;
  --slate-4: 39 39 42;
  --slate-5: 46 46 51;
  --slate-6: 56 56 62;
  --slate-7: 70 70 77;
  --slate-8: 93 93 102;
  --slate-9: 113 113 122;
  --slate-10: 130 130 140;
  --slate-11: 178 178 186;
  --slate-12: 237 237 240;

  --background-color: 24 24 27;
  --surface-1: 17 17 19;
  --surface-2: 20 20 23;
  --card-color: 28 28 32;
  --border-strong: 52 52 58;
  --border-weak: 39 39 44;

  --solid-blue: 82 46 0;
  --solid-blue-2: 30 24 18;
  --border-blue-strong: 255 223 173;
  --border-blue: 255, 153, 0, 0.5;
  --text-blue: 255 240 219;
}

/* ============================================================
   n-brand — hardcoded #2781F6 in theme/colors.js, so Tailwind compiled it to
   a literal and no variable can reach it. Selectors below are copied verbatim
   from the built bundle so they tie on specificity and win on order.
   ============================================================ */
.bg-n-brand,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.dark\:checked\:bg-n-brand:checked:is(.dark *),
.group:hover .group-hover\:bg-n-brand,
.after\:bg-n-brand:after,
.before\:bg-n-brand:before {
  --tw-bg-opacity: 1;
  background-color: var(--tk-brand);
}
.bg-n-brand\/5 { background-color: rgb(255 153 0 / .05); }
/* The auth screens paint the whole page in this 5% accent wash. At 5% blue it
   reads neutral; at 5% orange it reads cream, so give the page the panel's
   zinc-100 instead and keep the tint for the small accent surfaces. */
.min-h-screen.bg-n-brand\/5 { background-color: #F4F4F5; }
.dark .min-h-screen.bg-n-brand\/5,
.min-h-screen.bg-n-brand\/5.dark\:bg-n-background:is(.dark *) { background-color: rgb(var(--background-color)); }
.bg-n-brand\/10, .dark\:bg-n-brand\/10:is(.dark *),
.hover\:bg-n-brand\/10:hover { background-color: rgb(255 153 0 / .1); }
.bg-n-brand\/20,
.hover\:enabled\:bg-n-brand\/20:enabled:hover,
.focus-visible\:bg-n-brand\/20:focus-visible { background-color: rgb(255 153 0 / .2); }
.hover\:bg-n-brand\/80:hover { background-color: var(--tk-brand-hover); }

/* #FF9900 is a light colour — white text on it is 2.1:1 and unreadable, so
   anything sitting on the solid brand gets ink instead. Same call the panel
   makes with `bg-brand-500 text-night-950`. */
.bg-n-brand,
.checked\:bg-n-brand:checked,
.group:hover .group-hover\:bg-n-brand,
.hover\:bg-n-brand\/80:hover { color: var(--tk-brand-ink); }
.bg-n-brand .text-white,
.bg-n-brand svg,
.hover\:bg-n-brand\/80:hover .text-white { color: var(--tk-brand-ink); }

.text-n-brand,
.hover\:text-n-brand:hover,
.group:hover .group-hover\:text-n-brand,
.group:focus-within .group-focus-within\:text-n-brand,
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~=not-prose],[class~=not-prose] *))) {
  --tw-text-opacity: 1;
  color: #B06000;
}
.dark .text-n-brand,
.dark .hover\:text-n-brand:hover,
.dark\:hover\:text-n-brand:hover:is(.dark *) { color: #FFB84D; }

.border-n-brand,
.hover\:border-n-brand:hover,
.focus\:border-n-brand:focus,
.checked\:border-n-brand:checked,
.indeterminate\:border-n-brand:indeterminate,
.dark\:border-n-brand:is(.dark *),
.dark\:checked\:border-n-brand:checked:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: var(--tk-brand);
}
.border-t-n-brand { --tw-border-opacity: 1; border-top-color: var(--tk-brand); }
.before\:\!border-t-n-brand:before { border-top-color: var(--tk-brand) !important; }
.border-n-brand\/50 { border-color: rgb(255 153 0 / .5); }

.outline-n-brand,
.focus\:outline-n-brand:focus,
.focus-visible\:outline-n-brand:focus-visible,
.focus-within\:outline-n-brand:focus-within,
.has-\[\:focus\]\:outline-n-brand:has(:focus),
.dark\:focus\:outline-n-brand:focus:is(.dark *),
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *),
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *) {
  outline-color: var(--tk-brand);
}
.\!outline-n-brand, .dark\:\!outline-n-brand:is(.dark *) { outline-color: var(--tk-brand) !important; }

.ring-n-brand,
.focus\:ring-n-brand:focus,
.focus-visible\:ring-n-brand:focus-visible,
.focus-within\:ring-n-brand:focus-within,
.dark\:ring-n-brand:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 153 0 / var(--tw-ring-opacity, 1));
}

.from-n-brand\/15 {
  --tw-gradient-from: rgb(255 153 0 / .15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 153 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Legacy `woot-*` utilities. Chatwoot 4.16 has all but migrated off them, but
   the auth screens (which ship in the separate v3app pack, not the dashboard
   pack) still use these — and v3app compiles them to different literals than
   the dashboard pack does, so both are covered by name. */
.bg-woot-500 { --tw-bg-opacity: 1; background-color: var(--tk-brand); color: var(--tk-brand-ink); }
.hover\:bg-woot-600:hover { --tw-bg-opacity: 1; background-color: var(--tk-brand-hover); color: var(--tk-brand-ink); }
.bg-woot-25 { --tw-bg-opacity: 1; background-color: #FFF8EB; }
.text-woot-500, .text-woot-600,
.hover\:text-woot-500:hover, .hover\:text-woot-700:hover { --tw-text-opacity: 1; color: #B06000; }
.dark\:text-woot-500:is(.dark *) { --tw-text-opacity: 1; color: #FFB84D; }
.dark\:text-woot-50:is(.dark *) { --tw-text-opacity: 1; color: #FFF3E0; }
.border-woot-500 { --tw-border-opacity: 1; border-color: var(--tk-brand); }
.focus\:ring-woot-500:focus, .dark\:focus\:ring-woot-500:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 153 0 / var(--tw-ring-opacity, 1));
}
.focus-visible\:outline-woot-500:focus-visible { outline-color: var(--tk-brand); }

/* `.text-link` is a component class with a hardcoded #2781F6. Its :hover
   already resolves through --blue-10, so only the base needs repointing —
   to the 4.9:1 accent, since #FF9900 as body-sized text is unreadable. */
.text-link { color: #B06000; }
.dark .text-link { color: #FFB84D; }

/* ============================================================
   DARK SIDEBAR — the signature of panel.teslakala.com
   ------------------------------------------------------------
   The panel's shell is a `night-900 -> night-800` gradient rail with zinc-300
   labels and an orange active row; Chatwoot's is light grey. Recolouring the
   accent alone never reads as "the panel" because Chatwoot uses its accent
   sparingly — this is the change that carries the look.

   Chatwoot paints the sidebar with `bg-n-background`, the same token as the
   page, so it cannot be reached through the variables: every rule below is
   scoped to the sidebar root instead. The anchor is the sidebar's own static
   class list; if a future Chatwoot changes it the sidebar simply falls back
   to the light treatment, which still carries the orange theme.
   ============================================================ */
.bg-n-background.fixed.top-0.h-full.z-40 {
  background: linear-gradient(180deg, #0B1118 0%, #101A24 100%) !important;

  /* Everything inside the rail resolves through these, so redefining the ramp
     here flips labels, hover washes, dividers, the search field and the scroll
     fade in one go — no per-utility overrides, and nothing outside the rail is
     touched. Values are the dark end of the same ramp used in `.dark`. */
  --background-color: 16 26 36;
  --slate-1: 11 17 24;
  --slate-2: 14 21 29;
  --slate-3: 26 34 44;
  --slate-4: 32 41 52;
  --slate-5: 38 48 60;
  --slate-6: 46 57 70;
  --slate-7: 58 70 84;
  --slate-8: 78 92 108;
  --slate-9: 110 124 140;
  --slate-10: 150 160 172;
  --slate-11: 200 206 214;
  --slate-12: 255 255 255;
  --border-weak: 33 42 53;
  --border-strong: 48 59 72;
  --border-container: 33 42 53;
  --button-color: 24 32 42;
  --solid-1: 16 26 36;
  --solid-2: 16 26 36;
  --solid-3: 26 34 44;
  --surface-1: 16 26 36;
  --surface-2: 20 29 39;
  --alpha-2: 255, 255, 255, 0.08;
  --black-alpha-2: 255, 255, 255, 0.04;
}

/* active row — panel: `bg-brand-500/15 text-brand-400 font-bold` */
.bg-n-background.fixed.top-0.h-full.z-40 .active {
  background: rgb(255 153 0 / .15) !important;
  color: #FFB733 !important;
  font-weight: 700;
}

/* the wordmark is ink-on-white; on the dark rail it needs its light twin */
.bg-n-background.fixed.top-0.h-full.z-40 img[src*="tk-logo.svg"] {
  content: url('/brand/img/tk-logo-dark.svg');
}

/* ============================================================
   STRAY BLUE — component-scoped styles that hardcode #2781F6 with no
   variable fallback, so neither the token swap nor the n-brand list reaches
   them. The `[class]` in each selector adds specificity without changing what
   it matches, so these tie with Chatwoot's own `[data-v-*]`-scoped rules and
   win on order — without depending on a scoped-style hash that changes on
   every rebuild.
   ============================================================ */
.notification--unread-indicator[class] { background-color: var(--tk-brand); }
.banner.primary[class] { background-color: var(--tk-brand); color: var(--tk-brand-ink); }
.menu[class]:hover { background-color: var(--tk-brand); color: var(--tk-brand-ink); }
.search-input[class]:focus { border-color: var(--tk-brand); }
.bg-\[\#2781F6\] { background-color: var(--tk-brand); color: var(--tk-brand-ink); }
p a { color: #B06000; }
.dark p a { color: #FFB84D; }
select:focus, textarea:focus { outline-color: var(--tk-brand); }
/* the input rule carries ~a dozen :not() clauses, so !important is the only
   sane way to reach it */
input[type]:focus { outline-color: var(--tk-brand) !important; }
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type="submit"] {
  background-color: var(--tk-brand);
  color: var(--tk-brand-ink);
}

/* ============================================================
   INBOX VIEW AS CARDS — the panel's other half
   ------------------------------------------------------------
   The panel is `bg-zinc-100` with white `rounded-xl` cards
   (`.card { bg-white rounded-xl shadow-sm border border-zinc-200 }`).
   Chatwoot butts its three panes edge to edge and separates them with
   hairlines, so the panes are lifted onto the page as cards instead.

   Colours go through the tokens, not literals, so dark mode still works:
   the page takes --background-color, the cards --surface-1 / --border-weak.
   The anchors are Chatwoot's own hook classes (`conversations-list-wrap`,
   `conversation-details-wrap`), which carry no rules of their own.
   ============================================================ */
main.bg-n-surface-1 {
  background-color: rgb(var(--background-color));
  padding: 12px;
}
main.bg-n-surface-1 > section { gap: 12px; }

/* Card the panes by POSITION, not by name. The two routes that render here
   (`/conversations` via ConversationView, `/inbox-view` via InboxList) use
   completely different components and class hooks — `conversations-list-wrap`
   and `conversation-details-wrap` exist only on the first, and inbox-view even
   forces `!border-0` onto its message pane. Their one shared trait is being a
   direct child of the route <section>, so that is the anchor.
   `border` as a shorthand also collapses the panes' own `border-r`/`border-l`
   hairlines, which would otherwise double up against the card edge. */
main.bg-n-surface-1 > section > * {
  border: 1px solid rgb(var(--border-weak));
  border-radius: 0.75rem;
  background-color: rgb(var(--surface-1));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .04);
}
/* Clip the LIST pane only. Its rows paint hover/selected backgrounds that would
   square off the card corners, and it already has its own scroll clipping.
   The message pane is deliberately left unclipped: the "حل شد" dropdown is a
   plain absolutely-positioned div inside it (unlike context menus and popovers,
   which teleport to body), so `overflow: hidden` here could cut it off. It does
   not need clipping anyway — its children share the card's own background. */
main.bg-n-surface-1 > section > *:first-child { overflow: hidden; }

/* ============================================================
   MESSENGER POLISH — thread and list
   ------------------------------------------------------------
   Chatwoot lays messages out correctly but loosely: bubbles carry 16/12px
   padding with the timestamp on its own full-width line, every message is
   spaced the same whether or not it is part of a run, and system events are
   rendered as grey pills that compete with real messages. The result reads
   like a ticket log. The rules below tighten it toward what a messenger does
   — dense runs, quiet system lines, a thread surface the bubbles sit ON.
   ============================================================ */

/* A messenger's thread is a distinct surface from its bubbles; here the pane
   card and the bubbles' own white would otherwise be the same colour. */
ul.conversation-panel { background-color: rgb(var(--slate-3)); }
.dark ul.conversation-panel { background-color: rgb(var(--slate-1)); }

/* bubbles: tighter box, slight lift */
[data-bubble-name="text"],
[data-bubble-name="image"],
[data-bubble-name="file"],
[data-bubble-name="audio"],
[data-bubble-name="video"] {
  padding: 0.5rem 0.75rem;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / .05);
  line-height: 1.75;
}
.left-bubble { background-color: rgb(var(--surface-1)) !important; }
.dark .left-bubble { background-color: rgb(var(--slate-3)) !important; }

/* the timestamp line: a messenger tucks it under the text, small and quiet,
   not as a second full-height row */
[data-bubble-name] > .text-xs:last-child {
  margin-top: 1px;
  font-size: 10.5px;
  line-height: 1.4;
  opacity: .65;
  justify-content: flex-end;
}

/* runs of messages from the same side close up */
.message-bubble-container { margin-bottom: 0.5rem; }
.group-with-next { margin-bottom: 2px; }

/* System events ("X اولویت را روی urgent تنظیم کرد", assignment and resolve
   notices) are hidden from the thread — they interrupt the conversation and
   the same information is on the conversation header and in the audit trail.
   The whole row goes, not just the bubble, so no gap is left behind; that
   needs :has(), which Chatwoot's own stylesheet already relies on.
   To bring them back, delete this rule — the styling below it is what they
   looked like as quiet centred lines rather than grey pills. */
.message-bubble-container:has(> * > * > [data-bubble-name="activity"]),
.message-bubble-container:has([data-bubble-name="activity"]) { display: none; }

[data-bubble-name="activity"] {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11.5px;
  padding: 2px 0 !important;
  color: rgb(var(--slate-10));
  max-width: 34rem;
  text-align: center;
  justify-content: center;
}

/* private notes keep the amber, but read as a note rather than a message */
[data-bubble-name][class*="solid-amber"] {
  box-shadow: inset 0 0 0 1px rgb(var(--amber-8) / .35), 0 1px 1px 0 rgb(0 0 0 / .05);
}

/* ---- conversation list rows ---- */
/* `p-3` + a 24px status row makes each row ~90px, so barely eight fit on a
   laptop. Tightening the box gets a third more conversations on screen
   without touching the type scale. */
.inbox-card { padding: 0.5rem 0.625rem !important; gap: 2px !important; }
.inbox-card > .flex.items-start { gap: 0.5rem; }
.inbox-card p { line-height: 1.6; font-size: 13px; }
.inbox-card > .flex.items-center.justify-between { height: 1.125rem !important; }
.inbox-card .text-xs { font-size: 11px; }
/* unread rows lead with the brand, like an unread chat in a messenger */
.inbox-card .text-n-blue-11 { color: #B06000; font-weight: 600; }
.dark .inbox-card .text-n-blue-11 { color: #FFB84D; }

/* selected conversation gets the panel's orange marker, the same cue the
   sidebar's active row uses. `.conversation` is the classic list's row,
   `.inbox-card` the inbox-view's. */
.conversation.active,
.inbox-card.active { position: relative; }
.conversation.active::after,
.inbox-card.active::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 99px;
  background: var(--tk-brand);
}

/* ============================================================
   panel-flavoured shape: softer cards, tabular figures
   ============================================================ */
.num, [class*="tabular"] { font-variant-numeric: tabular-nums; }

::selection { background: rgb(255 153 0 / 0.25); }

/* the login card, to match the panel's rounded-xl + hairline border */
#app form,
#app .shadow-md,
#app .shadow-lg {
  border-radius: 0.75rem;
}

/* The empty-state art is an <img src>, so its blue (#9DC9FB) is unreachable
   from CSS — swap the whole file for a brand-recoloured copy instead. */
img[alt="No Chat"] { content: url('/brand/img/no-chat.svg'); }
img[alt="No Chat dark"] { content: url('/brand/img/no-chat-dark.svg'); }