/* Sarrdeh inbox theme for Chatwoot.
   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: #0f766e;

  --ink: #12202b;
  --ink-soft: #3d4f5c;
  --muted: #6b7c88;
  --line: #d7e0e6;
  --line-soft: #e8eef2;
  --paper: #f7fafb;
  --paper-2: #ffffff;
  --canvas: #eef4f6;
  --teal: #0f766e;
  --teal-mid: #14b8a6;
  --teal-soft: #e6f7f5;
  --teal-wash: #f0faf8;
  --teal-edge: rgba(15, 118, 110, 0.16);
  --danger-bg: #fff6f6;
  --danger-line: #efdada;
  --danger-ink: #8a3b3b;
  --warning-bg: #fffaf0;
  --warning-line: #eadfbe;
  --warning-ink: #84651f;
  --success-bg: #f0faf8;
  --success-line: rgba(15, 118, 110, 0.18);
  --success-ink: #0f766e;
  --unread: #dc2626;
  --on-primary: #ffffff;
  --media-bg: #f3f7f8;
  --logo-ink: #0f766e;
  --overlay-ink: rgba(15, 118, 110, 0.055);
  --tooltip-bg: #12202b;
  --tooltip-ink: #f7fafb;
  --focus-line: rgba(15, 118, 110, 0.42);
  --focus-ring: rgba(20, 184, 166, 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(18, 32, 43, 0.06);
  --shadow-card: 0 4px 16px rgba(18, 32, 43, 0.045);
  --shadow-floating: 0 18px 50px rgba(18, 32, 43, 0.08);

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

  /* Chatwoot scales, light */
  --brand: 15 118 110;

  --slate-1: 238 244 246;
  --slate-2: 247 250 251;
  --slate-3: 240 245 247;
  --slate-4: 232 238 242;
  --slate-5: 215 224 230;
  --slate-6: 196 208 214;
  --slate-7: 168 182 190;
  --slate-8: 140 156 166;
  --slate-9: 107 124 136;
  --slate-10: 107 124 136;
  --slate-11: 61 79 92;
  --slate-12: 18 32 43;

  --gray-1: 238 244 246;
  --gray-2: 247 250 251;
  --gray-3: 240 245 247;
  --gray-4: 232 238 242;
  --gray-5: 215 224 230;
  --gray-6: 196 208 214;
  --gray-7: 168 182 190;
  --gray-8: 140 156 166;
  --gray-9: 107 124 136;
  --gray-10: 107 124 136;
  --gray-11: 61 79 92;
  --gray-12: 18 32 43;

  --blue-1: 247 252 251;
  --blue-2: 240 250 248;
  --blue-3: 230 247 245;
  --blue-4: 209 240 236;
  --blue-5: 184 230 224;
  --blue-6: 153 216 208;
  --blue-7: 110 196 186;
  --blue-8: 45 170 158;
  --blue-9: 15 118 110;
  --blue-10: 13 104 97;
  --blue-11: 15 118 110;
  --blue-12: 10 60 56;

  --teal-1: 247 252 251;
  --teal-2: 240 250 248;
  --teal-3: 230 247 245;
  --teal-4: 209 240 236;
  --teal-5: 184 230 224;
  --teal-6: 153 216 208;
  --teal-7: 110 196 186;
  --teal-8: 45 170 158;
  --teal-9: 15 118 110;
  --teal-10: 13 104 97;
  --teal-11: 15 118 110;
  --teal-12: 10 60 56;

  --iris-1: 247 252 251;
  --iris-2: 240 250 248;
  --iris-3: 230 247 245;
  --iris-4: 209 240 236;
  --iris-5: 184 230 224;
  --iris-6: 153 216 208;
  --iris-7: 110 196 186;
  --iris-8: 45 170 158;
  --iris-9: 15 118 110;
  --iris-10: 13 104 97;
  --iris-11: 15 118 110;
  --iris-12: 10 60 56;

  --violet-1: 247 252 251;
  --violet-2: 240 250 248;
  --violet-3: 230 247 245;
  --violet-4: 209 240 236;
  --violet-5: 184 230 224;
  --violet-6: 153 216 208;
  --violet-7: 110 196 186;
  --violet-8: 45 170 158;
  --violet-9: 15 118 110;
  --violet-10: 13 104 97;
  --violet-11: 15 118 110;
  --violet-12: 10 60 56;

  --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 244 246;
  --surface-1: 255 255 255;
  --surface-2: 247 250 251;
  --surface-active: 240 250 248;
  --background-input-box: 18, 32, 43, 0.02;
  --text-blue: 15 118 110;
  --text-purple: 15 118 110;
  --text-amber: 132 101 31;
  --border-container: 232, 238, 242, 1;
  --border-strong: 215 224 230;
  --border-weak: 232 238 242;
  --border-blue-strong: 15 118 110;
  --solid-1: 255 255 255;
  --solid-2: 255 255 255;
  --solid-3: 247 250 251;
  --solid-active: 240 245 247;
  --solid-amber: 255 250 240;
  --solid-blue: 230 247 245;
  --solid-blue-2: 240 250 248;
  --solid-iris: 240 250 248;
  --solid-purple: 240 250 248;
  --solid-red: 253 238 238;
  --solid-amber-button: 246 236 204;
  --card-color: 255 255 255;
  --overlay: 18, 32, 43, 0.3;
  --overlay-avatar: 255, 255, 255, 0.6;
  --button-color: 255 255 255;
  --button-hover-color: 18, 32, 43, 0.04;
  --label-background: 247 250 251;
  --label-border: 18, 32, 43, 0.08;
  --alpha-1: 18, 32, 43, 0.035;
  --alpha-2: 18, 32, 43, 0.06;
  --alpha-3: 255, 255, 255, 1;
  --black-alpha-1: 18, 32, 43, 0.06;
  --black-alpha-2: 18, 32, 43, 0.04;
  --border-blue: 15, 118, 110, 0.4;
  --white-alpha: 255, 255, 255, 0.8;
  --call-widget: 255, 255, 255, 0.98;
  --call-widget-border: 18, 32, 43, 0.08;
  --call-widget-text: 18, 32, 43, 1;
  --call-widget-sub-text: 107, 124, 136, 1;
}

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

  --ink: #e8f1f2;
  --ink-soft: #b9c7ca;
  --muted: #82979b;
  --line: #2a4141;
  --line-soft: #1d3233;
  --paper: #101b1c;
  --paper-2: #142224;
  --canvas: #0b1415;
  --teal: #37cabb;
  --teal-mid: #2dd4bf;
  --teal-soft: #173a37;
  --teal-wash: #122c2a;
  --teal-edge: rgba(55, 202, 187, 0.2);
  --danger-bg: #311d20;
  --danger-line: #573034;
  --danger-ink: #e9a2a8;
  --warning-bg: #2a2416;
  --warning-line: #4a3f22;
  --warning-ink: #e0c684;
  --success-bg: #122c2a;
  --success-line: rgba(55, 202, 187, 0.22);
  --success-ink: #37cabb;
  --unread: #e5484d;
  --on-primary: #06211e;
  --media-bg: #0e191a;
  --logo-ink: #e8f1f2;
  --overlay-ink: rgba(94, 220, 206, 0.05);
  --tooltip-bg: #e8f1f2;
  --tooltip-ink: #12202b;
  --focus-line: rgba(55, 202, 187, 0.5);
  --focus-ring: rgba(45, 212, 191, 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: 55 202 187;

  --slate-1: 11 20 21;
  --slate-2: 16 27 28;
  --slate-3: 20 34 36;
  --slate-4: 29 50 51;
  --slate-5: 42 65 65;
  --slate-6: 54 80 80;
  --slate-7: 78 104 106;
  --slate-8: 104 128 131;
  --slate-9: 130 151 155;
  --slate-10: 130 151 155;
  --slate-11: 185 199 202;
  --slate-12: 232 241 242;

  --gray-1: 11 20 21;
  --gray-2: 16 27 28;
  --gray-3: 20 34 36;
  --gray-4: 29 50 51;
  --gray-5: 42 65 65;
  --gray-6: 54 80 80;
  --gray-7: 78 104 106;
  --gray-8: 104 128 131;
  --gray-9: 130 151 155;
  --gray-10: 130 151 155;
  --gray-11: 185 199 202;
  --gray-12: 232 241 242;

  --blue-1: 13 24 24;
  --blue-2: 18 44 42;
  --blue-3: 23 58 55;
  --blue-4: 26 72 68;
  --blue-5: 30 88 82;
  --blue-6: 34 106 99;
  --blue-7: 40 130 121;
  --blue-8: 45 160 148;
  --blue-9: 55 202 187;
  --blue-10: 45 212 191;
  --blue-11: 94 220 206;
  --blue-12: 214 246 240;

  --teal-1: 13 24 24;
  --teal-2: 18 44 42;
  --teal-3: 23 58 55;
  --teal-4: 26 72 68;
  --teal-5: 30 88 82;
  --teal-6: 34 106 99;
  --teal-7: 40 130 121;
  --teal-8: 45 160 148;
  --teal-9: 55 202 187;
  --teal-10: 45 212 191;
  --teal-11: 94 220 206;
  --teal-12: 214 246 240;

  --iris-1: 13 24 24;
  --iris-2: 18 44 42;
  --iris-3: 23 58 55;
  --iris-4: 26 72 68;
  --iris-5: 30 88 82;
  --iris-6: 34 106 99;
  --iris-7: 40 130 121;
  --iris-8: 45 160 148;
  --iris-9: 55 202 187;
  --iris-10: 45 212 191;
  --iris-11: 94 220 206;
  --iris-12: 214 246 240;

  --violet-1: 13 24 24;
  --violet-2: 18 44 42;
  --violet-3: 23 58 55;
  --violet-4: 26 72 68;
  --violet-5: 30 88 82;
  --violet-6: 34 106 99;
  --violet-7: 40 130 121;
  --violet-8: 45 160 148;
  --violet-9: 55 202 187;
  --violet-10: 45 212 191;
  --violet-11: 94 220 206;
  --violet-12: 214 246 240;

  --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: 11 20 21;
  --surface-1: 16 27 28;
  --surface-2: 20 34 36;
  --surface-active: 18 44 42;
  --background-input-box: 255, 255, 255, 0.03;
  --text-blue: 94 220 206;
  --text-purple: 94 220 206;
  --text-amber: 224 198 132;
  --border-container: 29, 50, 51, 1;
  --border-strong: 42 65 65;
  --border-weak: 29 50 51;
  --border-blue-strong: 55 202 187;
  --solid-1: 16 27 28;
  --solid-2: 20 34 36;
  --solid-3: 24 40 42;
  --solid-active: 29 50 51;
  --solid-amber: 42 36 22;
  --solid-blue: 23 58 55;
  --solid-blue-2: 18 44 42;
  --solid-iris: 18 44 42;
  --solid-purple: 18 44 42;
  --solid-red: 49 29 32;
  --solid-amber-button: 74 63 34;
  --card-color: 20 34 36;
  --overlay: 3, 8, 9, 0.6;
  --overlay-avatar: 11, 20, 21, 0.55;
  --button-color: 20 34 36;
  --button-hover-color: 255, 255, 255, 0.06;
  --label-background: 20 34 36;
  --label-border: 255, 255, 255, 0.08;
  --alpha-1: 255, 255, 255, 0.04;
  --alpha-2: 255, 255, 255, 0.07;
  --alpha-3: 20, 34, 36, 1;
  --black-alpha-1: 0, 0, 0, 0.3;
  --black-alpha-2: 0, 0, 0, 0.18;
  --border-blue: 55, 202, 187, 0.5;
  --white-alpha: 255, 255, 255, 0.08;
  --call-widget: 20, 34, 36, 0.98;
  --call-widget-border: 255, 255, 255, 0.1;
  --call-widget-text: 232, 241, 242, 1;
  --call-widget-sub-text: 130, 151, 155, 1;
}

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

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

html,
body {
  background: #eef4f6;
}

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

#app {
  background: transparent !important;
}

::selection {
  background: rgba(20, 184, 166, 0.24);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #c5d0d6 transparent;
}
body.dark * {
  scrollbar-color: #33494a 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: 212px;
    max-width: 232px;
  }
}

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) center / contain no-repeat;
  mask: url(/brand/sarrdeh-logo.svg) 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 {
  opacity: 0.5;
}

/* ----------------------------------------------------------- 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) center 42% / min(56%, 440px) auto no-repeat;
  mask: url(/brand/sarrdeh-mark.svg) center 42% / min(56%, 440px) auto no-repeat;
}