@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
/* Hamze Cargo 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: #7b390a;

  --ink: #141c29;
  --ink-soft: #3b495e;
  --muted: #6a7689;
  --line: #d6dde7;
  --line-soft: #e8ecf3;
  --paper: #f7f9fb;
  --paper-2: #ffffff;
  --canvas: #eef1f6;
  --teal: #7b390a;
  --teal-mid: #c0570c;
  --teal-soft: #f8ede5;
  --teal-wash: #fbf4ef;
  --teal-edge: rgba(123, 57, 10, 0.16);
  --danger-bg: #fff6f6;
  --danger-line: #efdada;
  --danger-ink: #8a3b3b;
  --warning-bg: #fffaf0;
  --warning-line: #eadfbe;
  --warning-ink: #84651f;
  --success-bg: #fbf4ef;
  --success-line: rgba(123, 57, 10, 0.18);
  --success-ink: #7b390a;
  --unread: #dc2626;
  --on-primary: #ffffff;
  --media-bg: #f3f5f8;
  --logo-ink: #c87940;
  --overlay-ink: rgba(200, 121, 64, 0.09);
  --tooltip-bg: #141c29;
  --tooltip-ink: #f7f9fb;
  --focus-line: rgba(123, 57, 10, 0.42);
  --focus-ring: rgba(192, 87, 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(20, 28, 41, 0.06);
  --shadow-card: 0 4px 16px rgba(20, 28, 41, 0.045);
  --shadow-floating: 0 18px 50px rgba(20, 28, 41, 0.08);

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

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

  --slate-1: 238 241 246;
  --slate-2: 247 249 251;
  --slate-3: 240 243 247;
  --slate-4: 232 236 243;
  --slate-5: 214 221 231;
  --slate-6: 195 203 215;
  --slate-7: 167 177 191;
  --slate-8: 139 150 167;
  --slate-9: 106 118 137;
  --slate-10: 106 118 137;
  --slate-11: 59 73 94;
  --slate-12: 20 28 41;

  --gray-1: 238 241 246;
  --gray-2: 247 249 251;
  --gray-3: 240 243 247;
  --gray-4: 232 236 243;
  --gray-5: 214 221 231;
  --gray-6: 195 203 215;
  --gray-7: 167 177 191;
  --gray-8: 139 150 167;
  --gray-9: 106 118 137;
  --gray-10: 106 118 137;
  --gray-11: 59 73 94;
  --gray-12: 20 28 41;

  --blue-1: 253 249 246;
  --blue-2: 251 244 239;
  --blue-3: 248 237 229;
  --blue-4: 242 222 207;
  --blue-5: 233 203 181;
  --blue-6: 223 178 146;
  --blue-7: 209 144 97;
  --blue-8: 176 96 39;
  --blue-9: 123 57 10;
  --blue-10: 109 50 8;
  --blue-11: 123 57 10;
  --blue-12: 63 30 8;

  --teal-1: 253 249 246;
  --teal-2: 251 244 239;
  --teal-3: 248 237 229;
  --teal-4: 242 222 207;
  --teal-5: 233 203 181;
  --teal-6: 223 178 146;
  --teal-7: 209 144 97;
  --teal-8: 176 96 39;
  --teal-9: 123 57 10;
  --teal-10: 109 50 8;
  --teal-11: 123 57 10;
  --teal-12: 63 30 8;

  --iris-1: 253 249 246;
  --iris-2: 251 244 239;
  --iris-3: 248 237 229;
  --iris-4: 242 222 207;
  --iris-5: 233 203 181;
  --iris-6: 223 178 146;
  --iris-7: 209 144 97;
  --iris-8: 176 96 39;
  --iris-9: 123 57 10;
  --iris-10: 109 50 8;
  --iris-11: 123 57 10;
  --iris-12: 63 30 8;

  --violet-1: 253 249 246;
  --violet-2: 251 244 239;
  --violet-3: 248 237 229;
  --violet-4: 242 222 207;
  --violet-5: 233 203 181;
  --violet-6: 223 178 146;
  --violet-7: 209 144 97;
  --violet-8: 176 96 39;
  --violet-9: 123 57 10;
  --violet-10: 109 50 8;
  --violet-11: 123 57 10;
  --violet-12: 63 30 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: 238 241 246;
  --surface-1: 255 255 255;
  --surface-2: 247 249 251;
  --surface-active: 251 244 239;
  --background-input-box: 20, 28, 41, 0.02;
  --text-blue: 123 57 10;
  --text-purple: 123 57 10;
  --text-amber: 132 101 31;
  --border-container: 232, 236, 243, 1;
  --border-strong: 214 221 231;
  --border-weak: 232 236 243;
  --border-blue-strong: 123 57 10;
  --solid-1: 255 255 255;
  --solid-2: 255 255 255;
  --solid-3: 247 249 251;
  --solid-active: 240 243 247;
  --solid-amber: 255 250 240;
  --solid-blue: 248 237 229;
  --solid-blue-2: 251 244 239;
  --solid-iris: 251 244 239;
  --solid-purple: 251 244 239;
  --solid-red: 253 238 238;
  --solid-amber-button: 246 236 204;
  --card-color: 255 255 255;
  --overlay: 20, 28, 41, 0.3;
  --overlay-avatar: 255, 255, 255, 0.6;
  --button-color: 255 255 255;
  --button-hover-color: 20, 28, 41, 0.04;
  --label-background: 247 249 251;
  --label-border: 20, 28, 41, 0.08;
  --alpha-1: 20, 28, 41, 0.035;
  --alpha-2: 20, 28, 41, 0.06;
  --alpha-3: 255, 255, 255, 1;
  --black-alpha-1: 20, 28, 41, 0.06;
  --black-alpha-2: 20, 28, 41, 0.04;
  --border-blue: 123, 57, 10, 0.4;
  --white-alpha: 255, 255, 255, 0.8;
  --call-widget: 255, 255, 255, 0.98;
  --call-widget-border: 20, 28, 41, 0.08;
  --call-widget-text: 20, 28, 41, 1;
  --call-widget-sub-text: 106, 118, 137, 1;

  /* Hamze Cargo: exact brand values. Deep orange (#B4520C) carries links and filled buttons so
     white text stays readable (5.1:1); the bright post orange (#E8731C) is for focus and accents;
     navy is the logo and the avatars. */
  accent-color: #B4520C;
  --teal: #B4520C;
  --teal-mid: #c0560d;
  --teal-soft: #fdeee2;
  --teal-wash: #fef6ef;
  --teal-edge: rgba(232, 115, 28, 0.22);
  --muted: #627085; /* 4.8:1 on --paper (Sarrdeh's was 4.1:1) */
  --success-bg: #edf7f0;
  --success-line: rgba(35, 122, 59, 0.2);
  --success-ink: #237a3b;
  --unread: #C2410C;
  --on-primary: #ffffff;
  --logo-ink: #0A2A5C;
  --overlay-ink: rgba(10, 42, 92, 0.06);
  --focus-line: rgba(232, 115, 28, 0.55);
  --focus-ring: rgba(232, 115, 28, 0.18);
  --font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  /* Profile circles (components-next/avatar/Avatar.vue reads these). */
  --avatar-bg: #e6edf7;
  --avatar-text: #0A2A5C;
  --avatar-default-bg: #eef1f5;
  --avatar-default-text: #5f6f86;
  --brand: 180 82 12;
  --blue-8: 232 115 28;
  --blue-9: 180 82 12;
  --blue-10: 154 70 10;
  --blue-11: 180 82 12;
  --teal-8: 232 115 28;
  --teal-9: 180 82 12;
  --teal-10: 154 70 10;
  --teal-11: 180 82 12;
  --iris-8: 232 115 28;
  --iris-9: 180 82 12;
  --iris-10: 154 70 10;
  --iris-11: 180 82 12;
  --violet-8: 232 115 28;
  --violet-9: 180 82 12;
  --violet-10: 154 70 10;
  --violet-11: 180 82 12;
  --text-blue: 180 82 12;
  --text-purple: 180 82 12;
  --border-blue-strong: 180 82 12;
}

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

  --ink: #e6ecf4;
  --ink-soft: #b6bfcd;
  --muted: #7d8ba0;
  --line: #253246;
  --line-soft: #192537;
  --paper: #0e141e;
  --paper-2: #111a27;
  --canvas: #090f17;
  --teal: #d17330;
  --teal-mid: #dc7125;
  --teal-soft: #3f2512;
  --teal-wash: #301c0e;
  --teal-edge: rgba(209, 115, 48, 0.2);
  --danger-bg: #311d20;
  --danger-line: #573034;
  --danger-ink: #e9a2a8;
  --warning-bg: #2a2416;
  --warning-line: #4a3f22;
  --warning-ink: #e0c684;
  --success-bg: #301c0e;
  --success-line: rgba(209, 115, 48, 0.22);
  --success-ink: #d17330;
  --unread: #e5484d;
  --on-primary: #221105;
  --media-bg: #0c121c;
  --logo-ink: #ffffff;
  --overlay-ink: rgba(255, 255, 255, 0.045);
  --tooltip-bg: #e6ecf4;
  --tooltip-ink: #111c2c;
  --focus-line: rgba(209, 115, 48, 0.5);
  --focus-ring: rgba(220, 113, 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 115 48;

  --slate-1: 9 15 23;
  --slate-2: 14 20 30;
  --slate-3: 17 26 39;
  --slate-4: 25 37 55;
  --slate-5: 37 50 70;
  --slate-6: 49 63 85;
  --slate-7: 72 88 112;
  --slate-8: 99 114 136;
  --slate-9: 125 139 160;
  --slate-10: 125 139 160;
  --slate-11: 182 191 205;
  --slate-12: 230 236 244;

  --gray-1: 9 15 23;
  --gray-2: 14 20 30;
  --gray-3: 17 26 39;
  --gray-4: 25 37 55;
  --gray-5: 37 50 70;
  --gray-6: 49 63 85;
  --gray-7: 72 88 112;
  --gray-8: 99 114 136;
  --gray-9: 125 139 160;
  --gray-10: 125 139 160;
  --gray-11: 182 191 205;
  --gray-12: 230 236 244;

  --blue-1: 11 17 26;
  --blue-2: 48 28 14;
  --blue-3: 63 37 18;
  --blue-4: 76 45 22;
  --blue-5: 91 54 27;
  --blue-6: 110 63 30;
  --blue-7: 135 77 35;
  --blue-8: 166 92 39;
  --blue-9: 209 115 48;
  --blue-10: 220 113 37;
  --blue-11: 226 145 88;
  --blue-12: 248 227 212;

  --teal-1: 11 17 26;
  --teal-2: 48 28 14;
  --teal-3: 63 37 18;
  --teal-4: 76 45 22;
  --teal-5: 91 54 27;
  --teal-6: 110 63 30;
  --teal-7: 135 77 35;
  --teal-8: 166 92 39;
  --teal-9: 209 115 48;
  --teal-10: 220 113 37;
  --teal-11: 226 145 88;
  --teal-12: 248 227 212;

  --iris-1: 11 17 26;
  --iris-2: 48 28 14;
  --iris-3: 63 37 18;
  --iris-4: 76 45 22;
  --iris-5: 91 54 27;
  --iris-6: 110 63 30;
  --iris-7: 135 77 35;
  --iris-8: 166 92 39;
  --iris-9: 209 115 48;
  --iris-10: 220 113 37;
  --iris-11: 226 145 88;
  --iris-12: 248 227 212;

  --violet-1: 11 17 26;
  --violet-2: 48 28 14;
  --violet-3: 63 37 18;
  --violet-4: 76 45 22;
  --violet-5: 91 54 27;
  --violet-6: 110 63 30;
  --violet-7: 135 77 35;
  --violet-8: 166 92 39;
  --violet-9: 209 115 48;
  --violet-10: 220 113 37;
  --violet-11: 226 145 88;
  --violet-12: 248 227 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: 9 15 23;
  --surface-1: 14 20 30;
  --surface-2: 17 26 39;
  --surface-active: 48 28 14;
  --background-input-box: 255, 255, 255, 0.03;
  --text-blue: 226 145 88;
  --text-purple: 226 145 88;
  --text-amber: 224 198 132;
  --border-container: 25, 37, 55, 1;
  --border-strong: 37 50 70;
  --border-weak: 25 37 55;
  --border-blue-strong: 209 115 48;
  --solid-1: 14 20 30;
  --solid-2: 17 26 39;
  --solid-3: 20 30 46;
  --solid-active: 25 37 55;
  --solid-amber: 42 36 22;
  --solid-blue: 63 37 18;
  --solid-blue-2: 48 28 14;
  --solid-iris: 48 28 14;
  --solid-purple: 48 28 14;
  --solid-red: 49 29 32;
  --solid-amber-button: 74 63 34;
  --card-color: 17 26 39;
  --overlay: 9, 5, 3, 0.6;
  --overlay-avatar: 9, 15, 23, 0.55;
  --button-color: 17 26 39;
  --button-hover-color: 255, 255, 255, 0.06;
  --label-background: 17 26 39;
  --label-border: 255, 255, 255, 0.08;
  --alpha-1: 255, 255, 255, 0.04;
  --alpha-2: 255, 255, 255, 0.07;
  --alpha-3: 17, 26, 39, 1;
  --black-alpha-1: 0, 0, 0, 0.3;
  --black-alpha-2: 0, 0, 0, 0.18;
  --border-blue: 209, 115, 48, 0.5;
  --white-alpha: 255, 255, 255, 0.08;
  --call-widget: 17, 26, 39, 0.98;
  --call-widget-border: 255, 255, 255, 0.1;
  --call-widget-text: 230, 236, 244, 1;
  --call-widget-sub-text: 125, 139, 160, 1;

  /* Hamze dark: deep navy surfaces (the posts' navy containers), bright orange accent with navy
     text on filled buttons (5.7:1). */
  accent-color: #F28C3A;
  --teal: #F28C3A;
  --teal-mid: #F6A35E;
  --teal-soft: #352516;
  --teal-wash: #251b13;
  --teal-edge: rgba(242, 140, 58, 0.25);
  --success-bg: #12261b;
  --success-line: rgba(91, 192, 122, 0.25);
  --success-ink: #5bc07a;
  --unread: #C2410C;
  --on-primary: #0A2A5C;
  --logo-ink: #ffffff;
  --focus-line: rgba(242, 140, 58, 0.55);
  --focus-ring: rgba(242, 140, 58, 0.16);
  --font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --avatar-dark-bg: #1c2c45;
  --avatar-dark-text: #F6A35E;
  --brand: 242 140 58;
  --blue-9: 242 140 58;
  --blue-10: 246 163 94;
  --blue-11: 246 163 94;
  --blue-12: 252 226 204;
  --teal-9: 242 140 58;
  --teal-10: 246 163 94;
  --teal-11: 246 163 94;
  --teal-12: 252 226 204;
  --iris-9: 242 140 58;
  --iris-10: 246 163 94;
  --iris-11: 246 163 94;
  --iris-12: 252 226 204;
  --violet-9: 242 140 58;
  --violet-10: 246 163 94;
  --violet-11: 246 163 94;
  --violet-12: 252 226 204;
  --text-blue: 246 163 94;
  --text-purple: 246 163 94;
  --border-blue-strong: 242 140 58;
}

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

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

html,
body {
  background: #eef1f6;
}

html.dark,
html.dark body,
body.dark {
  background: #0b0f16;
}

#app {
  background: transparent !important;
}

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

* {
  scrollbar-width: thin;
  scrollbar-color: #c4ccd7 transparent;
}
body.dark * {
  scrollbar-color: #323c4b 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=hamze1) center / contain no-repeat;
  mask: url(/brand/sarrdeh-logo.svg?v=hamze1) 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=hamze1) center 42% / min(56%, 440px) auto no-repeat;
  mask: url(/brand/sarrdeh-mark.svg?v=hamze1) 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;
  }
}


/* ------------------------------------------------------------ Hamze Cargo login page */
.sarrdeh-login.sarrdeh-login.sarrdeh-login {
  --sl-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --sl-script-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --sl-script-weight: 700;
  --sl-script-spacing: 0.01em;
  --sl-script-size: 2.2rem;
  --sl-script-size-lg: 2.9rem;
  --sl-bg: #08111f;
  --sl-text: #f3f6fa;
  --sl-muted: rgba(243, 246, 250, 0.72);
  --sl-faint: rgba(243, 246, 250, 0.5);
  --sl-card: rgba(14, 24, 40, 0.85);
  --sl-card-border: rgba(242, 140, 58, 0.22);
  --sl-input-bg: rgba(0, 0, 0, 0.25);
  --sl-input-border: rgba(243, 246, 250, 0.2);
  --sl-accent: #F28C3A;
  --sl-button-bg: #F28C3A;
  --sl-button-text: #0A2A5C;
  --sl-dark-glow-1: rgba(232, 115, 28, 0.28);
  --sl-dark-glow-2: rgba(10, 42, 92, 0.6);
  --sl-dark-glow-3: rgba(14, 28, 52, 0.9);
}
.sarrdeh-login.sarrdeh-login.sarrdeh-login.is-light.is-light {
  --sl-bg: #f4f7fb;
  --sl-text: #0A2A5C;
  --sl-muted: rgba(10, 42, 92, 0.75);
  --sl-faint: rgba(10, 42, 92, 0.55);
  --sl-card: rgba(255, 255, 255, 0.92);
  --sl-card-border: rgba(10, 42, 92, 0.14);
  --sl-input-bg: #ffffff;
  --sl-input-border: rgba(10, 42, 92, 0.25);
  --sl-accent: #E8731C;
  --sl-button-bg: #E8731C;
  --sl-button-text: #0A2A5C;
  --sl-light-glow-1: rgba(232, 115, 28, 0.22);
  --sl-light-glow-2: rgba(10, 42, 92, 0.14);
  --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; Hamze's stacked logo is wider than tall. */
.sd-logo-tile.sd-logo-tile {
  width: 64px;
  height: 54px;
}
/* "Hamze Cargo" in orange on dark, navy on light. */
.sarrdeh-login.sarrdeh-login .sl-script.sl-script {
  color: #F28C3A;
}
.sarrdeh-login.sarrdeh-login.is-light .sl-script.sl-script {
  color: #0A2A5C;
}