/* Master stylesheet — imports every layer in order.
   Order matters: tokens first, base next, then layout, then components. */

/* Design tokens — colors, spacing, typography, radii, shadows.
   v1 palette; iterate as the UI lands. */


:root {

  /* Spacing */
  --sp-4xs: 2px;
  --sp-3xs: 4px;
  --sp-xxs: 6px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 20px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-3xl: 40px;
  --sp-4xl: 48px;

    /* Sizing */
  --size-4xs: 2px;
  --size-3xs: 4px;
  --size-xxs: 6px;
  --size-xs: 8px;
  --size-sm: 12px;
  --size-md: 16px;
  --size-lg: 20px;
  --size-xl: 24px;
  --size-xxl: 32px;
  --size-3xl: 40px;
  --size-4xl: 48px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "New York", ui-serif, Georgia, serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

:root {
  /* Colors - Light */


/* Background Colors */

  --bg-body: #FFFFFF;
  --bg-body-inverse: #0D0D0D;
  --bg-primary: #F9F9F9;
  --bg-primary-inverse: #181818;
  --bg-secondary: rgba(0,0,0,0.06);
  --bg-secondary-inverse: rgba(255,255,255,0.06);
  --bg-tertiary: rgba(255,255,255,0.04);
  --bg-tertiary-inverse: rgba(0,0,0,0.06);
  --bg-quarternary: rgba(255,255,255,0.02);
  --bg-quarternary-inverse: rgba(0,0,0,0.02);
  --bg-disabled: var(--bg-quarternary);
  --bg-disabled-inverse: var(--bg-quarternary-inverse);

  /* Text Colors */
  --text-primary: #0D0D0D;
  --text-primary-inverse: #FFFFFF;
  --text-secondary: #5D5D5D;
  --text-secondary-inverse: rgba(255,255,255,.5);
  --text-tertiary: #676767;
  --text-tertiary-inverse: rgba(255,255,255,.4);
  --text-quarternary: #9B9B9B;
  --text-quarternary-inverse: rgba(255,255,255,.3);
  --text-disabled: rgba(0,0,0,.2);
  --text-disabled-inverse: rgba(255,255,255,.2);


/* Border Colors */
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --border-primary: #f2f2f2;
  --border-secondary: rgba(13,13,13,.1);
  --border-tertiary: rgba(13,13,13,.05);

  /* Accent Colors */
  --accent-cobalt: #3b60e4;
  --accent-blue: #3b60e4;
  --accent-red: #E50900;
  --accent-green: #18A957;

   /* deprecate these soon */
  --bg: var(--bg-body);
  --bg-subtle: var(--bg-primary);           /* very light gray, sidebar bg */
  --bg-elevated: rgba(0,0,0,.6);         /* cards, buttons */
  --fg: var(--text-primary);
  --fg-muted: var(--text-secondary);
  --fg-subtle: var(--text-tertiary);
  --accent: var(--bg-primary-inverse);              /* primary actions = black-on-white */
  --accent-fg: var(--bg-primary);
  --danger: var(--accent-red);

  color-scheme: light;
}

/* OS dark preference — only applies when no explicit data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a0a0a;
    --bg-subtle: #171717;
    --bg-elevated: #1c1c1c;
    --fg: #fafafa;
    --fg-muted: #a3a3a3;
    --fg-subtle: #737373;
    --accent: #fafafa;
    --accent-fg: #0a0a0a;
    --danger: #f87171;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

    --bg-body: #212121;
    --bg-body-inverse: #FFFFFF;
    --bg-primary: #181818;
    --bg-primary-inverse: #FFFFFF;
    --bg-secondary: rgba(255,255,255,0.06);
    --bg-secondary-inverse: rgba(0,0,0,0.06);
    --bg-tertiary: rgba(0,0,0,0.04);
    --bg-tertiary-inverse: rgba(255,255,255,0.06);
    --bg-quarternary: rgba(255,255,255,0.04);
    --bg-quarternary-inverse: rgba(0,0,0,0.02);
    --bg-disabled: var(--bg-quarternary);
    --bg-disabled-inverse: var(--bg-quarternary-inverse);

    --text-primary: #FFFFFF;
    --text-primary-inverse: #0D0D0D;
    --text-secondary: rgba(255,255,255,.5);
    --text-secondary-inverse: rgba(0,0,0,.5);
    --text-tertiary: #AFAFAF;
    --text-tertiary-inverse: rgba(0,0,0,.4);
    --text-quarternary: #9B9B9B;
    --text-quarternary-inverse: rgba(0,0,0,.3);
    --text-disabled: rgba(255,255,255,.2);
    --text-disabled-inverse: rgba(0,0,0,.2);

    --border: rgba(255,255,255,.3);
    --border-strong: rgba(255,255,255,.5);
    --border-primary: #0D0D0D;
    --border-secondary: rgba(13,13,13,.05);
    --border-tertiary: rgba(255,255,255,.05);

    /* Accent Colors */
    --accent-cobalt: #7992EC;
    --accent-blue: #7992EC;
    --accent-red: #FF4B44;
    --accent-green: #22C55E;

    color-scheme: dark;
  }
}

/* Explicit dark mode */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-subtle: #171717;
  --bg-elevated: #1c1c1c;
  --fg: #fafafa;
  --fg-muted: #a3a3a3;
  --fg-subtle: #737373;
  --accent: #fafafa;
  --accent-fg: #0a0a0a;
  --danger: #f87171;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

  --bg-body: #212121;
  --bg-body-inverse: #FFFFFF;
  --bg-primary: #181818;
  --bg-primary-inverse: #FFFFFF;
  --bg-secondary: rgba(255,255,255,0.06);
  --bg-secondary-inverse: rgba(0,0,0,0.06);
  --bg-tertiary: rgba(0,0,0,0.04);
  --bg-tertiary-inverse: rgba(255,255,255,0.06);
  --bg-quarternary: rgba(255,255,255,0.04);
  --bg-quarternary-inverse: rgba(0,0,0,0.02);
  --bg-disabled: var(--bg-quarternary);
  --bg-disabled-inverse: var(--bg-quarternary-inverse);

  --text-primary: #FFFFFF;
  --text-primary-inverse: #0D0D0D;
  --text-secondary: rgba(255,255,255,.5);
  --text-secondary-inverse: rgba(0,0,0,.5);
  --text-tertiary: #AFAFAF;
  --text-tertiary-inverse: rgba(0,0,0,.4);
  --text-quarternary: #9B9B9B;
  --text-quarternary-inverse: rgba(0,0,0,.3);
  --text-disabled: rgba(255,255,255,.2);
  --text-disabled-inverse: rgba(0,0,0,.2);
  --border: rgba(255,255,255,.3);
  --border-strong: rgba(255,255,255,.5);
  --border-primary: #0D0D0D;
  --border-secondary: rgba(13,13,13,.05);
  --border-tertiary: rgba(255,255,255,.05);

  /* Accent Colors */
  --accent-cobalt: #7992EC;
  --accent-blue: #7992EC;
  --accent-red: #FF4B44;
  --accent-green: #22C55E;

  color-scheme: dark;
}

/* Explicit light mode */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-subtle: #f5f5f4;
  --bg-elevated: #ffffff;
  --fg: #0a0a0a;
  --fg-muted: #737373;
  --fg-subtle: #a3a3a3;
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --accent: #0a0a0a;
  --accent-fg: #ffffff;
  --danger: #dc2626;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  --bg-body: #FFFFFF;
  --bg-body-inverse: #0D0D0D;
  --bg-primary: #F9F9F9;
  --bg-primary-inverse: #181818;
  --bg-secondary: rgba(0,0,0,0.06);
  --bg-secondary-inverse: rgba(255,255,255,0.06);
  --bg-tertiary: rgba(255,255,255,0.04);
  --bg-tertiary-inverse: rgba(0,0,0,0.06);
  --bg-quarternary: rgba(255,255,255,0.02);
  --bg-quarternary-inverse: rgba(0,0,0,0.02);
  --bg-disabled: var(--bg-quarternary);
  --bg-disabled-inverse: var(--bg-quarternary-inverse);

  --text-primary: #0D0D0D;
  --text-primary-inverse: #FFFFFF;
  --text-secondary: #5D5D5D;
  --text-secondary-inverse: rgba(255,255,255,.5);
  --text-tertiary: #676767;
  --text-tertiary-inverse: rgba(255,255,255,.4);
  --text-quarternary: #9B9B9B;
  --text-quarternary-inverse: rgba(255,255,255,.3);
  --text-disabled: rgba(0,0,0,.2);
  --text-disabled-inverse: rgba(255,255,255,.2);

  /* Accent Colors */
  --accent-cobalt: #3b60e4;
  --accent-blue: #3b60e4;
  --accent-red: #E50900;
  --accent-green: #18A957;

  color-scheme: light;
}

/* Reset + base element styles. Consumes tokens.css. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  /* Ensure the body never exceeds the true visual viewport on Android */
  max-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--sp-xs) var(--sp-sm);
  cursor: pointer;
}
button:hover {
  border-color: var(--border-primary);
}

:focus-visible {
  outline: 2px solid var(--bg-secondary);
  outline-offset: 2px;
}

/* Prevent iOS Safari autozoom on input focus. The browser zooms whenever a
   focused input has font-size < 16px. Clamping to 16px on mobile stops that
   without affecting desktop layout or disabling intentional pinch-zoom. */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: max(16px, 1em);
  }
}

/* Lucide-style icons rendered via CSS mask so they inherit currentColor.
   Each icon span carries a `--icon-mask` custom property pointing to an
   inline SVG data URI, and explicit width/height. See `ui/icons.gleam`. */
.icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-mask);
          mask-image: var(--icon-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
  /* WebKit hit-tests against the mask alpha channel, so only painted pixels
     would register clicks. Opt out entirely — let the parent button/anchor
     be the sole click target. */
  pointer-events: none;
}

/* Animated inline-SVG icons (e.g. check_hollow_animated).
   Cannot use the mask approach — browsers don't animate SVG data URIs.
   Instead the SVG is injected as real DOM via unsafe_raw_html and wrapped
   in this span so it flows like a regular .icon. */
.icon-animated-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
  pointer-events: none;
}

.icon-animated-check svg {
  display: block;
}

/* ── Tooltip — data-tooltip attribute ───────────────────────────────
   Usage: add  data-tooltip="Your label"  to any element.
   The tooltip appears above the element, centred, on hover/focus.
   ------------------------------------------------------------------ */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 200;
}

/* Bubble */
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  background: var(--bg-elevated, var(--bg-primary));
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Arrow caret (downward-pointing triangle below the bubble) */
[data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: 6px solid var(--border-primary);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}

/* Suppress tooltip while the element is active/pressed */
[data-tooltip]:active::before,
[data-tooltip]:active::after {
  opacity: 0;
}

/* Phone + OTP authentication screen — centered card on a muted background. */

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  padding: var(--sp-xl);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: var(--sp-xxl);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.auth-logo {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-style: italic;
  font-weight: 400;
  text-align: center;
  margin: 0 0 var(--sp-xs);
  color: var(--text-primary);
}

.auth-title {
  font-size: var(--text-lg);
  font-weight: 500;
  text-align: center;
  color: var(--text-tertiary);
  margin: 0 0 var(--sp-xl);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

.auth-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-field input,
.auth-field-input {
  padding: var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.auth-field input:focus,
.auth-field-input:focus {
  border-color: var(--bg-secondary);
}

.auth-error {
  font-size: var(--text-sm);
  color: var(--danger);
  text-align: center;
  margin: 0;
}

.auth-submit {
  padding: var(--sp-sm);
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  margin-top: var(--sp-xs);
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-submit:not(:disabled) {
  background: var(--fg);
  color: var(--bg);
}

.auth-submit:disabled {
  cursor: not-allowed;
}

/* Phone input */
.auth-phone-input {
  font-size: var(--text-2xl);
  text-align: center;
  letter-spacing: 0.1em;
  padding: var(--sp-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  width: 100%;
  box-sizing: border-box;
}
.auth-phone-input:focus { border-color: var(--bg-secondary); outline: none; }

.auth-phone-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.auth-country-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.auth-country-button:hover {
  background: var(--bg-subtle);
}

.auth-country-flag {
  font-size: 18px;
  line-height: 1;
}

.auth-country-code {
  font-weight: 500;
}

.auth-country-caret {
  font-size: 10px;
  opacity: 0.6;
}

.auth-phone-row .auth-phone-input {
  flex: 1;
  min-width: 0;
}

.auth-country-picker {
  position: relative;
  margin-top: 8px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  max-height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.auth-country-search {
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--border-primary);
  font: inherit;
  outline: none;
  background: transparent;
}

.auth-country-list {
  overflow-y: auto;
  flex: 1;
}

.auth-country-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.auth-country-row:hover {
  background: var(--bg-subtle);
}

.auth-country-row-flag {
  font-size: 18px;
  line-height: 1;
}

.auth-country-row-name {
  flex: 1;
}

.auth-country-row-code {
  opacity: 0.6;
}

/* OTP display */
.auth-otp-wrapper { position: relative; }

.auth-otp-hidden-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  font-size: 24px;
}

.auth-otp-display {
  display: flex;
  gap: var(--sp-sm);
  justify-content: center;
}

.auth-otp-box {
  width: 48px;
  height: 56px;
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg);
}
.auth-otp-box-active { border-color: var(--bg-secondary); }

/* OTP sub-text */
.auth-phone-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--sp-xs);
}

.auth-resend {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--sp-sm);
}
.auth-resend-btn {
  background: none;
  border: none;
  color: var(--bg-secondary);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.auth-resend-btn:hover { text-decoration: underline; }

/* Interest picker */
.auth-interest-form {
  gap: var(--sp-md);
}

.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  margin: 0 0 var(--sp-xs);
}

.auth-interest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  justify-content: center;
  min-height: 80px;
}

.auth-interest-loading {
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  padding: var(--sp-xl) 0;
}

.auth-interest-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-primary);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.auth-interest-chip:hover {
  background: var(--bg-subtle);
}

.auth-interest-chip.selected {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.auth-interest-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
  margin: 0;
}

.auth-interest-buttons {
  display: flex;
  gap: var(--sp-sm);
}

.auth-interest-buttons .auth-submit {
  flex: 1;
  margin-top: 0;
}

.auth-submit-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.auth-submit-secondary:hover:not(:disabled) {
  background: var(--bg-subtle);
}

/* Back link */
.auth-back {
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--sp-md);
}
.auth-back:hover { color: var(--text-primary); }

/* Shell / sidebar layout styles.
 *
 * Responsive breakpoints:
 *   Mobile  : max-width 768px  — sidebar hidden, slide-in drawer
 *   Desktop : min-width 769px  — sidebar always visible (240px or 64px collapsed)
 */

.app-shell {
  display: flex;
  height: 100vh;                  /* fallback: no dvh support */
  height: 100dvh;                 /* fallback: dvh but no visualViewport JS */
  height: var(--vvh, 100dvh);    /* primary: set in real-time by dom.mjs from
                                     visualViewport.height — reliably shrinks when
                                     the iOS Safari keyboard appears */
  overflow: hidden;
  /* Respect the gesture-nav bar on Android and iOS notch devices */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Mobile nav backdrop ──────────────────────────────────────────────── */

.mobile-nav-backdrop {
  display: none;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-tertiary);
  display: flex;
  flex-direction: column;
  /* 10px horizontal padding aligns icons between expanded and collapsed:
     10px (sidebar) + 12px (row) = 22px icon offset, matching
     the auto-margin centering of the 44px square pill in collapsed state */
  padding: var(--sp-sm) 10px;
  gap: var(--sp-md);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* dynamic viewport — keeps sidebar flush with the shell */
  overflow-x: hidden;
  overflow-y: hidden; /* chats section scrolls internally; footer stays pinned */
  transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.sidebar-collapsed {
  width: 72px;
  /* 10px horizontal padding: sidebar(10) + row(12) = 22px icon offset,
     matching expanded state. Row width = 72 - 10 - 10 = 52px. */
  padding-left: 10px;
  padding-right: 10px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-xs) var(--sp-xs) var(--sp-xs);
}

.sidebar-logo {
  font-size: var(--text-2xl);
  color: var(--text-primary);
  line-height: 1;
  text-decoration: none;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  flex: 1;
  transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.sidebar-logo:hover {
  text-decoration: none;
}

.sidebar-logo > .icon {
  max-width: 70px;
  transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.sidebar-collapse-button, .sidebar-collapse {
  padding: var(--sp-3xs);
  border: none;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  cursor: pointer;
  border-radius: var(--radius-sm);
  /* position: relative so the ::after overlay is anchored to the button */
  position: relative;
}

.sidebar-collapse-button:hover,
.sidebar-collapse:hover {
  color: var(--text-primary);
  transition: .3s ease all;
}

/* Chrome falls through `background: transparent` buttons in hollow-icon areas
   because there's no painted surface to hit-test against. This ::after creates
   a full-coverage invisible layer that IS painted, forcing the button to catch
   every click within its bounds. */
.sidebar-collapse-button::after,
.sidebar-collapse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.001); /* near-zero alpha: painted surface guarantees hit-testing in Chrome */
}

.sidebar-collapse-button>.icon,
.sidebar-collapse>.icon {
  height: 20px !important;
  width: 20px !important;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-section-header {
  flex-shrink: 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  padding: var(--sp-sm) var(--sp-xs) var(--sp-xs) var(--sp-xs);
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.sidebar-row {
  /* Button reset — ensures <button> rows are identical to <a> rows */
  font: inherit;
  border: none;
  background: none;
  box-sizing: border-box;
  /* Row layout */
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  padding: 6px var(--sp-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  /* Smooth the padding change between expanded (6px 12px) and collapsed (12px) */
  transition: padding 0.3s ease-in-out;
  position: relative;
  flex-shrink: 0;
}

.sidebar-row:hover {
  background: rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: .3s ease-in-out;
}
.sidebar-row-active,
.sidebar-row-active:hover {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 500;
  box-shadow: none;
}

[data-theme="dark"] .sidebar-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .sidebar-row-active,
[data-theme="dark"] .sidebar-row-active:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .sidebar-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .sidebar-row-active,
[data-theme="light"] .sidebar-row-active:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sidebar-row-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-primary);
  font-size: var(--text-base);
}

.sidebar-row-active .sidebar-row-icon {
  color: var(--text-primary);
}

.sidebar-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  max-width: 200px;
  opacity: 1;
  transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.sidebar-row-active .sidebar-label,
.sidebar-row-button .sidebar-label {
  color: var(--text-primary);
}

.sidebar-label--with-you {
  display: flex;
  align-items: center;
  gap: var(--sp-4xs);
}

.sidebar-label-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.sidebar-label-you {
  color: var(--text-secondary);
  font-weight: 400;
  flex-shrink: 0;
}

.sidebar-row-unread .sidebar-label {
  font-weight: 600;
  color: var(--text-primary);
}

/* Typing indicator: animated gradient sweep on the label */
.sidebar-row-typing .sidebar-label {
  font-weight: 600;
  background: radial-gradient(
    circle at 100%,
    #fda8a8,
    #f97878 50%,
    #fec7c7 75%,
    #fd8d8d 75%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sidebar-typing-gradient 1.5s linear infinite;
}

.sidebar-unread-badge {
  display: none;
}

/* Chats section: the only scrollable zone — fills remaining space between
   nav and footer so the footer is always pinned at the bottom. */
.sidebar-section:has(.sidebar-section-header) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-section:has(.sidebar-section-header)::-webkit-scrollbar {
  display: none;
}

/* Spacer no longer needed — the chats section grows to fill the gap */
.sidebar-spacer {
  display: none;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-primary); /* cover any content at the scroll boundary */
  flex-shrink: 0;
  transition: padding 0.3s ease-in-out, gap 0.3s ease-in-out;
}

/* Collapsed variant — animate text out, keep icons/avatars.
   Section headers (e.g. "Chats") stay visible even when collapsed. */
.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-logo {
  gap: 0;
  max-width: 0;
  opacity: 0;
}

/* Collapsed rows: uniform 12px padding makes each row a 44px square.
   Width comes from sidebar (64 - 10 - 10 = 44px) — no explicit width needed,
   so rows follow the sidebar width animation naturally. */
.sidebar-collapsed .sidebar-row {
  padding: 12px;
}

.sidebar-collapsed > .sidebar-logo > .icon {
  max-width: 0;
}

/* Center the toggle button in the 72px collapsed sidebar.
   justify-content can't be transitioned, but the width animation masks the jump. */
.sidebar-collapsed .sidebar-header {
  justify-content: center;
}

/* Footer: strip padding/gap and center avatar directly in the 72px sidebar */
.sidebar-collapsed .sidebar-footer {
  flex-direction: column;
  padding: 0;
  gap: 0;
  align-items: center;
}

/* Fade the theme toggle out alongside the labels */
.sidebar-collapsed .sidebar-theme-toggle {
  display: none;
  max-width: 0;
  opacity: 0;
}

/* 36px avatar button, centered by the parent's align-items: center */
.sidebar-collapsed .sidebar-footer-user {
  height: 36px;
  width: 36px;
  flex-direction: column;
  padding: var(--sp-xs);
}

/* Main content pane beside sidebar */
.main-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-body);
}

.sidebar-ai-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--fg);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-footer-menu-anchor {
  position: relative;
  flex: 1;
  min-width: 0;
}

.sidebar-footer-user {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  color: inherit;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
  width: 100%;
  overflow: hidden;
  transition: padding 0.3s ease-in-out;
}
.sidebar-footer-user:hover {
  text-decoration: none;
}

.user-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  cursor: default;
}

.user-menu {
  position: absolute;
  bottom: calc(100% + var(--sp-xs));
  left: 0;
  min-width: 180px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: var(--sp-3xs);
  z-index: 100;
}

/* When collapsed the sidebar's overflow-x: hidden clips the absolute menu.
   Switch to fixed so it escapes the clipping context and pops out to the
   right of the sidebar instead of trying to render inside it. */
.sidebar-collapsed .user-menu {
  position: fixed;
  bottom: var(--sp-md);
  left: calc(72px + var(--sp-xs));
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
}
.user-menu-item:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}

.user-menu-danger:hover {
  color: var(--danger);
}

.user-menu-divider {
  height: 1px;
  background: var(--border-primary);
  margin: var(--sp-3xs) 0;
}

/* ── Feed column toggle (desktop only) ──────────────────────────────────── */

.user-menu-col-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
}

.user-menu-col-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Pill container */
.user-menu-col-btns {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  padding: var(--sp-3xs);
  gap: 0;
}

.user-menu-col-btn {
  flex: 1;
  padding: var(--sp-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.user-menu-col-btn:hover {
  color: var(--text-primary);
}

.user-menu-col-btn--active {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .user-menu-col-toggle,
  .user-menu-col-divider {
    display: none;
  }
}

.sidebar-theme-toggle {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 28px;
  opacity: 1;
  transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.sidebar-theme-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* ── Mobile responsive (≤ 768px) ─────────────────────────────────────── */

/* ─── Keyframe animations ────────────────────────────────────────────── */

@keyframes sidebar-typing-gradient {
  to {
    background-position: -200% center;
  }
}

/* ─── Media queries ──────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sidebar-row:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  :root:not([data-theme]) .sidebar-row-active,
  :root:not([data-theme]) .sidebar-row-active:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-row-typing .sidebar-label {
    animation: none;
  }
}

@media (max-width: 768px) {
  /* Sidebar becomes an off-screen left drawer */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    width: 280px;
    /* Always show expanded labels on mobile, ignore collapsed state */
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18);
  }

  /* Override the collapsed width so the open drawer always shows full labels */
  .sidebar-collapsed {
    width: 280px;
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }

  .sidebar-row {
    padding: var(--sp-sm) var(--sp-md);
  }

  .sidebar-label {
    font-size: var(--text-lg);
  }

  /* Reveal the drawer */
  .app-shell.nav-open .sidebar {
    transform: translateX(0);
  }

  /* Backdrop dims the content behind the open drawer */
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .app-shell.nav-open .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Sidebar collapse button: always visible on mobile as a "close drawer" button */
  .sidebar-collapse-button {
    display: flex;
  }

  /* ── Reset ALL collapsed-sidebar visual effects inside the mobile drawer ──
     The desktop `.sidebar-collapsed` rules hide labels and compact rows for
     the 72px icon strip. On mobile the drawer is always full-width with labels,
     so every collapsed effect must be explicitly undone here. */

  /* Labels and logo: restore visibility */
  .sidebar-collapsed .sidebar-label,
  .sidebar-collapsed .sidebar-logo {
    max-width: 200px;
    opacity: 1;
  }

  /* Section header: restore visibility */
  .sidebar-collapsed .sidebar-section-header {
    max-width: 200px;
    opacity: 1;
  }

  /* Rows: restore normal padding (not the compact 12px icon-only padding) */
  .sidebar-collapsed .sidebar-row {
    padding: 6px var(--sp-sm);
  }

  /* Header: restore space-between layout */
  .sidebar-collapsed .sidebar-header {
    justify-content: space-between;
  }

  /* Footer: restore horizontal layout */
  .sidebar-collapsed .sidebar-footer {
    flex-direction: row;
    padding: var(--sp-sm);
    gap: var(--sp-sm);
    align-items: center;
  }

  /* Theme toggle: restore visibility */
  .sidebar-collapsed .sidebar-theme-toggle {
    display: inline-flex;
    max-width: 28px;
    opacity: 1;
  }

  /* Footer user button: restore horizontal layout */
  .sidebar-collapsed .sidebar-footer-user {
    height: auto;
    width: 100%;
    flex-direction: row;
    padding: 0;
  }
}

/* Feed view styles — tabs, item cards, grid, loading/empty/error states. */

/* ---------- Pull-to-refresh indicator ---------- */

/*
 * #feed-ptr-indicator sits as the first child of .feed-items-wrap.
 * Its height is driven by JS during the gesture (inline style). When the
 * gesture completes, JS removes inline styles and Gleam adds --active.
 * The indicator collapses back to height:0 when --active is absent.
 */
.feed-ptr-indicator {
  width: 100%;
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.25s ease, opacity 0.2s ease;
  opacity: 0;
}

/* JS sets this class while the manifest refresh is in flight. */
.feed-ptr-indicator--active {
  height: 52px;
  opacity: 1;
}

/* Spinner ring — pure CSS, no external assets. */
.feed-ptr-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border-primary);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: feed-ptr-spin 0.7s linear infinite;
}

@keyframes feed-ptr-spin {
  to { transform: rotate(360deg); }
}

/*
 * During the drag phase JS mutates `style.height` and `style.opacity`
 * directly on .feed-ptr-indicator, bypassing the CSS transition so the
 * motion tracks the finger in real time.
 *
 * On release with a confirmed refresh:
 *   1. onRefresh() fires → Lustre queues a re-render with --active
 *   2. One rAF later, JS clears the inline styles
 *   3. Lustre's render has already applied --active (height: 52px), so no
 *      visual jump occurs — the indicator stays pinned at 52px
 *   4. When ManifestRefreshed clears pull_refreshing, Lustre removes --active
 *      and the CSS transition collapses height back to 0
 *
 * `feed-ptr-indicator--ready` is toggled by JS when drag >= threshold.
 * It brightens the spinner to signal "release to refresh".
 */
.feed-ptr-indicator.feed-ptr-indicator--ready .feed-ptr-spinner {
  border-top-color: var(--text-primary);
}

.feed {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 52px var(--sp-xl) 0 var(--sp-xl);
  width: 54vw;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- Tabs ---------- */

/* Outer row: scrollable chips on the left, pinned search button on the right */
.feed-tabs-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-xl);
  position: relative;
}

/* Scrollable chip strip — search button is NOT inside here */
.feed-tabs {
  display: flex;
  gap: var(--sp-xs);
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-3xs); /* prevent clipping on the scroll track */
}
.feed-tabs::-webkit-scrollbar {
  display: none;
}

.feed-tab {
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-full);
  border: 1px solid rgba(13, 13, 13, 0.05);
  font-size: var(--text-sm);
  font-weight: 400;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.feed-tab:hover {
  color: var(--text-primary);
}
.feed-tab-active,
.feed-tab-active:hover {
  background: var(--bg-secondary);
  border-color: transparent;
  color: var(--text-primary);
  font-weight: 500;
}

.feed-tab-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Search icon anchored to the right of the tab row. */
.feed-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--text-base);
  transition: background 120ms ease, color 120ms ease;
}
.feed-search-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* ---------- Grid ---------- */

.feed-items-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Explicit x-axis lock: when overflow-y is non-visible, CSS computes
     overflow-x as `auto` unless we say otherwise — on iOS that means the
     container can scroll horizontally if any child is 1px too wide.
     `touch-action: pan-y` tells iOS to only recognise vertical panning here
     so the PTR gesture doesn't open a sideways scroll context. */
  overflow-x: hidden;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  padding-bottom: var(--sp-xl);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.feed-items-wrap::-webkit-scrollbar {
  display: none;
}

.feed-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-xl);
}

.feed-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--sp-xl);
}

/* 4-col needs more room */
.feed--cols-4 {
  width: 80vw;
  max-width: 80vw;
}

/* ---------- Card ---------- */

/* Wrapper: inner grid drives the collapse animation (grid-template-rows: 1fr → 0fr).
   No margin-bottom needed — gap on .feed-grid handles row spacing. */
.feed-card-wrapper {
  display: grid;
  grid-template-rows: 1fr;
}

/* Hidden state — card is in the DOM but takes up no space.
   Lustre sets this via feed-card--hidden while the processing toast is
   still running. animateCardFlyIn() removes this class (via Gleam) and
   plays the FLIP fly-in. */
.feed-card--hidden {
  display: none;
}

/* Collapse siblings upward once the card has flown out.
   The 1-minute delay lets the user see the completed state (and undo if
   needed) before the card disappears. Collapse starts just as the flyout
   is finishing: 60s card delay + 230ms into the 260ms flyout. */
.feed-card-wrapper:has(.feed-card--completing) {
  animation: feed-card-collapse 300ms calc(60s + 230ms) ease-in-out forwards;
}

@keyframes feed-card-collapse {
  to {
    grid-template-rows: 0fr;
    margin-bottom: 0;
  }
}

@keyframes feed-card-flyout-up {
  to { transform: translateY(-115%); opacity: 0; }
}

/* All completing cards fly upward — column position isn't knowable via CSS
   selectors in a multi-column layout, so we use a single consistent direction. */
.feed-card--completing {
  animation: feed-card-flyout-up 260ms 60s ease-in forwards;
}

.feed-card {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: none;
  border-radius: 16px;
  overflow: hidden; /* clips media image to card's rounded corners */
  transition: transform 0.15s ease;
  break-inside: avoid;
  min-height: 0; /* required for grid-template-rows collapse */
}
.feed-card:hover {
  transform: translateY(-1px);
}

/* Text cards use the same chrome-free style as photo/bookmark cards.
   When a thumbnail is present it shows above the title just like a photo. */
.feed-card-text {
}

/* The anchor wraps only the media area. The card body (title, author, likes)
   sits as a sibling outside the anchor so the like button doesn't trigger
   modem's anchor-intercepted navigation. */
.feed-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.feed-card-link:hover {
  text-decoration: none;
}

/* ---------- Media area ---------- */

.feed-card-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: var(--sp-sm);
  color: #ffffff;
  font-size: var(--text-xs);
  overflow: hidden;
  /* No border-radius here — the card's overflow:hidden + border-radius:16px
     clips the media to rounded corners at the top automatically. */
}

.feed-card-media-photo {
  padding: 0;
}
.feed-card-media-voice {
  aspect-ratio: 4 / 3;
}
.feed-card-media-bookmark {
  aspect-ratio: 16 / 9;
  min-width: 100%;
  min-height: 120px;
}

/* Calendar tiles render no media. When a manifest badge is present we
   reserve a slim band so the absolute-positioned `.feed-badge-pill` has
   room to sit without overlapping the title row. The pill is ~32px tall
   plus its top inset, so 48px clears it. */
.feed-card-calendar-badge-spacer {
  height: 48px;
  width: 100%;
}

.feed-card-photo-placeholder {
  width: 100%;
  height: 100%;
}

/* Deterministic gradients for placeholders */
.feed-card-gradient-1 { background: linear-gradient(135deg, #667eea, #764ba2); }
.feed-card-gradient-2 { background: linear-gradient(135deg, #f093fb, #f5576c); }
.feed-card-gradient-3 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.feed-card-gradient-4 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.feed-card-gradient-5 { background: linear-gradient(135deg, #fa709a, #fee140); }
.feed-card-gradient-6 { background: linear-gradient(135deg, #30cfd0, #330867); }

.feed-card-voice-duration,
.feed-card-bookmark-site {
  background: rgba(0, 0, 0, 0.5);
  padding: var(--sp-3xs) var(--sp-xs);
  border-radius: var(--radius-md);
  backdrop-filter: blur(4px);
  font-weight: 500;
}

.feed-card-voice-icon {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  background: rgba(0, 0, 0, 0.5);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  color: #fff;
}

/* ---------- Header (avatar + name) ---------- */

.feed-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm);
  text-decoration: none;
  color: var(--text-tertiary);
  min-width: 0;
  overflow: hidden;
}
.feed-card-header:hover {
  text-decoration: none;
  color: var(--text-primary);
}

.feed-card-header-name {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

/* ---------- Body (title row + footer) ---------- */

.feed-card-body {
  padding: var(--sp-sm) var(--sp-xs);
  width: 100%;
}

/* Title row: completion checkbox + title link side by side */
.feed-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
}

/* Title link fills remaining width */
.feed-card-title-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.feed-card-title-link:hover {
  text-decoration: none;
}

.feed-card-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Completed state: struck-through, lighter weight and color */
.feed-card-title--done {
  text-decoration: line-through;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* Event time line shown above the title on calendar tiles. Sits inside
   the title link so it inherits the same hit area as the title. */
.feed-card-event-time {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3xs);
}

/* Calendar metadata row: source-calendar name badge under the title.
   Lives inside `.feed-card-title-link` so it inherits the title's
   left indent automatically. */
.feed-card-meta-row {
  display: flex;
  margin-top: var(--sp-3xs);
}
.feed-card-meta-badge {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: var(--sp-3xs) var(--sp-xs);
  border-radius: var(--radius-md);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Completion checkbox button */
.feed-card-complete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px; /* optical alignment with first line of title */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: inherit;
}
.feed-card-complete-btn:hover {
  color: var(--text-primary);
}
.feed-card-complete-btn--done {
  color: var(--color-primary, var(--accent));
}
.feed-card-complete-btn--done:hover {
  color: var(--color-primary, var(--accent));
}

/* Footer: timestamp left, engagement actions right */
.feed-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}

.feed-card-timestamp {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.feed-card-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-left: auto;
}

/* Bookmark button */
.feed-card-bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.feed-card-bookmark-btn:hover {
  color: var(--text-primary);
}
.feed-card-bookmark-btn--active,
.feed-card-bookmark-btn--active:hover {
  color: var(--color-primary, var(--accent));
}
.feed-card-bookmark-btn .icon {
  width: 14px;
  height: 14px;
}

/* Likes */
.feed-card-likes {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.feed-card-likes:hover {
  color: var(--text-primary);
}
.feed-card-likes-active,
.feed-card-likes-active:hover {
  color: var(--danger);
}

.feed-card-likes-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
}

.feed-card-likes-count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.feed-card-likes .icon {
  width: 13px;
  height: 13px;
}

/* ---------- States ---------- */

.feed-loading,
.feed-empty,
.feed-error {
  padding: var(--sp-xxl) 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}
.feed-error {
  color: var(--danger);
}

.feed-load-more {
  display: block;
  margin: 0 auto;
}

/* Real images in cards — absolutely positioned so they fill the media
   container without competing with overlay siblings (e.g. bookmark site
   badge) in the flex layout. The parent's overflow:hidden + border-radius
   handles corner clipping. */
.feed-card-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-card-media-text {
  aspect-ratio: 1;
  overflow: hidden;
  width: 100%;
  padding: 0;
}

/* ---------- Badge pill ---------- */

.feed-badge-pill {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  z-index: 2;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg-primary-inverse);
  color: var(--text-primary-inverse);
  /* border: 1px solid var(--border-primary); */
  backdrop-filter: blur(8px);
}

/* ---------- Mobile header (hidden on desktop) ---------- */

.feed-mobile-header {
  display: none;
}

/* ---------- Mobile FAB (hidden on desktop) ---------- */

.feed-fab {
  display: none;
}

/* ---------- Desktop: search btn inside tab row ---------- */

/* Pinned search button — sits outside the scrollable chip strip so it never
   scrolls out of view. A gradient pseudo-element on the left edge creates a
   fade-out shadow that signals content is scrolling underneath it. */
.feed-search-btn-desktop {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: var(--sp-xs);
}
.feed-search-btn-desktop::before {
  content: '';
  position: absolute;
  right: 100%;
  top: -8px;
  bottom: -8px;
  width: 48px;
  background: linear-gradient(to right, transparent, var(--bg-body));
  pointer-events: none;
}

/* ── Mid-desktop (769px – 1440px) ────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1440px) {
  .feed {
    width: 68vw;
    max-width: 68vw;
    padding-left: var(--sp-xs);
    padding-right: var(--sp-xs);
  }
}

/* ── Mobile responsive (≤ 768px) ─────────────────────────────────────── */

/* ─── Media queries ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .feed {
    width: 100%;
    max-width: 100vw;
    padding: 0 var(--sp-md);
    overflow: hidden;
  }

  .feed-items-wrap {
    gap: var(--sp-md);
  }

  /* Tighter gap on mobile */
  .feed-grid {
    gap: var(--sp-md);
  }

  .feed-col {
    gap: var(--sp-md);
  }

  /* Reset 4-col container override on mobile */
  .feed--cols-4 {
    width: 100%;
    max-width: 100vw;
  }

  .feed-card-title {
    font-size: 13px;
  }

  /* Hide the desktop search button — mobile has it in the header */
  .feed-search-btn-desktop {
    display: none;
  }

  /* On mobile the tabs row margin is tighter */
  .feed-tabs-row {
    margin-bottom: var(--sp-xs);
  }

  /* Shift the tab strip to align with the screen edge on mobile */
  .feed-tabs {
    padding-left: var(--sp-md);
  }

  /* Mobile page header: sidebar toggle | Feed title (centered) | search */
  .feed-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-sm) var(--sp-xs);
    position: relative;
  }

  .feed-mobile-sidebar-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    flex-shrink: 0;
  }
  .feed-mobile-sidebar-toggle:hover {
    background: var(--bg-subtle);
  }

  .feed-mobile-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
  }

  .feed-mobile-search {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    border-radius: var(--radius-full);
    text-decoration: none;
    flex-shrink: 0;
  }
  .feed-mobile-search:hover {
    background: var(--bg-subtle);
    text-decoration: none;
  }

  /* Fixed "New Capture" FAB */
  .feed-fab {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    position: fixed;
    bottom: 44px;
    right: 32px;
    z-index: 50;
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow);
    font: inherit;
    font-size: var(--text-lg);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
  }
  .feed-fab:hover {
    background: var(--bg-primary);
  }

  .feed-fab-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .feed-fab-label {
    font-size: var(--text-lg);
    color: var(--text-primary);
  }

  /* Extra bottom padding so content isn't hidden behind the FAB */
  .feed-items-wrap {
    padding-bottom: 80px;
  }

  /* Remove the top padding the desktop header adds — our mobile header handles spacing */
  .feed {
    padding-top: 0;
  }
}

/* Detail screen — single item view with header, body, and right-side rail. */

.detail {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* dynamic viewport */
  overflow: hidden;
  position: relative; /* stacking context for the nav toast */
}

.detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--sp-xl);
}

.detail-content {
  display: flex;
  flex-direction: column;
  width: 64vw;
  max-width: 720px;
  margin: 0 auto;
}

/* Header: full width with border below, outside the grid. */
.detail-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-xl);
  flex-shrink: 0;
}

.detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-md);
}

.detail-meta-nav {
  display: flex;
  gap: var(--sp-3xs);
}

/* Sidebar toggle: hidden on desktop, replaces back button on mobile */
.detail-header-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.detail-header-sidebar-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.detail-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--text-lg);
}
.detail-back:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  text-decoration: none;
}

.detail-author-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.detail-author-type {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.detail-archived-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  background: var(--bg-tertiary-inverse);
  font-size: var(--text-xs);
  padding: 2px var(--sp-xs);
  border-radius: var(--radius-full);
}

.detail-follow-btn {
  margin-left: var(--sp-sm);
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--bg-secondary);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
}
.detail-follow-btn:hover {
  opacity: 0.9;
}

.detail-follow-btn-following {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-primary);
}
.detail-follow-btn-following:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.detail-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--text-xl);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.detail-nav-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.detail-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.detail-nav-btn:disabled:hover {
  background: transparent;
  color: var(--text-quarternary);
}

.detail-nav-menu {
  margin-left: var(--sp-xs);
  font-size: var(--text-2xl);
}

/* Wrapper for the ellipsis menu button + dropdown */
.detail-menu-wrapper {
  position: relative;
}

/* Ellipsis dropdown menu */
.detail-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  margin-top: var(--sp-3xs);
  padding: var(--sp-3xs);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.detail-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.detail-menu-item:hover {
  background: var(--bg-subtle);
}

.detail-menu-item-danger {
  color: var(--danger);
}
.detail-menu-item-danger:hover {
  background: var(--danger-subtle, var(--bg-subtle));
}

/* Delete confirmation dialog */
.detail-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.detail-confirm-dialog {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  max-width: 360px;
  width: 90%;
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,.2));
}
.detail-confirm-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 var(--sp-xs);
}
.detail-confirm-body {
  color: var(--text-tertiary);
  margin: 0 0 var(--sp-lg);
  font-size: 0.9rem;
}
.detail-confirm-actions {
  display: flex;
  gap: var(--sp-sm);
  justify-content: flex-end;
}
.detail-confirm-btn {
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-md);
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.detail-confirm-cancel {
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.detail-confirm-cancel:hover {
  background: var(--bg-hover, var(--bg-subtle));
}
.detail-confirm-delete {
  background: var(--danger);
  color: white;
}
.detail-confirm-delete:hover {
  opacity: 0.9;
}

/* Body column */
.detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  min-width: 0;
}

.detail-hero {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-hero-photo,
.detail-hero-voice,
.detail-hero-bookmark {
  width: -webkit-fill-available;
  height: auto;
  aspect-ratio: 4 / 3;
  
}

.detail-hero-text {
  aspect-ratio: 1;
  max-width: 400px;
}

.detail-hero-img {
  width: -webkit-fill-available;
  display: block;
  height: auto;
  object-fit: cover;
}

.detail-hero-zoomable {
  cursor: zoom-in;
  transition: opacity 120ms ease;
}

.detail-hero-zoomable:hover {
  opacity: 0.9;
}

.detail-hero-text,
.detail-hero-photo,
.detail-hero-voice,
.detail-hero-bookmark,
.detail-hero-img {
  border-radius: var(--radius-lg);
}

.detail-hero-voice .detail-hero-play-icon,
.detail-hero-voice .detail-hero-duration,
.detail-hero-bookmark .detail-hero-site,
.detail-hero-bookmark .detail-hero-external {
  color: var(--text-primary-inverse);
}

.detail-hero-play-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  backdrop-filter: blur(8px);
}

.detail-hero-duration {
  position: absolute;
  bottom: var(--sp-sm);
  right: var(--sp-sm);
  background: rgba(0, 0, 0, 0.5);
  padding: var(--sp-3xs) var(--sp-xs);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  backdrop-filter: blur(4px);
}

.detail-hero-site {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  background: rgba(0, 0, 0, 0.45);
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  backdrop-filter: blur(4px);
}

.detail-hero-external {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  font-size: var(--text-xl);
  background: rgba(0, 0, 0, 0.45);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-text-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.detail-title {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.detail-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  flex-wrap: wrap;
}

.detail-title-editable {
  background: transparent;
  border: none;
  resize: none;
  width: 100%;
  padding: 0;
  font-family: var(--font-sans);
  color: inherit;
  field-sizing: content;
  max-height: calc(3 * 1.25em);
  overflow: hidden;
  outline: none;
}

.detail-save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.detail-save-indicator-saved {
  color: var(--accent-green);
}

.detail-save-indicator-failed {
  color: var(--danger);
}

.detail-divider {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--sp-md) 0;
}

.detail-description {
  font-size: var(--text-base);
  color: var(--text-tertiary);
  line-height: 1.6;
  margin: 0;
}

.detail-description p {
  margin: 0 0 var(--sp-xs) 0;
}
.detail-description p:last-child {
  margin-bottom: 0;
}

.detail-description h1,
.detail-description h2,
.detail-description h3,
.detail-description h4 {
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--sp-sm) 0 var(--sp-3xs);
}
.detail-description h1 { font-size: var(--text-xl); }
.detail-description h2 { font-size: var(--text-lg); }
.detail-description h3 { font-size: var(--text-base); }
.detail-description h4 { font-size: var(--text-sm); }

.detail-description ul,
.detail-description ol {
  margin: var(--sp-xs) 0;
  padding-left: var(--sp-lg);
}
.detail-description ul { list-style: disc; }
.detail-description ol { list-style: decimal; }
.detail-description li { margin-bottom: var(--sp-3xs); }

.detail-description code {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .detail-description code { background: rgba(255, 255, 255, 0.1); }
[data-theme="light"] .detail-description code { background: rgba(0, 0, 0, 0.06); }

.detail-description pre {
  background: rgba(0, 0, 0, 0.06);
  padding: var(--sp-sm);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--sp-xs) 0;
}
[data-theme="dark"] .detail-description pre { background: rgba(255, 255, 255, 0.08); }
[data-theme="light"] .detail-description pre { background: rgba(0, 0, 0, 0.06); }
.detail-description pre code { background: none; padding: 0; }

.detail-description blockquote {
  border-left: 3px solid var(--border-primary);
  padding-left: var(--sp-sm);
  color: var(--text-secondary);
  margin: var(--sp-xs) 0;
}

.detail-description strong { font-weight: 600; color: var(--text-primary); }
.detail-description em { font-style: italic; }

.detail-description a {
  color: var(--bg-secondary);
  text-decoration: underline;
}

/* Owner-only mount point for the Milkdown body editor. Milkdown injects
 * .milkdown > .ProseMirror once initialised. Mirrors the chat composer's
 * styling pattern (chat.css §"Milkdown rich-text composer") but scaled
 * to detail-page typography so the editable surface visually matches
 * `.detail-description` (the non-owner read path). */
.detail-body-editor {
  min-height: 1.6em;
  cursor: text;
  outline: none;
}

.detail-body-editor .milkdown {
  all: unset;
  display: block;
  width: 100%;
}

.detail-body-editor .ProseMirror {
  outline: none;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-tertiary);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-body-editor .ProseMirror p.is-editor-empty:first-child::before,
.detail-body-editor .ProseMirror:empty::before {
  content: "Add a description…";
  float: left;
  height: 0;
  color: var(--text-tertiary);
  pointer-events: none;
}

.detail-body-editor .ProseMirror p {
  margin: 0 0 var(--sp-xs) 0;
}
.detail-body-editor .ProseMirror p:last-child {
  margin-bottom: 0;
}

.detail-body-editor .ProseMirror strong { font-weight: 700; }
.detail-body-editor .ProseMirror em     { font-style: italic; }
.detail-body-editor .ProseMirror code {
  font-family: monospace;
  font-size: 0.9em;
  background: var(--bg-secondary, rgba(0,0,0,0.08));
  border-radius: 3px;
  padding: 0.1em 0.3em;
}
.detail-body-editor .ProseMirror a {
  color: var(--color-accent, #4a90d9);
  text-decoration: underline;
}

.detail-body-editor .ProseMirror ul,
.detail-body-editor .ProseMirror ol {
  margin: var(--sp-xs) 0;
  padding-left: 1.4em;
}
.detail-body-editor .ProseMirror ul { list-style-type: disc; }
.detail-body-editor .ProseMirror ol { list-style-type: decimal; }
.detail-body-editor .ProseMirror li { margin: 0; }

.detail-body-editor .ProseMirror pre {
  background: var(--bg-secondary, rgba(0,0,0,0.08));
  border-radius: var(--radius-sm, 4px);
  padding: var(--sp-xs) var(--sp-sm);
  overflow-x: auto;
  font-family: monospace;
  font-size: 0.9em;
  margin: var(--sp-xs) 0;
}
.detail-body-editor .ProseMirror pre code {
  background: none;
  padding: 0;
}

.detail-body-editor .ProseMirror blockquote {
  border-left: 3px solid var(--border-primary, #ccc);
  margin: var(--sp-xs) 0;
  padding-left: var(--sp-sm);
  color: var(--text-secondary);
}

.detail-body-editor .ProseMirror h1,
.detail-body-editor .ProseMirror h2,
.detail-body-editor .ProseMirror h3 {
  font-weight: 700;
  margin: var(--sp-sm) 0 var(--sp-xs) 0;
  line-height: 1.3;
  color: var(--text-primary);
}

.detail-body-editor .ProseMirror ::selection {
  background: var(--color-accent-alpha, rgba(74,144,217,0.25));
}

.detail-description hr {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--sp-md) 0;
}

.detail-text-body {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: 1.7;
  margin-top: var(--sp-xs);
}

.detail-text-body p {
  margin: 0 0 var(--sp-sm) 0;
}
.detail-text-body p:last-child {
  margin-bottom: 0;
}

.detail-text-body h1,
.detail-text-body h2,
.detail-text-body h3,
.detail-text-body h4 {
  font-weight: 600;
  margin: var(--sp-md) 0 var(--sp-xs);
}
.detail-text-body h1 { font-size: var(--text-2xl); }
.detail-text-body h2 { font-size: var(--text-xl); }
.detail-text-body h3 { font-size: var(--text-lg); }
.detail-text-body h4 { font-size: var(--text-base); }

.detail-text-body ul,
.detail-text-body ol {
  margin: var(--sp-xs) 0;
  padding-left: var(--sp-lg);
}
.detail-text-body ul { list-style: disc; }
.detail-text-body ol { list-style: decimal; }
.detail-text-body li { margin-bottom: var(--sp-3xs); }

.detail-text-body code {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .detail-text-body code { background: rgba(255, 255, 255, 0.1); }
[data-theme="light"] .detail-text-body code { background: rgba(0, 0, 0, 0.06); }

.detail-text-body pre {
  background: rgba(0, 0, 0, 0.06);
  padding: var(--sp-sm);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--sp-xs) 0;
}
[data-theme="dark"] .detail-text-body pre { background: rgba(255, 255, 255, 0.08); }
[data-theme="light"] .detail-text-body pre { background: rgba(0, 0, 0, 0.06); }
.detail-text-body pre code { background: none; padding: 0; }

.detail-text-body blockquote {
  border-left: 3px solid var(--border-primary);
  padding-left: var(--sp-sm);
  color: var(--text-secondary);
  margin: var(--sp-xs) 0;
}

.detail-text-body strong { font-weight: 600; }
.detail-text-body em { font-style: italic; }

.detail-text-body a {
  color: var(--bg-secondary);
  text-decoration: underline;
}

.detail-text-body hr {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--sp-md) 0;
}

/* ── Extra text section (transcript / extracted page text) ──── */

.detail-extra-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.detail-extra-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.detail-extra-content {
  position: relative;
  max-height: 220px;
  overflow: hidden;
}

.detail-extra-content--expanded {
  max-height: none;
  overflow: visible;
}

.detail-extra-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-body));
  pointer-events: none;
}

.detail-extra-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
}
.detail-extra-toggle:hover {
  color: var(--text-primary);
}

.detail-bookmark-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
  color: var(--accent-blue);
  font-size: var(--text-sm);
  text-decoration: none;
}
.detail-bookmark-link:hover {
  text-decoration: underline;
}

.detail-actions {
  display: flex;
  gap: var(--sp-xs);
  flex-wrap: wrap;
  margin-top: var(--sp-xs);
}

.detail-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.detail-action-btn:hover {
  border-color: var(--border-primary);
  background: var(--bg-subtle);
}

.detail-action-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
}

.detail-action-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.detail-action-label {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Right-side vertical action rail */
.detail-rail {
  position: absolute;
  bottom: 44px;
  right: 44px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.detail-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var( --size-3xl);
  height: var( --size-3xl);
  padding: var(--sp-3xs);
  border: none;
  background: var(--bg-primary);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}
.detail-rail-btn:hover {
  color: var(--text-primary);
  opacity: 0.7;
}

.detail-rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.detail-rail-count {
  font-size: 9px;
  line-height: 1;
  color: var(--text-secondary);
}

.detail-rail-icon .icon {
  width: 18px;
  height: 18px;
}

/* The like rail entry is a real <button>; reset the default chrome so it
   matches the surrounding rail_btn divs, and show the filled/colored
   state when the viewer has already liked the item. */
.detail-rail-btn-like {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  width: fit-content;
  border: none;
  font-family: inherit;
  gap: 4px;
}


.detail-rail-btn-like > .detail-rail-count {
  font-size: var(--size-sm);
}

.detail-rail-btn-like-active,
.detail-rail-btn-like-active:hover {
  color: var(--danger);
}

/* Bookmark rail button — same reset as the like button. */
.detail-rail-btn-bookmark {
  border: none;
  font-family: inherit;
}
.detail-rail-btn-bookmark-active,
.detail-rail-btn-bookmark-active:hover {
  color: var(--text-primary);
}
/* Visibility toggle — pill track with sliding thumb */
.detail-visibility-toggle {
  position: relative;
  width: 64px;
  height: var(--size-3xl);
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.detail-visibility-toggle--on {
  background: var(--bg-body);
  border-color: var(--border-primary-inverse);
}

.detail-visibility-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 2px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  /* background: var(--bg-quarternary); */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: transform 0.2s, background 0.2s, color 0.2s;
}

.detail-visibility-toggle > .detail-visibility-toggle-thumb {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.detail-visibility-toggle--on > .detail-visibility-toggle-thumb {
  background: var(--bg-primary-inverse);
  color: var(--text-primary-inverse);
}

.detail-visibility-toggle--on .detail-visibility-toggle-thumb {
  transform: translateX(24px);
}

/* Chat-with-AI rail button — accent-colored to signal the primary action,
   dimmed while the Stream create-channel request is in flight. */
.detail-rail-btn-ai {
  color: var(--text-primary);
  background: var(--bg-primary);
}
.detail-rail-btn-ai:hover {
  /* color: var(--bg-secondary); */
  opacity: 0.8;
}
.detail-rail-btn-ai-loading {
  opacity: 0.5;
  cursor: progress;
}

/* Unread dot on the Chat-with-AI rail button. Item AI chats are hidden
   from the sidebar, so this dot is the only place users see new agent
   replies. Positioned over the top-right corner of the round button. */
.detail-rail-btn-ai {
  position: relative;
}
.detail-rail-btn-ai-unread-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--danger);
  border: 2px solid var(--bg-primary);
  box-sizing: content-box;
  pointer-events: none;
}

/* Voice hero + player wrapper — player renders below the gradient hero. */
.detail-voice-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

/* ── Audio player for voice detail ────────────────────────────── */

.detail-player {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
}

.detail-player-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.detail-player-progress { flex: 1; }

.detail-player-bar {
  height: 4px;
  background: var(--border-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
  cursor: pointer;
}
.detail-player-bar-fill {
  height: 100%;
  background: var(--bg-secondary);
  transition: width 0.1s linear;
}

.detail-player-times {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-3xs);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.detail-player-transcript {
  margin: var(--sp-sm) 0 0 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.detail-loading,
.detail-error {
  padding: var(--sp-xxl);
  text-align: center;
  color: var(--text-tertiary);
}

/* ── Comments section ─────────────────────────────────────────── */

.detail-comments {
  margin-top: var(--sp-xxl);
  padding-bottom: var(--sp-4xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.detail-comments-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

/* ── Comment composer — pill style matching chat composer ────────────── */

.detail-comments-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-lg);
}

/* Drag-over highlight */
.detail-comments-composer.drag-over {
  border-color: var(--accent);
  background: var(--bg-subtle);
}

/* Emoji/GIF picker anchored above the composer, aligned to left */
.detail-comments-composer .emoji-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: auto;
}

.detail-comments-file-input {
  display: none;
}

/* Input area — padding above, textarea fills width */
.detail-comments-input-wrap {
  padding: var(--sp-sm) var(--sp-sm) 0 var(--sp-sm);
}

/* Toolbar row — attach | emoji | spacer | send */
.detail-comments-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--sp-xs) var(--sp-xs);
  gap: var(--sp-3xs);
}

.detail-comments-toolbar-spacer {
  flex: 1;
}

/* Attach and emoji buttons — circular icon buttons */
.detail-comments-emoji-btn,
.detail-comments-attach-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-full);
  cursor: pointer;
  padding: 0;
  transition: color 120ms ease, background 120ms ease;
}

.detail-comments-emoji-btn:hover,
.detail-comments-attach-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* ── Staged image preview (paste / file picker) ───────────────────── */

/* Strip container — shown above the input row when an image is staged */
.detail-comments-img-strip {
  padding: var(--sp-sm) var(--sp-sm) 0 var(--sp-sm);
  display: flex;
  flex-direction: row;
  gap: var(--sp-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.detail-comments-img-strip::-webkit-scrollbar { display: none; }

.detail-comments-img-preview {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  overflow: hidden;
  width: 80px;
  height: 80px;
}

.detail-comments-img-thumb {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 1px);
}

.detail-comments-img-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  line-height: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.detail-comments-img-clear:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* ── Camera capture modal ─────────────────────────────────────────── */

.camera-modal-body {
  display: flex;
  flex-direction: column;
  background: #000;
  border-radius: inherit;
  overflow: hidden;
}

.camera-viewfinder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #111;
}

.camera-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg) var(--sp-md);
  background: #000;
}

.camera-shutter-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  border: 4px solid #fff;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: transform 80ms ease, background 80ms ease;
  flex-shrink: 0;
}

.camera-shutter-btn:hover {
  background: #fff;
  transform: scale(1.06);
}

.camera-shutter-btn:active {
  transform: scale(0.94);
  background: rgba(255, 255, 255, 0.65);
}

.detail-comments-input {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}
.detail-comments-input::placeholder {
  color: var(--text-secondary);
}

/* Post/send button — circular solid button matching chat send */
.detail-comments-post {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--bg-primary-inverse);
  color: var(--text-primary-inverse);
}
.detail-comments-post:disabled {
  background: var(--bg-quarternary);
  color: var(--text-disabled);
  cursor: default;
}

.detail-comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-comment {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
}

.detail-comment-pending {
  opacity: 0.5;
}

.detail-comment-body {
  flex: 1;
  min-width: 0;
}

.detail-comment-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-3xs);
}

.detail-comment-name {
  font-weight: 500;
  font-size: var(--text-sm);
}

.detail-comment-time {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.detail-comment-content {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

.detail-comment-content p {
  margin: 0;
}

.detail-comment-content p + p {
  margin-top: var(--sp-sm);
}

/* Non-mention links (autolinked URLs, [text](url) markdown).
   `:not(.comment-mention)` excludes @-mention anchors so they keep
   their own styling below. */
.detail-comment-content a:not(.comment-mention) {
  color: var(--accent-blue);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* @-mention link inside comment bodies. */
.comment-mention {
  color: var(--accent-blue);
  text-decoration: none;
}
.comment-mention:hover {
  text-decoration: underline;
}

.detail-comment-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-3xs);
}

.detail-comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.detail-comment-like-btn:hover {
  color: var(--fg-default);
}
.detail-comment-like-btn-active {
  color: var(--accent-red);
}

.detail-comment-like-count {
  font-size: var(--text-xs);
}

.detail-comment-replies-count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.detail-comment-menu-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  margin-left: auto;
}
.detail-comment-menu-btn:hover {
  color: var(--color-red);
}

.detail-comments-empty,
.detail-comments-loading,
.detail-comments-error {
  padding: var(--sp-md) 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}

.detail-comments-load-more {
  align-self: center;
  margin-top: var(--sp-xs);
}

/* ── Reply threading ────────────────────────────────── */

.detail-comment-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.detail-comment-reply-btn:hover {
  color: var(--fg-default);
}

.detail-replies {
  margin-left: var(--sp-sm);
  border-left: 2px solid var(--border-default);
  padding-left: var(--sp-sm);
}

.detail-replies-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-reply {
  display: flex;
  gap: var(--sp-xs);
}

.detail-reply-composer {
  display: flex;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}

.detail-reply-input {
  flex: 1;
  border: none;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  padding: var(--sp-sm) var(--sp-md);
  font-size: 14px;
  color: var(--fg-default);
}

.detail-reply-post {
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: none;
  font-size: var(--text-xs);
  cursor: pointer;
}
.detail-reply-post:disabled {
  background: var(--bg-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* ── Transparent backdrop for closing dropdowns on outside click ── */

.detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
}

/* ── Reminder picker dropdown ────────────────────────────────── */

.detail-action-remind-wrapper {
  position: relative;
}

.detail-reminder-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  margin-top: var(--sp-xs);
  padding: var(--sp-xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
  min-width: 220px;
}

.detail-reminder-option {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.detail-reminder-option:hover {
  background: var(--bg-subtle);
}
.detail-reminder-option-time {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.detail-reminder-custom {
  display: flex;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  border-top: 1px solid var(--border-primary);
  margin-top: var(--sp-3xs);
  padding-top: var(--sp-sm);
}

.detail-reminder-custom-input {
  flex: 1;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--sp-3xs) var(--sp-xs);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg);
}

.detail-reminder-custom-btn {
  padding: var(--sp-3xs) var(--sp-sm);
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
}
.detail-reminder-custom-btn:hover {
  opacity: 0.9;
}

/* ── Existing reminders (chips below action row) ─────────────── */

.detail-reminders-list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: var(--sp-sm);
  justify-content: space-between;
  align-items: center;
}

.detail-view--actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-sm);
}

.detail-reminder-chip-wrap {
  position: relative;
  display: inline-flex;
}

.detail-reminder-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  height: var(--size-3xl);
  padding: var(--sp-3xs) var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
}
.detail-reminder-chip:hover {
  background: var(--bg-hover, var(--bg-subtle));
  border-color: var(--border-primary);
}

.detail-reminder-chip-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
  line-height: 1;
}

.detail-reminder-chip-date {
  color: var(--text-primary);
}

.detail-reminder-chip-overdue {
  border-color: var(--danger);
  color: var(--danger);
}
.detail-reminder-chip-overdue .detail-reminder-chip-icon,
.detail-reminder-chip-overdue .detail-reminder-chip-date {
  color: var(--danger);
}

/* Chip action dropdown */
.detail-reminder-chip-menu {
  position: absolute;
  top: calc(100% + var(--sp-3xs));
  left: 0;
  z-index: 20;
  min-width: 140px;
  padding: var(--sp-3xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-reminder-chip-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
}
.detail-reminder-chip-menu-item:hover {
  background: var(--bg-subtle);
}
.detail-reminder-chip-menu-item-danger {
  color: var(--danger);
}
.detail-reminder-chip-menu-item-danger:hover {
  background: var(--danger-subtle, var(--bg-subtle));
}

/* Textarea-specific overrides (resize, height) */
.detail-comments-input {
  resize: none;
  min-height: 2.5rem;
  max-height: 8rem;
  font-family: inherit;
  line-height: 1.4;
}

.comment-mention-picker {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
}

.comment-mention-picker-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
}
.comment-mention-picker-item:hover {
  background: var(--bg-subtle);
}

.comment-mention-picker-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.comment-mention-picker-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-mention-picker-username {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Keyboard-nav end-of-list toast ──────────────────────────────────── */

.detail-nav-toast {
  position: absolute;
  bottom: var(--sp-xl);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-xs) var(--sp-md);
  background: var(--bg-elevated, var(--bg-primary));
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: detail-toast-in 0.18s ease-out, detail-toast-out 0.3s ease-in 2.2s forwards;
}

/* ─── Keyframe animations ────────────────────────────────────────────── */

@keyframes detail-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes detail-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ─── Media queries ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .detail-content {
    width: 100%;
    max-width: 100%;
  }

  .detail-back { display: none; }
  .detail-header-sidebar-toggle { display: inline-flex; }

  .detail-comments-input,
  .detail-reply-input {
    font-size: 16px;
  }

}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .detail-description code { background: rgba(255, 255, 255, 0.1); }
  :root:not([data-theme]) .detail-description pre { background: rgba(255, 255, 255, 0.08); }
  :root:not([data-theme]) .detail-text-body code { background: rgba(255, 255, 255, 0.1); }
  :root:not([data-theme]) .detail-text-body pre { background: rgba(255, 255, 255, 0.08); }
}

.detail-no-access {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-xl);
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  text-align: center;
}

/* Capture modal — overlay + dialog for the New Capture flow. */

.capture-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.capture-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: min(440px, calc(100vw - 48px));
  min-height: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-md);
  gap: var(--sp-xl);
}

.capture-modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Header ------------------------------------------------------------------ */
.capture-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.capture-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
}

.capture-close {
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.capture-close:hover { background: var(--bg-secondary); }
.capture-close .icon { width: 14px; height: 14px; }

/* Drop zone --------------------------------------------------------------- */
.capture-dropzone {
  position: relative; /* contains the absolutely-positioned file input */
  background: rgba(0, 0, 0, 0.04); /* --bg-quaternary not available in tokens */
  border-radius: var(--radius-md);
  padding: 15px var(--sp-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.capture-dropzone-icon {
  display: flex;
  align-items: center;
  color: var(--text-primary);
}

.capture-dropzone-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* Nested inside its parent label and sized to cover it fully so the user
   is physically tapping the file input itself — bypasses iOS Safari's
   label-for activation quirks entirely. The label needs position:relative. */
.capture-file-input-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  /* font-size: 100px pushes the "Choose File" text off-screen on some
     Android browsers that render it inside the input bounds */
  font-size: 100px;
}

.capture-dropzone-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}
.capture-dropzone-link {
  color: var(--accent-blue);
  text-decoration: none;
  cursor: pointer;
}
.capture-dropzone-link:hover {
  text-decoration: underline;
}
.capture-dropzone-formats {
  font-size: 12px;
  color: var(--text-secondary);
  margin: var(--sp-3xs) 0 0;
}

/* Uploads list ------------------------------------------------------------ */
.capture-uploads {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.capture-upload {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  align-items: flex-start;
}

.capture-upload-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  padding-top: 1px;
}

.capture-upload-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.capture-upload-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.capture-upload-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-upload-remove {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  padding: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.capture-upload-remove:hover { color: #ffffff; }

.capture-upload-percent {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.capture-upload-percent--done {
  color: #22c55e;
}

.capture-upload-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.capture-upload-bar-fill {
  height: 100%;
  background: var(--accent-blue);
  transition: width 0.15s ease;
}
.capture-upload-bar-fill--done {
  background: #22c55e;
}

/* Image preview shown in drop mode after a file is selected */
.capture-drop-preview {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
  max-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capture-drop-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 240px;
  display: block;
}
.capture-drop-preview-change {
  position: absolute;
  bottom: var(--sp-xs);
  right: var(--sp-xs);
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.capture-drop-preview-change:hover {
  background: rgba(0, 0, 0, 0.75);
}


/* Nav tabs (mode switches) ------------------------------------------------ */
.capture-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
}

.capture-nav-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin: 0;
}

.capture-nav-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  gap: var(--sp-lg);
}

.capture-nav-tab {
  background: transparent;
  border: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-full);
  transition: color 0.12s, background 0.12s;
}
.capture-nav-tab:hover {
  color: var(--text-primary);
}
.capture-nav-tab--active {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
}

/* Footer ------------------------------------------------------------------ */
.capture-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border-primary);
}

.capture-btn {
  padding: var(--sp-xs) var(--sp-lg);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-primary);
  font-family: inherit;
}
.capture-btn-cancel {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.capture-btn-cancel:hover {
  background: var(--bg-subtle);
}
.capture-btn-save {
  background: var(--bg-body);
  color: var(--text-primary);
  border-color: var(--border-primary);
}
.capture-btn-save:hover:not(:disabled) {
  background: var(--bg-subtle);
}
.capture-btn-save-disabled {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border-color: var(--border-primary);
  cursor: not-allowed;
}


/* Mode forms -------------------------------------------------------------- */
.capture-link-form,
.capture-text-form,
.capture-voice-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.capture-camera-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  align-items: center;
}

/* Desktop webcam viewfinder + shutter ------------------------------------ */
.capture-webcam-wrap {
  width: 100%;
  position: relative; /* needed for the absolute-positioned flip button */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

.capture-webcam-viewfinder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: #000;
  display: block;
  object-fit: cover;
}

.capture-webcam-shutter {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--border-primary);
  background: var(--bg-primary);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.12s;
}
.capture-webcam-shutter::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--bg-disabled);
  transition: background 0.12s;
}
.capture-webcam-shutter--active::after {
  background: var(--accent-red);
}
.capture-webcam-shutter--active:hover::after {
  opacity: 0.8;
}
.capture-webcam-shutter:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Camera flip button (desktop — overlaid bottom-right of webcam-wrap) ------- */
.capture-webcam-flip {
  position: absolute;
  bottom: var(--sp-md);
  right: var(--sp-md);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
}
.capture-webcam-flip:hover { background: rgba(0, 0, 0, 0.65); }
.capture-webcam-flip .icon { color: #fff; }

/* Webcam photo preview + retake ------------------------------------------ */
.capture-webcam-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

.capture-webcam-preview-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
}

.capture-webcam-retake {
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--sp-xs) var(--sp-lg);
  cursor: pointer;
}
.capture-webcam-retake:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.capture-link-form label,
.capture-text-form label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.capture-link-form input,
.capture-text-form input,
.capture-text-content {
  padding: var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  outline: none;
}
.capture-link-form input:focus,
.capture-text-form input:focus,
.capture-text-content:focus {
  border-color: var(--bg-secondary);
}

.capture-text-content {
  resize: vertical;
  min-height: 120px;
}

.capture-submit {
  padding: var(--sp-sm);
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.capture-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* Voice ------------------------------------------------------------------- */
.capture-voice-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xxl) 0;
  color: var(--text-tertiary);
}
.capture-voice-recording { color: var(--danger); }
.capture-voice-recording .icon { animation: pulse 1s ease infinite; }

.capture-voice-timer {
  font-size: var(--text-2xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.capture-voice-btn {
  align-self: center;
  padding: var(--sp-sm) var(--sp-xl);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}

.capture-voice-hint,
.capture-camera-hint {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Camera file input ------------------------------------------------------- */
.capture-camera-input {
  display: block;
  margin: var(--sp-md) auto;
}

/* Sidebar button variant — used by "+ New Capture" row. ------------------- */
.sidebar-row-button {
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* Link preview card ------------------------------------------------------- */
.capture-link-preview {
  display: flex;
  gap: var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
  animation: fadeIn 0.15s ease;
}

.capture-link-preview-image-wrap {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.capture-link-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.capture-link-preview-body {
  flex: 1;
  min-width: 0;
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.capture-link-preview-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.capture-link-preview-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ─── Keyframe animations ────────────────────────────────────────────── */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile Capture Sheet (full-height dark overlay)
   Only rendered on mobile via the is_mobile() FFI check.
   ───────────────────────────────────────────────────────────────────────── */

.capture-sheet-mobile {
  /* Explicit edges instead of shorthand `inset` for older Safari compat */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Contain all children — critical on iOS Safari to prevent rubber-band
     scroll leaking out of the fixed layer on both axes */
  overflow: hidden;
  /* Belt-and-suspenders: block overscroll bounce at the sheet level too */
  overscroll-behavior: none;
  /* iOS momentum scroll must never propagate to the document behind */
  touch-action: none;
  background: #000;
  z-index: 401;
  display: flex;
  flex-direction: column;
  /* Slide up on open */
  animation: sheet-slide-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  /* Safe area bottom padding for home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Floating close button ──────────────────────────────────────────────── */

.capture-sheet-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Body (fills all space between close btn and tabs) ─────────────────── */

.capture-sheet-body {
  flex: 1;
  min-height: 0;
  /* Prevent children from overflowing the flex column on iOS Safari */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */

.capture-sheet-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0 12px;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.capture-sheet-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.capture-sheet-tab--active {
  color: #fff;
  font-weight: 600;
}

.capture-sheet-tab-label {
  font-size: 10px;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ── Link mode ───────────────────────────────────────────────────────────── */

.capture-sheet-link {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Hero: full-bleed OG image background */
.capture-sheet-hero {
  flex: 1;
  min-height: 0;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32px;
  /* Clip the background image and absolute overlays to this box */
  overflow: hidden;
  /* Gradient overlay so CTA text reads over bright images */
  background-color: #111;
}

.capture-sheet-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.0) 40%,
    rgba(0,0,0,0.35) 100%
  );
  pointer-events: none;
}

/* Empty state placeholder */
.capture-sheet-hero--empty {
  background-color: #111;
}

/* Decorative circle — only visible once an OG image is loaded, positioned
   32px above the capture tab bar at the bottom of the sheet. */
.capture-sheet-hero:not(.capture-sheet-hero--empty)::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
}

/* "Use this link" CTA pill */
.capture-sheet-cta {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  font-size: var(--text-base);
  font-weight: 600;
  padding: 10px 28px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
  transition: transform 0.12s, opacity 0.12s;
}

.capture-sheet-cta:active {
  transform: scale(0.97);
}

.capture-sheet-cta--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* URL input bar */
.capture-sheet-url-bar {
  flex-shrink: 0;
  padding: 14px 16px 10px;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.capture-sheet-url-input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: var(--text-lg);
  font-family: var(--font-sans);
  /* Monospace-ish feel for URLs */
  letter-spacing: -0.01em;
  caret-color: #fff;
  padding: 0;
  /* Re-enable touch interaction — parent sets touch-action: none to lock
     document scroll, but inputs need touch events for focus / text selection */
  touch-action: auto;
}

.capture-sheet-url-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* ── Shared form layout (Text / Voice / Gallery / Camera) ────────────────── */

.capture-sheet-form {
  flex: 1;
  min-height: 0;
  /* Scroll the form content when the keyboard shrinks the viewport;
     overscroll-behavior: contain stops bounce reaching the document */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  padding: 56px 24px 24px; /* top pad clears close button */
  color: #fff;
}

.capture-sheet-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  color: #fff;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  outline: none;
}

.capture-sheet-input::placeholder {
  color: rgba(255,255,255,0.35);
}

.capture-sheet-input:focus {
  border-color: rgba(255,255,255,0.3);
}

.capture-sheet-textarea {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  color: #fff;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  outline: none;
  resize: none;
  min-height: 140px;
  touch-action: auto;
}

.capture-sheet-textarea::placeholder {
  color: rgba(255,255,255,0.35);
}

.capture-sheet-textarea:focus {
  border-color: rgba(255,255,255,0.3);
}

.capture-sheet-save-btn {
  width: 100%;
  padding: 14px;
  background: #fff;
  color: #000;
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.12s;
}

.capture-sheet-save-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Voice recorder */
.capture-sheet-voice-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  color: rgba(255,255,255,0.6);
}

.capture-sheet-voice-recording {
  color: #ff453a;
  animation: pulse 1.2s ease-in-out infinite;
}

.capture-sheet-voice-timer {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.capture-sheet-record-btn {
  padding: 12px 32px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
}

/* Camera label row (label + flip toggle) ----------------------------------- */
.capture-sheet-camera-label-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
}

/* Flip camera button (mobile sheet) */
.capture-sheet-flip-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: var(--text-sm);
  padding: 6px 14px 6px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.capture-sheet-flip-btn:active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.capture-sheet-flip-btn .icon { color: rgba(255, 255, 255, 0.75); }

.capture-sheet-flip-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Gallery / Camera file label — input is nested inside and overlays it */
.capture-sheet-file-label {
  position: relative; /* contains the absolute-positioned file input */
  overflow: hidden;   /* clips the input overlay to the label's border-radius */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: 40px 32px;
  border: 2px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  color: rgba(255,255,255,0.6);
  font-size: var(--text-base);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}

.capture-sheet-file-label:active {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.capture-sheet-error {
  color: #ff453a;
  font-size: var(--text-sm);
  text-align: center;
  margin: 0;
}

/* ── Text mode: Milkdown editor container ───────────────────────────────── */

/* Desktop (inside .capture-text-form) */
.capture-text-editor {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  min-height: 128px;
  padding: var(--sp-sm);
  cursor: text;
  flex: 1;
  transition: border-color 0.12s;
  overflow-y: auto;
}

.capture-text-editor:focus-within {
  border-color: var(--bg-secondary);
  outline: none;
}

.capture-text-editor .ProseMirror {
  outline: none;
  min-height: 96px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-primary);
  word-break: break-word;
}

/* Placeholder */
.capture-text-editor .ProseMirror p.is-editor-empty::before {
  content: "Write your note...";
  color: var(--text-tertiary);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Inline formatting */
.capture-text-editor .ProseMirror strong { font-weight: 700; }
.capture-text-editor .ProseMirror em { font-style: italic; }
.capture-text-editor .ProseMirror code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9em;
  background: var(--bg-secondary);
  border-radius: 3px;
  padding: 1px 4px;
}

/* Block elements */
.capture-text-editor .ProseMirror h2 {
  font-size: 1.15em;
  font-weight: 700;
  margin: 0.5em 0 0.25em;
  line-height: 1.3;
}
.capture-text-editor .ProseMirror h3 {
  font-size: 1.05em;
  font-weight: 600;
  margin: 0.5em 0 0.25em;
  line-height: 1.3;
}
.capture-text-editor .ProseMirror p {
  margin: 0 0 0.4em;
}
.capture-text-editor .ProseMirror p:last-child { margin-bottom: 0; }
.capture-text-editor .ProseMirror ul,
.capture-text-editor .ProseMirror ol {
  margin: 0 0 0.4em;
  padding-left: 1.4em;
}

/* Mobile sheet variant */
.capture-text-editor--sheet {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  flex: 1;
  min-height: 0;
  width: 100%;
  /* Re-enable scroll inside the editor on iOS */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.capture-text-editor--sheet:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
}

.capture-text-editor--sheet .ProseMirror {
  color: #fff;
  min-height: 80px;
}

.capture-text-editor--sheet .ProseMirror p.is-editor-empty::before {
  content: "Write your note...";
  color: rgba(255, 255, 255, 0.35);
}

.capture-text-editor--sheet .ProseMirror code {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Mobile sheet text form layout override — top-align content */
.capture-sheet-form--text {
  justify-content: flex-start;
  /* A bit less top padding since toolbar + editor take up full height */
  padding-top: 52px;
}

/* ── Camera mode sheet — full-bleed getUserMedia viewfinder ─────────────── */

.capture-sheet-form--camera {
  padding: 0;
  justify-content: flex-start;
  overflow: hidden;
}

/* Viewfinder container fills all available height */
.capture-sheet-webcam-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  background: #000;
}

/* Live preview video — covers the wrap div */
.capture-sheet-webcam-viewfinder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shutter button — centred at the bottom of the viewfinder */
.capture-sheet-webcam-shutter {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s;
}

.capture-sheet-webcam-shutter::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.12s;
}

.capture-sheet-webcam-shutter--active::after {
  background: #fff;
}

.capture-sheet-webcam-shutter--active:active::after {
  opacity: 0.75;
}

.capture-sheet-webcam-shutter:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Flip camera button — bottom right corner of the viewfinder */
.capture-sheet-webcam-flip {
  position: absolute;
  bottom: 40px;
  right: 24px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
}

.capture-sheet-webcam-flip:active { background: rgba(0, 0, 0, 0.65); }
.capture-sheet-webcam-flip .icon { color: #fff; }

/* Photo preview after shutter — full-bleed image + action buttons */
.capture-sheet-webcam-preview {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  background: #000;
  display: flex;
  flex-direction: column;
}

.capture-sheet-webcam-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Action row overlaid at the bottom of the preview */
.capture-sheet-webcam-preview-actions {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: 20px 24px 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.capture-sheet-webcam-retake {
  align-self: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--sp-xs) var(--sp-xl);
  cursor: pointer;
  transition: background 0.12s;
}

.capture-sheet-webcam-retake:active {
  background: rgba(0, 0, 0, 0.65);
}

/* ============================================================================
   Chat feature: thread-view pane (header, messages list, composer).

   Layout: the chat module renders into the main-pane slot in the app shell,
   taking the full available height. The inner content is capped to a
   readable column width and centered.
   ========================================================================= */

.chat {
  display: grid;
  /* row 1: header | row 2: messages | row 3: mobile-edit cancel bar (collapses when empty) | row 4: composer */
  grid-template-rows: auto 1fr auto auto;
  /* Inherit height from the .main-pane flex chain rather than setting our
     own dvh value. The shell is sized via --vvh (visualViewport.height) in
     dom.mjs, so this correctly reflects the keyboard-adjusted visible area
     on iOS Safari. */
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Floating "jump to latest" pill that appears when a new message lands
   while the viewer is scrolled away from the bottom. */
.chat-jump-to-latest {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--bg-elevated, var(--bg));
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.chat-jump-to-latest:hover {
  background: var(--bg-hover, var(--bg-primary));
}

/* Floating scroll-to-bottom button — appears when the user scrolls up.
   Right-aligned to the messages column, 56px above the composer. */
.chat-scroll-to-bottom {
  position: absolute;
  right: var(--sp-xl, 24px);
  bottom: 96px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary, var(--bg-secondary));
  color: var(--text-primary);
  border-radius: var(--radius-xs, 8px);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
  padding: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.chat-scroll-to-bottom--hidden {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}
.chat-scroll-to-bottom:hover {
  background: var(--bg-hover, var(--bg-primary));
}

.chat-empty-root {
  justify-content: center;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.chat-header {
  grid-row: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-xl);
}

.chat-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--text-lg);
}
.chat-back:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* Sidebar toggle shown in the chat header for mobile layouts.
   On desktop the sidebar remains visible, so the toggle stays hidden.
   On mobile the toggle is shown in place of the back button. */
.chat-header-sidebar-toggle {
  display: none; /* hidden on desktop */
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.chat-header-sidebar-toggle .icon {
  width: 20px;
  height: 20px;
}
.chat-header-sidebar-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.chat-header-title {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
}

.chat-header-title-link {
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
  line-height: inherit;
  text-align: left;
}

.chat-header-title-link:hover {
  text-decoration: underline;
}

.chat-header-member-link {
  color: inherit;
  text-decoration: none;
}
.chat-header-member-link:hover {
  text-decoration: underline;
}

.chat-header-menu {
  margin-left: auto;
  color: var(--text-tertiary);
  padding: var(--sp-xs);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
}
.chat-header-menu:hover {
  color: var(--text-primary);
}

/* ── Messages ─────────────────────────────────────────────────────────── */

.chat-messages {
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  max-width: 800px;
  width: 100%;
  justify-self: center;
}
.chat-messages::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Each message row: avatar column + content stack. The whole row
   reverses for sent messages so the stack hugs the right edge. */
.chat-message-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  max-width: 70%;
  min-width: 0; /* prevent flex item from overriding max-width with intrinsic size */
}

.chat-message-row.received {
  align-self: flex-start;
}

.chat-message-row.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message-row.ai-bare {
  align-self: stretch;
  max-width: 100%;
}

.chat-timestamp-header {
  align-self: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: var(--sp-sm) 0 var(--sp-3xs);
  text-align: center;
}

/* Fixed-width avatar column. Empty for continuation rows so bubbles
   indent under the group's avatar. */
.chat-message-avatar-slot {
  width: 28px;
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  justify-content: center;
}

.chat-message-avatar-ai {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--fg);
  color: var(--bg);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

/* Stack: tiny timestamp + bubble (and reaction wrapper). */
.chat-message-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-message-row.sent .chat-message-stack {
  align-items: flex-end;
}

.chat-message-tiny-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: 0 var(--sp-xs);
  margin-bottom: var(--sp-3xs);
}

.chat-message-row.sent .chat-message-tiny-time {
  text-align: right;
}

/* "Edited" suffix — same size/colour as the time, italic only */
.chat-message-tiny-time__edited {
  font-style: italic;
  font-size: inherit;
  color: inherit;
}

.chat-message-bubble {
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere; /* break long URLs/tokens at any character; also affects flex min-content */
  min-width: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Continuation bubbles inside a group sit a touch closer to the
   one above. */
.chat-message-row + .chat-message-row .chat-message-bubble {
  margin-top: var(--sp-3xs);
}

.chat-message-row.received .chat-message-bubble {
  border-bottom-left-radius: var(--radius-sm);
}

.chat-message-row.sent .chat-message-bubble {
  border-bottom-right-radius: var(--radius-sm);
  background: var(--bg-primary);
}

/* AI bare: no bubble background; full-width content. Avatar slot
   stays so the row keeps its left-column alignment. */
.chat-message-row.ai-bare .chat-message-stack {
  width: 100%;
}
.chat-message-row.ai-bare .chat-message-bubble {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.chat-message-row:not(.ai-bare) + .chat-message-row.ai-bare {
  padding-top: var(--sp-md);
}
.chat-message-row.ai-bare .chat-message-text {
  line-height: 1.65;
}
.chat-message-row.ai-bare .chat-message-text p {
  margin: 0 0 var(--sp-sm) 0;
}

.chat-message-ai-bare .chat-message-text ul,
.chat-message-ai-bare .chat-message-text ol,
.chat-message-ai-bare .chat-message-text blockquote,
.chat-message-ai-bare .chat-message-text pre {
  margin-top: -4px;
  margin-right: 0;
  margin-bottom: var(--sp-sm);
  margin-left: 0;
}

/* ── Reactions ───────────────────────────────────────────────────────── */

.chat-message-bubble-wrapper {
  position: relative;
}

.chat-reaction-trigger {
  position: absolute;
  top: -22px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm);
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border-secondary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  /* Keep the hidden trigger out of tab order and pointer reach so keyboard
     users can't focus an invisible control. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.reaction-trigger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

.reaction-trigger__label {
  font-size: 13px;
  line-height: 1;
  color: inherit;
  font-weight: 500;
}

.chat-message-bubble-wrapper:hover .chat-reaction-trigger,
.chat-reaction-trigger:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chat-reaction-trigger:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* For sent messages, the bubble hugs the right side — position the trigger
   on the left instead to keep it inside the viewport. */
.chat-message-row.sent .chat-reaction-trigger {
  right: auto;
  left: -4px;
}

/* Hide the trigger whenever the emoji pill is open for this message —
   the pill replaces it rather than overlaying it. */
.chat-message-bubble-wrapper:has(.emoji-picker-pill) .chat-reaction-trigger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chat-reaction-picker {
  position: absolute;
  top: -40px;
  left: 0;
  display: flex;
  gap: var(--sp-3xs);
  background: var(--bg);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  padding: var(--sp-3xs) var(--sp-xs);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.chat-message-row.sent .chat-reaction-picker {
  left: auto;
  right: 0;
}

.chat-reaction-picker-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  transition: background 0.1s ease, transform 0.1s ease;
}

.chat-reaction-picker-btn:hover {
  background: var(--bg-subtle);
  transform: scale(1.2);
}

.chat-reaction-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--sp-3xs);
}

.chat-message-row.sent .chat-reaction-pills {
  justify-content: flex-end;
}

.chat-reaction-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  padding: var(--size-3xs) var(--size-xs);
  border-color: transparent;
  border-radius: 12px;
  background: var(--bg-primary);
  font-size: var(--text-xs);
  cursor: pointer;
  touch-action: none; /* deliver pointer events immediately — required for long-press */
  transition: background 0.1s ease, border-color 0.1s ease;
}

.chat-reaction-pill:hover {
  background: var(--bg-subtle);
}

/* BEM-style child spans — `.reaction-pill__emoji` holds the emoji glyph,
   `.reaction-pill__count` holds the numeric count. The pill itself uses
   inline-flex + gap to space them. `tabular-nums` keeps the count from
   jitter-shifting as digits change width. */
.reaction-pill__emoji,
.reaction-pill__count {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.reaction-pill__emoji {
  font-size: 16px;
}

.reaction-pill__count {
  font-variant-numeric: tabular-nums;
}

.chat-reaction-pill.active {
  background: var(--bg-primary);
}

.chat-reaction-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  padding: var(--size-sm) var(--size-md);
  border-radius: 6px;
  background: #595959;
  color: var(--text-primary-inverse);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.3;
  max-width: 240px;
  width: max-content;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.08s ease;
  z-index: 10;
}

.chat-message-row.sent .chat-reaction-tooltip {
  left: auto;
  right: 0;
}

.chat-reaction-pill:hover .chat-reaction-tooltip,
.chat-reaction-pill:focus-visible .chat-reaction-tooltip {
  opacity: 1;
  visibility: visible;
}

.chat-reaction-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  border: 4px solid transparent;
  border-top-color: #595959;
}

.chat-message-row.sent .chat-reaction-tooltip::after {
  left: auto;
  right: 12px;
  border-top-color: #595959;
}

/* ── Composer ─────────────────────────────────────────────────────────── */

.chat-composer {
  grid-row: 4;
  width: 100%;
  max-width: 800px;
  padding: 0 var(--sp-xl) var(--sp-xxl) var(--sp-xl);
  justify-self: center;
}

/* On iOS the home-indicator bar sits below the safe area and overlaps the
   composer. A small bottom margin keeps the form above it. */
.ios .chat-composer {
  margin-bottom: var(--sp-4xs);
}

/* Inner wrapper — takes up the flex space the textarea used to own */
.composer-inline-input-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Override flex: 1 on the textarea so it fills the block wrapper instead */
.composer-inline-input-wrap .chat-composer-input {
  flex: none;
  width: 100%;
}

/* When there's content and the composer is not focused: hide raw markdown
   so only the rendered overlay is visible. Caret-color is also cleared so
   the invisible cursor doesn't flicker when blurred. */
.composer-inline-input-wrap--has-content:not(:focus-within) .chat-composer-input {
  color: transparent;
  caret-color: transparent;
}

/* Rendered markdown overlay — absolutely positioned over the textarea.
   pointer-events: none lets clicks fall through to the textarea, which
   focuses it and triggers :focus-within to switch back to edit mode. */
.composer-inline-preview {
  position: absolute;
  top: 6px;       /* matches textarea padding-top */
  left: 0;
  right: 0;
  pointer-events: none;
  font-size: var(--text-lg);
  line-height: 20px;
  color: var(--text-primary);
  word-break: break-word;
  white-space: pre-wrap;
  overflow: hidden;
  max-height: 250px;
}

/* Strip paragraph margins that marked.parse adds */
.composer-inline-preview p {
  margin: 0;
}

/* Re-enable list bullets/numbers overridden by the base.css `ul, ol { list-style: none }` reset */
.composer-inline-preview ul,
.composer-inline-preview ol {
  padding-left: 1.4em;
}
.composer-inline-preview ul { list-style-type: disc; }
.composer-inline-preview ol { list-style-type: decimal; }

/* Switch to edit mode while the textarea has focus */
.composer-inline-input-wrap:focus-within .composer-inline-preview {
  display: none;
}

/* Unified pill — the form IS the composer box.
   Column layout: [strip?] [input] [toolbar] */
.chat-composer-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg-primary);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  transition: border-color 0.15s ease, background 0.15s ease;
  /* No overflow: hidden here — the emoji picker pops above the pill and
     must not be clipped. Corner clipping is handled on inner chips. */
  position: relative;
}

.chat-composer-form.drag-over {
  border-color: var(--bg-secondary);
  background: var(--bg-secondary);
}

/* Emoji picker — anchored above the pill, right-aligned */
.chat-composer-form .emoji-picker {
  position: absolute;
  bottom: calc(100% + var(--sp-sm));
  right: 0;
  width: 50%;
  max-width: none;
}

/* Input row — no background or border, just spacing */
.chat-composer-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-sm) 0 var(--sp-sm);
  min-width: 0;
}

.chat-composer-file-input {
  display: none;
}

/* Staged media preview strip — slides in at top of pill when an attachment
   is staged. Horizontal scroll for multiple chips. */
.chat-composer--mediaPreviewStrip {
  display: flex;
  flex-direction: row;
  gap: var(--sp-sm);
  overflow-x: auto;
  padding: var(--sp-sm) var(--sp-sm) 0 var(--sp-sm);
  scrollbar-width: none;
  /* Slide-up entrance animation */
  animation: composerStripIn 180ms ease;
}
.chat-composer--mediaPreviewStrip::-webkit-scrollbar {
  display: none;
}

@keyframes composerStripIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bottom toolbar row — attach | emoji | spacer | send */
.chat-composer-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--sp-xs) var(--sp-xs);
  gap: var(--sp-3xs);
}

.chat-composer-toolbar-spacer {
  flex: 1;
}

/* Attach (+) button — inside the pill, icon-only, no border */
.chat-composer-add {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 120ms ease, background 120ms ease;
}
.chat-composer-add:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.chat-composer--mediaPreview {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: var(--bg-subtle);
  overflow: hidden;
  width: 80px;
  height: 80px;
}

.chat-composer-pending-image-thumb {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 1px);
}

/* Invisible button wrapper around the composer thumbnail — opens lightbox on tap */
.chat-composer-pending-image-preview-btn {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.chat-composer-pending-image-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.chat-composer-pending-image-remove:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* Textarea — transparent, no border, fills the pill */
.chat-composer-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
  min-width: 0;
  resize: none;
  max-height: 250px;
  overflow-y: auto;
  line-height: 20px;
  padding: 6px 0;
  margin: 0;
}
.chat-composer-input::placeholder {
  color: var(--text-secondary);
}

/* Emoji button — inside the toolbar row */
.chat-composer-emoji-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-full);
  transition: color 120ms ease, background 120ms ease;
}
.chat-composer-emoji-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* Send button — inside the toolbar row, right side */
.chat-composer-send {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  /* Enabled state */
  background: var(--bg-primary-inverse);
  color: var(--text-primary-inverse);
}

.chat-composer-send:disabled {
  background: var(--bg-quarternary);
  color: var(--text-disabled);
  cursor: default;
}

/* ── Empty state ──────────────────────────────────────────────────────── */

.chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  padding: var(--sp-xl);
}

/* ── Header menu dropdown ── */

.chat-header-menu-wrapper {
  position: relative;
  margin-left: auto;
}

.chat-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: var(--sp-3xs);
  z-index: 50;
}

.chat-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--danger);
  cursor: pointer;
}
.chat-menu-item:hover {
  background: var(--bg-subtle);
}

/* ── Message attachments ── */

.chat-att {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-xs);
}

.chat-att:last-child { margin-bottom: 0; }

/* Image */
.chat-att-image {
  position: relative;
  max-width: 220px;
  overflow: hidden;
}

.chat-att-image-btn {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  width: 100%;
}

.chat-att-img {
  display: block;
  width: 100%;
  max-width: 100%; /* prevent full-res intrinsic size from breaking out of container */
  height: auto;
  border-radius: var(--radius-md);
}

/* Corner download button shared by image + video attachments. */
.chat-att-download {
  position: absolute;
  top: var(--sp-xs);
  right: var(--sp-xs);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 120ms ease;
}

.chat-att-image:hover .chat-att-download,
.chat-att-video:hover .chat-att-download,
.chat-att-download:focus-visible {
  opacity: 1;
}

.chat-att-download:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* Lightbox overlay for full-size image preview */
.chat-image-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
  padding: var(--sp-xl);
}

.chat-image-preview-img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.chat-image-preview-close {
  position: fixed;
  top: var(--sp-md);
  right: var(--sp-md);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chat-image-preview-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Video */
.chat-att-video {
  position: relative;
  max-width: 320px;
  overflow: hidden;
}

.chat-att-video-player {
  display: block;
  width: 100%;
  max-width: 100%; /* same fix as chat-att-img — cap at container width */
  height: auto;
  border-radius: var(--radius-md);
  background: #000;
}

.chat-att-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  color: white;
}

.chat-att-placeholder {
  width: 220px;
  height: 160px;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

/* File */
.chat-att-file {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.chat-att-file:hover {
  background: var(--bg-elevated, var(--bg-subtle));
}

.chat-att-file-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-att-file-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-att-file-size {
  color: var(--text-secondary);
}

/* Link preview */
.chat-att-link {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-primary);
  text-decoration: none;
  color: inherit;
  max-width: 260px;
}
.chat-att-link:hover {
  border-color: var(--border-primary);
  text-decoration: none;
}

.chat-att-link-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.chat-att-link-body {
  padding: var(--sp-xs) var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-att-link-title {
  font-size: var(--text-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-att-link-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Feed content card (Please-specific) */
.chat-att-content {
  display: flex;
  border: 1px solid var(--border-primary);
  text-decoration: none;
  color: inherit;
  max-width: 260px;
  gap: var(--sp-sm);
}
.chat-att-content:hover {
  border-color: var(--border-primary);
  text-decoration: none;
}

.chat-att-content-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-att-content-thumb-placeholder {
  width: 80px;
  height: 80px;
  background: var(--bg-subtle);
  flex-shrink: 0;
}

.chat-att-content-body {
  padding: var(--sp-xs) var(--sp-xs) var(--sp-xs) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chat-att-content-category {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.chat-att-content-title {
  font-size: var(--text-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-att-content-likes {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-tertiary);
}

/* Message text alongside attachments */
.chat-message-text {
  margin: 0;
}

.chat-message-text:has(+ .chat-att) {
  margin-bottom: var(--sp-xs);
}

/* Links in chat message text use the cobalt accent */

.chat-message-text a {
  color: var(--accent-cobalt);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.chat-message-text a:hover {
  text-decoration: underline;
}

/* ─── Video embed attachment ─────────────────────────────────────── */

/* Outer wrapper: left thread-line, gap, stacked content */
.chat-embed-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: calc(8px + var(--sp-xs));
  border-left: 2px solid var(--border);
  margin-bottom: var(--sp-xs);
}

/* When an embed follows message text, give it breathing room */
.chat-message-text + .chat-embed-wrapper {
  margin-top: 12px;
}

/* Brand logo — max-width 72px, display as block so the SVG scales */
.brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin-bottom: var(--sp-xs);
}

.brand-logo svg {
  width: 100%;
  height: auto;
}

.brand-logo-youtube {
  max-width: 72px;
}

.brand-logo-vimeo {
  max-width: 60px;
}

/* Header row: title + chevron toggle */
.chat-embed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs);
  margin-bottom: 12px;
}

.chat-embed-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent-cobalt);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
  min-width: 0;
}

.chat-embed-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.chat-embed-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

/* Collapsible area: iframe + link-out */
.chat-embed-collapsible {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  max-width: 420px;
  max-height: 500px;
  transition: max-height 0.3s ease;
}

.chat-embed-collapsible--collapsed {
  max-height: 0;
}

/* Responsive iframe container via aspect-ratio */
.chat-embed-player-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

.chat-embed-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-md);
}

/* "Open in YouTube" link-out row */
.chat-embed-linkout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--accent-cobalt);
  text-decoration: none;
  width: fit-content;
}

.chat-embed-linkout:hover {
  text-decoration: underline;
}

/* ============================================================================
   New Chat modal — contact picker overlay
   ========================================================================= */

.new-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* When this overlay renders inside `.chat-detail-overlay` (Add Members
     flow), it inherits the parent's `pointer-events: none` and clicks
     fall through to the chat-detail-modal beneath it. Re-enable here. */
  pointer-events: auto;
}

.new-chat-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: min(440px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.new-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-lg) var(--sp-lg) var(--sp-sm);
}

.new-chat-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.new-chat-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--sp-3xs);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.new-chat-close:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.new-chat-search {
  margin: 0 var(--sp-lg);
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
}
.new-chat-search:focus {
  border-color: var(--bg-secondary);
}
.new-chat-search::placeholder {
  color: var(--text-secondary);
}

.new-chat-contacts {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: var(--sp-sm) 0 0;
  padding: 0 var(--sp-sm);
  min-height: 200px;
  max-height: 360px;
}

.new-chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.new-chat-contact-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}
.new-chat-contact-row:hover {
  background: var(--bg-subtle);
}

.new-chat-contact-selected,
.new-chat-contact-selected:hover {
  background: rgba(var(--accent-rgb, 0, 0, 0), 0.06);
  border-color: rgba(var(--accent-rgb, 0, 0, 0), 0.2);
}

.new-chat-contact-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.new-chat-contact-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-chat-contact-username {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.new-chat-contact-check {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.new-chat-footer {
  padding: var(--sp-sm) var(--sp-lg) var(--sp-lg);
}

.new-chat-create {
  width: 100%;
  padding: var(--sp-xs) var(--sp-md);
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 120ms ease, background 120ms ease;
}
.new-chat-create:hover:not(:disabled) {
  opacity: 0.9;
}
.new-chat-create:disabled {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* ── Share to chat ── */

.share-chat-spinner {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  animation: share-chat-pulse 1s ease-in-out infinite;
}

.share-chat-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* ── Typing indicator ── */

.chat-typing {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 0 var(--sp-xl);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.chat-typing-dots {
  display: flex;
  gap: 3px;
}

.chat-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
  animation: typing-bounce 1.2s ease infinite;
}

.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Markdown in messages ── */

.chat-message-text {
  line-height: 1.5;
}

.chat-message-text p {
  margin: 0 0 var(--sp-xs) 0;
}
.chat-message-text p:last-child {
  margin-bottom: 0;
}

.chat-message-text code {
  font-family: "SF Mono", "Fira Code", monospace;
  color: #70C58F;
  font-size: 0.9em;
  background: rgba(0,0,0, .75);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

/* [data-theme="dark"] .chat-message-text code {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .chat-message-text code {
  background: rgba(0, 0, 0, 0.06);
} */

.chat-message-text pre {
  background: rgba(0, 0, 0, 0.06);
  padding: var(--sp-sm);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--sp-xs) 0;
}

[data-theme="dark"] .chat-message-text pre {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .chat-message-text pre {
  background: rgba(0, 0, 0, 0.06);
}

.chat-message-text pre code {
  background: none;
  padding: 0;
}

.chat-message-text strong { font-weight: 600; }


.chat-message-text ul,
.chat-message-text ol {
  margin: var(--sp-xs) 0;
  padding-left: var(--sp-lg);
}

.chat-message-text ul { list-style-type: disc; }
.chat-message-text ol { list-style-type: decimal; }

.chat-message-text blockquote {
  border-left: 3px solid var(--border-primary);
  padding-left: var(--sp-sm);
  color: var(--text-tertiary);
  margin: var(--sp-xs) 0;
}

.chat-message-text h1,
.chat-message-text h2,
.chat-message-text h3 {
  font-weight: 600;
  margin: var(--sp-xs) 0 var(--sp-3xs);
}
.chat-message-text h1 { font-size: var(--text-lg); }
.chat-message-text h2 { font-size: var(--text-base); }
.chat-message-text h3 { font-size: var(--text-sm); }

/* ── Face stack for group chat headers ── */

.chat-face-stack {
  display: flex;
  flex-direction: row;
}

.chat-face-stack .avatar,
.chat-face-stack .avatar-img {
  border: 2px solid var(--bg);
  margin-left: -8px;
}

.chat-face-stack .avatar:first-child,
.chat-face-stack .avatar-img:first-child {
  margin-left: 0;
}

.chat-header-ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--fg);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =============================================================================
   Message action menu
   ============================================================================= */

/* Ellipsis trigger — mirrors the .chat-reaction-trigger layout/reveal pattern */
.chat-message-menu-trigger {
  /* Absolutely positioned: centred on the top-right corner of the bubble */
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-elevated, var(--bg));
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  /* Fade in/out */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background 0.15s, color 0.15s;
  z-index: 1;
}
.chat-message-menu-trigger:hover {
  background: var(--bg-hover, var(--bg-secondary));
  color: var(--text-primary);
}

/* Show trigger on bubble hover — desktop only. Mobile uses the tap action
   sheet instead, so we leave the trigger permanently hidden there. */
@media (min-width: 769px) {
  .chat-message-row.sent .chat-message-bubble-wrapper:hover .chat-message-menu-trigger,
  .chat-message-row.sent .chat-message-bubble-wrapper:focus-within .chat-message-menu-trigger {
    opacity: 1;
    visibility: visible;
  }
}

/* Dropdown panel — appears above the bubble, right-aligned by default.
   positionMessageMenu() in dom.mjs adds --flip when the top would clip. */
.chat-message-menu-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  min-width: 184px;
  background: var(--bg-elevated, var(--bg));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--sp-2xs, 4px) 0;
  z-index: 200;
  overflow: hidden;
}

/* Flip downward when the message is near the top of the chat container */
.chat-message-menu-dropdown--flip {
  bottom: auto;
  top: calc(100% + 4px);
}

/* Bubble-wrapper is the positioning context for the trigger + dropdown */
.chat-message-bubble-wrapper {
  position: relative;
}

.chat-message-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm, 10px);
  width: 100%;
  padding: var(--sp-xs, 8px) var(--sp-sm, 12px);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm, 0.875rem);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.chat-message-menu-item:hover {
  background: var(--bg-hover, var(--bg-secondary));
}
.chat-message-menu-item--danger {
  color: var(--text-danger, #e53e3e);
}
.chat-message-menu-item--danger:hover {
  background: var(--bg-danger-hover, rgba(229, 62, 62, 0.08));
}

.chat-message-menu-divider {
  height: 1px;
  background: var(--border-primary);
  margin: var(--sp-2xs, 4px) 0;
}

/* =============================================================================
   Emoji-only bubble
   ============================================================================= */

.chat-message-bubble--emoji-only {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.chat-message-bubble--emoji-only .chat-message-text,
.chat-message-bubble--emoji-only .chat-message-text p {
  font-size: 32px;
  line-height: 1.2;
}

/* =============================================================================
   Inline edit state
   ============================================================================= */

/* ── Full-width editing on desktop ─────────────────────────────────────────
   When a sent message enters edit mode, expand the row to the full readable
   column width so the textarea has maximum writing space.
   Scoped to desktop — mobile edit state uses the composer + cancel bar.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  /* Expand the row itself — override max-width: 70% and align-self: flex-end */
  .chat-message-row.sent:has(.chat-message-bubble--editing) {
    max-width: 100%;
    width: 100%;
    align-self: stretch;
  }

  /* Stack grows to fill the row width minus the 28px avatar slot */
  .chat-message-row.sent:has(.chat-message-bubble--editing) .chat-message-stack {
    flex: 1;
    min-width: 0;
    align-items: stretch;
  }

  /* Bubble fills the stack; override the pre-measured min-width inline style */
  .chat-message-row.sent:has(.chat-message-bubble--editing) .chat-message-bubble--editing {
    width: 100%;
    min-width: 0 !important;
  }
}

.chat-message-bubble--editing {
  /* min-width is stamped as an inline style by setupEditTextarea() in dom.mjs
     to match the original message row's width, preventing the editing bubble
     from collapsing narrower than the message being edited. The textarea fills
     it via width: 100% and can grow beyond min-width for longer edits. */
  padding: 8px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.chat-edit-textarea {
  /* Fill the editing bubble's inner content area. Height is set dynamically
     by setupEditTextarea() to match the original content, then auto-grows/
     shrinks via an input listener — overflow: hidden prevents scrollbar flash
     during the height transition. */
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.5em;
  /* Cap initial height so image-only messages don't inflate the textarea to
     the image's dimensions before setupEditTextarea()'s rAF corrects it. */
  max-height: 40vh;
  padding: var(--sp-xs, 8px) var(--sp-sm, 12px);
  border: 1.5px solid var(--border-focus, var(--color-brand));
  border-radius: var(--radius-md, 10px);
  background: var(--bg);
  color: var(--text-primary);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  resize: none;
  outline: none;
  /* overflow is set imperatively by setupEditTextarea() to "hidden" before
     each scrollHeight read, ensuring correct measurement for auto-resize. */
}
.chat-edit-textarea::placeholder {
  color: var(--text-tertiary, var(--text-secondary));
}
.chat-edit-textarea:focus {
  border-color: var(--color-brand);
}

/* Attachment strip — sits snugly below the textarea */
.chat-edit-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs, 8px);
  margin-top: var(--sp-xs, 8px);
  padding: 0 var(--sp-xs, 8px);
}

/* Individual thumbnail wrapper — relative so the remove btn can be absolute */
.chat-edit-att-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 6px);
  overflow: visible; /* let the button bleed outside */
  max-width: 120px;
}

/* Image / video-poster thumbnail */
.chat-edit-att-thumb-img {
  display: block;
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm, 6px);
  object-fit: cover;
}

/* Placeholder for non-visual types (file, link without image, embed) */
.chat-edit-att-thumb-placeholder {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs, 4px);
  padding: var(--sp-xs, 8px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-xs, 0.8rem);
  color: var(--text-secondary);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✕ remove button — absolutely positioned at top-left, half outside */
.chat-edit-att-remove {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full, 999px);
  border: 1.5px solid var(--border-primary);
  background: var(--bg-elevated, var(--bg));
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: background 0.15s, color 0.15s;
}
.chat-edit-att-remove:hover {
  background: var(--text-danger, #e53e3e);
  color: #fff;
  border-color: var(--text-danger, #e53e3e);
}

.chat-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-xs, 8px);
  padding: var(--sp-2xs, 4px) var(--sp-xs, 8px) var(--sp-xs, 8px);
}

.chat-edit-cancel,
.chat-edit-save {
  padding: var(--sp-2xs, 4px) var(--sp-sm, 12px);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-xs, 0.8rem);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-primary);
  transition: background 0.1s;
}
.chat-edit-cancel {
  background: transparent;
  color: var(--text-secondary);
}
.chat-edit-cancel:hover {
  background: var(--bg-hover, var(--bg-secondary));
}
.chat-edit-save {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.chat-edit-save:hover {
  background: var(--bg-primary-inverse);
  color: var(--text-primary-inverse);
}

/* ── Deleted message tombstone ── */
.chat-message-deleted {
  padding: var(--sp-xs) 0;
}

.chat-message-deleted-text {
  padding: var(--sp-xs) var(--sp-md);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--text-tertiary);
  margin: 0;
  pointer-events: none;
  user-select: none;
}

/* ── (edited) label ── */
.chat-message-edited-label {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 2px;
  padding-left: 2px;
}

/* =============================================================================
   Delete confirmation modal
   ============================================================================= */

.chat-delete-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

.chat-delete-confirm-modal {
  background: var(--bg-elevated, var(--bg));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  padding: var(--sp-lg, 24px);
  max-width: 360px;
  width: calc(100vw - 32px);
}

.chat-delete-confirm-header {
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-sm, 10px);
}

/* Preview container — scrollable to handle tall images */
.chat-delete-confirm-preview {
  background: var(--bg-secondary, var(--bg));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm, 6px);
  padding: var(--sp-xs, 8px) var(--sp-sm, 12px);
  margin-bottom: var(--sp-md, 16px);
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs, 8px);
}

/* Text portion */
.chat-delete-confirm-preview-text {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Attachment list */
.chat-delete-confirm-preview-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs, 8px);
}

/* Base for every attachment type in the modal */
.chat-delete-att-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-xs, 8px);
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
}

/* Image */
.chat-delete-att-image {
  display: block;
}
.chat-delete-att-img {
  display: block;
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm, 6px);
  object-fit: cover;
}

/* Video — poster thumbnail or fallback label */
.chat-delete-att-video-label {
  display: flex;
  align-items: center;
  gap: var(--sp-xs, 8px);
  color: var(--text-tertiary);
}

/* File */
.chat-delete-att-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Link */
.chat-delete-att-link {
  gap: var(--sp-sm, 10px);
}
.chat-delete-att-link-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-xs, 4px);
  flex-shrink: 0;
}
.chat-delete-att-link-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Feed content */
.chat-delete-att-feed {
  gap: var(--sp-sm, 10px);
}
.chat-delete-att-feed-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-xs, 4px);
  flex-shrink: 0;
}
.chat-delete-att-feed-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Video embed */
.chat-delete-att-embed-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-delete-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-sm, 10px);
}

.chat-delete-confirm-cancel,
.chat-delete-confirm-delete {
  padding: var(--sp-xs, 8px) var(--sp-md, 16px);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-primary);
  transition: background 0.1s, opacity 0.1s;
}
.chat-delete-confirm-cancel {
  background: transparent;
  color: var(--text-secondary);
}
.chat-delete-confirm-cancel:hover {
  background: var(--bg-hover, var(--bg-secondary));
}
.chat-delete-confirm-delete {
  background: var(--text-danger, #e53e3e);
  color: #fff;
  border-color: var(--text-danger, #e53e3e);
}
.chat-delete-confirm-delete:hover {
  opacity: 0.88;
}

/* =============================================================================
   Success / info toast
   ============================================================================= */

.chat-toast {
  position: fixed;
  bottom: var(--sp-xl, 24px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-xs, 8px) var(--sp-md, 16px);
  background: var(--bg-elevated, var(--bg-primary));
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-sm, 0.875rem);
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: chat-toast-in 0.18s ease-out, chat-toast-out 0.3s ease-in 2.2s forwards;
}

/* ============================================================================
   Milkdown rich-text composer
   Milkdown mounts into .chat-composer-milkdown and injects .milkdown >
   .ProseMirror as the actual contenteditable surface.  We style those classes
   to match the previous textarea's look: transparent fill, same font, same
   padding, same scroll cap.
   ========================================================================= */

/* Mount point — flex item that stretches to fill the pill */
.chat-composer-milkdown {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  cursor: text;
  outline: none; /* suppress native focus ring on the wrapper div */
}

/* Before ProseMirror has mounted (.milkdown child is absent), show a
   placeholder so the composer looks like a text input. Once the editor
   lands it fills the div and this pseudo-element disappears. */
.chat-composer-milkdown:not(:has(.milkdown))::before {
  content: attr(data-placeholder);
  display: block;
  font-size: var(--text-sm);
  line-height: 20px;
  padding: 6px 0;
  color: var(--text-tertiary);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Milkdown's outer wrapper div */
.chat-composer-milkdown .milkdown {
  all: unset;
  display: block;
  width: 100%;
}

/* ProseMirror's contenteditable div — the actual editable surface */
.chat-composer-milkdown .ProseMirror {
  outline: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 20px;
  padding: 6px 0;
  margin: 0;
  min-height: 32px;
  max-height: 250px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Empty-state placeholder shown once Milkdown is mounted but the doc is
   empty. The `is-editor-empty` class is applied by our emptyPlaceholderPlugin
   decoration (milkdown_editor.mjs) whenever the doc has a single empty
   paragraph. We use float+height:0 (the Tiptap convention) so the trailing
   <br class="ProseMirror-trailingBreak"> ProseMirror inserts doesn't push
   the pseudo-element onto a second line. */
.chat-composer-milkdown .ProseMirror p.is-editor-empty:first-child::before,
.chat-composer-milkdown .ProseMirror:empty::before {
  content: "Type a message...";
  float: left;
  height: 0;
  color: var(--text-tertiary);
  pointer-events: none;
}

/* ProseMirror wraps bare text in <p> tags — strip the default margin */
.chat-composer-milkdown .ProseMirror p {
  margin: 0;
}

/* Inline formatting */
.chat-composer-milkdown .ProseMirror strong { font-weight: 700; }
.chat-composer-milkdown .ProseMirror em     { font-style: italic; }
.chat-composer-milkdown .ProseMirror code {
  font-family: monospace;
  font-size: 0.9em;
  background: var(--bg-secondary, rgba(0,0,0,0.08));
  border-radius: 3px;
  padding: 0.1em 0.3em;
}
.chat-composer-milkdown .ProseMirror a {
  color: var(--color-accent, #4a90d9);
  text-decoration: underline;
}

/* Lists */
.chat-composer-milkdown .ProseMirror ul,
.chat-composer-milkdown .ProseMirror ol {
  margin: 2px 0;
  padding-left: 1.4em;
}
.chat-composer-milkdown .ProseMirror ul { list-style-type: disc; }
.chat-composer-milkdown .ProseMirror ol { list-style-type: decimal; }
.chat-composer-milkdown .ProseMirror li { margin: 0; }

/* Block-level code fence */
.chat-composer-milkdown .ProseMirror pre {
  background: var(--bg-secondary, rgba(0,0,0,0.08));
  border-radius: var(--radius-sm, 4px);
  padding: 6px 10px;
  overflow-x: auto;
  font-family: monospace;
  font-size: 0.9em;
  margin: 4px 0;
}
.chat-composer-milkdown .ProseMirror pre code {
  background: none;
  padding: 0;
}

/* Blockquote */
.chat-composer-milkdown .ProseMirror blockquote {
  border-left: 3px solid var(--border-primary, #ccc);
  margin: 2px 0 2px 0;
  padding-left: 10px;
  color: var(--text-secondary);
}

/* Headings — keep them modest in a chat context */
.chat-composer-milkdown .ProseMirror h1,
.chat-composer-milkdown .ProseMirror h2,
.chat-composer-milkdown .ProseMirror h3 {
  font-weight: 700;
  margin: 2px 0;
  line-height: 1.3;
}

/* ProseMirror selection highlight */
.chat-composer-milkdown .ProseMirror ::selection {
  background: var(--color-accent-alpha, rgba(74,144,217,0.25));
}

/* ─── Reaction detail sheet content ─────────────────────────────────── */

/* Emoji tab bar */
.reaction-sheet__tabs {
  display: flex;
  gap: 12px; /* 12px between tabs */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: var(--sp-sm);
}
.reaction-sheet__tabs::-webkit-scrollbar {
  display: none;
}

.reaction-sheet__tab {
  display: inline-flex;
  align-items: center;
  gap: 2px; /* 2px between emoji and count */
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-sm); /* 8px */
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s ease;
}

.reaction-sheet__tab.active {
  background: var(--bg-secondary);
}

.reaction-sheet__tab-emoji {
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.reaction-sheet__tab-count {
  font-size: var(--text-lg); /* 16px */
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* User list */
.reaction-sheet__users {
  margin-top: 24px; /* 24px gap from tab bar */
  display: flex;
  flex-direction: column;
  gap: 16px; /* 16px between user rows */
}

.reaction-sheet__user {
  display: flex;
  align-items: center;
  gap: 8px; /* 8px between avatar and name */
}

.reaction-sheet__user-name {
  font-size: var(--text-base); /* 14px */
  color: var(--text-primary);
  font-weight: 400;
}

/* ─── Keyframe animations ────────────────────────────────────────────── */

@keyframes share-chat-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes typing-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes chat-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes chat-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ─── Media queries ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* On mobile: hide the back link, show the sidebar toggle in its place */
  .chat-back { display: none; }
  .chat-header-sidebar-toggle { display: inline-flex; }

  .chat-composer-form .emoji-picker {
    width: 100%;
    right: 0;
  }

  .chat-composer-input {
    font-size: var(--text-lg);
  }

  .chat-composer-milkdown .ProseMirror {
    font-size: var(--text-lg);
  }

  .chat-scroll-to-bottom {
    bottom: 142px;
  }
}

@media (max-width: 600px) {
  .chat-embed-collapsible {
    max-width: 320px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .chat-message-text code {
    background: rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme]) .chat-message-text pre {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* =============================================================================
   MOBILE MESSAGE ACTION SHEET
   ============================================================================= */

/* Override the default slide-up-sheet sizing for the action sheet — it
   should be auto-height rather than the fixed 70vh used by the reaction sheet. */
.msg-action-sheet {
  height: auto;
  min-height: unset;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ── Content wrapper ──────────────────────────────────────────────────────── */
.msg-action-sheet .slide-up-sheet__content {
  padding: var(--sp-md) var(--sp-sm);
  /* Needed so the absolutely-positioned picker panel clips to this box */
  position: relative;
  overflow: hidden;
}

/* When the sheet is in emoji-picker mode its content becomes a flex column
   so the picker can fill all remaining height below the header.
   NOTE: use double-class selector (.msg-action-sheet.msg-action-sheet--picker)
   for specificity (0,2,0) so it beats .slide-up-sheet { height: 70vh } from
   sheet.css, which is imported later in index.css and would otherwise win the
   same-specificity cascade. */
.msg-action-sheet.msg-action-sheet--picker {
  height: 85vh;
  min-height: unset;
}

.msg-action-sheet--picker .slide-up-sheet__content {
  flex: 1;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* ── Panel transitions (menu ↔ emoji picker) ──────────────────────────────── */
/* Both panels share the same transition so the swap is a smooth
   directional crossfade: normal slides out left while picker slides in
   from the right, and the reverse on the way back. */

.msg-action-sheet__panel {
  transition: opacity 230ms ease, transform 230ms ease;
}

/* Normal panel: visible by default */
.msg-action-sheet__panel--normal {
  opacity: 1;
  transform: translateX(0);
}
.msg-action-sheet--picker .msg-action-sheet__panel--normal {
  opacity: 0;
  transform: translateX(-28px);
  pointer-events: none;
}

/* Picker panel: hidden by default, absolutely fills the content box
   so it doesn't contribute to the sheet's auto-height in normal mode */
.msg-action-sheet__panel--picker {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
}
.msg-action-sheet--picker .msg-action-sheet__panel--picker {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ── "Quick reactions" header ─────────────────────────────────────────────── */
.msg-action-sheet__reactions-header {
  display: block;
  font-size: var(--text-lg);      /* 16px */
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--sp-sm);    /* 12px gap to emoji row */
}

/* ── Quick emoji row ──────────────────────────────────────────────────────── */
.msg-action-sheet__quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-xxl);   /* 32px gap to menu card */
}

.msg-action-sheet__quick-emoji {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  transition: background 0.12s ease;
}

.msg-action-sheet__quick-emoji:active {
  background: var(--bg-secondary);
}

.msg-action-sheet__quick-more {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  transition: background 0.12s ease;
}

.msg-action-sheet__quick-more > .icon {
  height: 24px;
  width: 24px;
}

.msg-action-sheet__quick-more:active {
  background: var(--bg-secondary);
}

/* ── Menu card ────────────────────────────────────────────────────────────── */
.msg-action-sheet__menu {
  background: var(--bg-body);
  border-radius: var(--radius-lg);  /* 16px */
  padding: var(--sp-sm);            /* 12px all-around */
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxl);               /* 32px between items */
}

/* ── Menu items ───────────────────────────────────────────────────────────── */
.msg-action-sheet__item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);                /* 16px icon → label */
  background: none;
  border: none;
  padding: var(--sp-3xs) 0;         /* 4px vertical padding */
  cursor: pointer;
  text-align: left;
  color: var(--text-secondary);     /* icon color */
  width: 100%;
}

.msg-action-sheet__item .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.msg-action-sheet__item span {
  font-size: var(--size-md);        /* 16px */
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.2;
}

/* Delete action — both icon and label are accent-red */
.msg-action-sheet__item--danger,
.msg-action-sheet__item--danger span {
  color: var(--accent-red);
}

/* ── In-sheet emoji picker header (back button + title) ──────────────────── */
.msg-action-sheet__picker-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0 var(--sp-md);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-primary);
}

.msg-action-sheet__picker-back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.msg-action-sheet__picker-back:active { opacity: 0.6; }

/* Override the floating-picker defaults when embedded inside the sheet */
.msg-action-sheet .emoji-picker,
.composer-emoji-sheet .emoji-picker {
  position: static;
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  animation: none;
}

/* ── Composer emoji sheet (mobile) ──────────────────────────────────────────
   Slide-up sheet used instead of the floating popover on mobile.
   Reuses .slide-up-sheet base styles; overrides height to fill most of the
   screen so the full emoji grid is comfortably browsable.
   ─────────────────────────────────────────────────────────────────────────── */
.composer-emoji-sheet.slide-up-sheet {
  height: 85vh;
  min-height: unset;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

.composer-emoji-sheet .slide-up-sheet__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ── Mobile edit cancel bar ────────────────────────────────────────────────
   Spans the full viewport width between the messages list and the composer.
   Appears only on mobile when a message is being edited (rendered by
   view_mobile_edit_cancel_bar; collapses to nothing when element.none()).
   ─────────────────────────────────────────────────────────────────────── */
.chat-cancel-edit__mobile {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .08);
  background: var(--bg-tertiary);
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-md);           /* 16px between icon and label */
  width: 100%;
  height: var(--size-3xl);     /* 40px total height */
  padding: 0 var(--sp-xl);
  background: var(--bg-body);
  border: none;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: var(--text-lg);   /* 16px */
  cursor: pointer;
  box-sizing: border-box;
}

.chat-cancel-edit__mobile svg {
  width: var(--size-xl);       /* 24px */
  height: var(--size-xl);
  flex-shrink: 0;
}

.chat-cancel-edit__mobile:active {
  opacity: 0.7;
}

/* "Editing message" tiny-time label variant */
.chat-message-tiny-time--editing {
  color: var(--accent-brand, var(--accent));
  font-style: italic;
}

/* ============================================================================
   Chat Detail — settings/info page for a single chat thread.

   Layout mirrors the chat module: full-height column, max-width centered.
   ========================================================================= */

/* ── Layout ──────────────────────────────────────────────────────────── */

.chat-detail {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* dynamic viewport */
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--sp-xl);
}

/* ── Header ──────────────────────────────────────────────────────────── */

.chat-detail-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--border-primary);
}

.chat-detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: var(--sp-3xs) var(--sp-xs);
  border-radius: var(--radius-md);
}
.chat-detail-back:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.chat-detail-heading {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* ── Avatar Section ──────────────────────────────────────────────────── */

.chat-detail-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-xl) 0;
}

.chat-detail-avatar-wrapper {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.chat-detail-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: block;
}

.chat-detail-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  border: 2px solid var(--bg);
}

.chat-detail-avatar-loading {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.chat-detail-avatar-file {
  display: none;
}

/* ── Name Section ────────────────────────────────────────────────────── */

.chat-detail-name-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) 0 var(--sp-md);
}

.chat-detail-name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.chat-detail-name-edit {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--sp-3xs);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  line-height: 1;
}
.chat-detail-name-edit:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.chat-detail-name-editing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) 0 var(--sp-md);
}

.chat-detail-name-input {
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
  text-align: center;
  width: 240px;
  max-width: 100%;
}
.chat-detail-name-input:focus {
  border-color: var(--bg-secondary);
}

.chat-detail-name-actions {
  display: flex;
  gap: var(--sp-xs);
}

.chat-detail-name-actions button {
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  border: 1px solid var(--border-primary);
  background: var(--bg);
  color: var(--text-primary);
}
.chat-detail-name-actions button:hover {
  background: var(--bg-subtle);
}

/* ── Members Section ─────────────────────────────────────────────────── */

.chat-detail-members {
  padding: var(--sp-md) 0;
}

.chat-detail-members-header {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding-bottom: var(--sp-sm);
}

.chat-detail-member-count {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: 500;
}

.chat-detail-add-member {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--sp-3xs);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
}
.chat-detail-add-member:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.chat-detail-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

.chat-detail-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-md);
}
.chat-detail-member-row:hover {
  background: var(--bg-subtle);
}

.chat-detail-member-info,
.chat-detail-member-link {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.chat-detail-member-info:hover,
.chat-detail-member-link:hover {
  text-decoration: none;
}

.chat-detail-member-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-detail-remove-member {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: var(--sp-3xs);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  line-height: 1;
}
.chat-detail-remove-member:hover {
  background: var(--bg-subtle);
  color: var(--danger);
}

/* ── Actions ─────────────────────────────────────────────────────────── */

.chat-detail-actions {
  padding: var(--sp-xl) 0;
  text-align: center;
}

.chat-detail-action-destructive {
  width: 100%;
  padding: var(--sp-xs) var(--sp-md);
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.chat-detail-action-destructive:hover {
  background: var(--danger);
  color: #ffffff;
}

/* ── Confirm Dialog ──────────────────────────────────────────────────── */

.chat-detail-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Rendered as a sibling of `.chat-detail-modal` inside
     `.chat-detail-overlay`, which sets `pointer-events: none`. Without
     re-enabling here, clicks fall through to the modal beneath and the
     Confirm/Cancel buttons aren't even hoverable. (Same fix as
     `.new-chat-overlay` in commit 30a8050.) */
  pointer-events: auto;
}

.chat-detail-confirm-dialog {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-xl);
  width: min(400px, calc(100vw - 48px));
}

.chat-detail-confirm-dialog p {
  margin: 0 0 var(--sp-lg);
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

.chat-detail-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-xs);
}

.chat-detail-confirm-cancel {
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.chat-detail-confirm-cancel:hover {
  background: var(--bg-subtle);
}

.chat-detail-confirm-confirm {
  padding: var(--sp-xs) var(--sp-md);
  border: none;
  border-radius: var(--radius-md);
  background: var(--danger);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.chat-detail-confirm-confirm:hover {
  opacity: 0.9;
}

/* ── Modal overlay ───────────────────────────────────────────────────── */

/* Outer container — fills the viewport, sits above everything. The
   overlay itself has no background or pointer-events; all of that lives
   on the backdrop and modal children. */
.chat-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Full-screen backdrop — captures click-outside-to-close. */
.chat-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  cursor: default;
}

/* The modal card. */
.chat-detail-modal {
  position: relative;
  z-index: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: min(480px, calc(100vw - 48px));
  max-height: min(640px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

/* Scrollable body area. */
.chat-detail-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--sp-xl) var(--sp-xl);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-detail-modal-body::-webkit-scrollbar {
  display: none;
}

/* Close button (X) in modal header. */
.chat-detail-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--sp-3xs);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
}
.chat-detail-close:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* Override header layout when it's inside the modal (flex row with
   space-between so title + close button sit at opposite ends). */
.chat-detail-modal .chat-detail-header {
  border-bottom: 1px solid var(--border-primary);
  padding: var(--sp-md) var(--sp-xl);
  flex-shrink: 0;
}

/* Member-count badge inside the modal. */
.chat-detail-member-you {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: 2px var(--sp-xs);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-detail-member-role {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.chat-detail-member-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: var(--sp-3xs);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.chat-detail-member-remove:hover {
  background: var(--bg-subtle);
  color: var(--danger);
}

.chat-detail-members-section {
  padding: var(--sp-md) 0;
}

.chat-detail-members-header {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding-bottom: var(--sp-sm);
}

.chat-detail-members-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

.chat-detail-name-save,
.chat-detail-name-cancel {
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  border: 1px solid var(--border-primary);
  background: var(--bg);
  color: var(--text-primary);
}
.chat-detail-name-save:hover,
.chat-detail-name-cancel:hover {
  background: var(--bg-subtle);
}

/* ── Chat Header Additions ───────────────────────────────────────────── */

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-left: auto;
}

.chat-header-detail-link {
  color: var(--text-tertiary);
  padding: var(--sp-xs);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-header-detail-link:hover {
  color: var(--text-primary);
}

/* Notifications feature styles. */

/* ── Mobile header (hidden on desktop) ───────────────────────────────── */

.notifications-mobile-header {
  display: none;
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.notifications {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxl);
  padding: 52px var(--sp-xl) 0 var(--sp-xl);
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

@media (min-width: 768px) {
  .notifications {
    width: 54vw;
    max-width: 720px;
  }
}

.notifications-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-shrink: 0;
}

.notifications-title {
  font-size: var(--text-4xl);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.notifications-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--sp-xs);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.notifications-menu-btn:hover {
  background: var(--bg-secondary);
}

.notifications-list-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip; /* clip in-flow horizontal overflow without creating a scroll
                       container on x — so absolutely positioned row buttons and
                       popovers are not clipped the way overflow:hidden would do */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.notifications-list-wrap::-webkit-scrollbar {
  display: none;
}

/* ── Sections ───────────────────────────────────────────────────────── */

.notifications-section {
  display: flex;
  flex-direction: column;
}

.notifications-section + .notifications-section {
  margin-top: var(--sp-xl);
}

/* Clickable row that holds the heading + chevron */
.notifications-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0 0 var(--sp-xs) 0;
  cursor: pointer;
  color: inherit;
  width: 100%;
}

.notifications-section-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Chevron inherits text-tertiary from the button */
.notifications-section-header > svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

/* ── Collapsible section body ────────────────────────────────────────── */

/* The grid row trick: animate between 1fr (natural height) and 0fr.
   overflow:clip clips in-flow content for the collapse animation just like
   overflow:hidden, but unlike hidden it does NOT create a scroll container —
   so absolutely positioned descendants (row popovers) escape it freely. */
.notifications-section-body {
  display: grid;
  grid-template-rows: 1fr;
  /* minmax(0, 1fr) caps the implicit column at the container width.
     Without this the track defaults to minmax(auto, auto) which lets
     overflowing child content expand the column beyond its parent. */
  grid-template-columns: minmax(0, 1fr);
  overflow: clip;
  transition: grid-template-rows 0.25s ease;
}

.notifications-section-body--collapsed {
  grid-template-rows: 0fr;
}

/* Direct child must have min-height: 0 for the 0fr row to actually
   collapse to zero (otherwise the browser respects the min-content size). */
.notifications-section-body > .notifications-list {
  min-height: 0;
}

.notifications-list {
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* prevent rows from bleeding outside the list on narrow viewports */
}

/* ── Row ────────────────────────────────────────────────────────────── */

/* Notification row: position:relative so the badge can be absolutely
   placed in the left-padding zone. Padding is intentionally asymmetric:
   12px left leaves exactly enough room for the 16px badge container. */
.notification {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-sm) var(--sp-md) var(--sp-xl);
  position: relative;
  transition: background 0.1s;
  box-sizing: border-box;
  max-width: 100%;
}

.notification:hover {
  background: var(--bg-subtle);
}

/* ── Badge ── */

/* 16px hit area sits in the 12px left-padding zone.  Dot is hidden by
   default; .notification-unread makes it red. Layout never shifts. */
.notification-badge {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: transparent;
}

.notification-unread .notification-badge-dot {
  background: var(--accent-red);
}

/* ── Media ── */

.notification-media {
  width: 82px;
  flex-shrink: 0;
}

/* Feed item thumbnail */
.notification-media-thumb {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.notification:nth-child(odd) .notification-media-thumb {
  transform: rotate(-2deg);
}

.notification:nth-child(even) .notification-media-thumb {
  transform: rotate(2deg);
}

/* Icon fallback when no image is available */
.notification-media-icon-fallback {
  width: 82px;
  height: 82px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

/* ── Body (the <a> wrapping time + title + text) ── */

.notification-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* <a> resets */
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

/* In select mode the body is a div, not an anchor — same layout. */
.notification-body--div {
  pointer-events: none; /* the outer div handles clicks in select mode */
}

.notification-time {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-text {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-quarternary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Menu wrap ── */

/* Always the last flex child — flex-shrink: 0 guarantees it's never
   squeezed off screen. position: relative anchors the desktop popover. */
.notification-row-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.notification-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--sp-xs);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.notification-menu-btn:hover {
  background: var(--bg-secondary);
}

/* ── Desktop popover (hidden on mobile via media query) ── */

.notification-row-popover-wrap {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
}

.notification-row-popover {
  min-width: 180px;
  background: var(--bg-elevated, var(--bg-primary));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Danger variant for the Delete item */
.notifications-popover-item--danger {
  color: var(--accent-red, #e5534b);
}

.notifications-popover-item--danger:hover {
  background: color-mix(in srgb, var(--accent-red, #e5534b) 10%, transparent);
}

/* ── Mobile row action sheet (hidden on desktop) ── */

/* The backdrop and sheet are position:fixed so they escape the row's
   stacking context. Both are display:none on desktop and shown only in
   the mobile media query below.
   Two-class selectors (.slide-up-sheet-backdrop.notif-sheet-backdrop and
   .slide-up-sheet.notif-action-sheet) have higher specificity than the
   single-class rules in sheet.css, so they win regardless of load order. */
.slide-up-sheet-backdrop.notif-sheet-backdrop,
.slide-up-sheet.notif-action-sheet {
  display: none;
}

/* Auto-height sheet (no fixed 70vh like the reaction sheet). */
.notif-action-sheet {
  height: auto;
  min-height: unset;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

.notif-action-sheet .slide-up-sheet__content {
  padding: var(--sp-md) var(--sp-sm);
  display: flex;
  flex-direction: column;
}

.notif-sheet-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--sp-sm) var(--sp-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.notif-sheet-item:hover {
  background: var(--bg-secondary);
}

.notif-sheet-item--danger {
  color: var(--accent-red, #e5534b);
}

.notif-sheet-item--danger:hover {
  background: color-mix(in srgb, var(--accent-red, #e5534b) 10%, transparent);
}

/* ── Popover menu ───────────────────────────────────────────────────── */

/* Wraps the ⋮ button + popover so the popover can be positioned relative
   to this container. */
.notifications-menu-wrap {
  position: relative;
}

/* Full-screen invisible backdrop — closes the menu on outside click. */
.notifications-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
}

/* The dark card that floats below the ⋮ button. */
.notifications-popover-wrap {
  position: absolute;
  top: calc(100% + var(--sp-xs));
  right: 0;
  z-index: 11;
}

.notifications-popover {
  position: relative;
  z-index: 11; /* must exceed backdrop's z-index: 10 within the same stacking context */
  background: var(--bg-elevated, var(--bg-secondary));
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle, var(--border-primary));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: var(--sp-xs) 0;
  min-width: 180px;
  overflow: hidden;
}

.notifications-popover-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--sp-sm) var(--sp-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.notifications-popover-item:hover {
  background: var(--bg-secondary);
}

/* ── Per-section select header (replaces chevron header in select mode) */

.notifications-section-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-xs);
}

.notifications-select-all {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.notifications-select-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.notifications-select-action-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  background: none;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--sp-3xs) var(--sp-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.notifications-select-action-btn:hover:not(:disabled) {
  background: var(--bg-secondary);
}

.notifications-select-action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.notifications-select-action-btn--danger {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.notifications-select-action-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-red) 10%, transparent);
}

.notifications-select-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--sp-xs);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.notifications-select-cancel-btn:hover {
  background: var(--bg-secondary);
}

/* ── Select mode rows ───────────────────────────────────────────────── */

/* Card-style wrapper for rows in select mode */
.notification-selectable {
  border-radius: var(--radius-lg);
  margin: 2px var(--sp-xs);
  transition: background 0.1s;
}

.notification-selected {
  background: var(--bg-subtle);
}

/* ── Checkbox ────────────────────────────────────────────────────────── */

.notif-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-primary);
  background: var(--bg);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.notif-checkbox:checked {
  background: var(--accent-primary, var(--text-primary));
  border-color: var(--accent-primary, var(--text-primary));
}

.notif-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--bg);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── Empty / error states ───────────────────────────────────────────── */

.notifications-empty,
.notifications-loading,
.notifications-error {
  padding: var(--sp-xxl) var(--sp-md);
  text-align: center;
  color: var(--text-tertiary);
}

/* ── Load more ──────────────────────────────────────────────────────── */

.notifications-load-more {
  align-self: center;
  margin: var(--sp-md);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: var(--bg);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.notifications-load-more:hover {
  background: var(--bg-subtle);
}

.notifications-load-more:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Sidebar unread badge (used by shell.css) ───────────────────────── */

.sidebar-badge {
  margin-left: auto;
  background: var(--accent-red);
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: var(--sp-3xs) var(--sp-xs);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  min-width: 18px;
  text-align: center;
}

.sidebar-collapsed .sidebar-badge {
  display: none;
}

/* ── Mobile overrides (≤ 768px) ─────────────────────────────────────── */

@media (max-width: 768px) {
  .notifications {
    padding: 0 var(--sp-md);
    gap: var(--sp-lg);
  }

  /* Tighten row padding on narrow screens. */
  .notification {
    padding: 16px 12px 16px 12px;
    gap: var(--sp-sm);
  }

  /* Shrink the media slot; override inline dimensions from the avatar helper. */
  .notification-media {
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: var(--radius-md);
  }

  .notification-media .avatar,
  .notification-media .avatar-img,
  .notification-media img {
    width: 52px !important;
    height: 52px !important;
  }

  .notification-media-icon-fallback {
    width: 52px;
    height: 52px;
  }

  /* Hide desktop popover; show mobile sheet instead. */
  .notification-row-popover-wrap {
    display: none;
  }

  .slide-up-sheet-backdrop.notif-sheet-backdrop {
    display: block;
  }

  .slide-up-sheet.notif-action-sheet {
    display: flex;
  }

  /* Desktop header hidden on mobile. */
  .notifications-header {
    display: none;
  }

  /* Mobile header: back button | centred title | menu. */
  .notifications-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-sm) var(--sp-xs);
    position: relative;
    flex-shrink: 0;
  }

  .notifications-mobile-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
  }

  .notifications-mobile-menu-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .notifications-mobile-menu-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }

  .notifications-mobile-menu-btn:hover {
    background: var(--bg-subtle);
  }
}

/* ── Toast ───────────────────────────────────────────────────────────── */

.notifications-toast {
  position: fixed;
  bottom: var(--sp-xl, 24px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-xs, 8px) var(--sp-md, 16px);
  background: var(--bg-elevated, var(--bg-primary));
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-sm, 0.875rem);
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: chat-toast-in 0.18s ease-out, chat-toast-out 0.3s ease-in 2.2s forwards;
}

/* Search screen — query input + results grid. Results reuse .feed-grid
   and .feed-card from feed.css. */

.search {
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-xl) 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header row: back button + pill input ─────────────────────────────── */

.search-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xl);
}

.search-back-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border-primary);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease;
}

.search-back-btn:hover {
  background: var(--bg-subtle);
}

.search-input {
  flex: 1;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--border-primary);
  border-radius: 9999px;
  background: var(--bg-subtle);
  color: var(--text-primary);
  font: inherit;
  outline: none;
  transition: border-color 120ms ease;
}

.search-input::placeholder {
  color: var(--text-tertiary);
}

.search-input:focus {
  border-color: var(--bg-secondary);
}

/* ── Scrollable body ──────────────────────────────────────────────────── */

.search-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--sp-xl);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.search-body::-webkit-scrollbar {
  display: none;
}

/* ── Empty / prompt state ─────────────────────────────────────────────── */

.search-prompt {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  color: var(--text-tertiary);
}

.search-prompt-icon {
  opacity: 0.4;
}

.search-prompt-text {
  margin: 0;
  font-size: var(--text-base);
}

.search-empty,
.search-loading,
.search-error {
  padding: var(--sp-3xl) var(--sp-md);
  text-align: center;
  color: var(--text-tertiary);
}

.search-error {
  color: var(--danger, var(--text-primary));
}

.search-result-count {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding: var(--sp-md) 0;
}

/* Monogram avatar — circular badge with a letter on a deterministic
   desaturated background. Sizes are set inline via the `avatar()` helper
   so one CSS class supports arbitrary px sizes. */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  font-weight: 600;
  font-family: var(--font-sans);
  line-height: 1;
  color: #ffffff;
  user-select: none;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Muted/desaturated palette — picked so they sit quietly next to the
   monochrome icon set. Tuned for both light and dark modes. */
.avatar-color-1 { background: #8b7aa8; } /* dusty violet */
.avatar-color-2 { background: #7a9a8e; } /* sage */
.avatar-color-3 { background: #b58863; } /* terracotta */
.avatar-color-4 { background: #6e8caf; } /* slate blue */
.avatar-color-5 { background: #c08a6a; } /* warm tan */
.avatar-color-6 { background: #8a9a5b; } /* olive */
.avatar-color-7 { background: #a66e7e; } /* mauve */
.avatar-color-8 { background: #5f8a8b; } /* teal */

[data-theme="dark"] .avatar-color-1 { background: #6a5a82; }
[data-theme="dark"] .avatar-color-2 { background: #5a7568; }
[data-theme="dark"] .avatar-color-3 { background: #8a6547; }
[data-theme="dark"] .avatar-color-4 { background: #526b86; }
[data-theme="dark"] .avatar-color-5 { background: #8f6550; }
[data-theme="dark"] .avatar-color-6 { background: #687543; }
[data-theme="dark"] .avatar-color-7 { background: #7f5361; }
[data-theme="dark"] .avatar-color-8 { background: #476668; }

.avatar-img {
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

/* ─── Media queries ──────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .avatar-color-1 { background: #6a5a82; }
  :root:not([data-theme]) .avatar-color-2 { background: #5a7568; }
  :root:not([data-theme]) .avatar-color-3 { background: #8a6547; }
  :root:not([data-theme]) .avatar-color-4 { background: #526b86; }
  :root:not([data-theme]) .avatar-color-5 { background: #8f6550; }
  :root:not([data-theme]) .avatar-color-6 { background: #687543; }
  :root:not([data-theme]) .avatar-color-7 { background: #7f5361; }
  :root:not([data-theme]) .avatar-color-8 { background: #476668; }
}

.avatar-error {
  position: relative;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.avatar-error-badge {
  position: absolute;
  bottom: -1px;
  right: -1px;
  background: var(--color-error, #e53935);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Error state + skeleton loaders — shared across all features. */

/* ── Error state ─────────────────────────────────────────────── */

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-3xl) var(--sp-xl);
  text-align: center;
  color: var(--text-tertiary);
}
.error-state .icon { color: var(--danger); }
.error-state-title {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}
.error-state-message {
  font-size: var(--text-sm);
  max-width: 320px;
  margin: 0;
}

/* ── Skeleton loaders ────────────────────────────────────────── */

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  break-inside: avoid;
  margin-bottom: var(--sp-sm);
}

.skeleton-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  animation: skeleton-pulse 1.5s ease infinite;
}

.skeleton-hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  animation: skeleton-pulse 1.5s ease infinite;
}

.skeleton-line {
  height: 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease infinite;
}

.skeleton-line-title { width: 70%; }
.skeleton-line-short { width: 40%; }
.skeleton-line-flex { flex: 1; }
.skeleton-line-full { width: 100%; }
.skeleton-line-medium { width: 60%; }

.skeleton-circle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  animation: skeleton-pulse 1.5s ease infinite;
  flex-shrink: 0;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
}

/* ── Boot screen ─────────────────────────────────────────────── */

.boot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
  color: var(--text-primary);
}

.boot-spinner {
  display: flex;
  gap: var(--sp-xs);
}

.boot-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
  animation: boot-pulse 1.4s ease-in-out infinite both;
}
.boot-dot:nth-child(2) { animation-delay: 0.16s; }
.boot-dot:nth-child(3) { animation-delay: 0.32s; }

/* ─── Keyframe animations ────────────────────────────────────────────── */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes boot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Profile page — avatar, stats, follow button, content placeholder. */

.profile {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-xxl);
  box-sizing: border-box;
}
.profile::-webkit-scrollbar { display: none; }

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-md);
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  padding-bottom: var(--sp-xl);
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.profile-name {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.profile-username {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

.profile-badges {
  display: flex;
  gap: var(--sp-xs);
  align-items: center;
}

.profile-badge {
  font-size: var(--text-xs);
  padding: 2px var(--sp-xs);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.profile-follow-btn {
  padding: var(--sp-xs) var(--sp-xl);
  border-radius: var(--radius-full);
  border: 1px solid var(--bg-secondary);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.profile-follow-btn:hover { opacity: 0.9; }

.profile-follow-btn-following {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-primary);
}
.profile-follow-btn-following:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.profile-stats {
  display: flex;
  gap: var(--sp-xl);
  justify-content: center;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.profile-stat-value {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.profile-stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.profile-content-placeholder {
  padding: var(--sp-3xl) var(--sp-xl);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.profile-loading,
.profile-error {
  padding: var(--sp-xxl);
  text-align: center;
  color: var(--text-tertiary);
}

.profile-back,
.profile-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  text-decoration: none;
}
.profile-back:hover,
.profile-settings:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  text-decoration: none;
}

.profile-requests-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  margin: var(--sp-md) auto;
  width: fit-content;
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.profile-requests-btn:hover {
  background: var(--bg-elevated, var(--bg-subtle));
}

.profile-stats {
  margin-bottom: var(--sp-xl);
}

.profile-private {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-3xl) var(--sp-xl);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.profile-empty {
  padding: var(--sp-3xl) var(--sp-xl);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.profile-load-more {
  margin-top: var(--sp-xl);
}

/* ── Followers/Following list ─────────────────────── */

.followers {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--sp-md);
  box-sizing: border-box;
}
.followers::-webkit-scrollbar { display: none; }

.followers-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.followers-back {
  color: var(--fg-default);
}

.followers-tabs {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xl);
}

.followers-tab {
  padding: var(--sp-xs) var(--sp-md);
  background: var(--bg-tertiary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: normal;
}
.followers-tab-active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
}

.followers-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.followers-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.followers-row-info {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.followers-row-name {
  font-weight: 500;
  font-size: var(--text-sm);
}

.followers-row-username {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.followers-request-actions {
  display: flex;
  gap: var(--sp-xs);
}

.followers-accept-btn {
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  border: none;
  font-size: var(--text-xs);
  cursor: pointer;
}

.followers-reject-btn {
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-full);
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  cursor: pointer;
}

.followers-empty {
  padding: var(--sp-xxl) 0;
  text-align: center;
  color: var(--text-tertiary);
}

/* Settings page styles */

.settings {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-xl);
}

.settings-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xl);
}

/* Sidebar toggle is mobile-only in the settings header. */
@media (min-width: 769px) {
  .settings-header .sidebar-collapse-button {
    display: none;
  }
}


.settings-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0;
}

/* ── Profile header ─────────────────────────────────────────────────── */

.settings-profile {
  display: flex;
  align-items: center;
  gap: var(--sp-xl); /* 24px */
  margin-bottom: var(--sp-xxl);
}

.settings-profile-avatar {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 32px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: default; /* only interactive on mobile */
}

/* Force avatar img/span to fill the clipping container */
.settings-profile-avatar .avatar,
.settings-profile-avatar img.avatar {
  width: 130px !important;
  height: 130px !important;
  border-radius: 0 !important;
  display: block;
}

/* Camera overlay — hidden on desktop, shown on mobile via media query */
.settings-avatar-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none; /* label handles the click */
}

.settings-profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  min-width: 0;
}

.settings-profile-name {
  font-size: var(--text-4xl); /* 32px */
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.1;
}

.settings-profile-username {
  font-size: 24px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.2;
}

.settings-change-photo-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--sp-3xl); /* 40px */
  padding: var(--sp-md) var(--sp-sm); /* 16px 12px */
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: var(--text-lg); /* 16px */
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.settings-change-photo-btn:hover {
  filter: brightness(0.95);
}

.settings-avatar-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Form ───────────────────────────────────────────────────────────── */

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl); /* 24px */
}

/* ── Row ────────────────────────────────────────────────────────────── */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: var(--sp-md); */
  width: 100%;
}

.settings-row--btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
}

.settings-row-left {
  display: flex;
  align-items: center;
  gap: var(--sp-sm); /* 12px between icon and label */
  flex-shrink: 0;
  width: 172px;
}

.settings-row-icon {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.settings-row-label {
  font-size: var(--text-lg); /* 16px */
  font-weight: 400;
  color: var(--text-secondary);
}

.settings-row-input {
  flex: 1;
  height: var(--sp-3xl); /* 40px */
  padding: 0 var(--sp-sm);
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: var(--text-lg);
  color: var(--text-primary);
  outline: none;
  min-width: 0;
}

.settings-row-input:focus {
  background: var(--bg-tertiary, var(--bg-secondary));
}

.settings-row-input:disabled {
  color: var(--text-tertiary);
  cursor: default;
}

.settings-row-right {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-left: auto;
  color: var(--text-tertiary);
}

.settings-row-value {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--text-secondary);
}

/* ── Privacy / visibility pill toggle ───────────────────────────────── */

.settings-privacy-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 0;
  cursor: pointer;
  font: inherit;
  transition: background 200ms ease, border-color 200ms ease;
}

/* Disabled (non-interactive) state */
.settings-privacy-toggle:disabled {
  opacity: 0.45;
  cursor: default;
}

/* On state (right / public) */
.settings-privacy-toggle--public {
  background: var(--bg-secondary);
  border-color: transparent;
}

.settings-privacy-toggle--public .settings-privacy-indicator {
  background: var(--bg);
}

/* Sliding indicator — sits behind the option labels (z-index 0).
   Default position: left half (Private active).
   Squish: when arriving at a side, the leading edge moves first and the
   trailing edge follows with a short delay, creating a stretch-then-snap
   feel. Each state declares the transition for arriving at that state. */
.settings-privacy-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-full);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
  z-index: 0;
  /* Arriving at Private (left): left edge leads, right follows */
  transition:
    left  240ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    right 240ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
}

/* Public active: slide indicator to right half */
.settings-privacy-toggle--public .settings-privacy-indicator {
  left: 50%;
  right: 3px;
  /* Arriving at Public (right): right edge leads, left follows */
  transition:
    right 240ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    left  240ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
}

.settings-privacy-opt {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 180ms ease, font-weight 180ms ease;
}

.settings-privacy-opt--active {
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Error ──────────────────────────────────────────────────────────── */

.settings-error {
  padding: var(--sp-sm);
  margin-bottom: var(--sp-md);
  background: var(--danger-subtle, rgba(220, 38, 38, 0.08));
  color: var(--danger);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* ── Push notifications row ─────────────────────────────────────────── */

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-xs) 0;
}

.settings-toggle-label {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--text-secondary);
}

.settings-push-status,
.settings-push-denied,
.settings-push-error {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.settings-push-denied,
.settings-push-error {
  color: var(--danger, #c53030);
}

.settings-push-btn,
.settings-push-disable-btn {
  padding: var(--sp-3xs) var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.settings-push-btn:hover,
.settings-push-disable-btn:hover {
  background: var(--bg-subtle);
}

.settings-push-active {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ── Save button ────────────────────────────────────────────────────── */

.settings-save-btn {
  align-self: flex-start;
  padding: var(--sp-xs) var(--sp-md);
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.settings-save-btn:hover {
  filter: brightness(0.95);
}

.settings-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Divider ────────────────────────────────────────────────────────── */

.settings-divider {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--sp-md) 0;
}

/* ── Telegram link row ──────────────────────────────────────────────── */

.settings-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-xs);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

.settings-link-row:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}

.settings-link-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
}

/* ── Sign-out ───────────────────────────────────────────────────────── */

.settings-signout-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-md);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.settings-signout-btn:hover {
  color: var(--danger);
  background: var(--danger-subtle, rgba(220, 38, 38, 0.08));
}

/* ─── Mobile overrides (≤ 768px) ────────────────────────────────────── */

@media (max-width: 768px) {
  /* Shrink avatar, switch to radius-md, show camera overlay */
  .settings-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    cursor: pointer;
  }

  .settings-profile-avatar .avatar,
  .settings-profile-avatar img.avatar {
    width: 72px !important;
    height: 72px !important;
  }

  /* Show the camera overlay so users know it's tappable */
  .settings-avatar-overlay {
    display: flex;
  }

  /* Larger name down to 2xl, username to 16px */
  .settings-profile-name {
    font-size: var(--text-2xl); /* 22px */
  }

  .settings-profile-username {
    font-size: 16px;
  }

  /* Hide the separate "Change Photo" button — avatar tap handles it */
  .settings-change-photo-btn {
    display: none;
  }
}

/* AI Preferences page styles */

.ai-prefs {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-xl);
}

.ai-prefs-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0 0 var(--sp-xl) 0;
}

.ai-prefs-error {
  padding: var(--sp-sm);
  margin-bottom: var(--sp-md);
  background: var(--danger-subtle, rgba(220, 38, 38, 0.08));
  color: var(--danger);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.ai-prefs-section {
  margin-bottom: var(--sp-xxl);
}

.ai-prefs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-sm);
}

.ai-prefs-section-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.ai-prefs-section-description {
  margin: 0 0 var(--sp-sm);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.ai-prefs-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  padding: var(--sp-3xs) var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.ai-prefs-add-btn:hover {
  background: var(--bg-subtle);
}

.ai-prefs-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.ai-prefs-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.ai-prefs-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

.ai-prefs-item-intent {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  word-wrap: break-word;
}

.ai-prefs-item-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-wrap: wrap;
}

.ai-prefs-item-actions {
  display: flex;
  gap: var(--sp-3xs);
  flex-shrink: 0;
}

.ai-prefs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.ai-prefs-icon-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.ai-prefs-icon-btn-danger:hover {
  background: var(--danger-subtle, rgba(220, 38, 38, 0.08));
  color: var(--danger);
}

.ai-prefs-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-xs);
  border-radius: var(--radius-full, 999px);
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
}

.ai-prefs-empty {
  padding: var(--sp-md);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  border: 1px dashed var(--border-primary);
  border-radius: var(--radius-md);
}

/* Form */
.ai-prefs-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  margin-bottom: var(--sp-sm);
}

.ai-prefs-form-row {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.ai-prefs-form-row > .ai-prefs-field {
  flex: 1;
  min-width: 140px;
}

.ai-prefs-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

.ai-prefs-field-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
}

.ai-prefs-field-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: calc(-1 * var(--sp-3xs));
}

.ai-prefs-input,
.ai-prefs-select,
.ai-prefs-textarea {
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg);
}

.ai-prefs-input:focus,
.ai-prefs-select:focus,
.ai-prefs-textarea:focus {
  outline: none;
  border-color: var(--bg-secondary);
}

.ai-prefs-textarea {
  min-height: 96px;
  resize: vertical;
}

.ai-prefs-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-xs);
}

.ai-prefs-btn {
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.ai-prefs-btn-primary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.ai-prefs-btn-primary:hover {
  opacity: 0.9;
}

.ai-prefs-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-prefs-btn-secondary {
  background: var(--bg);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ai-prefs-btn-secondary:hover {
  background: var(--bg-subtle);
}

/* Processing badge on feed cards */

.feed-card-processing {
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  padding: var(--sp-3xs) var(--sp-sm);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.feed-card-processing-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border-primary);
  border-top-color: var(--text-tertiary);
  border-radius: 50%;
  animation: processing-spin 0.8s linear infinite;
}

.feed-card-processing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: processing-pulse 1.5s ease-in-out infinite;
}

.feed-card-processing-error .feed-card-processing-dot {
  background: var(--danger);
  animation: none;
}

.feed-card-processing-error {
  color: var(--danger);
}

.feed-card-processing-warning {
  color: #d97706;
}

.feed-card-processing-warning .feed-card-processing-dot {
  background: #d97706;
  animation: none;
}

/* Processing toast */

.processing-toast {
  position: fixed;
  bottom: var(--sp-xl);
  right: var(--sp-xl);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  width: min(300px, calc(100vw - 2 * var(--sp-xl)));
}

/* Each toast pill */
.processing-toast-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  animation: toast-slide-in 0.2s ease-out;
}

/* Top row: [icon+name] on the left, [status] on the right */
.processing-toast-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}

/* Icon and filename grouped, flex row, gap 8px */
.processing-toast-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Icon container fills parent height, centers the SVG */
.processing-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  color: #ffffff;
  flex-shrink: 0;
}

.processing-toast-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.processing-toast-status {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  min-width: 36px;
  justify-content: flex-end;
}

.processing-toast-done {
  color: #22c55e;
}

.processing-toast-error-text {
  color: #f87171;
}

.processing-toast-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: processing-spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* Progress bar */
.processing-toast-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.processing-toast-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

.processing-toast-bar--indeterminate .processing-toast-bar-fill {
  width: 40%;
  background: var(--accent-blue);
  animation: processing-indeterminate 1.4s ease-in-out infinite;
}

.processing-toast-bar--done .processing-toast-bar-fill {
  width: 100%;
  background: #22c55e;
  transition: width 0.3s ease;
}

.processing-toast-bar--error .processing-toast-bar-fill {
  width: 100%;
  background: #f87171;
}

/* ─── Keyframe animations ────────────────────────────────────────────── */

@keyframes processing-spin {
  to { transform: rotate(360deg); }
}

@keyframes processing-indeterminate {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(150%); }
  100% { transform: translateX(150%); }
}

@keyframes processing-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Recommended-users row — horizontally scrollable cards at the top of the
   For You and Following feed tabs. */
.rec-users-section {
  margin-bottom: var(--sp-xl);
  transition: margin-bottom 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rec-users-section--hidden {
  margin-bottom: 0;
}

.rec-users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-sm);
}

.rec-users-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.rec-users-toggle {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
  padding: var(--sp-3xs) var(--sp-xs);
  /* Stack both labels in the same grid cell so the button auto-sizes
     to the label width; overflow clips the translateY slide */
  display: inline-grid;
  overflow: hidden;
}
.rec-users-toggle:hover { color: var(--text-primary); }

/* Both labels sit in grid cell 1/1 and slide past each other */
.rec-users-toggle-label {
  grid-row: 1;
  grid-column: 1;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 180ms ease;
}

/* Section visible → "Hide" centred, "Show" waiting below */
.rec-users-toggle-label--hide {
  transform: translateY(0%);
  opacity: 1;
}
.rec-users-toggle-label--show {
  transform: translateY(100%);
  opacity: 0;
}

/* Section hidden → "Show" rolls into view, "Hide" exits upward */
.rec-users-section--hidden .rec-users-toggle-label--hide {
  transform: translateY(-100%);
  opacity: 0;
}
.rec-users-section--hidden .rec-users-toggle-label--show {
  transform: translateY(0%);
  opacity: 1;
}

/* ── Body collapse / expand ─────────────────────────────────────────── */

.rec-users-body {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  opacity: 1;
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 260ms ease;
}

.rec-users-section--hidden .rec-users-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* Inner scroll needs min-height: 0 for the grid collapse to work;
   its own overflow-x: auto is unaffected and horizontal scroll still works */
.rec-users-scroll {
  min-height: 0;
  display: flex;
  gap: var(--sp-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--sp-md);
}
.rec-users-scroll::-webkit-scrollbar { display: none; }

.rec-users-card {
  flex: 0 0 140px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.rec-users-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  text-decoration: none;
  color: inherit;
}

.rec-users-name {
  font-weight: 500;
  font-size: var(--text-sm);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.rec-users-handle {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-users-follow {
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-size: var(--text-xs);
  font-family: inherit;
  cursor: pointer;
}
.rec-users-follow:hover { opacity: 0.9; }
.rec-users-follow[disabled] { opacity: 0.6; cursor: default; }

.rec-users-follow-following,
.rec-users-follow-requested {
  background: transparent;
  color: var(--text-primary);
}
.rec-users-follow-requested {
  border-color: var(--text-tertiary);
  color: var(--text-tertiary);
}

/* Skeletons */
.rec-users-card-skeleton { gap: var(--sp-xs); align-items: center; }
.rec-users-skeleton-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg-muted, #e5e5e5);
}
.rec-users-skeleton-line {
  height: 10px; width: 80%; border-radius: var(--radius-sm, 4px);
  background: var(--bg-muted, #e5e5e5);
}
.rec-users-skeleton-line-short { width: 50%; }
.rec-users-skeleton-button {
  margin-top: var(--sp-xs);
  width: 80%; height: 24px; border-radius: var(--radius-full);
  background: var(--bg-muted, #e5e5e5);
}

/* client/styles/emoji_picker.css — scoped to the new chat emoji picker. */

/* Compact pill (hover state on bubbles) */
.emoji-picker-pill {
  position: absolute;
  top: -12px;
  right: -4px;
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  padding: var(--sp-3xs) var(--sp-xs);
  background: var(--bg);
  border: 1px solid var(--border-subtle, var(--border-primary));
  border-radius: var(--radius-full);
  box-shadow: var(--shadow);
  z-index: 10;
  animation: emoji-picker-pill-open 0.12s ease-out;
}

@keyframes emoji-picker-pill-open {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-message-row.sent .emoji-picker-pill {
  right: auto;
  left: -4px;
}

.emoji-picker-pill-emoji {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  transition: background 0.1s ease, transform 0.1s ease;
}

.emoji-picker-pill-emoji:hover {
  background: var(--bg-subtle);
  transform: scale(1.15);
}

.emoji-picker-overflow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-tertiary);
  border-radius: var(--radius-full);
  cursor: pointer;
  padding: 0;
}

.emoji-picker-overflow:hover {
  background: var(--bg-subtle);
  color: var(--fg);
}

/* Drill-down panel — fixed positioning applied inline by view */
.emoji-picker {
  position: fixed;
  width: 336px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 100;
  overflow: hidden;
  animation: emoji-picker-open 0.12s ease-out;
}

/* Category strip at top */
.emoji-picker-category-strip {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-md);
  gap: var(--sp-xs);
}

.emoji-picker-category-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3xs);
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-full);
}

.emoji-picker-category-btn:hover,
.emoji-picker-category-btn-active {
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.emoji-picker-category-btn:focus-visible {
  outline: 2px dashed var(--text-tertiary);
  outline-offset: 2px;
}

/* Search */
.emoji-picker-search-wrap {
  padding: var(--sp-md) var(--sp-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
}

.emoji-picker-search {
  flex: 1;
  min-width: 0;
  padding: var(--sp-xs) var(--sp-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.emoji-picker-search::placeholder {
  color: var(--text-secondary);
}

.emoji-picker-search:focus-visible {
  outline: 2px solid var(--bg-secondary);
  outline-offset: 0;
}

/* Global skin-tone button */
.emoji-picker-tone-global-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  color: inherit;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.emoji-picker-tone-global-btn:hover {
  background: var(--bg-subtle);
}

.emoji-picker-tone-global-btn--active,
.emoji-picker-tone-global-btn--active:hover {
  background: var(--bg-subtle);
  border-color: var(--border-primary);
}

.emoji-picker-tone-global-btn:focus-visible {
  outline: 2px dashed var(--text-tertiary);
  outline-offset: 2px;
}

/* Global tone selector panel — wraps to its own row inside search-wrap */
.emoji-picker-global-tone-panel {
  flex-basis: 100%;
  display: flex;
  gap: var(--sp-3xs);
  padding-top: var(--sp-3xs);
  animation: emoji-picker-tone-open 0.08s ease-out;
}

.emoji-picker-global-tone-swatch {
  flex: 1;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.emoji-picker-global-tone-swatch:hover {
  background: var(--bg-subtle);
}

.emoji-picker-global-tone-swatch--active {
  border-color: var(--fg);
}

.emoji-picker-global-tone-swatch--active:hover {
  background: var(--bg-subtle);
}

.emoji-picker-global-tone-swatch:focus-visible {
  outline: 2px dashed var(--text-tertiary);
  outline-offset: 2px;
}

/* Scroll region */
.emoji-picker-scroll {
  flex: 1;
  min-height: 0; /* required: without this a flex item won't shrink below its
                    content height, making scrollHeight === clientHeight and
                    disabling programmatic + touch scroll entirely */
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 0 var(--sp-md) var(--sp-md);
}

.emoji-picker-section {
  padding-top: var(--sp-sm);
}

.emoji-picker-section-header {
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  padding: var(--sp-xs) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  margin: 0;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3xs);
}

.emoji-picker-cell {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 22px;
  cursor: pointer;
  padding: 0;
}

.emoji-picker-cell:hover,
.emoji-picker-cell:focus-visible {
  background: var(--bg-subtle);
}

.emoji-picker-cell:focus-visible {
  outline: none;
}

/* Empty search state */
.emoji-picker-empty {
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  padding: var(--sp-xl) var(--sp-md);
}

.emoji-picker-results {
  padding-top: var(--sp-sm);
}

/* Tone popout */
.emoji-picker-tone-popout {
  position: fixed;
  display: flex;
  gap: var(--sp-3xs);
  padding: var(--sp-3xs) var(--sp-xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow);
  z-index: 110;
  animation: emoji-picker-tone-open 0.08s ease-out;
}

.emoji-picker-tone-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
}

.emoji-picker-tone-btn:hover {
  background: var(--bg-subtle);
}

/* Reduced motion */

/* ─── Keyframe animations ────────────────────────────────────────────── */

@keyframes emoji-picker-pill-open {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes emoji-picker-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes emoji-picker-tone-open {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── GIF tab button ─────────────────────────────────────────────────── */

/* GIF text button sits in the same strip as emoji category buttons */
.emoji-picker-gif-btn {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 var(--sp-3xs);
  min-width: 36px;
}

/* ─── GIF panel ──────────────────────────────────────────────────────── */

/* 2-column masonry-style grid */
.emoji-picker-gif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-xs);
  padding: var(--sp-xs);
}

.emoji-picker-gif-cell {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.1s;
}

.emoji-picker-gif-cell:hover {
  opacity: 0.85;
}

.emoji-picker-gif-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Loading spinner */
.emoji-picker-gif-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.emoji-picker-gif-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border-primary);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: emoji-picker-gif-spin 0.7s linear infinite;
}

@keyframes emoji-picker-gif-spin {
  to { transform: rotate(360deg); }
}

/* Empty state */
.emoji-picker-gif-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ─── Media queries ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .emoji-picker-cell {
    font-size: var(--text-4xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-picker-scroll {
    scroll-behavior: auto !important;
  }

  .emoji-picker,
  .emoji-picker-tone-popout,
  .emoji-picker-global-tone-panel,
  .emoji-picker-pill,
  .emoji-picker-pill-emoji,
  .emoji-picker-cell,
  .emoji-picker-category-btn,
  .emoji-picker-tone-global-btn,
  .emoji-picker-global-tone-swatch,
  .emoji-picker-gif-spinner {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Slide-up sheet (iOS-style bottom drawer) ───────────────────────────────
   Reusable component for mobile bottom-sheet patterns.

   Usage:
     .slide-up-sheet-backdrop  — full-screen dim/blur behind the sheet; tapping
                                  it should dispatch a dismiss message.
     .slide-up-sheet           — the sheet panel itself. Fixed at the bottom,
                                  70vh default, draggable up to ~95vh via JS.
     .slide-up-sheet__handle-bar — drag target at the top of the sheet.
     .slide-up-sheet__content    — scrollable content area inside the sheet.

   The JS `attachSheetDrag(sheetId, onDismiss)` in dom.mjs manages drag
   behaviour and calls onDismiss when released below the 40vh threshold.
──────────────────────────────────────────────────────────────────────────── */

.slide-up-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 400;
  animation: sheet-backdrop-in 0.25s ease forwards;
}

.slide-up-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70vh;
  max-height: 95vh;
  min-height: 30vh;
  background: var(--bg-primary);
  border-radius: 20px 20px 0 0;
  z-index: 401;
  display: flex;
  flex-direction: column;
  /* 16px horizontal padding per spec — uses --sp-md */
  padding: 0 var(--sp-md);
  overflow: hidden;
  color: var(--text-primary);
  animation: sheet-slide-in 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  will-change: height;
}

/* The handle-bar div is the full 48px touch target; the visible pill is
   rendered via ::after so we can keep the hit area large without affecting
   the pill's visual size. overflow: hidden on the sheet clips anything
   outside, so we use a tall div + flex centering instead of negative margins. */
.slide-up-sheet__handle-bar {
  position: relative;
  width: 100%;
  height: 28px;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.slide-up-sheet__handle-bar::after {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.slide-up-sheet__handle-bar:active {
  cursor: grabbing;
}

.slide-up-sheet__content {
  flex: 1;
  overflow-y: auto;
  /* Prevent content scroll from bubbling during drag. */
  overscroll-behavior: contain;
}

/* ─── Keyframe animations ────────────────────────────────────────────────── */

@keyframes sheet-slide-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}

@keyframes sheet-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Modal / overlay system — ui/modal.gleam
   ============================================================
   CSS custom properties for runtime tuning (set via inline style):
     --mo   overlay opacity  (default 0.85)
     --mb   backdrop blur    (default 4px)

   Z-index ladder:
     detail confirm overlays  ~200
     this modal system        900
     chat image lightbox     1000
   ============================================================ */

/* ── root container ──────────────────────────────────────── */

.mo-root {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  /* CSS vars with fallbacks */
  --mo: 0.85;
  --mb: 4px;
}

/* ── backdrop ─────────────────────────────────────────────── */

.mo-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.mo-backdrop-dark {
  background: rgba(0, 0, 0, var(--mo));
  backdrop-filter: blur(var(--mb));
  -webkit-backdrop-filter: blur(var(--mb));
}

/* ── panel ────────────────────────────────────────────────── */

.mo-panel {
  position: relative; /* sits above .mo-backdrop in stacking context */
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.mo-fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}

.mo-large {
  width: min(90vw, 1200px);
}

.mo-medium {
  width: min(92vw, 560px);
}

.mo-small {
  width: min(92vw, 380px);
}

/* ── close button ─────────────────────────────────────────── */

.mo-close-btn {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  z-index: 1;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}

.mo-close-btn:hover {
  background: rgba(0, 0, 0, 0.55);
}

/* ── image lightbox ───────────────────────────────────────── */

.mo-lightbox {
  /* single-div layout: full overlay, image centred inside */
  cursor: zoom-out;
}

.mo-lightbox-img {
  position: relative; /* above the overlay's own background */
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
  /* prevent the image dragging from firing a click-to-close */
  user-select: none;
  -webkit-user-drag: none;
}

/* For the lightbox single-div pattern the background IS the overlay */
.mo-lightbox {
  background: rgba(0, 0, 0, var(--mo));
  backdrop-filter: blur(var(--mb));
  -webkit-backdrop-filter: blur(var(--mb));
}

/* ── mobile adjustments ───────────────────────────────────── */

@media (max-width: 640px) {
  .mo-panel {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    max-height: 96vh;
  }

  .mo-medium,
  .mo-large {
    width: 100vw;
    align-self: flex-end;
  }
}