@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700&display=swap');
/* Fix 9 theme for Chatwoot (generated by build-theme.js from Sarrdeh's theme).
   Loaded after the app stylesheet from /brand/brand.css.

   1. Tokens          Sarrdeh tokens, then Chatwoot's colour scales mapped onto them
   2. Base            canvas, type, focus, scrollbars
   3. Shell           the four floating panels
   4. Sidebar         global navigation
   5. Inbox list      header, filters, conversation cards
   6. Conversation    header, notice, canvas, bubbles, rich cards
   7. Composer        mode switch, editor, toolbar, send
   8. Contact panel   identity, key/value rows, accordions, labels
   9. Shared pieces   buttons, menus, tooltips, modals, empty states
   10. Responsive and motion

   Light is the default; dark applies when Chatwoot puts .dark on <body>
   (the inline script in the layout mirrors it onto <html> before first paint). */

/* ------------------------------------------------------------------ 1. Tokens */

:root {
  color-scheme: light;
  accent-color: #7b3f0a;

  --ink: #231e1a;
  --ink-soft: #564b43;
  --muted: #827871;
  --line: #e3deda;
  --line-soft: #f0edea;
  --paper: #faf9f8;
  --paper-2: #ffffff;
  --canvas: #f4f2f0;
  --teal: #7b3f0a;
  --teal-mid: #c0600c;
  --teal-soft: #f8eee5;
  --teal-wash: #fbf5ef;
  --teal-edge: rgba(123, 63, 10, 0.16);
  --danger-bg: #fff6f6;
  --danger-line: #efdada;
  --danger-ink: #8a3b3b;
  --warning-bg: #fffaf0;
  --warning-line: #eadfbe;
  --warning-ink: #84651f;
  --success-bg: #fbf5ef;
  --success-line: rgba(123, 63, 10, 0.18);
  --success-ink: #7b3f0a;
  --unread: #dc2626;
  --on-primary: #ffffff;
  --media-bg: #f7f5f4;
  --logo-ink: #ce7f3a;
  --overlay-ink: rgba(206, 127, 58, 0.09);
  --tooltip-bg: #231e1a;
  --tooltip-ink: #faf9f8;
  --focus-line: rgba(123, 63, 10, 0.42);
  --focus-ring: rgba(192, 96, 12, 0.12);

  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --radius-control: 10px;
  --radius-pill: 999px;

  --shadow-panel: 0 12px 36px rgba(35, 30, 26, 0.06);
  --shadow-card: 0 4px 16px rgba(35, 30, 26, 0.045);
  --shadow-floating: 0 18px 50px rgba(35, 30, 26, 0.08);

  --ease: 140ms ease;
  --font-ui: "LBC", "Segoe UI", Tahoma, Arial, sans-serif;

  /* Chatwoot scales, light */
  --brand: 123 63 10;

  --slate-1: 244 242 240;
  --slate-2: 250 249 248;
  --slate-3: 245 243 242;
  --slate-4: 240 237 234;
  --slate-5: 227 222 218;
  --slate-6: 210 204 200;
  --slate-7: 186 178 172;
  --slate-8: 161 152 145;
  --slate-9: 130 120 113;
  --slate-10: 130 120 113;
  --slate-11: 86 75 67;
  --slate-12: 35 30 26;

  --gray-1: 244 242 240;
  --gray-2: 250 249 248;
  --gray-3: 245 243 242;
  --gray-4: 240 237 234;
  --gray-5: 227 222 218;
  --gray-6: 210 204 200;
  --gray-7: 186 178 172;
  --gray-8: 161 152 145;
  --gray-9: 130 120 113;
  --gray-10: 130 120 113;
  --gray-11: 86 75 67;
  --gray-12: 35 30 26;

  --blue-1: 253 249 246;
  --blue-2: 251 245 239;
  --blue-3: 248 238 229;
  --blue-4: 243 223 206;
  --blue-5: 236 205 178;
  --blue-6: 227 182 142;
  --blue-7: 214 149 92;
  --blue-8: 176 103 39;
  --blue-9: 123 63 10;
  --blue-10: 109 55 8;
  --blue-11: 123 63 10;
  --blue-12: 63 33 8;

  --teal-1: 253 249 246;
  --teal-2: 251 245 239;
  --teal-3: 248 238 229;
  --teal-4: 243 223 206;
  --teal-5: 236 205 178;
  --teal-6: 227 182 142;
  --teal-7: 214 149 92;
  --teal-8: 176 103 39;
  --teal-9: 123 63 10;
  --teal-10: 109 55 8;
  --teal-11: 123 63 10;
  --teal-12: 63 33 8;

  --iris-1: 253 249 246;
  --iris-2: 251 245 239;
  --iris-3: 248 238 229;
  --iris-4: 243 223 206;
  --iris-5: 236 205 178;
  --iris-6: 227 182 142;
  --iris-7: 214 149 92;
  --iris-8: 176 103 39;
  --iris-9: 123 63 10;
  --iris-10: 109 55 8;
  --iris-11: 123 63 10;
  --iris-12: 63 33 8;

  --violet-1: 253 249 246;
  --violet-2: 251 245 239;
  --violet-3: 248 238 229;
  --violet-4: 243 223 206;
  --violet-5: 236 205 178;
  --violet-6: 227 182 142;
  --violet-7: 214 149 92;
  --violet-8: 176 103 39;
  --violet-9: 123 63 10;
  --violet-10: 109 55 8;
  --violet-11: 123 63 10;
  --violet-12: 63 33 8;

  --ruby-1: 255 252 252;
  --ruby-2: 255 246 246;
  --ruby-3: 253 238 238;
  --ruby-4: 250 226 226;
  --ruby-5: 239 218 218;
  --ruby-6: 233 196 196;
  --ruby-7: 222 166 166;
  --ruby-8: 206 124 126;
  --ruby-9: 220 38 38;
  --ruby-10: 196 32 32;
  --ruby-11: 176 52 52;
  --ruby-12: 138 59 59;

  --amber-1: 255 253 248;
  --amber-2: 255 250 240;
  --amber-3: 252 244 222;
  --amber-4: 246 236 204;
  --amber-5: 234 223 190;
  --amber-6: 226 208 160;
  --amber-7: 212 186 122;
  --amber-8: 196 162 80;
  --amber-9: 204 148 34;
  --amber-10: 184 130 24;
  --amber-11: 132 101 31;
  --amber-12: 96 72 18;

  --background-color: 244 242 240;
  --surface-1: 255 255 255;
  --surface-2: 250 249 248;
  --surface-active: 251 245 239;
  --background-input-box: 35, 30, 26, 0.02;
  --text-blue: 123 63 10;
  --text-purple: 123 63 10;
  --text-amber: 132 101 31;
  --border-container: 240, 237, 234, 1;
  --border-strong: 227 222 218;
  --border-weak: 240 237 234;
  --border-blue-strong: 123 63 10;
  --solid-1: 255 255 255;
  --solid-2: 255 255 255;
  --solid-3: 250 249 248;
  --solid-active: 245 243 242;
  --solid-amber: 255 250 240;
  --solid-blue: 248 238 229;
  --solid-blue-2: 251 245 239;
  --solid-iris: 251 245 239;
  --solid-purple: 251 245 239;
  --solid-red: 253 238 238;
  --solid-amber-button: 246 236 204;
  --card-color: 255 255 255;
  --overlay: 35, 30, 26, 0.3;
  --overlay-avatar: 255, 255, 255, 0.6;
  --button-color: 255 255 255;
  --button-hover-color: 35, 30, 26, 0.04;
  --label-background: 250 249 248;
  --label-border: 35, 30, 26, 0.08;
  --alpha-1: 35, 30, 26, 0.035;
  --alpha-2: 35, 30, 26, 0.06;
  --alpha-3: 255, 255, 255, 1;
  --black-alpha-1: 35, 30, 26, 0.06;
  --black-alpha-2: 35, 30, 26, 0.04;
  --border-blue: 123, 63, 10, 0.4;
  --white-alpha: 255, 255, 255, 0.8;
  --call-widget: 255, 255, 255, 0.98;
  --call-widget-border: 35, 30, 26, 0.08;
  --call-widget-text: 35, 30, 26, 1;
  --call-widget-sub-text: 130, 120, 113, 1;

  /* Fix 9 light: warm white and near-black, deep orange (#A8480C) for links and filled buttons so
     white text stays readable; the rim-light orange (#EE7A22) for focus; near-black logo. */
  accent-color: #A8480C;
  --teal: #A8480C;
  --teal-mid: #b9530f;
  --teal-soft: #fdeee1;
  --teal-wash: #fef7f0;
  --teal-edge: rgba(238, 122, 34, 0.22);
  --muted: #6b625b;
  --success-bg: #edf7f0;
  --success-line: rgba(35, 122, 59, 0.2);
  --success-ink: #237a3b;
  --unread: #C2410C;
  --on-primary: #ffffff;
  --logo-ink: #0E0A07;
  --overlay-ink: rgba(14, 10, 7, 0.06);
  --focus-line: rgba(238, 122, 34, 0.55);
  --focus-ring: rgba(238, 122, 34, 0.18);
  --font-ui: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  /* Profile circles (components-next/avatar/Avatar.vue reads these). */
  --avatar-bg: #f7e6d3;
  --avatar-text: #6e3208;
  --avatar-default-bg: #f1eeeb;
  --avatar-default-text: #6b625b;
  --brand: 168 72 12;
  --blue-8: 238 122 34;
  --blue-9: 168 72 12;
  --blue-10: 140 60 10;
  --blue-11: 168 72 12;
  --teal-8: 238 122 34;
  --teal-9: 168 72 12;
  --teal-10: 140 60 10;
  --teal-11: 168 72 12;
  --iris-8: 238 122 34;
  --iris-9: 168 72 12;
  --iris-10: 140 60 10;
  --iris-11: 168 72 12;
  --violet-8: 238 122 34;
  --violet-9: 168 72 12;
  --violet-10: 140 60 10;
  --violet-11: 168 72 12;
  --text-blue: 168 72 12;
  --text-purple: 168 72 12;
  --border-blue-strong: 168 72 12;
}

html.dark,
body.dark {
  color-scheme: dark;
  accent-color: #d17b30;

  --ink: #e1d9d3;
  --ink-soft: #b9b1ab;
  --muted: #8d8279;
  --line: #39302a;
  --line-soft: #2b241e;
  --paper: #181411;
  --paper-2: #1e1915;
  --canvas: #110e0c;
  --teal: #d17b30;
  --teal-mid: #dc7a25;
  --teal-soft: #412710;
  --teal-wash: #321e0c;
  --teal-edge: rgba(209, 123, 48, 0.2);
  --danger-bg: #311d20;
  --danger-line: #573034;
  --danger-ink: #e9a2a8;
  --warning-bg: #2a2416;
  --warning-line: #4a3f22;
  --warning-ink: #e0c684;
  --success-bg: #321e0c;
  --success-line: rgba(209, 123, 48, 0.22);
  --success-ink: #d17b30;
  --unread: #e5484d;
  --on-primary: #221305;
  --media-bg: #16120f;
  --logo-ink: #ffffff;
  --overlay-ink: rgba(255, 255, 255, 0.045);
  --tooltip-bg: #e1d9d3;
  --tooltip-ink: #211b17;
  --focus-line: rgba(209, 123, 48, 0.5);
  --focus-ring: rgba(220, 122, 37, 0.14);

  --shadow-panel: 0 12px 36px rgba(0, 0, 0, 0.16);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-floating: 0 18px 50px rgba(0, 0, 0, 0.32);

  /* Chatwoot scales, dark */
  --brand: 209 123 48;

  --slate-1: 17 14 12;
  --slate-2: 24 20 17;
  --slate-3: 30 25 21;
  --slate-4: 43 36 30;
  --slate-5: 57 48 42;
  --slate-6: 70 61 53;
  --slate-7: 94 83 76;
  --slate-8: 117 107 99;
  --slate-9: 141 130 121;
  --slate-10: 141 130 121;
  --slate-11: 185 177 171;
  --slate-12: 225 217 211;

  --gray-1: 17 14 12;
  --gray-2: 24 20 17;
  --gray-3: 30 25 21;
  --gray-4: 43 36 30;
  --gray-5: 57 48 42;
  --gray-6: 70 61 53;
  --gray-7: 94 83 76;
  --gray-8: 117 107 99;
  --gray-9: 141 130 121;
  --gray-10: 141 130 121;
  --gray-11: 185 177 171;
  --gray-12: 225 217 211;

  --blue-1: 20 17 14;
  --blue-2: 50 30 12;
  --blue-3: 65 39 16;
  --blue-4: 78 47 20;
  --blue-5: 94 57 24;
  --blue-6: 112 67 28;
  --blue-7: 136 82 34;
  --blue-8: 166 98 39;
  --blue-9: 209 123 48;
  --blue-10: 220 122 37;
  --blue-11: 226 152 88;
  --blue-12: 248 229 212;

  --teal-1: 20 17 14;
  --teal-2: 50 30 12;
  --teal-3: 65 39 16;
  --teal-4: 78 47 20;
  --teal-5: 94 57 24;
  --teal-6: 112 67 28;
  --teal-7: 136 82 34;
  --teal-8: 166 98 39;
  --teal-9: 209 123 48;
  --teal-10: 220 122 37;
  --teal-11: 226 152 88;
  --teal-12: 248 229 212;

  --iris-1: 20 17 14;
  --iris-2: 50 30 12;
  --iris-3: 65 39 16;
  --iris-4: 78 47 20;
  --iris-5: 94 57 24;
  --iris-6: 112 67 28;
  --iris-7: 136 82 34;
  --iris-8: 166 98 39;
  --iris-9: 209 123 48;
  --iris-10: 220 122 37;
  --iris-11: 226 152 88;
  --iris-12: 248 229 212;

  --violet-1: 20 17 14;
  --violet-2: 50 30 12;
  --violet-3: 65 39 16;
  --violet-4: 78 47 20;
  --violet-5: 94 57 24;
  --violet-6: 112 67 28;
  --violet-7: 136 82 34;
  --violet-8: 166 98 39;
  --violet-9: 209 123 48;
  --violet-10: 220 122 37;
  --violet-11: 226 152 88;
  --violet-12: 248 229 212;

  --ruby-1: 25 17 19;
  --ruby-2: 38 23 26;
  --ruby-3: 49 29 32;
  --ruby-4: 66 36 40;
  --ruby-5: 87 48 52;
  --ruby-6: 105 58 63;
  --ruby-7: 136 72 80;
  --ruby-8: 179 90 100;
  --ruby-9: 229 72 77;
  --ruby-10: 236 93 94;
  --ruby-11: 233 162 168;
  --ruby-12: 250 220 224;

  --amber-1: 22 19 12;
  --amber-2: 30 26 16;
  --amber-3: 42 36 22;
  --amber-4: 58 48 26;
  --amber-5: 74 63 34;
  --amber-6: 96 80 40;
  --amber-7: 124 102 50;
  --amber-8: 160 130 62;
  --amber-9: 226 176 76;
  --amber-10: 236 190 96;
  --amber-11: 224 198 132;
  --amber-12: 245 230 196;

  --background-color: 17 14 12;
  --surface-1: 24 20 17;
  --surface-2: 30 25 21;
  --surface-active: 50 30 12;
  --background-input-box: 255, 255, 255, 0.03;
  --text-blue: 226 152 88;
  --text-purple: 226 152 88;
  --text-amber: 224 198 132;
  --border-container: 43, 36, 30, 1;
  --border-strong: 57 48 42;
  --border-weak: 43 36 30;
  --border-blue-strong: 209 123 48;
  --solid-1: 24 20 17;
  --solid-2: 30 25 21;
  --solid-3: 36 30 25;
  --solid-active: 43 36 30;
  --solid-amber: 42 36 22;
  --solid-blue: 65 39 16;
  --solid-blue-2: 50 30 12;
  --solid-iris: 50 30 12;
  --solid-purple: 50 30 12;
  --solid-red: 49 29 32;
  --solid-amber-button: 74 63 34;
  --card-color: 30 25 21;
  --overlay: 10, 6, 2, 0.6;
  --overlay-avatar: 17, 14, 12, 0.55;
  --button-color: 30 25 21;
  --button-hover-color: 255, 255, 255, 0.06;
  --label-background: 30 25 21;
  --label-border: 255, 255, 255, 0.08;
  --alpha-1: 255, 255, 255, 0.04;
  --alpha-2: 255, 255, 255, 0.07;
  --alpha-3: 30, 25, 21, 1;
  --black-alpha-1: 0, 0, 0, 0.3;
  --black-alpha-2: 0, 0, 0, 0.18;
  --border-blue: 209, 123, 48, 0.5;
  --white-alpha: 255, 255, 255, 0.08;
  --call-widget: 30, 25, 21, 0.98;
  --call-widget-border: 255, 255, 255, 0.1;
  --call-widget-text: 225, 217, 211, 1;
  --call-widget-sub-text: 141, 130, 121, 1;

  /* Fix 9 dark (the default): warm near-black surfaces like the posts, amber accent (the logo leaf
     and price numerals) with near-black text on filled buttons. */
  accent-color: #F5A84E;
  --teal: #F5A84E;
  --teal-mid: #F8C07E;
  --teal-soft: #3a2614;
  --teal-wash: #24180e;
  --teal-edge: rgba(245, 168, 78, 0.25);
  --success-bg: #12261b;
  --success-line: rgba(91, 192, 122, 0.25);
  --success-ink: #5bc07a;
  --unread: #C2410C;
  --on-primary: #0E0A07;
  --logo-ink: #ffffff;
  --focus-line: rgba(245, 168, 78, 0.55);
  --focus-ring: rgba(245, 168, 78, 0.16);
  --font-ui: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  --avatar-dark-bg: #3a2614;
  --avatar-dark-text: #F8C07E;
  --brand: 245 168 78;
  --blue-9: 245 168 78;
  --blue-10: 248 192 126;
  --blue-11: 248 192 126;
  --blue-12: 253 232 205;
  --teal-9: 245 168 78;
  --teal-10: 248 192 126;
  --teal-11: 248 192 126;
  --teal-12: 253 232 205;
  --iris-9: 245 168 78;
  --iris-10: 248 192 126;
  --iris-11: 248 192 126;
  --iris-12: 253 232 205;
  --violet-9: 245 168 78;
  --violet-10: 248 192 126;
  --violet-11: 248 192 126;
  --violet-12: 253 232 205;
  --text-blue: 248 192 126;
  --text-purple: 248 192 126;
  --border-blue-strong: 245 168 78;
}

/* -------------------------------------------------------------------- 2. Base */

html,
body,
#app {
  font-family: var(--font-ui) !important;
  color: var(--ink);
}

html,
body {
  background: #f4f2f0;
}

html.dark,
html.dark body,
body.dark {
  background: #12100e;
}

#app {
  background: transparent !important;
}

::selection {
  background: rgba(192, 96, 12, 0.24);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #d3cdc8 transparent;
}
body.dark * {
  scrollbar-color: #453e38 transparent;
}

a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--focus-line);
  outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea,
select {
  border-radius: var(--radius-control);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
textarea:focus,
select:focus {
  outline-color: var(--focus-line);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

p a,
.text-n-brand {
  color: var(--teal);
}

/* Solid teal fills carry dark text in dark mode, where the teal is light. */
body.dark .bg-n-brand.text-white,
body.dark .bg-n-brand > .text-white {
  color: var(--on-primary);
}

/* ------------------------------------------------------------------- 3. Shell */

#app > .flex.flex-grow {
  background: transparent !important;
}

@media (min-width: 768px) {
  #app > .flex.flex-grow {
    padding: 10px;
    gap: 10px;
  }

  #app > .flex.flex-grow > aside,
  #app > .flex.flex-grow > main {
    border: 1px solid var(--line-soft) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
  }

  /* Conversation routes: the list, thread and contact panel float separately,
     so the surrounding <main> gives up its own surface. */
  #app > .flex.flex-grow > main:has(> section.flex.w-full.h-full) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  main > section.flex.w-full.h-full {
    gap: 10px;
  }

  main > section.flex.w-full.h-full > .conversations-list-wrap,
  main > section.flex.w-full.h-full > .conversation-details-wrap,
  main > section.flex.w-full.h-full > div.max-w-sm {
    border: 1px solid var(--line-soft) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
  }

  main > section.flex.w-full.h-full > div.max-w-sm {
    overflow: hidden;
  }

  .conversations-list-wrap:not(.basis-full) {
    width: 360px;
  }
  .conversations-list {
    border-end-start-radius: 17px;
    border-end-end-radius: 17px;
  }
}

@media (min-width: 1536px) {
  .conversations-list-wrap:not(.basis-full) {
    width: 384px;
  }
  main > section.flex.w-full.h-full > div.max-w-sm {
    width: 340px;
    min-width: 340px;
  }
}

#app > .flex.flex-grow > aside,
#app > .flex.flex-grow > main {
  background: var(--paper-2) !important;
}

.conversations-list-wrap,
main > section.flex.w-full.h-full > div.max-w-sm {
  background: var(--paper-2) !important;
}

.conversation-details-wrap {
  background: var(--paper) !important;
}

/* ----------------------------------------------------------------- 4. Sidebar */

@media (min-width: 768px) {
  aside:has(.sd-logo-tile) {
    min-width: 224px;
    max-width: 248px;
  }
}

aside:has(.sd-logo-tile) > section.grid > div.flex {
  padding-inline: 12px;
}
aside:has(.sd-logo-tile) > nav {
  padding-inline: 10px;
}

/* Full Sarrdeh logo, tinted per theme through a mask. */
.sd-logo-tile {
  width: 40px;
  height: 72px;
  background: var(--logo-ink);
  -webkit-mask: url(/brand/sarrdeh-logo.svg?v=fix9c) center / contain no-repeat;
  mask: url(/brand/sarrdeh-logo.svg?v=fix9c) center / contain no-repeat;
}
.sd-logo {
  display: none;
}

#sidebar-account-switcher {
  height: 36px;
  border-radius: var(--radius-control);
}
#sidebar-account-switcher > span:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.sd-theme-toggle {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink-soft);
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.sd-theme-toggle:hover {
  background: var(--teal-wash);
  border-color: var(--teal-edge);
  color: var(--teal);
}

.sd-search {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper-2);
  font-size: 12.5px;
  color: var(--muted);
}
.sd-search:hover,
.sd-search:focus-visible {
  border-color: var(--focus-line);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

.sd-nav-item {
  border-radius: var(--radius-control);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--ease), color var(--ease);
}
.sd-nav-item .truncate,
.sd-nav-item .text-sm,
.sd-nav-item .text-body-main {
  font-size: 13px;
}
.sd-nav-item [class^="i-"],
.sd-nav-item [class*=" i-"] {
  color: var(--muted);
  transition: color var(--ease);
}
.sd-nav-item:hover {
  background: var(--teal-wash);
  color: var(--ink);
}
.sd-nav-item--parent {
  color: var(--ink);
  font-weight: 600;
}
.sd-nav-item--active,
.sd-nav-item--active:hover {
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 600;
}
.sd-nav-item--active [class^="i-"],
.sd-nav-item--active [class*=" i-"] {
  color: var(--teal);
}

.sd-nav-leaf {
  padding-inline-start: 26px;
}
aside nav li li li.sd-nav-leaf {
  padding-inline-start: 6px;
}

.sd-nav-heading {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
:lang(ar) .sd-nav-heading {
  letter-spacing: 0;
}

/* Flat grouped navigation: no connector lines. */
aside nav [class*="before:"]::before,
aside nav [class*="after:"]::after {
  content: none !important;
}

.sd-count {
  background: var(--unread);
  color: #ffffff;
}

aside > section:last-of-type > .pointer-events-none {
  display: none;
}
aside > section:last-of-type > div.border-t {
  box-shadow: none;
  padding: 8px;
}

/* Under Conversations keep "All conversations" and the channel list only. */
aside nav > ul > li:has(a[href$="/dashboard"]) > ul > li:has(> a[href$="/mentions/conversations"]),
aside nav > ul > li:has(a[href$="/dashboard"]) > ul > li:has(> a[href$="/participating/conversations"]),
aside nav > ul > li:has(a[href$="/dashboard"]) > ul > li:has(> a[href$="/unattended/conversations"]),
aside nav > ul > li:has(a[href$="/dashboard"]) > ul > li.group\/sidebar-section:not(:has(a[href*="/inbox/"])) {
  display: none !important;
}
aside div.fixed.z-\[100\] ul > li:nth-child(n+2):nth-child(-n+4):not(:has(ul)) {
  display: none !important;
}

/* -------------------------------------------------------------- 5. Inbox list */

.sd-panel-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.sd-channel-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-inline-end: 8px;
  border-radius: 6px;
  object-fit: contain;
}

.sd-tabs {
  align-items: center;
  margin-bottom: 4px;
}
.sd-tab {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background-color var(--ease), color var(--ease);
}
.sd-tab:hover {
  background: var(--teal-wash);
}
.sd-tab--active,
.sd-tab--active:hover {
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 600;
}

.conversation {
  margin: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--ease), border-color var(--ease);
}
.conversation > div.flex-1 {
  padding-block: 10px;
}
.conversation:hover {
  background: var(--paper);
  border-color: var(--line-soft);
}
.conversation.active,
.conversation.active:hover {
  background: var(--teal-wash);
  border-color: var(--teal-edge);
}
.conversation.selected {
  background: var(--teal-wash);
}
.conversation--compact {
  margin-inline: 4px;
  padding-inline: 8px;
}

.conversation .conversation--user {
  font-size: 13.5px;
  color: var(--ink);
}
.conversation .conversation--user ~ .leading-6 {
  font-size: 12.5px;
  line-height: 1.5rem;
  color: var(--ink-soft);
}
.conversation.unread .conversation--user ~ .leading-6 {
  color: var(--ink);
}
.conversation .leading-4.text-xxs {
  font-size: 10.5px;
  color: var(--muted);
}

.sd-unread {
  background: var(--unread);
  color: #ffffff;
}

.conversations-list-wrap > p.flex.justify-center {
  margin: 12px;
  padding: 20px 16px;
  border: 1px dashed var(--teal-edge);
  border-radius: var(--radius-sm);
  background: var(--teal-wash);
  color: var(--ink-soft);
  font-size: 12.5px;
  text-align: center;
}

/* ------------------------------------------------------------ 6. Conversation */

.sd-conversation-header {
  background: var(--paper-2);
}
@media (min-width: 768px) {
  .sd-conversation-header {
    border-start-start-radius: 17px;
    border-start-end-radius: 17px;
  }
}

.sd-contact-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.conversation--header--actions {
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.conversation--header--actions .text-label-small,
.conversation--header--actions .text-n-slate-11 {
  color: var(--muted);
}

/* Status control: a quiet secondary control, not a call to action. */
.resolve-actions > .shadow {
  box-shadow: none;
  border-radius: var(--radius-control);
  outline-color: var(--line) !important;
  background: var(--paper-2);
}
.resolve-actions > .shadow button {
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* Reply restriction and other inline alerts */
.banner.alert {
  background: var(--danger-bg) !important;
  color: var(--danger-ink) !important;
  border-block-end: 1px solid var(--danger-line);
}
.banner.alert a {
  color: inherit !important;
  font-weight: 600;
  margin-inline-start: 4px;
}
.banner.warning {
  background: var(--warning-bg) !important;
  color: var(--warning-ink) !important;
  border-block-end: 1px solid var(--warning-line);
}
.banner.warning a {
  color: inherit !important;
}
.banner .banner-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-inline-end: 8px;
}
.banner.sd-notice {
  height: auto !important;
  min-height: 0;
  margin: 8px 12px 0;
  padding: 8px 12px !important;
  justify-content: flex-start !important;
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-control);
  font-size: 12px;
  line-height: 1.45;
}

/* Message canvas */
.conversation-panel {
  background: transparent !important;
  padding-inline: 22px !important;
}
.conversation-details-wrap .bg-n-surface-1 {
  background-color: transparent;
}

.message-bubble-container {
  margin-bottom: 14px;
}
.message-bubble-container.group-with-next {
  margin-bottom: 4px;
}

.sd-bubble {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.55;
}
.sd-bubble--in {
  background: var(--paper-2);
  border-color: var(--line-soft);
}
.sd-bubble--out {
  background: var(--teal-soft);
  border-color: var(--teal-edge);
}
.sd-bubble--note {
  background: var(--warning-bg);
  border-color: var(--warning-line);
  color: var(--ink);
}
.sd-bubble-meta--note {
  color: var(--warning-ink);
}
.sd-bubble .prose,
.sd-bubble .prose p {
  unicode-bidi: plaintext;
}

.sd-quote {
  border-inline-start: 3px solid var(--teal-mid);
  border-radius: 8px;
  background: var(--teal-wash);
}

/* Rich social card: header, media, footer */
.sd-social-card,
.sd-social-card.sd-bubble {
  width: 380px;
  max-width: min(420px, 100%);
  padding: 0;
  background: var(--paper-2);
  border-color: var(--line-soft);
  border-radius: 16px !important;
  box-shadow: var(--shadow-card);
}
.sd-social-card__header {
  padding: 12px 14px 10px;
}
.sd-social-card__source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.sd-social-card__context {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.sd-social-card__text {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--ink);
  unicode-bidi: plaintext;
}
.sd-social-card__media {
  display: grid;
  place-items: center;
  min-height: 160px;
  background: var(--media-bg);
  border-block: 1px solid var(--line-soft);
}
.sd-social-card__media img,
.sd-social-card__media video {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: contain;
}
.sd-social-card__missing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  font-size: 12px;
}
.sd-social-card > :last-child:not(.sd-social-card__media) {
  margin: 0;
  padding: 8px 14px 10px;
}
.sd-social-card > .sd-quote {
  margin: 10px 12px 0;
}
.sd-social-card > .sd-social-card__media:last-child {
  border-block-end: 0;
}

/* Image and video attachments */
[data-bubble-name="image"] .rounded-lg,
[data-bubble-name="video"] .rounded-lg {
  background: var(--media-bg);
  border-radius: var(--radius-sm);
}
[data-bubble-name="image"] img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------- 7. Composer */

div.reply-box {
  margin: 0 12px 12px !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--paper-2) !important;
  box-shadow: var(--shadow-card);
  transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease);
}
div.reply-box.is-focused {
  border-color: var(--focus-line) !important;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
div.reply-box.is-private {
  background: var(--teal-wash) !important;
  border-color: var(--success-line) !important;
}
.reply-box .ProseMirror,
.reply-box textarea {
  font-size: 13.5px;
  line-height: 1.55;
  box-shadow: none !important;
  outline: none !important;
}
.reply-box .ProseMirror p.is-editor-empty:first-child::before,
.reply-box [data-placeholder]::before {
  color: var(--muted) !important;
}

.sd-mode-toggle {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  background: var(--paper);
}
.sd-mode {
  height: 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--ease);
}
.sd-mode--active {
  color: var(--teal);
  font-weight: 600;
}
.sd-mode--locked {
  opacity: 0.6;
}
.sd-mode-chip {
  border-radius: 7px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-edge);
}

.reply-box button {
  border-radius: var(--radius-control);
}
.sd-composer-hint {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--muted);
}
@media (min-width: 1280px) {
  .sd-composer-hint {
    display: block;
  }
}
button.sd-send {
  height: 36px;
  padding-inline: 14px;
  border-radius: var(--radius-control);
  background: linear-gradient(135deg, var(--teal), var(--teal-mid)) !important;
  color: var(--on-primary) !important;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}
button.sd-send:disabled {
  /* Readable while there is nothing to send yet. */
  opacity: 0.72;
  filter: saturate(0.55);
}

/* ----------------------------------------------------------- 8. Contact panel */

.sd-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}
.sd-contact__avatar {
  grid-row: span 2;
}
.sd-contact__avatar:empty {
  display: none;
}
.sd-contact__body {
  display: contents;
}
.sd-contact__body > * {
  grid-column: 1 / -1;
}
.sd-contact__body > .sd-contact__name,
.sd-contact__body > .sd-contact__platform {
  grid-column: 2;
}
.sd-contact__platform {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}
.sd-contact__description {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.sd-contact__actions {
  grid-column: 1 / -1;
  margin-top: 12px;
}
.sd-contact__actions button {
  border-radius: var(--radius-control);
}

.sd-kv {
  margin-top: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  overflow: hidden;
}
.sd-kv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 4px 10px;
  border-block-end: 1px solid var(--line-soft);
}
.sd-kv-row:nth-child(even) {
  background: color-mix(in srgb, var(--teal-wash) 45%, transparent);
}
.sd-kv > :last-child {
  border-block-end: 0;
}
.sd-kv > :not(.sd-kv-row):not(:empty) {
  padding: 8px 10px;
}
.sd-kv-label {
  flex: 0 0 72px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.sd-kv-value {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
}
.sd-kv-empty {
  color: var(--muted);
}

.sd-accordion {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--paper-2);
}
.sd-accordion__header {
  border-radius: 13px;
  cursor: pointer;
  transition: background-color var(--ease);
}
.sd-accordion__header:hover {
  background: var(--paper);
}
.sd-accordion--open > .sd-accordion__header {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.sd-accordion__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.sd-accordion__chevron {
  color: var(--muted);
  transition: transform var(--ease);
}
.sd-accordion--open .sd-accordion__chevron {
  transform: rotate(180deg);
}
.sd-accordion__body {
  border-block-start: 1px solid var(--line-soft);
}

/* Labels as chips */
.label:not(.small) {
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
}
.label.small {
  border-radius: var(--radius-pill);
  padding-inline: 7px;
}
.sidebar-labels-wrap .label {
  background: var(--teal-soft);
  border-color: var(--teal-edge);
  color: var(--teal);
}
.sidebar-labels-wrap .label-wrap {
  gap: 4px;
  align-items: center;
}
.sidebar-labels-wrap .label-wrap > button {
  height: 24px;
  margin: 0;
  border-radius: var(--radius-pill) !important;
  background: var(--teal-wash);
  color: var(--teal);
  font-size: 11.5px;
  font-weight: 600;
}
.sidebar-labels-wrap .label {
  margin: 0;
}

/* ----------------------------------------------------------- 9. Shared pieces */

/* Menus and popovers: opaque raised surface, no blur. */
.n-dropdown-body,
.bg-n-alpha-3.backdrop-blur-\[100px\] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--paper-2) !important;
  border-color: var(--line-soft) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-floating) !important;
}

.tooltip {
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-ink);
  font-size: 11px;
  line-height: 1.35;
  box-shadow: none;
}

.modal-container {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg) !important;
  background: var(--paper-2) !important;
  box-shadow: var(--shadow-floating) !important;
}

/* Auth pages: the Sarrdeh wordmark is tall. */
img.h-8[src*="/brand/logo"] {
  height: 5.5rem;
}
img.m-4.w-32 {
  display: none !important;
}

/* --------------------------------------------------- 10. Responsive and motion */

@media (min-width: 768px) and (max-width: 1279px) {
  .conversations-list-wrap:not(.basis-full) {
    width: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ 11. Refinements */

/* Names keep the interface's start edge even when the text itself is RTL. */
.conversation--user,
.sd-contact-title,
.sd-panel-title {
  text-align: -webkit-match-parent;
  text-align: match-parent;
}

/* App-level announcements: a quiet strip rather than a saturated bar. */
.banner.primary {
  background: var(--teal-wash) !important;
  color: var(--ink-soft) !important;
  border-block-end: 1px solid var(--line-soft);
}
.banner.primary a {
  color: var(--teal) !important;
  font-weight: 600;
}
.banner.primary button {
  color: var(--teal) !important;
  background: transparent !important;
}
.banner.primary,
.banner.warning,
.banner.alert:not(.sd-notice) {
  height: 40px !important;
}

/* Contact details: labels on one line. */
.sd-kv-label {
  flex-basis: 96px;
  white-space: nowrap;
}

/* Conversation actions: quiet field labels, medium-weight values. */
.sd-accordion__body .items-center.flex.justify-between > span.text-sm {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.sd-accordion__body h4 {
  font-size: 13px;
  font-weight: 500;
}
.sd-accordion__body .mb-2 > button {
  height: 40px;
  border-radius: var(--radius-control);
  outline-color: var(--line);
}

/* Give the thread the room on mid-size desktops. */
@media (min-width: 1280px) and (max-width: 1535px) {
  .conversations-list-wrap:not(.basis-full) {
    width: 340px;
  }
}

/* The conversation workspace may never push the contact panel off-screen. */
#app > .flex.flex-grow > main {
  min-width: 0;
}

@media (min-width: 1280px) {
  .sd-conversation-header {
    flex: 0 0 64px;
  }
}

/* A locked Reply dims only its own segment, not the active mode. */
.sd-mode-toggle:disabled {
  opacity: 1;
}

/* Medium desktops: the contact panel floats over the thread rather than
   squeezing it. Keep 1279px in step with ConversationSidebar.vue. */
@media (min-width: 768px) and (max-width: 1279px) {
  main > section.flex.w-full.h-full {
    position: relative;
  }
  main > section.flex.w-full.h-full > div.max-w-sm {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 30;
    box-shadow: var(--shadow-floating);
  }
}

@media (min-width: 1280px) and (max-width: 1365px) {
  .conversations-list-wrap:not(.basis-full) {
    width: 320px;
  }
}

/* Conversation rows: channel and assignee line under the name. */
.conversation--meta {
  margin-block: 1px 0;
}
.conversation--meta .text-label-small,
.conversation--meta .text-xs {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.conversation.unread .conversation--meta {
  padding-inline-end: 30px;
}

/* Row density: two-line rows sit near 62px, three-line rows under 80px. */
.conversation > div.flex-1 {
  padding-block: 9px;
}
.conversation .conversation--user ~ .leading-6 {
  height: 1.25rem;
  line-height: 1.25rem;
}
.conversation--meta {
  height: 16px;
}

/* ------------------------------------------------- 12. Brand mark overlay */

/* One large Sarrdeh mark sits behind the thread: flat surface, single overlay. */
.conversation-details-wrap {
  isolation: isolate;
}
.conversation-details-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--overlay-ink);
  -webkit-mask: url(/brand/sarrdeh-mark.svg?v=fix9c) center 42% / min(56%, 440px) auto no-repeat;
  mask: url(/brand/sarrdeh-mark.svg?v=fix9c) center 42% / min(56%, 440px) auto no-repeat;
}

/* ------------------------------------------------- 13. UI/UX pass (2026-10-07) */

/* Arabic and English messages each take their own direction, per paragraph. */
.prose-bubble,
.prose-bubble p,
.prose-bubble li,
.prose-bubble blockquote {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Reports on phones: number cards wrap two per row, the hourly chart scrolls. */
@media (max-width: 767px) {
  .card-body {
    flex-wrap: wrap;
    row-gap: 1rem;
  }
  .card-body > * {
    flex: 1 1 45%;
    min-width: 0;
  }
  [class*="grid-cols-[80px_1fr]"] {
    overflow-x: auto;
  }
  [class*="min-h-[10rem]"] {
    min-width: 0;
    max-width: 100%;
    padding: 1rem;
  }
}


/* ------------------------------------------------------------ Fix 9 login page */
.sarrdeh-login.sarrdeh-login.sarrdeh-login {
  --sl-font: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  --sl-script-font: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  --sl-script-weight: 700;
  --sl-script-spacing: 0.02em;
  --sl-script-size: 2.2rem;
  --sl-script-size-lg: 2.9rem;
  --sl-bg: #070403;
  --sl-text: #faf6f2;
  --sl-muted: rgba(250, 246, 242, 0.72);
  --sl-faint: rgba(250, 246, 242, 0.5);
  --sl-card: rgba(22, 15, 10, 0.86);
  --sl-card-border: rgba(245, 168, 78, 0.24);
  --sl-input-bg: rgba(0, 0, 0, 0.35);
  --sl-input-border: rgba(250, 246, 242, 0.2);
  --sl-accent: #F5A84E;
  --sl-button-bg: #F5A84E;
  --sl-button-text: #0E0A07;
  --sl-dark-glow-1: rgba(238, 122, 34, 0.38);
  --sl-dark-glow-2: rgba(174, 72, 29, 0.32);
  --sl-dark-glow-3: rgba(10, 5, 3, 0.95);
}
.sarrdeh-login.sarrdeh-login.sarrdeh-login.is-light.is-light {
  --sl-bg: #faf7f4;
  --sl-text: #0E0A07;
  --sl-muted: rgba(14, 10, 7, 0.72);
  --sl-faint: rgba(14, 10, 7, 0.55);
  --sl-card: rgba(255, 255, 255, 0.93);
  --sl-card-border: rgba(14, 10, 7, 0.12);
  --sl-input-bg: #ffffff;
  --sl-input-border: rgba(14, 10, 7, 0.24);
  --sl-accent: #A8480C;
  --sl-button-bg: #0E0A07;
  --sl-button-text: #ffffff;
  --sl-light-glow-1: rgba(238, 122, 34, 0.22);
  --sl-light-glow-2: rgba(245, 168, 78, 0.16);
  --sl-watermark-opacity: 0.06;
}
/* One focus outline, not two: when a box already turns orange on focus (search page, Chatwoot's
   border-n-brand), the borderless field inside it drops the global input focus ring. */
.border-n-brand input.reset-base:focus,
.border-n-brand input.reset-base:focus-visible,
[class*="has-[:focus]:outline-n-brand"] input:focus,
[class*="has-[:focus]:outline-n-brand"] input:focus-visible {
  /* !important: the global rule uses input:not(...)x4:focus, which outranks any class chain */
  outline-color: transparent !important;
  box-shadow: none !important;
}
/* Sidebar: Sarrdeh's tile is sized for its tall logo; the FIX wordmark is wide. Sarrdeh paints the
   tile as one ink colour through a mask; Fix 9 shows the real two-colour logo so the leaf stays
   orange (ink letters in light mode, white in dark). */
.sd-logo-tile.sd-logo-tile {
  width: 64px;
  height: 36px;
  -webkit-mask: none;
  mask: none;
  background: url(/brand/logo.svg?v=fix9c) center / contain no-repeat;
}
html.dark .sd-logo-tile.sd-logo-tile {
  background-image: url(/brand/logo_dark.svg?v=fix9c);
}
/* Light login: the shared page inverts the (white) watermark to darken it, which would turn the
   orange leaf blue. A plain dark silhouette instead. */
.sarrdeh-login.sarrdeh-login.is-light .sl-watermark.sl-watermark {
  filter: brightness(0);
}
/* "FIX 9" in white on dark (amber 9 comes from the logo), near-black on light. */
.sarrdeh-login.sarrdeh-login .sl-script.sl-script {
  color: #ffffff;
}
.sarrdeh-login.sarrdeh-login.is-light .sl-script.sl-script {
  color: #0E0A07;
}