/* Theme: gloss */
/* Theme: engagify (shares this stylesheet; see the parody layer below) */
/*
 * Gloss: a soft lavender page, white rounded cards, pill buttons, a violet
 * accent and a sans-serif face. Engagify is Gloss plus a parody layer: a
 * gradient wash, a "NEW" badge in the theme menu and the nags drawn by
 * theme-engagify.js. ThemeRegistry gives engagify this stylesheet, so a fix
 * to the shared look reaches both themes. Write shared rules for both theme
 * names and parody rules for engagify only.
 */
:root[data-theme="gloss"],
:root[data-theme="engagify"],
.theme-menu__option[data-theme-option="gloss"],
.theme-menu__option[data-theme-option="engagify"] {
  color-scheme: light;
  --page-bg: #f6f5fb;
  --body-background: #f6f5fb;
  --ink: #1e1b2e;
  --ink-soft: #5b5670;
  --line: #8b85a3;
  --panel: #ffffff;
  --input-bg: #ffffff;
  --button-bg: #f1edfd;
  --button-alt-bg: #fdf2f8;
  --feedback-ok-bg: #ecfdf5;
  --feedback-error-bg: #fef2f2;
  --status-error: #b91c1c;
  --status-ok: #047857;
  --status-warning: #a16207;
  --active-bg: #ede9fe;
  --active-ink: #4c1d95;
  --active-line: #7c3aed;
  --active-ring: rgba(124, 58, 237, 0.22);
  --body-font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ui-font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --code-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --gloss-accent: #6d28d9;
  --gloss-edge: #e2dff0;
  --gloss-control-edge: #c4b5fd;
  --gloss-shadow: 0 1px 2px rgba(30, 27, 46, 0.04), 0 8px 24px rgba(76, 29, 149, 0.08);
}

.theme-swatch[data-theme="gloss"] {
  background:
    radial-gradient(circle at 70% 30%, #ffffff 0 18%, transparent 19%),
    #7c3aed;
  border-color: #6d28d9;
}

/* Shared look. */

:root:is([data-theme="gloss"], [data-theme="engagify"]) .card {
  border-radius: 1rem;
  /* Cards are not controls, so a soft border is enough; inputs keep --line. */
  border-color: var(--gloss-edge);
  box-shadow: var(--gloss-shadow);
}

:root:is([data-theme="gloss"], [data-theme="engagify"]) input,
:root:is([data-theme="gloss"], [data-theme="engagify"]) textarea {
  border-radius: 0.75rem;
}

:root:is([data-theme="gloss"], [data-theme="engagify"]) button:not(.theme-swatch):not(.theme-menu__trigger):not(.theme-menu__option):not([class*="engagify-"]) {
  border-radius: 999px;
  border-color: var(--gloss-control-edge);
  font-weight: 600;
}

:root:is([data-theme="gloss"], [data-theme="engagify"]) a {
  color: var(--gloss-accent);
}

/* Edges. One rule per kind of element:
   - containers: 16px corners, the pale edge, and a shadow when they float;
   - clickable things: pills with a soft violet edge;
   - text fields: 12px corners and the darker --line, so an empty field stays
     visible on a white card (3:1);
   - dividers and small inner boxes: the pale edge, 8px where rounded. */

:root:is([data-theme="gloss"], [data-theme="engagify"]) .thread-rows,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .account-menu__panel,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .board-sort__menu,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .compose-action-menu-list {
  border-color: var(--gloss-edge);
  border-radius: 1rem;
  box-shadow: var(--gloss-shadow);
}

/* Only the thread list clips, to round its rows' corners. Menus must not
   clip: the theme picker and its palette popovers open inside the account
   menu. */
:root:is([data-theme="gloss"], [data-theme="engagify"]) .thread-rows {
  overflow: hidden;
}

:root:is([data-theme="gloss"], [data-theme="engagify"]) .tag-group,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .bookmarklet-group,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .account-card,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .account-group,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .account-key-advanced,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .compose-disclosure {
  border-color: var(--gloss-edge);
  border-radius: 1rem;
}

:root:is([data-theme="gloss"], [data-theme="engagify"]) .thread-row + .thread-row,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .about-section + .about-section,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .account-row {
  border-color: var(--gloss-edge);
}

:root:is([data-theme="gloss"], [data-theme="engagify"]) .calendar-day {
  border-color: var(--gloss-edge);
}

:root:is([data-theme="gloss"], [data-theme="engagify"]) pre,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .thread-row__thumb,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .bookmarklet-feedback {
  border-color: var(--gloss-edge);
  border-radius: 0.5rem;
}

:root:is([data-theme="gloss"], [data-theme="engagify"]) .nav-link,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .new-post-button,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .account-menu__trigger,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .tool-launcher-button,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .compose-action-menu-toggle {
  border-radius: 999px;
  border-color: var(--gloss-control-edge);
}

/* The app shell's New post rule and the theme switcher set their own edge;
   status chips keep their status colour. */
:root:is([data-theme="gloss"], [data-theme="engagify"]) [data-shell="app"] .new-post-button:not(.is-active),
:root:is([data-theme="gloss"], [data-theme="engagify"]) .theme-menu,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .chip:not(.chip--pending):not(.chip--approved) {
  border-color: var(--gloss-control-edge);
}

/* Current and active links keep their stronger violet edge. */
:root:is([data-theme="gloss"], [data-theme="engagify"]) .nav-link.is-active,
:root:is([data-theme="gloss"], [data-theme="engagify"]) .nav-link[aria-current="page"] {
  border-color: var(--active-line);
}

/* Phone tab bar: tall tabs read better as rounded rectangles than pills. */
@media (max-width: 639px) {
  :root:is([data-theme="gloss"], [data-theme="engagify"]) [data-shell="app"] .site-header--app .nav > .nav-link,
  :root:is([data-theme="gloss"], [data-theme="engagify"]) [data-shell="app"] .site-header--app .new-post-button,
  :root:is([data-theme="gloss"], [data-theme="engagify"]) [data-shell="app"] .site-header--app .account-menu__trigger {
    border-radius: 0.75rem;
  }

  :root:is([data-theme="gloss"], [data-theme="engagify"]) [data-shell="app"] .site-header--app .nav > .nav-link.is-active,
  :root:is([data-theme="gloss"], [data-theme="engagify"]) [data-shell="app"] .account-menu[open] > .account-menu__trigger {
    border-color: var(--active-line);
  }

  /* The More tab renamed after the current page draws its selected look here. */
  :root:is([data-theme="gloss"], [data-theme="engagify"]) [data-shell="app"] .account-menu__label--current::before {
    border-color: var(--active-line);
    border-radius: 0.75rem;
  }
}

/* Gloss colour picker (ThemeRegistry::GLOSS_PALETTES). Violet is the base
   look above; each palette swaps the accent family. Gloss only: Engagify
   keeps violet whatever is chosen here. The navigation icons carry violet in
   their SVGs, so each palette turns their hue to match. */
:root[data-theme="gloss"] .theme-menu { margin-left: 2.5rem; }
:root[data-theme="gloss"] [data-role="gloss-palette"] { display: block; }
:root[data-theme="gloss"] .lcd-palette__chip { --lcd-chip: var(--gloss-accent); border-radius: 999px; }
:root[data-theme="gloss"] [data-palette-theme="gloss"][data-palette-chip="violet"] { --lcd-chip: #7c3aed; }
:root[data-theme="gloss"] [data-palette-theme="gloss"][data-palette-chip="blue"] { --lcd-chip: #2563eb; }
:root[data-theme="gloss"] [data-palette-theme="gloss"][data-palette-chip="teal"] { --lcd-chip: #0d9488; }
:root[data-theme="gloss"] [data-palette-theme="gloss"][data-palette-chip="rose"] { --lcd-chip: #e11d48; }

:root[data-theme="gloss"][data-gloss-palette="blue"] {
  --page-bg: #f4f7fc;
  --body-background: #f4f7fc;
  --line: #7f8aa3;
  --button-bg: #eef4ff;
  --button-alt-bg: #eff6ff;
  --active-bg: #dbeafe;
  --active-ink: #1e3a8a;
  --active-line: #2563eb;
  --active-ring: rgba(37, 99, 235, 0.22);
  --gloss-accent: #1d4ed8;
  --gloss-edge: #dde5f3;
  --gloss-control-edge: #93c5fd;
  --gloss-shadow: 0 1px 2px rgba(30, 27, 46, 0.04), 0 8px 24px rgba(30, 64, 175, 0.08);
}

:root[data-theme="gloss"][data-gloss-palette="blue"] :is(.nav-link, .new-post-button, .tool-launcher-button, .tool-launcher-group-heading)::before,
:root[data-theme="gloss"][data-gloss-palette="blue"] .account-menu__icon {
  filter: hue-rotate(-39deg);
}

:root[data-theme="gloss"][data-gloss-palette="teal"] {
  --page-bg: #f3f9f8;
  --body-background: #f3f9f8;
  --line: #6f8b87;
  --button-bg: #ecfdf9;
  --button-alt-bg: #f0fdfa;
  --active-bg: #ccfbf1;
  --active-ink: #134e4a;
  --active-line: #0d9488;
  --active-ring: rgba(13, 148, 136, 0.22);
  --gloss-accent: #0f766e;
  --gloss-edge: #d5ebe6;
  --gloss-control-edge: #5eead4;
  --gloss-shadow: 0 1px 2px rgba(30, 27, 46, 0.04), 0 8px 24px rgba(17, 94, 89, 0.08);
}

:root[data-theme="gloss"][data-gloss-palette="teal"] :is(.nav-link, .new-post-button, .tool-launcher-button, .tool-launcher-group-heading)::before,
:root[data-theme="gloss"][data-gloss-palette="teal"] .account-menu__icon {
  filter: hue-rotate(-88deg);
}

:root[data-theme="gloss"][data-gloss-palette="rose"] {
  --page-bg: #fbf5f6;
  --body-background: #fbf5f6;
  --line: #a3858c;
  --button-bg: #fff1f2;
  --button-alt-bg: #fdf2f8;
  --active-bg: #ffe4e6;
  --active-ink: #881337;
  --active-line: #e11d48;
  --active-ring: rgba(225, 29, 72, 0.2);
  --gloss-accent: #be123c;
  --gloss-edge: #f3dde1;
  --gloss-control-edge: #fda4af;
  --gloss-shadow: 0 1px 2px rgba(30, 27, 46, 0.04), 0 8px 24px rgba(159, 18, 57, 0.08);
}

:root[data-theme="gloss"][data-gloss-palette="rose"] :is(.nav-link, .new-post-button, .tool-launcher-button, .tool-launcher-group-heading)::before,
:root[data-theme="gloss"][data-gloss-palette="rose"] .account-menu__icon {
  filter: hue-rotate(82deg);
}

/* Engagify parody layer: everything below applies to engagify only. */

:root[data-theme="engagify"],
.theme-menu__option[data-theme-option="engagify"] {
  --body-background:
    radial-gradient(circle at 12% -10%, rgba(124, 58, 237, 0.14), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(236, 72, 153, 0.1), transparent 36%),
    #f6f5fb;
  --engagify-accent: var(--gloss-accent);
  --engagify-accent-ink: #ffffff;
  --engagify-hot: #db2777;
}

.theme-swatch[data-theme="engagify"] {
  background:
    radial-gradient(circle at 70% 30%, #ffffff 0 18%, transparent 19%),
    linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  border-color: #6d28d9;
}

.theme-menu__option[data-theme-option="engagify"] {
  font-weight: 700;
}

.theme-menu__option[data-theme-option="engagify"]::after {
  content: "NEW";
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: #db2777;
  color: #ffffff;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

/* Nags (theme-engagify.js). Nags stay under the phone tab bar and the
   account menu (z-index 25 and up), so the theme menu stays reachable. */

:root[data-theme="engagify"] .engagify-exit {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: calc(var(--app-tabbar-offset, 0px) + max(1rem, env(safe-area-inset-bottom)));
  z-index: 24;
  width: auto;
  margin: 0;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: #1e1b2e;
  color: #ffffff;
  font: 600 0.95rem/1 var(--ui-font);
  box-shadow: 0 8px 24px rgba(30, 27, 46, 0.3);
  cursor: pointer;
}

:root[data-theme="engagify"] .engagify-exit:focus-visible,
:root[data-theme="engagify"] .engagify-button:focus-visible,
:root[data-theme="engagify"] .engagify-link:focus-visible,
:root[data-theme="engagify"] .engagify-star:focus-visible,
:root[data-theme="engagify"] .engagify-close:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

:root[data-theme="engagify"] .engagify-nag {
  font-family: var(--ui-font);
  color: var(--ink);
  box-sizing: border-box;
}

:root[data-theme="engagify"] .engagify-nag *,
:root[data-theme="engagify"] .engagify-nag *::before,
:root[data-theme="engagify"] .engagify-nag *::after {
  box-sizing: inherit;
}

:root[data-theme="engagify"] .engagify-nag h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

:root[data-theme="engagify"] .engagify-nag p {
  margin: 0;
  line-height: 1.5;
  color: var(--ink-soft);
}

:root[data-theme="engagify"] .engagify-button {
  /* Base button rules stretch buttons to full width. */
  width: auto;
  margin: 0;
  min-height: 44px;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 0.85rem;
  background: var(--engagify-accent);
  color: var(--engagify-accent-ink);
  font: 700 1rem/1 var(--ui-font);
  cursor: pointer;
}

:root[data-theme="engagify"] .engagify-link {
  width: auto;
  margin: 0;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 0;
  background: transparent;
  color: #6b6680;
  font: 400 0.85rem/1.2 var(--ui-font);
  cursor: pointer;
}

:root[data-theme="engagify"] .engagify-close {
  width: auto;
  margin: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 400 1.4rem/1 var(--ui-font);
  cursor: pointer;
}

:root[data-theme="engagify"] .engagify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

:root[data-theme="engagify"] .engagify-card {
  position: fixed;
  z-index: 23;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #e2dff0;
  border-radius: 1.1rem;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(30, 27, 46, 0.22);
}

:root[data-theme="engagify"] .engagify-card .engagify-actions > .engagify-button {
  flex: 1 1 auto;
}

/* Cookie banner: a full-width sheet over the bottom of the page, like the
   real ones. The Exit pill and chat bubble sit in its empty bottom strip. */
:root[data-theme="engagify"] .engagify-cookie {
  left: 0;
  right: 0;
  bottom: var(--app-tabbar-offset, 0px);
  min-height: min(26rem, 55vh);
  justify-content: center;
  gap: 1.25rem;
  padding: 2.5rem max(1.5rem, calc((100vw - 52rem) / 2)) 5.5rem;
  border-width: 1px 0 0;
  border-radius: 1.75rem 1.75rem 0 0;
  box-shadow: 0 -24px 60px rgba(30, 27, 46, 0.25);
}

:root[data-theme="engagify"] .engagify-cookie h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
}

:root[data-theme="engagify"] .engagify-cookie p {
  font-size: 1.1rem;
}

:root[data-theme="engagify"] .engagify-cookie .engagify-button {
  min-height: 56px;
  padding: 0 2.5rem;
  font-size: 1.15rem;
}

:root[data-theme="engagify"] .engagify-cookie .engagify-actions > .engagify-button {
  flex: 0 1 auto;
}

/* Notification prompt: drawn like the browser's own, at top left. */
:root[data-theme="engagify"] .engagify-permission {
  top: 0.5rem;
  left: 0.5rem;
  width: min(21rem, calc(100vw - 1rem));
  border-radius: 0.6rem;
  font-size: 0.95rem;
}

:root[data-theme="engagify"] .engagify-permission .engagify-actions {
  justify-content: flex-end;
}

/* "Open in app": in the page flow, so it pushes everything down. */
:root[data-theme="engagify"] .engagify-app-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.9rem;
  background: #1e1b2e;
  color: #ffffff;
}

:root[data-theme="engagify"] .engagify-app-bar p {
  flex: 1 1 auto;
  min-width: 0;
  color: #d9d6e8;
  font-size: 0.9rem;
}

:root[data-theme="engagify"] .engagify-app-bar strong {
  color: #ffffff;
}

:root[data-theme="engagify"] .engagify-app-bar .engagify-close {
  color: #d9d6e8;
}

:root[data-theme="engagify"] .engagify-app-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  color: #ffffff;
  font: 800 1.2rem/1 var(--ui-font);
}

:root[data-theme="engagify"] .engagify-toast {
  position: fixed;
  left: 50%;
  top: 1rem;
  z-index: 24;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1rem;
  border-radius: 0.8rem;
  background: #1e1b2e;
  color: #ffffff;
  font-size: 0.9rem;
  transform: translateX(-50%);
  box-shadow: 0 12px 32px rgba(30, 27, 46, 0.3);
}

/* Dialogs: centered over a dimmed page. The shade ignores clicks, so the
   header and theme menu stay usable behind it. */
:root[data-theme="engagify"] .engagify-shade {
  position: fixed;
  inset: 0;
  z-index: 22;
  background: rgba(30, 27, 46, 0.45);
  pointer-events: none;
}

:root[data-theme="engagify"] .engagify-dialog {
  top: 50%;
  left: 50%;
  width: min(25rem, calc(100vw - 2rem));
  max-height: calc(100vh - var(--app-tabbar-offset, 0px) - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 1.4rem;
  text-align: center;
  align-items: center;
  transform: translate(-50%, calc(-50% - var(--app-tabbar-offset, 0px) / 2));
}

:root[data-theme="engagify"] .engagify-dialog > .engagify-button {
  align-self: stretch;
}

:root[data-theme="engagify"] .engagify-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-self: stretch;
  text-align: left;
}

:root[data-theme="engagify"] .engagify-form label,
:root[data-theme="engagify"] .engagify-dialog label {
  align-self: flex-start;
  flex: 1 0 100%;
  font-weight: 600;
  font-size: 0.85rem;
}

:root[data-theme="engagify"] .engagify-form input {
  flex: 1 1 12rem;
  width: auto;
  min-height: 44px;
  margin: 0;
}

:root[data-theme="engagify"] .engagify-dialog textarea {
  align-self: stretch;
  margin: 0;
}

:root[data-theme="engagify"] .engagify-app-icon--large {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  font-size: 2rem;
}

:root[data-theme="engagify"] .engagify-stars {
  display: flex;
  gap: 0.25rem;
}

:root[data-theme="engagify"] .engagify-star {
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d97706;
  font: 400 2.2rem/1 var(--ui-font);
  cursor: pointer;
}

:root[data-theme="engagify"] .engagify-sites {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

:root[data-theme="engagify"] .engagify-sites li {
  padding: 0.6rem;
  border: 1px solid #e2dff0;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Stretch nags. */

:root[data-theme="engagify"] .engagify-nag[hidden] {
  display: none !important;
}

/* Promo bar and app bar stick to the top, stacked. */
:root[data-theme="engagify"] .engagify-promo {
  position: sticky;
  top: 0;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.6rem;
  background: #db2777;
  color: #ffffff;
  font-size: 0.9rem;
}

:root[data-theme="engagify"] .engagify-promo p {
  flex: 1 1 auto;
  color: #ffffff;
  text-align: center;
}

:root[data-theme="engagify"] .engagify-promo .engagify-close {
  color: #ffffff;
}

:root[data-theme="engagify"] .engagify-countdown {
  font-variant-numeric: tabular-nums;
}

:root[data-theme="engagify"] .engagify-app-bar {
  position: sticky;
  top: 3.25rem;
  z-index: 21;
}

:root[data-theme="engagify"] .engagify-proof {
  position: fixed;
  top: 5.5rem;
  right: 1rem;
  z-index: 23;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  border: 1px solid #e2dff0;
  border-left: 0;
  border-radius: 0.8rem;
  background: #ffffff;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(30, 27, 46, 0.18);
}

/* Chat bubble: bottom right; the cookie banner moves up to clear it. */
:root[data-theme="engagify"] .engagify-bubble {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--app-tabbar-offset, 0px) + 1rem);
  z-index: 24;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  color: #ffffff;
  font: 800 1.5rem/1 var(--ui-font);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.4);
  cursor: pointer;
}

:root[data-theme="engagify"] .engagify-bubble:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

:root[data-theme="engagify"] .engagify-chat {
  right: 1rem;
  bottom: calc(var(--app-tabbar-offset, 0px) + 5rem);
  width: min(19rem, calc(100vw - 2rem));
  z-index: 24;
}

:root[data-theme="engagify"] .engagify-chat-message {
  padding: 0.6rem 0.8rem;
  border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
  background: #f1edfd;
  color: var(--ink);
}

/* Paywall: posts after the first blur until "Continue reading". */
:root[data-theme="engagify"].engagify-paywalled .engagify-paywall ~ .post-card {
  filter: blur(4px);
  opacity: 0.6;
}

:root[data-theme="engagify"] .engagify-paywall {
  position: relative;
  z-index: 1;
  margin: 0.75rem 0;
  text-align: center;
  align-items: center;
}

:root[data-theme="engagify"] .engagify-ai {
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  color: #ffffff;
  font: 600 0.8rem/1 var(--ui-font);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

:root[data-theme="engagify"] .engagify-ai::before {
  content: "\2726  ";
}

@media (max-width: 639px) {
  :root[data-theme="engagify"] .engagify-bubble {
    width: 48px;
    height: 48px;
    right: 0.75rem;
    bottom: calc(var(--app-tabbar-offset, 0px) + 0.75rem);
  }

  :root[data-theme="engagify"] .engagify-chat {
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    bottom: calc(var(--app-tabbar-offset, 0px) + 4.25rem);
  }

  :root[data-theme="engagify"] .engagify-proof {
    top: auto;
    left: 0.5rem;
    right: 0.5rem;
    max-width: none;
    bottom: calc(var(--app-tabbar-offset, 0px) + 4.25rem);
  }
}

/* A list inside a module needs no shadow of its own. */
:root:is([data-theme="gloss"], [data-theme="engagify"]) .card > .thread-rows {
  box-shadow: none;
}