@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");
/* Theme variables: set by themes.js from the admin's design languages; defaults = Mono utility */
:root { --s4-bg: #f4f4f4; --s4-panel: #ffffff; --s4-side: #ffffff; --s4-fg: #101010; --s4-fg-soft: #3f3f46; --s4-muted: #6b7280;
  --s4-border: #e5e7eb; --s4-hover: #f4f4f4; --s4-active: #e5e7eb; --s4-primary: #101010; --s4-primary-fg: #ffffff;
  --s4-primary-hover: color-mix(in srgb, var(--s4-primary) 86%, #ffffff); --s4-ring: #0099ff; --s4-radius: 10px; --s4-list: #ffffff; --s4-read: #f4f4f4; --s4-head: #f9f9f9; --s4-side2: #ffffff; --s4-in: #ffffff; --s4-out: #ececec; --s4-out-fg: #101010; --s4-accent2: #0099ff; --s4-sel: #eef1f4;
  --s4-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
/* ReUI app-shell-4 ("Mail Inbox") layout over the real Chatwoot. Test, 11 Oct 2026.
   White, edge to edge, hairline dividers, slim icon rail instead of the long menu. */

html.shell4, html.shell4 body, html.shell4 #app { background: var(--s4-bg) !important; }
html.shell4 body, html.shell4 body *, html.shell4 .woot-theme { font-family: var(--s4-font) !important; }
html.shell4 code, html.shell4 pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }

/* the long Chatwoot menu is replaced by the slim rail (shell4.js) */
html.shell4 aside { display: none !important; }
.shell4-rail { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 12px;
  background: var(--s4-side); border-right: 1px solid var(--s4-border); height: 100vh; position: relative; z-index: 41; }
.shell4-rail .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--s4-primary); color: var(--s4-primary-fg); display: grid; place-items: center;
  font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.shell4-rail button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent;
  color: var(--s4-fg-soft); cursor: pointer; padding: 0; position: relative; }
.shell4-rail button:hover { background: var(--s4-hover); color: var(--s4-fg); }
.shell4-rail button.on { background: var(--s4-active); color: var(--s4-fg); }
.shell4-rail button.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--s4-primary); }
.shell4-rail svg { width: 17px; height: 17px; }
.shell4-rail .spacer { flex: 1; }
.shell4-rail .me { width: 30px; height: 30px; border-radius: 50%; background: var(--s4-active); color: var(--s4-fg); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.shell4-tip { position: fixed; left: 58px; padding: 4px 8px; border-radius: 6px; background: var(--s4-primary); color: var(--s4-primary-fg); font-size: 12px; pointer-events: none; z-index: 99; }

/* panes: flat white, hairlines, no cards */
html.shell4 main { background: var(--s4-panel) !important; padding: 0 !important; }
html.shell4 main > section { gap: 0 !important; background: var(--s4-panel) !important; }
html.shell4 main > section > .conversations-list-wrap { background: var(--s4-panel) !important; border: 0 !important; border-right: 1px solid var(--s4-border) !important; border-radius: 0 !important; box-shadow: none !important; }
html.shell4 main > section > .conversation-details-wrap { background: var(--s4-panel) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.shell4 main > *:not(section), html.shell4 main > section:not(:has(> .conversations-list-wrap)) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--s4-panel) !important; }
html.shell4 .conversations-list-wrap > div:first-child { background: var(--s4-panel) !important; border: 0 !important; }

/* list header: title, search box (shell4.js), pill tabs */
html.shell4 .conversations-list-wrap h1 { font-size: 15px !important; font-weight: 600 !important; }
.shell4-search { margin: 0 12px 8px; position: relative; }
.shell4-search input { width: 100%; height: 32px !important; border: 1px solid var(--s4-border) !important; border-radius: 8px !important; padding: 0 10px 0 32px !important; margin: 0 !important; font-size: 13px; background: var(--s4-panel); color: var(--s4-fg); outline: none; }
.shell4-search input:focus { border-color: #a3a3a3; }
.shell4-search svg { position: absolute; left: 11px; top: 9px; width: 14px !important; height: 14px !important; color: var(--s4-muted); z-index: 1; pointer-events: none; }
html.shell4 .conversations-list-wrap div[class*="border-b-n-weak"][class*="h-10"] { border-bottom: 1px solid var(--s4-border) !important; height: 40px; align-items: center; }
html.shell4 .conversations-list-wrap li[class*="flex-shrink-0"] { margin: 0 4px 0 0 !important; }
html.shell4 .conversations-list-wrap li[class*="flex-shrink-0"] > a { padding: 3px 10px !important; border-radius: 999px; font-size: 12.5px !important; color: var(--s4-fg-soft) !important; }
html.shell4 .conversations-list-wrap li[class*="flex-shrink-0"] > a::after { display: none !important; }
html.shell4 .conversations-list-wrap li[class*="flex-shrink-0"] > a[class*="opacity-100"] { background: var(--s4-primary) !important; color: var(--s4-primary-fg) !important; }
html.shell4 .conversations-list-wrap li[class*="flex-shrink-0"] > a[class*="opacity-100"] * { color: var(--s4-primary-fg) !important; background: transparent !important; }

/* message list rows: hairline separators, grey hover, soft selected */
html.shell4 .conversations-list > div, html.shell4 .conversations-list [class*="conversation"] { border-color: var(--s4-border) !important; }
html.shell4 .conversations-list .conversation { background: var(--s4-panel) !important; border-color: var(--s4-border) !important; }
html.shell4 .conversations-list .conversation:hover { background: var(--s4-side) !important; }
html.shell4 .conversations-list .conversation.active, html.shell4 .conversations-list .conversation.selected { background: var(--s4-hover) !important; }

/* reading pane: mail sheets, thin header */
html.shell4 .conversation-details-wrap > div:first-child { border-bottom: 1px solid var(--s4-border) !important; }
html.shell4 .left-bubble { background: var(--s4-panel) !important; border: 1px solid var(--s4-border) !important; border-radius: 10px !important; }
html.shell4 .shell20-new, html.shell4 .shell20-rail { display: none !important; }

/* === Mail reading view (11 Oct) === */
html.shell4 .conversation-panel { justify-content: flex-start !important; padding: 16px 20px 24px !important; background: var(--s4-panel) !important; }
html.shell4 .message-bubble-container { margin-bottom: 12px !important; }
html.shell4 .message-bubble-container > div > div[class*="grid-area:bubble"] { margin: 0 !important; width: 100%; }
html.shell4 .left-bubble, html.shell4 .right-bubble {
  background: var(--s4-panel) !important; color: var(--s4-fg) !important; border: 1px solid var(--s4-border) !important; border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16,16,16,.03); width: 100% !important; max-width: none !important; }
html.shell4 .right-bubble { background: var(--s4-side) !important; }
html.shell4 .right-bubble * { color: inherit !important; }
/* header: avatar (shell4.js) + sender, then To, then subject as a heading */
html.shell4 .left-bubble > section:first-child, html.shell4 .right-bubble > section:first-child {
  position: relative; padding: 14px 16px 12px 60px !important; border-bottom: 1px solid var(--s4-border) !important; color: var(--s4-muted) !important; font-size: 12.5px !important; }
html.shell4 .bubble-head-name { color: var(--s4-fg) !important; font-weight: 600; font-size: 14px; }
html.shell4 .bubble-head-subject { color: var(--s4-fg) !important; font-size: 15px; font-weight: 600; margin-top: 6px !important; }
.s4-av { position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--s4-hover); color: var(--s4-fg-soft);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.s4-time { position: absolute; right: 16px; top: 15px; font-size: 12px; color: var(--s4-muted); }
/* body */
html.shell4 .left-bubble > section:nth-of-type(2), html.shell4 .right-bubble > section:nth-of-type(2) { padding: 16px 16px 6px 60px !important; }
html.shell4 .letter-render, html.shell4 .prose-bubble { font-size: 14px !important; line-height: 1.65 !important; color: var(--s4-fg-soft) !important; }
html.shell4 .letter-render p { margin: 0 0 10px !important; }
html.shell4 .left-bubble > div:last-child, html.shell4 .right-bubble > div:last-child { padding: 0 16px 12px 60px !important; color: var(--s4-muted) !important; }
/* reply box: flat card */
html.shell4 .reply-box, html.shell4 [class*="reply-box"] { border-radius: 12px !important; border-color: var(--s4-border) !important; box-shadow: none !important; }
/* right-hand contact panel: white with a hairline */
html.shell4 .conversation-details-wrap + div { background: var(--s4-panel) !important; border-left: 1px solid var(--s4-border) !important; }
/* touch-ups: one time stamp per mail; flat panel sections */
html.shell4 .left-bubble:has(.s4-time) > div:last-child, html.shell4 .right-bubble:has(.s4-time) > div:last-child { display: none !important; }
html.shell4 button.drag-handle { background: var(--s4-panel) !important; outline: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--s4-border) !important; padding: 12px 4px !important; }
html.shell4 button.drag-handle h5 { font-weight: 500 !important; font-size: 13.5px !important; }

/* === Full menu in the app-shell-20 style: replaces the icon rail when open (11 Oct) === */
html.shell4.s4-open .shell4-rail { display: none !important; }
html.shell4.s4-open aside { display: flex !important; background: var(--s4-side) !important; border-right: 1px solid var(--s4-border) !important;
  width: 248px !important; min-width: 248px !important; padding: 0 4px; position: relative; }
/* account card on top, like the shell's user switcher */
html.shell4.s4-open aside > section:last-of-type { display: flex !important; order: -1; margin: 10px 4px 4px; }
html.shell4.s4-open aside > section:last-of-type > div:first-child { display: none !important; }
html.shell4.s4-open aside > section:last-of-type > div { border: 0 !important; box-shadow: none !important; background: transparent !important; padding-right: 30px !important; }
.s4-collapse { position: absolute; top: 18px; right: 10px; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent;
  color: var(--s4-fg-soft); display: grid; place-items: center; cursor: pointer; z-index: 60; }
.s4-collapse:hover { background: var(--s4-active); color: var(--s4-fg); }
.s4-collapse svg { width: 16px; height: 16px; }
html.shell4:not(.s4-open) .s4-collapse, html.shell4:not(.s4-open) .shell4-new { display: none !important; }
/* the account-name row goes; search stays */
html.shell4.s4-open aside > section:first-of-type > div:first-child { display: none !important; }
html.shell4.s4-open aside > section:first-of-type { margin: 2px 0 0 !important; }
/* black New message button */
.shell4-new { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 16px); margin: 4px 8px 10px;
  height: 34px; border-radius: 8px; background: var(--s4-primary); color: var(--s4-primary-fg) !important; font-size: 13.5px; font-weight: 500; border: 0; cursor: pointer; }
.shell4-new:hover { background: var(--s4-primary-hover); }
.shell4-new svg { width: 15px; height: 15px; }
/* flat list: no tree lines, no indents */
html.shell4.s4-open aside nav { padding: 0 6px 16px !important; }
html.shell4.s4-open aside nav ul, html.shell4.s4-open aside nav ul::before { margin-left: 0 !important; margin-inline-start: 0 !important; border: 0 !important; }
html.shell4.s4-open aside nav ul::before, html.shell4.s4-open aside nav li.child-item::before { display: none !important; }
html.shell4.s4-open aside nav li.child-item { padding-left: 0 !important; padding-inline-start: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] > div { margin-left: 0 !important; margin-inline-start: 0 !important; }
html.shell4.s4-open aside nav li.child-item > a { height: 32px !important; padding: 0 10px !important; border-radius: 8px !important; color: var(--s4-fg-soft) !important; font-size: 13.5px !important; background: transparent !important; }
html.shell4.s4-open aside nav li.child-item > a:hover { background: var(--s4-hover) !important; }
html.shell4.s4-open aside nav li.child-item > a.router-link-active { background: var(--s4-active) !important; color: var(--s4-fg) !important; font-weight: 500; }
/* sub-sections (Folders, Teams, Channels, Labels) the same way */
html.shell4.s4-open aside nav li[class*="sidebar-section"] > div > button { height: 26px !important; padding: 0 10px !important; background: transparent !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] > div > button span[class*="i-lucide"] { display: none !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] > div > button .truncate { font-size: 12px !important; font-weight: 500 !important; color: var(--s4-muted) !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"], html.shell4.s4-open aside nav li[class*="sidebar-section"] > div { background: transparent !important; }
/* single links (My Inbox) */
html.shell4.s4-open aside nav > ul > li:not(:has(> ul)) a { height: 32px !important; padding: 0 10px !important; border-radius: 8px !important; font-size: 13.5px !important; }
.shell4-rail .toggle { margin-bottom: 6px; }

/* === Menu lists aligned on one grid: icon slot, then name (11 Oct) === */
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul,
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul > div,
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul li { margin: 0 !important; padding: 0 !important; margin-inline-start: 0 !important; padding-inline-start: 0 !important; border: 0 !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul li::before, html.shell4.s4-open aside nav li[class*="sidebar-section"] ul::before { display: none !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a {
  display: flex !important; align-items: center !important; gap: 10px !important; height: 32px !important; padding: 0 10px !important;
  margin: 1px 0 !important; border-radius: 8px !important; color: var(--s4-fg-soft) !important; font-size: 13.5px !important; background: transparent !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a:hover { background: var(--s4-hover) !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a.router-link-active { background: var(--s4-active) !important; color: var(--s4-fg) !important; font-weight: 500; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a > span:first-child,
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a > .s4-ico { width: 16px !important; height: 16px !important; flex: 0 0 16px !important;
  display: grid !important; place-items: center !important; color: var(--s4-muted) !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a > span:first-child [class*="i-"],
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a > .s4-ico [class*="i-"] { width: 16px !important; height: 16px !important; }
/* label colours: small round dots */
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a span[style*="background-color"] { width: 8px !important; height: 8px !important; border-radius: 50% !important; display: block !important; }
/* section titles line up with the item icons */
html.shell4.s4-open aside nav li[class*="sidebar-section"] > div > button { padding: 0 10px !important; margin-top: 8px !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] > div { margin: 0 !important; }
/* team names start with a capital */
html.shell4.s4-open aside nav li[data-s4sec="teams"] ul a .truncate { text-transform: capitalize; }


/* === 7 main sections as dropdown items with icons; their links nested under them (11 Oct) === */
html.shell4.s4-open aside nav > ul > li:has(> ul) > div:first-child {
  display: flex !important; align-items: center !important; gap: 10px !important; height: 34px !important; padding: 0 10px !important;
  margin: 2px 0 0 !important; border-radius: 8px !important; background: transparent !important; cursor: pointer; }
html.shell4.s4-open aside nav > ul > li:has(> ul) > div:first-child:hover { background: var(--s4-hover) !important; }
html.shell4.s4-open aside nav > ul > li:has(> ul) > div:first-child span[class*="i-lucide"]:not([class*="chevron"]) { display: inline-block !important; width: 16px !important; height: 16px !important; color: var(--s4-fg-soft); }
html.shell4.s4-open aside nav > ul > li:has(> ul) > div:first-child .truncate { font-size: 13.5px !important; font-weight: 500 !important; color: var(--s4-fg) !important; }
html.shell4.s4-open aside nav > ul > li:has(> ul) > div:first-child span[class*="chevron"] { margin-left: auto; color: var(--s4-muted); }
/* single main link (My Inbox) on the same grid */
html.shell4.s4-open aside nav > ul > li:not(:has(> ul)) a { display: flex !important; align-items: center !important; gap: 10px !important; height: 34px !important; padding: 0 10px !important; font-weight: 500; color: var(--s4-fg) !important; }
/* links inside a section: indented under the section name */
html.shell4.s4-open aside nav > ul > li > ul { margin: 2px 0 6px !important; padding: 0 !important; }
html.shell4.s4-open aside nav li.child-item > a,
html.shell4.s4-open aside nav li[class*="sidebar-section"] ul a { padding-left: 36px !important; padding-right: 10px !important; font-weight: 400 !important; }
/* sub-lists inside Conversations (Folders, Teams, Channels, Labels): small dropdowns at the same indent */
html.shell4.s4-open aside nav li[class*="sidebar-section"] > div > button { padding-left: 36px !important; margin-top: 6px !important; height: 28px !important; }
html.shell4.s4-open aside nav li[class*="sidebar-section"] > div > button .truncate { font-size: 12px !important; color: var(--s4-muted) !important; font-weight: 500 !important; }

/* === app-shell-20 sidebar (sidebar20.js) replaces the rail and Chatwoot's menu when open (11 Oct) === */
html.shell4.s4-open aside { display: none !important; }
html.shell4:not(.s4-open) .s20-side { display: none !important; }
.s20-side { flex: 0 0 256px; width: 256px; height: 100vh; display: flex; flex-direction: column; background: var(--s4-side); border-right: 1px solid var(--s4-border);
  padding: 12px 10px 10px; font-family: var(--s4-font) !important; color: var(--s4-fg); position: relative; z-index: 41; }
.s20-side * { font-family: inherit !important; box-sizing: border-box; }
.s20-top { display: flex; align-items: center; gap: 4px; }
.s20-acct { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.s20-acct:hover { background: var(--s4-hover); }
.s20-av { position: relative; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--s4-active); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--s4-fg-soft); }
.s20-av i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid #fafafa; }
.s20-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.s20-who b { font-size: 14px; font-weight: 600; color: var(--s4-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s20-who small { font-size: 12px; color: var(--s4-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s20-ud { color: var(--s4-muted); display: grid; }
.s20-fold { width: 30px; height: 30px; flex: 0 0 30px; border: 0; border-radius: 8px; background: transparent; color: var(--s4-fg-soft); display: grid; place-items: center; cursor: pointer; }
.s20-fold:hover { background: var(--s4-hover); color: var(--s4-fg); }
.s20-new { margin: 10px 0 6px; height: 36px; width: 100%; border: 0; border-radius: 8px; background: var(--s4-primary); color: var(--s4-primary-fg); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.s20-new:hover { background: var(--s4-primary-hover); }
.s20-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: none; }
.s20-scroll::-webkit-scrollbar { display: none; }
.s20-title { font-size: 12px; font-weight: 500; color: var(--s4-muted); padding: 0 8px; margin: 16px 0 6px; display: flex; align-items: center; justify-content: space-between; }
.s20-add { border: 0; background: transparent; color: var(--s4-muted); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.s20-add:hover { background: var(--s4-active); color: var(--s4-fg); }
.s20-row { width: 100%; height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--s4-fg-soft); font-size: 14px; font-weight: 400; cursor: pointer; text-align: left; margin: 1px 0; }
.s20-row:hover { background: var(--s4-hover); }
.s20-row.on { background: var(--s4-active); color: var(--s4-fg); font-weight: 500; }
.s20-ico { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; color: var(--s4-fg-soft); }
.s20-ico [class*="i-"] { width: 16px; height: 16px; display: inline-block; }
.s20-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s20-count { font-size: 12px; color: var(--s4-muted); font-variant-numeric: tabular-nums; }
.s20-chev { color: var(--s4-muted); display: grid; transition: transform .15s; }
.s20-dd.open > .s20-head .s20-chev { transform: rotate(90deg); }
.s20-kids { display: none; padding: 2px 0 4px; }
.s20-dd.open > .s20-kids { display: block; }
.s20-sub { padding-left: 26px; height: 30px; font-size: 13.5px; color: var(--s4-fg-soft); }
.s20-sub .s20-ico { color: var(--s4-muted); }
.s20-group { font-size: 11.5px; font-weight: 500; color: var(--s4-muted); padding: 8px 8px 2px 52px; }
.s20-dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.s20-lab { font-size: 14px; }
.s20-foot { border-top: 1px solid var(--s4-border); padding-top: 6px; }
.s20-foot .s20-row { font-size: 13.5px; height: 30px; }
.s20-foot .s20-kids { max-height: 40vh; overflow-y: auto; }
.s20-sub .s20-txt::first-letter, .s20-lab .s20-txt::first-letter { text-transform: uppercase; }
/* nested dropdowns inside a section (Folders, Teams, Channels, Segments, Tagged with) */
.s20-subhead { padding-left: 26px; height: 30px; font-size: 13.5px; color: var(--s4-fg-soft); }
.s20-subhead .s20-ico { color: var(--s4-muted); }
.s20-subhead .s20-count { margin-right: 2px; }
.s20-deep { padding-left: 52px; }
.s20-nest > .s20-kids { padding: 0 0 2px; }

/* more room above the Labels section */
.s20-title-row { margin-top: 22px !important; padding-top: 14px; border-top: 1px solid var(--s4-border); }

/* === Design language dropdown (themes.js) === */
.s4-design { margin-top: 4px; color: var(--s4-fg-soft); }
.s4-design-rail { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--s4-fg-soft); cursor: pointer; margin-bottom: 6px; }
.s4-design-rail:hover { background: var(--s4-hover); }
.s4-pop { position: fixed; z-index: 1000; width: 312px; max-height: 70vh; display: flex; flex-direction: column; background: var(--s4-panel); color: var(--s4-fg);
  border: 1px solid var(--s4-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); font-family: var(--s4-font); overflow: hidden; }
.s4-pop * { font-family: var(--s4-font) !important; box-sizing: border-box; }
.s4-pop-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--s4-border); display: flex; flex-direction: column; gap: 2px; }
.s4-pop-head b { font-size: 13.5px; font-weight: 600; }
.s4-pop-head small { font-size: 12px; color: var(--s4-muted); line-height: 1.35; }
.s4-pop-list { overflow-y: auto; padding: 6px; }
.s4-pop-foot { border-top: 1px solid var(--s4-border); padding: 6px; display: flex; flex-direction: column; }
.s4-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--s4-fg); text-align: left; cursor: pointer; font-size: 13px; }
.s4-opt:hover { background: var(--s4-hover); }
.s4-opt.on { background: var(--s4-active); }
.s4-opt svg { margin-left: auto; flex: 0 0 auto; }
.s4-sw { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; }
.s4-opt-t { display: flex; flex-direction: column; min-width: 0; }
.s4-opt-t b { font-size: 13px; font-weight: 500; }
.s4-opt-t b i { font-style: normal; font-weight: 400; color: var(--s4-muted); font-size: 11.5px; margin-left: 4px; }
.s4-opt-t small { font-size: 11.5px; color: var(--s4-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* rounded corners follow the theme */
.s20-row, .s20-new, .s4-opt { border-radius: calc(var(--s4-radius) * .8); }

/* design button under New message: a bordered pill so it is easy to spot */
.s20-side .s4-design { margin: 0 0 6px; height: 34px; border: 1px solid var(--s4-border); background: var(--s4-panel); color: var(--s4-fg); font-weight: 500; }
.s20-side .s4-design:hover { background: var(--s4-hover); }
.s20-side .s4-design::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--s4-muted); border-bottom: 1.6px solid var(--s4-muted); transform: rotate(45deg) translate(-2px,-2px); margin-right: 4px; }


/* === Sections take different shades of the chosen colour set (11 Oct) === */
html.shell4 main, html.shell4 main > section { background: var(--s4-read) !important; }
html.shell4 main > section > .conversations-list-wrap, html.shell4 .conversations-list, html.shell4 .conversations-list .conversation { background: var(--s4-list) !important; }
html.shell4 .conversations-list .conversation:hover { background: var(--s4-hover) !important; }
html.shell4 .conversations-list .conversation.active, html.shell4 .conversations-list .conversation.selected { background: var(--s4-sel) !important; box-shadow: inset 3px 0 0 var(--s4-primary); }
html.shell4 main > section > .conversation-details-wrap, html.shell4 .conversation-panel { background: var(--s4-read) !important; }
html.shell4 .conversations-list-wrap > div:first-child, html.shell4 .shell4-search, html.shell4 .conversations-list-wrap div[class*="border-b-n-weak"][class*="h-10"],
html.shell4 .conversation-details-wrap > div:first-child { background: var(--s4-head) !important; }
html.shell4 .shell4-search { margin: 0 !important; padding: 0 12px 8px; }
html.shell4 .conversation-details-wrap + div, html.shell4 .conversation-details-wrap + div button.drag-handle { background: var(--s4-side2) !important; }
html.shell4 .left-bubble { background: var(--s4-in) !important; }
html.shell4 .right-bubble { background: var(--s4-out) !important; color: var(--s4-out-fg) !important; border-color: transparent !important; }
html.shell4 .conversations-list [class*="bg-n-teal"] { background: var(--s4-accent2) !important; color: #fff !important; }
html.shell4 .s20-row.on { box-shadow: inset 3px 0 0 var(--s4-accent2); }
html.shell4 main > *:not(section) { background: var(--s4-list) !important; }

/* the set's main colour shows in the active menu item and the selected conversation */
.s20-row.on { background: var(--s4-nav-on, var(--s4-active)) !important; color: var(--s4-nav-on-fg, var(--s4-fg)) !important; }
.s20-row.on .s20-ico { color: var(--s4-nav-on-fg, var(--s4-fg)) !important; }