/* Radonix Connect theme (Mert 2026-10-01: "Branding and theme — do it").
   1) Accent: Chatwoot's brand blue (#2781f6) → Radonix teal (#0d9488). The utility classes are
      regenerated from the compiled dashboard CSS at image build time and appended below this file
      (see Dockerfile), so they always match the installed Chatwoot version.
   2) Denser conversation list.  3) Dark-mode colours for every Radonix panel added by custom.js. */

:root { --rx-accent: #0d9488; --rx-accent-strong: #0f766e; --rx-accent-soft: rgba(13,148,136,.12); --rx-navy: #1f2a44; }

/* Strong blue shades → teal (links, active states, focus rings). Light tints stay as they are. */
:root, .dark { --blue-9: 13 148 136; --blue-10: 15 118 110; --blue-11: 13 148 136; }

/* Login / onboarding: accent on the primary button and links */
.auth-form button[type="submit"], form[class*="login"] button[type="submit"] { background-color: var(--rx-accent) !important; }
.auth-form a, form[class*="login"] a { color: var(--rx-accent-strong); }

/* Denser conversation list: tighter vertical rhythm, same tap targets */
.conversations-list .conversation > div { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.conversations-list .conversation .conversation--user { font-size: 13px; line-height: 1.25; }
.conversations-list .conversation p, .conversations-list .conversation span { line-height: 1.3; }
.conversations-list .conversation .h-6.leading-6 { height: 1.25rem !important; line-height: 1.25rem !important; }
.conversations-list .conversation h4.pt-0\.5 { padding-top: 0 !important; }
.conversations-list .conversation .label-wrap, .conversations-list .conversation [class*="label"] { margin-top: 2px; }

/* Radonix custom panels in dark mode */
.dark #rx-edit-dialog > div { background: #1c1f26 !important; color: #e5e7eb !important; box-shadow: 0 20px 60px rgba(0,0,0,.6) !important; }
.dark #rx-edit-dialog textarea { border-color: #3a4150 !important; }
.dark #rx-edit-dialog button { filter: brightness(.9); }
.dark .rx-tools { background: rgba(28,31,38,.98); border-color: #3a4150; }
.dark .rx-tools button:hover { background: #2a2f3a; }
.dark .rx-draft-edit { background: #2a2f3a; color: #e5e7eb; }
.dark .rx-draft-edit:hover { background: #343a47; }
.dark #rx-fwd-modal .box { background: #1c1f26; color: #e5e7eb; }
.dark #rx-fwd-modal .hd, .dark #rx-fwd-modal .ft { border-color: #2a2f3a; }
.dark #rx-fwd-modal input { background: #15171c; border-color: #3a4150; color: #e5e7eb; }
.dark #rx-fwd-modal input:focus { border-color: var(--rx-accent); box-shadow: 0 0 0 3px var(--rx-accent-soft); background: #15171c; }
.dark #rx-fwd-modal .row:hover, .dark #rx-fwd-modal .row.on { background: #1e3a8a33; }
.dark #rx-fwd-modal .row .tag, .dark #rx-fwd-modal .btns .cancel { background: #2a2f3a; color: #e5e7eb; }
.dark #rx-fwd-modal .chip { background: #1e3a8a55; }
.dark #rx-pdf-modal .box { background: #1c1f26; color: #e5e7eb; }
.dark #rx-pdf-modal .hd { border-color: #2a2f3a; }
.dark #rx-pdf-modal .hd a, .dark #rx-pdf-modal .hd button { background: #2a2f3a; color: #e5e7eb; }
.dark #rx-pdf-modal .hd a:hover, .dark #rx-pdf-modal .hd button:hover { background: #343a47; }
.dark .rx-pdf-thumb { background: #1c1f26; border-color: #3a4150; }
.dark .rx-pdf-thumb .rx-pdf-img { background: #15171c; }
.dark .rx-pdf-thumb .rx-pdf-cap { border-color: #2a2f3a; color: #e5e7eb; }
.dark .rx-fsize { color: #9ca3af; }

/* Accent for our own primary buttons */
.rx-draft-send, #rx-fwd-modal .btns .send { background: var(--rx-accent) !important; }
.rx-draft-send:hover, #rx-fwd-modal .btns .send:hover { background: var(--rx-accent-strong) !important; }
#rx-fwd-modal input:focus { border-color: var(--rx-accent); box-shadow: 0 0 0 3px var(--rx-accent-soft); }
#rx-fwd-modal .row.on, #rx-fwd-modal .chip { background: var(--rx-accent-soft); }
.rx-ctm-row:hover, .rx-ctm-row.on { background: var(--rx-accent-soft) !important; }
#rx-aip .it:hover, #rx-aip .it.on { background: var(--rx-accent-soft); }
#rx-aip .it.on .d { color: var(--rx-accent-strong); }

/* ── RTL & typography (Mert 2026-10-01) ─────────────────────────────────────────────────
   Vazirmatn (variable, self-hosted) is used ONLY for Arabic-script glyphs via unicode-range, so
   Latin text keeps Inter. Persian needs more leading; mixed-direction lines take their direction
   from their own first strong character (unicode-bidi: plaintext), also in the conversation list. */
@font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
body, .font-sans, input, textarea, button, select, .ProseMirror, .message-bubble-container, .conversations-list, .rx-fwd-modal, #rx-fwd-modal, #rx-edit-dialog, #rx-aip {
  font-family: Vazirmatn, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Tahoma, Arial, sans-serif; }
/* Persian/Arabic glyphs sit lower and need more leading: slightly taller lines in bubbles and the composer */
.message-bubble-container p, .message-bubble-container li, .message-bubble-container blockquote, .ProseMirror p, .ProseMirror li { line-height: 1.65; }
/* Mixed-direction text everywhere it is shown: bubbles, composer, list previews, contact panel */
.conversations-list .conversation h4, .conversations-list .conversation p, .conversations-list .conversation .text-ellipsis,
[class*="contact--details"] p, [class*="contact-info"] p, .rx-fwd-modal .row span, #rx-fwd-modal .row span, #rx-edit-dialog textarea { unicode-bidi: plaintext; text-align: start; }
/* Numbers: tabular digits where they line up (times, counters), Persian digits rendered by the font itself */
.conversations-list .conversation span, [class*="time"], time, .rx-pdf-cap, .rx-fsize { font-variant-numeric: tabular-nums; }
/* Lists inside RTL bubbles keep their markers on the correct side */
.message-bubble-container ul, .message-bubble-container ol { unicode-bidi: plaintext; padding-inline-start: 1.4em; }

/* Private notes that carry only an attachment (voice recording, file, image) — Chatwoot adds bg-transparent to
   attachment bubbles, which hides the amber "this is a private note" background. Mert 2026-10-10: keep it amber. */
.message-bubble-container .bg-n-solid-amber.bg-transparent {
  background-color: rgb(var(--solid-amber)) !important;
  padding: 0.5rem 0.75rem;
}

/* generated accent overrides from dashboard-X_QtlIIg.css */
html .border-n-brand{--tw-border-opacity: 1;border-color:#0d9488}
html .border-n-brand{border-color:rgb(13 148 136 / var(--tw-border-opacity, 1))}
html .border-n-brand\/50{border-color:#0d948880}
html .border-t-n-brand{--tw-border-opacity: 1;border-top-color:#0d9488}
html .border-t-n-brand{border-top-color:rgb(13 148 136 / var(--tw-border-opacity, 1))}
html .bg-n-brand{--tw-bg-opacity: 1;background-color:#0d9488}
html .bg-n-brand{background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}
html .bg-n-brand\/10{background-color:#0d94881a}
html .bg-n-brand\/20{background-color:#0d948833}
html .bg-n-brand\/5{background-color:#0d94880d}
html .from-n-brand\/15{--tw-gradient-from: rgb(13 148 136 / .15) var(--tw-gradient-from-position);--tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
html .text-n-brand{--tw-text-opacity: 1;color:#0d9488}
html .text-n-brand{color:rgb(13 148 136 / var(--tw-text-opacity, 1))}
html .\!outline-n-brand{outline-color:#0d9488!important}
html .outline-n-brand{outline-color:#0d9488}
html .ring-n-brand{--tw-ring-opacity: 1;--tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity, 1))}
html .before\:\!border-t-n-brand:before{content:var(--tw-content);--tw-border-opacity: 1 !important;border-top-color:#0d9488!important}
html .before\:\!border-t-n-brand:before{border-top-color:rgb(13 148 136 / var(--tw-border-opacity, 1))!important}
html .before\:bg-n-brand:before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:#0d9488}
html .before\:bg-n-brand:before{background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}
html .after\:bg-n-brand:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:#0d9488}
html .after\:bg-n-brand:after{background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}
html .checked\:border-n-brand:checked{--tw-border-opacity: 1;border-color:#0d9488}
html .checked\:border-n-brand:checked{border-color:rgb(13 148 136 / var(--tw-border-opacity, 1))}
html .checked\:bg-n-brand:checked{--tw-bg-opacity: 1;background-color:#0d9488}
html .checked\:bg-n-brand:checked{background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}
html .indeterminate\:border-n-brand:indeterminate{--tw-border-opacity: 1;border-color:#0d9488}
html .indeterminate\:border-n-brand:indeterminate{border-color:rgb(13 148 136 / var(--tw-border-opacity, 1))}
html .indeterminate\:bg-n-brand:indeterminate{--tw-bg-opacity: 1;background-color:#0d9488}
html .indeterminate\:bg-n-brand:indeterminate{background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}
html .focus-within\:outline-n-brand:focus-within{outline-color:#0d9488}
html .focus-within\:ring-n-brand:focus-within{--tw-ring-opacity: 1;--tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity, 1))}
html .hover\:bg-n-brand\/10:hover{background-color:#0d94881a}
html .hover\:bg-n-brand\/80:hover{background-color:#0d9488cc}
html .hover\:text-n-brand:hover{--tw-text-opacity: 1;color:#0d9488}
html .hover\:text-n-brand:hover{color:rgb(13 148 136 / var(--tw-text-opacity, 1))}
html .focus\:border-n-brand:focus{--tw-border-opacity: 1;border-color:#0d9488}
html .focus\:border-n-brand:focus{border-color:rgb(13 148 136 / var(--tw-border-opacity, 1))}
html .focus\:outline-n-brand:focus{outline-color:#0d9488}
html .focus\:ring-n-brand:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity, 1))}
html .focus-visible\:bg-n-brand\/20:focus-visible{background-color:#0d948833}
html .focus-visible\:outline-n-brand:focus-visible{outline-color:#0d9488}
html .focus-visible\:ring-n-brand:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity, 1))}
html .hover\:enabled\:bg-n-brand\/20:enabled:hover{background-color:#0d948833}
html .group:focus-within .group-focus-within\:text-n-brand{--tw-text-opacity: 1;color:#0d9488}
html .group:focus-within .group-focus-within\:text-n-brand{color:rgb(13 148 136 / var(--tw-text-opacity, 1))}
html .group:hover .group-hover\:bg-n-brand{--tw-bg-opacity: 1;background-color:#0d9488}
html .group:hover .group-hover\:bg-n-brand{background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}
html .group:hover .group-hover\:text-n-brand{--tw-text-opacity: 1;color:#0d9488}
html .group:hover .group-hover\:text-n-brand{color:rgb(13 148 136 / var(--tw-text-opacity, 1))}
html .has-\[\:focus\]\:outline-n-brand:has(:focus){outline-color:#0d9488}
html .prose-strong\:text-n-brand :is(:where(strong):not(:where([class~=not-prose],[class~=not-prose] *))){--tw-text-opacity: 1;color:#0d9488}
html .prose-strong\:text-n-brand :is(:where(strong):not(:where([class~=not-prose],[class~=not-prose] *))){color:rgb(13 148 136 / var(--tw-text-opacity, 1))}
html .dark\:border-n-brand:is(.dark *){--tw-border-opacity: 1;border-color:#0d9488}
html .dark\:border-n-brand:is(.dark *){border-color:rgb(13 148 136 / var(--tw-border-opacity, 1))}
html .dark\:bg-n-brand\/10:is(.dark *){background-color:#0d94881a}
html .dark\:\!outline-n-brand:is(.dark *){outline-color:#0d9488!important}
html .dark\:ring-n-brand:is(.dark *){--tw-ring-opacity: 1;--tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity, 1))}
html .dark\:checked\:border-n-brand:checked:is(.dark *){--tw-border-opacity: 1;border-color:#0d9488}
html .dark\:checked\:border-n-brand:checked:is(.dark *){border-color:rgb(13 148 136 / var(--tw-border-opacity, 1))}
html .dark\:checked\:bg-n-brand:checked:is(.dark *){--tw-bg-opacity: 1;background-color:#0d9488}
html .dark\:checked\:bg-n-brand:checked:is(.dark *){background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}
html .dark\:focus-within\:outline-n-brand:focus-within:is(.dark *){outline-color:#0d9488}
html .dark\:hover\:text-n-brand:hover:is(.dark *){--tw-text-opacity: 1;color:#0d9488}
html .dark\:hover\:text-n-brand:hover:is(.dark *){color:rgb(13 148 136 / var(--tw-text-opacity, 1))}
html .dark\:focus\:outline-n-brand:focus:is(.dark *){outline-color:#0d9488}
html .dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *){outline-color:#0d9488}