/* ============================================================================
 * workspace.css — Desktop workspace shell: macOS-style bottom dock +
 * right split-screen panel (Notifications + Pings) + Shhh focus mode.
 * Additive + namespaced (.wsx-/#wsx*). Desktop-only (gated in JS + media query).
 * GREEN/light design language; motion <300ms, custom easing (emil).
 * ========================================================================== */
:root {
  --wsx-ease: cubic-bezier(.23,1,.32,1);
  --wsx-panel-w: 430px;
  --wsx-green: var(--brand, #3C7538);
  --wsx-green-d: #2F5C2C;
  --wsx-line: var(--border,#E6E6E0);
  --wsx-surface: var(--surface, #fff);
  --wsx-ink: var(--text,#1B1B19);
  --wsx-muted: var(--text-muted, #6B6A65);
  --wsx-faint: var(--text-faint,#6C6C64);   /* fallback matched to the AA-fixed --text-3 */
}
/* hide entirely on non-desktop — existing mobile UX untouched */
@media (max-width: 900px), (pointer: coarse) {
  #wsxDock, #wsxPanel, #wsxPanelTab, #wsxShhh, .wsx-pop, #wsxHelpDock { display: none !important; }
  .main-area { margin-right: 0 !important; }
  /* …except the bookmarks page, opened from My Profile on mobile — show it as a
     centered sheet over a dim backdrop (the dock is hidden on phones). */
  body.wsx-pop-mobile::before { content: ''; position: fixed; inset: 0; background: rgba(20,30,20,.42); z-index: 10080; }
  body.wsx-pop-mobile .wsx-pop { display: flex !important; z-index: 10090; top: 50%; bottom: auto; width: min(440px, 92vw); max-height: 80vh; transform: translate(-50%, -48%) scale(.98); }
  body.wsx-pop-mobile .wsx-pop.open { transform: translate(-50%, -50%) scale(1); }
}

/* ---- mobile: floating chat FAB + full-screen Pings overlay --------------- */
#wsxMobChat, #wsxMobNotifFab { display: none; }
.wsx-mobhead { display: none; align-items: center; gap: 6px; flex: none; background: var(--wsx-surface); border-bottom: 1px solid var(--wsx-line); padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
.wsx-mob-back { border: none; background: transparent; cursor: pointer; color: var(--wsx-muted); width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.wsx-mob-back svg { width: 19px; height: 19px; }
.wsx-mob-title { font-size: 17px; font-weight: 800; color: var(--wsx-ink); flex: 1; }
.wsx-mob-actions { display: flex; align-items: center; gap: 2px; }
.wsx-mob-actions button { position: relative; border: none; background: transparent; cursor: pointer; color: var(--wsx-muted); width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.wsx-mob-actions button:active { transform: scale(.9); }
.wsx-mob-actions svg { width: 21px; height: 21px; }
#wsxMobAnnBtn { font-size: 19px; line-height: 1; }
.wsx-mob-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #D1453B; color: #fff; font-size: 9.5px; font-weight: 700; display: none; align-items: center; justify-content: center; }
.wsx-mob-badge.show { display: flex; }
@media (max-width: 900px), (pointer: coarse) {
  #wsxMobChat { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: var(--fab); height: var(--fab); border-radius: 18px 18px 18px 7px; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: linear-gradient(160deg, #4FB477, #2C9A54); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 10px 26px rgba(46,158,87,.4); }
  #wsxMobChat:active, #wsxMobNotifFab:active { scale: .94; }
  #wsxMobChat img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: #fff; padding: 3px; box-sizing: border-box; }
  body.wsx-mobile-pings { overflow: hidden; }
  body.wsx-mobile-pings #wsxMobChat { display: none; }
  body.wsx-mobile-pings #wsxPanel { display: flex !important; position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100vh; height: 100dvh; transform: none; border-left: none; box-shadow: none; z-index: 10070; }
  body.wsx-mobile-pings .wsx-panel-head { display: none; }
  body.wsx-mobile-pings .wsx-mobhead { display: flex; }
  /* Phones: notifications live INSIDE the chat menu (owner, 13 Sep 2026). The
     header bell goes once the chat button exists (erp-workspace.js sets
     wsx-notifs-in-chat when it builds #wsxMobChat) and team chat is on for the
     role — otherwise the header bell stays, as the only way in. The bell at the
     top of Chats (#wsxMobNotif) opens the notifications panel, and an amber dot
     on the chat button says unread notifications are waiting inside. */
  body.wsx-notifs-in-chat:not(.wsx-no-teamchat) .notif-bell-wrap { display: none !important; }

  /* Notifications button above the chat button (owner, 14 Sep 2026: "like in
     desktop"). The chat button's mini skin (redesign-pages.css) is a 46px circle
     at right 14px / bottom 16px — this one matches its size and corner and sits
     12px above it, dressed like the desktop edge bell: white, green bell, red
     count with a white ring. */
  #wsxMobNotifFab { position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 46px + 12px); width: 46px; height: 46px; border-radius: 50%; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: #fff; color: var(--wsx-green); border: 1px solid var(--wsx-line); box-shadow: 0 3px 10px rgba(20,40,25,.16); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  #wsxMobNotifFab svg { width: 21px; height: 21px; }

  /* The phone dock (erp-dock.js) owns the bottom 69px, and the chat button sat on top of its last
     destination - the owner could not reach More (16 Sep 2026). With the dock on, the two buttons
     move up and sit SIDE BY SIDE above it rather than stacked over it. */
  /* !important because something outside this file wins on the chat button: measured live, the
     bell moved to bottom:100px and the chat button stayed at 16px, and walking the stylesheets
     from inside the page found no rule claiming it. Rather than leave the owner unable to reach
     the dock's last destination, this takes precedence outright. Re-measured after. */
  body.erp-dock-on #wsxMobChat { bottom: calc(18px + env(safe-area-inset-bottom, 0px) + 78px) !important; }
  body.erp-dock-on #wsxMobNotifFab { bottom: calc(22px + env(safe-area-inset-bottom, 0px) + 78px); right: calc(14px + var(--fab) + 12px); }
  #wsxMobNotifFab .wsx-mob-badge { top: -3px; right: -3px; min-width: 17px; height: 17px; border-radius: 9px; font-size: 10px; box-shadow: 0 0 0 2px #fff; }
  body.wsx-mobile-pings #wsxMobNotifFab { display: none; }

  /* Scroll-away motion (owner, 14 Sep 2026), built to Emil Kowalski's rules:
     transform + opacity only; the house ease-out (--wsx-ease) both ways; the exit
     faster than the entrance; no bounce; a slight scale for depth; a 40ms stagger
     so the stack peels off top-first and settles bottom-first. Movement uses the
     individual translate / scale properties so a press (scale) never fights the
     slide (translate), and CSS transitions retarget mid-flight — a quick
     down-up-down never jumps. erp-workspace.js toggles body.wsx-fabs-away. */
  #wsxMobChat, .mobile-fab { transition: translate .26s var(--wsx-ease), scale .12s var(--wsx-ease), opacity .2s var(--wsx-ease); }
  #wsxMobNotifFab { transition: translate .26s var(--wsx-ease) 40ms, scale .12s var(--wsx-ease), opacity .2s var(--wsx-ease) 40ms; }
  body.wsx-fabs-away #wsxMobChat, body.wsx-fabs-away #wsxMobNotifFab, body.wsx-fabs-away .mobile-fab { scale: .9; opacity: 0; pointer-events: none; }
  body.wsx-fabs-away #wsxMobChat, body.wsx-fabs-away .mobile-fab { translate: 0 calc(100% + 32px + env(safe-area-inset-bottom, 0px)); transition: translate .18s var(--wsx-ease) 30ms, scale .18s var(--wsx-ease) 30ms, opacity .14s var(--wsx-ease) 30ms; }
  body.wsx-fabs-away #wsxMobNotifFab { translate: 0 calc(100% + 88px + env(safe-area-inset-bottom, 0px)); transition: translate .18s var(--wsx-ease), scale .18s var(--wsx-ease), opacity .14s var(--wsx-ease); }
}
@media (prefers-reduced-motion: reduce) {
  /* No movement — the buttons only fade. */
  #wsxMobChat, #wsxMobNotifFab, .mobile-fab { transition: opacity .12s linear !important; }
  body.wsx-fabs-away #wsxMobChat, body.wsx-fabs-away #wsxMobNotifFab, body.wsx-fabs-away .mobile-fab { translate: none !important; scale: none !important; }
}

/* ---- split screen: shrink main area when the right panel is open --------- */
@media (min-width: 901px) {
  .main-area { transition: margin-right .28s var(--wsx-ease); }
  body.wsx-panel-open .main-area { margin-right: var(--wsx-panel-w); }
}

/* ---- bottom dock (macOS-style) ------------------------------------------- */
#wsxDock {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 9400; display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px; border-radius: 20px;
  /* Apple liquid-glass — translucent (user-tunable via --wsx-dock-op) + strong
     blur + specular highlights, applied at the BASE rule so it's glass on every
     desktop (not gated behind pointer:fine). */
  background: rgba(255,255,255, var(--wsx-dock-op, .4));
  backdrop-filter: blur(30px) saturate(1.9); -webkit-backdrop-filter: blur(30px) saturate(1.9);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(20,40,30,.22),
              inset 0 1.5px 0 rgba(255,255,255,.85),
              inset 0 -1px 0 rgba(255,255,255,.22);
  transition: bottom .28s var(--wsx-ease), transform .28s var(--wsx-ease);
}
/* Dock stays centred on the ENTIRE screen — it does NOT shift when the right
   panel opens (the panel overlaps it; the dock keeps true viewport-centre). */
body.wsx-panel-open #wsxDock { transform: translateX(-50%); }
/* Toasts (success / error) sit centred on the whole screen, lifted to rest just
   above the dock on desktop, and always above the dock/panel in z-order. */
/* Toasts must clear the mobile Pings overlay (z 10070) + pop sheets (10090) so
   chat-area toasts ("Uploading…", "Vote failed") actually pop on mobile. */
.toast { z-index: 10110 !important; }
/* In-panel sheet for chat-context pops — lives INSIDE the right panel, slides up
   over the chat, works the same on desktop + the mobile full-screen Pings. */
.wsx-sheet { position: absolute; inset: 0; z-index: 48; background: var(--wsx-surface); display: flex; flex-direction: column; transform: translateY(7%); opacity: 0; pointer-events: none; transition: transform .22s var(--wsx-ease), opacity .22s var(--wsx-ease); }
.wsx-sheet.open { transform: none; opacity: 1; pointer-events: auto; }
.wsx-sheet-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--wsx-line); flex-shrink: 0; }
.wsx-sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
/* Mobile dock-pop sheets (Bookmarks, My Tasks…) need an obvious, tappable close. */
body.wsx-pop-mobile .wsx-pop-x { width: 36px; height: 36px; background: var(--wsx-line); color: var(--wsx-ink); flex-shrink: 0; }
body.wsx-pop-mobile .wsx-pop-x svg { width: 19px; height: 19px; }
body.wsx-shell-on .toast { bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important; }
.wsx-dock-btn {
  position: relative; width: 46px; height: 46px; border: none; background: transparent;
  border-radius: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .16s var(--wsx-ease), background .16s var(--wsx-ease);
  transform-origin: bottom center;
}
/* 3D-style colour-full dock icons: transparent background, gradient-filled
   glyphs with a soft drop-shadow for depth (the only colour-full element). */
.wsx-dock-btn .wsx-dock-ico {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; box-shadow: none; transition: transform .16s var(--wsx-ease);
}
.wsx-dock-btn .wsx-dock-ico svg { width: 40px; height: 40px; filter: drop-shadow(0 3px 3px rgba(20,30,20,.30)); transition: filter .16s var(--wsx-ease); }
.wsx-dock-btn:hover .wsx-dock-ico svg { filter: drop-shadow(0 7px 8px rgba(20,30,20,.34)); }
.wsx-dock-btn:hover { transform: translateY(-8px) scale(1.16); }
.wsx-dock-btn:hover + .wsx-dock-btn { transform: scale(1.06); }
/* Drag to reorder (SortableJS). The icon you're carrying is lifted and slightly
   tilted; the gap it will drop into is the faded placeholder. The magnify-on-
   hover rules above are suppressed mid-drag so neighbours don't jump around
   under the cursor while you're aiming. */
.wsx-dock-btn { cursor: grab; }
.wsx-dock-btn:active { cursor: grabbing; }
.wsx-dock-chosen { transform: translateY(-10px) scale(1.14) rotate(-3deg) !important; opacity: .96; z-index: 2; }
.wsx-dock-ghost { opacity: .28; filter: grayscale(1); }
.wsx-dock-ghost .wsx-dock-tip, .wsx-dock-chosen .wsx-dock-tip { display: none !important; }
#wsxDock.sortable-dragging .wsx-dock-btn:hover,
#wsxDock.sortable-dragging .wsx-dock-btn:hover + .wsx-dock-btn { transform: none; }
.wsx-dock-btn:active { transform: translateY(-4px) scale(1.06); }
.wsx-dock-btn .wsx-dock-dot { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--wsx-green); opacity: 0; transition: opacity .15s; }
.wsx-dock-btn.active .wsx-dock-dot { opacity: 1; }
.wsx-dock-btn .wsx-dock-badge { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #D1453B; color: #fff; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.wsx-dock-btn .wsx-dock-badge.show { display: flex; }
.wsx-dock-tip {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none;
  background: var(--wsx-ink); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 4px 9px; border-radius: 7px; transition: opacity .14s ease-out, transform .14s var(--wsx-ease);
}
.wsx-dock-btn:hover .wsx-dock-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.wsx-dock-sep { width: 1px; align-self: center; height: 30px; background: var(--wsx-line); margin: 0 3px; }

/* ---- floating dock popup (Notes / Bookmarks / Tasks / Approvals) --------- */
.wsx-pop {
  position: fixed; z-index: 9500; left: 50%; bottom: 78px; transform: translateX(-50%) translateY(10px) scale(.98);
  width: min(560px, 92vw); max-height: 72vh; opacity: 0; pointer-events: none;
  background: var(--wsx-surface); border: 1px solid var(--wsx-line); border-radius: 16px;
  box-shadow: 0 22px 60px rgba(20,40,30,.22), 0 4px 12px rgba(20,40,30,.1);
  display: flex; flex-direction: column; overflow: hidden;
  transition: opacity .2s var(--wsx-ease), transform .2s var(--wsx-ease);
}
/* When the right panel is open on desktop, CHAT pops (poll / all-groups /
   new-chat) float centered OVER the panel column. DOCK pops (Notes / Bookmarks
   / Tasks / Approvals, tagged .wsx-pop-dock) stay centred above the dock over
   the main area — they keep the base left:50%. */
body.wsx-panel-open:not(.wsx-mobile-pings) .wsx-pop:not(.wsx-pop-dock) { left: calc(100% - var(--wsx-panel-w)/2); width: min(calc(var(--wsx-panel-w) - 24px), 92vw); }
.wsx-pop.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
body.wsx-panel-open .wsx-pop.open { transform: translateX(-50%) translateY(0) scale(1); }
.wsx-pop-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--wsx-line); }
.wsx-pop-head .wsx-pop-ico { width: 28px; height: 28px; border-radius: 8px; background: #EAF4EC; color: var(--wsx-green-d); display: flex; align-items: center; justify-content: center; }
.wsx-pop-head .wsx-pop-ico svg { width: 16px; height: 16px; }
.wsx-pop-title { font-size: 15px; font-weight: 700; color: var(--wsx-ink); flex: 1; }
.wsx-pop-sub { font-size: 11.5px; color: var(--wsx-faint); font-weight: 500; }
.wsx-pop-x { border: none; background: transparent; cursor: pointer; color: var(--wsx-faint); width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s; }
.wsx-pop-x:hover { background: var(--wsx-line); color: var(--wsx-ink); }
.wsx-pop-body { flex: 1; overflow-y: auto; padding: 14px 16px; }

/* notes editor */
.wsx-note-ta { width: 100%; min-height: 280px; border: none; outline: none; resize: none; font: 14px/1.6 var(--font-sans, system-ui); color: var(--wsx-ink); background: transparent; }
.wsx-note-status { font-size: 11px; color: var(--wsx-faint); padding: 8px 2px 2px; flex-shrink: 0; }
/* dock "My Notes" tabbed footer */
.wsx-note-foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.wsx-note-tabs { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; flex-wrap: wrap; }
.wsx-note-foot .wsx-note-status { padding: 2px; margin-left: auto; white-space: nowrap; }
.wsx-note-tab { max-width: 120px; border: 1px solid var(--wsx-line); border-bottom: 2px solid var(--ntc, var(--wsx-line)); background: #fff; color: var(--wsx-ink); font: 600 11.5px inherit; font-family: inherit; padding: 4px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s, border-color .12s; }
.wsx-note-tab:hover { background: #F4F8F5; }
.wsx-note-tab.on { background: var(--ntc, #EAF4EC); border-color: var(--ntc, var(--wsx-green)); }
.wsx-note-tab.editing { outline: 2px solid var(--wsx-green); cursor: text; }
.wsx-note-tabadd { border: 1px dashed var(--wsx-line); background: #fff; color: var(--wsx-muted); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0; }
.wsx-note-tabadd:hover { background: #F4F8F5; border-color: var(--wsx-green); color: var(--wsx-green-d); }
.wsx-sticky-t.editing { outline: 2px solid rgba(0,0,0,.25); border-radius: 4px; cursor: text; background: rgba(255,255,255,.6); }
/* rich notes editor */
.wsx-note-wrap { display: flex; flex-direction: column; height: 100%; }
.wsx-note-tb { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 2px 0 8px; }
.wsx-note-tb button { border: 1px solid var(--wsx-line); background: #fff; color: var(--wsx-ink); font-size: 13px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 7px; cursor: pointer; transition: background .12s var(--wsx-ease), transform .1s var(--wsx-ease); white-space: nowrap; }
.wsx-note-tb button:hover { background: #F1F4F0; }
.wsx-note-tb button:active { transform: scale(.93); }
.wsx-note-tb button[data-c="bold"] { font-weight: 700; }
.wsx-note-tb button[data-c="italic"] { font-style: italic; }
.wsx-note-tb button[data-c="strikethrough"] { text-decoration: line-through; }
.wsx-note-tbsep { width: 1px; height: 20px; background: var(--wsx-line); margin: 0 2px; flex-shrink: 0; }
/* touch: the editor buttons were 28-35px wide x 44 tall (mobile audit F13, 21 Oct 2026) — 44px each; the bar wraps */
@media (hover: none) and (pointer: coarse) { .wsx-note-tb button { min-width: 44px; } .wsx-note-tabadd { min-width: 44px; min-height: 44px; } }
/* colour button: letter A with a colour-bar underline */
.wsx-note-colorbtn { position: relative; font-weight: 700; padding-bottom: 2px; }
.wsx-note-colorbar { display: block; position: absolute; bottom: 4px; left: 5px; right: 5px; height: 3px; border-radius: 2px; background: linear-gradient(90deg,#F6C90E,#3C7538,#1A5FA8,#8B1A1A); }
/* font-size button */
.wsx-note-fontsz { font-size: 12px; letter-spacing: -.2px; }
/* more (…) button */
.wsx-note-morebtn { letter-spacing: 2px; padding: 0 5px; }
/* colour picker floating palette */
/* Toolbar flyouts sit on <body> while the notes window is raised by erpLayer
   (ceiling 2147482000, inline !important) — anything lower opens BEHIND the
   notes popup and looks like the button does nothing. House rule: popups on
   the top layer, above the ceiling, below dialog/tooltip/toast. */
.wsx-note-cpick { position: fixed; z-index: 2147482050; background: var(--wsx-surface,#fff); border: 1px solid var(--wsx-line,#ddd); border-radius: 11px; padding: 8px; display: grid; grid-template-columns: repeat(8,26px); gap: 5px; box-shadow: 0 8px 28px rgba(20,40,30,.22); }
.wsx-note-csw { width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid rgba(0,0,0,.13); cursor: pointer; transition: transform .1s var(--wsx-ease,ease-out); }
.wsx-note-csw:hover { transform: scale(1.18); border-color: rgba(0,0,0,.3); }
.wsx-note-csw-clear { font-size: 14px; display: flex; align-items: center; justify-content: center; color: #c00; border-style: dashed; }
/* font-size flyout */
.wsx-note-fsmenu { position: fixed; z-index: 2147482050; background: var(--wsx-surface,#fff); border: 1px solid var(--wsx-line,#ddd); border-radius: 10px; padding: 5px; min-width: 110px; box-shadow: 0 8px 24px rgba(20,40,30,.2); }
.wsx-note-fsrow { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 7px 11px; border-radius: 7px; cursor: pointer; font: 13px/1 var(--font-sans,system-ui); color: var(--wsx-ink); transition: background .1s; }
.wsx-note-fsrow:hover { background: #F1F8F3; color: var(--wsx-green,#3C7538); }
.wsx-note-fsrow[data-sz="1"] { font-size: 11px; }
.wsx-note-fsrow[data-sz="3"] { font-size: 13px; }
.wsx-note-fsrow[data-sz="4"] { font-size: 15px; font-weight: 600; }
.wsx-note-fsrow[data-sz="5"] { font-size: 17px; font-weight: 700; }
.wsx-note-fsrow[data-sz="7"] { font-size: 21px; font-weight: 700; }
/* "more" overflow menu (align + undo/redo) */
.wsx-note-more { position: fixed; z-index: 2147482050; background: var(--wsx-surface,#fff); border: 1px solid var(--wsx-line,#ddd); border-radius: 10px; padding: 5px; min-width: 150px; box-shadow: 0 8px 24px rgba(20,40,30,.2); }
.wsx-note-more-row { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 7px 12px; border-radius: 7px; cursor: pointer; font: 13px/1 var(--font-sans,system-ui); color: var(--wsx-ink); transition: background .1s; }
.wsx-note-more-row:hover { background: #F1F8F3; color: var(--wsx-green,#3C7538); }
.wsx-note-more-sep { height: 1px; background: var(--wsx-line,#eee); margin: 4px 8px; }
.wsx-note-pop { margin-left: auto; }
.wsx-note-rt { flex: 1; min-height: 240px; overflow-y: auto; outline: none; border: 1px solid var(--wsx-line); border-radius: 10px; padding: 11px 13px; font: 14px/1.6 var(--font-sans, system-ui); color: var(--wsx-ink); }
.wsx-note-rt:focus { border-color: var(--wsx-green); box-shadow: 0 0 0 2px rgba(60,117,56,.14); }
.wsx-note-rt[data-ph]:empty:before { content: attr(data-ph); color: var(--wsx-faint); }
.wsx-note-rt .wsx-todo { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0; }
.wsx-note-rt .wsx-todo-box { flex: none; width: 17px; height: 17px; margin-top: 2px; border: 1.6px solid var(--wsx-muted); border-radius: 5px; cursor: pointer; position: relative; }
.wsx-note-rt .wsx-todo.done .wsx-todo-box { background: var(--wsx-green); border-color: var(--wsx-green); }
.wsx-note-rt .wsx-todo.done .wsx-todo-box:after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 12px; line-height: 14px; text-align: center; }
.wsx-note-rt .wsx-todo.done .wsx-todo-tx { text-decoration: line-through; color: var(--wsx-faint); }
.wsx-note-rt .wsx-todo-tx { flex: 1; min-width: 0; }
.wsx-note-tbl { border-collapse: collapse; margin: 6px 0; width: 100%; }
.wsx-note-tbl td { border: 1px solid var(--wsx-line); padding: 5px 8px; min-width: 40px; }
/* blockquote inserted via toolbar */
.wsx-note-rt blockquote { border-left: 3px solid var(--wsx-green,#3C7538); margin: 6px 0 6px 4px; padding: 4px 10px; color: var(--wsx-muted,#666); font-style: italic; background: rgba(60,117,56,.05); border-radius: 0 6px 6px 0; }
/* code block inserted via toolbar */
.wsx-note-code { background: #F4F5F0; border: 1px solid var(--wsx-line,#ddd); border-radius: 7px; padding: 8px 11px; margin: 6px 0; font: 12.5px/1.5 'Fira Mono','Cascadia Code','Consolas',monospace; color: #2d6a28; white-space: pre-wrap; overflow-x: auto; }
.wsx-note-code code { background: none; border: none; padding: 0; font: inherit; color: inherit; }
/* images inserted via toolbar */
.wsx-note-img { max-width: 100%; border-radius: 7px; margin: 4px 0; display: block; box-shadow: 0 2px 8px rgba(20,40,30,.12); }
/* ─── Sticky notes — Post-it paper look ───────────────────────────────────── */
/* Caveat handwriting font — scoped ONLY to .wsx-sticky elements */
.wsx-sticky,
.wsx-sticky * { font-family: 'Caveat', 'Patrick Hand', cursive !important; }
/* …but keep the rich-text toolbar buttons using the system UI font */
.wsx-sticky .wsx-note-tb button,
.wsx-sticky .wsx-note-tb select { font-family: ui-sans-serif, system-ui, sans-serif !important; font-size: 11px !important; }

/* pastel paper colors — 10-color palette */
:root {
  --stk-0-bg: #FFF3B0; --stk-0-bar: #F5D84A; --stk-0-ink: #5C4A00; /* pale yellow */
  --stk-1-bg: #FFD6C8; --stk-1-bar: #F5A68C; --stk-1-ink: #5C1A0A; /* coral/salmon */
  --stk-2-bg: #FFE0A8; --stk-2-bar: #F5B850; --stk-2-ink: #5C3200; /* amber/orange */
  --stk-3-bg: #C8F5C8; --stk-3-bar: #7ED87E; --stk-3-ink: #0A3C0A; /* green */
  --stk-4-bg: #D4EDFF; --stk-4-bar: #8FC8F0; --stk-4-ink: #0A2C50; /* blue */
  --stk-5-bg: #F5C8E8; --stk-5-bar: #E890CC; --stk-5-ink: #4A0A38; /* pink */
  --stk-6-bg: #DDD0F8; --stk-6-bar: #B898F0; --stk-6-ink: #2A0A5C; /* lavender */
  --stk-7-bg: #C8F5F0; --stk-7-bar: #78D8D0; --stk-7-ink: #083830; /* cyan */
  --stk-8-bg: #FFB8B8; --stk-8-bar: #F07878; --stk-8-ink: #5C0000; /* red-pink */
  --stk-9-bg: #E0E0E0; --stk-9-bar: #B8B8B8; --stk-9-ink: #1A1A1A; /* grey */
}

/* Per-color overrides via data-color attribute */
.wsx-sticky[data-color="0"]  { background: var(--stk-0-bg); --stk-bar: var(--stk-0-bar); --stk-ink: var(--stk-0-ink); --stk-tilt: -1.2deg; }
.wsx-sticky[data-color="1"]  { background: var(--stk-1-bg); --stk-bar: var(--stk-1-bar); --stk-ink: var(--stk-1-ink); --stk-tilt:  1.5deg; }
.wsx-sticky[data-color="2"]  { background: var(--stk-2-bg); --stk-bar: var(--stk-2-bar); --stk-ink: var(--stk-2-ink); --stk-tilt: -0.8deg; }
.wsx-sticky[data-color="3"]  { background: var(--stk-3-bg); --stk-bar: var(--stk-3-bar); --stk-ink: var(--stk-3-ink); --stk-tilt:  1.8deg; }
.wsx-sticky[data-color="4"]  { background: var(--stk-4-bg); --stk-bar: var(--stk-4-bar); --stk-ink: var(--stk-4-ink); --stk-tilt: -1.6deg; }
.wsx-sticky[data-color="5"]  { background: var(--stk-5-bg); --stk-bar: var(--stk-5-bar); --stk-ink: var(--stk-5-ink); --stk-tilt:  0.9deg; }
.wsx-sticky[data-color="6"]  { background: var(--stk-6-bg); --stk-bar: var(--stk-6-bar); --stk-ink: var(--stk-6-ink); --stk-tilt: -2.0deg; }
.wsx-sticky[data-color="7"]  { background: var(--stk-7-bg); --stk-bar: var(--stk-7-bar); --stk-ink: var(--stk-7-ink); --stk-tilt:  1.3deg; }
.wsx-sticky[data-color="8"]  { background: var(--stk-8-bg); --stk-bar: var(--stk-8-bar); --stk-ink: var(--stk-8-ink); --stk-tilt: -0.6deg; }
.wsx-sticky[data-color="9"]  { background: var(--stk-9-bg); --stk-bar: var(--stk-9-bar); --stk-ink: var(--stk-9-ink); --stk-tilt:  1.1deg; }

/* Base note — paper feel */
.wsx-sticky {
  position: fixed; right: 24px; bottom: 90px;
  width: 290px; height: 330px;
  z-index: 10075; display: flex; flex-direction: column;
  /* background intentionally omitted here — set exclusively via [data-color="N"] rules above */
  border: none;
  border-radius: 3px 14px 3px 3px; /* slight organic asymmetry */
  /* layered paper shadow: contact + diffuse + ambient */
  box-shadow:
    0 1px 2px rgba(0,0,0,.18),
    0 4px 8px rgba(0,0,0,.12),
    0 12px 28px rgba(0,0,0,.10),
    0 24px 60px rgba(0,0,0,.08);
  overflow: hidden;
  /* deterministic tilt via CSS custom prop set by JS */
  transform: rotate(var(--stk-tilt, -1.2deg));
  transition: transform 180ms cubic-bezier(.23,1,.32,1), box-shadow 180ms cubic-bezier(.23,1,.32,1);
  will-change: transform;
}
/* hover: straighten slightly and lift */
.wsx-sticky:hover {
  transform: rotate(calc(var(--stk-tilt, -1.2deg) * 0.3)) translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.16),
    0 8px 18px rgba(0,0,0,.12),
    0 20px 48px rgba(0,0,0,.12),
    0 36px 80px rgba(0,0,0,.08);
}
/* while dragging: fully upright + stronger lift shadow */
.wsx-sticky.dragging {
  transform: rotate(0deg) translateY(-6px) scale(1.01) !important;
  box-shadow:
    0 4px 8px rgba(0,0,0,.18),
    0 16px 36px rgba(0,0,0,.16),
    0 32px 64px rgba(0,0,0,.12);
  transition: none; /* instant during drag */
}
.wsx-sticky.min { height: auto; }
.wsx-sticky.min .wsx-sticky-body { display: none; }

/* Corner label: the note title shown small in bottom-right of the paper body,
   away from the title-bar action buttons which occupy the top-right. */
.wsx-sticky::after {
  content: attr(data-title);
  position: absolute;
  bottom: 7px; right: 10px;
  font-family: 'Caveat', cursive;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--stk-ink, #5C4A00);
  opacity: .35;
  pointer-events: none;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

/* Header bar — slightly darker shade of the paper color */
.wsx-sticky-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 7px 9px;
  background: var(--stk-bar, var(--stk-0-bar));
  border-bottom: 1px solid rgba(0,0,0,.06);
  user-select: none;
}
.wsx-sticky-t {
  font-size: 15px; font-weight: 700;
  color: var(--stk-ink, var(--stk-0-ink));
  font-family: 'Caveat', cursive !important;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 2px;
  /* hide in the title — corner label already shows it subtly */
  visibility: hidden;
}
.wsx-sticky-acts { display: flex; flex-shrink: 0; }
.wsx-sticky-acts button {
  border: none; background: transparent;
  color: var(--stk-ink, var(--stk-0-ink));
  width: 22px; height: 22px; border-radius: 6px;
  cursor: pointer; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease-out;
  font-family: ui-sans-serif, system-ui, sans-serif !important;
}
.wsx-sticky-acts button:hover { background: rgba(0,0,0,.10); }
.wsx-sticky-acts button:active { transform: scale(.93); }

/* note tabs (in the dock "My Notes" — untouched by sticky restyle) */
.wsx-sticky-tabs { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; overflow: hidden; }
.wsx-stk-tab { display: inline-flex; align-items: center; gap: 4px; max-width: 92px; border: none; background: rgba(255,255,255,.45); color: #6b5a16; font: 600 11.5px var(--wsx-font, inherit); font-family: inherit; padding: 4px 8px; border-radius: 7px 7px 0 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s; }
.wsx-stk-tab.on { background: rgba(255,255,255,.92); box-shadow: 0 -2px 0 rgba(0,0,0,.06) inset; }
.wsx-stk-tab:hover { background: rgba(255,255,255,.7); }
.wsx-stk-tabx { font-size: 13px; line-height: 1; opacity: .5; border-radius: 4px; padding: 0 2px; }
.wsx-stk-tabx:hover { opacity: 1; background: rgba(0,0,0,.12); }
.wsx-stk-add { border: none; background: rgba(255,255,255,.45); color: #6b5a16; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0; }
.wsx-stk-add:hover { background: rgba(255,255,255,.8); }

/* minimised → bright floating note icon */
.wsx-sticky-fab { position: fixed; left: 22px; bottom: 22px; width: var(--fab); height: var(--fab); border-radius: 50%; border: none; cursor: pointer; z-index: 10076; font-size: var(--fab-ico); display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #FFD83D, #FF9D2E); box-shadow: 0 4px 12px rgba(0,0,0,.22); transition: transform .15s var(--wsx-ease), box-shadow .15s var(--wsx-ease); }
.wsx-sticky-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,.26); }
.wsx-sticky-fab:active { transform: scale(.95); }
/* snapshot-rendering loader */
.wsx-snap-load { position: fixed; inset: 0; z-index: 10260; display: flex; align-items: center; justify-content: center; background: rgba(20,30,20,.32); opacity: 0; transition: opacity .15s var(--wsx-ease); }
.wsx-snap-load.open { opacity: 1; }
.wsx-snap-card { display: flex; align-items: center; gap: 11px; background: var(--wsx-surface); border-radius: 13px; padding: 14px 20px; box-shadow: 0 18px 48px rgba(20,40,30,.28); font-size: 14px; font-weight: 600; color: var(--wsx-ink); }
.wsx-snap-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--wsx-line); border-top-color: var(--wsx-green); animation: wsxSnapSpin .7s linear infinite; }

/* Chat-row swipe action tray — right-swipe (L→R) reveals Pin/Unpin + Mute/Unmute.
   Sits absolutely behind the row's left edge; the row slides right to expose it. */
.wsx-cl-tray { position: absolute; left: 0; display: none; align-items: stretch; z-index: 1; border-radius: 0 14px 14px 0; overflow: hidden; }
.wsx-cl-tray .wsx-cla { width: 74px; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font: 600 11px var(--wsx-font, inherit); font-family: inherit; letter-spacing: .2px; transition: filter .12s var(--wsx-ease); }
.wsx-cl-tray .wsx-cla-ic { display: flex; }
.wsx-cl-tray .wsx-cla-ic svg { width: 19px; height: 19px; }
.wsx-cl-tray .wsx-cla-pin { background: var(--wsx-green, #3C7538); }
.wsx-cl-tray .wsx-cla-mute { background: #C8881A; }
.wsx-cl-tray .wsx-cla:active { filter: brightness(.9); }
@keyframes wsxSnapSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wsx-snap-spin { animation-duration: 1.4s; } }
/* share-note-as-image dialog */
.wsx-share-bd { position: fixed; inset: 0; z-index: 10210; background: rgba(20,30,20,.5); display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; transition: opacity .16s var(--wsx-ease); }
.wsx-share-bd.open { opacity: 1; }
.wsx-share { width: min(390px, 94vw); max-height: 88vh; overflow: auto; background: var(--wsx-surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(20,40,30,.3); display: flex; flex-direction: column; }
.wsx-share-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--wsx-line); font-weight: 700; font-size: 15px; color: var(--wsx-ink); }
.wsx-share-x { border: none; background: transparent; cursor: pointer; color: var(--wsx-faint); width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.wsx-share-x:hover { background: var(--wsx-line); } .wsx-share-x svg { width: 15px; height: 15px; }
.wsx-share-preview { padding: 14px 16px; display: flex; justify-content: center; }
.wsx-share-preview img { max-width: 100%; max-height: 280px; border-radius: 10px; box-shadow: 0 4px 16px rgba(20,40,30,.16); }
.wsx-share-acts { display: flex; gap: 8px; padding: 0 16px 14px; flex-wrap: wrap; }
.wsx-share-acts button { flex: 1; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--wsx-line); background: #fff; border-radius: 10px; cursor: pointer; font: 600 12.5px inherit; font-family: inherit; color: var(--wsx-ink); transition: background .12s, border-color .12s; }
.wsx-share-acts button:hover { background: #F4F8F5; border-color: var(--wsx-green); }
.wsx-share-acts button svg { width: 15px; height: 15px; }
.wsx-share-sub:empty { display: none; }
.wsx-share-sub { padding: 0 16px 14px; }
.wsx-share-pick-h { font-size: 12px; font-weight: 700; color: var(--wsx-muted); margin: 4px 0 7px; }
.wsx-share-list { display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow: auto; }
.wsx-share-row { border: 1px solid var(--wsx-line); background: #fff; border-radius: 9px; padding: 8px 11px; cursor: pointer; text-align: left; font: 500 13px inherit; font-family: inherit; color: var(--wsx-ink); }
.wsx-share-row:hover { background: #F1F8F3; border-color: var(--wsx-green); }
.wsx-share-orow { display: flex; gap: 7px; }
.wsx-share-orow input { flex: 1; border: 1px solid var(--wsx-line); border-radius: 9px; padding: 8px 11px; font: inherit; min-width: 0; }
.wsx-share-orow button { border: none; background: var(--wsx-green); color: #fff; border-radius: 9px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.wsx-share-note { font-size: 12.5px; color: var(--wsx-muted); padding: 6px 0; }
.wsx-sticky-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 10px 8px; background: inherit; }
/* editor area — slightly translucent over the paper color */
.wsx-sticky .wsx-note-rt {
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.08);
  border-radius: 4px;
  min-height: 0;
  font-family: 'Caveat', cursive !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: rgba(0,0,0,.78) !important;
}
/* toolbar buttons — system font so icons/labels stay crisp */
.wsx-sticky .wsx-note-tb { background: rgba(255,255,255,.25); border-radius: 5px; margin-bottom: 4px; }
.wsx-sticky .wsx-note-tb button { background: rgba(255,255,255,.55); font-family: ui-sans-serif, system-ui, sans-serif !important; }
.wsx-sticky .wsx-note-tb button:hover { background: rgba(255,255,255,.88); }
.wsx-sticky .wsx-note-rt blockquote { border-left-color: rgba(0,0,0,.25); background: rgba(0,0,0,.04); }
.wsx-sticky .wsx-note-code { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.1); font-family: ui-monospace, monospace !important; }
/* status line */
.wsx-sticky .wsx-note-status { font-family: ui-sans-serif, system-ui, sans-serif !important; font-size: 10.5px !important; }

/* bookmarks list */
.wsx-bm { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid var(--wsx-line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: background .14s, border-color .14s, transform .1s; }
.wsx-bm:hover { background: #F4F8F5; border-color: #D6EADD; }
.wsx-bm:active { transform: scale(.99); }
.wsx-bm-ico { width: 30px; height: 30px; border-radius: 8px; background: #EAF4EC; color: var(--wsx-green-d); display: flex; align-items: center; justify-content: center; flex: none; font-size: 13px; font-weight: 700; }
.wsx-bm-main { flex: 1; min-width: 0; }
.wsx-bm-t { font-size: 13px; font-weight: 600; color: var(--wsx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-bm-s { font-size: 11px; color: var(--wsx-faint); }
.wsx-bm-del { border: none; background: transparent; color: var(--wsx-faint); cursor: pointer; font-size: 14px; padding: 5px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; transition: color .13s var(--wsx-ease), background .13s var(--wsx-ease); }
.wsx-bm-del svg { width: 15px; height: 15px; }
.wsx-bm-del:hover { color: #D1453B; background: #FBEBE9; }
.wsx-bm-del:active { transform: scale(.9); }
.wsx-empty { text-align: center; color: var(--wsx-faint); font-size: 13px; padding: 30px 10px; }
/* quick-action rows (My Tasks / My Approvals dock pops) */
.wsx-qa { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--wsx-line); border-radius: 10px; margin-bottom: 8px; transition: background .13s var(--wsx-ease), border-color .13s var(--wsx-ease); }
.wsx-qa:hover { background: #F8FAF8; border-color: #D9E6DD; }
.wsx-qa-main { flex: 1; min-width: 0; cursor: pointer; }
.wsx-qa-t { font-size: 13px; font-weight: 600; color: var(--wsx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-qa-s { font-size: 11.5px; color: var(--wsx-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-qa-act { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--wsx-green); background: #fff; color: var(--wsx-green-d); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px; cursor: pointer; transition: background .13s var(--wsx-ease), color .13s var(--wsx-ease), transform .1s var(--wsx-ease); }
.wsx-qa-act svg { width: 14px; height: 14px; }
.wsx-qa-act:hover { background: var(--wsx-green); color: #fff; }
.wsx-qa-act:active { transform: scale(.94); }
.wsx-qa-act.busy { opacity: .55; pointer-events: none; }
.wsx-qa-act[disabled] { opacity: .55; pointer-events: none; }
.wsx-qa-foot { text-align: center; padding: 4px 0 2px; }
.wsx-qa-foot button { background: none; border: none; color: var(--wsx-green-d); font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 7px; transition: background .13s var(--wsx-ease); }
.wsx-qa-foot button:hover { background: #EAF4EC; }

/* ---- right split-screen panel -------------------------------------------- */
#wsxPanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--wsx-panel-w); z-index: 9300;
  background: var(--wsx-surface); border-left: 1px solid var(--wsx-line);
  box-shadow: -8px 0 30px rgba(20,40,30,.07); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s var(--wsx-ease);
}
body.wsx-panel-open #wsxPanel { transform: none; }
/* panel head + people strip (Basecamp-style) */
.wsx-panel-head { padding: 13px 14px 4px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wsx-panel-x { border: none; background: transparent; cursor: pointer; color: var(--wsx-muted); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; transition: background .12s, color .12s; }
.wsx-panel-x:hover { background: var(--wsx-line); color: var(--wsx-ink); }
.wsx-panel-x svg { width: 17px; height: 17px; }
/* expand / collapse the panel to (near) full-width — redefining the width var
   widens the whole split cohesively (main area, tab, popups all follow) */
.wsx-panel-exp { border: none; background: transparent; cursor: pointer; color: var(--wsx-muted); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; transition: background .12s, color .12s; }
.wsx-panel-exp:hover { background: var(--wsx-line); color: var(--wsx-ink); }
.wsx-panel-exp svg { width: 16px; height: 16px; }
body.wsx-panel-max .wsx-panel-exp { color: var(--wsx-green-d); }
body.wsx-mobile-pings .wsx-panel-exp { display: none; }
/* Expand is a desktop-only affordance (mobile chat is already full-screen). */
@media (max-width: 900px), (pointer: coarse) { .wsx-panel-exp { display: none !important; } }
/* Expand = open the OPEN chat in the MAIN CENTRE AREA (fills the content region
   between the sidebar and the right panel — no floating popup, no backdrop). The
   right panel keeps the chat list + notifications bell as always. #wsxPanel's
   backdrop-filter makes it a containing block, so it's disabled here to let the
   fixed chat land on the measured .main-area box (vars set in toggleMaxPanel). */
body.wsx-panel-max #wsxPanel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.wsx-panel-max #wsxChatList { display: flex !important; }
/* Chat opened FROM A NOTIFICATION and expanded to the centre: keep the
   NOTIFICATIONS pane in the right panel (not the chat list), so you can click
   the next notification. Overrides the chat-list rule directly above. */
body.wsx-panel-max.wsx-max-notif #wsxChatList { display: none !important; }
body.wsx-panel-max.wsx-max-notif #wsxNotifPane { display: flex !important; }
body.wsx-panel-max #wsxChatPane {
  position: fixed;
  left: var(--wsx-cmax-l, 248px); top: var(--wsx-cmax-t, 0px);
  width: var(--wsx-cmax-w, calc(100vw - 248px - var(--wsx-panel-w))); height: var(--wsx-cmax-h, 100vh);
  transform: none; border: none; border-left: 1px solid var(--wsx-line); border-radius: 0;
  box-shadow: none; z-index: 20; overflow: hidden; background: var(--wsx-surface);
}
@media (max-width: 640px) {
  body.wsx-panel-max #wsxChatPane { position: static; left: auto; top: auto; width: auto; height: auto; border: none; z-index: auto; }
}
/* free-text filter on the notifications pane */
.wsx-nt-filter { flex: none; padding: 8px 12px 4px; }
.wsx-nt-filter input { width: 100%; box-sizing: border-box; border: 1px solid var(--wsx-line); border-radius: 9px; background: #fff; padding: 8px 12px; font: 13px/1.3 var(--font-sans, system-ui); color: var(--wsx-ink); outline: none; transition: border-color .14s, box-shadow .14s; }
.wsx-nt-filter input:focus { border-color: var(--wsx-green); box-shadow: 0 0 0 3px rgba(60,117,56,.13); }
.wsx-nt-filter input::placeholder { color: var(--wsx-faint); }
.wsx-panel-h-title { font-size: 15px; font-weight: 800; color: var(--wsx-ink); display: block; }
.wsx-panel-h-sub { font-size: 11px; color: var(--wsx-faint); }
.wsx-tab-badge { display: none; margin-left: auto; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px; background: #D1453B; color: #fff; font-size: 10px; font-weight: 700; align-items: center; justify-content: center; }
.wsx-tab-badge.show { display: inline-flex; }
/* ---- WhatsApp-style chat list (the panel's home view) ----------------- */
.wsx-panel-h-l { flex: 1; min-width: 0; }
.wsx-panel-bell { position: relative; flex: none; border: none; background: transparent; color: var(--wsx-muted); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .14s var(--wsx-ease), color .14s var(--wsx-ease), transform .12s var(--wsx-ease); }
.wsx-panel-bell svg { width: 18px; height: 18px; }
.wsx-panel-bell:hover { background: var(--wsx-line); color: var(--wsx-ink); }
.wsx-panel-bell:active { transform: scale(.9); }
.wsx-panel-bell .wsx-tab-badge { position: absolute; top: -3px; right: -3px; margin: 0; box-shadow: 0 0 0 2px var(--wsx-surface); }
.wsx-panel-menu { flex: none; border: none; background: transparent; color: var(--wsx-muted); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .14s var(--wsx-ease), color .14s var(--wsx-ease), transform .12s var(--wsx-ease); }
.wsx-panel-menu svg { width: 18px; height: 18px; }
.wsx-panel-menu:hover { background: var(--wsx-line); color: var(--wsx-ink); }
.wsx-panel-menu:active { transform: scale(.9); }
.wsx-snooze-menu button[disabled] { opacity: .42; cursor: default; }
.wsx-snooze-menu button[disabled]:hover { background: transparent; }
.wsx-lm-n { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff; background: #3C7538; border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }

.wsx-clist { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.wsx-cl-search { position: relative; display: flex; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--wsx-line); flex: none; }
.wsx-cl-search input { flex: 1; width: 100%; border: none; outline: none; background: #F1F4F0; border-radius: 10px; padding: 9px 30px 9px 32px; font: 13px/1 var(--font-sans, system-ui); color: var(--wsx-ink); transition: background .14s var(--wsx-ease), box-shadow .14s var(--wsx-ease); }
.wsx-cl-search input::placeholder { color: var(--wsx-faint); }
.wsx-cl-search input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(60,117,56,.16); }
.wsx-cl-search-ic { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--wsx-faint); pointer-events: none; display: flex; }
.wsx-cl-search-ic svg { width: 15px; height: 15px; }
.wsx-cl-search-x { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--wsx-faint); cursor: pointer; padding: 3px; display: flex; border-radius: 6px; transition: color .12s var(--wsx-ease); }
.wsx-cl-search-x svg { width: 14px; height: 14px; }
.wsx-cl-search-x:hover { color: var(--wsx-ink); }
.wsx-cl-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 84px; }
.wsx-cl-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 9px 14px; position: relative; transition: background .13s var(--wsx-ease); }
.wsx-cl-row::after { content: ''; position: absolute; left: 66px; right: 0; bottom: 0; height: 1px; background: var(--wsx-line); opacity: .55; }
.wsx-cl-row:last-child::after { display: none; }
.wsx-cl-row:hover { background: #F4F8F5; }
.wsx-cl-row:active { background: #EAF2EB; }
.wsx-cl-row.active { background: #EAF4EC; }
.wsx-cl-av { width: 44px; height: 44px; flex: none; border-radius: 50%; background: linear-gradient(160deg, #7FB98F, #3C7538); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; }
.wsx-cl-av img { width: 100%; height: 100%; object-fit: cover; }
.wsx-cl-av-team { background: linear-gradient(160deg, #FFC94D, #F0A500); color: #5a3c00; font-size: 19px; }
.wsx-cl-av-grp { background: linear-gradient(160deg, #5FB392, #2F6E4E); }
.wsx-cl-main { flex: 1; min-width: 0; }
.wsx-cl-top { display: flex; align-items: baseline; gap: 8px; }
.wsx-cl-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--wsx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-cl-desig, .wsx-chat-desig { font-weight: 500; color: var(--wsx-faint); font-size: 12px; }
.wsx-mn-desig { color: var(--wsx-faint); font-size: 11px; font-weight: 500; }
.wsx-msg-desig { color: var(--wsx-faint); font-weight: 500; font-size: 10.5px; }
.wsx-ge-mdesig { color: var(--wsx-faint); font-weight: 400; font-size: 11.5px; }
.wsx-cl-time { flex: none; font-size: 11px; color: var(--wsx-faint); font-weight: 500; }
.wsx-cl-bot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.wsx-cl-prev { flex: 1; min-width: 0; font-size: 12.5px; color: var(--wsx-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-cl-prev b { font-weight: 600; color: var(--wsx-muted); }
.wsx-cl-prev-empty { font-style: italic; opacity: .85; }
.wsx-cl-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--wsx-green); box-shadow: 0 0 0 3px rgba(60,117,56,.12); }
.wsx-cl-badge { flex: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--wsx-green); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.wsx-cl-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: block; }
/* "@" marker on a chat row that has an UNREAD mention of you (WhatsApp-style) */
.wsx-cl-at { flex: none; margin-left: 5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--wsx-green); color: #fff; font: 800 11px/1 var(--font-sans, system-ui); display: inline-flex; align-items: center; justify-content: center; }
/* Floating "@" inside a thread → jump to the unread mention. Bottom-right, above
   the composer; .wsx-chat-pane is position:relative so it anchors there. */
/* --wsx-fab-b is measured in _syncFabOffset(): the exact height of the composer
   cluster + a gap, so the button sits ABOVE the text box and never on it however
   tall the composer grows. The literal is only a first-paint fallback. */
.wsx-at-fab { position: absolute; right: 14px; bottom: var(--wsx-fab-b, 92px); z-index: 6; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 30px; height: 30px; padding: 0 9px; border: none; border-radius: 15px; background: var(--wsx-green); color: #fff; font: 800 14px/1 var(--font-sans, system-ui); cursor: pointer; box-shadow: 0 3px 12px rgba(60,117,56,.38); transition: transform .12s var(--wsx-ease), background .14s; }
.wsx-at-fab:hover { background: var(--wsx-green-d); }
.wsx-at-fab:active { transform: scale(.92); }
.wsx-at-n { font-size: 11px; font-weight: 700; }
/* "Jump to latest" — shown when scrolled up; CENTRED just above the composer.
   Same anchor (.wsx-chat-pane is position:relative) as the "@" FAB, which sits
   at the right, so the two never collide. */
/* Centred with AUTO MARGINS, deliberately not `left:50% + translateX(-50%)`:
   the transform version put the centring INSIDE `transform`, so the moment any
   other rule/animation set a transform (hover, focus, motion) the -50% offset was
   lost and the button jumped half its width to the right — landing off-target and
   feeling "broken". With left/right:0 + margin auto the position lives in the box
   model, so scaling on hover/press can never move it. */
.wsx-tobottom { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: var(--wsx-fab-b, 92px); z-index: 6; width: 30px; height: 30px; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--wsx-line); border-radius: 50%; background: #fff; color: var(--wsx-green); cursor: pointer; box-shadow: 0 3px 12px rgba(20,40,30,.20); transition: transform .12s var(--wsx-ease, ease), box-shadow .14s; }
.wsx-tobottom:hover { transform: scale(1.08); box-shadow: 0 5px 16px rgba(20,40,30,.26); }
.wsx-tobottom:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .wsx-tobottom { transition: none; } }
.wsx-cl-row.unread .wsx-cl-name { font-weight: 700; }
.wsx-cl-row.unread .wsx-cl-prev { color: var(--wsx-ink); font-weight: 500; }
.wsx-cl-row.unread .wsx-cl-time { color: var(--wsx-green-d); font-weight: 700; }
.wsx-cl-fab { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; border-radius: 16px; border: none; cursor: pointer; background: linear-gradient(160deg, #4FB477, #2C9A54); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(46,158,87,.38); transition: transform .15s var(--wsx-ease), box-shadow .15s var(--wsx-ease), filter .15s var(--wsx-ease); z-index: 5; }
.wsx-cl-fab svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .wsx-cl-fab:hover { filter: brightness(1.05); box-shadow: 0 14px 30px rgba(46,158,87,.44); } }
.wsx-cl-fab:active { transform: scale(.92); }
.wsx-cl-empty { text-align: center; padding: 46px 24px; color: var(--wsx-faint); }
.wsx-cl-empty-ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: #EAF4EC; color: var(--wsx-green-d); display: flex; align-items: center; justify-content: center; }
.wsx-cl-empty-ic svg { width: 26px; height: 26px; }
.wsx-cl-empty-t { font-size: 14px; font-weight: 700; color: var(--wsx-ink); margin-bottom: 4px; }
.wsx-cl-empty-s { font-size: 12px; }
/* notifications back-bar (notifications are now a secondary view) */
.wsx-notif-top { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--wsx-line); flex: none; }
.wsx-notif-top .wsx-sec-lbl { padding: 0; }
/* "New chat" sheet (FAB target, rendered inside the dock pop) */
.wsx-nc-acts { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.wsx-nc-act { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: transparent; cursor: pointer; padding: 9px 8px; border-radius: 10px; text-align: left; transition: background .13s var(--wsx-ease), transform .1s var(--wsx-ease); }
.wsx-nc-act:hover { background: #F4F8F5; }
.wsx-nc-act:active { transform: scale(.985); }
.wsx-nc-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #EAF4EC; color: var(--wsx-green-d); display: flex; align-items: center; justify-content: center; }
.wsx-nc-ic svg { width: 19px; height: 19px; }
.wsx-nc-ic-grp { background: linear-gradient(160deg, #4FB477, #2C9A54); color: #fff; }
.wsx-nc-lbl { font-size: 14px; font-weight: 600; color: var(--wsx-ink); }
.wsx-nc-search { position: relative; display: flex; align-items: center; margin: 4px 0 8px; }
.wsx-nc-search input { flex: 1; border: none; outline: none; background: #F1F4F0; border-radius: 10px; padding: 9px 12px 9px 32px; font: 13px/1 var(--font-sans, system-ui); color: var(--wsx-ink); transition: background .14s var(--wsx-ease), box-shadow .14s var(--wsx-ease); }
.wsx-nc-search input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(60,117,56,.16); }
.wsx-nc-search .wsx-cl-search-ic { left: 11px; }
.wsx-nc-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--wsx-faint); font-weight: 700; padding: 6px 8px 4px; }
.wsx-nc-people { display: flex; flex-direction: column; gap: 2px; }
.wsx-nc-person { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: transparent; cursor: pointer; padding: 7px 8px; border-radius: 10px; text-align: left; transition: background .13s var(--wsx-ease), transform .1s var(--wsx-ease); }
.wsx-nc-person:hover { background: #F4F8F5; }
.wsx-nc-person:active { transform: scale(.985); }
.wsx-nc-person .wsx-cl-av { width: 38px; height: 38px; font-size: 13px; }
.wsx-nc-pname { font-size: 13.5px; font-weight: 500; color: var(--wsx-ink); }
/* collapsed-notifications bar (shown above an open chat) */
.wsx-notif-collapsed { display: flex; align-items: center; gap: 7px; width: 100%; border: none; border-bottom: 1px solid var(--wsx-line); background: #F4F8F5; cursor: pointer; padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--wsx-green-d); transition: background .13s; }
.wsx-notif-collapsed:hover { background: #EAF4EC; }
/* panes */
.wsx-notif-pane { flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
.wsx-notif-readall { flex: none; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; margin: 8px 12px 2px; border: 1px solid var(--wsx-line); background: #fff; color: var(--wsx-green-d); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer; transition: background .13s var(--wsx-ease), transform .1s var(--wsx-ease); }
.wsx-notif-readall svg { width: 13px; height: 13px; }
.wsx-notif-readall:hover { background: #EAF4EC; }
.wsx-notif-readall:active { transform: scale(.96); }
/* ---- notification category tab strip ---- */
.wsx-nt-tabs { display: flex; flex: none; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--wsx-line); }
.wsx-nt-tabs::-webkit-scrollbar { display: none; }
.wsx-nt-tab { position: relative; flex: none; border: none; background: transparent; font: 600 12px/1 var(--font-sans, system-ui); color: var(--wsx-muted); padding: 6px 10px 8px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; transition: color .12s var(--wsx-ease), background .12s var(--wsx-ease); display: inline-flex; align-items: center; gap: 4px; }
.wsx-nt-tab:hover { color: var(--wsx-ink); background: #F4F8F5; }
.wsx-nt-tab.active { color: var(--wsx-green-d); }
.wsx-nt-tab.active::after { content: ''; position: absolute; bottom: 0; left: 8px; right: 8px; height: 2px; border-radius: 2px 2px 0 0; background: var(--wsx-green); }
.wsx-nt-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; background: var(--wsx-green); color: #fff; font-size: 9.5px; font-weight: 700; padding: 0 3px; line-height: 1; }
.wsx-nt-tab.active .wsx-nt-tab-badge { background: var(--wsx-green-d); }
.wsx-chat-pane { flex: 1; min-height: 0; flex-direction: column; position: relative; }
/* drag-and-drop file overlay */
.wsx-drop { position: absolute; inset: 8px; z-index: 25; display: none; align-items: center; justify-content: center; background: rgba(60,117,56,.10); border: 2px dashed var(--wsx-green); border-radius: 16px; pointer-events: none; }
.wsx-chat-pane.wsx-dragging .wsx-drop { display: flex; }
.wsx-drop-in { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--wsx-line); border-radius: 14px; padding: 12px 20px; font-weight: 700; font-size: 14px; color: var(--wsx-green-d); box-shadow: 0 12px 34px rgba(20,40,30,.22); }
.wsx-drop-in svg { width: 18px; height: 18px; }
/* tool pane — hosts AI / My Activity / My Mentions inside the right panel */
.wsx-tool-pane { flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
.wsx-hosted {
  position: static !important; inset: auto !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  height: 100% !important; max-height: none !important;
  margin: 0 !important; transform: none !important; opacity: 1 !important;
  box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  visibility: visible !important; pointer-events: auto !important; z-index: auto !important;
}
/* keep the source overlays out of the way while their panel is hosted */
body.wsx-host-ai #aiOverlay { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; }
body.wsx-host-drawer #sideDrawerOverlay { display: none !important; }
.wsx-chat-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--wsx-line); }
.wsx-chat-back { border: none; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--wsx-muted); width: 28px; height: 28px; border-radius: 7px; }
.wsx-chat-back:hover { background: var(--wsx-line); color: var(--wsx-ink); }
.wsx-chat-title { font-size: 14px; font-weight: 700; color: var(--wsx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-chat-titwrap { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.wsx-chat-typing { font-size: 11px; color: var(--wsx-green-d); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: wsxTypeIn .18s var(--wsx-ease); }
/* Typing indicator just ABOVE the composer (WhatsApp-style), not in the header. */
.wsx-typing-bar { font-size: 11.5px; color: var(--wsx-green-d); font-weight: 600; display: flex; align-items: center; gap: 5px; padding: 3px 14px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: wsxTypeIn .18s var(--wsx-ease); }
@keyframes wsxTypeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.wsx-typing-dots { display: inline-flex; gap: 2px; padding-bottom: 1px; }
.wsx-typing-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--wsx-green-d); display: block; animation: wsxTypeDot 1s infinite ease-in-out; }
.wsx-typing-dots i:nth-child(2) { animation-delay: .15s; }
.wsx-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wsxTypeDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .wsx-typing-dots i { animation: none; opacity: .6; } .wsx-chat-typing { animation: none; } }

/* notifications pane */
#wsxNotifList { flex: 1; overflow-y: auto; padding: 8px 10px; }
.wsx-nt { display: flex; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; transition: background .13s; align-items: flex-start; }
.wsx-nt:hover { background: #F4F8F5; }
.wsx-nt.unread { background: #F1F8F3; }
.wsx-nt-ico { position: relative; width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: #EAF4EC; color: var(--wsx-green-d); }
.wsx-nt-ico svg { width: 17px; height: 17px; }
.wsx-nt-ico.nt-appr  { background: #E7F5EC; color: #1F9E4A; }
.wsx-nt-ico.nt-task  { background: #E6F0FB; color: #2E63D8; }
.wsx-nt-ico.nt-ment  { background: #F1ECFB; color: #7A5AD8; }
.wsx-nt-ico.nt-cmt   { background: #E7F2EA; color: #3C7538; }
.wsx-nt-ico.nt-money { background: #FBF1DD; color: #BC8417; }
.wsx-nt-ico.nt-file  { background: #EEEEEE; color: #6B6A65; }
.wsx-nt-ico.nt-stage { background: #FBEEE5; color: #C2622C; }
.wsx-nt-ico.nt-def   { background: #E7F2EA; color: #3C7538; }
/* tiny bell, top-left corner — marks it as a notification */
.wsx-nt-bell { position: absolute; top: -4px; left: -4px; width: 15px; height: 15px; border-radius: 50%; background: #fff; color: #9aa0a6; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,.14); }
.wsx-nt-bell svg { width: 9px; height: 9px; }
.wsx-nt-main { flex: 1; min-width: 0; }
.wsx-nt-text { font-size: 12.5px; color: var(--wsx-ink); line-height: 1.4; }
.wsx-nt-meta { font-size: 10.5px; color: var(--wsx-faint); margin-top: 3px; }
.wsx-nt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wsx-green); flex: none; margin-top: 6px; }
.wsx-sec-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--wsx-faint); font-weight: 700; padding: 12px 12px 5px; }

/* ---- right-edge panel toggle + Shhh -------------------------------------- */
#wsxPanelTab {
  position: fixed; right: 16px; bottom: 14px; z-index: 9350; display: flex; gap: 8px; align-items: center;
  transition: right .28s var(--wsx-ease);
}
/* Whenever the panel is open, slide the edge cluster just outside the panel's
   left seam so it never covers the panel's own bottom controls — the chat-list
   ＋ FAB, an open conversation's composer, the AI Ask button, etc. */
body.wsx-panel-open:not(.wsx-mobile-pings) #wsxPanelTab { right: calc(var(--wsx-panel-w) + 16px); }
/* …EXCEPT when the chat is expanded into the MAIN panel: the seam position then
   lands squarely on the centre composer's Send button. Put the cluster back
   inside the right panel, which is showing the list/notifications (no composer)
   while maximised. Must follow the rule above to win on source order. */
body.wsx-panel-max:not(.wsx-mobile-pings) #wsxPanelTab { right: 78px; }   /* left of the panel's ＋ New-chat FAB (right 16px + 50px + gap) so neither hides the other */
/* Chat expanded to centre → the floating dock retracts off the bottom edge so it
   can't sit over the conversation. Push the pointer to the bottom edge and it
   slides back (body.wsx-dock-peek, set in _bindDockPeek). translateX(-50%) is
   REPEATED in every transform — dropping it would un-centre the dock. */
body.wsx-panel-max #wsxDock {
  transform: translateX(-50%) translateY(160%); opacity: 0; pointer-events: none;
  transition: transform .26s var(--wsx-ease), opacity .2s var(--wsx-ease);
}
body.wsx-panel-max.wsx-dock-peek #wsxDock { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { body.wsx-panel-max #wsxDock { transition: none; } }

/* Dedicated Pings/team-chat button — our logo set inside a green chat bubble. */
.wsx-edge-chat { background: linear-gradient(160deg, #4FB477, #2C9A54) !important; border: 1px solid rgba(255,255,255,.5) !important; box-shadow: 0 8px 20px rgba(46,158,87,.34) !important; border-radius: 14px 14px 14px 5px !important; overflow: visible; }
.wsx-edge-chat:hover { filter: brightness(1.05); }
.wsx-edge-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: #fff; padding: 3px; display: block; box-sizing: border-box; }

/* Focus (Shhh) shows ONLY on the notifications view (desktop). */
#wsxShhh { display: none !important; }
body.wsx-panel-open:not(.wsx-panel-busy) #wsxShhh { display: flex !important; }
/* Focus mode lives on its OWN, at the bottom just outside the left sidebar's
   right edge — not bundled with the chat/notification pair on the right, where
   it read as a third notification control. position:fixed pulls it out of
   #wsxPanelTab's flex row, so chat + bell close up on the right. The offset
   tracks the sidebar's collapsed/expanded width so it always sits just clear
   of it. Desktop only — the mobile rule above still hides it. */
@media (min-width: 901px) {
  body.wsx-panel-open:not(.wsx-panel-busy) #wsxShhh {
    position: fixed; left: 232px; bottom: 14px; right: auto; z-index: 9350;
    transition: left .22s var(--wsx-ease, ease);
  }
  body:has(.sidebar.collapsed) #wsxShhh { left: 74px; }
}

/* When the right panel is open, any modal/popup (OVX order, profile, confirms…)
   shrinks WITH the main area instead of being overlaid by the panel. */
body.wsx-shell-on .modal-backdrop { transition: right .28s var(--wsx-ease); }
body.wsx-panel-open .modal-backdrop { right: var(--wsx-panel-w) !important; }
/* ...but ONLY where the panel is a side strip. On phones the chat panel IS the
   whole screen (--wsx-panel-w 430px ≥ a 390px viewport), so this inset squeezed
   every modal opened from chat to width:0 — it was open, on top, and invisible.
   That is the "tap a video in chat and it opens behind the chat" report: the
   file viewer sat at z 2147483000 with a 0px-wide box. Same specificity as the
   rule above + both !important, so this MUST come after it (later wins). */
@media (max-width: 780px) {
  body.wsx-panel-open .modal-backdrop { right: 0 !important; }
}
/* Tracker / calculator / vendor "work overlays" behave like real pages too:
   pull their right edge in when the chat panel is open so the panel sits BESIDE
   them (not over them), and they shrink with the main column. */
/* calc + store ledger shrink via this rule; the 4 trackers (printing /
   accessories / prod / vendor) are header-aligned in JS (_positionWorkOverlay)
   so they blend like a normal page — see index.html. */
body.wsx-panel-open:not(.wsx-mobile-pings) #calcOverlay,
body.wsx-panel-open:not(.wsx-mobile-pings) #storeLedgerOverlay {
  right: var(--wsx-panel-w) !important; width: auto !important; transition: right .28s var(--wsx-ease);
}
.wsx-edge-btn {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--wsx-line); background: #fff;   /* literal, not var(--surface): this must never inherit a translucent glass value */
  /* Icon is GREEN at rest (was --wsx-muted grey, which read as a blank white
     button next to the green chat logo). Solid green only when active. */
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--wsx-green);
  box-shadow: 0 6px 18px rgba(20,40,30,.12); position: relative;
  transition: transform .14s var(--wsx-ease), color .14s, border-color .14s, background .14s, box-shadow .14s;
}
.wsx-edge-btn svg { width: 20px; height: 20px; }
.wsx-edge-btn:hover { color: var(--wsx-green-d); border-color: #CFE6D6; }
.wsx-edge-btn:active { transform: scale(.93); }
.wsx-edge-btn.active { background: var(--wsx-green); border-color: var(--wsx-green); color: #fff; }
/* The chat button carries the brand LOGO, so filling it solid green would bury
   the mark. It gets a subtler "on" treatment instead: tinted plate + green rim. */
.wsx-edge-btn.wsx-edge-chat.active { background: #EAF4EC; border-color: var(--wsx-green); color: var(--wsx-green-d); box-shadow: 0 0 0 2px rgba(60,117,56,.22), 0 6px 18px rgba(20,40,30,.12); }
.wsx-edge-btn .wsx-edge-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #D1453B; color: #fff; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.wsx-edge-btn .wsx-edge-badge.show { display: flex; }
#wsxHelpDock { /* moved Help, above pings/notifications */ }
.wsx-edge-btn.is-shhh-on { background: #5A4FB3; border-color: #5A4FB3; color: #fff; }

/* Shhh menu */
.wsx-shhh-menu { position: fixed; left: 0; top: 0; z-index: 2147482050; width: 296px; max-height: min(72vh, 560px); overflow-y: auto; background: var(--wsx-surface); border: 1px solid var(--wsx-line); border-radius: 13px; box-shadow: 0 16px 44px rgba(20,40,30,.2); padding: 8px; opacity: 0; transform: translateY(8px) scale(.97); pointer-events: none; transition: opacity .16s var(--wsx-ease), transform .16s var(--wsx-ease); transform-origin: bottom center; }
.wsx-shhh-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.wsx-shhh-h { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--wsx-faint); font-weight: 700; padding: 6px 8px 8px; }
.wsx-shhh-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: transparent; cursor: pointer; padding: 9px 10px; border-radius: 9px; font-size: 13px; color: var(--wsx-ink); transition: background .12s; }
.wsx-shhh-opt:hover { background: #F2F0FA; }
.wsx-shhh-active { padding: 9px 10px; border-radius: 9px; background: #EEEcFA; color: #5A4FB3; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.wsx-shhh-active button { border: none; background: #5A4FB3; color: #fff; border-radius: 7px; padding: 3px 9px; font-size: 11px; font-weight: 600; cursor: pointer; }
/* Quick durations sit in a 2-up grid — four one-line rows read as a long menu
   when the schedule list below is the part that matters. */
.wsx-shhh-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 3px 4px; }
.wsx-shhh-quick .wsx-shhh-opt { justify-content: center; background: #F6F5FB; font-weight: 600; font-size: 12.5px; padding: 8px 6px; }
.wsx-shhh-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--wsx-faint); font-weight: 700; padding: 10px 8px 6px; margin-top: 4px; border-top: 1px solid var(--wsx-line); }
.wsx-shhh-univ { text-transform: none; letter-spacing: 0; font-size: 10.5px; font-weight: 600; color: #5A4FB3; background: #EEEcFA; border-radius: 20px; padding: 2px 7px; }
.wsx-shhh-empty { font-size: 12px; color: var(--wsx-muted); padding: 2px 9px 8px; line-height: 1.45; }
.wsx-shhh-list { display: flex; flex-direction: column; gap: 3px; }
.wsx-shhh-row { display: flex; align-items: center; gap: 7px; padding: 7px 6px 7px 8px; border-radius: 9px; }
.wsx-shhh-row:hover { background: #F6F5FB; }
.wsx-shhh-row.now { background: #EEEcFA; }
.wsx-shhh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wsx-shhh-info b { font-size: 12.5px; color: var(--wsx-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsx-shhh-info span { font-size: 11px; color: var(--wsx-muted); font-variant-numeric: tabular-nums; }
/* A real switch, not a checkbox — the row's whole job is on/off. */
.wsx-shhh-tg { flex: none; width: 32px; height: 18px; border-radius: 20px; border: none; background: #D6D3E4; cursor: pointer; padding: 0; position: relative; transition: background .16s; }
.wsx-shhh-tg i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.24); transition: transform .16s var(--wsx-ease); }
.wsx-shhh-tg.on { background: #5A4FB3; }
.wsx-shhh-tg.on i { transform: translateX(14px); }
.wsx-shhh-ed { flex: none; border: none; background: transparent; color: var(--wsx-faint); cursor: pointer; padding: 3px; border-radius: 6px; display: flex; }
.wsx-shhh-ed svg { width: 14px; height: 14px; }
.wsx-shhh-ed:hover { color: #5A4FB3; background: #EEEcFA; }
.wsx-shhh-del { flex: none; border: none; background: transparent; color: var(--wsx-faint); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.wsx-shhh-del:hover { color: #D1453B; background: #FBECEA; }
.wsx-shhh-add { width: 100%; margin-top: 6px; border: 1px dashed var(--wsx-line); background: transparent; color: #5A4FB3; border-radius: 9px; padding: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wsx-shhh-add:hover { background: #F6F5FB; border-color: #C9C2E4; }
.wsx-shhh-form { margin-top: 6px; padding: 9px; border-radius: 10px; background: #F6F5FB; display: flex; flex-direction: column; gap: 8px; }
.wsx-shhh-in { width: 100%; border: 1px solid var(--wsx-line); border-radius: 7px; padding: 7px 8px; font: inherit; font-size: 12.5px; color: var(--wsx-ink); background: #fff; }
.wsx-shhh-in:focus { outline: none; border-color: #5A4FB3; box-shadow: 0 0 0 2px rgba(90,79,179,.16); }
.wsx-shhh-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wsx-shhh-hint { font-size: 10.5px; color: var(--wsx-muted); line-height: 1.4; margin: -3px 1px 0; }
.wsx-shhh-day { border: 1px solid var(--wsx-line); background: #fff; border-radius: 7px; padding: 6px 0; font-size: 11px; font-weight: 700; color: var(--wsx-muted); cursor: pointer; }
.wsx-shhh-day.on { background: #5A4FB3; border-color: #5A4FB3; color: #fff; }
.wsx-shhh-times { display: flex; align-items: center; gap: 7px; }
.wsx-shhh-times span { font-size: 11.5px; color: var(--wsx-muted); }
.wsx-shhh-fbtn { display: flex; gap: 6px; justify-content: flex-end; }
.wsx-shhh-fbtn button { border: 1px solid var(--wsx-line); background: #fff; color: var(--wsx-ink); border-radius: 7px; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.wsx-shhh-fbtn button.pri { background: #5A4FB3; border-color: #5A4FB3; color: #fff; }
/* Focus running shows on its dock tile too, so it's visible without hovering. */
.wsx-dock-btn.is-shhh-on { box-shadow: inset 0 0 0 2px #5A4FB3; border-radius: 12px; }

/* ---- Pings chat ---------------------------------------------------------- */
.wsx-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wsx-chan-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--wsx-line); }
.wsx-chan-sel { flex: 1; border: 1px solid var(--wsx-line); border-radius: 9px; padding: 6px 9px; font-size: 12.5px; font-weight: 600; color: var(--wsx-ink); background: var(--wsx-surface); cursor: pointer; }
.wsx-chan-new { border: none; background: var(--wsx-green); color: #fff; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 16px; flex: none; }
.wsx-msgs { flex: 1; overflow-y: auto; padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 2px;
  background:
    radial-gradient(1200px 320px at 50% -10%, rgba(60,117,56,.05), transparent 60%),
    linear-gradient(180deg, #FBFCFB, #F6F9F6); }
/* day separator */
.wsx-day { align-self: center; margin: 12px 0 8px; }
.wsx-day span { font-size: 10.5px; font-weight: 700; color: var(--wsx-faint); background: rgba(255,255,255,.78); border: 1px solid var(--wsx-line); padding: 3px 11px; border-radius: 999px; box-shadow: 0 1px 2px rgba(20,40,30,.05); }
/* Floating date pill: says which day you're scrolled into, then fades. Reads as
   the same object as the .wsx-day divider above (same type/'999px'/border), just
   lifted off the thread — so it never looks like a second, competing control. */
/* Sits BELOW the sticky chat header (WhatsApp) — at top:10px it overlapped the
   header and read as part of it. The header is ~41px (9px padding + content). */
.wsx-day-pill { position: absolute; top: 52px; left: 50%; z-index: 5; pointer-events: none; opacity: 0; transform: translate(-50%, -7px); font-size: 10.5px; font-weight: 700; color: var(--wsx-ink, #23291f); background: rgba(255,255,255,.94); border: 1px solid var(--wsx-line); padding: 3px 11px; border-radius: 999px; box-shadow: 0 3px 12px rgba(20,40,30,.16); white-space: nowrap; transition: opacity .18s var(--wsx-ease, ease), transform .18s var(--wsx-ease, ease); }
.wsx-day-pill.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .wsx-day-pill { transition: none; } }
/* message row: avatar (them) + content column */
.wsx-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 86%; margin-top: 7px; }
.wsx-msg.grouped { margin-top: 2px; }
.wsx-msg.them { align-self: flex-start; }
.wsx-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.wsx-av { width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(160deg, #7FB98F, #3C7538); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; box-shadow: 0 2px 5px rgba(20,40,30,.16); }
.wsx-av.spacer { visibility: hidden; }
.wsx-msg-c { display: flex; flex-direction: column; min-width: 0; }
.wsx-msg.me .wsx-msg-c { align-items: flex-end; }
.wsx-msg-sender { font-size: 10.5px; font-weight: 700; color: var(--wsx-green-d); margin: 0 0 3px 6px; }
/* Client-portal: subtle yellow chip on the staff side marking a message the
   customer can see in their portal (clientVisible == true). Matches the
   "Visible to client" pill used on files in the main app. */
.wsx-cv-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px 6px; padding: 1px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; color: #6E4A0E; background: #FFE89A; border: 1px solid #E7C24B; border-radius: 999px; white-space: nowrap; }
.wsx-cv-chip svg { width: 11px; height: 11px; flex-shrink: 0; }
.wsx-msg.me .wsx-cv-chip { margin-left: auto; margin-right: 6px; }
/* Client IDENTITY pill — marks a person/channel that is an external customer
   (role == 'client' / channel.clientGroup). Distinct from .wsx-cv-chip, which
   marks a single message/file the customer can SEE. Same warm-yellow family so
   "client" reads consistently everywhere it appears. */
.wsx-client-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; height: 16px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; line-height: 1; text-transform: uppercase; color: #6E4A0E; background: #FFE08A; border: 1px solid #E4B53A; border-radius: 999px; white-space: nowrap; vertical-align: middle; flex-shrink: 0; }
.wsx-client-pill svg { width: 9.5px; height: 9.5px; flex-shrink: 0; }
.wsx-header-labels, .wsx-cl-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.wsx-header-labels { margin-top: 3px; }.wsx-cl-labels { margin-top: 4px; }
.wsx-chat-label { --label-bg:#E8F4E9; --label-border:#B8DDBD; --label-ink:#285F31; display: inline-flex; align-items: center; gap: 3px; min-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--label-bg); border: 1px solid var(--label-border); color: var(--label-ink); font-size: 9.5px; line-height: 1; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.wsx-chat-label.tone-amber, .wsx-label-swatch.tone-amber, .wsx-lp-tones button.tone-amber { --label-bg:#FFF1C7; --label-border:#EBC86B; --label-ink:#74500B; }.wsx-chat-label.tone-rose, .wsx-label-swatch.tone-rose, .wsx-lp-tones button.tone-rose { --label-bg:#FBE5E2; --label-border:#ECB5AE; --label-ink:#873B34; }.wsx-chat-label.tone-plum, .wsx-label-swatch.tone-plum, .wsx-lp-tones button.tone-plum { --label-bg:#F1E9F6; --label-border:#D5BFE2; --label-ink:#69417C; }.wsx-chat-label.tone-slate, .wsx-label-swatch.tone-slate, .wsx-lp-tones button.tone-slate { --label-bg:#EAF0EE; --label-border:#C5D2CE; --label-ink:#40544E; }.wsx-chat-label.tone-client, .wsx-label-swatch.tone-client { --label-bg:#FFE8A5; --label-border:#DDAF2E; --label-ink:#68480A; }
.wsx-chat-label.system { min-height: 19px; }.wsx-label-lock { display: inline-flex; width: 10px; height: 10px; }.wsx-label-lock svg { width: 100%; height: 100%; }
.wsx-label-picker { --lp-ease:cubic-bezier(.23,1,.32,1); width:100%; max-width:520px; margin:0 auto; color:var(--wsx-ink); }
.wsx-lp-intro { display:flex; align-items:flex-start; gap:12px; margin:0 0 14px; padding:14px; border:1px solid #CFE2D1; border-radius:16px; background:linear-gradient(145deg,#F7FBF7,#EEF7F0); }
.wsx-lp-intro-ic { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:12px; color:#fff; background:#3F7C3B; box-shadow:0 6px 16px rgba(47,92,44,.18); }.wsx-lp-intro-ic svg { width:19px; height:19px; }
.wsx-lp-intro strong { display:block; margin:1px 0 3px; font-size:14px; line-height:1.3; }.wsx-lp-intro div>span { display:block; color:var(--wsx-muted); font-size:12px; line-height:1.45; }
.wsx-lp-section { margin:0 0 12px; padding:13px; border:1px solid var(--wsx-line); border-radius:16px; background:#fff; box-shadow:0 2px 8px rgba(31,56,37,.035); }
.wsx-lp-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }.wsx-lp-section-head>span { font-size:12px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; color:#315A35; }.wsx-lp-section-head small { font-size:11px; font-weight:650; color:var(--wsx-muted); }
.wsx-lp-search { display:flex; align-items:center; gap:9px; min-height:44px; margin:0 0 9px; padding:0 12px; border:1px solid var(--wsx-line); border-radius:12px; background:#F9FBF9; transition:border-color .16s var(--lp-ease),box-shadow .16s var(--lp-ease); }.wsx-lp-search:focus-within { border-color:#68A36B; box-shadow:0 0 0 3px rgba(63,124,59,.12); }.wsx-lp-search>span { display:flex; width:17px; height:17px; color:#648069; }.wsx-lp-search svg { width:100%; height:100%; }.wsx-lp-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--wsx-ink); font:500 14px var(--font-sans,system-ui); }
.wsx-label-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.wsx-label-choice { display:flex; align-items:center; gap:9px; min-height:52px; width:100%; padding:7px 9px; border:1px solid var(--wsx-line); border-radius:13px; background:#fff; color:var(--wsx-ink); text-align:left; cursor:pointer; touch-action:manipulation; transition:transform .13s var(--lp-ease),border-color .16s var(--lp-ease),background-color .16s var(--lp-ease),box-shadow .16s var(--lp-ease); }.wsx-label-choice:hover { border-color:#AECFB2; background:#FAFCFA; }.wsx-label-choice:active { transform:scale(.975); }.wsx-label-choice.on { border-color:#6DA973; background:#F1F8F2; box-shadow:inset 0 0 0 1px rgba(63,124,59,.08); }.wsx-label-choice.locked { cursor:default; border-color:#E4C25F; background:#FFFAEA; }.wsx-label-choice.locked:active { transform:none; }
.wsx-label-choice-mark { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; border:1.5px solid #B8C6BB; border-radius:7px; color:#fff; background:#fff; }.wsx-label-choice.on .wsx-label-choice-mark { border-color:#3F7C3B; background:#3F7C3B; }.wsx-label-choice.locked .wsx-label-choice-mark { border:0; color:#765514; background:#FFE7A1; }.wsx-label-choice-mark svg { width:13px; height:13px; }
.wsx-label-swatch { display:block; width:10px; height:28px; flex:0 0 10px; border:1px solid var(--label-border,#B8DDBD); border-radius:999px; background:var(--label-bg,#E8F4E9); }
.wsx-label-choice-copy { min-width:0; flex:1; }.wsx-label-choice-copy strong,.wsx-label-choice-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.wsx-label-choice-copy strong { font-size:12.5px; line-height:1.3; }.wsx-label-choice-copy small { margin-top:2px; color:var(--wsx-muted); font-size:10.5px; line-height:1.25; }.wsx-label-state { flex:0 0 auto; padding:4px 7px; border-radius:999px; color:#765514; background:#FFE7A1; font-size:9.5px; font-weight:800; text-transform:uppercase; }
.wsx-lp-create { background:#F8FBF8; }.wsx-lp-field { display:block; }.wsx-lp-field>span { display:block; margin:0 0 6px; color:#415C45; font-size:11px; font-weight:750; }.wsx-lp-field input { box-sizing:border-box; width:100%; min-height:44px; padding:0 12px; border:1px solid var(--wsx-line); border-radius:12px; outline:0; background:#fff; color:var(--wsx-ink); font:500 14px var(--font-sans,system-ui); transition:border-color .16s var(--lp-ease),box-shadow .16s var(--lp-ease); }.wsx-lp-field input:focus { border-color:#68A36B; box-shadow:0 0 0 3px rgba(63,124,59,.12); }
.wsx-lp-tones { display:flex; gap:8px; margin:10px 0; }.wsx-lp-tones button { --label-bg:#E8F4E9; --label-border:#B8DDBD; width:30px; height:30px; padding:0; border:5px solid #fff; border-radius:50%; outline:1px solid var(--label-border); background:var(--label-bg); cursor:pointer; transition:transform .13s var(--lp-ease),box-shadow .16s var(--lp-ease); }.wsx-lp-tones button.on { box-shadow:0 0 0 2px #3F7C3B; }.wsx-lp-tones button:active { transform:scale(.92); }
.wsx-lp-add,.wsx-lp-cancel,.wsx-lp-save { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:12px; font:750 13px var(--font-sans,system-ui); cursor:pointer; touch-action:manipulation; transition:transform .13s var(--lp-ease),background-color .16s var(--lp-ease),opacity .16s var(--lp-ease); }.wsx-lp-add:active,.wsx-lp-cancel:active,.wsx-lp-save:active { transform:scale(.975); }.wsx-lp-add:disabled,.wsx-lp-save:disabled { cursor:wait; opacity:.62; }.wsx-lp-add { width:100%; padding:0 13px; border:1px solid #A9CFAE; color:#2D6733; background:#EDF7EF; }.wsx-lp-add svg { width:16px; height:16px; }
.wsx-lp-actions { position:sticky; bottom:-14px; display:flex; gap:9px; margin:4px -16px -14px; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--wsx-line); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); }.wsx-lp-cancel,.wsx-lp-save { flex:1; border:1px solid var(--wsx-line); }.wsx-lp-cancel { color:var(--wsx-ink); background:#fff; }.wsx-lp-save { border-color:#3F7C3B; color:#fff; background:#3F7C3B; }.wsx-lp-save:hover { background:#356B32; }
@media (max-width:520px) { .wsx-sheet-body { padding:12px; }.wsx-label-options { grid-template-columns:1fr; }.wsx-lp-section { padding:12px; }.wsx-lp-actions { bottom:-12px; margin-left:-12px; margin-right:-12px; margin-bottom:-12px; padding-left:12px; padding-right:12px; } }
@media (prefers-reduced-motion:reduce) { .wsx-label-choice,.wsx-lp-add,.wsx-lp-cancel,.wsx-lp-save,.wsx-lp-tones button { transition:none; } }
.wsx-bubble { position: relative; background: #fff; border: 1px solid var(--wsx-line); border-radius: 16px 16px 16px 5px; padding: 8px 12px 6px; font-size: 13px; line-height: 1.45; color: var(--wsx-ink); box-shadow: 0 1.5px 4px rgba(20,40,30,.06); word-wrap: break-word; overflow-wrap: anywhere; }
.wsx-msg.me .wsx-bubble { background: linear-gradient(165deg, #EAF7EF, #DCF0E4); border-color: #C4E6CF; border-radius: 16px 16px 5px 16px; }
.wsx-msg.grouped.them .wsx-bubble { border-radius: 16px; }
.wsx-msg.grouped.me .wsx-bubble { border-radius: 16px; }
.wsx-msg-time { display: inline-block; font-size: 9.5px; color: var(--wsx-faint); margin: 2px 0 -1px 9px; float: right; position: relative; top: 3px; font-variant-numeric: tabular-nums; }
.wsx-msg.me .wsx-msg-time { color: #4E8158; }
.wsx-msg-star { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 2px 0 -1px 6px; float: right; color: var(--wsx-green-d); }
.wsx-msg-star svg { width: 13px; height: 13px; }
.wsx-share-note { margin: 0 0 14px; color: var(--wsx-muted); font-size: 13px; line-height: 1.5; }
.wsx-share-label { display: block; margin-bottom: 6px; color: var(--wsx-ink); font-size: 12px; font-weight: 700; }
.wsx-share-input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--wsx-line); border-radius: 10px; background: #F7FAF7; color: var(--wsx-ink); font-size: 13px; }
.wsx-share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wsx-share-opens { margin-top: 8px; font-size: 12.5px; color: var(--wsx-muted); }   /* "Opened 3 times · last on 14 Sept 2026" (15 Sep 2026) */
.wsx-share-actions .wsx-btn { min-height: 44px; }
.wsx-file-share { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.wsx-share-state { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--wsx-line); border-radius: 14px; background: #F7FAF7; color: var(--wsx-ink); }
.wsx-share-state.is-public { border-color: #B8DDBE; background: #EFF8F0; }
.wsx-share-state-ic { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #E3F1E5; color: var(--wsx-green-d); }
.wsx-share-state-ic svg { width: 19px; height: 19px; }
.wsx-share-state strong, .wsx-share-state small { display: block; }
.wsx-share-state strong { margin: 1px 0 4px; font-size: 13.5px; line-height: 1.25; }
.wsx-share-state small { color: var(--wsx-muted); font-size: 12px; line-height: 1.45; }
.wsx-share-field { display: flex; flex-direction: column; gap: 7px; }
.wsx-share-linkrow { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.wsx-share-linkrow .wsx-share-input { flex: 1; min-width: 0; }
.wsx-share-copy { min-width: 92px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 11px; background: var(--wsx-green); color: #fff; font: 700 12.5px/1 var(--font-sans, system-ui); cursor: pointer; transition: transform .15s var(--wsx-ease), background .15s ease-out; }
.wsx-share-copy:hover { background: var(--wsx-green-d); }
.wsx-share-copy:active { transform: scale(.97); }
.wsx-share-copy svg { width: 16px; height: 16px; }
.wsx-share-actions { align-items: center; margin-top: 0; }
.wsx-share-actions .wsx-btn-primary, .wsx-share-actions .wsx-btn-ghost { min-height: 44px; }
.wsx-btn-danger { border-color: #E1B0AB; color: #9F342D; background: #FFF8F7; }
.wsx-btn-danger:hover { border-color: #D98D86; background: #FCECEA; color: #812820; }
@media (max-width: 420px) { .wsx-share-linkrow { flex-direction: column; } .wsx-share-copy { width: 100%; } }
/* entrance — newest bubble only (ease-out, <300ms, no scale-from-0) */
@keyframes wsxMsgIn { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }
.wsx-msg-in .wsx-bubble { animation: wsxMsgIn .22s cubic-bezier(0.23,1,0.32,1); }
.wsx-reply-tag { display: block; border-left: 3px solid var(--wsx-green); background: rgba(60,117,56,.07); border-radius: 7px; padding: 4px 9px; margin-bottom: 5px; font-size: 11.5px; color: var(--wsx-muted); cursor: pointer; transition: background .12s; }
.wsx-reply-tag:hover { background: rgba(60,117,56,.13); }
.wsx-reply-tag b { color: var(--wsx-green-d); display: block; font-size: 10.5px; }
/* The attachment now LEADS the bubble, so its gap belongs underneath. The
   caption is bare inline html with no element to hang a margin on, so the
   space is the attachment's own bottom edge. A photo with no caption keeps
   its tight frame (wsx-media-solo) — a gap there is dead space above the
   timestamp. */
.wsx-msg-att { margin-top: 0; margin-bottom: 6px; }
.wsx-media-solo .wsx-msg-att { margin-bottom: 0; }
.wsx-msg-att img { max-width: 210px; max-height: 220px; border-radius: 12px; display: block; cursor: pointer; box-shadow: 0 2px 8px rgba(20,40,30,.14); transition: transform .16s var(--wsx-ease); }
.wsx-msg-att img:hover { transform: scale(1.015); }
.wsx-msg-att a { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--wsx-green-d); font-weight: 600; text-decoration: none; padding: 7px 11px; border: 1px solid var(--wsx-line); border-radius: 10px; background: #fff; transition: background .12s, border-color .12s; }
.wsx-msg-att a:hover { background: #F1F8F3; border-color: #CFE6D6; }
.wsx-att-ic svg { width: 15px; height: 15px; }
/* basics #7 — attachment previews in the bubble */
.wsx-att-size { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--wsx-mut, #6b6b66); background: var(--wsx-line, #e7e4da); padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.wsx-att-vidbox { position: relative; display: block; width: 230px; max-width: 100%; border-radius: 12px; overflow: hidden; cursor: pointer; background: #101410; box-shadow: 0 2px 8px rgba(20,40,30,.14); margin-bottom: 5px; }
.wsx-att-video { display: block; width: 100%; max-height: 170px; object-fit: cover; pointer-events: none; }
.wsx-att-play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; background: rgba(10,14,10,.18); transition: background .14s ease; }
.wsx-att-play::before { content: ''; position: absolute; width: 42px; height: 42px; border-radius: 50%; background: rgba(20,26,20,.62); z-index: -1; }
.wsx-att-vidbox:hover .wsx-att-play { background: rgba(10,14,10,.30); }
.wsx-att-dur { position: absolute; right: 7px; bottom: 6px; z-index: 2; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(12,16,12,.68); padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.wsx-att-dur:empty { display: none; }
/* 26 Sep 2026: the PDF tile is a pdf.js canvas that fills the bubble's width (was a fixed 210x150 iframe) */
.wsx-att-pdfbox { position: relative; display: block; width: 100%; min-width: 220px; max-width: 320px; min-height: 96px; max-height: 260px; border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid var(--wsx-line, #e7e4da); background: #fff; box-shadow: 0 2px 8px rgba(20,40,30,.10); margin-bottom: 5px; }
.wsx-att-pdfcanvas { display: block; width: 100%; pointer-events: none; }
.wsx-att-pdfcanvas canvas { display: block; width: 100% !important; height: auto !important; }
.wsx-att-pdfph { display: flex; align-items: center; justify-content: center; height: 120px; color: #B0483A; opacity: .55; }
.wsx-att-pdfph svg { width: 34px; height: 34px; }
.wsx-att-pdfbox::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.9)); pointer-events: none; }
.wsx-att-pdf { width: 100%; height: 100%; border: 0; pointer-events: none; }
.wsx-att-kind { position: absolute; left: 7px; bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; background: #B0483A; padding: 2px 7px; border-radius: 6px; }
/* ⋮ message menu — anchor to the TOP of the bubble on BOTH sides (was flex-end
   for them / flex-start for me, so it floated mid-message inconsistently). */
/* order-sheet Approve button posted into the order chat */
.wsx-os-approve { margin-top: 7px; }
.wsx-os-approve-btn { border: none; background: var(--wsx-green, #3C7538); color: #fff; font: 700 12.5px inherit; padding: 8px 14px; border-radius: 9px; cursor: pointer; box-shadow: 0 3px 9px rgba(60,117,56,.3); transition: transform .12s, background .14s; }
.wsx-os-approve-btn:hover { background: var(--wsx-green-d, #2D5A2A); }
.wsx-os-approve-btn:active { transform: scale(.96); }
.wsx-os-approve-btn:disabled { opacity: .6; cursor: default; }
.wsx-os-approved { margin-top: 6px; font-size: 12px; font-weight: 700; color: #2D5A2A; background: #EAF1E8; border-radius: 8px; padding: 5px 10px; display: inline-block; }
/* The buyer can send an order sheet back from their portal (16 Sep 2026); the team sees which way it went. */
.wsx-os-sentback { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--danger-fg); background: var(--danger-bg); border-radius: 8px; padding: 5px 10px; display: inline-block; }
.wsx-msg-actions { opacity: 0; font-size: 16px; line-height: 1; color: var(--wsx-faint); cursor: pointer; padding: 2px 5px; transition: opacity .12s, color .12s; align-self: flex-start; margin-top: 1px; }
.wsx-msg.me .wsx-msg-actions { align-self: flex-start; }
.wsx-msg:hover .wsx-msg-actions { opacity: 1; }
.wsx-msg-actions:hover { color: var(--wsx-green-d); }
.wsx-empty-ico { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 16px; background: #EAF4EC; color: var(--wsx-green-d); display: flex; align-items: center; justify-content: center; }
.wsx-empty-ico svg { width: 24px; height: 24px; }
.wsx-flash .wsx-bubble { animation: wsxFlash 1.1s var(--wsx-ease); }
@keyframes wsxFlash { 0%,100% { box-shadow: 0 1.5px 4px rgba(20,40,30,.06); } 30% { box-shadow: 0 0 0 3px rgba(60,117,56,.32); } }
/* composer */
.wsx-replying { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--wsx-line); background: #F4F8F5; font-size: 11.5px; color: var(--wsx-muted); }
.wsx-replying b { color: var(--wsx-green-d); }
.wsx-replying button { margin-left: auto; border: none; background: transparent; cursor: pointer; color: var(--wsx-faint); font-size: 14px; border-radius: 6px; width: 22px; height: 22px; transition: background .12s; }
.wsx-replying button:hover { background: rgba(20,40,30,.08); color: var(--wsx-ink); }
.wsx-quick { display: flex; gap: 6px; padding: 8px 10px 2px; flex-wrap: wrap; }
.wsx-quick button { border: 1px solid var(--wsx-line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 11.5px; color: var(--wsx-muted); cursor: pointer; transition: background .12s, border-color .12s, transform .1s var(--wsx-ease); }
.wsx-quick button:hover { background: #F1F8F3; border-color: #CFE6D6; color: var(--wsx-green-d); }
.wsx-quick button:active { transform: scale(.96); }
.wsx-composer { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--wsx-line); background: rgba(255,255,255,.55); }
/* bottom action row — keeps the text field full-width on its own line so the
   composer no longer looks cramped now that poll/voice/attach live together */
.wsx-comp-tools { display: flex; align-items: center; gap: 6px; }
.wsx-comp-spacer { flex: 1 1 auto; }
.wsx-composer .wsx-fmt-btn { border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: #F1F0E9; color: var(--wsx-muted); font: 800 16px/1 var(--font-serif, Georgia, "Times New Roman", serif); transition: transform .12s var(--wsx-ease), background .14s, color .14s; }
.wsx-composer .wsx-fmt-btn:hover { background: #E7F5EC; color: var(--wsx-green-d); }
.wsx-composer .wsx-fmt-btn.on { background: var(--wsx-green); color: #fff; }
.wsx-composer .wsx-fmt-btn:active { transform: scale(.9); }
/* rich-text formatting bar (revealed by the "A" button) */
.wsx-fmt-bar { display: flex; align-items: center; gap: 4px; padding: 2px 2px 0; }
.wsx-fmt-bar button { border: 1px solid var(--wsx-line); background: #fff; color: var(--wsx-ink); min-width: 34px; height: 30px; padding: 0 9px; border-radius: 8px; cursor: pointer; font: 14px/1 var(--font-sans, system-ui); display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s, transform .1s; }
.wsx-fmt-bar button:hover { background: #EAF4EC; border-color: #CFE6D6; color: var(--wsx-green-d); }
.wsx-fmt-bar button:active { transform: scale(.94); }
.wsx-fmt-sep { width: 1px; align-self: stretch; margin: 3px 3px; background: var(--wsx-line); flex: none; }
/* WhatsApp-style inline formatting in rendered messages */
code.wsx-md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: rgba(60,117,56,.10); border: 1px solid rgba(60,117,56,.16); border-radius: 5px; padding: 1px 5px; }
.wsx-md-list { margin: 3px 0; padding-left: 22px; }
.wsx-md-list li { margin: 1px 0; }
/* composer text field wrapped so a highlight backdrop can sit behind it
   (WhatsApp-style live @mention highlight). Falls back to a plain white field. */
.wsx-input-wrap { flex: 1; min-width: 0; position: relative; display: flex; background: #fff; border-radius: 18px; }
.wsx-composer textarea { flex: 1; border: 1px solid var(--wsx-line); border-radius: 18px; padding: 9px 14px; font: 13px/1.4 var(--font-sans, system-ui); resize: none; max-height: 110px; min-height: 40px; outline: none; background: #fff; transition: border-color .14s, box-shadow .14s; }
.wsx-composer .wsx-input-wrap > textarea { background: transparent !important; position: relative; z-index: 1; width: 100%; }
.wsx-mn-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border: 1px solid transparent; border-radius: 18px; padding: 9px 14px; font: 13px/1.4 var(--font-sans, system-ui); white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; color: transparent; }
.wsx-mn-backdrop .mn { background: rgba(60,117,56,.16); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(60,117,56,.20); }
.wsx-composer textarea:focus { border-color: var(--wsx-green); box-shadow: 0 0 0 3px rgba(60,117,56,.13); }
.wsx-composer .wsx-attach, .wsx-composer .wsx-send { border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; transition: transform .12s var(--wsx-ease), background .14s, color .14s, box-shadow .14s; }
.wsx-composer .wsx-attach { background: #F1F0E9; color: var(--wsx-muted); }
.wsx-composer .wsx-attach:hover { background: #E7F5EC; color: var(--wsx-green-d); }
.wsx-composer .wsx-attach:active { transform: scale(.9); }
.wsx-composer .wsx-attach svg, .wsx-composer .wsx-send svg { width: 18px; height: 18px; }
.wsx-composer .wsx-send { background: var(--wsx-green); color: #fff; box-shadow: 0 4px 12px rgba(60,117,56,.34); }
.wsx-composer .wsx-send:hover { background: var(--wsx-green-d); }
.wsx-composer .wsx-send:active { transform: scale(.9); }
.wsx-voice-rec { position: absolute; inset: 0; z-index: 3; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid #F0BBBB; border-radius: 18px; background: #FFF9F8; color: #8B2F2A; transform: translateY(3px); opacity: 0; transition: transform .18s var(--wsx-ease), opacity .18s ease-out; }
.wsx-composer.is-voice-recording .wsx-voice-rec { transform: none; opacity: 1; }
.wsx-composer.is-voice-recording .wsx-input-wrap { min-height: 44px; }
.wsx-composer.is-voice-recording #wsxInputBd, .wsx-composer.is-voice-recording #wsxInput, .wsx-composer.is-voice-recording .wsx-comp-tools, .wsx-composer.is-voice-recording .wsx-fmt-bar { display: none !important; }
.wsx-vr-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #D3453D; box-shadow: 0 0 0 4px rgba(211,69,61,.12); animation: wsxVoicePulse 1.2s ease-in-out infinite; }
.wsx-vr-time { min-width: 34px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wsx-vr-wave { display: inline-flex; flex: 1; min-width: 22px; align-items: center; justify-content: center; gap: 2px; height: 24px; overflow: hidden; }
.wsx-vr-wave i { width: 3px; height: 7px; border-radius: 3px; background: #D66A62; animation: wsxVoiceWave .72s ease-in-out infinite alternate; }
.wsx-vr-wave i:nth-child(2) { animation-delay: .12s; }.wsx-vr-wave i:nth-child(3) { animation-delay: .26s; }.wsx-vr-wave i:nth-child(4) { animation-delay: .08s; }.wsx-vr-wave i:nth-child(5) { animation-delay: .2s; }
.wsx-composer.is-voice-paused .wsx-vr-dot, .wsx-composer.is-voice-paused .wsx-vr-wave i { animation-play-state: paused; }
.wsx-vr-cancel, .wsx-vr-action, .wsx-vr-send { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .16s var(--wsx-ease), background .16s ease-out, color .16s ease-out; }
.wsx-vr-cancel { color: #9B4038; background: transparent; }.wsx-vr-action { color: #7B3B36; background: #F8E7E5; }.wsx-vr-send { color: #fff; background: var(--wsx-green); box-shadow: 0 3px 9px rgba(60,117,56,.25); }
.wsx-vr-cancel:active, .wsx-vr-action:active, .wsx-vr-send:active { transform: scale(.94); }.wsx-vr-cancel svg, .wsx-vr-action svg, .wsx-vr-send svg { width: 17px; height: 17px; }
@keyframes wsxVoicePulse { 50% { transform: scale(.78); opacity: .65; } } @keyframes wsxVoiceWave { to { height: 20px; } }
@media (prefers-reduced-motion: reduce) { .wsx-vr-dot, .wsx-vr-wave i { animation: none; } }

/* ---- chat: forwarded label, mentions, ticks, reactions, per-msg menu ------- */
.wsx-msg-c { position: relative; }
.wsx-fwd { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-style: italic; color: var(--wsx-faint); margin-bottom: 3px; }
.wsx-fwd svg { width: 12px; height: 12px; }
.wsx-mention { color: var(--wsx-green-d); font-weight: 700; background: rgba(60,117,56,.10); border-radius: 4px; padding: 0 2px; }
.wsx-mention.me { background: rgba(240,165,0,.20); color: #9A6A00; }
/* @group mention — distinct from a person: deeper green + subtle outline. */
.wsx-mention-group { background: rgba(60,117,56,.16); box-shadow: inset 0 0 0 1px rgba(60,117,56,.28); }
.wsx-mn-grpav { background: linear-gradient(160deg, #3C7538, #234A20) !important; font-weight: 800; }
.wsx-tick { display: inline-flex; vertical-align: middle; margin-left: 4px; color: #9FB0A6; }
.wsx-tick svg { width: 15px; height: 10px; }
.wsx-tick.read { color: var(--wsx-green); }
.wsx-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0 4px; }
.wsx-msg.me .wsx-reacts { justify-content: flex-end; }
.wsx-react-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--wsx-line); background: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(20,40,30,.06); transition: transform .1s var(--wsx-ease), border-color .12s, background .12s; }
.wsx-react-chip:hover { transform: translateY(-1px); }
.wsx-react-chip:active { transform: scale(.94); }
.wsx-react-chip.on { background: #EAF6EE; border-color: var(--wsx-green); }
/* ⋮ lives INSIDE the bubble's top-right corner (WhatsApp-style) for every
   message — mine and theirs — and only appears on hover. The bubble is the
   positioning context so it always hugs the bubble, not the row. */
.wsx-bubble { position: relative; }
.wsx-msg-menu { position: absolute; top: 3px; right: 3px; opacity: 0; border: none; background: rgba(255,255,255,.92); color: var(--wsx-muted); width: 24px; height: 22px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(20,40,30,.16); transition: opacity .12s, background .12s, color .12s; z-index: 2; }
.wsx-msg-menu svg { width: 15px; height: 15px; }
.wsx-msg:hover .wsx-msg-menu, .wsx-bubble:hover .wsx-msg-menu { opacity: 1; }
.wsx-msg-menu:hover { color: var(--wsx-green-d); background: #fff; }
/* System banners (order broadcasts) use .wsx-sysmsg, NOT .wsx-msg — so the
   hover-reveal above never fired and their React/more button was invisible.
   Keep it subtly visible always + full on hover, and sit it inside the banner. */
.wsx-sys-menu { opacity: .5; top: 6px; right: 6px; }
.wsx-sysmsg:hover .wsx-sys-menu { opacity: 1; }
/* Touch devices have no :hover, so the menu button would never appear — show it
   for every message (regular + system) so phone users can react / open actions. */
@media (hover: none), (pointer: coarse) {
  .wsx-msg-menu, .wsx-sys-menu { opacity: .55; }
  /* …except on a message or a banner, where the always-on pill covered the end of
     the text and the ticks (design review, 14 Sep 2026), and on an announcement card
     or an internal note (owner, the same day: "the 3 dots in mobile view is not
     needed"). A long-press opens the menu on all four; on a message or a banner a
     double-tap reacts and a swipe replies, as in WhatsApp. The button stays in
     place, invisible, as the menu's anchor. */
  .wsx-msg .wsx-msg-menu, .wsx-msg:hover .wsx-msg-menu, .wsx-bubble:hover .wsx-msg-menu,
  .wsx-sysmsg .wsx-sys-menu, .wsx-sysmsg:hover .wsx-sys-menu { opacity: 0; pointer-events: none; }
  .wsx-ann .wsx-sys-menu, .wsx-mev-note .wsx-msg-menu { opacity: 0; pointer-events: none; }
}
/* Jump targets (pinned rows / reply quotes) land clear of the sticky header. */
.wsx-msg, .wsx-sysmsg { scroll-margin-top: 64px; }
/* Reply quote doubles as a jump link to the original message. */
.wsx-reply-tag { cursor: pointer; }
.wsx-reply-tag:hover { filter: brightness(.97); }
/* WhatsApp-style clamp for very long messages: collapsed with a soft fade +
   a "Read more" toggle; .open removes the cap. */
.wsx-clamp { max-height: 216px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.wsx-clamp.open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.wsx-readmore { border: none; background: transparent; color: var(--wsx-green-d); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 0 0; display: block; }
.wsx-readmore:hover { text-decoration: underline; }
/* the floating message menu (popover) */
.wsx-msgmenu { position: fixed; z-index: 10200; width: 216px; background: rgba(255,255,255,.97); backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7); border: 1px solid rgba(255,255,255,.7); border-radius: 16px; box-shadow: 0 18px 50px rgba(20,40,30,.28); padding: 7px; opacity: 0; transform: scale(.96) translateY(-4px); transform-origin: top right; transition: opacity .15s var(--wsx-ease), transform .15s var(--wsx-ease); }
.wsx-msgmenu.open { opacity: 1; transform: none; }
.wsx-mm-emojis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 4px 4px 8px; border-bottom: 1px solid var(--wsx-line); margin-bottom: 5px; }
.wsx-mm-emojis button { border: none; background: transparent; font-size: 21px; line-height: 1; width: 100%; height: 32px; border-radius: 9px; cursor: pointer; transition: transform .12s var(--wsx-ease), background .12s; justify-self: center; }
.wsx-mm-emojis button:hover { background: #F1F8F3; transform: scale(1.18); }
.wsx-mm-list { display: flex; flex-direction: column; }
.wsx-mm-list button { display: flex; align-items: center; gap: 11px; border: none; background: transparent; cursor: pointer; padding: 9px 10px; border-radius: 9px; font-size: 13px; color: var(--wsx-ink); text-align: left; transition: background .1s; }
.wsx-mm-list button:hover { background: #F4F8F5; }
.wsx-mm-ic { display: flex; color: var(--wsx-muted); }
.wsx-mm-ic svg { width: 16px; height: 16px; }
.wsx-mm-list button.wsx-mm-danger { color: #C0392B; }
.wsx-mm-list button.wsx-mm-danger .wsx-mm-ic { color: #C0392B; }
.wsx-mm-list button.wsx-mm-danger:hover { background: #FCEEEC; }
/* edited tag + deleted placeholder */
.wsx-msg-edited { font-size: 9px; color: var(--wsx-faint); margin-right: 5px; font-style: italic; }
.wsx-msg.me .wsx-msg-edited { color: #6FA77B; }
.wsx-bubble-del { opacity: .85; }
.wsx-msg-deleted { display: inline-flex; align-items: center; gap: 6px; font-style: italic; color: var(--wsx-faint); font-size: 12.5px; }
.wsx-msg-deleted svg { width: 13px; height: 13px; }
/* editing banner (reuses .wsx-replying) */
.wsx-replying.wsx-editing { background: #FFF6E6; color: #8A6D1E; }
.wsx-edit-ic { display: flex; } .wsx-edit-ic svg { width: 14px; height: 14px; }
/* "Unread messages" divider */
.wsx-unread-div { display: flex; align-items: center; justify-content: center; margin: 10px 4px; }
.wsx-unread-div span { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--wsx-green-d); background: #EAF6EE; border: 1px solid rgba(60,117,56,.22); border-radius: 999px; padding: 3px 12px; }
/* pinned bar (top of chat) — WhatsApp: segmented rail + one pin at a time */
.wsx-pin-bar { display: flex; align-items: center; gap: 9px; padding: 7px 13px; background: #FBF8EC; border-bottom: 1px solid #ECE3C4; flex-shrink: 0; overflow: hidden; }
.wsx-pin-bar .wsx-pin-ic { display: flex; color: #B58A1B; flex-shrink: 0; } .wsx-pin-bar .wsx-pin-ic svg { width: 15px; height: 15px; }
/* the rail: one segment per pin, current one lit — click it for the full list */
.wsx-pin-rail { display: flex; flex-direction: column; gap: 2px; width: 3px; flex-shrink: 0; cursor: pointer; padding: 1px 3px; margin: 0 -3px; }
.wsx-pin-rail i { display: block; width: 3px; height: 9px; border-radius: 2px; background: rgba(181,138,27,.28); transition: background .18s ease; }
.wsx-pin-rail i.on { background: #B58A1B; }
.wsx-pin-rail:hover i { background: rgba(181,138,27,.45); } .wsx-pin-rail:hover i.on { background: #96700F; }
.wsx-pin-main { flex: 1; min-width: 0; cursor: pointer; }
.wsx-pin-lbl { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #B58A1B; letter-spacing: .2px; }
.wsx-pin-lbl svg { width: 11px; height: 11px; }
.wsx-pin-tx { min-width: 0; font-size: 12px; color: var(--wsx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.wsx-pin-tx b { color: var(--wsx-green-d); font-weight: 650; }
/* advancing to the next pin slides it up into place, like WhatsApp */
@keyframes wsxPinSlide { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.wsx-pin-main.slide { animation: wsxPinSlide .2s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .wsx-pin-main.slide { animation: none; } }
.wsx-pin-x { border: none; background: transparent; cursor: pointer; color: var(--wsx-faint); width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s; }
.wsx-pin-x:hover { background: rgba(20,40,30,.08); color: var(--wsx-ink); }
.wsx-pin-x svg { width: 13px; height: 13px; }
/* pin list sheet */
.wsx-pinrow { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--wsx-line); }
.wsx-pinrow .wsx-pin-ic { color: #B58A1B; } .wsx-pinrow .wsx-pin-ic svg { width: 15px; height: 15px; }
.wsx-pinrow-main { flex: 1; min-width: 0; cursor: pointer; }
.wsx-pinrow-tx { font-size: 13px; color: var(--wsx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsx-pinrow-by { font-size: 11px; color: var(--wsx-faint); margin-top: 1px; }
.wsx-pinrow-x { border: none; background: transparent; cursor: pointer; color: var(--wsx-faint); width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.wsx-pinrow-x:hover { background: rgba(20,40,30,.08); }
/* mute button (chat header) + muted chat-list row */
.wsx-chat-mute.on { color: #C99A2B; background: #FBF3DC; }
.wsx-cl-mute { display: inline-flex; color: var(--wsx-faint); margin: 0 5px 0 auto; flex-shrink: 0; }
.wsx-cl-mute svg { width: 13px; height: 13px; }
.wsx-cl-row.muted .wsx-cl-name { color: var(--wsx-muted); }
/* pinned chats — tilted pin marker + faint tint, floats above the rest */
.wsx-cl-pin { display: inline-flex; color: var(--wsx-green); margin: 0 4px 0 auto; flex-shrink: 0; transform: rotate(38deg); }
.wsx-cl-pin svg { width: 12px; height: 12px; }
.wsx-cl-row.pinned { background: #F6FAF7; }
.wsx-cl-row.pinned:hover { background: #EFF7F1; }
.wsx-row-menu { transform-origin: top left; }
.wsx-row-menu button { width: 100%; }
/* swipe-to-mark gesture (notifications + chat rows) */
.wsx-nt, .wsx-cl-row { will-change: transform; touch-action: pan-y; }
.wsx-nt.wsx-swipe-armed, .wsx-cl-row.wsx-swipe-armed { box-shadow: inset -5px 0 0 var(--wsx-green); background: #EFF7F1; }
/* per-notification actions: snooze / pin / mark read-unread */
.wsx-nt-acts { display: flex; gap: 1px; flex: none; align-items: center; margin-top: 1px; }
.wsx-nt-act { width: 28px; height: 28px; border: none; background: transparent; color: var(--wsx-faint); border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, transform .1s var(--wsx-ease); }
.wsx-nt-act svg { width: 15px; height: 15px; }
.wsx-nt-act:hover { background: var(--wsx-line); color: var(--wsx-ink); }
.wsx-nt-act:active { transform: scale(.9); }
.wsx-nt-act.on { color: #C99A2B; }
/* Design sweep, 14 Sep 2026: the three actions and the unread dot sat BESIDE the
   message on every row, so on a phone the message had 193px of a 370px card and
   wrapped to 4-8 short lines (a date broke as "2026-09- / 14"). The actions now
   share the short "who · when" line under the message, which runs the full width;
   the buttons overhang the row padding so a row is no taller than before. */
.wsx-nt:not(.wsx-nt-snoozed) { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; grid-template-areas: "ico text text dot" "ico meta acts dot"; column-gap: 10px; row-gap: 0; align-items: start; }
.wsx-nt:not(.wsx-nt-snoozed) > .wsx-nt-main { display: contents; }
.wsx-nt:not(.wsx-nt-snoozed) > .wsx-nt-ico { grid-area: ico; }
.wsx-nt:not(.wsx-nt-snoozed) .wsx-nt-text { grid-area: text; min-width: 0; }
.wsx-nt:not(.wsx-nt-snoozed) .wsx-nt-meta { grid-area: meta; align-self: center; min-width: 0; margin-top: 2px; }
.wsx-nt:not(.wsx-nt-snoozed) > .wsx-nt-acts { grid-area: acts; margin: -6px -4px -7px 0; }
.wsx-nt:not(.wsx-nt-snoozed) > .wsx-nt-dot { grid-area: dot; }
@media (hover: none) and (pointer: coarse) { .wsx-nt:not(.wsx-nt-snoozed) > .wsx-nt-acts { margin: -9px -4px -11px 0; } }
.wsx-nt.pinned { background: #FBF8EC; }
.wsx-nt.pinned.unread { background: #F6F2E0; }
.wsx-nt-pinmark { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: #C99A2B; }
.wsx-nt-pinmark svg { width: 12px; height: 12px; }
.wsx-snooze-menu { position: fixed; z-index: 2147482050; min-width: 180px; background: rgba(255,255,255,.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--wsx-line); border-radius: 13px; box-shadow: 0 16px 44px rgba(20,40,30,.22); padding: 6px; opacity: 0; transform: scale(.96) translateY(-4px); transform-origin: top right; transition: opacity .14s var(--wsx-ease), transform .14s var(--wsx-ease); }
.wsx-snooze-menu.open { opacity: 1; transform: none; }
.wsx-snooze-h { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--wsx-faint); padding: 5px 8px 4px; }
.wsx-snooze-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: transparent; cursor: pointer; padding: 8px 9px; border-radius: 8px; font-size: 13px; color: var(--wsx-ink); text-align: left; font-family: inherit; }
.wsx-snooze-menu button:hover { background: #F4F8F5; }
.wsx-snooze-ic { display: flex; color: var(--wsx-muted); }
.wsx-snooze-ic svg { width: 15px; height: 15px; }
.wsx-nt-snzhead { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--wsx-faint); padding: 12px 12px 4px; border-top: 1px solid var(--wsx-line); margin-top: 6px; }
.wsx-nt-snoozed { opacity: .72; }
.wsx-nt-snoozed .wsx-nt-text { color: var(--wsx-muted); }
/* @mention autocomplete dropdown above the composer */
.wsx-mention-pop { position: absolute; left: 10px; right: 10px; bottom: 60px; max-height: 180px; overflow-y: auto; background: rgba(255,255,255,.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--wsx-line); border-radius: 13px; box-shadow: 0 14px 40px rgba(20,40,30,.22); padding: 5px; z-index: 30; }
.wsx-mention-pop button { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: transparent; cursor: pointer; padding: 7px 9px; border-radius: 9px; font-size: 13px; color: var(--wsx-ink); text-align: left; }
.wsx-mention-pop button:hover { background: #F1F8F3; }
/* keyboard-highlighted row (arrow keys) — instant, no transition (emil: never
   animate keyboard-driven actions). Stronger than hover so it reads as "selected". */
.wsx-mention-pop button.active { background: #EAF4EC; box-shadow: inset 0 0 0 1.5px var(--wsx-green); }
/* forward picker + message info (rendered in the right dock-pop) */
.wsx-fwd-list, .wsx-info-sec { display: flex; flex-direction: column; gap: 2px; }
.wsx-fwd-row { display: flex; align-items: center; gap: 10px; border: none; background: transparent; cursor: pointer; padding: 9px 8px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--wsx-ink); text-align: left; transition: background .1s; }
.wsx-fwd-row:hover { background: #F1F8F3; }
.wsx-info-sec { margin-bottom: 14px; }
.wsx-info-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wsx-faint); margin-bottom: 6px; }
.wsx-info-h svg { width: 16px; height: 11px; color: #9FB0A6; }
.wsx-info-h.wsx-info-read svg { color: var(--wsx-green); }
.wsx-info-row { display: flex; align-items: center; gap: 9px; padding: 5px 4px; font-size: 13px; color: var(--wsx-ink); }

/* ---- group settings pane (slides over the chat, inside the panel) ---------- */
.wsx-group-pane { position: absolute; inset: 0; z-index: 6; background: var(--wsx-surface); display: flex; flex-direction: column; transform: translateX(7%); opacity: 0; transition: transform .2s var(--wsx-ease), opacity .2s var(--wsx-ease); }
.wsx-group-pane.open { transform: none; opacity: 1; }
.wsx-gp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--wsx-line); flex: none; }
.wsx-gp-body { flex: 1; overflow-y: auto; padding: 16px; background: linear-gradient(180deg, #F6F9F6, #FBFCFB); }
/* WhatsApp-style group-info layout */
.wsx-gi-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 18px; }
.wsx-gi-avwrap { position: relative; width: 92px; height: 92px; margin-bottom: 12px; }
.wsx-gi-av { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 8px 22px rgba(20,40,30,.20); }
.wsx-gi-avph { background: linear-gradient(160deg, #7FB98F, #3C7538); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 700; }
.wsx-gi-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--wsx-green); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 7px rgba(20,40,30,.22); transition: transform .12s var(--wsx-ease), background .12s; }
.wsx-gi-cam:hover { background: var(--wsx-green-d); }
.wsx-gi-cam:active { transform: scale(.9); }
.wsx-gi-cam svg { width: 15px; height: 15px; }
.wsx-gi-name { text-align: center; border: 1px solid transparent; background: transparent; font-size: 20px; font-weight: 800; color: var(--wsx-ink); width: 100%; outline: none; padding: 3px 6px; border-radius: 9px; transition: background .12s, border-color .12s; }
.wsx-gi-name:focus { background: #fff; border-color: var(--wsx-line); }
.wsx-gi-sub { font-size: 13px; color: var(--wsx-muted); margin-top: 4px; }
.wsx-gi-sub #wsxGeCnt { color: var(--wsx-green-d); font-weight: 700; }
.wsx-gi-tiles { display: flex; gap: 8px; margin-bottom: 16px; }
.wsx-gi-tile { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--wsx-line); border-radius: 15px; background: #fff; cursor: pointer; color: var(--wsx-green-d); font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 3px rgba(20,40,30,.05); transition: background .12s, transform .1s var(--wsx-ease), border-color .12s; }
.wsx-gi-tile:hover { background: #F1F8F3; border-color: #CFE6D6; }
.wsx-gi-tile:active { transform: scale(.96); }
.wsx-gi-tile svg { width: 19px; height: 19px; }
.wsx-gi-card { background: #fff; border: 1px solid var(--wsx-line); border-radius: 16px; padding: 12px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(20,40,30,.05); }
.wsx-gi-card-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--wsx-faint); margin-bottom: 9px; }
.wsx-gi-card .wsx-ge-members { border: none; background: transparent; padding: 0; max-height: 320px; }
.wsx-ge-del { display: inline-flex; align-items: center; gap: 6px; }
.wsx-ge-del svg { width: 15px; height: 15px; }

/* ---- chat header actions + message filter bar ------------------------------ */
.wsx-chat-head-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.wsx-chat-head-actions .wsx-chat-gear { margin-left: 0; }
.wsx-chat-gear.active { background: var(--wsx-green); color: #fff; }
.wsx-chat-filter { padding: 9px 12px; border-bottom: 1px solid var(--wsx-line); background: rgba(244,248,245,.7); display: flex; flex-direction: column; gap: 7px; }
.wsx-cf-row { position: relative; display: flex; align-items: center; }
.wsx-cf-ic { position: absolute; left: 10px; color: var(--wsx-faint); pointer-events: none; display: flex; }
.wsx-cf-ic svg { width: 15px; height: 15px; }
.wsx-cf-row input { flex: 1; border: 1px solid var(--wsx-line); border-radius: 10px; padding: 8px 30px; font-size: 13px; outline: none; background: #fff; }
.wsx-cf-row input:focus { border-color: var(--wsx-green); box-shadow: 0 0 0 3px rgba(60,117,56,.12); }
.wsx-cf-x { position: absolute; right: 6px; border: none; background: transparent; cursor: pointer; color: var(--wsx-faint); width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.wsx-cf-x:hover { background: rgba(20,40,30,.08); color: var(--wsx-ink); }
.wsx-cf-x svg { width: 13px; height: 13px; }
.wsx-cf-row2 { display: flex; gap: 6px; }
.wsx-cf-row2 select { flex: 1; min-width: 0; border: 1px solid var(--wsx-line); border-radius: 9px; padding: 7px 8px; font-size: 12px; background: #fff; color: var(--wsx-ink); cursor: pointer; outline: none; }
.wsx-cf-row2 select:focus { border-color: var(--wsx-green); }

/* ---- polls (group chat) ---------------------------------------------------- */
.wsx-bubble.has-poll { min-width: 220px; }
.wsx-poll { display: flex; flex-direction: column; gap: 6px; margin: 2px 0; }
.wsx-poll-q { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.wsx-poll-qic { display: inline-flex; color: var(--wsx-green-d); }
.wsx-poll-qic svg { width: 15px; height: 15px; }
.wsx-poll-opt { position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid var(--wsx-line); border-radius: 11px; background: #fff; padding: 9px 11px; cursor: pointer; overflow: hidden; font-size: 12.5px; text-align: left; transition: border-color .12s, transform .1s var(--wsx-ease); }
.wsx-poll-opt:hover { border-color: #CFE6D6; }
.wsx-poll-opt:active { transform: scale(.99); }
.wsx-poll-opt.on { border-color: var(--wsx-green); }
.wsx-poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(60,117,56,.12); width: 0; transition: width .4s var(--wsx-ease); z-index: 0; }
.wsx-poll-opt.on .wsx-poll-bar { background: rgba(60,117,56,.22); }
.wsx-poll-otext { position: relative; z-index: 1; flex: 1; color: var(--wsx-ink); }
.wsx-poll-ocnt { position: relative; z-index: 1; font-weight: 700; color: var(--wsx-green-d); font-variant-numeric: tabular-nums; }
.wsx-poll-total { font-size: 10.5px; color: var(--wsx-faint); }
.wsx-poll-multi { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--wsx-ink); margin: 9px 2px 2px; cursor: pointer; }
.wsx-poll-mtag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--wsx-green-d); background: #EAF4EC; padding: 1px 6px; border-radius: 6px; vertical-align: 1px; }
.wsx-poll-view { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 2px; border: 1px solid var(--wsx-line); background: #fff; color: var(--wsx-green-d); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer; transition: background .13s var(--wsx-ease), transform .1s var(--wsx-ease); }
.wsx-poll-view svg { width: 14px; height: 14px; }
.wsx-poll-view:hover { background: #EAF4EC; }
.wsx-poll-view:active { transform: scale(.96); }
.wsx-pv-q { font-size: 14px; font-weight: 700; color: var(--wsx-ink); margin-bottom: 10px; }
.wsx-pv-opt { border: 1px solid var(--wsx-line); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; }
.wsx-pv-ohead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--wsx-ink); margin-bottom: 7px; }
.wsx-pv-cnt { flex: none; font-size: 11px; font-weight: 700; color: #fff; background: var(--wsx-green); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.wsx-pv-names { display: flex; flex-direction: column; gap: 5px; }
.wsx-pv-name { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--wsx-ink); }
.wsx-pv-name i { color: var(--wsx-faint); font-style: normal; font-size: 11px; }
.wsx-pv-empty { font-size: 12px; color: var(--wsx-faint); font-style: italic; }
.wsx-poll-optin { margin-bottom: 6px; }
.wsx-poll-optin input { width: 100%; box-sizing: border-box; border: 1px solid var(--wsx-line); border-radius: 9px; padding: 8px 11px; font-size: 13px; outline: none; }
.wsx-poll-optin input:focus { border-color: var(--wsx-green); box-shadow: 0 0 0 3px rgba(60,117,56,.12); }
.wsx-poll-add { border: 1px dashed #BFD3C4; background: #F4FBF6; color: var(--wsx-green-d); border-radius: 9px; padding: 8px; width: 100%; font-size: 12.5px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.wsx-poll-add:hover { background: #EAF6EE; }
.wsx-poll-btn svg { width: 18px; height: 18px; }
.wsx-pings-people { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; border-bottom: 1px solid var(--wsx-line); }
.wsx-ping-person { text-align: center; cursor: pointer; flex: none; width: 50px; }
.wsx-ping-av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(160deg,var(--wsx-green),var(--wsx-green-d)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; margin: 0 auto 3px; }
.wsx-ping-name { font-size: 10px; color: var(--wsx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================================
 * LIQUID GLASS (macOS-style) — desktop only, and now SCOPED to chrome:
 * the left rail, the bottom dock and the header (header lives in
 * components.css). As of 17 Jul 2026 the right panel, dock popups, AI panel
 * and edge button are SOLID — pages should read as solid, not frosted.
 * Gated to desktop so mobile UX is untouched. Falls back to solid where the
 * browser lacks backdrop-filter.
 * ========================================================================== */
@media (min-width: 901px) and (pointer: fine) {
  /* left icon rail */
  #app > #sidebar.sidebar, #sidebar.sidebar {
    background: rgba(247, 249, 246, 0.62) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
    border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
  }
  /* bottom dock — Apple liquid-glass: very translucent + strong blur +
     specular top/bottom highlights so content clearly frosts through. */
  #wsxDock {
    background: rgba(255, 255, 255, var(--wsx-dock-op, .36)) !important;
    -webkit-backdrop-filter: blur(34px) saturate(2);
    backdrop-filter: blur(34px) saturate(2);
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 18px 50px rgba(20, 40, 30, .22),
                inset 0 1.5px 0 rgba(255, 255, 255, .85),
                inset 0 -1px 0 rgba(255, 255, 255, .25),
                inset 0 0 0 1px rgba(255, 255, 255, .14) !important;
  }
  /* notifications live in the right panel now — drop the redundant header bell */
  #notifBell { display: none !important; }
  /* The right panel, dock popups, AI panel and edge button used to be frosted
     here. They are SOLID now (see components.css "Solid surfaces"). Their
     children's `background: transparent` overrides went with them, so each
     falls back to its own opaque base colour.
     Bonus: #wsxPanel no longer creates a containing block for position:fixed
     descendants, which is what forced the expand-to-centre workaround below. */
  #wsxPanel { border-left: 1px solid var(--wsx-line); }
  /* help fab fully removed from the home page on desktop (now in My Profile) */
  #kbdHelpFab { display: none !important; }
}
/* graceful fallback: if the browser can't blur, keep solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #wsxDock, #wsxPanel, .wsx-pop, .ai-panel, #sidebar.sidebar { background: var(--wsx-surface) !important; }
}

/* ---- group editor (create + settings) + chat-header gear --------------- */
.wsx-ge-imgrow { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.wsx-ge-img, .wsx-ge-imgph { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex: none; }
.wsx-ge-imgph { background: linear-gradient(160deg, #7FB98F, #3C7538); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; }
.wsx-ge-imgbtn { border: 1px solid var(--wsx-line); background: #fff; border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--wsx-green-d); }
.wsx-ge-imgbtn:hover { background: #F1F8F3; }
.wsx-ge-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--wsx-faint); font-weight: 700; margin: 13px 0 5px; }
.wsx-ge-cnt { background: #E7F5EC; color: #177A5B; border-radius: 9px; padding: 0 7px; font-size: 10.5px; margin-left: 4px; }
.wsx-ge-name { width: 100%; box-sizing: border-box; border: 1px solid var(--wsx-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.wsx-ge-name:focus { outline: none; border-color: var(--wsx-green); box-shadow: 0 0 0 3px rgba(60,117,56,.13); }
.wsx-ge-search { position: relative; margin-bottom: 7px; }
.wsx-ge-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--wsx-faint); pointer-events: none; }
.wsx-ge-search-ic svg { width: 15px; height: 15px; display: block; }
.wsx-ge-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--wsx-line); border-radius: 10px; padding: 8px 12px 8px 33px; font-size: 13px; outline: none; background: #fff; transition: border-color .14s, box-shadow .14s; }
.wsx-ge-search input:focus { border-color: var(--wsx-green); box-shadow: 0 0 0 3px rgba(60,117,56,.12); }
.wsx-ge-members { max-height: 230px; overflow-y: auto; border: 1px solid var(--wsx-line); border-radius: 12px; padding: 5px; background: #FBFCFB; }
.wsx-ge-mrow { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; cursor: pointer; font-size: 13px; transition: background .12s; }
.wsx-ge-mrow:hover { background: #F1F4F1; }
.wsx-ge-mrow:has(input:checked) { background: #EAF6EE; }
.wsx-ge-mrow:has(input:checked) .wsx-ge-mav { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wsx-green); }
.wsx-ge-mrow input { width: 16px; height: 16px; accent-color: #1D9E75; flex: none; }
.wsx-ge-mav { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(160deg, #7FB98F, #3C7538); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; transition: box-shadow .14s; }
.wsx-ge-mname { flex: 1; min-width: 0; }
/* WhatsApp-style member management: current members list + an "Add members"
   row that expands the pick-from-everyone list (with its own search). */
.wsx-ge-addrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 9px; margin-bottom: 6px; border: none; background: none; color: var(--wsx-green-d, #2C7A43); font-weight: 700; font-size: 13.5px; cursor: pointer; border-radius: 10px; text-align: left; }
.wsx-ge-addrow svg { width: 18px; height: 18px; flex: none; }
.wsx-ge-addrow:hover { background: rgba(60, 117, 56, .07); }
.wsx-ge-rm { margin-left: auto; flex: none; border: none; background: none; color: #9A9891; cursor: pointer; padding: 4px; border-radius: 8px; display: flex; align-items: center; }
.wsx-ge-rm:hover { color: #B3261E; background: rgba(179, 38, 30, .08); }
.wsx-ge-rm svg { width: 15px; height: 15px; }
.wsx-ge-pplus { margin-left: auto; flex: none; color: var(--wsx-green-d, #2C7A43); font-weight: 800; font-size: 15px; }
/* Group-admin chip + the star promote/demote toggle (WhatsApp model) */
.wsx-ge-admchip { flex: none; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .2px; color: #2C7A43; border: 1px solid #BFDCC6; background: #F0F7F1; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.wsx-ge-mkadm { flex: none; border: none; background: none; color: #C9C7BE; cursor: pointer; padding: 4px; border-radius: 8px; display: flex; align-items: center; }
.wsx-ge-mkadm svg { width: 15px; height: 15px; }
.wsx-ge-mkadm:hover { color: #2C7A43; background: rgba(60, 117, 56, .08); }
.wsx-ge-mkadm.on { color: #E5A50A; }
.wsx-ge-mkadm.on:hover { color: #9A9891; background: rgba(0, 0, 0, .05); }
.wsx-gi-created { text-align: center; font-size: 11.5px; color: #6E6C68; margin-top: 4px; }
/* Internal notes (client groups, Zoko/WATI-style): orange bubble + pill on the
   message; composer tints orange while note mode is armed. Clients never see
   any of this — rules hide non-clientVisible messages from them entirely. */
.wsx-msg.wsx-noteb .wsx-bubble { background: #FFF4E3 !important; border: 1px solid #F2D9A6 !important; color: #4A3A18; }
.wsx-note-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .2px; color: #9A6A00; background: #FFF1DC; border: 1px solid #F0D5A0; border-radius: 999px; padding: 2px 8px; margin: 0 0 3px 2px; width: fit-content; }
.wsx-note-pill svg { width: 11px; height: 11px; }
/* own messages stack right (.wsx-msg-c is align-items:flex-end there), so the
   pill's left nudge has to flip or it drifts away from the bubble edge */
.wsx-msg.me .wsx-note-pill { margin: 0 2px 3px 0; }
/* Internal notes ALWAYS sit on the RIGHT of the chat, whoever wrote them — a
   distinct staff-only column separate from the client conversation flow. */
.wsx-msg.wsx-noteb { align-self: flex-end; flex-direction: row-reverse; }
.wsx-msg.wsx-noteb .wsx-msg-c { align-items: flex-end; }
.wsx-msg.wsx-noteb .wsx-note-pill { margin: 0 2px 3px 0; }
.wsx-msg.wsx-noteb .wsx-av { display: none; }   /* no left avatar once it's a right-column note */
.wsx-msg.wsx-noteb .wsx-msg-sender { text-align: right; }
/* System order updates rendered as internal notes (hidden from the client) */
.wsx-mev-note { align-self: flex-end; max-width: 86%; margin-top: 8px; display: flex; flex-direction: column; align-items: flex-end; position: relative; }
.wsx-mev-note .wsx-note-pill { margin: 0 2px 4px 0; }
.wsx-mev-note-body { background: #FFF4E3; border: 1px solid #F2D9A6; color: #4A3A18; border-radius: 14px 14px 5px 14px; padding: 8px 12px; font-size: 13px; line-height: 1.5; }
.wsx-mev-note .wsx-sys-time { font-size: 10px; color: #B08A55; margin-top: 3px; }
.wsx-mev-note .wsx-msg-menu { position: absolute; top: 22px; left: -6px; }
.wsx-note-btn.on { color: #C77E00 !important; background: rgba(230, 150, 0, .14) !important; }
.wsx-composer.wsx-note-mode .wsx-input-wrap { background: #FFF4E3; border-color: #F2D9A6; }
.wsx-composer.wsx-note-mode .wsx-mn-backdrop { background: #FFF4E3; }
.wsx-composer.wsx-note-mode textarea { background: transparent; }
.wsx-composer.wsx-note-mode .wsx-send { background: #E69500; }
/* Member added / removed / left — a quiet centred chip in the thread (WhatsApp) */
.wsx-mev { align-self: center; margin: 9px 0 5px; max-width: 90%; }
.wsx-mev span { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--wsx-faint); background: rgba(255,255,255,.78); border: 1px solid var(--wsx-line); padding: 3px 11px; border-radius: 999px; text-align: center; }
/* Past members (removed people kept visible, WhatsApp-style) */
.wsx-ge-past .wsx-ge-mrow { opacity: .72; }
.wsx-ge-readd { margin-left: auto; flex: none; border: 1px solid var(--wsx-line); background: #fff; color: var(--wsx-green-d, #2C7A43); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.wsx-ge-readd:hover { background: #F0F7F1; }
/* AI compose / quick-reply popovers above the composer */
/* position:FIXED like every other in-chat popup — _placeAtChatEdge computes
   viewport coordinates (getBoundingClientRect), so an absolutely-positioned
   pop got those numbers applied in container space and fell off the bottom. */
.wsx-ai-pop { position: fixed; z-index: 10210; width: 320px; max-width: calc(100vw - 24px); max-height: 74vh; overflow-y: auto; background: #fff; border: 1px solid var(--wsx-line); border-radius: 14px; box-shadow: 0 16px 44px rgba(20,40,30,.22); padding: 10px; opacity: 0; transform: translateY(6px); transition: opacity .14s var(--wsx-ease, ease), transform .14s var(--wsx-ease, ease); }
.wsx-ai-pop.open { opacity: 1; transform: translateY(0); }
.wsx-ai-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.wsx-ai-x { margin-left: auto; flex: none; border: none; background: none; color: #9A9891; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 8px; }
.wsx-ai-x:hover { background: rgba(0,0,0,.06); color: #33352F; }
.wsx-qr-new { margin-left: auto; }
.wsx-qr-new + .wsx-ai-x { margin-left: 2px; }
.wsx-ai-tabs button { border: 1px solid var(--wsx-line); background: #fff; color: var(--wsx-muted); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.wsx-ai-tabs button.on { background: var(--wsx-green); border-color: var(--wsx-green); color: #fff; }
.wsx-ai-pop textarea, .wsx-qr-in { width: 100%; border: 1px solid var(--wsx-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; background: #FBFCFB; }
.wsx-qr-in { margin-bottom: 6px; }
.wsx-ai-hint { font-size: 11px; color: var(--wsx-faint); margin: 5px 2px; }
.wsx-ai-out { margin-top: 7px; padding: 8px 10px; border-radius: 10px; background: #F1F6F1; border: 1px solid #DCE9DD; font-size: 12.5px; line-height: 1.45; max-height: 160px; overflow: auto; white-space: pre-wrap; }
.wsx-ai-meta { font-size: 11px; color: var(--wsx-muted); margin-top: 4px; white-space: normal; }
.wsx-ai-assign { width: 100%; margin-top: 7px; border: 1px solid var(--wsx-line); border-radius: 9px; padding: 6px 8px; font: inherit; font-size: 12.5px; background: #fff; }
/* "Use recent conversation" toggle — checked by default */
.wsx-ai-hist { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--wsx-muted); margin: 7px 2px 2px; cursor: pointer; }
.wsx-ai-hist input { width: 15px; height: 15px; accent-color: var(--wsx-green); flex: none; }
/* Editable draft + regenerate / shorten / elongate toolbar */
.wsx-ai-draft { width: 100%; margin-top: 8px; border: 1px solid #DCE9DD; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.45; background: #F1F6F1; resize: vertical; min-height: 56px; box-sizing: border-box; }
.wsx-ai-tools { display: flex; gap: 6px; margin-top: 7px; }
.wsx-ai-tool { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--wsx-line); background: #fff; border-radius: 9px; padding: 6px 4px; font-size: 11.5px; font-weight: 600; color: var(--wsx-ink); cursor: pointer; }
.wsx-ai-tool svg { width: 13px; height: 13px; }
.wsx-ai-tool:hover { background: #F1F4F1; border-color: #CFDDD2; }
.wsx-ai-tool:disabled { opacity: .5; cursor: default; }
.wsx-ai-acts { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.wsx-ai-busy { font-size: 11.5px; color: var(--wsx-faint); }
.wsx-ai-go { margin-left: auto; border: none; background: var(--wsx-green); color: #fff; border-radius: 10px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wsx-ai-go:disabled { opacity: .6; cursor: default; }
.wsx-qr-cancel { border: 1px solid var(--wsx-line); background: #fff; border-radius: 10px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; }
.wsx-qr-new { margin-left: auto; }
.wsx-qr-list { max-height: 260px; overflow-y: auto; }
.wsx-qr-row { position: relative; padding: 7px 26px 7px 9px; border-radius: 10px; cursor: pointer; }
.wsx-qr-row:hover { background: #F1F4F1; }
.wsx-qr-t { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.wsx-qr-x { font-size: 11.5px; color: var(--wsx-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsx-qr-scope { font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .3px; }
.wsx-qr-scope.global { background: #EAF3FB; color: #2A6496; }
.wsx-qr-scope.team { background: #F3EEFA; color: #6B4EA8; }
.wsx-qr-scope.personal { background: #F0F7F1; color: #2C7A43; }
.wsx-qr-del { position: absolute; right: 6px; top: 7px; border: none; background: none; color: #B9B7AE; cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.wsx-qr-del:hover { color: #B3261E; background: rgba(179,38,30,.08); }
.wsx-qr-scoperow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; margin-top: 7px; }
.wsx-qr-scoperow select { border: 1px solid var(--wsx-line); border-radius: 8px; padding: 3px 6px; font-size: 11.5px; }
.wsx-ai-btn.on, .wsx-qr-btn.on { color: var(--wsx-green-d, #2C7A43); }
/* Header name opens info (WhatsApp) — the gear is gone */
.wsx-head-click { cursor: pointer; }
.wsx-head-click:hover { text-decoration: underline; text-underline-offset: 2px; }
.wsx-gi-name-ro { text-align: center; font-size: 16px; font-weight: 700; padding: 6px 0; }
.wsx-ge-leave { border: 1px solid #F0C0C0; background: #fff; color: #C0392B; border-radius: 10px; padding: 9px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.wsx-ge-leave:hover { background: #FBEBE9; }
.wsx-ge-leave svg { width: 14px; height: 14px; }
/* DM contact info card */
.wsx-ci-role { text-align: center; font-size: 12px; color: var(--wsx-muted); margin-top: 2px; }
.wsx-ci-rows { margin-top: 4px; }
.wsx-ci-row { display: flex; align-items: center; gap: 10px; padding: 9px 9px; border-radius: 10px; font-size: 13px; }
.wsx-ci-row + .wsx-ci-row { border-top: 1px solid var(--wsx-line); border-radius: 0; }
/* Person profile (23 Sep 2026): Call / Message / Mail row, held-back number, shared groups */
.wsx-pp .wsx-pp-acts { padding-top: 4px; }
.wsx-pp .wsx-pp-acts .wsx-gi-tile { flex: 0 1 108px; }
.wsx-pp .wsx-pp-you { font-size: 13px; font-weight: 500; color: var(--wsx-muted); }
.wsx-pp .wsx-pp-held { color: var(--wsx-muted); font-size: 12px; line-height: 1.4; }
.wsx-pp .wsx-ci-v a { color: var(--wsx-green-d); text-decoration: none; font-weight: 600; }
.wsx-pp .wsx-ci-v a:hover { text-decoration: underline; }
.wsx-pp button.wsx-ci-row { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; font: inherit; color: inherit; }
.wsx-pp button.wsx-ci-row:hover { background: #F1F8F3; }
.wsx-pp button.wsx-ci-row .wsx-ge-mav { width: 30px; height: 30px; font-size: 12px; flex: 0 0 30px; }
.wsx-ge-mrow[data-profile] { cursor: pointer; }
.wsx-ge-mrow[data-profile]:hover .wsx-ge-mname { text-decoration: underline; text-underline-offset: 2px; }
.wsx-ci-k { color: var(--wsx-muted); min-width: 92px; font-size: 12px; }
.wsx-ci-v { flex: 1; min-width: 0; word-break: break-word; }
.wsx-ci-v a { color: var(--wsx-green-d, #2C7A43); }
.wsx-ge-pick { margin-bottom: 4px; }
#wsxGeMembers .wsx-ge-mrow { cursor: default; }   /* member rows aren't clickable — the ✕ is the affordance */
.wsx-ge-curh { margin-top: 10px; }
.wsx-ge-empty { padding: 10px; color: #95938B; font-size: 12.5px; }
.wsx-ge-actions { display: flex; gap: 10px; margin-top: 16px; }
.wsx-ge-save { margin-left: auto; border: none; background: var(--wsx-green); color: #fff; border-radius: 10px; padding: 9px 17px; font-size: 13px; font-weight: 700; cursor: pointer; }
.wsx-ge-save:hover { background: var(--wsx-green-d); }
.wsx-ge-del { border: 1px solid #F0C0C0; background: #fff; color: #C0392B; border-radius: 10px; padding: 9px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wsx-ge-del:hover { background: #FBEBE9; }
.wsx-chat-gear { margin-left: auto; border: none; background: transparent; cursor: pointer; color: var(--wsx-muted); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.wsx-chat-gear:hover { background: var(--wsx-line); color: var(--wsx-green-d); }
.wsx-chat-gear svg { width: 17px; height: 17px; }
.wsx-chat-avatar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.wsx-chat-avatar .wsx-cl-av { width: 30px; height: 30px; font-size: 12px; }
body.wsx-kb-open .wsx-composer { padding-bottom: 8px; }
.wsx-av-admin { background: #EAF0FB !important; color: #2E63D8 !important; font-size: 18px !important; }
.wsx-av-grp { background: linear-gradient(160deg, #8FC0FF, #4C82E0) !important; }
.wsx-av-img { padding: 0 !important; overflow: hidden; }
.wsx-av-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Customise-dock modal -------------------------------------------------- */
.wsx-dockcfg-ov {
  position: fixed; inset: 0; z-index: 10120; display: flex; align-items: center; justify-content: center;
  background: rgba(18, 30, 24, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .18s var(--wsx-ease); padding: 20px;
}
.wsx-dockcfg-ov.open { opacity: 1; }
.wsx-dockcfg {
  width: 560px; max-width: 100%; max-height: 88vh; overflow: auto;
  background: rgba(255,255,255,.92); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.7); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(20,40,30,.32); padding: 20px 20px 16px;
  transform: scale(.96) translateY(6px); transition: transform .2s var(--wsx-ease);
}
.wsx-dockcfg-ov.open .wsx-dockcfg { transform: none; }
.wsx-dockcfg-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.wsx-dockcfg-title { font-size: 17px; font-weight: 800; color: var(--wsx-ink); }
.wsx-dockcfg-sub { font-size: 12px; color: var(--wsx-faint); margin-top: 2px; }
.wsx-dockcfg-x { margin-left: auto; border: none; background: transparent; cursor: pointer; color: var(--wsx-muted); width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.wsx-dockcfg-x:hover { background: var(--wsx-line); color: var(--wsx-ink); }
.wsx-dockcfg-x svg { width: 18px; height: 18px; }
.wsx-dockcfg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.wsx-dockcfg-grid.disabled { opacity: .4; pointer-events: none; filter: grayscale(.4); }
.wsx-dc-chip {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--wsx-line); background: rgba(255,255,255,.5); text-align: left;
  transition: border-color .14s var(--wsx-ease), background .14s, transform .12s var(--wsx-ease);
}
.wsx-dc-chip:hover { border-color: #CFE6D6; transform: translateY(-1px); }
.wsx-dc-chip:active { transform: scale(.985); }
.wsx-dc-ico { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 3px rgba(20,40,30,.18)); }
.wsx-dc-ico svg { width: 30px; height: 30px; }
.wsx-dc-lbl { font-size: 13px; font-weight: 600; color: var(--wsx-ink); flex: 1; }
.wsx-dc-chk { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--wsx-line); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .14s, border-color .14s; }
.wsx-dc-chk svg { width: 13px; height: 13px; opacity: 0; transition: opacity .12s; }
.wsx-dc-chip.on { border-color: var(--wsx-green); background: #F1F8F3; }
.wsx-dc-chip.on .wsx-dc-chk { background: var(--wsx-green); border-color: var(--wsx-green); }
.wsx-dc-chip.on .wsx-dc-chk svg { opacity: 1; }
.wsx-dockcfg-op { display: flex; align-items: center; gap: 12px; margin: 16px 2px 4px; font-size: 12.5px; font-weight: 600; color: var(--wsx-muted); }
.wsx-dockcfg-op input[type=range] { flex: 1; accent-color: var(--wsx-green); height: 4px; }
.wsx-dockcfg-opval { min-width: 38px; text-align: right; color: var(--wsx-green-d); font-variant-numeric: tabular-nums; }
.wsx-dockcfg-hide { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 12.5px; color: var(--wsx-muted); cursor: pointer; }
.wsx-dockcfg-hide input { accent-color: var(--wsx-green); width: 15px; height: 15px; }
.wsx-dockcfg-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--wsx-line); }
.wsx-dockcfg-count { font-size: 12px; color: var(--wsx-faint); font-weight: 600; }
.wsx-dockcfg-count.warn { color: #D1453B; }
.wsx-dockcfg-actions { margin-left: auto; display: flex; gap: 9px; }
.wsx-btn-ghost { border: 1px solid var(--wsx-line); background: #fff; color: var(--wsx-muted); padding: 8px 16px; border-radius: 11px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .13s; }
.wsx-btn-ghost:hover { background: var(--wsx-line); }
.wsx-btn-primary { border: none; background: var(--wsx-green); color: #fff; padding: 8px 18px; border-radius: 11px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .13s, opacity .13s; }
.wsx-btn-primary:hover { background: var(--wsx-green-d); }
.wsx-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) { .wsx-dockcfg-grid { grid-template-columns: 1fr; } }
/* profile "Customise dock" section — only meaningful when the desktop shell is on */
.wsx-only-shell { display: none; }
body.wsx-shell-on .wsx-only-shell { display: block; }

/* (The 84px dock reserve on work overlays is GONE: the dock now auto-hides
   behind the bottom line on every desktop page, and while hovered it rides
   above overlays on its own high z — nothing needs to clear it anymore.) */

/* ── Dock auto-hide (ALL desktop pages) ─────────────────────────────────────
   The dock stays tucked below the viewport; a slim iOS-style line marks it.
   Hovering the line (or brushing the bottom edge) slides the dock up; leaving
   it slides it away. While shown it sits ABOVE raised pages/overlays so it is
   reachable from anywhere — it is chrome, not content. */
@media (min-width: 901px){
  #wsxDock{
    transform: translateX(-50%) translateY(calc(100% + 26px));
    opacity: 0; pointer-events: none;
    transition: transform .3s var(--wsx-ease), opacity .22s ease;
  }
  body.wsx-dock-show #wsxDock{
    transform: translateX(-50%) translateY(0);
    opacity: 1; pointer-events: auto;
    z-index: 2147482600;
  }
  #wsxDockLine{
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 6px;
    width: 132px; height: 5px; border-radius: 3px;
    background: var(--wsx-ink, #23291F); opacity: .16;
    z-index: 2147482600; cursor: pointer; transition: opacity .18s;
  }
  #wsxDockLine::after{ content:''; position:absolute; inset:-10px -22px; }  /* fat hover target */
  #wsxDockLine:hover{ opacity: .38; }
  body.wsx-dock-show #wsxDockLine{ opacity: 0; pointer-events: none; }
}
@media (max-width: 900px){ #wsxDockLine{ display: none; } }

/* Live formatting preview in the composer's mirror backdrop. Colour-only —
   the overlay must keep identical glyph metrics to the textarea above it. */
.wsx-mn-backdrop .fmtb { color: var(--wsx-green-d, #2C5E2E); background: rgba(60,117,56,.10); border-radius: 3px; }
.wsx-mn-backdrop .fmti { color: #7A5EA8; background: rgba(122,94,168,.10); border-radius: 3px; }

/* ── Chat UX polish (drafts / N-new FAB / search highlight) ─────────────── */
/* Green "Draft:" prefix on a chat-list row holding unsent composer text. */
.wsx-cl-draft { color: var(--danger-fg, #B3261E); font-weight: 700; font-style: italic; }   /* red like WhatsApp (owner, 23 Oct 2026) */
/* "N new" count bubble riding the jump-to-latest ↓ FAB. */
.wsx-tobottom { overflow: visible; }
.wsx-tobottom.has-new { border-color: var(--wsx-green); }
.wsx-tobottom-n { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--wsx-green); color: #fff; font: 700 10px/16px var(--font-sans, system-ui); text-align: center; box-shadow: 0 1px 4px rgba(20,40,30,.25); animation: wsxNewPop .16s cubic-bezier(.34,1.4,.64,1); }
@keyframes wsxNewPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wsx-tobottom-n { animation: none; } }
/* Match count chip + <mark> highlight for the in-chat message search. */
.wsx-cf-n { position: absolute; right: 32px; font-size: 11px; font-weight: 600; color: var(--wsx-green-d, #2C5E2E); background: rgba(60,117,56,.10); border-radius: 8px; padding: 2px 7px; pointer-events: none; }
.wsx-cf-n:empty { display: none; }
/* only clear space for the chip while it's actually showing */
.wsx-cf-row:has(.wsx-cf-n:not(:empty)) input { padding-right: 110px; }
.wsx-cf-hl { background: rgba(60,117,56,.22); color: inherit; border-radius: 3px; padding: 0 1px; }
.wsx-msg.me .wsx-cf-hl { background: rgba(255,255,255,.35); }

/* Kudos card — subtle green appreciation bubble (kudos flag, client-only). */
/* Kudos card — PURPLE, deliberately unlike every other banner (green = system,
 * pink = celebrations, orange = warnings). Recognition gets its own color. */
.wsx-bubble.wsx-kudos{background:linear-gradient(135deg,#F1EFFE 0%,#E4E0FB 100%);border:1px solid #C9C2F0;border-left:3px solid #6C5CE7;box-shadow:0 2px 10px rgba(76,60,137,.14);color:#3C3489}
.wsx-bubble.wsx-kudos strong,.wsx-bubble.wsx-kudos b{color:#3C3489}
.wsx-msg.me .wsx-bubble.wsx-kudos{background:linear-gradient(135deg,#ECE8FD 0%,#DDD7FA 100%)}

/* ═══ WhatsApp-class chat pass (29 Aug) ═══════════════════════════════════
   Media is the message, gestures feel held, menus grow from their bubble.
   Motion school: fast ease-out enters (under 200ms), exits faster, transform/
   opacity only, origin-aware scaling, gesture drags track the finger 1:1. */

/* ── media bubbles ─────────────────────────────────────────────────────── */
.wsx-msg-att img { max-width: min(300px, 72vw); max-height: 360px; border-radius: 13px; }
.wsx-att-vidbox { width: min(300px, 72vw); }
.wsx-att-video { width: 100%; max-height: 360px; object-fit: cover; display: block; }
/* the caption-less photo/video: 4px frame, meta ON the media over a scrim */
.wsx-bubble.wsx-media-solo { padding: 4px; border-radius: 16px; }
.wsx-msg.me .wsx-bubble.wsx-media-solo { border-radius: 16px; }
.wsx-bubble.wsx-media-solo .wsx-msg-att { margin-top: 0; position: relative; width: max-content; max-width: 100%; }
.wsx-bubble.wsx-media-solo .wsx-msg-att img,
.wsx-bubble.wsx-media-solo .wsx-att-vidbox { border-radius: 13px; margin-bottom: 0; }
.wsx-bubble.wsx-media-solo .wsx-msg-att::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  border-radius: 0 0 13px 13px; background: linear-gradient(180deg, transparent, rgba(10, 14, 10, .45)); pointer-events: none; }
.wsx-bubble.wsx-media-solo .wsx-msg-time { position: absolute; right: 10px; bottom: 7px; z-index: 2; margin: 0; float: none; top: auto;
  color: #fff; font-size: 10px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.wsx-msg.me .wsx-bubble.wsx-media-solo .wsx-msg-time { color: #fff; }
.wsx-bubble.wsx-media-solo .wsx-att-size { display: none; }
/* video: the play affordance is a real button-sized circle, duration a chip */
.wsx-att-play { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #17331B;
  display: grid; place-items: center; font-size: 19px; padding-left: 4px; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 4px 16px rgba(10, 16, 10, .3); transition: transform .16s var(--wsx-ease), background .16s; }
.wsx-att-vidbox:hover .wsx-att-play { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.wsx-att-dur { position: absolute; left: 8px; bottom: 7px; z-index: 2; background: rgba(12, 16, 12, .62); color: #fff;
  font: 600 10px/1 var(--wsx-mono, ui-monospace); padding: 4px 7px; border-radius: 999px; letter-spacing: .02em; }
/* the floating forward shortcut beside media */
.wsx-msg-att { position: relative; }
.wsx-att-fwd { position: absolute; top: 50%; transform: translateY(-50%); right: -44px; width: 34px; height: 34px;
  border-radius: 50%; border: none; background: rgba(60, 70, 60, .45); color: #fff; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity .15s var(--wsx-ease), background .15s, transform .15s var(--wsx-ease); }
.wsx-att-fwd svg { width: 16px; height: 16px; }
.wsx-msg.me .wsx-att-fwd { right: auto; left: -44px; }
.wsx-msg:hover .wsx-att-fwd { opacity: 1; }
.wsx-att-fwd:hover { background: rgba(50, 60, 50, .65); transform: translateY(-50%) scale(1.08); }
/* Touch: a 44px target (the app-wide button min-height) drawn as a 36px circle —
   the transparent border is tap area, not paint. Without it min-height stretched
   the circle into an oval (design review, 14 Sep 2026). */
@media (pointer: coarse) { .wsx-att-fwd { opacity: .85; width: 44px; height: 44px; min-height: 44px; border: 4px solid transparent; background-clip: padding-box; } }

/* ── swipe-to-reply ────────────────────────────────────────────────────── */
.wsx-msg { touch-action: pan-y pinch-zoom; }
.wsx-msg.wsx-swiping { position: relative; }
.wsx-swipe-reply { position: absolute; left: 6px; top: 50%; transform: translateY(-50%) scale(.6); width: 34px; height: 34px;
  border-radius: 50%; background: #E4EFE6; color: var(--wsx-green-d, #2F5C2C); display: grid; place-items: center;
  opacity: 0; pointer-events: none; }
.wsx-swipe-reply svg { width: 17px; height: 17px; }
.wsx-swipe-reply.go { background: var(--wsx-green-d, #2F5C2C); color: #fff; box-shadow: 0 3px 12px rgba(47, 92, 44, .35); }

/* ── the long-press moment: scrim, lifted bubble, origin-aware menu ────── */
.wsx-mm-scrim { position: fixed; inset: 0; z-index: 10180; background: rgba(16, 22, 16, .34);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s var(--wsx-ease); }
.wsx-mm-scrim.open { opacity: 1; }
.wsx-msg-lift { position: relative; z-index: 10190; }
.wsx-msg-lift .wsx-bubble { transform: scale(1.02); transition: transform .16s var(--wsx-ease); }
/* menu = a floating reactions pill above a detached action card */
.wsx-msgmenu { background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; width: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  transform-origin: top left; transform: scale(.9); }
.wsx-msgmenu.from-me { align-items: flex-end; transform-origin: top right; }
.wsx-msgmenu.open { transform: scale(1); }
/* ALL ten reactions stay — five across, two rows, floating as its own card
   (a single 10-wide row would overflow a phone). */
.wsx-mm-emojis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px 8px; margin: 0;
  border: 1px solid rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border-radius: 24px; box-shadow: 0 10px 34px rgba(20, 40, 30, .24); width: max-content; }
.wsx-mm-emojis button { width: 38px; height: 38px; border-radius: 50%; }
.wsx-mm-list { width: 216px; background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px; box-shadow: 0 18px 50px rgba(20, 40, 30, .28); padding: 6px; }

/* ── polls, the WhatsApp way: radio ring, slim track, quiet counts ─────── */
.wsx-poll-q { font-weight: 700; font-size: 13.5px; }
.wsx-poll-opt { border: none; background: transparent; padding: 5px 2px 13px 32px; border-radius: 8px; overflow: visible; }
.wsx-poll-opt:hover { border: none; background: rgba(60, 117, 56, .05); }
.wsx-poll-opt::before { content: ""; position: absolute; left: 4px; top: 7px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #B9C5BB; background: #fff; transition: border-color .14s, background .14s; }
.wsx-poll-opt.on::before { border-color: var(--wsx-green-d, #2F5C2C); background: var(--wsx-green-d, #2F5C2C);
  box-shadow: inset 0 0 0 3px #fff; }
.wsx-poll-opt::after { content: ""; position: absolute; left: 32px; right: 74px; bottom: 6px; height: 5px; border-radius: 999px;
  background: #E7EDE8; }
.wsx-poll-bar { position: absolute; left: 32px; bottom: 6px; top: auto; height: 5px; border-radius: 999px; z-index: 1;
  background: var(--wsx-green-d, #2F5C2C); opacity: .85; max-width: calc(100% - 106px); transition: width .3s var(--wsx-ease); }
.wsx-poll-otext { position: relative; font-size: 13px; }
.wsx-poll-ocnt { position: absolute; right: 2px; top: 6px; font-size: 11px; font-weight: 600; color: var(--wsx-faint); font-variant-numeric: tabular-nums; }
.wsx-poll-total { font-size: 11px; color: var(--wsx-faint); }

/* ── announcements: a calmer card ──────────────────────────────────────── */
.wsx-ann { border-radius: 16px; }
.wsx-ann-badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }

/* Room for information on a phone: media stretches, chrome stays thin. */
@media (max-width: 600px) {
  /* 78vw was wider than a bubble can be (the row is 78% of the chat, less its
     padding) — the photo spilled out of its bubble (design review, 14 Sep 2026). */
  .wsx-msg-att img, .wsx-att-vidbox { max-width: min(300px, 64vw); }
  .wsx-att-fwd { right: -52px; }                /* ~8px clear of the bubble */
  .wsx-msg.me .wsx-att-fwd { left: -52px; }
}
@media (prefers-reduced-motion: reduce) {
  .wsx-msgmenu, .wsx-mm-scrim, .wsx-msg-lift .wsx-bubble, .wsx-att-play, .wsx-att-fwd, .wsx-poll-bar { transition: none; }
}

/* pull-to-refresh pill */
.wsx-ptr { position: sticky; top: 8px; z-index: 8; width: 38px; height: 38px; margin: 0 auto -38px; border-radius: 50%;
  background: var(--card, #fff); box-shadow: 0 4px 16px rgba(20, 26, 20, .2); display: grid; place-items: center; opacity: 0; }
.wsx-ptr.go { opacity: 1 !important; }
.wsx-ptrspin { width: 16px; height: 16px; border: 2px solid var(--wsx-green-d, #2F5C2C); border-top-color: transparent;
  border-radius: 50%; animation: wsxptr .7s linear infinite; }
@keyframes wsxptr { to { transform: rotate(360deg) } }

/* ── HRMS assistant in chat: its own face + quick-asks ─────────────────── */
.wsx-msg.wsx-bot .wsx-av { background: var(--wsx-green-d, #2F5C2C) !important; }
.wsx-bot-spark { font-size: 16px; }
.wsx-msg.wsx-bot .wsx-bubble { background: #F3F8F1; border-color: #CFE2CC; }
.wsx-msg.wsx-bot .wsx-msg-sender { color: var(--wsx-green-d, #2F5C2C); font-weight: 700; }
.wsx-botchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; align-self: flex-start; }
.wsx-botchip { border: 1px solid #CFE2CC; background: #fff; border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 12.5px; color: var(--wsx-green-d, #2F5C2C); cursor: pointer; min-height: 38px;
  transition: background .12s, border-color .12s; }
.wsx-botchip:hover { background: #F1F8F3; border-color: var(--wsx-green-d, #2F5C2C); }

/* Assistant's list avatar: the same spark it wears on its bubbles. */
.wsx-cl-av-bot { background: var(--wsx-green-d, #2F5C2C) !important; display: grid; place-items: center; }
.wsx-cl-av-bot .wsx-bot-spark { font-size: 18px; }

/* ── thumb sizes on a phone (16 Sep, measured on the iPhone capture) ─────
 * The filter chips came out 32pt tall, the group-name field 29pt, and the
 * two search fields sat at 13px — which is also why iOS zoomed the page on
 * focus. Phones only; the desktop panel keeps its dense toolbar. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .wsx-cl-chip { min-height: 44px !important; min-width: 44px !important; }
  #wsxClSearch, #wsxNcSearch, .wsx-gi-name, .wsx-nt-filter input { min-height: 44px !important; font-size: 17px !important; }
  .wsx-gi-tile, .wa-gi-tiles button { min-width: 44px !important; }
  .wsx-tobottom { width: 44px !important; height: 44px !important; }
  /* Reaction pills stay small — every iOS messenger draws them that way —
   * but the tap area is extended to 44pt so the thumb does not have to be
   * accurate. The pill itself is unchanged. */
  .wsx-react-chip { position: relative; }
  .wsx-react-chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
}

/* rows shown before the server confirmed them carry a quiet strip under them (25 Sep 2026) */
.wsx-empty.wsx-newer { padding: 10px; font-size: 12px; }