/*
 * Chatwoot (v4.18.0-ce), in the Liliang Group CRM design: the analytics pages' colours and type,
 * applied to Chatwoot's own screens. Loaded on every dashboard page by Chatwoot's Dashboard Scripts
 * setting (apps/chatwoot-analytics/README.md). GENERATED from Chatwoot's compiled stylesheet:
 * its colour tokens keep their lightness step for step, so its contrast holds, re-hued to the
 * reference's burgundy and warm greys; its hard-coded brand blue is rewritten rule by rule.
 * Red, amber and green keep Chatwoot's own, so an error still reads as one. An upgrade that renames
 * a token or a class leaves that part in Chatwoot's look; nothing breaks.
 */
@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=IBM+Plex+Mono:wght@600&display=swap");

:root {
  --slate-1: 254 251 252;
  --slate-2: 253 248 249;
  --slate-3: 246 238 239;
  --slate-4: 239 230 231;
  --slate-5: 233 222 224;
  --slate-6: 227 214 216;
  --slate-7: 217 203 204;
  --slate-8: 199 183 185;
  --slate-9: 153 137 139;
  --slate-10: 143 127 129;
  --slate-11: 112 95 97;
  --slate-12: 44 25 29;
  --gray-1: 254 251 252;
  --gray-2: 252 248 248;
  --gray-3: 245 238 239;
  --gray-4: 239 230 231;
  --gray-5: 232 221 222;
  --gray-6: 226 214 215;
  --gray-7: 216 202 204;
  --gray-8: 198 183 185;
  --gray-9: 153 136 139;
  --gray-10: 143 126 129;
  --gray-11: 112 95 98;
  --gray-12: 45 26 29;
  --blue-1: 255 251 252;
  --blue-2: 255 245 246;
  --blue-3: 255 234 238;
  --blue-4: 255 222 228;
  --blue-5: 255 207 215;
  --blue-6: 255 190 201;
  --blue-7: 244 169 181;
  --blue-8: 229 139 156;
  --blue-9: 122 17 52;
  --blue-10: 94 12 40;
  --blue-11: 122 17 52;
  --blue-12: 62 15 30;
  --iris-1: 255 251 252;
  --iris-2: 255 245 247;
  --iris-3: 255 234 238;
  --iris-4: 255 222 227;
  --iris-5: 255 208 215;
  --iris-6: 255 190 200;
  --iris-7: 244 169 181;
  --iris-8: 227 137 154;
  --iris-9: 122 17 52;
  --iris-10: 94 12 40;
  --iris-11: 122 17 52;
  --iris-12: 62 15 30;
  --background-color: 247 241 242;
  --surface-1: 255 255 255;
  --surface-2: 255 255 255;
  --surface-active: 255 255 255;
  --text-blue: 42 10 20;
  --text-purple: 42 10 20;
  --border-container: 232 220 222;
  --border-strong: 227 211 216;
  --border-weak: 232 220 222;
  --border-blue-strong: 94 12 40;
  --solid-blue: 245 230 235;
  --solid-blue-2: 253 247 249;
  --solid-iris: 245 230 235;
  --solid-purple: 243 228 236;
  --label-background: 247 241 242;
  --alpha-1: 214, 196, 202, .22;
  --alpha-2: 196, 170, 178, .22;
  --border-blue: 122, 17, 52, .5;
  --li-brand-solid: 122 17 52;
  --li-brand-ink: 122 17 52;
  --li-bg: #ffffff;
  --li-side: #f7f1f2;
  --li-card: #ffffff;
  --li-well: #f7f1f2;
  --li-line: #e8dcde;
  --li-line-strong: #7d5c63;
  --li-ink: #2a0a14;
  --li-muted: #4f353c;
  --li-primary-soft: #f5e6eb;
  --li-primary-text: #7a1134;
  --li-primary-edge: transparent;
  --li-side-line: #e3d3d8;
  --li-side-hover: rgba(122,17,52,.08);
  --li-warn: #8a5300;
  --li-warn-soft: #fbefd9;
  --li-glow: rgba(168,139,143,.18);
  --li-sh1: 0 1px 2px rgba(62,15,30,.08),0 1px 3px rgba(62,15,30,.06);
  --li-sh2: 0 4px 12px rgba(62,15,30,.10),0 2px 4px rgba(62,15,30,.06);
  --li-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, system-ui, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
  --li-display: "Oxanium", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --li-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --li-fast: 160ms;
}
.dark {
  --slate-1: 20 16 17;
  --slate-2: 28 24 24;
  --slate-3: 38 32 33;
  --slate-4: 47 39 41;
  --slate-5: 54 46 47;
  --slate-6: 64 55 56;
  --slate-7: 80 68 70;
  --slate-8: 106 92 94;
  --slate-9: 121 105 107;
  --slate-10: 134 118 121;
  --slate-11: 190 176 178;
  --slate-12: 242 236 237;
  --gray-1: 20 16 16;
  --gray-2: 28 24 24;
  --gray-3: 38 32 33;
  --gray-4: 47 40 41;
  --gray-5: 55 47 48;
  --gray-6: 65 55 57;
  --gray-7: 80 69 70;
  --gray-8: 106 92 94;
  --gray-9: 121 106 108;
  --gray-10: 134 119 121;
  --gray-11: 190 176 178;
  --gray-12: 242 237 237;
  --blue-1: 20 9 11;
  --blue-2: 31 13 17;
  --blue-3: 54 23 30;
  --blue-4: 72 30 39;
  --blue-5: 89 38 49;
  --blue-6: 114 54 67;
  --blue-7: 127 59 74;
  --blue-8: 153 71 89;
  --blue-9: 122 17 52;
  --blue-10: 143 26 64;
  --blue-11: 221 115 154;
  --blue-12: 246 211 224;
  --iris-1: 24 12 14;
  --iris-2: 31 14 17;
  --iris-3: 54 23 29;
  --iris-4: 72 30 39;
  --iris-5: 87 36 47;
  --iris-6: 103 45 58;
  --iris-7: 122 54 69;
  --iris-8: 146 65 83;
  --iris-9: 122 17 52;
  --iris-10: 143 26 64;
  --iris-11: 221 115 154;
  --iris-12: 246 211 224;
  --background-color: 7 7 7;
  --surface-1: 13 13 13;
  --surface-2: 23 18 20;
  --surface-active: 53 43 48;
  --text-blue: 246 211 224;
  --text-purple: 246 211 224;
  --border-container: 42 33 36;
  --border-strong: 58 46 50;
  --border-weak: 42 33 36;
  --border-blue-strong: 240 185 204;
  --solid-1: 23 18 20;
  --solid-2: 29 22 25;
  --solid-3: 38 29 33;
  --solid-active: 53 43 48;
  --solid-blue: 58 21 38;
  --solid-blue-2: 29 21 26;
  --solid-iris: 58 21 38;
  --solid-purple: 63 26 44;
  --card-color: 23 18 20;
  --button-color: 29 22 25;
  --label-background: 37 29 33;
  --alpha-1: 42, 33, 36, .8;
  --alpha-2: 176, 140, 152, .12;
  --alpha-3: 34, 27, 30, .95;
  --border-blue: 221, 115, 154, .5;
  --li-brand-solid: 122 17 52;
  --li-brand-ink: 221 115 154;
  --li-bg: #0d0d0d;
  --li-side: #070707;
  --li-card: #171214;
  --li-well: #100c0e;
  --li-line: #2a2124;
  --li-line-strong: #8a7378;
  --li-ink: #efe6e9;
  --li-muted: #c3b5ba;
  --li-primary-soft: #2e1420;
  --li-primary-text: #dd739a;
  --li-primary-edge: rgba(255,255,255,.16);
  --li-side-line: rgba(255,255,255,.12);
  --li-side-hover: rgba(255,255,255,.08);
  --li-warn: #f0b45a;
  --li-warn-soft: #3a2a10;
  --li-glow: rgba(122,17,52,.16);
  --li-sh1: 0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35);
  --li-sh2: 0 4px 12px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4);
}

html, body, .font-inter, .font-interDisplay, .text-body-main, .text-body-para, .text-heading-1, .text-heading-2, .text-heading-3, .text-label, .text-label-small, .text-button {
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, system-ui, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
}

/* The reference's display face for the big figures and page titles (Oxanium has no Arabic: Plex Arabic takes over). */
.text-3xl, .text-xl.font-medium {
  font-family: "Oxanium", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Chatwoot's brand colour, written into these rules as a literal (#2781F6). */
.banner.primary[data-v-dd067508] { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.border-n-blue-border { border-color:rgb(var(--li-brand-ink) / 0.50); }
.border-n-brand { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.border-n-brand\/50 { border-color:rgb(var(--li-brand-ink) / 0.50); }
.border-t-n-brand { border-top-color:rgb(var(--li-brand-ink)); border-top-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.bg-\[\#2781F6\] { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.bg-n-blue-9 { background-color:rgb(var(--li-brand-solid)); }
.bg-n-brand { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.bg-n-brand\/10 { background-color:rgb(var(--li-brand-solid) / 0.10); }
.bg-n-brand\/20 { background-color:rgb(var(--li-brand-solid) / 0.20); }
.bg-n-brand\/5 { background-color:rgb(var(--li-brand-solid) / 0.05); }
.from-n-brand\/15 { --tw-gradient-from:rgb(var(--li-brand-solid) / .15) var(--tw-gradient-from-position); --tw-gradient-to:rgb(var(--li-brand-solid) / 0) var(--tw-gradient-to-position); }
.fill-n-blue-9 { fill:rgb(var(--li-brand-solid)); }
.text-n-blue-9 { color:rgb(var(--li-brand-ink)); }
.text-n-brand { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
.accent-n-blue-9 { accent-color:rgb(var(--li-brand-ink) / 1); }
.\!shadow-\[var\(--widget-color\,\#2781f6\)\] { --tw-shadow-color:var(--widget-color,rgb(var(--li-brand-ink))) !important; }
.\!outline-n-brand { outline-color:rgb(var(--li-brand-ink))!important; }
.outline-n-blue-9 { outline-color:rgb(var(--li-brand-ink)); }
.outline-n-brand { outline-color:rgb(var(--li-brand-ink)); }
.ring-n-brand { --tw-ring-color:rgb(var(--li-brand-ink) / var(--tw-ring-opacity, 1)); }
p a { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
p a:is(.dark *) { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
input[type]:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=color]):not([type=image]):not([type=hidden]):not(.reset-base):not(.no-margin):focus { outline-color:rgb(var(--li-brand-ink)); }
input[type]:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=color]):not([type=image]):not([type=hidden]):not(.reset-base):not(.no-margin):focus:is(.dark *) { outline-color:rgb(var(--li-brand-ink)); }
select:focus { outline-color:rgb(var(--li-brand-ink)); }
select:focus:is(.dark *) { outline-color:rgb(var(--li-brand-ink)); }
textarea:focus { outline-color:rgb(var(--li-brand-ink)); }
textarea:focus:is(.dark *) { outline-color:rgb(var(--li-brand-ink)); }
.before\:\!border-t-n-brand:before { border-top-color:rgb(var(--li-brand-ink))!important; border-top-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1))!important; }
.before\:bg-n-brand:before { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.after\:bg-n-brand:after { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.checked\:border-n-brand:checked { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.checked\:bg-n-brand:checked { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.indeterminate\:border-n-brand:indeterminate { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.indeterminate\:bg-n-brand:indeterminate { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.focus-within\:outline-n-brand:focus-within { outline-color:rgb(var(--li-brand-ink)); }
.focus-within\:ring-n-brand:focus-within { --tw-ring-color:rgb(var(--li-brand-ink) / var(--tw-ring-opacity, 1)); }
.hover\:border-n-brand:hover { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.hover\:bg-n-brand\/10:hover { background-color:rgb(var(--li-brand-solid) / 0.10); }
.hover\:bg-n-brand\/80:hover { background-color:rgb(var(--li-brand-solid) / 0.80); }
.hover\:text-n-brand:hover { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
.focus\:border-n-brand:focus { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.focus\:outline-n-blue-9:focus { outline-color:rgb(var(--li-brand-ink)); }
.focus\:outline-n-brand:focus { outline-color:rgb(var(--li-brand-ink)); }
.focus\:ring-n-brand:focus { --tw-ring-color:rgb(var(--li-brand-ink) / var(--tw-ring-opacity, 1)); }
.focus-visible\:border-n-brand:focus-visible { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.focus-visible\:bg-n-brand\/20:focus-visible { background-color:rgb(var(--li-brand-solid) / 0.20); }
.focus-visible\:outline-n-blue-9:focus-visible { outline-color:rgb(var(--li-brand-ink)); }
.focus-visible\:outline-n-brand:focus-visible { outline-color:rgb(var(--li-brand-ink)); }
.focus-visible\:ring-n-brand:focus-visible { --tw-ring-color:rgb(var(--li-brand-ink) / var(--tw-ring-opacity, 1)); }
.hover\:enabled\:border-n-blue-9:enabled:hover { border-color:rgb(var(--li-brand-ink)); }
.hover\:enabled\:bg-n-blue-border:enabled:hover { background-color:rgb(var(--li-brand-solid) / 0.50); }
.hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color:rgb(var(--li-brand-solid) / 0.20); }
.group:focus-within .group-focus-within\:text-n-brand { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
.group:hover .group-hover\:bg-n-brand { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.group:hover .group-hover\:text-n-brand { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
.has-\[\:focus\]\:outline-n-brand:has(:focus) { outline-color:rgb(var(--li-brand-ink)); }
.prose-a\:text-n-brand :is(:where(a):not(:where([class~=not-prose],[class~=not-prose] *))) { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~=not-prose],[class~=not-prose] *))) { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
.dark\:border-n-brand:is(.dark *) { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.dark\:bg-n-brand\/10:is(.dark *) { background-color:rgb(var(--li-brand-solid) / 0.10); }
.dark\:\!outline-n-brand:is(.dark *) { outline-color:rgb(var(--li-brand-ink))!important; }
.dark\:ring-n-brand:is(.dark *) { --tw-ring-color:rgb(var(--li-brand-ink) / var(--tw-ring-opacity, 1)); }
.dark\:checked\:border-n-brand:checked:is(.dark *) { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }
.dark\:checked\:bg-n-brand:checked:is(.dark *) { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *) { outline-color:rgb(var(--li-brand-ink)); }
.dark\:hover\:text-n-brand:hover:is(.dark *) { color:rgb(var(--li-brand-ink)); color:rgb(var(--li-brand-ink) / var(--tw-text-opacity, 1)); }
.dark\:focus\:outline-n-brand:focus:is(.dark *) { outline-color:rgb(var(--li-brand-ink)); }
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *) { outline-color:rgb(var(--li-brand-ink)); }
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type=submit] { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type=submit]:hover { background-color:rgb(var(--li-brand-solid) / 0.90); }
.menu[data-v-60cefcf4]:hover { background-color:rgb(var(--li-brand-solid)); background-color:rgb(var(--li-brand-solid) / var(--tw-bg-opacity, 1)); }
.ProseMirror .cw-embed-preview.cw-embed-preview--removable .cw-embed-remove:focus-visible { outline:2px solid rgb(var(--li-brand-ink)); outline:2px solid rgb(var(--blue-9, 39 129 246)); }
.search-input[data-v-69e77a2c]:focus { border-color:rgb(var(--li-brand-ink)); border-color:rgb(var(--li-brand-ink) / var(--tw-border-opacity, 1)); }

/*
 * The reference's shapes on Chatwoot's own components (v4.18.0-ce markup): the framed work area,
 * the rail, the chat list as cards, the segmented filter, bubbles with a tail, the composer, the
 * contact panel, controls and page cards. chatwoot-theme.mjs appends this file after the
 * generated colours; it reads only the --li-* tokens defined there. Selectors lean on Chatwoot's
 * component classes (.conversation, .left-bubble, .reply-box…): an upgrade that renames one loses
 * that piece of the look, nothing else.
 */

/* ---------- the frame: rail on the side colour, the work area one rounded card ---------- */
#app > div > div > main {
  padding-block: 12px;
  padding-inline: 0 12px;
  background-color: var(--li-side);
}
#app > div > div > main > :not(:empty):not(ninja-keys) {
  border: 1px solid var(--li-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--li-sh1);
  background-color: var(--li-bg);
  background-image: radial-gradient(900px 420px at 8% -10%, var(--li-glow), transparent 70%);
}
@media (max-width: 767px) {
  #app > div > div > main { padding: 0; }
  #app > div > div > main > :not(:empty):not(ninja-keys) { border: 0; border-radius: 0; box-shadow: none; }
}

/* ---------- the rail ---------- */
#app > div > div > aside {
  background-color: var(--li-side);
  border-inline-end: 0;
}
#app aside > section:first-child .size-6 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--li-sh1);
}
#app aside > section:first-child .size-6 img { width: 24px; height: 24px; }
#app aside > section:first-child #sidebar-account-switcher { font: 600 15px/1.2 var(--li-sans); }
#app aside > section:first-child a.h-7 {
  height: 38px;
  border-radius: 10px;
  outline-color: var(--li-line-strong);
  background: var(--li-card);
  box-shadow: var(--li-sh1);
}
#app aside nav > ul { gap: 2px; }
#app aside nav a.h-8 {
  height: 40px;
  padding-inline: 10px;
  border-radius: 10px;
  gap: 10px;
  font-size: 14px;
  color: var(--li-ink);
}
/* No tree lines: the reference lists a group's items flush under its label. */
#app aside nav li.child-item { margin-inline-start: 0; padding-inline-start: 0; }
#app aside nav li.child-item::before, #app aside nav li.child-item::after { display: none; }
#app aside nav li[class*="sidebar-section"] > div > button::before,
#app aside nav li[class*="sidebar-section"] > ul::before { display: none; }
#app aside nav li[class*="sidebar-section"] > div,
#app aside nav li[class*="sidebar-section"] > ul { margin-inline-start: 0; }
#app aside nav a.h-8 [class*="i-lucide"], #app aside nav a.h-8 [class*="i-woot"] { color: var(--li-muted); }
#app aside nav a.h-8:hover { background-color: var(--li-side-hover); }
/* An open group reads as the reference's section label: small capitals, no icon. */
#app aside nav > ul > li:has(> ul:not([style*="display: none"]) > *) > a.h-8 {
  height: auto;
  padding: 16px 12px 6px;
  background: none;
  font: 600 12px/16px var(--li-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--li-muted);
}
#app aside nav > ul > li:has(> ul:not([style*="display: none"]) > *) > a.h-8 > div:first-child { display: none; }
/* The current item: filled, as in the reference (white on burgundy, 10.7:1). */
#app aside nav a[class~="bg-n-alpha-2"],
#app aside nav [role="button"][class~="bg-n-alpha-2"],
#app aside nav a[class~="bg-n-alpha-2"]:hover,
#app aside nav [role="button"][class~="bg-n-alpha-2"]:hover {
  background-color: rgb(var(--li-brand-solid));
  background-image: none;
  color: #ffffff;
  box-shadow: var(--li-sh1), inset 0 0 0 1px var(--li-side-line);
}
/* Hovered, it stays filled and only darkens (the reference's primary-hover); the general hover above
   must never pale it, or the white text sits on pink. */
#app aside nav a[class~="bg-n-alpha-2"]:hover,
#app aside nav [role="button"][class~="bg-n-alpha-2"]:hover { background-color: rgb(var(--blue-10)); }
#app aside nav a[class~="bg-n-alpha-2"] *,
#app aside nav [role="button"][class~="bg-n-alpha-2"] *,
#app aside nav a.h-8[class~="bg-n-alpha-2"] :is([class*="i-lucide"], [class*="i-woot"]) { color: #ffffff; }
/* Counts: a mono pill, burgundy; white on the current item. */
#app aside nav a span.rounded-full[class*="text-xxs"] {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgb(var(--li-brand-solid));
  color: #ffffff;
  font: 600 12px/18px var(--li-mono);
}
#app aside nav a[class~="bg-n-alpha-2"] span.rounded-full[class*="text-xxs"] { background: #ffffff; color: rgb(var(--li-brand-solid)); }
/* The signed-in person: a card at the foot of the rail. */
#app aside > section:last-of-type > div { border-top: 0; box-shadow: none; padding: 8px 10px 12px; }
#app aside > section:last-of-type button.w-full {
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--li-side-line);
  background: var(--li-side-hover);
}

/* ---------- the chat list ---------- */
.conversations-list-wrap { background-color: var(--li-card); }
.conversations-list-wrap h1 { font: 600 18px/1.3 var(--li-display); }
/* Mine / Unassigned / All: the reference's segmented control. */
.conversations-list-wrap > div:has(> ul) {
  height: auto;
  margin-top: 0;
  padding: 2px 12px 10px;
  border-bottom: 1px solid var(--li-line);
}
.conversations-list-wrap > div:has(> ul) > ul {
  display: flex;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--li-line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--li-card);
}
.conversations-list-wrap > div:has(> ul) > ul > li { flex: 1; margin: 0; }
.conversations-list-wrap > div:has(> ul) > ul > li > a {
  justify-content: center;
  min-height: 40px;
  padding: 0 8px;
  font-size: 13.5px;
  color: var(--li-muted);
}
.conversations-list-wrap > div:has(> ul) > ul > li > a::after { display: none; }
.conversations-list-wrap > div:has(> ul) > ul > li > a.text-n-blue-11 {
  background: rgb(var(--li-brand-solid));
  color: #ffffff;
  box-shadow: inset 0 0 0 1px var(--li-primary-edge);
}
.conversations-list-wrap > div:has(> ul) > ul > li > a.text-n-blue-11 > div { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
/* Each chat a rounded card; the open one marked by a bar, as in the reference. */
.conversations-list { padding: 6px 0; }
.conversations-list .conversation {
  margin: 2px 8px;
  padding-inline: 10px;
  border-radius: 12px;
  border-bottom: 0;
  transition: background-color var(--li-fast);
}
.conversations-list .conversation::before { display: none; }
.conversations-list .conversation:hover { background-color: var(--li-primary-soft); }
.conversations-list .conversation.active {
  background-color: var(--li-primary-soft);
  box-shadow: inset 3px 0 0 var(--li-primary-text);
}
[dir="rtl"] .conversations-list .conversation.active { box-shadow: inset -3px 0 0 var(--li-primary-text); }
.conversations-list .conversation h4 { font-size: 14px; font-weight: 600; }
/* Unread, waiting on us: filled burgundy, as the reference marks a chat that needs a reply. */
.conversations-list .conversation:has(.bg-n-teal-9):not(.active) { background-color: rgb(var(--li-brand-solid)); }
.conversations-list .conversation:has(.bg-n-teal-9):not(.active):hover { background-color: rgb(var(--blue-10)); }
.conversations-list .conversation:has(.bg-n-teal-9):not(.active) :is(h4, span, div, p) { color: #ffffff; }
.conversations-list .conversation:has(.bg-n-teal-9):not(.active) .label { background: rgba(255, 255, 255, 0.16); border-color: transparent; }
.conversations-list .conversation .bg-n-teal-9 {
  background: rgb(var(--li-brand-solid));
  color: #ffffff;
  font-family: var(--li-mono);
}
.conversations-list .conversation:has(.bg-n-teal-9):not(.active) .bg-n-teal-9 { background: #ffffff; color: rgb(var(--li-brand-solid)); }
.conversations-list .label { border-radius: 999px; padding-inline: 8px; }

/* ---------- avatars: the reference's squircle, its soft burgundy and display initials ---------- */
span.object-cover.overflow-hidden.font-medium {
  border-radius: 10px !important;
  font-family: var(--li-display);
  font-weight: 600;
}
span.object-cover.overflow-hidden.font-medium:not(:has(img)) {
  background-color: var(--li-primary-soft) !important;
  color: var(--li-primary-text) !important;
}
.conversations-list .conversation:has(.bg-n-teal-9):not(.active) span.object-cover.overflow-hidden.font-medium:not(:has(img)) {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* ---------- the thread ---------- */
.conversation-details-wrap { background-color: var(--li-bg); }
.conversation-details-wrap > div:first-child {
  min-height: 64px;
  padding: 10px 16px;
  background: var(--li-card);
  border-bottom: 1px solid var(--li-line);
}
.left-bubble {
  background-color: var(--li-card);
  border: 1px solid var(--li-line);
  border-radius: 14px;
  border-end-start-radius: 4px;
  box-shadow: var(--li-sh1);
  font-size: 15px;
  line-height: 1.5;
}
.right-bubble:not([class*="amber"]) {
  background-color: var(--li-primary-soft);
  border: 1px solid var(--li-line);
  border-radius: 14px;
  border-end-end-radius: 4px;
  font-size: 15px;
  line-height: 1.5;
}
.right-bubble[class*="amber"] {
  background-color: var(--li-warn-soft);
  color: var(--li-warn);
  border-radius: 10px;
}

/* ---------- the composer ---------- */
.reply-box {
  border: 1px solid var(--li-line-strong);
  border-radius: 16px;
  background: var(--li-card);
  box-shadow: var(--li-sh2);
}

/* ---------- the contact panel ---------- */
.conversation-details-wrap ~ div[class*="md:w-[320px]"],
div.bg-n-surface-2[class*="md:w-[320px]"] {
  background-color: var(--li-card);
  border-inline-start: 1px solid var(--li-line);
}

/* ---------- controls ---------- */
button.rounded-lg, a.rounded-lg, .rounded-lg:is(input, select, textarea) { border-radius: 10px; }
button[class~="bg-n-brand"] { font-weight: 600; box-shadow: var(--li-sh1), inset 0 0 0 1px var(--li-primary-edge); }

/* ---------- pages: titles in the display face, cards rounder and lifted ---------- */
.text-heading-1, header .text-xl.font-medium { font: 600 24px/1.25 var(--li-display); letter-spacing: -0.005em; }
.rounded-xl { border-radius: 16px; }
.rounded-xl.outline-n-container, .rounded-xl.border { box-shadow: var(--li-sh1); }
table th { font: 600 12px/16px var(--li-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--li-muted); }


/* ---------- the booking panel (src/panel.ts): docked beside the work area, which narrows for it ---------- */
:root { --inshape-book-w: 360px; }
html.inshape-book-open #app > div > div > main { margin-inline-end: calc(var(--inshape-book-w) + 12px); }
#inshape-book {
  position: fixed;
  inset-block: 12px;
  inset-inline-end: 12px;
  z-index: 40;
  width: var(--inshape-book-w);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--li-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--li-card);
  box-shadow: var(--li-sh1);
}
#inshape-book[hidden] { display: none; }
.inshape-book-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--li-line); }
[dir="rtl"] .inshape-book-head { padding: 6px 16px 6px 6px; }
.inshape-book-head h2 { margin: 0; font: 600 16px/1.3 var(--li-display); color: var(--li-ink); }
.inshape-book-close { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--li-muted); cursor: pointer; }
.inshape-book-close:hover { background: var(--li-primary-soft); color: var(--li-ink); }
#inshape-book iframe { flex: 1; width: 100%; border: 0; background: var(--li-card); }
.inshape-book-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--li-line-strong); border-radius: 8px; background: transparent; color: var(--li-ink); font: 600 13px/1 var(--li-sans); cursor: pointer; white-space: nowrap; }
.inshape-book-btn:hover { background: var(--li-primary-soft); }
.inshape-book-btn[aria-expanded="true"] { background: rgb(var(--li-brand-solid)); border-color: transparent; color: #ffffff; }
.inshape-book-btn:focus-visible, .inshape-book-close:focus-visible { outline: 2px solid rgb(var(--li-brand-ink)); outline-offset: 2px; }
/* Too narrow to share: the panel lies over the chat list instead, and closes with its button. */
@media (max-width: 1099px) {
  html.inshape-book-open #app > div > div > main { margin-inline-end: 0; }
  #inshape-book { box-shadow: var(--li-sh2); }
}
@media (max-width: 767px) {
  #inshape-book { inset: 0; width: auto; border: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .conversations-list .conversation { transition: none; }
}