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

/* Design tokens — spacing, typography, radii, shadows, colors.
   Color structure:
     1. :root, [data-theme="light"]  — light (default + explicit)
     2. [data-theme="dark"]          — dark explicit
     3. @media prefers-color-scheme  — OS-preference catch-all (no data-theme) */


/* ─── Static tokens (theme-independent) ──────────────────────────────────── */

: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;


  /* brand gradient */
  --fill-gradient:linear-gradient(180deg, #62D475 0%, #58BE68 100%);
}


/* ─── Light theme — default + explicit ───────────────────────────────────── */

:root,
[data-theme="light"] {

  /* Background */
  --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);
  --bg-0:                   rgba(255,255,255,0);
  --bg-70:                  rgba(255,255,255,.7);
  --bg-80:                  rgba(255,255,255,.8);
  --bg-70-inverse:          rgba(0,0,0,.7);
  --bg-80-inverse:          rgba(0,0,0,.8);


  /* Fill — base (solid) + elevated (translucent overlay) */
  --fill-primary:                     #CCCCCC;
  --fill-primary-inverse:             #333333;
  --fill-secondary:                   #E0E0E0;
  --fill-secondary-inverse:           #1F1F1F;
  --fill-tertiary:                    #EDEDED;
  --fill-tertiary-inverse:            #121212;
  --fill-elevated-primary:            rgba(120, 120, 120, 0.20);
  --fill-elevated-primary-inverse:    rgba(120, 120, 128, 0.36);
  --fill-elevated-secondary:          rgba(120, 120, 128, 0.16);
  --fill-elevated-secondary-inverse:  rgba(120, 120, 128, 0.32);
  --fill-elevated-tertiary:           rgba(118, 118, 128, 0.12);
  --fill-elevated-tertiary-inverse:   rgba(118, 118, 128, 0.24);
  --fill-elevated-quaternary:         rgba(116, 116, 128, 0.08);
  --fill-elevated-quaternary-inverse: rgba(118, 118, 128, 0.18);

  /* Brand gradients */
  --fill-gradient-green: linear-gradient(180deg, #62D475 0%, #58BE68 100%);

  /* Text */
  --text-primary:             #0D0D0D;
  --text-primary-inverse:     #FFFFFF;
  --text-secondary:           #5D5D5D;
  --text-secondary-inverse:   rgba(255, 255, 255, 0.5);
  --text-tertiary:            #676767;
  --text-tertiary-inverse:    rgba(255, 255, 255, 0.4);
  --text-quarternary:         #9B9B9B;
  --text-quarternary-inverse: rgba(255, 255, 255, 0.3);
  --text-disabled:            rgba(0, 0, 0, 0.2);
  --text-disabled-inverse:    rgba(255, 255, 255, 0.2);

  /* Border */
  --border:           #e5e5e5;
  --border-strong:    #d4d4d4;
  --border-primary:   #f2f2f2;
  --border-secondary: rgba(13, 13, 13, 0.1);
  --border-tertiary:  rgba(13, 13, 13, 0.05);

  /* Accent */
  --accent-blue:   #3b60e4;
  --accent-cobalt: #3b60e4;
  --accent-red:    #E50900;

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

  /* Deprecated aliases — remove once consumers are migrated */
  --bg:         #ffffff;
  --bg-subtle:  #f5f5f4;
  --bg-elevated: #ffffff;
  --fg:         #0a0a0a;
  --fg-muted:   #737373;
  --fg-subtle:  #a3a3a3;
  --accent:     #0a0a0a;
  --accent-fg:  #ffffff;
  --danger:     #dc2626;

  color-scheme: light;
}


/* ─── Dark theme — explicit ───────────────────────────────────────────────── */

[data-theme="dark"] {

  /* Background */
  --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);
  --bg-0:                   rgba(0,0,0,0);
  --bg-70:                  rgba(0,0,0,.7);
  --bg-80:                  rgba(0,0,0,.8);
  --bg-70-inverse:          rgba(255,255,255,.7);
  --bg-80-inverse:          rgba(255,255,255,.8);  

  /* Fill — base (solid) + elevated (translucent overlay) */
  --fill-primary:                     #333333;
  --fill-primary-inverse:             #CCCCCC;
  --fill-secondary:                   #1F1F1F;
  --fill-secondary-inverse:           #E0E0E0;
  --fill-tertiary:                    #121212;
  --fill-tertiary-inverse:            #EDEDED;
  --fill-elevated-primary:            rgba(120, 120, 128, 0.36);
  --fill-elevated-primary-inverse:    rgba(120, 120, 120, 0.20);
  --fill-elevated-secondary:          rgba(120, 120, 128, 0.32);
  --fill-elevated-secondary-inverse:  rgba(120, 120, 128, 0.16);
  --fill-elevated-tertiary:           rgba(118, 118, 128, 0.24);
  --fill-elevated-tertiary-inverse:   rgba(118, 118, 128, 0.12);
  --fill-elevated-quaternary:         rgba(118, 118, 128, 0.18);
  --fill-elevated-quaternary-inverse: rgba(116, 116, 128, 0.08);

  /* Text */
  --text-primary:             #FFFFFF;
  --text-primary-inverse:     #0D0D0D;
  --text-secondary:           rgba(255, 255, 255, 0.5);
  --text-secondary-inverse:   rgba(0, 0, 0, 0.5);
  --text-tertiary:            #AFAFAF;
  --text-tertiary-inverse:    rgba(0, 0, 0, 0.4);
  --text-quarternary:         #9B9B9B;
  --text-quarternary-inverse: rgba(0, 0, 0, 0.3);
  --text-disabled:            rgba(255, 255, 255, 0.2);
  --text-disabled-inverse:    rgba(0, 0, 0, 0.2);

  /* Border */
  --border:           rgba(255, 255, 255, 0.3);
  --border-strong:    rgba(255, 255, 255, 0.5);
  --border-primary:   #0D0D0D;
  --border-secondary: rgba(13, 13, 13, 0.05);
  --border-tertiary:  rgba(255, 255, 255, 0.05);

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

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:     0 2px 8px rgba(0, 0, 0, 0.4);

  /* Deprecated aliases — remove once consumers are migrated */
  --bg:         #0a0a0a;
  --bg-subtle:  #171717;
  --bg-elevated: #1c1c1c;
  --fg:         #fafafa;
  --fg-muted:   #a3a3a3;
  --fg-subtle:  #737373;
  --accent:     #fafafa;
  --accent-fg:  #0a0a0a;
  --danger:     #f87171;

  color-scheme: dark;
}


/* ─── OS dark preference — catch-all when no data-theme is set ────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {

    /* Background */
    --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);
    --bg-0:                   rgba(0,0,0,0);
    --bg-70:                  rgba(0,0,0,.7);
    --bg-80:                  rgba(0,0,0,.8);
    --bg-70-inverse:          rgba(255,255,255,.7);
    --bg-80-inverse:          rgba(255,255,255,.8);

    /* Fill — base (solid) + elevated (translucent overlay) */
    --fill-primary:                     #333333;
    --fill-primary-inverse:             #CCCCCC;
    --fill-secondary:                   #1F1F1F;
    --fill-secondary-inverse:           #E0E0E0;
    --fill-tertiary:                    #121212;
    --fill-tertiary-inverse:            #EDEDED;
    --fill-elevated-primary:            rgba(120, 120, 128, 0.36);
    --fill-elevated-primary-inverse:    rgba(120, 120, 120, 0.20);
    --fill-elevated-secondary:          rgba(120, 120, 128, 0.32);
    --fill-elevated-secondary-inverse:  rgba(120, 120, 128, 0.16);
    --fill-elevated-tertiary:           rgba(118, 118, 128, 0.24);
    --fill-elevated-tertiary-inverse:   rgba(118, 118, 128, 0.12);
    --fill-elevated-quaternary:         rgba(118, 118, 128, 0.18);
    --fill-elevated-quaternary-inverse: rgba(116, 116, 128, 0.08);

    /* Text */
    --text-primary:             #FFFFFF;
    --text-primary-inverse:     #0D0D0D;
    --text-secondary:           rgba(255, 255, 255, 0.5);
    --text-secondary-inverse:   rgba(0, 0, 0, 0.5);
    --text-tertiary:            #AFAFAF;
    --text-tertiary-inverse:    rgba(0, 0, 0, 0.4);
    --text-quarternary:         #9B9B9B;
    --text-quarternary-inverse: rgba(0, 0, 0, 0.3);
    --text-disabled:            rgba(255, 255, 255, 0.2);
    --text-disabled-inverse:    rgba(0, 0, 0, 0.2);

    /* Border */
    --border:           rgba(255, 255, 255, 0.3);
    --border-strong:    rgba(255, 255, 255, 0.5);
    --border-primary:   #0D0D0D;
    --border-secondary: rgba(13, 13, 13, 0.05);
    --border-tertiary:  rgba(255, 255, 255, 0.05);

    /* Accent */
    --accent-blue:   #7992EC;
    --accent-cobalt: #7992EC;
    --accent-red:    #FF4B44;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:     0 2px 8px rgba(0, 0, 0, 0.4);

    /* Deprecated aliases — remove once consumers are migrated */
    --bg:         #0a0a0a;
    --bg-subtle:  #171717;
    --bg-elevated: #1c1c1c;
    --fg:         #fafafa;
    --fg-muted:   #a3a3a3;
    --fg-subtle:  #737373;
    --accent:     #fafafa;
    --accent-fg:  #0a0a0a;
    --danger:     #f87171;

    color-scheme: dark;
  }
}

/* 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 field focus. The browser zooms whenever a
   focused field's font-size is < 16px, so floor every text-entry surface at
   16px on mobile — native controls (input / textarea / select) AND the
   contenteditable editors (Milkdown / ProseMirror), which the bare element
   selectors miss. `!important` is required because component classes set
   sub-16px sizes that win on specificity; `max(16px, 1em)` only ever raises,
   never shrinks. The `:not()`s preserve the few intentionally-large fields
   (phone entry, reminder title) and the off-screen file-input sizing hack.
   This intentionally does not disable pinch-zoom. */
@media (max-width: 768px) {
  input:not(.auth-phone-input):not(.capture-file-input-hidden),
  textarea:not(.nr-title),
  select,
  [contenteditable="true"],
  .ProseMirror {
    font-size: max(16px, 1em) !important;
  }

  /* Placeholder text. Real ::placeholder inherits the (now ≥16px) field size;
     the editors render their placeholder as a ::before pseudo-element that
     carries its own font-size, so floor those too. */
  .chat-composer-milkdown::before,
  .capture-text-editor .ProseMirror p.is-editor-empty::before {
    font-size: max(16px, 1em) !important;
  }
}

/* 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;
  display: flex;
  align-items: center;
  justify-content: space-between;
  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;
}

/* "+" action in a section header (e.g. Messages → new chat). */
.sidebar-section-header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.sidebar-section-header-action:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .sidebar-section-header-action:hover {
  background: rgba(255, 255, 255, 0.04);
}

.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);
}

/* Brand-gradient icon tint (e.g. New Reminder). The base .icon paints
   currentColor through an alpha mask, so a background-image gradient
   shows through the same mask. */
.sidebar-row-icon-gradient-green .icon {
  background: var(--fill-gradient-green);
}

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

.sidebar-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.31px;
  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;
}
/* Timeline sections: header + its own masonry grid, stacked in the wrap. */
.feed-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.feed-section-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.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;
}

/* Tiles with no media (calendar tiles; text tiles without a thumbnail)
   reserve a slim band when a manifest badge is present, so the
   absolute-positioned `.feed-badge-pill` has room to sit without overlapping
   the card body. The pill is ~32px tall plus its top inset, so 48px clears it. */
.feed-card-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: flex-start;
  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-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.feed-card-header-timestamp {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}

/* ---------- 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 */
/* Please-agent comment preview on the tile. */
.feed-card-agent {
  margin: var(--sp-xs) 0 0;
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--surface-secondary, rgba(127, 127, 127, 0.06));
  border-radius: var(--radius-sm, 8px);
}
.feed-card-agent-label {
  display: block;
  font-size: var(--text-2xs, 0.625rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 2px;
}
.feed-card-agent-text {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-card-agent-pending {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-tertiary);
}

.feed-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--sp-sm);
}

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

/* Comments count */
.feed-card-comments {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.feed-card-comments-icon {
  display: inline-flex;
  align-items: center;
}

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

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

/* 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: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg-70);
  color: var(--text-primary);
  /* border: 1px solid var(--border-primary); */
  width: fit-content;
  backdrop-filter: blur(12px);
}

.feed-card-calendar .feed-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
}

.feed-card-calendar .feed-badge-pill::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cg clip-path=%22url(%23clip0_17956_8822)%22%3E %3Cpath d=%22M8.94719 14.0525C8.94751 10.1868 12.081 7.05296 15.9467 7.05276C19.8124 7.05282 22.9459 10.1866 22.9464 14.0522C22.9461 17.918 19.8119 21.0525 15.9461 21.0525C12.0806 21.052 8.94744 17.918 8.94719 14.0525ZM13.267 9.41761C11.9629 10.303 11.1607 11.6717 10.9324 13.1377L10.7741 12.8935C10.5787 12.5917 10.1817 12.5092 9.88702 12.7092C9.59259 12.9094 9.51248 13.3158 9.7076 13.6177L10.9007 15.4642C11.0961 15.7657 11.4934 15.847 11.788 15.6471L13.5891 14.4244C13.8837 14.2242 13.9646 13.8173 13.7693 13.5154C13.5739 13.2139 13.1768 13.1313 12.8822 13.3311L12.1495 13.8272C12.2035 12.532 12.8405 11.2816 13.9744 10.5117C15.8561 9.2345 18.3932 9.76175 19.64 11.6895C20.8862 13.6174 20.3705 16.2158 18.4891 17.4931C17.1863 18.3773 15.569 18.3973 14.282 17.6836C13.9712 17.5114 13.583 17.6298 13.4145 17.9479C13.2463 18.2664 13.3615 18.6648 13.6723 18.8373C15.3588 19.7727 17.4837 19.7496 19.1964 18.5871C21.6675 16.9096 22.3443 13.4966 20.7073 10.9648C19.0698 8.43296 15.7382 7.74014 13.267 9.41761ZM4.04413 3.97441C3.97353 3.56673 4.24666 3.1788 4.65408 3.1075C5.0622 3.03673 5.45075 3.31015 5.52152 3.71827L5.68865 4.67945L11.0449 3.74977L10.8786 2.78805C10.808 2.38009 11.0814 1.99142 11.4894 1.92061C11.897 1.85032 12.2857 2.1239 12.3568 2.53138L12.5228 3.49445L13.4054 3.34309C14.7569 3.10909 15.9553 4.10536 16.1831 5.41884C16.2537 5.82678 15.9789 6.21513 15.571 6.28601C15.1633 6.35622 14.7752 6.08241 14.7044 5.6747C14.5978 5.06188 14.0845 4.74664 13.6602 4.82021L3.61189 6.5628C3.18756 6.63644 2.81138 7.10668 2.9177 7.71982L3.16715 9.16415L8.42199 8.2759C8.82999 8.20714 9.21678 8.48097 9.28618 8.88883C9.35514 9.29698 9.08047 9.6842 8.67244 9.75355L3.41029 10.6431L4.42524 16.4958C4.50337 16.9448 4.94649 17.2691 5.43981 17.1837L7.85129 16.7655C8.25931 16.6948 8.64792 16.9682 8.71873 17.3762C8.78909 17.7839 8.51635 18.1721 8.10878 18.2431L5.69595 18.6611C4.41368 18.8831 3.172 18.0443 2.94784 16.752L1.71726 9.65628C1.70941 9.61091 1.70563 9.56528 1.706 9.52082L1.43841 7.97486C1.21116 6.6617 2.00349 5.31987 3.3544 5.08512L4.21044 4.93612L4.04413 3.97441Z%22 fill=%22black%22/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id=%22clip0_17956_8822%22%3E %3Crect width=%2224%22 height=%2224%22 fill=%22white%22/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cg clip-path=%22url(%23clip0_17956_8822)%22%3E %3Cpath d=%22M8.94719 14.0525C8.94751 10.1868 12.081 7.05296 15.9467 7.05276C19.8124 7.05282 22.9459 10.1866 22.9464 14.0522C22.9461 17.918 19.8119 21.0525 15.9461 21.0525C12.0806 21.052 8.94744 17.918 8.94719 14.0525ZM13.267 9.41761C11.9629 10.303 11.1607 11.6717 10.9324 13.1377L10.7741 12.8935C10.5787 12.5917 10.1817 12.5092 9.88702 12.7092C9.59259 12.9094 9.51248 13.3158 9.7076 13.6177L10.9007 15.4642C11.0961 15.7657 11.4934 15.847 11.788 15.6471L13.5891 14.4244C13.8837 14.2242 13.9646 13.8173 13.7693 13.5154C13.5739 13.2139 13.1768 13.1313 12.8822 13.3311L12.1495 13.8272C12.2035 12.532 12.8405 11.2816 13.9744 10.5117C15.8561 9.2345 18.3932 9.76175 19.64 11.6895C20.8862 13.6174 20.3705 16.2158 18.4891 17.4931C17.1863 18.3773 15.569 18.3973 14.282 17.6836C13.9712 17.5114 13.583 17.6298 13.4145 17.9479C13.2463 18.2664 13.3615 18.6648 13.6723 18.8373C15.3588 19.7727 17.4837 19.7496 19.1964 18.5871C21.6675 16.9096 22.3443 13.4966 20.7073 10.9648C19.0698 8.43296 15.7382 7.74014 13.267 9.41761ZM4.04413 3.97441C3.97353 3.56673 4.24666 3.1788 4.65408 3.1075C5.0622 3.03673 5.45075 3.31015 5.52152 3.71827L5.68865 4.67945L11.0449 3.74977L10.8786 2.78805C10.808 2.38009 11.0814 1.99142 11.4894 1.92061C11.897 1.85032 12.2857 2.1239 12.3568 2.53138L12.5228 3.49445L13.4054 3.34309C14.7569 3.10909 15.9553 4.10536 16.1831 5.41884C16.2537 5.82678 15.9789 6.21513 15.571 6.28601C15.1633 6.35622 14.7752 6.08241 14.7044 5.6747C14.5978 5.06188 14.0845 4.74664 13.6602 4.82021L3.61189 6.5628C3.18756 6.63644 2.81138 7.10668 2.9177 7.71982L3.16715 9.16415L8.42199 8.2759C8.82999 8.20714 9.21678 8.48097 9.28618 8.88883C9.35514 9.29698 9.08047 9.6842 8.67244 9.75355L3.41029 10.6431L4.42524 16.4958C4.50337 16.9448 4.94649 17.2691 5.43981 17.1837L7.85129 16.7655C8.25931 16.6948 8.64792 16.9682 8.71873 17.3762C8.78909 17.7839 8.51635 18.1721 8.10878 18.2431L5.69595 18.6611C4.41368 18.8831 3.172 18.0443 2.94784 16.752L1.71726 9.65628C1.70941 9.61091 1.70563 9.56528 1.706 9.52082L1.43841 7.97486C1.21116 6.6617 2.00349 5.31987 3.3544 5.08512L4.21044 4.93612L4.04413 3.97441Z%22 fill=%22black%22/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id=%22clip0_17956_8822%22%3E %3Crect width=%2224%22 height=%2224%22 fill=%22white%22/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ---------- 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-xs);
}

.detail-author-avatar-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.detail-author-info {
  display: flex;
  flex-direction: column;
}

.detail-author-name {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.detail-author-timestamp {
  font-size: var(--text-base);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
}

/* keep .detail-author-type selectable for any other consumers */
.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 {
  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: 240px;
  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));
}

/* Expandable visibility section (iOS-style: header row + options). */
.detail-menu-visibility {
  display: flex;
  flex-direction: column;
}
.detail-menu-vis-spacer {
  flex: 1;
}
.detail-menu-vis-header > svg:last-child {
  color: var(--text-tertiary);
}
.detail-menu-vis-option {
  align-items: flex-start;
  padding-left: var(--sp-md);
  gap: var(--sp-sm);
}
.detail-menu-vis-option > svg:first-child {
  margin-top: 2px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.detail-menu-vis-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.detail-menu-vis-label {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.detail-menu-vis-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.detail-menu-vis-check {
  margin-left: auto;
  padding-left: var(--sp-xs);
  color: var(--accent);
  flex-shrink: 0;
  align-self: center;
}

/* 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;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.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;
}

/* Inline images inside a note body (markdown or the Milkdown editor) — keep them
   modestly sized instead of rendering at full natural resolution. */
.detail-description img,
.detail-body-editor img {
  max-width: 100%;
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: var(--radius-md, 12px);
  object-fit: contain;
}

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

.detail-description img {
  max-width: 100%;
  height: auto;
}

.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); }

/* ── Task list shared icon variables ────────────────────────────────────── */
/* SVG data URIs for the three checklist icons (checkbox/empty/hollow,
   checkbox/checked/filled, checklist/drag). Used as CSS mask-image so the
   icons inherit currentColor via background-color. */

:root {
  --icon-task-unchecked: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 18.6504C21 18.9179 21.0011 19.1639 20.9844 19.3682C20.967 19.5812 20.9268 19.8147 20.8096 20.0449C20.6418 20.374 20.374 20.6418 20.0449 20.8096C19.8147 20.9268 19.5812 20.967 19.3682 20.9844C19.1639 21.0011 18.9179 21 18.6504 21H5.34961C5.08211 21 4.83612 21.0011 4.63184 20.9844C4.41878 20.967 4.18529 20.9268 3.95508 20.8096C3.62597 20.6418 3.35817 20.374 3.19043 20.0449C3.07313 19.8147 3.03402 19.5812 3.0166 19.3682C2.99991 19.1639 3 18.9179 3 18.6504V5.34961C3 5.08211 2.99991 4.83612 3.0166 4.63184C3.03403 4.4188 3.07314 4.18526 3.19043 3.95508C3.35818 3.62597 3.62597 3.35818 3.95508 3.19043C4.18526 3.07314 4.4188 3.03403 4.63184 3.0166C4.83612 2.99991 5.08211 3 5.34961 3H18.6504C18.9179 3 19.1639 2.99991 19.3682 3.0166C19.5812 3.03402 19.8147 3.07313 20.0449 3.19043C20.374 3.35817 20.6418 3.62597 20.8096 3.95508C20.9268 4.18529 20.967 4.41878 20.9844 4.63184C21.0011 4.83612 21 5.08211 21 5.34961V18.6504ZM19.5 5.34961C19.5 5.05745 19.4998 4.88297 19.4893 4.75391C19.4794 4.63384 19.4643 4.62034 19.4727 4.63672C19.4487 4.58968 19.4103 4.55131 19.3633 4.52734C19.3797 4.53569 19.3662 4.52058 19.2461 4.51074C19.1171 4.5002 18.9426 4.5 18.6504 4.5H5.34961C5.05745 4.5 4.88297 4.5002 4.75391 4.51074C4.63384 4.52058 4.62034 4.53569 4.63672 4.52734C4.58968 4.55131 4.55131 4.58968 4.52734 4.63672C4.53569 4.62034 4.52058 4.63384 4.51074 4.75391C4.5002 4.88297 4.5 5.05745 4.5 5.34961V18.6504C4.5 18.9426 4.5002 19.1171 4.51074 19.2461C4.52058 19.3662 4.53569 19.3797 4.52734 19.3633C4.55131 19.4103 4.58968 19.4487 4.63672 19.4727C4.62034 19.4643 4.63384 19.4794 4.75391 19.4893C4.88297 19.4998 5.05745 19.5 5.34961 19.5H18.6504C18.9426 19.5 19.1171 19.4998 19.2461 19.4893C19.3662 19.4794 19.3797 19.4643 19.3633 19.4727C19.4103 19.4487 19.4487 19.4103 19.4727 19.3633C19.4643 19.3797 19.4794 19.3662 19.4893 19.2461C19.4998 19.1171 19.5 18.9426 19.5 18.6504V5.34961Z' fill='black'/%3E %3C/svg%3E");
  --icon-task-checked: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.6768 3C18.934 2.99998 19.1706 3.00046 19.3682 3.0166C19.5812 3.03402 19.8147 3.07313 20.0449 3.19043C20.374 3.35818 20.6418 3.62598 20.8096 3.95508C20.9268 4.1853 20.967 4.41878 20.9844 4.63184C21.0005 4.82952 21 5.06674 21 5.32422V18.6758C21 18.9333 21.0005 19.1705 20.9844 19.3682C20.967 19.5812 20.9268 19.8147 20.8096 20.0449C20.6418 20.374 20.374 20.6418 20.0449 20.8096C19.8147 20.9268 19.5812 20.967 19.3682 20.9844C19.1705 21.0005 18.9333 21 18.6758 21H5.32324C5.06597 21 4.82939 21.0005 4.63184 20.9844C4.41878 20.967 4.1853 20.9268 3.95508 20.8096C3.62598 20.6418 3.35818 20.374 3.19043 20.0449C3.07314 19.8147 3.03402 19.5812 3.0166 19.3682C3.00045 19.1705 2.99998 18.9333 3 18.6758V5.32422C2.99998 5.06676 3.00045 4.82951 3.0166 4.63184C3.03403 4.4188 3.07314 4.18527 3.19043 3.95508C3.35818 3.62598 3.62598 3.35818 3.95508 3.19043C4.18527 3.07314 4.4188 3.03403 4.63184 3.0166C4.82951 3.00045 5.06675 2.99998 5.32422 3H18.6768ZM16.0273 9.38379C15.7345 9.09097 15.2597 9.09113 14.9668 9.38379L10.9971 13.3535L9.52734 11.8838C9.23452 11.591 8.75971 11.5911 8.4668 11.8838C8.1739 12.1767 8.1739 12.6514 8.4668 12.9443L10.4668 14.9443C10.7597 15.2371 11.2345 15.2372 11.5273 14.9443L16.0273 10.4443C16.32 10.1514 16.3201 9.67662 16.0273 9.38379Z' fill='black'/%3E %3C/svg%3E");
  --icon-task-drag: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9.25 16.5C10.2165 16.5 11 17.2835 11 18.25C11 19.2165 10.2165 20 9.25 20C8.2835 20 7.5 19.2165 7.5 18.25C7.5 17.2835 8.2835 16.5 9.25 16.5Z' fill='black'/%3E %3Cpath d='M14.75 16.5C15.7165 16.5 16.5 17.2835 16.5 18.25C16.5 19.2165 15.7165 20 14.75 20C13.7835 20 13 19.2165 13 18.25C13 17.2835 13.7835 16.5 14.75 16.5Z' fill='black'/%3E %3Cpath d='M9.25 10.1504C10.2165 10.1504 11 10.9339 11 11.9004V12C11 12.9665 10.2165 13.75 9.25 13.75C8.2835 13.75 7.5 12.9665 7.5 12V11.9004C7.5 10.9339 8.2835 10.1504 9.25 10.1504Z' fill='black'/%3E %3Cpath d='M14.75 10.1504C15.7165 10.1504 16.5 10.9339 16.5 11.9004V12C16.5 12.9665 15.7165 13.75 14.75 13.75C13.7835 13.75 13 12.9665 13 12V11.9004C13 10.9339 13.7835 10.1504 14.75 10.1504Z' fill='black'/%3E %3Cpath d='M9.25 4C10.2165 4 11 4.7835 11 5.75C11 6.7165 10.2165 7.5 9.25 7.5C8.2835 7.5 7.5 6.7165 7.5 5.75C7.5 4.7835 8.2835 4 9.25 4Z' fill='black'/%3E %3Cpath d='M14.75 4C15.7165 4 16.5 4.7835 16.5 5.75C16.5 6.7165 15.7165 7.5 14.75 7.5C13.7835 7.5 13 6.7165 13 5.75C13 4.7835 13.7835 4 14.75 4Z' fill='black'/%3E %3C/svg%3E");
}

/* Shared mask helper — applies to both .md-task-drag/.md-task-checkbox spans
   and the Milkdown editor ::before pseudo-element. */
.md-task-drag, .md-task-checkbox,
.detail-body-editor .ProseMirror li[data-item-type="task"]::before {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--text-primary);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ── Task list (checklist) — read path (marked.js + transformTaskItems) ── */

.detail-description ul:has(.md-task-item),
.detail-description .md-list--tasks {
  list-style: none;
  padding-left: 0;
}

.detail-description .md-task-item {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: var(--sp-3xs) 0;
  margin-bottom: 0;
  line-height: 1.5;
}

.detail-description .md-task-drag {
  -webkit-mask-image: var(--icon-task-drag);
          mask-image: var(--icon-task-drag);
  margin-top: 2px;
  opacity: 0.4;
  cursor: grab;
}

.detail-description .md-task-checkbox {
  -webkit-mask-image: var(--icon-task-unchecked);
          mask-image: var(--icon-task-unchecked);
  margin-top: 2px;
}

.detail-description .md-task-item--checked .md-task-checkbox {
  -webkit-mask-image: var(--icon-task-checked);
          mask-image: var(--icon-task-checked);
}

.detail-description .md-task-item--checked {
  color: var(--text-tertiary);
  text-decoration: line-through;
}

.detail-description .md-task-item--checked .md-task-drag,
.detail-description .md-task-item--checked .md-task-checkbox {
  text-decoration: none;
  background-color: var(--text-tertiary);
}

/* ── Milkdown editor task list items (owner edit path) ─────────────────── */
/* Milkdown GFM: <li data-item-type="task" data-checked="true|false">.
   Icons are real DOM elements (.pm-task-drag, .pm-task-check) injected by
   a Decoration.widget plugin — ::before inside contenteditable doesn't
   receive pointer events reliably in WebKit. */

.detail-body-editor .ProseMirror ul:has(li[data-item-type="task"]) {
  list-style: none;
  padding-left: 0;
}

.detail-body-editor .ProseMirror li[data-item-type="task"] {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: var(--sp-3xs) 0;
  margin-bottom: 0;
}

/* Widget wrapper: side-by-side drag + checkbox, non-editable */
.detail-body-editor .ProseMirror .pm-task-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  user-select: none;
}

/* Button reset — strip browser defaults so we get a clean 16×16 icon button */
.detail-body-editor .ProseMirror .pm-task-drag,
.detail-body-editor .ProseMirror .pm-task-check {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: none;
  background-color: var(--text-primary);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  cursor: pointer;
  outline: none;
}

.detail-body-editor .ProseMirror .pm-task-drag {
  -webkit-mask-image: var(--icon-task-drag);
          mask-image: var(--icon-task-drag);
  cursor: grab;
  opacity: 0.5;
}

.detail-body-editor .ProseMirror .pm-task-check {
  -webkit-mask-image: var(--icon-task-unchecked);
          mask-image: var(--icon-task-unchecked);
}

.detail-body-editor .ProseMirror .pm-task-check--checked {
  -webkit-mask-image: var(--icon-task-checked);
          mask-image: var(--icon-task-checked);
}

.detail-body-editor .ProseMirror li[data-item-type="task"][data-checked="true"] {
  color: var(--text-tertiary);
  text-decoration: line-through;
  font-style: italic;
}

/* Visual feedback during pointer drag-to-reorder */
.detail-body-editor .ProseMirror li.task-dragging {
  opacity: 0.4;
  pointer-events: none;
}
.detail-body-editor .ProseMirror li.task-drop-above {
  border-top: 2px solid var(--accent-blue);
}
.detail-body-editor .ProseMirror li.task-drop-below {
  border-bottom: 2px solid var(--accent-blue);
}

.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(--accent-blue);
  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(--accent-blue);
  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;
}

@media (min-width: 769px) {
  .detail-rail-btn:has(.detail-rail-count:not(:empty)) {
    padding-inline: var(--sp-xs);
  }
}

.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(--text-parimary);
}

.detail-rail-btn-like-active {
  padding-left: 8px;
  padding-right: 8px;
  transition: .3s ease all;
}

/* 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);
}

/* Wrapper that stacks the toggle + groups-pill vertically in the rail */
.detail-visibility-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* "N People" pill shown when visibility is GROUPS */
.detail-groups-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.detail-groups-pill:hover {
  background: var(--bg-tertiary);
}

/* ─── Privacy options sheet ──────────────────────────────────────────────── */

.vis-sheet {
  height: auto;
  min-height: unset;
  max-height: 80vh;
}

.vis-sheet-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--sp-md);
}

.vis-sheet-option {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: var(--sp-sm) var(--sp-xs);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: background 0.15s;
}
.vis-sheet-option:hover {
  background: var(--bg-secondary);
}
.vis-sheet-option--active {
  background: var(--bg-secondary);
}

.vis-sheet-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.vis-sheet-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.vis-sheet-option-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.vis-sheet-option-sublabel {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.3;
}

.vis-sheet-option-check {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ─── Groups picker sheet ────────────────────────────────────────────────── */

.groups-picker-sheet,
.groups-manage-sheet {
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.groups-picker-header,
.groups-manage-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0 var(--sp-md);
  flex-shrink: 0;
}

.groups-picker-header-icon,
.groups-manage-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.groups-picker-header-text,
.groups-manage-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.groups-picker-title,
.groups-manage-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.groups-picker-subtitle,
.groups-manage-subtitle {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.35;
}

.groups-picker-close-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.groups-manage-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.groups-picker-search-wrap {
  padding-bottom: var(--sp-xs);
}

.groups-picker-search {
  width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
}
.groups-picker-search:focus {
  border-color: var(--border-primary-inverse);
}

.groups-picker-count {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding: var(--sp-xs) 0 4px;
}

.groups-manage-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.groups-picker-list,
.groups-manage-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.groups-picker-empty {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--sp-lg) 0;
}

/* Shared row layout used in both picker and manage views */
.groups-picker-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) 0;
}

.groups-picker-row-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

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

.groups-picker-row-username {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.groups-picker-add-btn {
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.groups-picker-add-btn:hover {
  background: var(--bg-secondary);
}

.groups-picker-remove-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.groups-picker-remove-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 2px;
}

.groups-picker-remove-x {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.groups-picker-confirm-btn {
  position: sticky;
  bottom: 0;
  width: calc(100% + var(--sp-md) * 2);
  margin: 0 calc(-1 * var(--sp-md));
  padding: var(--sp-sm) var(--sp-md);
  background: var(--bg-primary);
  border: none;
  border-top: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.groups-picker-confirm-btn:hover {
  background: var(--bg-secondary);
}

/* 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);
}

/* ── Container attachment grid ──────────────────────────────────── */

.detail-container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-sm);
}

.detail-container-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-secondary, rgba(127, 127, 127, 0.08));
  display: block;
}

.detail-container-attach {
  margin-top: var(--sp-sm);
}

.detail-container-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-md, 12px);
  border: 1px dashed var(--border-subtle, rgba(127, 127, 127, 0.35));
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.detail-container-attach-btn:hover {
  background: var(--surface-secondary, rgba(127, 127, 127, 0.08));
  color: var(--text-primary);
}

.detail-container-file {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-sm);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-secondary, rgba(127, 127, 127, 0.08));
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ── Inline Please AI chat (replaces comments section) ──────────── */

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

.detail-ai-chat-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.detail-ai-chat-status {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  padding: var(--sp-md) 0;
}

/* ── Camera capture modal (owner-container hardware camera) ───────── */

.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-ai-chat-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.detail-ai-chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  max-height: 60vh;
  overflow-y: auto;
}

.detail-ai-chat-empty {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  padding: var(--sp-lg) 0;
  text-align: center;
}

.detail-ai-chat-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.detail-ai-msg {
  display: flex;
  gap: var(--sp-sm);
  align-items: flex-start;
  max-width: 85%;
}

.detail-ai-msg-them {
  align-self: flex-start;
}

.detail-ai-msg-me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.detail-ai-msg-bubble {
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface-secondary, rgba(127, 127, 127, 0.08));
}

.detail-ai-msg-me .detail-ai-msg-bubble {
  background: var(--accent-blue);
  color: #fff;
}

.detail-ai-msg-body {
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.detail-ai-msg-body p {
  margin: 0;
}

.detail-ai-msg-body p + p {
  margin-top: var(--sp-sm);
}

.detail-ai-chat-typing {
  display: flex;
  gap: 4px;
  padding: var(--sp-sm) var(--sp-md);
  align-self: flex-start;
}

.detail-ai-chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: detail-ai-typing 1.2s infinite ease-in-out;
}

.detail-ai-chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.detail-ai-chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes detail-ai-typing {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

.detail-ai-chat-composer {
  display: flex;
  gap: var(--sp-sm);
  align-items: flex-end;
}

.detail-ai-chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.2));
  border-radius: var(--radius-md, 12px);
  padding: var(--sp-sm) var(--sp-md);
  font: inherit;
  font-size: var(--text-sm);
  background: var(--bg-input, transparent);
  color: var(--text-primary);
  min-height: 40px;
  max-height: 160px;
}

.detail-ai-chat-input::placeholder {
  color: var(--text-tertiary);
}

.detail-ai-chat-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.2));
  background: var(--bg-input, transparent);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  cursor: pointer;
}

.detail-ai-chat-attach:hover {
  background: var(--surface-secondary, rgba(127, 127, 127, 0.08));
}

.detail-ai-attach-input {
  display: none;
}

.detail-ai-chat-send {
  border: none;
  border-radius: var(--radius-md, 12px);
  padding: 0 var(--sp-lg);
  height: 40px;
  background: var(--accent-blue);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.detail-ai-chat-send: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;
}

/* When the reminder picker is rendered inside the owner-container slide-up
   sheet (Ping Me), drop the absolute dropdown positioning and let it sit
   in-flow, full-width, without the border/shadow the sheet already provides. */
.nr-reminder-sheet .detail-reminder-picker {
  position: static;
  margin-top: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  min-width: 0;
  width: 100%;
}

.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);
  flex: 1 0 auto;
}

.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));
}

/* ── 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; }

  /* 16px stops iOS Safari from zooming the composer on focus. */
  .detail-ai-chat-input {
    font-size: 16px;
  }

  /* Remove scroll-container horizontal padding so media bleeds edge-to-edge,
     then re-apply the same value directly to content sections. */
  .detail-scroll {
    padding-left: 0;
    padding-right: 0;
  }

  .detail-meta,
  .detail-text-content,
  .detail-ai-chat {
    padding-left: var(--sp-xl);
    padding-right: var(--sp-xl);
  }

  /* Full-width media on mobile — let natural aspect ratio dictate height. */
  .detail-hero {
    border-radius: 0;
  }

  .detail-hero-photo,
  .detail-hero-voice,
  .detail-hero-bookmark,
  .detail-hero-text {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    max-width: 100%;
    border-radius: 0;
  }

  .detail-hero-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
  }
}

@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 {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.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 ------------------------------------------------------------------- */

/* Override the shared form layout for voice — needs a tighter gap */
.capture-voice-form {
  gap: var(--sp-sm);
  align-items: center;
}

/* Waveform canvas — fills available width with a fixed height */
.capture-voice-waveform {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  display: block;
  cursor: pointer; /* scrub hint */
}

/* Taller canvas for the full-height mobile sheet */
.capture-voice-waveform--sheet {
  height: 200px;
}

/* Recording timer */
.capture-voice-timer {
  font-size: var(--text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

/* Controls row — play + record buttons side by side */
.capture-voice-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
}

/* Round icon button for play/pause */
.capture-voice-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.capture-voice-play-btn:hover {
  background: var(--bg-secondary);
}

/* Big pill record / stop / re-record button */
.capture-voice-record-btn {
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-full);
  background: #ef4444;
  color: #ffffff;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.capture-voice-record-btn:hover {
  background: #dc2626;
}
/* Pulsing glow while actively recording */
.capture-voice-record-btn--recording {
  animation: voice-record-pulse 1.4s ease-in-out infinite;
}

@keyframes voice-record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.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%;
}

/* Highlight row when the current viewer is @-mentioned */
.chat-message-row.mentioned-me {
  background: color-mix(in srgb, var(--accent-yellow, #f5c842) 12%, transparent);
  border-radius: var(--radius-md);
  margin-inline: calc(var(--sp-sm) * -1);
  padding-inline: var(--sp-sm);
}

.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;
  position: relative;
}

/* ── @-mention picker ────────────────────────────────────────────────────── */

.chat-mention-picker {
  position: absolute;
  left: var(--sp-xl);
  right: var(--sp-xl);
  bottom: calc(100% - var(--sp-xxl));
  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: 20;
}

.chat-mention-picker-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
}
.chat-mention-picker-item:hover {
  background: var(--bg-subtle);
}
/* Keyboard-highlighted row (↑/↓ navigation) — elevated secondary fill. */
.chat-mention-picker-item--active {
  background: var(--fill-elevated-secondary);
}
.chat-mention-picker-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-mention-picker-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-mention-picker-username {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 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-blue);
  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;
}

/* The three destination sources share one scroll region. */
.share-sections {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--sp-sm);
}

.share-section {
  margin-top: var(--sp-md);
}
.share-section:first-child {
  margin-top: var(--sp-xs);
}

.share-section-title {
  margin: 0;
  padding: 0 var(--sp-lg) var(--sp-3xs);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

/* Inside the shared scroll region each list sizes to its content rather
   than carrying its own min-height/scroll (which stacked badly). */
.share-section .new-chat-contacts {
  flex: none;
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
}
.share-section .new-chat-empty {
  padding: var(--sp-md) var(--sp-lg);
  justify-content: flex-start;
}

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

/* "Send in new group" secondary action above the primary Send button. */
.new-chat-secondary {
  width: 100%;
  padding: var(--sp-xs) var(--sp-md);
  margin-bottom: var(--sp-xs);
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.new-chat-secondary:hover {
  background: var(--bg-subtle);
}

/* Inline new-group name composer in the footer. */
.share-composer {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.share-composer .new-chat-search {
  flex: 1;
  margin: 0;
}
.share-composer .new-chat-create {
  width: auto;
  white-space: nowrap;
}
.new-chat-cancel {
  padding: var(--sp-xs) var(--sp-md);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}
.new-chat-cancel:hover {
  background: var(--bg-subtle);
}

/* ── 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(--accent-blue);
  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;
}

/* ── Mention autocomplete picker ─────────────────────────────────────── */
.chat-mention-picker {
  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;
  margin-bottom: 8px;
}

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

.chat-mention-picker-item:hover {
  background: var(--bg-subtle);
}

.chat-mention-picker-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.chat-mention-picker-username {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-mention {
  color: var(--accent-blue);
  text-decoration: none;
}
.chat-mention:hover {
  text-decoration: underline;
}

/* ============================================================================
   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 body (chips + scrollable list, used when Loaded) ─── */

.notifications-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--sp-md);
}

/* ── Filter chip strip ───────────────────────────────────────────────── */

.notif-filter-chips {
  display: flex;
  flex-direction: row;
  gap: var(--sp-sm);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}

.notif-filter-chips::-webkit-scrollbar {
  display: none;
}

.notif-chip {
  flex-shrink: 0;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.notif-chip:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.notif-chip--active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Scrollable list wrapper ─────────────────────────────────────────── */

.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;
}

/* ── Date-group sections container ───────────────────────────────────── */

.notifications-sections {
  display: flex;
  flex-direction: column;
}

/* ── 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-base);
  font-weight: 600;
  color: var(--text-primary);
}

/* Chevron */
.notifications-section-header > svg {
  color: var(--text-secondary);
  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;
}

/* ---------- Inline follow-request actions ---------- */
/* A flex cluster sitting between the row body and the ⋮ menu. Mirrors the
   followers-list accept/reject button styling. */
.notification-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
  margin-right: var(--sp-xs);
}

.notif-action-btn {
  padding: var(--sp-3xs) var(--sp-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.notif-action-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.notif-action-accept,
.notif-action-follow {
  background: var(--color-primary);
  color: white;
  border: none;
}

.notif-action-deny {
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
}

.notif-action-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: var(--sp-xs);
}

/* 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-mutual-contacts {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.profile-blocked {
  margin-top: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}

.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;
}

/* Small "x" to remove a follower — own profile, Followers tab only. */
.followers-remove-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xs);
  background: none;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  cursor: pointer;
}
.followers-remove-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.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-lg) 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;
}

/* Retry button inside errored processing badge */

.feed-card-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  margin-left: auto;
  padding: var(--sp-4xs) var(--sp-xs);
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent-red);
  font-size: var(--text-xs);
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
}

.feed-card-retry-btn:hover {
  opacity: 0.75;
}

.feed-card-retry-btn .icon {
  width: var(--size-sm);
  height: var(--size-sm);
}

/* Pill positioning override for processing/error cards —
   pull the pill out of absolute flow and let the container carry the offset */
.feed-card:has(.feed-card-processing) .feed-badge-pill {
  position: relative;
  top: auto;
  left: auto;
}

.feed-card:has(.feed-card-processing) .feed-card-link {
  padding-top: var(--sp-sm);
  padding-left: var(--sp-sm);
}

/* 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: fit-content;
  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 {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: rgba(255, 255, 255, 0.5);
  animation: mo-lb-in 0.3s ease-in-out;
}

@keyframes mo-lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mo-lb-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.mo-lb-header {
  display: flex;
  align-items: center;
  padding: 12px 8px 8px;
  flex-shrink: 0;
}

.mo-lb-header-spacer { flex: 1; }

.mo-lb-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 16px;
}

.mo-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: var(--radius-sm);
}

.mo-lb-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 8px 32px;
  flex-shrink: 0;
}

.mo-lb-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  padding: 0;
  color: inherit;
  flex-shrink: 0;
  transition: background 120ms ease;
}
.mo-lb-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* ── 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;
  }
}

/* New Reminder creation surface */

.nr-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-body);
  position: relative;
}

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

.nr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-md);
  gap: var(--sp-sm);
  flex-shrink: 0;
}

.nr-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background 120ms ease;
}
.nr-back:hover { background: var(--bg-secondary); text-decoration: none; }

.nr-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

/* Pill buttons: circular icon buttons in the header */
.nr-pill-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  padding: 0;
  font: inherit;
  border: none;
}
.nr-pill-btn:hover:not(:disabled) {
  background: var(--bg-secondary);
}
.nr-pill-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Done button — inactive: same gray as others */
/* Done — disabled/no-changes state: tertiary bg, tertiary icon */
.nr-pill-btn--done {
  background: var(--bg-tertiary);
  border-color: transparent;
  color: var(--text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

/* Active state inherits the transition from the base rule */
.nr-pill-btn--done.nr-pill-btn--active {
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

/* Done button — active: fill-gradient */
.nr-pill-btn--done.nr-pill-btn--active {
  background: var(--fill-gradient);
  border-color: transparent;
  color: #ffffff;
  /* The base .nr-pill-btn--done rule sets pointer-events:none/cursor:not-allowed
     for the disabled look; the active state must restore them or the click
     never reaches the button. */
  pointer-events: auto;
  cursor: pointer;
}
.nr-pill-btn--done.nr-pill-btn--active:hover {
  background: var(--fill-gradient);
  filter: brightness(1.05);
}

/* ── Hero media (full-width, no side padding) ──────────────── */

.nr-hero {
  width: 100%;
  flex-shrink: 0;
}

.nr-hero .detail-hero {
  border-radius: 0;
}

.nr-hero .detail-hero-img,
.nr-hero .detail-hero-photo,
.nr-hero .detail-hero-voice,
.nr-hero .detail-hero-bookmark {
  border-radius: 0;
  width: 100%;
  height: auto;
  aspect-ratio: unset;
  max-width: 100%;
}

/* ── Body ──────────────────────────────────────────────────── */

/* No horizontal padding on the container — each child carries its own
   so the hero above can bleed edge-to-edge. */
.nr-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-md);
  padding-bottom: 0;
  gap: var(--sp-xs);
  overflow-y: auto;
}

/* Title row: completion circle + textarea */
.nr-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: 0 var(--sp-xl);
}

.nr-completion-circle {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 2px solid var(--text-tertiary);
  border-radius: var(--radius-full);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition: border-color 150ms ease, background 150ms ease;
}
.nr-completion-circle:hover {
  border-color: var(--text-secondary);
}
/* Completed state: filled with gradient */
.nr-completion-circle--done {
  background: var(--fill-gradient);
  border-color: transparent;
}

/* Milkdown editor inside the nr-body layout */
.nr-body-editor {
  flex: 1;
  min-height: 120px;
  padding: 0 var(--sp-xl);
}

/* Reminder list/picker section */
.nr-body .detail-reminders-list,
.nr-body .detail-action-remind-wrapper {
  padding: 0 var(--sp-xl);
}

.nr-title {
  flex: 1;
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.3;
  padding: 0;
  /* Auto-grow via JS or min-height */
  min-height: 1.3em;
  overflow: hidden;
}

.nr-title::placeholder { color: var(--text-tertiary); }

/* Milkdown body editor mount. Typography and ProseMirror styling come
   from the shared .detail-body-editor rules (detail.css) — the mount div
   carries both classes. */
.nr-body-editor {
  flex: 1;
  min-height: 120px;
  padding: 0 var(--sp-xl);
  cursor: text;
  outline: none;
}

/* Override the detail editor's placeholder copy for this page. */
.nr-body-editor .ProseMirror p.is-editor-empty:first-child::before,
.nr-body-editor .ProseMirror:empty::before {
  content: "Reminder";
}

/* ── Toolbar ───────────────────────────────────────────────── */

.nr-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  flex-shrink: 0;
}

.nr-toolbar-spacer { flex: 1; }

.nr-toolbar-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: 0;
  font: inherit;
  transition: background 120ms ease;
}
.nr-toolbar-btn:hover { background: var(--bg-secondary); }

/* ── Owner-container ⋮ action sheet ─────────────────────────────────── */

.nr-action-sheet {
  padding-bottom: env(safe-area-inset-bottom);
}

.nr-action-sheet__close {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-md);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}

.nr-action-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-lg);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
}
/* First row sits under the close button / handle; no top divider. */
.nr-action-row:first-of-type {
  border-top: none;
}
.nr-action-row:hover {
  background: var(--bg-secondary);
}

.nr-action-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

.nr-action-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.nr-action-row__label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
}

.nr-action-row__sublabel {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.nr-action-row__trailing {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-left: var(--sp-sm);
}