/* === IA LANDMARK: LAYOUT (STRUCTURE, HEADERS, GRIDS) === */
/* --- Topic Header v7.5 --- */
[data-theme="light-ether"] .topic-header {
  background: var(--bg-header);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border-bottom: 1px solid
    color-mix(in srgb, var(--primary-matcha) 5%, rgba(0, 0, 0, 0.04));
  box-shadow: 0 1px 3px rgba(26, 36, 27, 0.04);
}

/* --- Dark/Deep Ether — Topic Header + Titres --- */
[data-theme="dark"] .topic-header,
[data-theme="grey"] .topic-header,
[data-theme="custom"] .topic-header {
  background: var(--bg-header);
}

[data-theme="dark"] .topic-title,
[data-theme="grey"] .topic-title,
[data-theme="custom"] .topic-title {
  color: var(--topic-title-color);
  letter-spacing: -0.3px;
  text-shadow: none;
}

[data-theme="deep-ether"] .topic-header {
  background: var(--bg-header);
  border-bottom-color: rgba(99, 140, 230, 0.1);
  /* v6: indigo-tinted border */
}

[data-theme="deep-ether"] .topic-title {
  color: var(--topic-title-color);
  letter-spacing: -0.3px;
  text-shadow: var(--topic-title-shadow);
}

/* --- 2. HEADER v7.5 — Warm Frosted Glass ---
   backdrop-filter restored with gentle blur + micro-saturate.
   The warm tint creates a living, breathing header. */
[data-theme="light-ether"] header {
  background: var(--bg-header);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  border-bottom: 1px solid
    color-mix(in srgb, var(--primary-matcha) 6%, rgba(0, 0, 0, 0.04));
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 252, 0.5),
    0 1px 2px rgba(26, 36, 27, 0.08),
    0 3px 8px rgba(26, 36, 27, 0.05),
    0 8px 20px rgba(26, 36, 27, 0.03);
}

/* --- 3. SIDEBAR v7.5 — uses token --- */
[data-theme="light-ether"] .sidebar {
  background: var(--bg-surface-alt);
  border-right: none;
  box-shadow: inset -8px 0 16px -10px rgba(26, 36, 27, 0.06);
  min-width: 0;
  min-height: 0;
}

/* AUDIT v5: sidebar-action-bar, btn-create-topic, topic-card blocks
   moved to their respective component sections (L.1390+, L.1403+, L.2017+)
   to eliminate duplications and cascade conflicts. */

/* --- 5. POSTS v7.5 — Warm ceramic plates with natural light micro-gradient --- */
[data-theme="light-ether"] .post {
  background: linear-gradient(
    180deg,
    var(--bg-surface) 0%,
    color-mix(in srgb, var(--bg-surface) 96%, var(--bg-body)) 100%
  );
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);

  /* v7: Ceramic materialization */
  opacity: 1;
  transform: translateY(0);
  transition:
    box-shadow var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-spring),
    opacity 0.4s var(--ease-out-expo);

  @starting-style {
    opacity: 0;
    transform: translateY(8px);
  }
}

[data-theme="light-ether"] .post:hover {
  background: linear-gradient(
    180deg,
    var(--bg-surface-raised) 0%,
    color-mix(in srgb, var(--bg-surface-raised) 97%, var(--bg-body)) 100%
  );
  box-shadow: var(--shadow-elevated);
  /* PERF v3: removed translateY(-2px) — causes layout shift while reading (same as base .post:hover fix) */
}

/* v7: Physical press feedback */
@media (hover: hover) {
  [data-theme="light-ether"] .post:active {
    transform: scale(0.99) translateY(0);
    transition: transform 0.1s var(--ease-out-expo);
  }

  [data-theme="light-ether"] .topic-card:active {
    transform: scale(0.98);
    transition: transform 0.1s var(--ease-out-expo);
  }

  [data-theme="light-ether"] .btn:active {
    transform: scale(0.96);
    transition: transform 0.08s var(--ease-out-expo);
  }
}

/* Post header — séparation douce (incision au lieu de grille) */
[data-theme="light-ether"] .post-header-row {
  background: var(--bg-surface);
  border-bottom: 1px solid rgba(26, 36, 27, 0.05);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

[data-theme="light-ether"] .post-content {
  color: var(--post-content-color);
  line-height: 1.78;
}

/* Citations — bordure gauche Poire + embossage céramique subtil */
/* v7: Premium ceramic quote panel with gradient pear border */
[data-theme="light-ether"] .post-content blockquote {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-matcha) 5%, transparent) 0%,
      color-mix(in srgb, var(--primary-matcha) 2%, transparent) 100%
    ),
    var(--bg-surface-alt);
  border-left: 3px solid transparent;
  border-image: linear-gradient(
      180deg,
      var(--accent-primary) 0%,
      color-mix(in srgb, var(--accent-primary) 30%, transparent) 100%
    )
    1;
  color: var(--text-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow:
    inset 0 1px 3px rgba(26, 36, 27, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7),
    3px 0 8px color-mix(in srgb, var(--primary-matcha) 8%, transparent);
  padding: 12px 16px;
}

/* --- 6. INPUTS — Cavités embossées dans la céramique (intrusion) --- */
/* Audit v10 : fond Avoine sur surface blanche + inset shadow = renfoncement.
   Zéro bordure visible. Focus ramène au plan + anneau Poire. */
[data-theme="light-ether"] input,
[data-theme="light-ether"] textarea,
[data-theme="light-ether"] .chat-editor-wrapper {
  background: var(--input-bg);
  /* Avoine = creusé dans la céramique blanche */
  border: 1px solid transparent;
  color: var(--text-main);
  /* Embossage : ombre interne sombre en haut (profondeur) + reflet clair en bas (plancher) */
  box-shadow:
    inset 0 2px 5px rgba(26, 36, 27, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.8);
  transition:
    box-shadow var(--duration-normal) var(--ease-out-expo),
    background var(--duration-fast) ease;
}

/* Focus : surface blanche (remontée au plan) + anneau Poire WCAG visible */
[data-theme="light-ether"] input:focus,
[data-theme="light-ether"] textarea:focus,
[data-theme="light-ether"] .chat-editor:focus {
  background: var(--bg-surface);
  border-color: transparent;
  box-shadow:
    inset 0 1px 2px rgba(26, 36, 27, 0.02),
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(168, 197, 69, 0.5);
}

/* --- 7. BOUTONS — Pastilles volumétriques Poire (dégradé zénithal + écrasement actif) ---
   Règle d'or du contraste : fond clair vibrant → texte SOMBRE, jamais blanc */
[data-theme="light-ether"] .btn:not(.btn-create-topic) {
  /* Dégradé zénithal : éclairci en haut → pur en bas */
  background: var(
    --topic-btn-bg,
    linear-gradient(180deg, #b5d15a 0%, #a8c545 100%)
  );
  color: var(--topic-btn-text, #1a241b);
  font-weight: 700;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(26, 36, 27, 0.12),
    var(--topic-btn-shadow-light, 0 3px 8px rgba(168, 197, 69, 0.25));
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out-expo),
    background var(--duration-fast) ease;
}

/* Hover : élévation + densification */
[data-theme="light-ether"] .btn:not(.btn-create-topic):hover {
  transform: translateY(-2px);
  background: var(
    --topic-btn-bg-hover,
    linear-gradient(180deg, #aacc3e 0%, #95b332 100%)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(26, 36, 27, 0.14),
    var(--topic-btn-shadow-light-hover, 0 6px 18px rgba(168, 197, 69, 0.35));
}

/* Active : écrasement volumétrique (inversion ombres = bouton enfoncé) */
[data-theme="light-ether"] .btn:not(.btn-create-topic):active {
  transform: scale(0.97);
  background: var(
    --topic-btn-bg-hover,
    linear-gradient(180deg, #9aaf2e 0%, #8ca82d 100%)
  );
  box-shadow:
    inset 0 2px 4px rgba(26, 36, 27, 0.15),
    0 1px 2px rgba(168, 197, 69, 0.15);
  transition-duration: var(--duration-instant);
}

/* Badges — Soft UI Poire (fond 15% opacité Poire + texte vert forêt SOMBRE) */
[data-theme="light-ether"] .reply-count {
  background: rgba(168, 197, 69, 0.15);
  color: #3f5e14;
  font-weight: 600;
}

/* Hover reply-count — texte sombre WCAG AA sur fond Poire */
[data-theme="light-ether"] .topic-card:hover .reply-count {
  background: rgba(168, 197, 69, 0.22);
  color: #141c15;
  /* Forêt sombre ≥7:1 ratio */
}

/* Hot badge — Rouge vif sémantique */
[data-theme="light-ether"] .reply-count.hot {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  box-shadow: none;
}

/* Hover hot badge — animation infinite supprimée (biophilic) */
[data-theme="light-ether"] .topic-card:hover .reply-count.hot {
  animation: none;
}

/* v7: Scrollbar "Perle" with derived warm tones */
[data-theme="light-ether"] ::-webkit-scrollbar-track {
  background: var(--bg-body);
}

[data-theme="light-ether"] ::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--primary-matcha) 25%, #c5bfb5);
  border: 3px solid var(--bg-body);
  border-radius: 6px;
}

[data-theme="light-ether"] ::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--primary-matcha) 35%, #9e9787);
}

/* Boutons Outline — classe dédiée (audit fix: remplace [style*="transparent"]) */
.btn-outline,
[data-theme="light-ether"] .btn[style*="transparent"] {
  background: transparent !important;
  color: var(--accent-text, #3f5e14);
  border: 1px solid var(--accent-primary, #a8c545);
  box-shadow: none !important;
}

.btn-outline:hover,
[data-theme="light-ether"] .btn[style*="transparent"]:hover {
  background: var(--topic-active-bg, rgba(168, 197, 69, 0.12)) !important;
  color: var(--accent-text, #2f470e);
  border-color: var(--accent-primary, #95b332);
}

/* ===========================================================
   THEME SELECTOR DROPDOWN (3-mode: Système / Clair / Sombre)
   =========================================================== */
.theme-selector-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  padding: 6px;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--duration-fast) var(--ease-out-expo),
    visibility var(--duration-fast),
    transform var(--duration-fast) var(--ease-out-expo);
  z-index: var(--z-dropdown);
}

.theme-selector-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-selector-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-main);
  font-size: var(--text-sm);
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: background var(--duration-fast) ease;
}

.theme-selector-option:hover {
  background: var(--bg-surface-alt);
}

.theme-selector-option.active {
  background: var(--accent-highlight);
  color: var(--accent-text);
  font-weight: var(--font-medium);
}

.theme-selector-option i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

.theme-selector-option.active i {
  opacity: 1;
}

/* Check icon — must be more specific than `.theme-selector-option i` to override its opacity */
.theme-selector-option .theme-selector-check {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent-text);
  opacity: 0;
}

.theme-selector-option.active .theme-selector-check {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   READING COMFORT & DARK MODE POLISH
   ═══════════════════════════════════════════════════════════
   Références :
   - Bringhurst, Elements of Typographic Style (4th ed., 2012)
   - Campbell & Robson, CSF (1968) — contrast sensitivity drops
     on dark backgrounds → compensate with spacing
   - Apple HIG: antialiased + subpixel rendering in dark mode
   - Material Design 3: Dynamic Color, system elevation tokens
   ═══════════════════════════════════════════════════════════ */

/* --- 1. TEXT SELECTION — Theme-aware highlight colors --- */
::selection {
  background: rgba(168, 197, 69, 0.25);
  color: inherit;
}

[data-theme="dark"] ::selection {
  background: rgba(168, 197, 69, 0.3);
  color: #f5fcf7;
}

[data-theme="grey"] ::selection {
  background: rgba(88, 101, 242, 0.3);
  color: #f2f3f5;
}

[data-theme="custom"] ::selection {
  background: hsla(var(--user-hue, 210), 72%, 55%, 0.3);
  color: #f0f0f5;
}

[data-theme="deep-ether"] ::selection {
  background: rgba(59, 130, 246, 0.45);
  color: #eef0fa;
}

[data-theme="light-ether"] ::selection {
  background: rgba(224, 215, 198, 0.4);
  color: #1a241b;
}

/* --- 2. SCROLLBAR THEMING — Eliminate jarring white scrollbars --- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0;
    display: none;
  }
}

/* --- 3. DARK MODE TYPOGRAPHY COMPENSATION --- */
/* Campbell-Robson (1968): CSF drops at low luminance.
   White text on dark bg appears thinner (irradiation illusion).
   Bringhurst: "Dark grounds ask for lighter letters tracked wider." */
[data-theme="dark"],
[data-theme="grey"],
[data-theme="custom"],
[data-theme="deep-ether"] {
  letter-spacing: 0.01em;
  word-spacing: 0.02em;
}

/* Post content — main reading zone (Bringhurst: 1.5-1.7× for body text) */
[data-theme="dark"] .post-content,
[data-theme="grey"] .post-content,
[data-theme="custom"] .post-content,
[data-theme="deep-ether"] .post-content {
  line-height: 1.75;
  letter-spacing: 0.015em;
}

/* --- 4. BACKDROP-FILTER FALLBACK --- */
@supports not (backdrop-filter: blur(1px)) {
  [data-theme="dark"] {
    --bg-header: #161c18;
    --glass-surface: #161c18;
  }

  [data-theme="deep-ether"] {
    --bg-header: #0e1528;
    --glass-surface: #0e1528;
  }

  [data-theme="grey"] {
    --bg-header: #2b2d31;
    --glass-surface: #2b2d31;
  }

  [data-theme="custom"] {
    --bg-header: #0e0e16;
    --glass-surface: #0e0e16;
  }
}

/* --- 5. TOKEN COMPLETION — Prevent undefined variables --- */
:root {
  --bg-surface-raised: var(--bg-surface-alt);
  --shadow-depth: var(--shadow-floating);
  --glow-shadow: none;
  --primary-azure: #3b82f6;
}

[data-theme="light-ether"] {
  --bg-card: #ffffff;
  --accent-glow: rgba(168, 197, 69, 0.15);
  --accent-glow-soft: rgba(168, 197, 69, 0.08);
  --accent-highlight: rgba(168, 197, 69, 0.05);
}

/* ═══════════════════════════════════════════════════════════
   DARK SENSORY COMPONENTS — v7
   Concrete visual effects using the new design tokens.
   ═══════════════════════════════════════════════════════════ */

/* --- 6. INLINE CODE (ALL themes) — theme-tinted distinction --- */
/* On dark backgrounds, code must POP without screaming.
   Subtle tinted bg + matching accent text = premium feel. */
code:not(pre code) {
  background: var(--code-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--code-border, rgba(255, 255, 255, 0.08));
  color: var(--code-text, inherit);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  font-family: var(--font-family-mono);
  font-size: 0.88em;
}

/* --- 7. LINK UNDERLINES — gossamer-thin, theme-tinted --- */
/* Tufte: "Maximise the data-ink ratio". Semi-transparent underlines
   guide without dominating. Full-color underlines are distracting. */
[data-theme="dark"] .post-content a,
[data-theme="grey"] .post-content a,
[data-theme="custom"] .post-content a,
[data-theme="deep-ether"] .post-content a {
  text-decoration-color: var(--link-underline, rgba(255, 255, 255, 0.2));
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-fast) ease;
}

[data-theme="dark"] .post-content a:hover,
[data-theme="grey"] .post-content a:hover,
[data-theme="custom"] .post-content a:hover,
[data-theme="deep-ether"] .post-content a:hover {
  text-decoration-color: var(--link-underline-hover, rgba(255, 255, 255, 0.5));
}

/* --- 8. HEADER AMBIENT GLOW — floating sensation --- */
/* Subtle bottom luminescence makes the sticky header
   feel like it hovers above the content plane. */
[data-theme="dark"] header,
[data-theme="grey"] header,
[data-theme="custom"] header,
[data-theme="deep-ether"] header {
  box-shadow: var(--header-glow);
  border-bottom-color: transparent;
  /* Replace border with glow — borders look cheap, glows look premium */
}

/* --- 9. BLOCKQUOTE DARK GLOW --- */
/* The left border gets a subtle glow spread, making quotes
   feel like they emit light. Premium editorial feel. */
[data-theme="dark"] .post-content blockquote {
  border-left-color: var(--quote-border);
  box-shadow: -2px 0 8px rgba(168, 197, 69, 0.08);
  background: var(--quote-bg);
}

/* Deep Ether: premium glassmorphism quote panel with gradient azure border */
[data-theme="deep-ether"] .post-content blockquote {
  border-left: 2px solid transparent;
  border-image: linear-gradient(
      180deg,
      var(--primary-azure) 0%,
      color-mix(in srgb, var(--primary-azure) 40%, transparent) 100%
    )
    1;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-azure) 6%, transparent) 0%,
      color-mix(in srgb, var(--primary-azure) 2%, transparent) 100%
    ),
    var(--quote-bg);
  box-shadow:
    -3px 0 12px color-mix(in srgb, var(--primary-azure) 10%, transparent),
    0 2px 8px rgba(4, 8, 30, 0.25);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- 10. FOCUS RING — Double halo (exceeds WCAG 2.4.13) --- */
/* Inner ring = solid accent, outer ring = soft glow.
   Maximally visible AND aesthetically premium. */
[data-theme="dark"] :focus-visible,
[data-theme="grey"] :focus-visible,
[data-theme="custom"] :focus-visible,
[data-theme="deep-ether"] :focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px var(--focus-ring-color),
    0 0 12px var(--accent-glow-soft);
}

/* --- 11. INPUT FOCUS — Accent glow ring --- */
[data-theme="dark"] input:focus,
[data-theme="grey"] input:focus,
[data-theme="custom"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="grey"] textarea:focus,
[data-theme="custom"] textarea:focus,
[data-theme="deep-ether"] input:focus,
[data-theme="deep-ether"] textarea:focus {
  border-color: var(--accent-primary);
  box-shadow:
    0 0 0 3px var(--accent-glow-soft),
    0 0 8px var(--accent-glow);
}

/* --- 12. DARK IMAGE BRIGHTNESS — Apple HIG dark mode --- */
/* Apple HIG recommends reducing image brightness ~5-10% in dark mode
   to prevent eye strain from bright images surrounded by dark UI.
   We use 92% brightness — barely noticeable but reduces the "flash" effect. */
/* PERF v3: Replaced filter:brightness (paint-trigger per hover) with opacity.
   opacity is GPU-composited, no repaint needed. Same visual dimming effect. */
[data-theme=”dark”] .post-content img:not(.sticker):not(.sticker-thumb),
[data-theme=”grey”] .post-content img:not(.sticker):not(.sticker-thumb),
[data-theme=”custom”] .post-content img:not(.sticker):not(.sticker-thumb),
[data-theme=”deep-ether”] .post-content img:not(.sticker):not(.sticker-thumb) {
  opacity: 0.92;
  transition: opacity var(--duration-normal) ease;
}

[data-theme=”dark”] .post-content img:not(.sticker):hover,
[data-theme=”grey”] .post-content img:not(.sticker):hover,
[data-theme=”custom”] .post-content img:not(.sticker):hover,
[data-theme=”deep-ether”] .post-content img:not(.sticker):hover {
  opacity: 1;
}

/* --- 13. CARD SMOOTH TRANSITIONS — everything breathes --- */
/* Interactive elements shouldn't snap. Every state change should
   flow smoothly. This creates the sensation of a living interface. */
/* PERF v3: removed box-shadow transition — expensive repaint on 70+ posts.
   Background + border transitions are cheap (compositing-friendly). */
[data-theme="dark"] .post,
[data-theme="grey"] .post,
[data-theme="custom"] .post,
[data-theme="deep-ether"] .post {
  transition:
    background-color var(--duration-normal) ease,
    border-color var(--duration-fast) ease;
}

[data-theme="dark"] .topic-card,
[data-theme="grey"] .topic-card,
[data-theme="custom"] .topic-card,
[data-theme="deep-ether"] .topic-card {
  transition:
    box-shadow var(--duration-normal) var(--ease-out-expo),
    background-color var(--duration-normal) ease,
    border-color var(--duration-fast) ease,
    transform var(--duration-normal) var(--ease-spring);
}

/* --- 14. SURFACE TINT ON HOVER — Material Design 3 state layers --- */
/* MD3: hover state = surface + 8% primary tint overlay.
   Creates a warm, brand-infused interaction feedback. */
[data-theme="dark"] .topic-card:hover,
[data-theme="grey"] .topic-card:hover,
[data-theme="custom"] .topic-card:hover {
  background:
    linear-gradient(var(--surface-tint-hover), var(--surface-tint-hover)),
    var(--bg-surface);
}

[data-theme="deep-ether"] .topic-card:hover {
  background:
    linear-gradient(var(--surface-tint-hover), var(--surface-tint-hover)),
    var(--bg-surface);
}

/* --- 15. AVATAR GLOW RING — subtle life indicator --- */
/* A micro-glow around avatars makes them feel alive.
   Like a tiny aura. Not on every avatar — only post authors. */
[data-theme="dark"] .post-avatar img,
[data-theme="dark"] .author-avatar img {
  box-shadow:
    0 0 0 1px rgba(168, 197, 69, 0.12),
    0 0 6px rgba(168, 197, 69, 0.06);
}

[data-theme="grey"] .post-avatar img,
[data-theme="grey"] .author-avatar img {
  box-shadow:
    0 0 0 1px rgba(88, 101, 242, 0.12),
    0 0 6px rgba(88, 101, 242, 0.06);
}

[data-theme="custom"] .post-avatar img,
[data-theme="custom"] .author-avatar img {
  box-shadow:
    0 0 0 1px hsla(var(--user-hue, 210), 72%, 55%, 0.15),
    0 0 6px hsla(var(--user-hue, 210), 72%, 55%, 0.08);
}

[data-theme="deep-ether"] .post-avatar img,
[data-theme="deep-ether"] .author-avatar img {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary-azure) 15%, transparent),
    0 0 6px color-mix(in srgb, var(--primary-azure) 8%, transparent);
  transition: box-shadow 0.4s var(--ease-out-expo);
}

[data-theme="deep-ether"] .post-avatar img:hover,
[data-theme="deep-ether"] .author-avatar img:hover {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--primary-azure) 30%, transparent),
    0 0 12px color-mix(in srgb, var(--primary-azure) 20%, transparent),
    0 0 24px color-mix(in srgb, var(--primary-azure) 10%, transparent);
}

/* v7: Light Ether — ceramic cameo avatar ring with warm pear tint */
[data-theme="light-ether"] .post-avatar img,
[data-theme="light-ether"] .author-avatar img {
  box-shadow:
    inset 0 1px 2px rgba(26, 36, 27, 0.06),
    0 0 0 1.5px
      color-mix(in srgb, var(--primary-matcha) 20%, rgba(226, 223, 216, 0.8)),
    0 0 6px color-mix(in srgb, var(--primary-matcha) 8%, transparent);
  transition: box-shadow 0.3s var(--ease-out-expo);
}

[data-theme="light-ether"] .post-avatar img:hover,
[data-theme="light-ether"] .author-avatar img:hover {
  box-shadow:
    inset 0 1px 2px rgba(26, 36, 27, 0.06),
    0 0 0 2px
      color-mix(in srgb, var(--primary-matcha) 35%, rgba(226, 223, 216, 0.9)),
    0 0 10px color-mix(in srgb, var(--primary-matcha) 15%, transparent);
}

/* --- 16. ROLE BADGE MICRO-GLOW --- */
/* Admin and mod badges get a subtle glow matching their color.
   Makes them feel "powered" — like they emit authority. */
[data-theme="dark"] .badge-admin,
[data-theme="dark"] .role-admin,
[data-theme="grey"] .badge-admin,
[data-theme="grey"] .role-admin,
[data-theme="custom"] .badge-admin,
[data-theme="custom"] .role-admin {
  text-shadow: 0 0 8px rgba(232, 139, 139, 0.4);
}

[data-theme="dark"] .badge-mod,
[data-theme="dark"] .role-mod,
[data-theme="grey"] .badge-mod,
[data-theme="grey"] .role-mod,
[data-theme="custom"] .badge-mod,
[data-theme="custom"] .role-mod {
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}

[data-theme="deep-ether"] .badge-admin {
  text-shadow: 0 0 8px rgba(251, 113, 133, 0.4);
}

[data-theme="deep-ether"] .badge-mod {
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}

/* --- 17. NOISE TEXTURE — anti-banding on deep surfaces --- */
/* At L*<10, flat CSS colors show visible banding on 8-bit displays.
   A 1% opacity SVG noise overlay breaks the banding without
   being consciously visible. Linear and Stripe use this technique.
   Applied only to body to avoid stacking on child elements. */
[data-theme="dark"]::after,
[data-theme="grey"]::after,
[data-theme="custom"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* Deep Ether: dedicated finer grain + higher opacity for abyssal texture */
[data-theme="deep-ether"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* --- 18. POST SEPARATOR — gradient fade instead of hard border --- */
/* Apple-style: instead of a 1px border between posts,
   use a gradient that fades at the edges. More organic. */
[data-theme="dark"] .post + .post::before,
[data-theme="grey"] .post + .post::before,
[data-theme="custom"] .post + .post::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 20px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border-color) 15%,
    var(--border-color) 85%,
    transparent 100%
  );
}

/* Deep Ether: azure-tinted horizon separator between posts */
[data-theme="deep-ether"] .post + .post::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 20px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--primary-azure) 15%, transparent) 20%,
    color-mix(in srgb, var(--primary-azure) 20%, transparent) 50%,
    color-mix(in srgb, var(--primary-azure) 15%, transparent) 80%,
    transparent 100%
  );
}

/* Light Ether: warm pear-tinted ceramic groove between posts */
[data-theme="light-ether"] .post + .post::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 24px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--primary-matcha) 12%, var(--border-color)) 20%,
    color-mix(in srgb, var(--primary-matcha) 18%, var(--border-color)) 50%,
    color-mix(in srgb, var(--primary-matcha) 12%, var(--border-color)) 80%,
    transparent 100%
  );
}

/* Forum post separators are now handled by spacing only, not by a painted rule */
[data-theme="dark"] .post + .post::before,
[data-theme="grey"] .post + .post::before,
[data-theme="custom"] .post + .post::before,
[data-theme="deep-ether"] .post + .post::before,
[data-theme="light-ether"] .post + .post::before {
  content: none;
  display: none;
}

/* =======================================
   GLOBAL RESET & ACCESSIBILITY
   ======================================= */

/* Smooth scrolling with reduced-motion respect */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Reduced motion - disable all animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* SPLIT-SCREEN FIX: On desktop, prevent global body scroll.
   The app-layout flex container handles all scrolling internally. */
@media (min-width: 769px) {
  html,
  body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

body {
  font-family: var(--font-family-base);
  font-feature-settings: "tnum", "cv05";
  background-color: var(--bg-body);
  color: var(--text-main);
  font-size: var(--text-base);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* WEB INTERFACE GUIDELINES: Smooth theme transition to prevent jarring color snap */
  transition:
    background-color 0.3s ease,
    color 0.2s ease;
}

/* =======================================
   FOCUS MANAGEMENT - Accessibility
   ======================================= */

/* Modern focus-visible support */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius-sm);
}

/* Specific focus styles for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-color);
}

/* Skip to main content link (screen reader) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* =======================================
   UTILITY CLASSES
   ======================================= */

/* =======================================
   PERFORMANCE OPTIMIZATIONS (MAJOR FIX)
   ======================================= */

/* GPU-accelerated scrolling containers */
#posts-container {
  contain: content;
  /* Isolate paint/layout to improve scroll performance */
}

/* Optimize elements that animate/move */
.post,
.topic-card {
  contain: style;
  /* Prevent style recalc from affecting siblings */
  /* NOTE: layout containment removed — it clips absolutely-positioned
       children (swipe indicators, orbit pseudo-elements on grade posts) */
}

/* AUDIT FIX: Topic cards are clickable — need pointer cursor */
.topic-card {
  cursor: pointer;
  /* Prevent blue/gray tap highlight flash on mobile during scroll */
  -webkit-tap-highlight-color: transparent;
  /* FLUIDITY: Remove 300ms delay on touch devices */
  touch-action: manipulation;
  /* MOBILE FIX: Prevent text selection on tap/long-press (topic list is interactive, not text content) */
  -webkit-user-select: none;
  user-select: none;
}

/* AUDIT FIX: Reduced motion — disable transform-based hover effects */
@media (prefers-reduced-motion: reduce) {
  .topic-card:hover,
  .post:hover,
  .btn:hover,
  .btn-create-topic:hover {
    transform: none !important;
  }
}

/* GPU layer promotion for animated elements */
.nav-btn,
.new-messages-toast,
.floating-btn {
  will-change: transform, opacity;
  transform: translateZ(0);
  /* Force GPU layer */
}

/* Skeleton loading styles */
.skeleton-post {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line {
  height: 1em;
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 25%,
    var(--border-color) 50%,
    var(--bg-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-xs);
  margin-bottom: 8px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-surface-alt);
}

.skeleton-name {
  width: 120px;
}

.skeleton-date {
  width: 60px;
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* No-animation class for prepended posts */
.no-anim,
.no-anim * {
  animation: none !important;
  transition: none !important;
}

/* =======================================
   NETWORK ERROR TOAST (MODERATE FIX)
   ======================================= */
.network-error-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: var(--z-toast, 1080);
  background: var(--accent-danger, #ff3b30);
  color: white;
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease-out-expo, ease);
}

.network-error-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.network-error-toast .toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.network-error-toast .toast-content i:first-child {
  font-size: 18px;
}

.network-error-toast .toast-message {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.network-error-toast button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.2s;
}

.network-error-toast button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.network-error-toast .toast-dismiss {
  padding: 6px 8px;
}

/* Dark theme adjustments */
[data-theme="dark"] .network-error-toast,
[data-theme="grey"] .network-error-toast,
[data-theme="custom"] .network-error-toast,
[data-theme="deep-ether"] .network-error-toast {
  background: #d32f2f;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Visibility utilities */
.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.opacity-0 {
  opacity: 0 !important;
}

/* Interactive state */
.interactive {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Text utilities */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Spacing utilities */
.m-0 {
  margin: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

/* Flex utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

a {
  color: var(--text-link);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

a:hover {
  text-decoration: none;
  color: var(--text-link-hover);
}

/* Online presence indicator animation */
@keyframes pulse-online {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Header (Global) */
header {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 1000;
  position: sticky;
  top: 0;
}

header .container {
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: none;
  /* Full width header */
}

/* Logo */
.logo a {
  color: var(--text-main);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
}

/*
.logo a::before {
  content: '🍐';
  margin-right: 6px;
  font-size: 18px;
}
*/

/* Navigation / User Panel */
.user-panel ul {
  display: flex;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* Search Bar (Header) */
.search-bar {
  flex-grow: 1;
  max-width: 300px;
  margin: 0 20px;
  position: relative;
}

.search-bar input {
  width: 100%;
  background: var(--input-bg);
  padding-left: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: var(--radius-md);
  font-size: 13px;
  border: none;
  color: var(--text-main);
}

.search-bar::before {
  /* FA search icon via CSS (replaces emoji for cross-platform consistency) */
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.5;
  pointer-events: none;
  color: var(--text-muted);
}

/* --- Master-Detail Layout --- */
.app-layout {
  display: flex;
  width: 100%;
  /* SPLIT-SCREEN: Fill all remaining space below the header */
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--bg-body);
  min-width: 0;
  min-height: 0;
}

/* Full-content pages (profile, logs, clans, etc.) — enable scrolling on desktop */
.app-layout.full-content-page .main-content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Premium thin scrollbar for full-content pages */
.app-layout.full-content-page .main-content::-webkit-scrollbar {
  width: 6px;
}

.app-layout.full-content-page .main-content::-webkit-scrollbar-track {
  background: transparent;
}

.app-layout.full-content-page .main-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.app-layout.full-content-page .main-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Sidebar (Left) */
.sidebar {
  width: 320px;
  background: var(--bg-surface-alt);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Enable container queries for responsive topic cards during resize */
  container-type: inline-size;
  container-name: sidebar;
  /* SPLIT-SCREEN: Fill parent height, scroll internally */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  min-height: 0;
  /* Remove any top spacing that could create empty gaps */
  padding-top: 0;
  margin-top: 0;
}

.sidebar-header {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
  min-width: 0;
  min-height: 0;
}

.sidebar-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

/* Sidebar Search */
#search-container {
  padding: 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

#sidebar-search-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-main);
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

#sidebar-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-surface);
}

/* ═══════════════════════════════════════════════════════
   FORUM TABS — X.com-style horizontal switcher
   v2.0 — Theme-aware + Realm-aware (Mar 2026)
   ═══════════════════════════════════════════════════════ */
.forum-tabs {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  background: var(--bg-surface, #0d0d0f);
  user-select: none;
  -webkit-user-select: none;
}

.forum-tabs-track {
  display: flex;
  position: relative;
}

.forum-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted, #6e6e73);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  position: relative;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.forum-tab:hover:not(.active) {
  color: var(--text-secondary, #a1a1a6);
  background: var(--surface-hover, rgba(255,255,255,0.03));
}

.forum-tab.active {
  color: var(--text-main, #f5f5f7);
  font-weight: 700;
}

/* The sliding indicator bar */
.forum-tab-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent-primary, #4a90d9);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, width;
}

/* Purge mode: hide forum tabs (single shared arena) */
html.purge-active .forum-tabs {
  display: none;
}

/* ─── LIGHT ETHER: Fix black-on-black bug ─── */
[data-theme="light-ether"] .forum-tabs {
  background: var(--bg-surface, #fafaf8);
  border-bottom-color: rgba(26, 36, 27, 0.08);
}

[data-theme="light-ether"] .forum-tab {
  color: var(--text-muted, #6b7280);
}

[data-theme="light-ether"] .forum-tab:hover:not(.active) {
  color: var(--text-secondary, #374151);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light-ether"] .forum-tab.active {
  color: var(--text-main, #1a1a1a);
}

/* ─── DEEP ETHER ─── */
[data-theme="deep-ether"] .forum-tabs {
  background: var(--bg-surface, #0a0e1a);
  border-bottom-color: rgba(59, 130, 246, 0.08);
}

[data-theme="deep-ether"] .forum-tab:hover:not(.active) {
  background: rgba(59, 130, 246, 0.04);
}

/* ═══════════════════════════════════════════
   REALM-SPECIFIC TABS — Accent Identity
   ═══════════════════════════════════════════ */

/* ── Bordel: Red neon, sharp ── */
html[data-realm="bordel"] .forum-tab-slider {
  background: #ff003c;
}

html[data-realm="bordel"] .forum-tab.active {
  color: #ff003c;
}

html[data-realm="bordel"] .forum-tab:hover:not(.active) {
  background: rgba(255, 0, 60, 0.04);
}

/* Bordel × Light */
html[data-realm="bordel"][data-theme="light-ether"] .forum-tab-slider {
  background: #dc2626;
}

html[data-realm="bordel"][data-theme="light-ether"] .forum-tab.active {
  color: #991b1b;
}

html[data-realm="bordel"][data-theme="light-ether"] .forum-tab:hover:not(.active) {
  background: rgba(220, 38, 38, 0.04);
}

/* ── Poirier: Sage, organic ── */
html[data-realm="poirier"] .forum-tab-slider {
  background: #6B8FA3;
  border-radius: 4px 4px 0 0;
}

html[data-realm="poirier"] .forum-tab.active {
  color: #88A9C0;
}

html[data-realm="poirier"] .forum-tab:hover:not(.active) {
  background: rgba(107, 143, 163, 0.05);
}

/* Poirier × Light */
html[data-realm="poirier"][data-theme="light-ether"] .forum-tab-slider {
  background: #5A7E91;
}

html[data-realm="poirier"][data-theme="light-ether"] .forum-tab.active {
  color: #4A7B8F;
}

html[data-realm="poirier"][data-theme="light-ether"] .forum-tab:hover:not(.active) {
  background: rgba(107, 143, 163, 0.05);
}

/* ── Beta: Electric purple ── */
html[data-realm="beta"] .forum-tab-slider {
  background: #7C3AED;
}

html[data-realm="beta"] .forum-tab.active {
  color: #a78bfa;
}

html[data-realm="beta"] .forum-tab:hover:not(.active) {
  background: rgba(124, 58, 237, 0.04);
}

/* Beta × Light */
html[data-realm="beta"][data-theme="light-ether"] .forum-tab-slider {
  background: #6d28d9;
}

html[data-realm="beta"][data-theme="light-ether"] .forum-tab.active {
  color: #5b21b6;
}

html[data-realm="beta"][data-theme="light-ether"] .forum-tab:hover:not(.active) {
  background: rgba(124, 58, 237, 0.04);
}

/* Swipe feedback */
.sidebar-topics.swiping {
  transition: none !important;
}

/* === MOBILE: Hide redundant sidebar elements ===
   "New Topic" (+) and Search are both in the bottom nav already. */
@media (max-width: 768px) {
  .sidebar-action-bar,
  #search-container,
  .sidebar-filter-panel,
  .sidebar-search-status {
    display: none !important;
    min-width: 0;
    min-height: 0;
  }

  #sidebar-view-topics {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

#sidebar-topics {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 0 0;
  box-sizing: border-box;
}

/* Main Content (Right) */
.main-content {
  flex: 1;
  min-width: 0;
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
  /* SPLIT-SCREEN: Contain children — scroll happens inside topic-scroll-container */
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

.topic-container {
  max-width: 100%;
  margin: 0;
  padding: 0 20px;
  /* FIX: Horizontal breathing room, matches topic-header */
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* Prevent horizontal spill */
  min-height: 100%;
  /* FIX: Fill scroll container even with few posts — prevents black gap */
}

/* ===================================
   SIDEBAR ACTION BAR - Premium 2026 Redesign
   Compact unified toolbar — balanced proportions
   =================================== */
.sidebar-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  flex-shrink: 0; /* FIX: Prevents deformation on scroll */

  /* STICKY FIX: Never scroll away or get compressed by layout shifts */
  position: sticky;
  top: 0;
  z-index: 10;

  /* Surface moderne */
  background: var(--bg-surface);
  border-radius: 14px;
  border: 1px solid var(--border-color);

  /* Profondeur subtile */
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.02);

  /* Glassmorphisme léger */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  min-width: 0;
  min-height: 0;
}

/* Anneau de focus accessible */
.sidebar-action-bar:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(168, 197, 69, 0.12);
  min-width: 0;
  min-height: 0;
}

/* CTA Primaire - Nouveau Sujet */
.btn-create-topic {
  flex: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;

  /* Typographie */
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;

  /* Dégradé vivant — Poire zénithal */
  background: var(
    --topic-btn-bg,
    linear-gradient(180deg, #b5d15a 0%, #a8c545 100%)
  );
  color: var(--topic-btn-text, #141c15) !important;
  text-decoration: none !important;

  /* Forme */
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.btn-create-topic:hover {
  transform: translateY(-1px);
  background: var(--topic-btn-bg-hover, var(--topic-btn-bg));
  box-shadow:
    var(--topic-btn-shadow, 0 4px 10px rgba(168, 197, 69, 0.25)),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  filter: brightness(1.04);
}

.btn-create-topic:active {
  transform: translateY(0) scale(0.98);
}

.btn-create-topic i {
  font-size: 11px;
}

/* ===================================
   FORUM BAN — Visual indicators
   =================================== */

/* Disabled state when user is banned from the current forum */
.btn-create-topic.forum-banned {
  background: var(--bg-surface-alt) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(1);
  box-shadow: none !important;
  transform: none !important;
}

/* Ban banner above the topic list in the sidebar */
.forum-ban-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 8px;
  background: linear-gradient(
    135deg,
    rgba(198, 40, 40, 0.15) 0%,
    rgba(198, 40, 40, 0.08) 100%
  );
  border: 1px solid rgba(198, 40, 40, 0.3);
  border-radius: 10px;
  color: #ef5350;
  font-size: 12px;
  line-height: 1.4;
  animation: forum-ban-slide-in 0.3s ease-out;
}

.forum-ban-banner > i {
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  opacity: 0.9;
}

.forum-ban-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forum-ban-banner-text strong {
  font-size: 12.5px;
  color: #ef5350;
}

.forum-ban-banner-text span {
  font-size: 11px;
  color: var(--text-muted);
}

@keyframes forum-ban-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Topic view forum ban alert — enriched layout */
.forum-ban-alert {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}

.forum-ban-alert > i {
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.forum-ban-alert > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forum-ban-alert > div span {
  font-size: 0.85em;
  opacity: 0.85;
}

/* Bouton Recherche — Filled Ghost (discoverable) */
.sidebar-search-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  background: var(--bg-surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 10px;

  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
  min-width: 0;
  min-height: 0;
}

.sidebar-search-btn:hover {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--accent-primary);
  transform: scale(1.05);
  min-width: 0;
  min-height: 0;
}

.sidebar-search-btn:active {
  transform: scale(0.93);
  min-width: 0;
  min-height: 0;
}



/* ===== Deep Ether Theme ===== */
[data-theme="deep-ether"] .sidebar-action-bar {
  background: rgba(12, 18, 38, 0.88);
  /* v6: indigo-tinted (was neutral grey rgba(22,22,22)) */
  border-color: rgba(99, 140, 230, 0.08);
  box-shadow:
    0 2px 8px rgba(4, 8, 30, 0.3),
    inset 0 1px 0 rgba(99, 140, 230, 0.04);
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .sidebar-action-bar:focus-within {
  border-color: var(--primary-azure);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--primary-azure) 12%, transparent);
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .btn-create-topic {
  background: linear-gradient(135deg, var(--primary-azure) 0%, #1d4ed8 100%);
  color: #eef0fa;
  /* v6: indigo-white instead of pure white */
  border-color: rgba(99, 140, 230, 0.12);
}

[data-theme="deep-ether"] .btn-create-topic:hover {
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--primary-azure) 30%, transparent),
    inset 0 1px 0 rgba(99, 140, 230, 0.18);
}

[data-theme="deep-ether"] .sidebar-search-btn {
  background: rgba(99, 140, 230, 0.05);
  border-color: rgba(99, 140, 230, 0.08);
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .sidebar-search-btn:hover {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary-azure);
  border-color: rgba(59, 130, 246, 0.28);
  min-width: 0;
  min-height: 0;
}

/* ===== Light Ether Theme ===== */
[data-theme="light-ether"] .sidebar-action-bar {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.02);
  min-width: 0;
  min-height: 0;
}

[data-theme="light-ether"] .sidebar-action-bar:focus-within {
  border-color: rgba(168, 197, 69, 0.5);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 0 0 2px rgba(168, 197, 69, 0.15);
  min-width: 0;
  min-height: 0;
}

/* Bouton Créer Topic — Pastille volumétrique Poire */
[data-theme="light-ether"] .btn-create-topic {
  background: var(
    --topic-btn-bg,
    linear-gradient(180deg, #b5d15a 0%, #a8c545 100%)
  );
  color: var(--topic-btn-text, #1a241b);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(26, 36, 27, 0.08),
    var(--topic-btn-shadow-light, 0 2px 6px rgba(168, 197, 69, 0.2));
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out-expo);
}

[data-theme="light-ether"] .btn-create-topic:hover {
  transform: translateY(-1px);
  background: var(
    --topic-btn-bg-hover,
    linear-gradient(180deg, #aacc3e 0%, #95b332 100%)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(26, 36, 27, 0.1),
    var(--topic-btn-shadow-light-hover, 0 4px 14px rgba(168, 197, 69, 0.3));
}

[data-theme="light-ether"] .btn-create-topic:active {
  transform: scale(0.97);
  background: linear-gradient(180deg, #9aaf2e 0%, #8ca82d 100%);
  box-shadow:
    inset 0 2px 4px rgba(26, 36, 27, 0.12),
    0 1px 2px rgba(168, 197, 69, 0.1);
  transition-duration: var(--duration-instant);
}

[data-theme="light-ether"] .sidebar-search-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-out-expo);
  min-width: 0;
  min-height: 0;
}

[data-theme="light-ether"] .sidebar-search-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #3f5e14;
  border-color: rgba(168, 197, 69, 0.3);
  min-width: 0;
  min-height: 0;
}

/* Mobile Sidebar Action Bar: consolidated into single mobile block (L.15643+) */

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR FILTER PANEL — Premium Search + Filters 2026
   ═══════════════════════════════════════════════════════════════════ */

.sidebar-filter-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    padding 0.3s ease;
  padding: 0 10px;
  border-bottom: 1px solid transparent;
  background: var(--bg-surface-alt);
  min-width: 0;
  min-height: 0;
}

.sidebar-filter-panel.open {
  max-height: 140px;
  opacity: 1;
  padding: 10px;
  border-bottom-color: var(--border-color);
  min-width: 0;
  min-height: 0;
}

/* Filter tabs (Tout / Populaires / Moi) */
.sidebar-filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  min-width: 0;
  min-height: 0;
}

.sidebar-filter-tabs .filter-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
}

.sidebar-filter-tabs .filter-btn:hover {
  background: var(--surface-hover);
  color: var(--text-main);
  min-width: 0;
  min-height: 0;
}

.sidebar-filter-tabs .filter-btn.active {
  background: var(--bg-surface);
  color: var(--accent-primary);
  border-color: var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  min-width: 0;
  min-height: 0;
}

/* Close button (✕) inside filter tabs */
.sidebar-filter-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  min-width: 0;
  min-height: 0;
}

.sidebar-filter-close:hover {
  background: var(--surface-hover);
  color: var(--text-main);
  border-color: var(--border-color);
  min-width: 0;
  min-height: 0;
}

/* Search input wrapper */
.sidebar-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

.sidebar-search-wrap .search-icon {
  position: absolute;
  left: 8px;
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
  transition: color 0.2s;
  opacity: 0.6;
  min-width: 0;
  min-height: 0;
}

.sidebar-search-wrap:focus-within .search-icon {
  color: var(--accent-primary);
  min-width: 0;
  min-height: 0;
}

.sidebar-search-wrap .sidebar-search-input {
  width: 100%;
  padding: 8px 32px 8px 28px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-base, var(--bg-body));
  color: var(--text-main);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  min-width: 0;
  min-height: 0;
}

.sidebar-search-wrap .sidebar-search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 168, 197, 69), 0.12);
  min-width: 0;
  min-height: 0;
}

.sidebar-search-wrap .sidebar-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
  min-width: 0;
  min-height: 0;
}

/* Clear button (✕) */
.sidebar-search-clear {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s,
    color 0.15s,
    background 0.15s;
  min-width: 0;
  min-height: 0;
}

.sidebar-search-clear.visible {
  opacity: 1;
  pointer-events: auto;
  min-width: 0;
  min-height: 0;
}

.sidebar-search-clear:hover {
  color: var(--text-main);
  background: var(--surface-hover);
  min-width: 0;
  min-height: 0;
}

/* Result counter */
.sidebar-search-status {
  font-size: 11px;
  color: var(--text-muted);
  padding: 5px 10px 2px;
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}

.sidebar-search-status.visible {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.sidebar-search-status .search-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: search-spin 0.6s linear infinite;
  min-width: 0;
  min-height: 0;
}

/* Ghost loading eradication under "Nouveau Sujet" */
#sidebar-search-status,
#sidebar-search-status.visible {
  display: none !important;
}

#sidebar-search-status .search-spinner {
  display: none !important;
  animation: none !important;
}

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

/* Search term highlight in topic titles */
.sidebar-topics mark.search-hl {
  background: rgba(var(--accent-primary-rgb, 168, 197, 69), 0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  min-width: 0;
  min-height: 0;
}

/* Empty state */
.sidebar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.sidebar-empty-state i {
  font-size: 2em;
  opacity: 0.4;
  margin-bottom: 4px;
  min-width: 0;
  min-height: 0;
}

.sidebar-empty-state p {
  margin: 0;
  font-size: 0.88em;
  line-height: 1.4;
  min-width: 0;
  min-height: 0;
}

/* ─── Deep Ether overrides ─── */
[data-theme="deep-ether"] .sidebar-filter-panel {
  background: rgba(26, 29, 43, 0.95);
  /* v6: indigo-tinted (was neutral grey rgba(69,72,76)) */
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .sidebar-filter-tabs .filter-btn.active {
  background: rgba(99, 140, 230, 0.08);
  color: var(--primary-azure);
  border-color: rgba(99, 140, 230, 0.1);
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .sidebar-search-wrap .sidebar-search-input:focus {
  border-color: var(--primary-azure);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .sidebar-search-wrap:focus-within .search-icon {
  color: var(--primary-azure);
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .sidebar-topics mark.search-hl {
  background: rgba(59, 130, 246, 0.25);
  min-width: 0;
  min-height: 0;
}

/* ─── Light Ether overrides ─── */
[data-theme="light-ether"] .sidebar-filter-panel {
  background: #f8f7f4;
  min-width: 0;
  min-height: 0;
}

[data-theme="light-ether"] .sidebar-filter-tabs .filter-btn.active {
  background: white;
  color: #5a7a1a;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  min-width: 0;
  min-height: 0;
}

[data-theme="light-ether"] .sidebar-search-wrap .sidebar-search-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.1);
  min-width: 0;
  min-height: 0;
}

[data-theme="light-ether"] .sidebar-search-wrap .sidebar-search-input:focus {
  border-color: var(--accent-primary, #a8c545);
  box-shadow: 0 0 0 3px var(--focus-ring-color, rgba(168, 197, 69, 0.15));
  min-width: 0;
  min-height: 0;
}

/* ===================================
   SIDEBAR TOPICS - PREMIUM REDESIGN 2026
   =================================== */

/* --- Carte de base - VERSION CONDENSÉE 2026 --- */
.topic-card {
  background: var(--bg-surface);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: none;
  line-height: 1.3;
}

/* Effet au survol - subtil pour version condensée */
.topic-card:hover {
  background: var(--bg-surface-alt);
  border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
  box-shadow: var(--topic-shadow-hover, 0 2px 8px rgba(0, 0, 0, 0.06));
}

/* Desktop-only press feedback — on mobile :active fires during scroll, causing flicker */
@media (hover: hover) {
  .topic-card:active {
    transform: scale(0.99);
  }
}

/* === GREY THEME: Force neutral palette — no green residuals === */
[data-theme="grey"] .topic-card:hover {
  border-color: rgba(180, 180, 180, 0.35);
}

[data-theme="grey"] .btn-create-topic {
  background: linear-gradient(180deg, #6b6b6b 0%, #555555 100%);
  color: #fff !important;
}

[data-theme="grey"] .btn-create-topic:hover {
  background: linear-gradient(180deg, #7a7a7a 0%, #636363 100%);
}

/* ===================================
   ACTIVE TOPIC - "Glow Dot" Design 2026
   Point lumineux + lueur externe subtile
   =================================== */
.topic-card.active {
  background: var(
    --topic-active-bg,
    linear-gradient(
      135deg,
      rgba(168, 197, 69, 0.06) 0%,
      rgba(168, 197, 69, 0.02) 100%
    )
  );
  border-color: var(--topic-active-border, rgba(168, 197, 69, 0.25));
  box-shadow: var(--topic-active-shadow, 0 0 20px rgba(168, 197, 69, 0.12));
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Dot indicator au lieu d'une barre */
.topic-card.active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--topic-active-dot, var(--accent-primary));
  border-radius: 50%;
  box-shadow:
    0 0 8px var(--topic-active-dot, var(--accent-primary)),
    0 0 16px var(--topic-active-dot-glow, rgba(168, 197, 69, 0.5));
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    box-shadow:
      0 0 8px var(--topic-active-dot, var(--accent-primary)),
      0 0 16px var(--topic-active-dot-glow, rgba(168, 197, 69, 0.5));
    opacity: 1;
  }

  50% {
    box-shadow:
      0 0 12px var(--topic-active-dot, var(--accent-primary)),
      0 0 24px var(--topic-active-dot-glow-pulse, rgba(168, 197, 69, 0.7));
    opacity: 0.9;
  }
}

/* --- GESTION DES ÉPINGLÉS (Pinned) - Fond teinté subtil --- */
.topic-card.pinned {
  background: var(
    --topic-pinned-bg,
    linear-gradient(135deg, rgba(168, 197, 69, 0.05) 0%, transparent 100%)
  );
  border-color: var(--topic-pinned-border, rgba(168, 197, 69, 0.3));
}

.topic-card.pinned .topic-pin-badge {
  color: var(--topic-pinned-badge, var(--accent-text));
  filter: drop-shadow(
    0 0 5px var(--topic-pinned-badge-shadow, rgba(168, 197, 69, 0.3))
  );
  transform: rotate(45deg);
  display: inline-block;
}

/* --- GESTION DES TENDANCES (Hot) - Style gradient comme les épinglés --- */
.topic-card.hot {
  background: var(
    --topic-hot-bg,
    linear-gradient(
      135deg,
      rgba(255, 87, 34, 0.1) 0%,
      rgba(255, 152, 0, 0.05) 100%
    )
  );
  border-color: var(--topic-hot-border, rgba(255, 87, 34, 0.5));
  box-shadow: var(--topic-hot-shadow, 0 0 8px rgba(255, 87, 34, 0.1));
  position: relative;
  z-index: 1;
  /* Prevent shadow bleed onto card below */
}

.topic-card.hot:hover {
  background: var(
    --topic-hot-bg-hover,
    linear-gradient(
      135deg,
      rgba(255, 87, 34, 0.15) 0%,
      rgba(255, 152, 0, 0.08) 100%
    )
  );
  border-color: var(--topic-hot-border-hover, rgba(255, 87, 34, 0.65));
  box-shadow: var(--topic-hot-shadow-hover, 0 0 12px rgba(255, 87, 34, 0.18));
}

/* Bump flash animation - uses outline-based flash to avoid background conflicts */
.topic-card.bump-flash {
  animation: bumpFlash 1s ease-out;
}

/* Hot topics get their own bump flash (orange) to avoid gradient/bg conflicts */
.topic-card.hot.bump-flash {
  animation: bumpFlashHot 1s ease-out;
}

@keyframes bumpFlash {
  0% {
    box-shadow:
      0 0 0 2px var(--topic-bump-out, rgba(168, 197, 69, 0.5)),
      0 0 16px var(--topic-bump-in, rgba(168, 197, 69, 0.25));
  }

  100% {
    box-shadow: none;
  }
}

@keyframes bumpFlashHot {
  0% {
    box-shadow:
      0 0 0 2px var(--topic-hot-bump-out, rgba(255, 87, 34, 0.5)),
      0 0 16px var(--topic-hot-bump-in, rgba(255, 87, 34, 0.25));
  }

  100% {
    box-shadow: var(--topic-hot-shadow, 0 0 8px rgba(255, 87, 34, 0.1));
  }
}

/* Soft-deleted topics (staff view) */
.topic-card.topic-deleted {
  opacity: 0.5;
  border-left: 3px solid var(--accent-danger);
}

.topic-card.topic-deleted:hover {
  opacity: 0.75;
}

.topic-card.topic-deleted .topic-card-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Deleted icon - replaces inline styles */
.topic-deleted-icon {
  color: var(--accent-danger);
  font-size: 10px;
  margin-right: 2px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   TOPIC NOIR — Restricted Dark Topics (Lvl 10+)
   Purple/indigo aesthetic for mystery & exclusivity
   ═══════════════════════════════════════════ */
.topic-card.topic-noir {
  border-left: 3px solid rgba(124, 58, 237, 0.6);
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.08) 0%,
    transparent 100%
  );
}

.topic-card.topic-noir:hover {
  border-left-color: rgba(124, 58, 237, 0.85);
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.12) 0%,
    rgba(139, 92, 246, 0.04) 100%
  );
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.1);
}

/* Moon badge icon in sidebar */
.topic-noir-badge {
  color: #a78bfa;
  font-size: 10px;
  margin-right: 2px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.4));
}

/* Dark topic bump animation */
.topic-card.topic-noir.bump-flash {
  animation: bumpFlashNoir 1s ease-out;
}

@keyframes bumpFlashNoir {
  0% {
    box-shadow:
      0 0 0 2px rgba(124, 58, 237, 0.5),
      0 0 16px rgba(124, 58, 237, 0.25);
  }

  100% {
    box-shadow: none;
  }
}

/* --- Deep Ether (Dark) Theme --- */
[data-theme="deep-ether"] .topic-card.topic-noir {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.12) 0%,
    rgba(30, 20, 50, 0.3) 100%
  );
  border-left-color: rgba(139, 92, 246, 0.5);
}

[data-theme="deep-ether"] .topic-card.topic-noir:hover {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.18) 0%,
    rgba(30, 20, 50, 0.4) 100%
  );
  border-left-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.15);
}

[data-theme="deep-ether"] .topic-noir-badge {
  color: #c4b5fd;
  filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.4));
}

/* --- Light Ether Theme --- */
[data-theme="light-ether"] .topic-card.topic-noir {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.06) 0%,
    transparent 100%
  );
  border-left-color: rgba(124, 58, 237, 0.4);
}

[data-theme="light-ether"] .topic-card.topic-noir:hover {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.1) 0%,
    rgba(139, 92, 246, 0.03) 100%
  );
  border-left-color: rgba(124, 58, 237, 0.7);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.08);
}

[data-theme="light-ether"] .topic-noir-badge {
  color: #7c3aed;
  filter: drop-shadow(0 0 3px rgba(124, 58, 237, 0.3));
}

/* ════════════════════════════════════════
   TOPIC LOUP-GAROU — Sidebar card styling
   ════════════════════════════════════════ */

/* Wolf badge icon in sidebar */
.topic-werewolf-badge {
  font-size: 11px;
  margin-right: 2px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(229, 62, 62, 0.4));
  animation: wolfPulse 3s ease-in-out infinite;
}

@keyframes wolfPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

/* Werewolf topic card base */
.topic-card.topic-werewolf {
  border-left-color: rgba(229, 62, 62, 0.5);
}

.topic-card.topic-werewolf.bump-flash {
  animation: bumpFlashWolf 1s ease-out;
}

@keyframes bumpFlashWolf {
  0% {
    box-shadow:
      0 0 0 2px rgba(229, 62, 62, 0.5),
      0 0 16px rgba(229, 62, 62, 0.25);
  }

  100% {
    box-shadow: none;
  }
}

/* Deep Ether theme */
[data-theme="deep-ether"] .topic-card.topic-werewolf {
  background: linear-gradient(
    135deg,
    rgba(229, 62, 62, 0.08) 0%,
    rgba(99, 102, 241, 0.06) 100%
  );
  border-left-color: rgba(229, 62, 62, 0.5);
}

[data-theme="deep-ether"] .topic-card.topic-werewolf:hover {
  background: linear-gradient(
    135deg,
    rgba(229, 62, 62, 0.14) 0%,
    rgba(99, 102, 241, 0.1) 100%
  );
  border-left-color: rgba(229, 62, 62, 0.8);
  box-shadow: 0 0 16px rgba(229, 62, 62, 0.12);
}

/* Light Ether theme */
[data-theme="light-ether"] .topic-card.topic-werewolf {
  background: linear-gradient(
    135deg,
    rgba(229, 62, 62, 0.04) 0%,
    transparent 100%
  );
  border-left-color: rgba(229, 62, 62, 0.4);
}

[data-theme="light-ether"] .topic-card.topic-werewolf:hover {
  background: linear-gradient(
    135deg,
    rgba(229, 62, 62, 0.08) 0%,
    rgba(229, 62, 62, 0.02) 100%
  );
  border-left-color: rgba(229, 62, 62, 0.7);
  box-shadow: 0 0 10px rgba(229, 62, 62, 0.06);
}

/* ═══════════════════════════════════════════
   FLAIR NOIR — Topic Composer Chip
   ═══════════════════════════════════════════ */
.flair-chip.flair-noir {
  color: #a78bfa;
}

.flair-option:hover .flair-chip.flair-noir {
  border-color: #7c3aed;
}

.flair-option input:checked + .flair-chip.flair-noir {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  border-color: #7c3aed;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

/* Topic Card Body - Condensé */
.topic-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Topic Card Header - Condensé */
.topic-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Topic Author Avatar - Circle (standard UX) */
.topic-author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-color);
  background: var(--bg-surface-alt);
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.topic-card:hover .topic-author-avatar {
  border-color: var(--accent-primary);
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(168, 197, 69, 0.15);
}

/* Pin badge - Style moderne avec rotation */
.topic-pin-badge {
  flex-shrink: 0;
  color: var(--accent-text);
  font-size: 11px;
  opacity: 0.9;
  margin-right: 3px;
  transition: transform 0.2s ease;
}

/* Topic title - Condensé (2 lignes max) */
.topic-card-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-main);
  flex: 1 1 0%;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.topic-card:hover .topic-card-title {
  color: var(--accent-text);
}

/* Participated indicator */
.topic-participated {
  flex-shrink: 0;
  color: var(--accent-primary);
  font-size: 9px;
  margin-left: 5px;
  vertical-align: middle;
}

/* Topic Card Footer - Condensé inline */
.topic-card-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

/* Author info - Inline condensé */
.topic-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.author-name {
  font-size: 12px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  color: var(--text-muted);
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
}

/* Author role colors */
.author-name.author-admin {
  color: var(--role-admin);
  font-weight: 600;
}

.author-name.author-mod {
  color: var(--role-mod);
  font-weight: 600;
}

/* Gamification role colors — matched to post/usercard colors */
.author-name.author-juge {
  color: #87cefa;
  font-weight: 600;
}

.author-name.author-mod-sous {
  background: linear-gradient(90deg, #00ff88, #8a2be2, #ff0080, #00ff88);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: modSousNameShimmer 3s linear infinite;
  font-weight: 700;
  filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.3));
}

.author-name.author-artist {
  color: #E056FD;
  font-weight: 600;
}

.author-name.author-poire {
  color: #76ff03;
  font-weight: 600;
}

.author-name.author-top-poireur {
  color: #FFD700;
  font-weight: 600;
}

/* ===================================
   LAST POSTER BADGE - Dual Display Pattern
   Shows "→ LastPoster" badge next to author when topic is bumped
   Note: .topic-author base styles are defined above (lines ~964-970)
   =================================== */

/* Inline wrapper for author name + badge */
.author-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

.author-line .author-name {
  flex-shrink: 1;
  min-width: 0;
}

/* Badge base style - starts hidden */
.last-poster-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  /* Size & spacing */
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;

  /* Appearance */
  background: linear-gradient(
    135deg,
    rgba(168, 197, 69, 0.15) 0%,
    rgba(168, 197, 69, 0.08) 100%
  );
  color: var(--accent-text);
  border: 1px solid rgba(168, 197, 69, 0.25);
  border-radius: var(--radius-md);

  /* Start invisible for animation */
  opacity: 0;
  transform: translateX(-10px) scale(0.9);
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Icon styling */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.last-poster-badge i {
  font-size: 9px;
  opacity: 0.8;
}

/* Badge visible state - slide in and glow */
.last-poster-badge.last-poster-badge-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  animation: lastPosterGlow 2s ease-in-out infinite;
}

/* Topic Meta Line - Reorganized (Author • Date • Replies) */
.topic-card-meta-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 4px;
}

.topic-meta-sep {
  opacity: 0.4;
  font-size: 0.9em;
}

.topic-card-meta-line .topic-meta-sep,
.topic-card-meta-line .topic-date,
.topic-card-meta-line .reply-count-inline {
  flex-shrink: 0;
}

.reply-count-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  color: var(--text-muted);
  flex-shrink: 0;
}

.reply-count-inline.hot {
  color: var(--accent-warning);
  /* Orange fire for hot topics */
}

.reply-count-inline i {
  font-size: 0.9em;
  opacity: 0.8;
}

/* Footer removed, ensure no phantom spacing */
.sidebar-footer-simple {
  display: none !important;
  min-width: 0;
  min-height: 0;
}

@keyframes lastPosterGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(168, 197, 69, 0);
    border-color: rgba(168, 197, 69, 0.25);
  }

  50% {
    box-shadow: 0 0 12px 2px rgba(168, 197, 69, 0.25);
    border-color: rgba(168, 197, 69, 0.5);
  }
}

/* Badge exit animation - fade out and shrink */
.last-poster-badge.last-poster-badge-exit {
  opacity: 0;
  transform: translateX(10px) scale(0.8);
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
  animation: none;
}

/* Role-specific badge colors */
.last-poster-badge.last-poster-admin {
  color: #e53935;
  background: linear-gradient(
    135deg,
    rgba(229, 57, 53, 0.12) 0%,
    rgba(229, 57, 53, 0.05) 100%
  );
  border-color: rgba(229, 57, 53, 0.3);
}

.last-poster-badge.last-poster-admin.last-poster-badge-visible {
  animation: lastPosterGlowAdmin 2s ease-in-out infinite;
}

@keyframes lastPosterGlowAdmin {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
    border-color: rgba(229, 57, 53, 0.3);
  }

  50% {
    box-shadow: 0 0 12px 2px rgba(229, 57, 53, 0.2);
    border-color: rgba(229, 57, 53, 0.5);
  }
}

.last-poster-badge.last-poster-mod {
  color: #43a047;
  background: linear-gradient(
    135deg,
    rgba(67, 160, 71, 0.12) 0%,
    rgba(67, 160, 71, 0.05) 100%
  );
  border-color: rgba(67, 160, 71, 0.3);
}

.last-poster-badge.last-poster-mod.last-poster-badge-visible {
  animation: lastPosterGlowMod 2s ease-in-out infinite;
}

@keyframes lastPosterGlowMod {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(67, 160, 71, 0);
    border-color: rgba(67, 160, 71, 0.3);
  }

  50% {
    box-shadow: 0 0 12px 2px rgba(67, 160, 71, 0.2);
    border-color: rgba(67, 160, 71, 0.5);
  }
}

/* ===== Deep Ether Theme ===== */
[data-theme="deep-ether"] .last-poster-badge {
  color: var(--primary-azure);
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15) 0%,
    rgba(13, 102, 255, 0.05) 100%
  );
  border-color: rgba(59, 130, 246, 0.28);
}

[data-theme="deep-ether"] .last-poster-badge.last-poster-badge-visible {
  animation: lastPosterGlowDeep 2s ease-in-out infinite;
}

@keyframes lastPosterGlowDeep {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(13, 102, 255, 0);
    border-color: rgba(59, 130, 246, 0.28);
  }

  50% {
    box-shadow: 0 0 12px 2px rgba(59, 130, 246, 0.25);
    border-color: rgba(13, 102, 255, 0.5);
  }
}

/* ===== Light Ether Theme ===== */
[data-theme="light-ether"] .last-poster-badge {
  color: #3f5e14;
  background: rgba(168, 197, 69, 0.12);
  border-color: rgba(168, 197, 69, 0.25);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .last-poster-badge {
    transition: opacity 0.15s ease;
    transform: none;
  }

  .last-poster-badge.last-poster-badge-visible {
    animation: none;
    box-shadow: 0 0 8px 1px rgba(168, 197, 69, 0.15);
  }

  .last-poster-badge.last-poster-badge-exit {
    transform: none;
  }
}

.topic-date {
  font-size: 9px;
  font-family: "Montserrat", sans-serif;
  color: var(--text-muted);
  opacity: 0.6;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Topic stats - Position absolue haut-droite */
.topic-stats {
  position: absolute;
  top: 6px;
  right: 8px;
  flex-shrink: 0;
}

/* Reply count badge - Compact */
.reply-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: var(--bg-surface-alt);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.reply-count i {
  font-size: 8px;
  opacity: 0.7;
}

.topic-card:hover .reply-count {
  background: var(--accent-primary);
  color: white;
}

.topic-card:hover .reply-count i {
  opacity: 1;
}

/* Hot badge (20+ replies) - Identique aux autres au repos, illuminé au survol */
.reply-count.hot {
  /* État par défaut : IDENTIQUE aux autres badges (neutre) */
  /* Le seul indicateur est l'icône de feu */
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.reply-count.hot i {
  opacity: 0.7;
  color: var(--text-muted);
  transition:
    opacity 0.3s ease,
    color 0.3s ease;
}

/* Au survol de la CARTE : le badge s'illumine en orange */
.topic-card:hover .reply-count.hot {
  background: linear-gradient(135deg, #ff6b35 0%, #ff3b30 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
  animation: pulseHot 1.5s ease-in-out 3;
  /* Audit fix: limited from infinite to 3 cycles — reduces visual stress */
}

.topic-card:hover .reply-count.hot i {
  opacity: 1;
  color: white;
}

@keyframes pulseHot {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
  }

  50% {
    box-shadow: 0 2px 12px rgba(255, 59, 48, 0.6);
  }
}

/* --- Ajustements Spécifiques Deep Ether --- */
[data-theme="deep-ether"] .topic-card {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

[data-theme="deep-ether"] .topic-card:hover {
  background: var(--bg-surface-alt);
  border-color: var(--border-subtle);
  box-shadow: 0 2px 10px rgba(28, 30, 34, 0.25);
}

[data-theme="deep-ether"] .topic-card:hover .topic-author-avatar {
  border-color: var(--primary-azure);
}

[data-theme="deep-ether"] .topic-card.active {
  background: linear-gradient(
    135deg,
    rgba(13, 102, 255, 0.08) 0%,
    rgba(13, 102, 255, 0.02) 100%
  );
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: 0 0 20px rgba(13, 102, 255, 0.15);
}

/* Dot Azure pour Deep Ether */
[data-theme="deep-ether"] .topic-card.active::before {
  background: var(--primary-azure);
  box-shadow:
    0 0 8px var(--primary-azure),
    0 0 16px rgba(13, 102, 255, 0.6);
}

[data-theme="deep-ether"] .topic-card.pinned .topic-pin-badge {
  color: var(--primary-azure);
  filter: drop-shadow(0 0 5px rgba(13, 102, 255, 0.4));
}

[data-theme="deep-ether"] .topic-card.hot {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="deep-ether"] .topic-card:hover .reply-count:not(.hot) {
  background: var(--primary-azure);
}

[data-theme="dark"] .topic-card-title,
[data-theme="grey"] .topic-card-title,
[data-theme="custom"] .topic-card-title,
[data-theme="deep-ether"] .topic-card-title {
  color: var(--text-main);
}

[data-theme="dark"] .topic-card:hover .topic-card-title,
[data-theme="grey"] .topic-card:hover .topic-card-title,
[data-theme="custom"] .topic-card:hover .topic-card-title,
[data-theme="deep-ether"] .topic-card:hover .topic-card-title {
  color: var(--text-main);
}

/* Let .author-name use its default var(--text-muted) or specific role colors without theme overrides */
[data-theme="dark"] .topic-card-meta-line,
[data-theme="grey"] .topic-card-meta-line,
[data-theme="custom"] .topic-card-meta-line,
[data-theme="dark"] .topic-card-meta-line .topic-date,
[data-theme="grey"] .topic-card-meta-line .topic-date,
[data-theme="custom"] .topic-card-meta-line .topic-date,
[data-theme="dark"] .topic-card-meta-line .topic-meta-sep,
[data-theme="grey"] .topic-card-meta-line .topic-meta-sep,
[data-theme="custom"] .topic-card-meta-line .topic-meta-sep,
[data-theme="dark"] .reply-count-inline,
[data-theme="grey"] .reply-count-inline,
[data-theme="custom"] .reply-count-inline,
[data-theme="deep-ether"] .topic-card-meta-line,
[data-theme="deep-ether"] .topic-card-meta-line .topic-date,
[data-theme="deep-ether"] .topic-card-meta-line .topic-meta-sep,
[data-theme="deep-ether"] .reply-count-inline {
  color: var(--text-muted);
}

/* --- Topic Cards — Tuiles céramique Borderless avec lévitation élastique --- */
/* Audit v10 : bordure supprimée → démarcation par contraste Avoine/Blanc + ombres. */
[data-theme="light-ether"] .topic-card {
  background: var(--bg-surface);
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  transition:
    box-shadow var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-spring),
    background var(--duration-fast) ease;
}

/* Hover : lévitation élastique (translateY spring) + ombre élargie */
[data-theme="light-ether"] .topic-card:hover {
  background: var(--bg-surface);
  box-shadow: var(--shadow-elevated);
  transform: translateY(-3px);
}

[data-theme="light-ether"] .topic-card:hover .topic-author-avatar {
  border-color: var(--accent-primary);
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}

/* Active : céramique sélectionnée + trait Poire Acide + élévation permanente */
[data-theme="light-ether"] .topic-card.active {
  background: var(--bg-surface);
  border: none;
  border-left: 3px solid var(--accent-primary);
  box-shadow: var(--shadow-elevated);
}

/* Indicateur statique Poire Acide — Audit v10 : pulsation infinite supprimée.
   Le design biophilique rejette les boucles infinies (micro-alarmes SNA).
   Indicateur à forte affordance, statique, sans néon. */
[data-theme="light-ether"] .topic-card.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 6px rgba(168, 197, 69, 0.5);
  animation: none;
  /* Statique — zéro pollution visuelle */
}

/* Audit fix: @keyframes ceramic-pulse removed — was orphan code (animation: none overrides it) */

[data-theme="light-ether"] .topic-card:hover .reply-count:not(.hot) {
  background: rgba(168, 197, 69, 0.18);
  color: #3f5e14;
}

/* Legacy support - hide old elements */
.topic-card-icon,
.folder-yellow,
.folder-red,
.topic-card-content,
.topic-card-meta,
.meta-left,
.meta-right,
.meta-author,
.meta-date,
.meta-replies,
.icon-participated {
  display: none;
}

/* Circle avatar already defined in main component block (L.1580+) */

/* ===================================
   MOBILE TOPIC CARDS — 2026 Pro Redesign
   Touch-friendly, lisible, circles avatars
   Merged from 2 duplicate blocks.
   =================================== */
/* (Styles moved to single mobile block at L.15643+) */

/* Topic View Styles */
.topic-header {
  margin-bottom: 0;
  padding: 8px 20px 6px 20px;
  margin-left: 0;
  margin-right: 0;
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
  position: sticky;
  /* SPLIT-SCREEN: Sticky context is now .topic-scroll-container, not body */
  top: 0;
  z-index: 20;
  background-color: var(--bg-body);
  margin-top: 0;
  flex-shrink: 0;
}

.topic-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--topic-title-color, var(--text-main));
  text-shadow: var(--topic-title-shadow, none);
  letter-spacing: -0.3px;
  line-height: 1.3;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: text;
  /* Clamp à 2 lignes sur desktop aussi */
  /* Single-line ellipsis — clips at THE END, not the beginning */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- New Message (Card) Design - Neo-Glass --- */
.post {
  /* Fond theme-safe (overridden par deep-ether/light-ether pour glassmorphism) */
  background: var(--post-bg);

  /* Bordures et Ombres douces */
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  /* Squircle moderne */

  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  /* Pour les badges qui dépassent */
  scroll-margin-top: 180px;

  /* Transition pour le hover + highlight */
  /* PERF v3: removed box-shadow from transition — repaints entire post bounding box.
     Box-shadow changes now snap (still looks fine, saves paint budget). */
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s ease,
    outline 0.3s ease;

  /* --- FIX CRITIQUE SCROLL --- */
  /* SUPPRIMÉ: content-visibility: auto; et contain-intrinsic-size - faussaient les calculs de hauteur */
  /* À LA PLACE, optimisation sûre : */
  contain: style;
  overflow: visible;
  position: relative;
  /* Required for swipe-reply-indicator absolute positioning */
  /* Assure que la hauteur est calculable immédiatement */
}

/* FIX: contain: layout clips orbit pseudo-elements even with overflow: visible.
   Remove containment for grade posts that have orbiting decorations. */
.post.is-top-violator,
.post.is-dieu-dechu {
  contain: style !important;
  /* Keep style containment, drop layout containment */
}

/* Supprimer la marge du dernier post pour coller à la zone de reply */
.post:last-child,
#posts-container > .post:last-child {
  margin-bottom: 0;
}

/* Effet de survol subtil (Desktop uniquement) */
@media (hover: hover) {
  .post:hover {
    /* Use theme token instead of hardcoded dark color */
    background: var(--bg-surface-alt);
    /* REMOVED: translateY(-2px) — causes layout shift while reading */
    box-shadow: var(--shadow-elevated);
  }
}

/* Entry animation for posts */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animation for real-time new messages (socket) */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.post-enter-active {
  animation: slideUpFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  border-left: 3px solid var(--accent-primary);
  /* Marqueur visuel temporaire */
}

/* Shimmer animation for loading skeletons */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

/* Consecutive posts from the same author */
.post.consecutive-post {
  margin-top: -14px;
  /* Overlap with previous post */
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.post.consecutive-post .post-header-row {
  display: none;
  /* Hide the header for consecutive posts */
}

/* Exception: Show post-actions for staff-moderated consecutive posts */
.post.consecutive-post.staff-moderated .post-header-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0;
  margin-bottom: 0;
}

.post.consecutive-post.staff-moderated .post-header-row .post-author-info {
  display: none;
}

.post.consecutive-post .post-content {
  padding-top: 0;
  /* No decorative spacer when the next message visually continues the first one */
}

/* The post before a consecutive one should have no bottom radius */
.post.has-consecutive-next {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.post.highlight {
  animation: highlight 2s ease-out;
}

@keyframes highlight {
  0% {
    background-color: rgba(168, 197, 69, 0.2);
  }

  100% {
    background-color: transparent;
  }
}

/* Note: Les règles overflow-anchor sont définies dans la section 
   "FIX SCROLL INFINI BIDIRECTIONNEL" à la fin du fichier */

/* Skeleton loading posts — topic-view variant (extends base at ~L.765) */
.skeleton-post {
  padding: var(--space-lg);
  height: 140px;
  margin-bottom: var(--space-md);
}

.skeleton-line,
.skeleton-avatar {
  /* Theme-aware shimmer (works in both light and dark themes) */
  background: var(--bg-surface-alt);
  background-image: linear-gradient(
    to right,
    var(--bg-surface-alt) 0%,
    var(--border-color) 20%,
    var(--bg-surface-alt) 40%,
    var(--bg-surface-alt) 100%
  );
  background-repeat: no-repeat;
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear forwards;
  border-radius: var(--radius-sm);
}

.skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-squircle);
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.skeleton-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-name {
  width: 100px;
  height: 14px;
}

.skeleton-date {
  width: 60px;
  height: 10px;
}

.skeleton-content .skeleton-line {
  height: 12px;
  margin-bottom: 8px;
}

/* Post Header (Avatar + Info + Date) */
.post-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: transparent;
  /* Neo-Glass: header transparent */
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}

.post-author-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.author-avatar-small {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-squircle);
  /* Ni rond, ni carré - moderne */
  object-fit: cover;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.author-avatar-small:hover {
  transform: scale(1.05) rotate(2deg);
}

.author-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

/* First row: username + level */
.author-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Clan badges row: level badge + hexagonal clan icons under username */
.author-clans {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 0;
}

/* Gap between level badge and clan icons is handled by container gap */

/* Forum post header only: tighter username/badge stack + rounded diamond badges */
.post .author-avatar-small {
  box-sizing: border-box;
}

.post .author-meta {
  gap: 2px;
}

.post .author-clans {
  gap: 6px;
}

.post .author-level-badge,
.post .author-clans .clan-badge {
  --post-author-badge-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C58 2 63 7 69 13L87 31C93 37 98 42 98 50C98 58 93 63 87 69L69 87C63 93 58 98 50 98C42 98 37 93 31 87L13 69C7 63 2 58 2 50C2 42 7 37 13 31L31 13C37 7 42 2 50 2Z' fill='black'/%3E%3C/svg%3E");
  width: 30px;
  height: 30px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  -webkit-mask-image: var(--post-author-badge-mask-image);
  mask-image: var(--post-author-badge-mask-image);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* --- Premium Clan Badges (base — overridden by Squircle 2026 block below) --- */
.author-clans .clan-badge {
  display: inline-flex;
  position: relative;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.25s ease;
  border-radius: var(--radius-squircle, 8px);
}

/* Gaussian glow: blurred duplicate image behind each clan badge */
.author-clans .clan-badge .clan-badge-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  filter: blur(5px) saturate(2) brightness(1.2);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.author-clans .clan-badge:hover .clan-badge-glow {
  opacity: 0.6;
}

.author-clans .clan-badge:hover {
  transform: scale(1.3) translateY(-2px);
  filter: brightness(1.15) saturate(1.2);
  z-index: 2;
}

/* PERF v3: removed always-on filter:saturate+contrast on badge images.
   Filter forces per-pixel repaint on all badges during scroll.
   Hover-only filter is acceptable (user-initiated, single element). */
.author-clans .clan-badge img:not(.clan-badge-glow) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-squircle, 8px);
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}

.author-clans .clan-badge:hover img:not(.clan-badge-glow) {
  filter: saturate(1.2) brightness(1.1);
  transition: filter 0.25s ease;
}

/* Mobile: slightly smaller badges */
@media (max-width: 768px) {
  .author-clans .clan-badge,
  .author-clans .clan-badge img {
    width: 26px;
    height: 26px;
  }

  .author-level-badge {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .author-level-badge svg,
  .author-level-badge img {
    width: 26px;
    height: 26px;
  }

  .author-level-badge .level-text {
    font-size: 8px;
  }

  .post .author-avatar-small {
    width: 44px;
    height: 44px;
  }

  .post .author-clans .clan-badge,
  .post .author-clans .clan-badge img {
    width: 24px;
    height: 24px;
  }

  .post .author-level-badge {
    width: 24px;
    height: 24px;
  }

  .post .author-level-badge svg,
  .post .author-level-badge img {
    width: 24px;
    height: 24px;
  }
}

.author-username {
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: var(--text-main);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.author-stats {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  padding: 0;
  margin-left: 5px;
}

/* Level badge used by template — enlarged for readability */
.author-level-badge {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: transform 0.2s ease;
  border-radius: var(--radius-squircle, 8px);
}

.author-level-badge:hover {
  transform: scale(1.15);
}

.author-level-badge svg,
.author-level-badge img {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: filter 0.2s ease;
  border-radius: var(--radius-squircle, 8px);
  object-fit: cover;
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}

.author-level-badge .level-text {
  position: relative;
  color: white;
  font-size: 9px;
  font-weight: bold;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Gold shimmer for legendary levels (50+) */
.author-level-badge.level-legendary svg {
  filter: drop-shadow(0 0 4px rgba(255, 179, 0, 0.5))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  animation: legendaryPulse 2s ease-in-out infinite;
}

@keyframes legendaryPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 179, 0, 0.4))
      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  }

  50% {
    filter: drop-shadow(0 0 8px rgba(255, 179, 0, 0.7))
      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  }
}

/* Clan overflow "+N" indicator */
.clan-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--bg-surface-alt, rgba(255, 255, 255, 0.1));
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  border: 1px solid var(--border-color);
}

.post-date {
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  white-space: nowrap;
}

.post-edited {
  font-family: "Montserrat", sans-serif;
}

.post-actions {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Mobile adjustments for posts */
@media (max-width: 768px) {
  .post-header-row {
    padding: 10px 14px;
    gap: 6px;
  }

  .post-date {
    font-size: 11px;
  }

  .post-actions {
    margin-left: auto;
  }

  /* Show only 2 clans on mobile (level badge is 1st child, not counted) */
  .author-clans a.clan-badge:nth-of-type(n + 3) {
    display: none !important;
  }

  .author-avatar-small {
    width: 32px;
    height: 32px;
  }

  .author-username {
    font-size: 13px;
  }

  /* FLUIDITY v3: Tighter post spacing on mobile for chat-like reading */
  .post-content {
    padding: 10px 14px 12px;
    font-size: 15.5px;
    line-height: 1.65;
  }

  .post-content blockquote {
    padding: 8px 12px;
    font-size: 13.5px;
  }

  .post-content img {
    border-radius: var(--radius-xs);
  }
}

/* Post Content */
.post-content {
  padding: 12px 20px 16px;
  color: var(--post-content-color, var(--text-main));
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.2px;
  /* Préserve les sauts de ligne (\n) même sans balise <br> */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.post-content img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  background: transparent;
  border: none;
}

.post-content blockquote {
  margin: 10px 0;
  padding: 10px 15px;
  background: var(--quote-bg);
  border-left: 3px solid var(--quote-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  font-size: 14px;
  color: var(--text-main);
  /* FLUIDITY v3: Subtle outline to separate quote from post background in dark themes */
  outline: 1px solid color-mix(in srgb, var(--quote-border) 12%, transparent);
  outline-offset: -1px;
}

.quote-jump-link {
  font-size: 0.8em;
  margin-left: 5px;
  opacity: 0.6;
  text-decoration: none;
  cursor: pointer;
}

.quote-jump-link:hover {
  opacity: 1;
}

.post-signature {
  margin: 0 0 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-height: 150px;
  overflow-y: auto;
  text-align: left;
}

/* Only show signature on the last post of a consecutive group */
.post.has-consecutive-next .post-signature {
  display: none !important;
}

/* Buttons */
.btn,
button,
.btn-new {
  background-color: var(--accent-primary);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn:hover,
button:hover,
.btn-new:hover {
  background-color: var(--accent-secondary);
  color: white;
}

.filter-btn {
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  border: 1px solid transparent;
}

.filter-btn:hover {
  background: var(--surface-hover);
  color: var(--text-main);
}

.filter-btn.active {
  background: var(--bg-surface);
  color: var(--accent-text);
  border-color: var(--border-color);
  box-shadow: var(--shadow-card);
}

.btn-new {
  font-size: 18px;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
}

/* Forms */
.reply-form {
  background: var(--bg-surface);
  padding: 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-top: 20px;
  border: 1px solid var(--border-color);
}

.editor-toolbar {
  background: var(--bg-surface-alt);
  padding: 8px;
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  gap: 5px;
}

textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  resize: vertical;
  min-height: 100px;
  color: var(--text-main);
}

textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-surface);
}

/* Empty State */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
}

.empty-message h2 {
  color: var(--text-main);
  margin-bottom: 10px;
}

/* Mobile Responsiveness (Overlay Slide) */
@media (max-width: 768px) {
  .app-layout {
    flex-direction: column;
    overflow: hidden;
    /* Create positioning context for the overlay */
    position: relative;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
  }

  /* AUDIT FIX: Enable native scroll on mobile for pull-to-refresh.
       overflow-x: hidden prevents any horizontal bleed from shadows or wide elements. */
  html,
  body {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100dvh;
  }

  /* Sidebar is always visible as the "base layer" on mobile.
       It fills the screen and sits behind the topic overlay. */
  .sidebar {
    width: 100%;
    height: 100%;
    flex: 1;
    border-right: none;
    display: flex;
    z-index: 10;
    min-width: 0;
    min-height: 0;
  }

  /* Main-content (topic view) lives as an off-screen overlay panel.
       STRICT SPLIT-SCREEN REPAIR: Completely hidden on mobile home */
  .main-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    display: none !important;
    flex-direction: column;
    background: var(--bg-body);
    min-width: 0;
    min-height: 0;
    z-index: 9000;
  }

  .home-welcome-desktop {
    display: none !important;
  }

  /* When Content Mode is active: slide the topic overlay into view */
  body.mobile-view-content .sidebar {
    /* Sidebar stays visible underneath — NOT hidden */
    display: flex;
    min-width: 0;
    min-height: 0;
  }

  body.mobile-view-content .main-content {
    display: flex !important;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    min-height: 0;
  }

  .sidebar-resizer {
    display: none;
    min-width: 0;
    min-height: 0;
  }
}

/* Mobile Navigation Bar (Back Button) */
#mobile-nav-bar {
  display: none;
  /* Hidden by default (desktop) */
}

@media (max-width: 768px) {
  #mobile-nav-bar {
    display: flex !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* Hide mobile-nav-bar on full-content pages (like logs-stats, profile, etc.) */
  /* These pages use the global header for navigation */
  .full-content-page #mobile-nav-bar {
    display: none !important;
  }

  /* Adjust Main Content to not hide under nav if needed,
       but since it's flex column, it should just stack */
  /* ⚠️ Scoped to non-topic layouts — topic-layout needs position:fixed + height:100%
       for overlay slide animation. Without :not(.topic-layout), the !important here
       would break the swipe-out transform on mobile. */
  .main-content:not(.topic-layout) {
    flex-direction: column;
    height: auto !important;
    /* Allow body scroll */
    overflow: visible !important;
    /* Allow body scroll */
    min-width: 0;
    min-height: 0;
  }

  /* Tweaks for topic header to sit below mobile nav - ONLY FOR TOPICS */
  .topic-layout .topic-header {
    top: 55px;
    /* Sticky relative to container, below nav bar */
    z-index: 90;
  }

  /* Pages without sidebar (clans, logs, messaging, team, etc.) - always show content with scroll */
  .app-layout.full-content-page {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: auto;
    min-width: 0;
    min-height: 0;
  }

  .app-layout.full-content-page .sidebar {
    display: none !important;
    min-width: 0;
    min-height: 0;
  }

  .app-layout.full-content-page .main-content {
    /* Override the overlay positioning (position:fixed / visibility:hidden)
           so full-content pages display normally in the document flow */
    position: static !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    min-height: auto;
    height: auto;
    padding-bottom: 80px;
    box-shadow: none !important;
    /* Space for mobile nav */
    min-width: 0;
    min-height: 0;
  }

  /* Remove sticky header behavior for non-topic pages on mobile */
  .app-layout.full-content-page .topic-header,
  .app-layout.full-content-page .page-header {
    position: relative;
    top: auto;
    min-width: 0;
    min-height: 0;
  }

  /* Also handle pages that have no sidebar at all —
       same overlay-override as full-content-page above */
  .app-layout:not(:has(.sidebar)) .main-content,
  .app-layout .main-content:only-child {
    position: static !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
    display: flex !important;
    overflow-y: auto;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
    min-width: 0;
    min-height: 0;
  }
}

/* Page Container - for non-topic pages (clans, stats, admin, etc.) */
.page-container {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .page-container {
    margin: 10px auto !important;
    padding: 15px !important;
    max-width: 100% !important;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

/* --- New Styles (Appended) --- */

.post-content img {
  max-width: 250px;
  max-height: 250px;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: pointer;
  object-fit: contain;
  background: transparent;
  border: none;
}

.post-content img.expanded {
  max-width: 100%;
  max-height: none;
  cursor: zoom-out;
}

/* Responsive Embeds (YouTube, Video) */
.post-content iframe,
.post-content video,
.post-content embed,
.post-content object {
  max-width: 100%;
  height: auto;
  /* Allow height to adjust if aspect ratio is handled */
  border-radius: var(--radius-sm);
}

/* Twitter iframes: height is controlled exclusively by JS — invisible until sized */
.post-content iframe[src*="platform.twitter.com"] {
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0;
}

/* ═══ VOCAROO CUSTOM AUDIO PLAYER ═══
   Premium player replacing native <audio>.
   Uses same-origin proxy (/proxy/vocaroo/:id) for iOS Safari compatibility. */

/* Container — Glassmorphism card */
.vocaroo-player {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 8px 0;
  padding: 0;
  max-width: 440px;
  width: 100%;
  background: linear-gradient(
    135deg,
    rgba(30, 35, 50, 0.95) 0%,
    rgba(20, 24, 38, 0.98) 100%
  );
  border: 1px solid rgba(100, 140, 255, 0.12);
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* Subtle glow on hover */
.vocaroo-player::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(99, 140, 230, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.vocaroo-player:hover::before {
  opacity: 1;
}

/* Light theme overrides */
[data-theme="light-ether"] .vocaroo-player {
  background: linear-gradient(
    135deg,
    rgba(240, 243, 248, 0.98) 0%,
    rgba(230, 235, 245, 0.95) 100%
  );
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light-ether"] .vocaroo-player::before {
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(99, 140, 230, 0.04) 0%,
    transparent 70%
  );
}

[data-theme="grey"] .vocaroo-player {
  background: linear-gradient(
    135deg,
    rgba(38, 38, 42, 0.98) 0%,
    rgba(30, 30, 34, 0.95) 100%
  );
  border-color: rgba(255, 255, 255, 0.06);
}

/* ─── Custom UI Layout ─── */
.vcp-ui {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}

/* ─── Play Button ─── */
.vcp-play {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #5b7cfa 0%, #3b5fc7 100%);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  box-shadow: 0 2px 8px rgba(91, 124, 250, 0.3);
}

.vcp-play:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(91, 124, 250, 0.45);
}

.vcp-play:active {
  transform: scale(0.95);
}

[data-theme="light-ether"] .vcp-play {
  background: linear-gradient(135deg, #4a6cf7 0%, #3451c1 100%);
  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.25);
}

/* ─── Waveform Bars (animated during playback) ─── */
.vcp-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  height: 24px;
}

.vcp-bars span {
  width: 3px;
  height: 8px;
  background: rgba(99, 140, 230, 0.25);
  border-radius: 2px;
  transition:
    height 0.2s ease,
    background 0.2s ease;
}

[data-theme="light-ether"] .vcp-bars span {
  background: rgba(74, 108, 247, 0.2);
}

/* Animated bars when playing */
.vcp-playing .vcp-bars span {
  background: #5b7cfa;
  animation: vcpBar 0.8s ease-in-out infinite alternate;
}

.vcp-playing .vcp-bars span:nth-child(1) {
  animation-delay: 0s;
}

.vcp-playing .vcp-bars span:nth-child(2) {
  animation-delay: 0.15s;
}

.vcp-playing .vcp-bars span:nth-child(3) {
  animation-delay: 0.3s;
}

.vcp-playing .vcp-bars span:nth-child(4) {
  animation-delay: 0.15s;
}

.vcp-playing .vcp-bars span:nth-child(5) {
  animation-delay: 0s;
}

@keyframes vcpBar {
  0% {
    height: 6px;
  }

  100% {
    height: 22px;
  }
}

/* ─── Track (progress bar) ─── */
.vcp-track-wrap {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  cursor: pointer;
  touch-action: none;
}

.vcp-track {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: visible;
}

[data-theme="light-ether"] .vcp-track {
  background: rgba(0, 0, 0, 0.06);
}

.vcp-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  transition: width 0.3s ease;
}

[data-theme="light-ether"] .vcp-buffered {
  background: rgba(0, 0, 0, 0.04);
}

.vcp-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5b7cfa, #7c9dff);
  border-radius: 4px;
  transition: width 0.1s linear;
}

[data-theme="light-ether"] .vcp-progress {
  background: linear-gradient(90deg, #4a6cf7, #6b8cff);
}

/* Thumb */
.vcp-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
  pointer-events: none;
}

.vocaroo-player:hover .vcp-thumb,
.vcp-seeking .vcp-thumb {
  transform: translate(-50%, -50%) scale(1);
}

/* Expand track on hover for easier targeting */
.vocaroo-player:hover .vcp-track,
.vcp-seeking .vcp-track {
  height: 6px;
}

/* ─── Time Display ─── */
.vcp-time {
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
  font-family: "JetBrains Mono", "SF Mono", monospace;
}

[data-theme="light-ether"] .vcp-time {
  color: rgba(0, 0, 0, 0.4);
}

.vcp-sep {
  margin: 0 1px;
  opacity: 0.5;
}

.vcp-playing .vcp-current {
  color: rgba(255, 255, 255, 0.8);
}

[data-theme="light-ether"] .vcp-playing .vcp-current {
  color: rgba(0, 0, 0, 0.7);
}


/* ─── Volume Control ─── */
.vcp-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 5px;
  flex-shrink: 0;
}

.vcp-vol-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.vcp-vol-btn:hover {
  color: #5b7cfa;
}

[data-theme="light-ether"] .vcp-vol-btn {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light-ether"] .vcp-vol-btn:hover {
  color: #4a6cf7;
}

.vcp-vol-slider {
  width: 50px;
  padding: 10px 0;
  cursor: pointer;
  touch-action: none;
  display: flex;
  align-items: center;
}

.vcp-vol-track {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

[data-theme="light-ether"] .vcp-vol-track {
  background: rgba(0, 0, 0, 0.15);
}

.vcp-vol-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}

[data-theme="light-ether"] .vcp-vol-progress {
  background: rgba(0, 0, 0, 0.5);
}

.vcp-vol-thumb {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
  pointer-events: none;
}

.vocaroo-player:hover .vcp-vol-thumb,
.vcp-vol-seeking .vcp-vol-thumb {
  transform: translate(-50%, -50%) scale(1);
}

.vocaroo-player:hover .vcp-vol-track,
.vcp-vol-seeking .vcp-vol-track {
  height: 6px;
}

/* ─── External Link ─── */
.vcp-external {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.vcp-external:hover {
  color: #5b7cfa;
  background: rgba(91, 124, 250, 0.1);
}

[data-theme="light-ether"] .vcp-external {
  color: rgba(0, 0, 0, 0.25);
}

[data-theme="light-ether"] .vcp-external:hover {
  color: #4a6cf7;
  background: rgba(74, 108, 247, 0.08);
}

/* ─── Loading State (lazy load spinner) ─── */
.vcp-loading .vcp-play {
  pointer-events: none;
  position: relative;
  background: linear-gradient(135deg, rgba(91, 124, 250, 0.5) 0%, rgba(59, 95, 199, 0.5) 100%);
}

.vcp-loading .vcp-play::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #7c9dff;
  animation: vcpSpin 0.8s linear infinite;
}

@keyframes vcpSpin {
  to { transform: rotate(360deg); }
}

.vcp-loading .vcp-bars span {
  background: rgba(99, 140, 230, 0.15);
  animation: vcpLoadPulse 1.2s ease-in-out infinite;
}

@keyframes vcpLoadPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ─── Mobile Responsive ─── */
@media (max-width: 768px) {
  .vocaroo-player {
    max-width: 100%;
    border-radius: 10px;
  }

  .vcp-ui {
    padding: 12px 12px;
    gap: 8px;
  }

  .vcp-play {
    width: 42px;
    height: 42px;
  }

  .vcp-track-wrap {
    padding: 14px 0;
  }

  .vcp-track {
    height: 6px;
  }

  .vcp-thumb {
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%) scale(1);
  }

  .vcp-time {
    font-size: 10px;
  }

  .vcp-bars {
    display: none;
  }

  /* Make sure the player doesn't break on very small mobile screens */
  .vcp-volume {
    display: none;
  }


  .vcp-external {
    display: none;
  }
}

/* ─── Focus-Visible States (Keyboard Accessibility) ─── */
.vcp-play:focus-visible {
  outline: 2px solid rgba(91, 124, 250, 0.6);
  outline-offset: 3px;
}

[data-theme="light-ether"] .vcp-play:focus-visible {
  outline-color: rgba(74, 108, 247, 0.6);
}

.vcp-vol-btn:focus-visible {
  outline: 2px solid rgba(91, 124, 250, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

.vcp-external:focus-visible {
  outline: 2px solid rgba(91, 124, 250, 0.5);
  outline-offset: 2px;
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  .vocaroo-player,
  .vocaroo-player::before,
  .vcp-play,
  .vcp-progress,
  .vcp-buffered,
  .vcp-thumb,
  .vcp-vol-thumb,
  .vcp-vol-track,
  .vcp-track,
  .vcp-external,
  .vcp-vol-btn,
  .vcp-bars span {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Hide old fallback if custom player is active */
.vocaroo-player[data-vocaroo-upgraded] .vocaroo-fallback {
  display: none !important;
}

/* Keep old iframe selector for any cached/existing posts that still have iframes */
.post-content iframe[src*="vocaroo.com"],
.post-content iframe[src*="voca.ro"] {
  width: 100%;
  max-width: 300px;
  min-height: 60px;
  max-height: 120px;
  border: 0;
  display: block;
  margin: 5px 0;
  box-shadow: none;
  background-color: transparent;
}

/* Fix Streamable Size — Premium */
.post-content iframe[src*="streamable.com"] {
  width: 100%;
  max-width: 560px;
  height: auto;
  min-height: 315px;
  aspect-ratio: 16 / 9;
  overflow-anchor: none;
  contain: layout style;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Fix YouTube Size — Premium */
.post-content iframe[src*="youtube.com"] {
  width: 100%;
  max-width: 560px;
  height: auto;
  min-height: 315px;
  aspect-ratio: 16 / 9;
  overflow-anchor: none;
  contain: layout style;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Fix SoundCloud Size — Premium */
.post-content iframe[src*="soundcloud.com"] {
  width: 100%;
  max-width: 560px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

/* ===================================
   TWITTER/X EMBED — Adaptive Full Height
   No blind cropping. The iframe takes its natural
   height from Twitter's resize message.
   =================================== */
.twitter-embed-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 10px 0;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface, #15202b);
  overflow: hidden;
  display: block;
  /* Smooth height transition when Twitter sends resize messages */
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Loading Skeleton (visible while iframe loads) --- */
.twitter-embed-wrapper.is-loading {
  min-height: 200px;
}

.twitter-embed-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
  z-index: 1;
  /* Shimmer animation */
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: twitterShimmer 1.8s ease-in-out infinite;
}

@keyframes twitterShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Remove skeleton when loaded */
.twitter-embed-wrapper.is-loaded .twitter-embed-skeleton {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.twitter-embed-wrapper.is-loaded {
  background: transparent;
}

/* --- Iframe inside wrapper --- */
.twitter-embed-wrapper iframe {
  width: 100% !important;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
  /* Height controlled exclusively by JS — default to 0 until resize fires */
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 12px;
  /* Smooth opacity reveal */
  transition: opacity 0.4s ease;
}

/* Optional: if you wrap videos in a container for 16:9 ratio */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.post-separator {
  border-top: 1px solid var(--border-color);
  margin: 15px 0;
  padding-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: 11px;
}

.btn-quote-inline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  padding: var(--space-sm) var(--space-md);
  min-height: 36px;
  min-width: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn-quote-inline:hover {
  background: var(--bg-surface-alt);
  color: var(--text-main);
  border-color: var(--accent-primary);
}

.btn-quote-inline:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .btn-quote-inline {
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-sm);
  }
}

.quote-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
  object-fit: cover;
}

/* Main Editor Content Area (Standard) */
.editor-content {
  min-height: 300px;
  padding: 15px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-top: none;
  /* Connected to toolbar */
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  outline: none;
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.6;
  overflow-y: auto;
}

.editor-content:focus {
  background: var(--bg-surface);
  border-color: var(--accent-primary);
}

/* Chat Mode Editor (Compact) */
.chat-editor {
  min-height: 40px;
  max-height: 150px;
  overflow-y: auto;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px;
  color: var(--text-main);
  font-size: 14px;
  outline: none;
}

.chat-editor:focus {
  background: var(--bg-surface);
  border-color: var(--accent-primary);
}

/* Notifications */
.notif-item {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
  transition: background 0.2s;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: var(--bg-surface-alt);
}

.notif-item.unread {
  background: var(--bg-surface-alt);
  border-left: 3px solid var(--accent-primary);
}

/* In dark mode, highlight color needs to be distinct.
   Using bg-surface-alt is fine. */

.notif-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.notif-content {
  color: var(--text-main);
}

.notif-link {
  font-weight: 600;
  color: var(--text-link);
}

.notif-link:hover {
  text-decoration: underline;
}

/* Editor Styles */
.wysiwyg-container {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* FLUIDITY v3: Subtle glow when editing */
.wysiwyg-container:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.editor-toolbar {
  background: var(--bg-surface-alt);
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* AUDIT FIX: Scoped to wysiwyg context to avoid conflict with main editor-content (~L.2876) */
.wysiwyg-container .editor-content {
  min-height: 200px;
  padding: 15px;
  outline: none;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
}

.editor-content:empty:before {
  content: attr(placeholder);
  color: var(--text-muted);
  opacity: 0.7;
}

.editor-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-main);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.editor-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-color);
}

/* Active state for formatting toggles (B/I/U) */
.editor-btn.fmt-active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

/* Create Topic Title Input */
#title {
  font-size: 18px;
  font-weight: 500;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  margin-bottom: 10px;
  color: var(--text-main);
}

/* Reply Context Block (Topic View) */
.post-reply-context {
  background: var(--quote-bg);
  /* Use quote bg for reply context */
  padding: 8px 15px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  transition: background 0.2s;
}

.post-reply-context:hover {
  background: var(--bg-surface-alt);
}

.reply-context-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}

.reply-context-text strong {
  color: var(--text-main);
}

.hidden-input {
  display: none !important;
}

/* Editor specific overrides */
.editor-content img {
  max-width: 150px;
  max-height: 150px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  border: 1px solid var(--border-color);
}

/* Interactive Spoiler — Inline (legacy, backward compat) */
.spoiler {
  background-color: var(--spoiler-bg, #2f2f32);
  color: transparent;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 4px;
  user-select: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.spoiler.revealed {
  background-color: var(--spoiler-bg);
  color: var(--text-main);
  user-select: text;
}

/* ═══════════════════════════════════════════════════════ */
/* Spoiler Block — Rich content (images, links, embeds)  */
/* ═══════════════════════════════════════════════════════ */
.spoiler-block {
  position: relative;
  margin: 12px 0;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-alt, rgba(0, 0, 0, 0.15));
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.spoiler-block:hover {
  border-color: var(--accent-primary);
}

/* Toggle button */
.spoiler-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(
    135deg,
    rgba(120, 120, 255, 0.08),
    rgba(120, 120, 255, 0.03)
  );
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
}

.spoiler-toggle:hover {
  background: linear-gradient(
    135deg,
    rgba(120, 120, 255, 0.15),
    rgba(120, 120, 255, 0.06)
  );
  color: var(--accent-primary);
}

.spoiler-toggle i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Content area — hidden by default */
.spoiler-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 16px;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease 0.1s,
    padding 0.3s ease;
}

/* Revealed state */
.spoiler-block.revealed .spoiler-toggle {
  color: var(--accent-primary);
  border-bottom: 1px solid var(--border-color);
}

.spoiler-block.revealed .spoiler-toggle i {
  transform: rotate(180deg);
}

.spoiler-block.revealed .spoiler-content {
  max-height: 2000px;
  opacity: 1;
  padding: 12px 16px;
}

/* Images inside spoiler */
.spoiler-content img {
  max-width: 100%;
  border-radius: 8px;
}

/* Edit mode: show content directly */
.edit-spoiler-block {
  border: 2px dashed var(--accent-primary);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  position: relative;
  min-height: 30px;
}

.edit-spoiler-block::before {
  content: "👁️ SPOILER";
  position: absolute;
  top: -10px;
  left: 10px;
  background: var(--bg-card);
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 0.05em;
  border-radius: 3px;
}

/* === @Mention Links === */
.mention-link {
  display: inline;
  color: var(--accent-primary) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
  cursor: pointer;
}

.mention-link:hover {
  text-decoration: underline !important;
  opacity: 0.85;
}

/* Mention tag in editor (non-editable badge) */
.mention-tag {
  display: inline;
  color: var(--accent-primary);
  font-weight: 600;
}

/* Notification Refactor */
#notif-dropdown {
  width: 350px;
  right: 0;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  /* Added border for contrast */
}

.notif-item {
  display: flex;
  flex-direction: row;
  /* Ensure row layout */
  align-items: center;
  /* Center vertically */
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
  transition: background 0.1s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.notif-item:hover {
  background: var(--bg-surface-alt);
}

.notif-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.notif-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* For truncation if needed */
}

.notif-text {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.4;
}

.notif-topic-title {
  color: var(--text-link);
  font-weight: 500;
}

.notif-date {
  font-size: 11px;
  color: var(--text-muted);
}

/* AUDIT FIX: Duplicate @keyframes highlight & .highlight removed.
   Canonical definitions at ~L.2184 (.post.highlight + @keyframes highlight). */

/* Lightbox Overlay
   PORTALED TO BODY by JS — needs z-index above mobile .main-content (10000),
   bottom-nav (9998), nav-btn (10000), and usercard (999999). */
#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

#lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  user-select: none;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.merged-post {
  position: relative;
  /* transition for highlight */
  transition: background-color 0.5s;
}

/* Stickers - Style Village.cx / Onche.org */
.post-content img.sticker,
.editor-content img.sticker,
img.sticker {
  height: 50px !important;
  width: auto !important;
  max-width: 200px;
  max-height: 60px;
  vertical-align: text-bottom;
  display: inline;
  margin: 0 3px;
  object-fit: contain;
  border-radius: 0 !important;
  cursor: default;
  border: none !important;
  box-shadow: none !important;
}

/* Stickers dans les signatures - plus petits */
.post-signature img.sticker {
  height: 30px !important;
  max-height: 35px;
}

/* Noelshack Proxy Thumbnails — Images affichées en petit avec clic pour agrandir (lightbox) */
.post-content img.noelshack-proxy {
  height: 68px;
  width: auto;
  max-width: 200px;
  max-height: 80px;
  object-fit: contain;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  vertical-align: text-bottom;
  margin: 2px 4px;
  border: none;
  background: transparent;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.post-content img.noelshack-proxy:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(1.1);
}

.post-content img.noelshack-proxy:active {
  transform: scale(0.97);
}

[data-theme="light-ether"] .post-content img.noelshack-proxy {
  border: none;
}

[data-theme="light-ether"] .post-content img.noelshack-proxy:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Editor Sticker Picker */
.sticker-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .sticker-tab-btn:hover {
    color: var(--text-main);
  }

  .sticker-thumb:hover {
    transform: scale(1.05);
  }

  .sticker-star:hover {
    opacity: 1;
  }
}

.sticker-tab-btn.active {
  color: var(--accent-text);
  border-bottom-color: var(--accent-primary);
}

.sticker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  overflow-y: auto;
  justify-content: center;
}

.sticker-thumb {
  height: 60px;
  cursor: pointer;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-color);
  /* use var */
  transition: transform 0.1s;
}

.sticker-star {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
  text-shadow: 0 0 2px black;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.sticker-star.active {
  color: gold;
  opacity: 1;
}

/* Context Menu — see unified block in CONTEXT MENU section below */

/* Floating Navigation */
.floating-nav {
  position: fixed;
  bottom: 100px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9990;
  pointer-events: auto;
}

/* Base nav button styling - Modern glassmorphism */
.nav-btn {
  position: fixed;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* Liquid Glass Effect */
  background: rgba(28, 28, 28, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);

  color: var(--text-muted);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
  z-index: 10000;
  opacity: 0.8;
}

/* Top button (scroll to top) - positioned at TOP right of screen */
.nav-btn-top {
  top: 100px;
  bottom: auto;
  right: 20px;
}

/* Bottom button (scroll to bottom) - positioned above reply area */
.nav-btn-bottom {
  bottom: 100px;
  right: 20px;
}

/* Hover state - becomes more visible */
.nav-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  color: var(--text-main);
}

/* Active/pressed state */
.nav-btn:active {
  transform: scale(0.95);
  opacity: 1;
}

/* Dark theme adjustments */
[data-theme="deep-ether"] .nav-btn,
[data-theme="dark"] .nav-btn,
[data-theme="grey"] .nav-btn,
[data-theme="custom"] .nav-btn {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="deep-ether"] .nav-btn:hover,
[data-theme="dark"] .nav-btn:hover,
[data-theme="grey"] .nav-btn:hover,
[data-theme="custom"] .nav-btn:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Nav Buttons — Pastilles volumétriques Poire (light-ether) */
[data-theme="light-ether"] .nav-btn {
  background: var(
    --topic-btn-bg,
    linear-gradient(180deg, #b5d15a 0%, #a8c545 100%)
  );
  border-color: rgba(var(--accent-primary-rgb, 168, 197, 69), 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 3px rgba(var(--accent-primary-rgb, 168, 197, 69), 0.2);
  color: var(--topic-btn-text, #1a241b);
  opacity: 0.92;
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-out-expo),
    opacity var(--duration-fast) ease;
}

[data-theme="light-ether"] .nav-btn:hover {
  background: var(
    --topic-btn-bg-hover,
    linear-gradient(180deg, #aacc3e 0%, #95b332 100%)
  );
  border-color: rgba(var(--accent-primary-rgb, 168, 197, 69), 0.5);
  color: var(--topic-btn-text, #1a241b);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 4px rgba(26, 36, 27, 0.1),
    0 6px 14px rgba(var(--accent-primary-rgb, 168, 197, 69), 0.35);
}

[data-theme="light-ether"] .nav-btn:active {
  transform: scale(0.96);
  box-shadow:
    inset 0 2px 4px rgba(26, 36, 27, 0.12),
    0 1px 2px rgba(168, 197, 69, 0.15);
  transition-duration: var(--duration-instant);
}

/* Highlight Animation — see consolidated version in "Highlight Effect: Refined" section */

/* --- Moderation Logs --- */
.logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bg-surface);
}

.logs-table th {
  text-align: left;
  padding: 12px 15px;
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 2px solid var(--border-color);
}

.logs-table td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  vertical-align: middle;
}

.logs-table tr:hover {
  background-color: var(--bg-surface-alt);
}

.mod-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.mod-info:hover {
  color: var(--accent-primary);
  text-decoration: none;
}

.mod-avatar-logs {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-color);
}

.log-icon-wrapper {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-surface-alt);
  color: var(--text-muted);
}

/* Icon Variants */
.log-icon-ban {
  background: rgba(198, 40, 40, 0.1);
  color: #c62828;
}

.log-icon-unban {
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
}

.log-icon-promote {
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
}

.log-icon-demote {
  background: rgba(198, 40, 40, 0.1);
  color: #c62828;
}

.log-icon-delete {
  background: rgba(239, 83, 80, 0.1);
  color: #ef5350;
}

.log-icon-eradicate {
  background: #3d4147;
  color: #fff;
}

[data-theme="dark"] .log-icon-eradicate,
[data-theme="grey"] .log-icon-eradicate,
[data-theme="custom"] .log-icon-eradicate {
  background: #fff;
  color: #2f2f32;
}

.log-icon-edit {
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
}

.log-icon-pin {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.log-icon-lock {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.log-icon-password {
  background: rgba(0, 150, 136, 0.1);
  color: #009688;
}

.log-icon-restore {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
}

/* ☠️ THE PURGE — Neon red pulsing biohazard */
.log-icon-purge {
  background: rgba(255, 59, 48, 0.2);
  color: #ff3b30;
  animation: purgeIconPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 59, 48, 0.4);
}

@keyframes purgeIconPulse {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.3);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 14px rgba(255, 59, 48, 0.6);
    transform: scale(1.08);
  }
}

.log-icon-purge-stop {
  background: rgba(52, 199, 89, 0.15);
  color: #34c759;
}

/* 💕 Mod Simp — Rose / Pink */
.log-icon-simp {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
}

.log-icon-simp-revoke {
  background: rgba(236, 72, 153, 0.08);
  color: #9f1239;
}

/* 🎀 Modératrice — Lavender / Purple */
.log-icon-moderatrice {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.log-icon-moderatrice-revoke {
  background: rgba(168, 85, 247, 0.08);
  color: #6b21a8;
}

.log-icon-moderatrice-ban {
  background: rgba(219, 39, 119, 0.12);
  color: #db2777;
}

/* Clan actions — Amber */
.log-icon-clan {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

/* Election actions — Indigo */
.log-icon-election {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

/* Signature / Messaging — Teal */
.log-icon-signature {
  background: rgba(20, 184, 166, 0.12);
  color: #14b8a6;
}

/* Mass delete — pulsing red */
.log-icon-mass-delete {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.log-target-link {
  font-weight: 600;
  color: var(--text-main);
}

.log-target-link:hover {
  text-decoration: underline;
}

/* --- Poll Redesign --- */
.post-poll {
  padding: 0 20px;
  text-align: left;
}

.poll-card {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 15px;
  margin: 15px auto 15px 0;
  /* Changed margin to have bottom spacing */
  max-width: 600px;
  clear: both;
  /* Ensure it clears floats */
  display: block;
  /* Ensure block layout */
  position: relative;
  /* Contain children */
}

.poll-question {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: var(--text-main);
}

.poll-options-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.poll-option-row {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.1s;
}

.poll-option-row:hover {
  border-color: var(--border-color);
}

.poll-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
}

.poll-bar-fill {
  height: 100%;
  background-color: var(--accent-primary);
  transition: width 0.5s ease;
}

.poll-option-content {
  position: relative;
  z-index: 1;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.poll-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  flex: 1;
}

.poll-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.poll-avatars-preview {
  display: flex;
  align-items: center;
}

.poll-avatar-mini {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  margin-left: -8px;
  object-fit: cover;
}

.poll-avatar-mini:first-child {
  margin-left: 0;
}

.poll-more-count {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 5px;
  font-weight: 600;
}

.poll-percent {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  min-width: 40px;
  text-align: right;
}

.poll-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  cursor: pointer;
  background: var(--bg-surface);
}

.poll-radio:hover {
  border-color: var(--accent-primary);
}

.poll-radio.checked {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.poll-radio-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  display: none;
}

.poll-radio.checked .poll-radio-inner {
  display: block;
}

.poll-voters-list {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
  /* Custom Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

.poll-voters-list::-webkit-scrollbar {
  width: 6px;
}

.poll-voters-list::-webkit-scrollbar-track {
  background: transparent;
}

.poll-voters-list::-webkit-scrollbar-thumb {
  background-color: var(--text-muted);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background-clip: content-box;
}

.poll-voter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-main);
}

.poll-voter-item:hover {
  background: var(--bg-surface-alt);
}

.poll-avatar-small {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.poll-footer {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  display: flex;
  justify-content: space-between;
}

/* --- Global Scrollbars --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: var(--radius-xs);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

/* --- Sidebar Resizer --- */
.sidebar-resizer {
  width: 4px;
  cursor: col-resize;
  background-color: transparent;
  transition: background-color 0.2s;
  flex-shrink: 0;
  z-index: 100;
  /* Ensure it works with the flex layout */
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.sidebar-resizer:hover,
.sidebar-resizer.active {
  background-color: var(--accent-primary);
  min-width: 0;
  min-height: 0;
}

/* --- Sidebar Menu (App Menu) — Redesigned with Colored Icons --- */

/* Section labels */
.sidebar-menu-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 12px 12px 6px;
  margin-top: 4px;
  user-select: none;
  min-width: 0;
  min-height: 0;
}

/* Subtle divider between sections */
.sidebar-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 12px;
  opacity: 0.6;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
  margin-bottom: 2px;
  position: relative;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-item:hover {
  background-color: var(--accent-highlight);
  color: var(--text-main);
  text-decoration: none;
  transform: translateX(3px);
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-item:active {
  transform: translateX(1px) scale(0.98);
  min-width: 0;
  min-height: 0;
}

/* Active/current page indicator */
.sidebar-menu-item.active {
  background: var(--accent-highlight);
  border-left: 3px solid var(--accent-primary);
  padding-left: 9px;
  font-weight: 600;
  min-width: 0;
  min-height: 0;
}

/* --- Colored Icon Pills --- */
.sidebar-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  flex-shrink: 0;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-item:hover .sidebar-menu-icon {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 0;
  min-height: 0;
}

/* Color variants */
.sidebar-menu-icon-indigo {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-gold {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-cyan {
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-slate {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-red {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-teal {
  background: rgba(20, 184, 166, 0.12);
  color: #14b8a6;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-orange {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-icon-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  min-width: 0;
  min-height: 0;
}

/* Dark theme: slightly boost icon backgrounds */
[data-theme="dark"] .sidebar-menu-icon,
[data-theme="grey"] .sidebar-menu-icon,
[data-theme="custom"] .sidebar-menu-icon,
[data-theme="deep-ether"] .sidebar-menu-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-indigo,
[data-theme="grey"] .sidebar-menu-icon-indigo,
[data-theme="custom"] .sidebar-menu-icon-indigo,
[data-theme="deep-ether"] .sidebar-menu-icon-indigo {
  background: rgba(99, 102, 241, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-emerald,
[data-theme="grey"] .sidebar-menu-icon-emerald,
[data-theme="custom"] .sidebar-menu-icon-emerald,
[data-theme="deep-ether"] .sidebar-menu-icon-emerald {
  background: rgba(16, 185, 129, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-amber,
[data-theme="grey"] .sidebar-menu-icon-amber,
[data-theme="custom"] .sidebar-menu-icon-amber,
[data-theme="deep-ether"] .sidebar-menu-icon-amber {
  background: rgba(245, 158, 11, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-gold,
[data-theme="grey"] .sidebar-menu-icon-gold,
[data-theme="custom"] .sidebar-menu-icon-gold,
[data-theme="deep-ether"] .sidebar-menu-icon-gold {
  background: rgba(234, 179, 8, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-cyan,
[data-theme="grey"] .sidebar-menu-icon-cyan,
[data-theme="custom"] .sidebar-menu-icon-cyan,
[data-theme="deep-ether"] .sidebar-menu-icon-cyan {
  background: rgba(6, 182, 212, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-slate,
[data-theme="grey"] .sidebar-menu-icon-slate,
[data-theme="custom"] .sidebar-menu-icon-slate,
[data-theme="deep-ether"] .sidebar-menu-icon-slate {
  background: rgba(100, 116, 139, 0.2);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-blue,
[data-theme="grey"] .sidebar-menu-icon-blue,
[data-theme="custom"] .sidebar-menu-icon-blue,
[data-theme="deep-ether"] .sidebar-menu-icon-blue {
  background: rgba(59, 130, 246, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-red,
[data-theme="grey"] .sidebar-menu-icon-red,
[data-theme="custom"] .sidebar-menu-icon-red,
[data-theme="deep-ether"] .sidebar-menu-icon-red {
  background: rgba(239, 68, 68, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-teal,
[data-theme="grey"] .sidebar-menu-icon-teal,
[data-theme="custom"] .sidebar-menu-icon-teal,
[data-theme="deep-ether"] .sidebar-menu-icon-teal {
  background: rgba(20, 184, 166, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-orange,
[data-theme="grey"] .sidebar-menu-icon-orange,
[data-theme="custom"] .sidebar-menu-icon-orange,
[data-theme="deep-ether"] .sidebar-menu-icon-orange {
  background: rgba(249, 115, 22, 0.18);
  min-width: 0;
  min-height: 0;
}

[data-theme="dark"] .sidebar-menu-icon-purple,
[data-theme="grey"] .sidebar-menu-icon-purple,
[data-theme="custom"] .sidebar-menu-icon-purple,
[data-theme="deep-ether"] .sidebar-menu-icon-purple {
  background: rgba(168, 85, 247, 0.18);
  min-width: 0;
  min-height: 0;
}

/* Badge inside menu items (messaging count) */
.sidebar-menu-badge {
  margin-left: auto;
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 6px;
  background: var(--accent-danger);
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
  min-width: 0;
  min-height: 0;
}

/* Compact variant for user dropdown sub-menu */
.sidebar-user-menu .sidebar-menu-item {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-item-danger {
  color: var(--accent-danger);
  min-width: 0;
  min-height: 0;
}

/* --- Community Banner in Sidebar Menu --- */
.sidebar-community-banner {
  margin: 12px 8px 8px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  min-width: 0;
  min-height: 0;
}

.sidebar-community-banner a {
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  min-width: 0;
  min-height: 0;
}

.sidebar-community-banner a:hover {
  transform: scale(1.02);
  min-width: 0;
  min-height: 0;
}

.sidebar-community-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  object-fit: cover;
  max-height: 160px;
  min-width: 0;
  min-height: 0;
}

.sidebar-community-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  min-width: 0;
  min-height: 0;
}

/* User Profile Section in Sidebar */
.sidebar-user-profile {
  /* Sticky footer logic handled by flex parent */
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  min-width: 0;
  min-height: 0;
}

.sidebar-user-profile:hover {
  background-color: var(--bg-surface-alt) !important;
  min-width: 0;
  min-height: 0;
}

/* Notification List in Sidebar */
#notif-list-container .notif-item:hover {
  background-color: var(--surface-hover);
}

/* --- Header Controls --- */
#header-notif-btn:hover,
#header-theme-toggle:hover {
  background-color: var(--surface-hover) !important;
  border-radius: 50%;
}

/* Arrow Animation */
#menu-arrow {
  margin-left: 5px;
}

#menu-arrow.open {
  transform: rotate(-90deg);
}

/* Ensure notifications container in sidebar is visible when active */
#notif-list-container {
  transition: all 0.2s;
}

/* --- Notification Dropdown --- */
#notif-dropdown {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Ensure responsiveness on small screens */
  width: 320px !important;
  max-width: 90vw;
}

#notif-dropdown:not(.open) {
  display: none;
}

#notif-dropdown.open {
  display: block;
}

@media (max-width: 768px) {
  #notif-dropdown {
    position: fixed !important;
    bottom: 65px;
    top: auto !important;
    left: 5% !important;
    right: 5% !important;
    width: 90% !important;
    max-width: none !important;
    max-height: 60vh;
    z-index: 100000;
    border-radius: var(--radius-md);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  }
}

/* --- Sidebar Footer --- */
.sidebar-footer {
  padding: 15px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 0;
}

.sidebar-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* Home Icon Hover */
.sidebar-user-profile a[title="Accueil"]:hover {
  color: var(--accent-primary) !important;
  min-width: 0;
  min-height: 0;
}

/* Fix sidebar positioning context for absolute children (e.g. user menu) */
.sidebar {
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* AUDIT FIX: Legacy .btn-create-topic removed — conflicts with Premium 2026 version (~L.1223).
   The premium version has gradient, shimmer, and refined transitions. */

/* Fix for mobile context menu interference */
@media (max-width: 768px) {
  .post {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Sidebar Footer Visibility Logic */
.sidebar:not(.sidebar-menu-active) .sidebar-user-profile.logged-in {
  display: none !important;
  min-width: 0;
  min-height: 0;
}

/* Mobile Topic View Styles */
@media (max-width: 768px) {
  /* OVERLAY FIX: Header stays visible behind the topic overlay panel.
       No longer hidden — the .main-content panel covers it via z-index. */

  #mobile-topic-back {
    display: block !important;
    min-width: 0;
    min-height: 0;
  }

  /* FIX: Remove container padding so the header can go edge-to-edge naturally.
       Posts keep their padding via #posts-container below. */
  body.mobile-topic-view .topic-container {
    padding-left: 0;
    padding-right: 0;
  }

  /* FIX: Topic header flush to the top, full viewport width.
       Uses env(safe-area-inset-top) so the title doesn't hide under
       the iPhone notch or Android status bar. */
  body.mobile-topic-view .topic-header {
    top: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: var(--bg-body);
    width: 100%;
    box-sizing: border-box;
  }

  /* Restore padding for the posts area (was on .topic-container before) */
  body.mobile-topic-view #posts-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  body.mobile-topic-view .topic-title {
    font-size: 16px;
    line-height: 1.3;
  }
}

/* OVERLAY FIX: Mobile nav bar stays visible behind the topic overlay. */

/* --- Chat Mode Editor (Fixed Bottom) --- */
.topic-layout {
  display: flex;
  flex-direction: column;
}

/* Mobile Topic View Styles */
@media (max-width: 768px) {
.topic-layout {
  position: relative;
  --topic-reply-height: 0px;
  --topic-reply-safe-bottom: var(--safe-area-bottom, env(safe-area-inset-bottom, 0px));
  --topic-reply-occupied: 0px;
}

.topic-layout.has-topic-reply-chrome {
  --topic-reply-occupied: var(--topic-reply-height);
}

.topic-layout.has-topic-reply-chrome.topic-reply-hidden {
  --topic-reply-occupied: var(--topic-reply-safe-bottom);
}

  .topic-layout .fixed-reply-form {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
    /* FLUIDITY v3: Respect iPhone notch/home indicator safe area */
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }
}

.topic-scroll-container {
  flex: 1;
  /* SPLIT-SCREEN: This is the ONLY container that scrolls the messages */
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0;
  /* FLUIDITY v3: Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* IMPORTANT: Do NOT use display:contents on <form> — it breaks
   form.requestSubmit() on mobile browsers (second submit silently fails).
   Instead, make the form a zero-margin flex child. */
#reply-form {
  margin: 0;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  pointer-events: auto;
}

.main-content.topic-layout.has-topic-reply-chrome #topic-reply-state {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: visible;
  pointer-events: none;
  background: transparent;
  z-index: 9998;
}

.main-content.topic-layout.has-topic-reply-chrome #topic-reply-state.reply-chrome-no-anim {
  transition: none !important;
}

.main-content.topic-layout.has-topic-reply-chrome #reply-form {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: visible;
}

.main-content.topic-layout.has-topic-reply-chrome #typing-indicator {
  position: relative;
  z-index: 1;
}

/* SPA FIX: The SPA editor container must not add extra spacing. */
#spa-editor-container {
  margin: 0;
  padding: 0;
}

.fixed-reply-form {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding: 4px 10px;
  margin: 0;
  /* SPLIT-SCREEN: No position sticky/fixed needed.
       As a direct child of a flex-column (.main-content / .topic-layout)
       with a flex:1 sibling above (.topic-scroll-container),
       this naturally stays pinned at the bottom. */
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  /* Align to bottom so textarea grows up */
  gap: 6px;
  width: 100%;
}

.chat-editor-wrapper {
  flex: 1;
  min-width: 0;
  /* Allow flex item to shrink below content size */
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 12px;
  min-height: 36px;
  /* roughly one line */
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Contain any residual overflow */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* FLUIDITY v3: Focus glow on editor wrapper for all themes */
.chat-editor-wrapper:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.chat-editor {
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  outline: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-main);
  /* Prevent long URLs from overflowing the container */
  overflow-wrap: break-word;
  word-break: break-word;
}

.chat-editor:empty:before {
  content: attr(placeholder);
  color: var(--text-muted);
  opacity: 0.7;
  pointer-events: none;
}

/* FLUIDITY v3: Also handle the case where editor contains only a <br> (empty after delete) */
.chat-editor:has(> br:only-child):before {
  content: attr(placeholder);
  color: var(--text-muted);
  opacity: 0.7;
  pointer-events: none;
}

.chat-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-bottom: 4px;
  flex-wrap: wrap;
}

/* Separator between action buttons and format buttons */
.chat-actions-sep {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Formatting buttons inside chat-actions (compact style) */
.chat-fmt-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-xs, 4px);
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
  min-width: 22px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.chat-fmt-btn:hover {
  color: var(--text-main);
  background: var(--surface-hover);
  border-color: var(--border-color);
}

.chat-fmt-btn.fmt-active {
  color: var(--accent-primary, #007aff);
  background: rgba(0, 122, 255, 0.1);
  border-color: var(--accent-primary, #007aff);
}

.chat-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition:
    color 0.2s,
    background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  /* FLUIDITY v3: Larger touch target for comfort */
  width: 36px;
  height: 36px;
}

.chat-action-btn:hover {
  color: var(--text-main);
  background: var(--surface-hover);
}

.chat-send-btn {
  background: transparent;
  border: none;
  color: var(--accent-primary);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  padding-bottom: 4px;
}

.chat-send-btn:hover {
  color: var(--accent-secondary);
}

/* Picker Container (Stickers/Polls) - Above Editor */
.chat-picker-container {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  background: var(--bg-surface-alt);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: none;
  /* Toggled via JS */
  z-index: 99;
  flex-direction: column;
}

/* ── "Aa" Toggle — Apple Progressive Disclosure ───────────────── */
.chat-fmt-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: var(--radius-sm, 6px);
  transition:
    color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.chat-fmt-toggle:hover {
  color: var(--text-main);
  background: var(--surface-hover);
}

.chat-fmt-toggle:active {
  transform: scale(0.92);
}

.chat-fmt-toggle[aria-expanded="true"] {
  color: var(--accent-primary, #007aff);
  background: rgba(0, 122, 255, 0.1);
  border-color: rgba(0, 122, 255, 0.25);
}

.fmt-toggle-label {
  font-weight: 600;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  letter-spacing: -0.3px;
  line-height: 1;
}

/* ── Formatting Tray — Slide-In Reveal ───────────────── */
.chat-fmt-tray {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    max-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.chat-fmt-tray.open {
  max-width: 220px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Staggered entrance for each button inside the tray */
.chat-fmt-tray .chat-fmt-btn {
  opacity: 0;
  transform: scale(0.8) translateY(2px);
  transition:
    opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}

.chat-fmt-tray.open .chat-fmt-btn {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.chat-fmt-tray.open .chat-fmt-btn:nth-child(1) {
  transition-delay: 0.03s;
}

.chat-fmt-tray.open .chat-fmt-btn:nth-child(2) {
  transition-delay: 0.06s;
}

.chat-fmt-tray.open .chat-fmt-btn:nth-child(3) {
  transition-delay: 0.09s;
}

.chat-fmt-tray.open .chat-fmt-btn:nth-child(4) {
  transition-delay: 0.12s;
}

.chat-fmt-tray.open .chat-fmt-btn:nth-child(5) {
  transition-delay: 0.15s;
}

/* Active format state — accent glow */
.chat-fmt-tray .chat-fmt-btn.fmt-active {
  color: var(--accent-primary, #007aff);
  background: rgba(0, 122, 255, 0.12);
  border-color: rgba(0, 122, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 122, 255, 0.15);
}

/* On mobile, hide the Aa toggle — mobile uses the actions tray instead */
@media (max-width: 768px) {
  .chat-fmt-toggle {
    display: none !important;
  }

  .chat-fmt-tray {
    display: none !important;
  }
}

/* --- Refinements based on Feedback --- */

/* Scroll Button Position */
#scroll-bottom-btn {
  bottom: 130px !important;
  /* Above the editor bar (approx 60-70px height) */
  right: 20px;
  z-index: 10000;
  /* Must be above mobile .main-content (9000) */
}

/* Restrict Image Size in Chat Editor (Desktop & Mobile) */
.chat-editor img {
  max-height: 80px !important;
  max-width: 120px !important;
  width: auto !important;
  vertical-align: middle;
  border-radius: var(--radius-sm);
  cursor: default;
  display: inline-block;
  object-fit: cover;
}

/* Mobile Layout Adjustments */
@media (max-width: 768px) {
  body.mobile-topic-view .topic-title {
    font-size: 16px;
    line-height: 1.3;
    /* 2-line clamp au lieu de nowrap — préserve l'info du titre */
    /* Single-line ellipsis — consistent with desktop */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Chat Input Bar - Mobile Layout (Inline row — send btn next to editor) */
  .chat-input-bar {
    flex-wrap: wrap !important;
    gap: 4px;
    padding: 4px;
    background: var(--bg-surface);
  }

  /* FLUIDITY v3: Editor + send btn on same row, actions below */
  .chat-editor-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    order: 1;
    box-sizing: border-box !important;
    /* Compact height to align with send button */
    min-height: 32px;
    padding: 4px 12px;
    align-items: center;
  }

  /* Send button right next to editor for thumb-friendly access */
  .chat-send-btn {
    order: 2;
    flex: 0 0 auto;
    padding-bottom: 0;
    margin-left: 0;
  }

  /* Actions row below */
  .chat-actions {
    order: 3;
    flex: 0 0 100%;
    justify-content: flex-start;
    padding-bottom: 0;
    gap: 2px;
  }

  /* FLUIDITY v3: Larger max-height so long messages don't feel cramped */
  .chat-editor {
    max-height: 200px;
    /* Smooth auto-expand when typing multi-line */
    transition: max-height 0.15s ease;
  }

  /* Prevent Zoom on Mobile Inputs - CRITICAL */
  .chat-editor,
  textarea,
  input[type="text"] {
    font-size: 16px !important;
  }

  /* Ensure Fixed Editor respects Sidebar */
  .fixed-reply-form {
    width: 100%;
    box-sizing: border-box;
    /* FLUIDITY v3: Subtle frosted glass on mobile editor bar */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    border-top-color: color-mix(in srgb, var(--border-color) 50%, transparent);
  }
}

/* Deep Ether Components */

/* Prism Card */
.prism-card {
  border: 1px solid transparent;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 40%
  );
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--radius-md);
  position: relative;
  box-shadow: var(--shadow-card);
}

.prism-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md);
  padding: 1px;
  background: linear-gradient(to right, var(--primary-azure), #5b9bff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.prism-card:hover {
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.prism-card .separator {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Button Ether (Weightless Feel) */
.btn-ether {
  background-color: var(--accent-primary);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-ether:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* Ripple Effect */
.btn-ether:active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 0.4s linear;
  pointer-events: none;
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Deep Ether Inputs & General Button overrides */
[data-theme="deep-ether"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="deep-ether"] textarea,
[data-theme="deep-ether"] .btn,
[data-theme="deep-ether"]
  button:not(.btn-ether):not(.filter-btn):not(.chat-action-btn):not(
    .header-controls button
  ):not(.nav-btn):not(.btn-admin) {
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

[data-theme="deep-ether"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="deep-ether"] textarea {
  background-color: var(--input-bg);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

[data-theme="deep-ether"] .btn:hover,
[data-theme="deep-ether"]
  button:not(.btn-ether):not(.filter-btn):not(.chat-action-btn):not(
    .header-controls button
  ):not(.nav-btn):not(.btn-admin):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="deep-ether"] input:focus,
[data-theme="deep-ether"] textarea:focus {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(50, 100, 255, 0.2),
    0 0 20px rgba(50, 100, 255, 0.15);
  /* Glow Ring */
  border-color: transparent;
}

/* Gradient Text — Audit fix: limited to explicit .gradient-text only.
   Topic titles use solid white (defined in theme variables) for readability.
   Applying gradient to ALL h1/h2 causes WCAG contrast issues (variable ratio along gradient),
   invisible text on selection, and broken print. */
.gradient-text {
  background: linear-gradient(to right, var(--primary-azure), #5b9bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

@supports not (background-clip: text) {
  .gradient-text {
    background: none;
    color: var(--text-main);
  }
}

/* AUDIT FIX (v8.0): All light-ether tokens defined in single location (L.324).
   P3 gamut override for accent Poire only — primary-azure is now a real blue. */

@supports (color: color(display-p3 1 1 1)) {
  [data-theme="light-ether"] {
    --primary-azure: color(display-p3 0.23 0.51 0.96);
    --accent-primary: color(display-p3 0.66 0.77 0.27);
  }
}

/* Light Ether Component Overrides */
[data-theme="light-ether"] .prism-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(249, 248, 246, 0.7) 100%
  );
  border: 1px solid rgba(26, 36, 27, 0.06);
  box-shadow: 0 8px 32px rgba(26, 36, 27, 0.08);
}

[data-theme="light-ether"] .prism-card::before {
  opacity: 0.4;
}

/* AUDIT v4: Removed parasitic "Light Ether Premium Enhancements" block
   that was overriding warm palette with cold rgba(0,0,0) / rgba(13,102,255) values.
   All light-ether styles are now consolidated in the main L.317 section + scattered overrides above. */

/* Hot topics — Rouge sémantique + bordure translucide */
[data-theme="light-ether"] .topic-card.hot {
  background: linear-gradient(135deg, #ffffff 0%, rgba(239, 68, 68, 0.04) 100%);
  border: 1px solid rgba(239, 68, 68, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(239, 68, 68, 0.08),
    0 4px 16px rgba(239, 68, 68, 0.06);
}

[data-theme="light-ether"] .topic-card.hot:hover {
  background: linear-gradient(135deg, #ffffff 0%, rgba(239, 68, 68, 0.07) 100%);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(239, 68, 68, 0.1),
    0 8px 24px rgba(239, 68, 68, 0.1);
}

/* Pinned topics — Poire fraîche subtile + bordure translucide */
[data-theme="light-ether"] .topic-card.pinned {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(168, 197, 69, 0.04) 100%
  );
  border: 1px solid rgba(168, 197, 69, 0.08);
  box-shadow: var(--shadow-card);
}

/* Mobile bottom nav — Glassmorphism céramique */
[data-theme="light-ether"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(26, 36, 27, 0.06);
  box-shadow: 0 -2px 12px rgba(26, 36, 27, 0.04);
}

/* ═══ Light-Ether Mobile Optimizations ═══
   - Hover effects supprimés (pas de pointeur sur tactile)
   - Ombres de contact renforcées (compensation zone réduite)
   - Transition allégées pour économie GPU */
@media (hover: none) {
  [data-theme="light-ether"] .topic-card,
  [data-theme="light-ether"] .post {
    /* Ombre de contact renforcée sur mobile */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 1px 3px rgba(26, 36, 27, 0.12),
      0 3px 10px rgba(26, 36, 27, 0.06);
  }
}

@media (max-width: 768px) {
  .topic-title {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========================================
   SPA Router Styles
   ======================================== */

/* Transition classes */
.spa-fade-out {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

.spa-fade-in {
  opacity: 1;
  transform: translateY(0);
  animation: spaFadeIn 0.2s ease-out;
}

@keyframes spaFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SPA progress bar removed globally (UX request). */

/* Ensure smooth transitions on main content */
.main-content {
  transition: opacity 0.2s ease-out;
  min-width: 0;
  min-height: 0;
}

/* SPA-enabled body marker */
body.spa-enabled .topic-card {
  cursor: pointer;
}

/* Highlight animation — see consolidated version in "Highlight Effect: Refined" section */

/* Mobile back button visibility for SPA */
@media (max-width: 768px) {
  body.mobile-topic-view #mobile-topic-back {
    display: flex !important;
  }
}

/* Topic layout adjustments for SPA */
.topic-layout {
  display: flex;
  flex-direction: column;
  /* SPLIT-SCREEN: Fill parent height, don't exceed viewport */
  height: 100%;
  overflow: hidden;
}

.topic-scroll-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* BOUNCE FIX: Contain elastic overscroll within this container.
     Without this, bounce at top/bottom propagates to the parent (body/html),
     causing visible unwanted rebound and triggering rapid delta oscillation
     in scroll handlers → scintillation of the reply form. */
  overscroll-behavior-y: contain;
}

/* Note: floating-nav styles are defined earlier in this file */

/* Lightbox Overlay — PORTALED TO BODY by JS for mobile stacking context fix */
#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000002;
  cursor: zoom-out;
}

#lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  transition: transform 0.2s;
}

.lightbox-close:hover {
  transform: scale(1.2);
}

/* Reply context bar styling - hidden by default, shown via inline style */
.reply-context-bar {
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: 12px;
  border-left: 3px solid var(--accent-primary);
  overflow: hidden;
}

/* Text must truncate to prevent pushing the close button off-screen */
.reply-context-bar #reply-context-text,
.reply-context-bar span[id="reply-context-text"] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Close button must never shrink or disappear */
.reply-context-bar button {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.reply-context-bar button:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
}

/* Avatar must not shrink either */
.reply-context-bar img {
  flex-shrink: 0;
}

/* When visible (display: flex is set via JS) */
.reply-context-bar[style*="display: flex"] {
  display: flex !important;
}

/* Editor compact toolbar */
.editor-toolbar-compact .editor-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s;
}

.editor-toolbar-compact .editor-btn:hover {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

@media (max-width: 768px) {
  .editor-toolbar-compact {
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow-x: auto;
    max-width: 100vw;
    padding: 4px 8px;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  /* FLUIDITY v3: Bigger touch targets on mobile toolbar */
  .editor-toolbar-compact .editor-btn {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  /* Hide scrollbar */
  .editor-toolbar-compact::-webkit-scrollbar {
    display: none;
  }
}

/* Editor zone styling */
#editor-zone {
  min-height: 40px;
  max-height: 150px;
  overflow-y: auto;
  padding: 10px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 14px;
  color: var(--text-main);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

#editor-zone:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

#editor-zone:empty::before {
  content: attr(placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

#editor-zone img {
  max-width: 100px;
  max-height: 100px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* Toast Notifications (Pro Style) */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--bg-surface);
  color: var(--text-main);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  max-width: 350px;
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-left: 4px solid var(--accent-primary);
}

.toast.show {
  transform: translateX(0);
}

.toast.error {
  border-left-color: var(--accent-danger);
}

.toast.success {
  border-left-color: var(--accent-success);
}

.toast.info {
  border-left-color: var(--accent-primary);
}

.toast-icon {
  font-size: 18px;
}

.toast.error .toast-icon {
  color: var(--accent-danger);
}

.toast.success .toast-icon {
  color: var(--accent-success);
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.toast-message {
  font-size: 13px;
  color: var(--text-muted);
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  margin-left: 8px;
}

.toast-close:hover {
  color: var(--text-main);
}

@media (max-width: 768px) {
  /* Prevent auto-zoom on mobile inputs by using 16px */
  input,
  textarea,
  select,
  .chat-editor {
    font-size: 16px !important;
  }
}

/* ========================================
   Upload Overlay - Modern Image Upload UI
   ======================================== */

.upload-overlay {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 10000;
  max-width: 350px;
  width: calc(100% - 40px);
  max-height: 400px;
  overflow: hidden;
  animation: slideUpFade 0.3s ease;
}

/* AUDIT FIX: Duplicate @keyframes slideUpFade removed.
   Canonical definition at ~L.2896. */

.upload-overlay-content {
  background: var(--glass-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

[data-theme="light-ether"] .upload-overlay-content {
  background: var(--glass-surface);
  border-color: var(--border-subtle);
  box-shadow: 0 8px 32px rgba(45, 40, 35, 0.12);
}

.upload-overlay-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
}

.upload-overlay-header i {
  color: var(--accent-primary);
  font-size: 16px;
}

.upload-overlay-header span {
  flex: 1;
}

.upload-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.upload-close-btn:hover {
  color: var(--text-main);
}

.upload-items {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.upload-item:last-child {
  margin-bottom: 0;
}

.upload-item.uploading {
  border-left: 3px solid var(--accent-primary);
}

.upload-item.success {
  border-left: 3px solid var(--accent-success);
  background: rgba(76, 175, 80, 0.1);
}

.upload-item.error {
  border-left: 3px solid var(--accent-danger);
  background: rgba(239, 83, 80, 0.1);
}

.upload-item-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-overlay);
}

.upload-item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-item-info {
  flex: 1;
  min-width: 0;
}

.upload-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.upload-item-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--surface-hover);
  border-radius: 2px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), #66bb6a);
  border-radius: 2px;
  width: 60%;
  animation: progressPulse 1.5s infinite ease-in-out;
}

.upload-item.success .upload-progress-fill {
  animation: none;
  background: var(--accent-success);
}

.upload-item.error .upload-progress-fill {
  animation: none;
  background: var(--accent-danger);
}

@keyframes progressPulse {
  0%,
  100% {
    opacity: 1;
    width: 30%;
  }

  50% {
    opacity: 0.7;
    width: 80%;
  }
}

.status-text {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.upload-item.success .status-text {
  color: var(--accent-success);
}

.upload-item.error .status-text {
  color: var(--accent-danger);
}

.upload-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.upload-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.upload-action-btn.cancel-btn {
  background: rgba(239, 83, 80, 0.15);
  color: var(--accent-danger);
}

.upload-action-btn.cancel-btn:hover {
  background: rgba(239, 83, 80, 0.3);
}

.upload-action-btn.success-btn {
  background: rgba(76, 175, 80, 0.2);
  color: var(--accent-success);
  cursor: default;
}

.upload-action-btn.retry-btn {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

.upload-action-btn.retry-btn:hover {
  background: rgba(255, 193, 7, 0.3);
}

.upload-action-btn.remove-btn {
  background: rgba(239, 83, 80, 0.15);
  color: var(--accent-danger);
}

.upload-action-btn.remove-btn:hover {
  background: rgba(239, 83, 80, 0.3);
}

/* Mobile adjustments for upload overlay */
@media (max-width: 768px) {
  .upload-overlay {
    bottom: 80px;
    right: 10px;
    left: 10px;
    max-width: none;
    width: auto;
  }

  .upload-item {
    padding: 8px 10px;
  }

  .upload-item-preview {
    width: 36px;
    height: 36px;
  }
}

/* ===================================
   SCROLL ANCHORING - Prevents jumps during prepend
   =================================== */
#posts-container {
  overflow-anchor: none;
  /* REMPLACEZ auto PAR none */
}

#top-spacer,
#bottom-spacer {
  overflow-anchor: none;
}

/* ===================================
   SKELETON LOADING - Modern placeholder animation
   =================================== */
@keyframes skeletonShimmer {
  0% {
    background-position: -200px 0;
  }

  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton-post {
  pointer-events: none;
  animation: skeletonFadeIn 0.3s ease-out both;
}

/* Staggered entrance for skeleton posts */
.skeleton-post:nth-child(1) {
  animation-delay: 0ms;
}

.skeleton-post:nth-child(2) {
  animation-delay: 50ms;
}

.skeleton-post:nth-child(3) {
  animation-delay: 100ms;
}

.skeleton-post:nth-child(4) {
  animation-delay: 150ms;
}

.skeleton-post:nth-child(5) {
  animation-delay: 200ms;
}

@keyframes skeletonFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth content reveal when real posts replace skeletons */
.post:not(.skeleton-post):not(.no-anim) {
  animation: postReveal 0.25s ease-out both;
}

@keyframes postReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Connection Status - Subtle shimmer for the thin top line */
@keyframes connShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-post .skeleton-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: var(--bg-surface-alt);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 0px,
    rgba(255, 255, 255, 0.1) 50%,
    var(--bg-surface-alt) 100%
  );
  background-size: 200px 100%;
  animation: skeletonShimmer 1s infinite ease-in-out;
}

.skeleton-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radius-xs);
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 0px,
    rgba(255, 255, 255, 0.08) 50%,
    var(--bg-surface-alt) 100%
  );
  background-size: 200px 100%;
  animation: skeletonShimmer 1s infinite ease-in-out;
}

.skeleton-name {
  width: 120px;
  height: 14px;
}

.skeleton-date {
  width: 60px;
  height: 10px;
}

.skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 20px;
}

.skeleton-content .skeleton-line {
  height: 14px;
}

/* Dark theme skeleton adjustments */
[data-theme="dark"] .skeleton-avatar,
[data-theme="grey"] .skeleton-avatar,
[data-theme="custom"] .skeleton-avatar,
[data-theme="dark"] .skeleton-line,
[data-theme="grey"] .skeleton-line,
[data-theme="custom"] .skeleton-line,
[data-theme="deep-ether"] .skeleton-avatar,
[data-theme="deep-ether"] .skeleton-line {
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 0px,
    rgba(255, 255, 255, 0.05) 50%,
    var(--bg-surface-alt) 100%
  );
  background-size: 200px 100%;
}

/* ===================================
   MOBILE BOTTOM NAVIGATION BAR
   =================================== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  /* Reduced from 60px to save space, maintaining 50px for touch targets */
  background: var(--glass-surface, var(--bg-surface));
  border-top: none !important;
  box-shadow: none !important;
  margin-top: -1px;
  background-clip: padding-box;
  z-index: 9998;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0;
  /* Removed padding to use full space */
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  flex: 1;
  /* Allow items to stretch evenly */
  height: 100%;
  /* Occupy full height of nav */
}

.mobile-nav-item i {
  font-size: 22px;
  transition: transform 0.2s ease;
}

/* Lucide SVG icons in mobile nav */
.mobile-nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  color: var(--accent-primary);
}

.mobile-nav-item:active i,
.mobile-nav-item:active svg {
  transform: scale(0.9);
}

/* Floating Action Button (FAB) style for new topic - Reverted to normal icon */
.mobile-nav-item.fab {
  color: var(--text-muted);
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.mobile-nav-item.fab:hover,
.mobile-nav-item.fab.active {
  color: var(--accent-primary);
}

.mobile-nav-item.fab:active,
.mobile-nav-item.fab:focus {
  transform: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.mobile-nav-item.fab:active i,
.mobile-nav-item.fab:active svg {
  transform: none !important;
}

/* Badge for notifications/messages on mobile nav */
.mobile-nav-badge {
  position: absolute;
  top: 0;
  right: 4px;
  background: var(--accent-danger);
  color: white;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(239, 83, 80, 0.4);
}

/* Avatar in mobile bottom nav */
.mobile-nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.mobile-nav-profile:hover .mobile-nav-avatar,
.mobile-nav-profile.active .mobile-nav-avatar {
  border-color: var(--accent-primary);
  transform: scale(1.1);
}

/* Blue badge variant for messages */
.mobile-nav-badge-blue {
  background: #2196f3 !important;
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.4) !important;
}

/* Hide elements on mobile (show in bottom nav instead) */
@media (max-width: 768px) {
  .hide-on-mobile,
  .sidebar-action-bar .btn-create-topic,
  .sidebar-action-bar #btn-postuler {
    display: none !important;
    min-width: 0;
    min-height: 0;
  }
}

/* Show elements only on mobile */
.show-on-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .show-on-mobile {
    display: block !important;
  }
}

/* Show mobile nav on small screens */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
  }

  /* Visibility is controlled by mobile-nav-visibility.js */
  body.mobile-nav-hidden .mobile-bottom-nav {
    display: none !important;
  }

  /* Adjust main content to not be hidden by bottom nav */
  .main-content {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important;
    transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    min-height: 0;
    background-color: transparent !important;
  }

  /* When nav is hidden, or inside topic view, remove extra bottom spacing */
  body.mobile-nav-hidden .main-content,
  body.smart-nav-scrolled .main-content,
  body.mobile-topic-view .main-content {
    padding-bottom: 0 !important;
    min-width: 0;
    min-height: 0;
  }
}

/* Mobile nav themes are now automatically handled by --glass-surface CSS tokens */

/* ===================================
   MOBILE SEARCH OVERLAY
   =================================== */
.mobile-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-body);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  animation: slideUpFade 0.25s ease-out;
}

.mobile-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding-top: calc(12px + env(safe-area-inset-top, 0));
}

.mobile-search-close {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 20px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-search-overlay input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-alt);
  color: var(--text-main);
  font-size: 16px;
  outline: none;
}

.mobile-search-overlay input[type="text"]:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(168, 197, 69, 0.15);
}

.mobile-search-filters {
  display: flex;
  gap: 8px;
  padding: 12px 15px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}

.mobile-filter-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.mobile-filter-btn:hover {
  background: var(--bg-surface);
  border-color: var(--accent-primary);
}

.mobile-filter-btn.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.mobile-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.mobile-search-results .topic-card {
  margin-bottom: 8px;
}

.mobile-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  text-align: center;
}

.mobile-search-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* Button style in bottom nav (for search) */
.mobile-bottom-nav button.mobile-nav-item {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ===================================
   NEW MESSAGES TOAST NOTIFICATION
   =================================== */
.new-messages-toast {
  position: fixed;
  bottom: 150px;
  /* Plus haut pour éviter la zone d'écriture */
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 10001;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}

.new-messages-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.new-messages-toast:hover {
  background: var(--bg-surface-alt);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.new-messages-toast:active {
  transform: translateX(-50%) scale(0.98);
}

.new-messages-toast i {
  color: var(--accent-primary);
  animation: bounceArrow 1s infinite;
}

@keyframes bounceArrow {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

/* ===================================
   TYPING INDICATOR - Simple et discret
   Juste une petite écriture centrée
   =================================== */
#typing-indicator {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  text-align: center;
  padding: 4px 0;
  display: none;
  /* Hidden par défaut */
}

/* TYPING FIX: The JS uses classList.add('visible') to show the indicator.
   Without this rule, the base display:none was never overridden. */
#typing-indicator.visible {
  display: block !important;
}

#typing-indicator:empty {
  display: none !important;
}

/* Animation des points "..." */
#typing-indicator::after {
  content: "";
  animation: typingDots 1.4s infinite;
}

@keyframes typingDots {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75% {
    content: "...";
  }

  100% {
    content: "";
  }
}

/* Typing indicator — Thème clair : texte Matcha sur fond porcelaine */
[data-theme="light-ether"] #typing-indicator {
  color: #3f5e14;
  background: var(--bg-surface-alt);
  border-radius: 20px;
  padding: 4px 14px;
  display: inline-block;
  margin: 4px auto;
  border: 1px solid rgba(168, 197, 69, 0.2);
  font-style: italic;
}

/* Centrer le pill dans son conteneur */
[data-theme="light-ether"] #typing-indicator.visible {
  display: flex !important;
  justify-content: center;
  width: fit-content;
  margin: 4px auto;
}

/* Alignement mobile : à gauche, au-dessus de la barre d'écriture */
@media (max-width: 768px) {
  #typing-indicator {
    text-align: left;
    margin-left: 15px;
    /* Aligné avec la marge de la zone de composition */
  }

  [data-theme="light-ether"] #typing-indicator.visible {
    justify-content: flex-start;
    margin: 4px 15px 4px 15px;
  }
}

/* ===================================
   LOADING SENTINEL
   =================================== */
#loading-sentinel {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Mobile adjustment for toast - PLUS HAUT pour éviter la zone d'écriture */
@media (max-width: 768px) {
  .new-messages-toast {
    bottom: calc(130px + env(safe-area-inset-bottom, 0));
    max-width: calc(100% - 40px);
    transition:
      bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease;
  }

  /* Audit Fix: S'adapte au comportement "scroll down" (nav bar cachée) */
  body.mobile-nav-hidden .new-messages-toast {
    bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }

  /* Audit Fix: Disparaît quand le clavier virtuel est ouvert (gain d'espace) */
  body.editor-focused .new-messages-toast,
  body:has(.fixed-reply-form:focus-within) .new-messages-toast {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-20px) translateX(-50%) !important;
  }
}

/* ===================================
   IMPROVED POST CARD STYLING
   =================================== */
.post {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  /* CRITICAL: Must be visible for swipe-reply-indicator to show outside post bounds */
  border: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  scroll-margin-top: 180px;
}

/* Subtle hover effect for posts */
.post:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Post header - transparent for lighter feel */
.post-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}

[data-theme="dark"] .post-header-row,
[data-theme="grey"] .post-header-row,
[data-theme="custom"] .post-header-row,
[data-theme="deep-ether"] .post-header-row {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Squircle avatar style */
.author-avatar-small {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.author-avatar-small:hover {
  transform: scale(1.05);
}

/* Better spacing for post content */
.post-content {
  padding: 14px 20px 18px;
  color: var(--post-content-color, var(--text-main));
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.1px;
}

/* AUDIT FIX: Use theme-tinted shadow tokens instead of pure black */
[data-theme="dark"] .post,
[data-theme="grey"] .post,
[data-theme="custom"] .post,
[data-theme="deep-ether"] .post {
  box-shadow: var(--shadow-card);
}

[data-theme="dark"] .post:hover,
[data-theme="grey"] .post:hover,
[data-theme="custom"] .post:hover,
[data-theme="deep-ether"] .post:hover {
  box-shadow: var(--shadow-elevated);
}

/* ===================================
   DARK THEME — Premium Enhancements (R1)
   =================================== */

/* Dark: Topic cards — hover glow & transitions */
[data-theme="dark"] .topic-card,
[data-theme="grey"] .topic-card,
[data-theme="custom"] .topic-card {
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

[data-theme="dark"] .topic-card:hover,
[data-theme="grey"] .topic-card:hover,
[data-theme="custom"] .topic-card:hover {
  background: var(--bg-surface-alt);
  border-color: var(--glow-border, rgba(181, 212, 85, 0.3));
  box-shadow:
    var(--shadow-elevated),
    0 0 20px var(--accent-highlight, rgba(181, 212, 85, 0.08));
}

/* Dark: Topic card pinned — gradient subtil */
[data-theme="dark"] .topic-card.pinned,
[data-theme="grey"] .topic-card.pinned,
[data-theme="custom"] .topic-card.pinned {
  background: linear-gradient(
    135deg,
    var(--bg-surface) 0%,
    var(--surface-tint, rgba(181, 212, 85, 0.06)) 100%
  );
  border-color: var(--border-subtle, rgba(181, 212, 85, 0.15));
}

/* Dark: Topic card active — accent bar gauche */
[data-theme="dark"] .topic-card.active,
[data-theme="grey"] .topic-card.active,
[data-theme="custom"] .topic-card.active {
  border-color: var(--accent-primary);
  box-shadow:
    0 0 0 1px var(--glow-border, rgba(181, 212, 85, 0.2)),
    0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .topic-card.active::before,
[data-theme="grey"] .topic-card.active::before,
[data-theme="custom"] .topic-card.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 100%
  );
  border-radius: 3px 0 0 3px;
}

/* Dark: Post header � d�grad� subtil comme light-ether */
[data-theme="dark"] .post-header-row,
[data-theme="grey"] .post-header-row,
[data-theme="custom"] .post-header-row {
  background: linear-gradient(
    to bottom,
    var(--bg-surface),
    var(--bg-surface-alt)
  );
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Dark: Input focus � glow ring vert */
[data-theme="dark"] input:focus,
[data-theme="grey"] input:focus,
[data-theme="custom"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="grey"] textarea:focus,
[data-theme="custom"] textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow-soft, rgba(181, 212, 85, 0.15));
}

/* Dark: Reply count hover illumination */
[data-theme="dark"] .topic-card:hover .reply-count,
[data-theme="grey"] .topic-card:hover .reply-count,
[data-theme="custom"] .topic-card:hover .reply-count {
  background: var(--accent-primary);
  color: var(--bg-body);
  box-shadow: 0 0 10px var(--accent-glow, rgba(181, 212, 85, 0.3));
}

/* Dark: Scrollbar harmonis�e (vert accent) */
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
[data-theme="grey"] ::-webkit-scrollbar-thumb:hover,
[data-theme="custom"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-primary);
}

/* ===================================
   INPUT VALIDATION UTILITIES (R5)
   =================================== */

/* Erreur */
input.input-error,
textarea.input-error,
select.input-error {
  border-color: var(--input-error-border) !important;
  background-color: var(--input-error-bg);
}

input.input-error:focus,
textarea.input-error:focus {
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2);
}

/* Succs */
input.input-success,
textarea.input-success,
select.input-success {
  border-color: var(--input-success-border) !important;
  background-color: var(--input-success-bg);
}

input.input-success:focus,
textarea.input-success:focus {
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
}

/* Warning */
input.input-warning,
textarea.input-warning,
select.input-warning {
  border-color: var(--input-warning-border) !important;
  background-color: var(--input-warning-bg);
}

input.input-warning:focus,
textarea.input-warning:focus {
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2);
}

/* ═══ Light-Ether Validation — Bordure 2px + anneau céramique ═══
   L'audit recommande des bordures épaissies pour compenser
   la subtilité des fonds translucides sur surface claire. */
[data-theme="light-ether"] input.input-error,
[data-theme="light-ether"] textarea.input-error,
[data-theme="light-ether"] select.input-error {
  border-width: 2px;
}

[data-theme="light-ether"] input.input-error:focus,
[data-theme="light-ether"] textarea.input-error:focus {
  box-shadow:
    inset 0 1px 2px rgba(239, 68, 68, 0.08),
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(239, 68, 68, 0.3);
}

[data-theme="light-ether"] input.input-success,
[data-theme="light-ether"] textarea.input-success,
[data-theme="light-ether"] select.input-success {
  border-width: 2px;
}

[data-theme="light-ether"] input.input-success:focus,
[data-theme="light-ether"] textarea.input-success:focus {
  box-shadow:
    inset 0 1px 2px rgba(34, 197, 94, 0.08),
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(34, 197, 94, 0.3);
}

[data-theme="light-ether"] input.input-warning,
[data-theme="light-ether"] textarea.input-warning,
[data-theme="light-ether"] select.input-warning {
  border-width: 2px;
}

[data-theme="light-ether"] input.input-warning:focus,
[data-theme="light-ether"] textarea.input-warning:focus {
  box-shadow:
    inset 0 1px 2px rgba(245, 158, 11, 0.08),
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(245, 158, 11, 0.3);
}

/* Message d'aide sous l'input */
.input-help {
  font-size: var(--text-xs);
  margin-top: 4px;
  color: var(--text-muted);
}

.input-help.error {
  color: var(--input-error-text, var(--accent-danger));
}

.input-help.success {
  color: var(--accent-success);
}

/* ===================================
   POST CONTENT � Max-Width Readability (R4)
   =================================== */

/* Longueur de ligne optimale : 65-75 caract�res (Chipman Ch.6) */
.post-content {
  max-width: 700px;
}

/* ===================================
   FLOATING NAVIGATION BUTTONS (Scroll)
   =================================== */
.nav-btn {
  position: fixed;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 18px;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s ease,
    opacity 0.3s ease,
    background 0.2s ease,
    visibility 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

/* Desktop positioning */
.nav-btn.nav-btn-top {
  bottom: 120px;
}

.nav-btn.nav-btn-bottom {
  bottom: 20px;
}

.nav-btn:hover {
  background: var(--bg-surface-alt);
  transform: scale(1.1);
}

.nav-btn:active {
  transform: scale(0.95);
}

.nav-btn.hidden,
.nav-btn.idle {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  visibility: hidden;
  /* Ensure it doesn't block clicks */
}

/* Mobile adjustments for nav buttons */
@media (max-width: 768px) {
  .nav-btn {
    right: 12px;
    width: 44px;
    height: 44px;
    font-size: 16px;
    /* CRITICAL: Must be above EVERYTHING (z-index: 20000) */
    z-index: 20000 !important;
    /* Glassmorphism effect for visibility */
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .nav-btn:active {
    background: var(--accent-primary);
    transform: scale(0.95);
  }

  /* Scroll to bottom button - positioned just above mobile bottom nav */
  #scroll-bottom-btn,
  .nav-btn-bottom {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
  }

  /* Scroll to top button - positioned at TOP of screen */
  .nav-btn-top {
    top: calc(70px + env(safe-area-inset-top));
    bottom: auto !important;
  }

  /* When editor is focused, move bottom button higher */
  body.editor-focused #scroll-bottom-btn,
  body.editor-focused .nav-btn-bottom {
    bottom: calc(180px + env(safe-area-inset-bottom)) !important;
  }

  /* Make sure visible state works */
  .nav-btn:not(.hidden) {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
  }
}

/* ===================================
   MOBILE SWIPE GESTURE — Disable Native Back
   Prevents Safari/Chrome native swipe-to-navigate
   from conflicting with our JS swipe handler.
   Only active in topic view (not topic list).
   =================================== */
@media (hover: none) and (pointer: coarse) {
  body.mobile-topic-view,
  body.mobile-view-content {
    /* Tell browser: only handle vertical scroll natively.
           Horizontal touches are fully managed by JS. */
    touch-action: pan-y;
    /* Prevent Chrome Android pull-to-navigate */
    overscroll-behavior-x: none;
  }

  body.mobile-topic-view .main-content,
  body.mobile-view-content .main-content {
    touch-action: pan-y;
    overscroll-behavior-x: none;
    min-width: 0;
    min-height: 0;
  }
}

/* ===================================
   SWIPE-TO-REPLY INDICATOR (Mobile)
   Industrial Pro V5 — Premium Haptic Feel
   =================================== */
.swipe-reply-indicator {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 2px 8px rgba(168, 197, 69, 0.4);
  z-index: 10;
}

/* Right-side reply indicator — WhatsApp style */
.swipe-reply-indicator-right {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%) scale(0.3);
  width: 44px;
  height: 44px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  opacity: 0;
  box-shadow: 0 4px 16px rgba(168, 197, 69, 0.3);
  z-index: 10;
  /* GPU-accelerated smooth transitions */
  transition:
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.12s ease-out,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  will-change: transform, opacity;
}

/* Threshold reached — inverted colors + glow pulse */
.swipe-reply-indicator-right.threshold-reached {
  background: #fff;
  color: var(--accent-primary);
  box-shadow:
    0 4px 20px rgba(168, 197, 69, 0.6),
    0 0 40px rgba(168, 197, 69, 0.2);
  /* PERF: box-shadow animation removed — causes paint every frame on mobile GPU.
     Replaced by GPU-accelerated pseudo-element below (opacity + transform only). */
}

/* GPU-accelerated glow pulse — uses opacity+transform instead of box-shadow repaint */
.swipe-reply-indicator-right.threshold-reached::after,
.swipe-reply-indicator-right.threshold-deep::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 197, 69, 0.5), transparent 70%);
  animation: swipeGlowPulse 0.8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes swipeGlowPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Swiping state on post — depth + subtle tilt */
/* CRITICAL: transition/animation must be killed during swipe gestures.
   Without this, the CSS transition (transform 0.2s) and animation (postSlideUp)
   fight the inline transform set by JS in onTouchMove, making the post visually
   static even though the gesture logic executes correctly. */
.post.is-swiping {
  transition: none !important;
  animation: none !important;
  /* PERF: Explicit GPU layer promotion during gesture — ensures 60fps transform */
  will-change: transform !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.1) !important;
  /* FIX: Force overflow visible during swipe — is-poire-artiste, is-dieu-dechu,
       and post-blocked all set overflow:hidden which clips the indicator at right:-60px */
  overflow: visible !important;
  /* CRITICAL: contain:none prevents clipping from layout containment (performance-optimizations.css) */
  contain: none !important;
  /* Elevated z-index to prevent overlapping with neighboring posts during gesture */
  z-index: 9999 !important;
}

.post {
  position: relative;
  padding-bottom: 28px !important;
  /* Reserve space for reactions to avoid CLS */
  /* Ensure transform doesn't clip indicator */
  overflow: visible;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .swipe-reply-indicator-right {
    transition: none !important;
    animation: none !important;
  }

  .swipe-reply-indicator-right.threshold-reached,
  .swipe-reply-indicator-right.threshold-deep {
    animation: none !important;
  }

  .swipe-reply-indicator-right.threshold-reached::after,
  .swipe-reply-indicator-right.threshold-deep::after {
    animation: none !important;
  }
}

/* ===================================
   SWIPE V7 — God-Tier Contextual Modes
   #4: Edit (pen/orange), #5: Locked (lock/gray), #6: Deep (bookmark/gold)
   =================================== */

/* #4: Edit mode — orange accent for own posts */
.swipe-reply-indicator-right.swipe-mode-edit {
  background: #ff9800;
  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.35);
}

.swipe-reply-indicator-right.swipe-mode-edit.threshold-reached {
  background: #fff;
  color: #ff9800;
  box-shadow:
    0 4px 20px rgba(255, 152, 0, 0.6),
    0 0 40px rgba(255, 152, 0, 0.2);
}

/* GPU-accelerated glow for edit mode */
.swipe-reply-indicator-right.swipe-mode-edit.threshold-reached::after {
  background: radial-gradient(circle, rgba(255, 152, 0, 0.5), transparent 70%);
}

/* #5: Locked mode — gray accent for deleted/locked posts */
.swipe-reply-indicator-right.swipe-mode-locked {
  background: #78909c;
  box-shadow: 0 4px 16px rgba(120, 144, 156, 0.3);
}

.swipe-reply-indicator-right.swipe-mode-locked.threshold-reached {
  background: #546e7a;
  color: #cfd8dc;
  box-shadow: 0 4px 16px rgba(120, 144, 156, 0.4);
  animation: none;
  /* No celebration for denied actions */
}

/* #6: Deep Swipe Tier 2 — bookmark gold */
.swipe-reply-indicator-right.threshold-deep {
  background: #ffd54f !important;
  color: #5d4037 !important;
  box-shadow:
    0 4px 24px rgba(255, 213, 79, 0.6),
    0 0 40px rgba(255, 213, 79, 0.25) !important;
}

/* GPU-accelerated glow for deep swipe */
.swipe-reply-indicator-right.threshold-deep::after {
  background: radial-gradient(circle, rgba(255, 213, 79, 0.5), transparent 70%) !important;
}

/* swipeDeepPulse keyframes removed — GPU glow via ::after pseudo-element */

/* #8: Flying icon choreography */
.swipe-icon-flying {
  font-size: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* #9: GPU hint for sidebar during blur parallax */
.sidebar {
  will-change: transform, filter;
  min-width: 0;
  min-height: 0;
}

/* ===================================
   CONTEXT MENU — Unified (Desktop + Mobile)
   Single source of truth for all context menus.
   =================================== */

/* --- Desktop: Floating dropdown --- */
.context-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 30px -5px rgba(0, 0, 0, 0.25);
  min-width: 200px;
  max-width: 280px;
  overflow: hidden;
  z-index: 20001;
  flex-direction: column;
  padding: 6px 0;
  /* GPU-accelerated open animation */
  animation: ctxMenuIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: top left;
}

@keyframes ctxMenuIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-4px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Context menu icon (replaces inline styles on <i> tags) --- */
.context-menu-icon {
  width: 18px;
  text-align: center;
  margin-right: 10px;
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
}

/* --- Items --- */
.context-item {
  padding: 9px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  transition:
    background 0.12s ease,
    color 0.12s ease;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.context-item:hover {
  background: var(--bg-surface-alt);
}

.context-item:active {
  background: var(--surface-hover);
  transform: scale(0.98);
  transition: transform 0.08s ease;
}

/* Danger items */
.context-item.text-danger {
  color: var(--accent-danger);
}

.context-item.text-danger .context-menu-icon {
  color: var(--accent-danger);
}

.context-item.text-danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* Success items (restore) */
.context-item.text-success {
  color: var(--accent-success);
}

.context-item.text-success .context-menu-icon {
  color: var(--accent-success);
}

.context-item.text-success:hover {
  background: rgba(34, 197, 94, 0.08);
}

/* --- Separators --- */
.context-menu .separator {
  height: 1px;
  background: var(--border-color);
  margin: 4px 8px;
  opacity: 0.6;
}

/* --- Context Menu Overlay (mobile backdrop) --- */
.context-menu-overlay {
  touch-action: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 20000;
  opacity: 0;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.context-menu-overlay.visible {
  opacity: 1;
}

/* ── Mobile: Bottom Sheet ── */
@media (max-width: 768px) {
  .context-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 8px 0 calc(20px + env(safe-area-inset-bottom, 0px)) 0;
    background: var(--bg-surface);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
    border: none;
    border-top: 1px solid var(--border-color);
    min-width: unset;
    z-index: 20001;
    animation: none;
    /* Mobile slide-up is handled by JS transform */
  }

  /* Handle / drag pill */
  .context-menu::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--text-muted);
    opacity: 0.3;
    margin: 6px auto 12px;
    border-radius: 2px;
  }

  .context-item {
    padding: 14px 20px;
    font-size: 15px;
    gap: 10px;
    min-height: 48px;
    /* Touch target compliance */
  }

  .context-menu-icon {
    width: 22px;
    font-size: 15px;
    margin-right: 12px;
  }

  .context-menu .separator {
    margin: 4px 16px;
  }

  /* CRITICAL: Disable native iOS context menu on posts */
  .post {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Mobile: NO text selection — it conflicts with long-press context menu and quote system */
  .post-content {
    -webkit-user-select: none;
    user-select: none;
  }

  .topic-title {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ===================================
   ANIMATIONS
   =================================== */
/* AUDIT FIX: Duplicate @keyframes slideUpFade removed.
   Canonical definition at ~L.2896. */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* ===================================
   ⭐ PREMIUM ENHANCEMENTS
   Professional polish & fluid animations
   =================================== */

/* --- Smooth Scroll Behavior --- */
html {
  scroll-behavior: smooth;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Topic Cards: Premium Hover & Staggered Load --- */
.topic-card {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s ease,
    background-color 0.2s ease;
  animation: cardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Staggered animation for topic cards */
.topic-card:nth-child(1) {
  animation-delay: 0ms;
}

.topic-card:nth-child(2) {
  animation-delay: 30ms;
}

.topic-card:nth-child(3) {
  animation-delay: 60ms;
}

.topic-card:nth-child(4) {
  animation-delay: 90ms;
}

.topic-card:nth-child(5) {
  animation-delay: 120ms;
}

.topic-card:nth-child(6) {
  animation-delay: 150ms;
}

.topic-card:nth-child(7) {
  animation-delay: 180ms;
}

.topic-card:nth-child(8) {
  animation-delay: 210ms;
}

.topic-card:nth-child(9) {
  animation-delay: 240ms;
}

.topic-card:nth-child(10) {
  animation-delay: 270ms;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced topic card hover */
.topic-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Desktop-only press feedback — on mobile :active fires during scroll */
@media (hover: hover) {
  .topic-card:active {
    transform: translateY(0) scale(0.99);
  }
}

/* Active topic card glow effect */
.topic-card.active {
  box-shadow:
    0 0 0 1px var(--accent-primary),
    0 4px 16px rgba(168, 197, 69, 0.2),
    0 8px 32px rgba(168, 197, 69, 0.1);
}

/* Deep Ether theme: subtle glow on active cards */
[data-theme="deep-ether"] .topic-card.active {
  box-shadow:
    0 0 0 1px var(--primary-azure),
    0 0 20px rgba(13, 102, 255, 0.15),
    0 8px 32px rgba(59, 130, 246, 0.12);
}

/* --- Posts: Enhanced Animation & Polish --- */
.post {
  animation: postSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  will-change: transform, opacity;
}

/* Staggered post loading */
.post:nth-child(1) {
  animation-delay: 0ms;
}

.post:nth-child(2) {
  animation-delay: 50ms;
}

.post:nth-child(3) {
  animation-delay: 100ms;
}

.post:nth-child(4) {
  animation-delay: 150ms;
}

.post:nth-child(5) {
  animation-delay: 200ms;
}

@keyframes postSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SCROLL RESTORE: Kill all post animations during scroll position restoration.
   Applied temporarily by loadAroundPost() to prevent postSlideUp's translateY(16px)
   from contaminating getBoundingClientRect() measurements. */
.no-anim .post,
.no-anim .post * {
  animation: none !important;
  transition: none !important;
}

/* Subtle hover lift for posts */
@media (hover: hover) {
  .post:hover {
    transform: translateY(-1px);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.12),
      0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

/* --- Buttons: Micro-interactions --- */
.btn,
button,
.btn-new,
.btn-create-topic,
.filter-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn:active,
button:active,
.btn-new:active,
.btn-create-topic:active {
  transform: scale(0.97);
}

/* Ripple effect on click — btn only (btn-create-topic excluded to avoid ::after conflict) */
.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.4s ease,
    height 0.4s ease,
    opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

.btn:active::after {
  width: 200%;
  height: 200%;
  opacity: 1;
  transition:
    width 0s,
    height 0s,
    opacity 0.4s ease;
}

/* --- Utility Buttons (Danger, Success, Warning, Ghost) --- */
.btn-danger {
  background: var(--accent-danger);
  color: #ffffff;
  border: none;
}

.btn-danger:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 12px rgba(255, 92, 92, 0.25);
}

.btn-success {
  background: var(--accent-success);
  color: #ffffff;
  border: none;
}

.btn-success:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.25);
}

.btn-warning {
  background: var(--accent-warning);
  color: #1a1a2e;
  border: none;
}

.btn-warning:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 12px rgba(255, 176, 58, 0.25);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-ghost:hover {
  background: var(--bg-surface-alt);
  border-color: var(--text-muted);
}

/* Enhanced focus states for accessibility */
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg-surface),
    0 0 0 4px var(--accent-primary);
}

/* --- Native Dialog Modals --- */
dialog.native-modal {
  background: var(--bg-surface);
  color: var(--text-main);
  padding: 36px 32px;
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-floating);
  border: 1px solid var(--border-color);
  margin: auto;
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 480px) {
  dialog.native-modal {
    padding: 24px 20px;
    width: 95%;
  }
}

dialog.native-modal[open] {
  opacity: 1;
  transform: scale(1);
}

dialog.native-modal::backdrop {
  background: var(--modal-backdrop, rgba(0, 0, 0, 0.7));
  backdrop-filter: var(--modal-blur, blur(5px));
  -webkit-backdrop-filter: var(--modal-blur, blur(5px));
  opacity: 0;
  transition: opacity 0.3s ease;
}

dialog.native-modal[open]::backdrop {
  opacity: 1;
}

.modal-header-img {
  width: 200px;
  height: auto;
  border-radius: 14px;
  margin: 0 auto 16px;
  display: block;
  object-fit: contain;
}

.modal-title {
  margin: 0 0 8px;
  color: var(--text-main);
  font-size: 1.4rem;
}

.modal-subtitle {
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.5;
}

.modal-features {
  text-align: left;
  color: var(--text-muted);
  margin: 16px 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

.modal-feature-item {
  margin-bottom: 6px;
}

.modal-feature-icon {
  color: var(--accent-primary);
  width: 20px;
  text-align: center;
}

.modal-feature-text {
  color: var(--text-main);
  font-weight: bold;
}

.modal-footer-note {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 10px;
  opacity: 0.6;
}

/* --- Inputs: Premium Focus Effects --- */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
#sidebar-search-input,
#editor-zone {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
#sidebar-search-input:focus,
#editor-zone:focus {
  border-color: var(--accent-primary);
  box-shadow:
    0 0 0 3px rgba(168, 197, 69, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="deep-ether"] input:focus,
[data-theme="deep-ether"] textarea:focus {
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.25),
    0 0 20px rgba(59, 130, 246, 0.12);
}

/* --- Skeleton Loader: Premium Shimmer --- */
@keyframes premiumShimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.skeleton-avatar,
.skeleton-line {
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    var(--bg-surface-alt) 100%
  );
  background-size: 800px 100%;
  animation: premiumShimmer 1.8s infinite linear;
}

/* --- Links: Underline Animation --- */
a:not(.btn):not(.topic-card):not(.sidebar-menu-item):not(.mobile-nav-item) {
  position: relative;
  text-decoration: none;
  min-width: 0;
  min-height: 0;
}

a:not(.btn):not(.topic-card):not(.sidebar-menu-item):not(
    .mobile-nav-item
  )::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  min-height: 0;
}

a:not(.btn):not(.topic-card):not(.sidebar-menu-item):not(
    .mobile-nav-item
  ):hover::after {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* --- Sidebar Menu Items: Smooth Transitions ---
 * NOTE: Transitions are now consolidated in the main sidebar-menu-item block.
 * The .sidebar-menu-icon handles icon scaling via the pill wrapper.
 */

/* --- Avatar Hover Effects --- */
.author-avatar-small,
.mobile-nav-avatar,
img[alt*="Avatar"] {
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s ease;
  min-width: 0;
  min-height: 0;
}

.author-avatar-small:hover,
img[alt*="Avatar"]:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* --- Floating Nav Buttons: Enhanced --- */
.nav-btn {
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.nav-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.nav-btn:active {
  transform: scale(0.95);
}

/* --- Header & Dropdowns: Glass Effect Enhancement --- */
header {
  transition: backdrop-filter 0.3s ease;
}

#notif-dropdown,
#msg-dropdown,
#profile-dropdown,
.mobile-msg-dropdown {
  animation: dropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Bottom Navigation: Premium Feedback --- */
.mobile-nav-item {
  transition:
    color 0.2s ease,
    transform 0.15s ease;
}

.mobile-nav-item:active {
  transform: scale(0.92);
}

.mobile-nav-item i {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-item:active i {
  transform: scale(0.85);
}

/* FAB bounce on hover - removed for static behavior */
.mobile-nav-item.fab:hover {
  animation: none;
}

/* --- Flash Messages: Improved Animation --- */
.flash-msg {
  animation: flashSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes flashSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Loading Spinner: Smoother --- */
.loading-spinner {
  animation: spinSmooth 0.7s linear infinite;
}

@keyframes spinSmooth {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Context menu animation: see unified ctxMenuIn in CONTEXT MENU section */

/* --- Tooltips & Badges: Subtle Animations --- */
.mobile-nav-badge,
#notif-badge,
#msg-badge {
  animation: badgePop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes badgePop {
  0% {
    transform: scale(0);
  }

  70% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* --- Image Loading: Fade In --- */
.post-content img,
.author-avatar-small {
  opacity: 0;
  animation: imageLoad 0.3s ease forwards;
}

.post-content img[src],
.author-avatar-small[src] {
  opacity: 1;
}

@keyframes imageLoad {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- Highlight Effect: Consolidated & Visible (2.5s) --- */
/* ⚠️ N'utilise PAS background-color ici — il est écrasé par le gradient
   des thèmes (deep-ether/light-ether) qui utilisent `background` shorthand.
   On utilise outline + box-shadow qui ne sont pas affectés. */
@keyframes highlightGlow {
  0% {
    outline: 2px solid rgba(255, 195, 0, 0.9);
    outline-offset: 0px;
    box-shadow:
      inset 0 0 0 9999px rgba(255, 215, 0, 0.12),
      0 0 20px rgba(255, 195, 0, 0.3);
  }

  /* Stay solid for the first half so user actually sees it */
  50% {
    outline: 2px solid rgba(255, 195, 0, 0.6);
    outline-offset: 0px;
    box-shadow:
      inset 0 0 0 9999px rgba(255, 215, 0, 0.06),
      0 0 12px rgba(255, 195, 0, 0.15);
  }

  100% {
    outline: 2px solid transparent;
    outline-offset: 0px;
    box-shadow: none;
  }
}

.post.highlight,
.highlight-yellow {
  animation: highlightGlow 2.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-md, 8px);
}

/* --- Modal & Overlay: Premium Backdrop --- */
#welcome-modal,
#lightbox-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════════════════════════
   REACTIONS — Emoji reaction badges  (Phase 6: 2026 Audit)
   ────────────────────────────────────────────────────────────────
   Architecture: depth, texture, color-as-indicator, spring physics,
          icon consistency, rhythm, visual hierarchy, stagger
          cascade, microcopy, focus-visible, whitespace hierarchy
   Phase 5 retained:
     #1  Predictability: always-visible count on active badges
     #3  Proximity: subtle divider for reaction grouping
     #5  Error Recovery: shake animation on failed toggle
     #6  Rhythm: staggered badge entrance
     #7  Affordance: disabled state for guests
     #13 Desirable: premium picker glow
     #15 Touch: 44px mobile targets
   Phase 6 (2026 Audit) additions:
     #A  Deep Ether: azure accent + glassmorphism-aware badge rendering
     #B  Squircle: 30% border-radius on badges for cortex-optimized scanning
     #C  Design tokens: --z-popover, --ease-spring, --duration-fast everywhere
     #D  Mobile: Bottom Sheet paradigm for picker on touch devices
     #E  Haptic sync: .reaction-haptic-target utility class
     #F  Timing: Pop reduced to 150ms (sub-300ms perceptual feedback)
     #G  Accessibility: .sr-only reaction descriptions, aria-live regions
     #H  Contextual reveal: add-btn at 0.2 opacity, appears on post hover
   ══════════════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* Screen-reader only helper (used for reaction badge descriptions) */
.reaction-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Live region for reaction updates — announced without interruption */
.reaction-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* #3 Proximity:
   Subtle top divider separates reactions from post content.
   "Elements that are close to each other are perceived as the same group" */
.post-reactions {
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 28px;
  height: auto;
  display: flex;
  align-items: center;
  padding: 2px 12px;
  border-top: 1px solid transparent;
  box-sizing: border-box;
}

[data-theme="light-ether"] .post-reactions {
  border-top-color: rgba(45, 40, 35, 0.04);
}

/* #A Deep Ether: cooler divider with azure undertone */
[data-theme="deep-ether"] .post-reactions {
  border-top-color: rgba(13, 102, 255, 0.06);
}

/* Hide reactions on intermediate posts in a consecutive group.
   Only the LAST post of the group shows reactions — avoids visual clutter.
   The reaction-add-btn is also hidden, so users can only react to the last post. */
.post.has-consecutive-next .post-reactions {
  display: none;
}

/* Rhythm: consistent gap creates the "musical score" (Panzarella ch. Rhythm)
   Proximity: tighter gap for compact emoji-only badges (Panzarella ch. Proximity) */
.reactions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* ── Individual reaction badge ──
   Pill layout: emoji + count always visible for at-a-glance scanning.
   Simplicity (Panzarella ch. Simplicity):
   "Things tend to get complicated" → keep badge minimal.
   Dominance (Panzarella ch. Dominance):
   Emoji is the dominant element; count is secondary */
/* #6 Rhythm (Panzarella ch. Rhythm): stagger-cascade on initial render.
   --reaction-index is set inline by JS. Creates the "musical score" effect */
@keyframes reactionEntrance {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(6px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Compact pill: emoji fills most of the badge */
  padding: 1px 5px 1px 1px;
  /* #B Squircle: 30% creates a superellipse — processed faster by human cortex
       than traditional rounded-rect, reducing cognitive load during rapid scanning */
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  /* #C Design tokens: Use CSS custom props for all timing values */
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 120ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    box-shadow 150ms ease,
    filter 150ms ease;
  font-size: var(--text-sm, 13px);
  color: var(--text-muted, #aaa);
  user-select: none;
  box-shadow: none;
  position: relative;
  overflow: visible;
  /* #6 Rhythm: staggered entrance */
  animation: reactionEntrance 0.3s
    var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;
  animation-delay: calc(var(--reaction-index, 0) * 40ms);
}

/* #7 Affordance (Panzarella ch. Affordance):
   "If a button is not clickable, it should appear turned off."
   Non-logged guests see badges but cannot interact */
.reaction-badge.reaction-disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.55;
  filter: grayscale(0.3);
}

/* #5 Error Recovery (Panzarella ch. Error Messages + Chipman ch. Error-Proofing):
   "In moments of difficulty, the most lasting relationships are created."
   Brief red shake communicates failure without a disruptive alert box */
@keyframes reactionShake {
  0%,
  100% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-4px);
  }

  30% {
    transform: translateX(4px);
  }

  45% {
    transform: translateX(-3px);
  }

  60% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-1px);
  }

  90% {
    transform: translateX(1px);
  }
}

.reaction-badge.reaction-error {
  animation: reactionShake 0.45s ease-in-out;
  border-color: rgba(255, 80, 80, 0.5) !important;
  box-shadow: 0 0 10px rgba(255, 80, 80, 0.2) !important;
}

/* Micro-animation: elastic bounce when toggled (P1) */
/* #F Timing audit: Pop reduced to 150ms (was 400ms).
   sub-300ms = brain associates the visual feedback with the physical click,
   maintaining flow state per 2026 usability guidelines.
   Using --ease-spring for the elastic overshoot "physicalité" feeling. */
@keyframes reactionPop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.25);
  }

  70% {
    transform: scale(0.96);
  }

  100% {
    transform: scale(1);
  }
}

.reaction-badge.reaction-pop {
  animation: reactionPop var(--duration-fast, 150ms)
    var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* Hover: badge lifts with subtle scale for spatial feedback.
   Spring transform via --ease-spring for organic overshoot */
.reaction-badge:hover,
.reaction-badge:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 100%
    );
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.95);
}

/* ── Active state: user has reacted ──
   Color = functional indicator (Panzarella ch. Color):
   Gold = warmth, approval, positivity
   Layered gradient + glow = high contrast → dominance over inactive badges
   (Panzarella ch. Dominance: "strong contrast makes a smaller element dominant")
   #1 Predictability: active badges always show count (user already committed) */
.reaction-badge.reaction-active {
  background:
    linear-gradient(180deg, rgba(255, 215, 50, 0.15) 0%, transparent 50%),
    linear-gradient(
      135deg,
      rgba(255, 195, 0, 0.28) 0%,
      rgba(255, 170, 0, 0.15) 100%
    );
  border-color: rgba(255, 195, 0, 0.6);
  color: #ffc300;
  box-shadow:
    0 0 10px rgba(255, 195, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 195, 0, 0.15);
}

/* Active emoji icon: slight scale + saturation boost for visual pop */
.reaction-badge.reaction-active .reaction-icon {
  filter: drop-shadow(0 1px 3px rgba(255, 195, 0, 0.3)) saturate(1.15);
  transform: scale(1.05);
}

.reaction-badge.reaction-active:hover,
.reaction-badge.reaction-active:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 215, 50, 0.2) 0%, transparent 50%),
    linear-gradient(
      135deg,
      rgba(255, 195, 0, 0.35) 0%,
      rgba(255, 170, 0, 0.22) 100%
    );
  border-color: rgba(255, 195, 0, 0.75);
  box-shadow:
    0 0 18px rgba(255, 195, 0, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 195, 0, 0.18);
  transform: translateY(-1px) scale(1.03);
}

/* Subtle persistent glow pulse on freshly-activated badges
   (Chipman p.169: "A distinct beginning, middle, and end should be present") */
@keyframes reactionGlow {
  0%,
  100% {
    box-shadow:
      0 0 8px rgba(255, 195, 0, 0.15),
      0 2px 6px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 195, 0, 0.1);
  }

  50% {
    box-shadow:
      0 0 14px rgba(255, 195, 0, 0.28),
      0 2px 6px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 195, 0, 0.1);
  }
}

.reaction-badge.reaction-active.reaction-just-activated {
  animation: reactionGlow 1.2s ease-in-out 1;
}

/* ── Emoji icon inside badge ──
   Icon sizing: large enough to clearly see the representation (Panzarella ch. Icons)
   Drop-shadow creates visual "lift" that separates icon from badge surface */
.reaction-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  /* Subtle scale transition for when badge animates */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Desktop only: enlarge reaction icon by 30% without affecting container box-model */
@media (min-width: 769px) {
  .reaction-icon {
    transform: scale(1.3);
  }

  .reaction-badge.reaction-active .reaction-icon {
    transform: scale(1.365);
  }
}

/* ── Reaction count — hidden at rest, revealed on hover ──
   Progressive Disclosure (Panzarella ch. PD):
   "Info not yet needed = noise" → count appears only when hovered
   Simplicity (Panzarella ch. Simplicity): unclutter the resting state
   #1 Exception: active badges always show count (Panzarella ch. Predictability) */
/* Count always visible — no hidden-on-rest. Users need to see counts at a glance. */
.reaction-count {
  font-weight: 700;
  font-size: 13px;
  min-width: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  /* Fallback for older browsers */
  letter-spacing: 0.05em;
  line-height: 1;
  padding-top: 1px;
  white-space: nowrap;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.reaction-badge:hover .reaction-count,
.reaction-badge:focus-visible .reaction-count {
  opacity: 1;
}

.reaction-badge.reaction-active .reaction-count {
  opacity: 1;
  color: #ffc300;
}

/* ── "+" button: smiley icon for affordance ──
   "Icons push the user to action" (Panzarella ch. Icons)
   Always subtly visible, never hidden (P2 — Discoverability)
   Warm resting tint invites interaction (Panzarella ch. Color:
   "color suggests a mood") */
/* #H Contextual reveal: add-btn starts at 20% opacity and reveals on post hover.
   Desktop: subtle presence reduces clutter in long threads (Panzarella ch. Simplicity).
   Mobile: always visible at 0.7 since no hover exists. */
.reaction-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  cursor: pointer;
  transition:
    opacity 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    transform 120ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  opacity: 0.5;
  color: rgba(255, 255, 255, 0.55);
  --reaction-plus-stroke: #1a1a1a;
  margin-left: var(--space-xs, 4px);
  position: relative;
}

/* When the add button is the only thing (no reactions yet),
   it now gracefully sits in the 28px space reserved by .post-reactions */
.post-reactions:not(:has(.reaction-badge)) .reaction-add-btn {
  /* Kept background for consistent look if needed, but removed absolute positioning */
  background: var(--bg-surface-alt, #1e1e1e);
  z-index: 2;
}

[data-theme="light-ether"]
  .post-reactions:not(:has(.reaction-badge))
  .reaction-add-btn {
  background: var(--bg-surface-alt, #f5f5f5);
}

/* Increase visibility on post hover */
.post:hover .reaction-add-btn {
  opacity: 0.8;
}

/* Hover: circle appears with golden glow */
.reaction-add-btn:hover {
  opacity: 1;
  background: rgba(255, 195, 0, 0.08);
  border-color: rgba(255, 195, 0, 0.4);

  box-shadow: 0 0 14px rgba(255, 195, 0, 0.15);
  color: rgba(255, 195, 0, 0.9);
  transform: scale(1.08);
}

/* SVG smiley icon — no filter hacks needed, inherits color from parent */
.reaction-add-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Small "+" badge in corner of the button */
.reaction-add-plus {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  color: rgba(255, 195, 0, 0.85);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.reaction-add-btn:hover .reaction-add-icon {
  transform: scale(1.1);
}

.reaction-add-btn:hover .reaction-add-plus {
  color: rgba(255, 195, 0, 1);
  transform: scale(1.15);
}

/* Light theme: dark strokes, no filter needed — SVG inherits color */
[data-theme="light-ether"] .reaction-add-btn {
  border-color: rgba(45, 40, 35, 0.12);
  color: rgba(45, 40, 35, 0.45);
  --reaction-plus-stroke: #fff;
}

[data-theme="light-ether"] .reaction-add-btn:hover {
  background: rgba(168, 197, 69, 0.1);
  border-color: rgba(168, 197, 69, 0.4);
  color: #3f5e14;
  box-shadow: 0 2px 8px rgba(168, 197, 69, 0.15);
}

[data-theme="light-ether"] .reaction-add-plus {
  color: #3f5e14;
}

[data-theme="light-ether"] .reaction-add-btn:hover .reaction-add-plus {
  color: #3f5e14;
}

/* ── Focus-visible: keyboard accessibility ──
   Chipman ch.7 + WCAG: "Accessibility testing should not
   be an afterthought" — visible outline on keyboard focus */
.reaction-badge:focus-visible {
  outline: 2px solid rgba(255, 195, 0, 0.6);
  outline-offset: 2px;
}

.reaction-add-btn:focus-visible {
  outline: 2px solid rgba(255, 195, 0, 0.6);
  outline-offset: 2px;
  opacity: 1;
}

.reaction-picker-item:focus-visible {
  outline: 2px solid rgba(255, 195, 0, 0.6);
  outline-offset: 1px;
}

/* ── Reaction Picker (popover) ──
   Contrast: dark surface + blur = clear separation from content
   Proximity: items close together = "same logical block" (Panzarella ch. Proximity)
   Textural depth: layered background + caret = spatial connection (UX Pin ch. Affordances)
   #13 Desirable (Kaur: UX Honeycomb): premium radial glow on entry */
/* #C Design tokens: Use --z-popover from the z-index scale instead of magic numbers.
   This ensures the picker always floats above sticky headers (--z-sticky: 1020)
   and fixed nav bars (--z-fixed: 1030), preventing z-index collision bugs. */
.reaction-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: var(--radius-lg, 16px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 30%),
    rgba(22, 22, 22, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 12px 32px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: pickerSlideIn 180ms
    var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  z-index: var(--z-popover, 1060);
  position: relative;
  min-width: 260px;
  max-width: 320px;
}

/* #13 Desirable: premium radial glow behind picker on entry */
.reaction-picker::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 40px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 195, 0, 0.08) 0%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
  animation: pickerGlow 0.5s ease-out forwards;
  opacity: 0.5;
}

@keyframes pickerGlow {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Caret removed — picker is now abs-positioned above the button */
.reaction-picker::before {
  display: none;
}

/* Picker entrance: --ease-out-expo for decisive, rapid entry that decelerates
   smoothly at the end — avoids the "clac" effect of linear or ease-in curves */
@keyframes pickerSlideIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(6px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Individual picker item — larger touch target (mobile-first)
   Spring transition for elastic, playful feel */
.reaction-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: auto;
  min-width: 60px;
  padding: 6px 4px 4px;
  box-sizing: border-box;
  border-radius: var(--radius-md, 12px);
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    background var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms)
      var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    box-shadow var(--duration-fast, 150ms) ease;
  animation: pickerItemCascade 0.3s
    var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;
  animation-delay: calc(var(--picker-index, 0) * 25ms + 50ms);
}

@keyframes pickerItemCascade {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.reaction-picker-item:hover {
  background: rgba(255, 195, 0, 0.12);
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(255, 195, 0, 0.1);
}

.reaction-picker-item:active {
  transform: scale(1.05);
  background: rgba(255, 195, 0, 0.2);
}

.reaction-picker-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Label text under each picker icon */
.reaction-picker-label {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  transition: color 0.15s ease;
}

.reaction-picker-item:hover .reaction-picker-label {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="light-ether"] .reaction-picker-label {
  color: rgba(45, 40, 35, 0.45);
}

[data-theme="light-ether"] .reaction-picker-item:hover .reaction-picker-label {
  color: rgba(45, 40, 35, 0.85);
}

/* ── Light theme adjustments ──
   Same principles applied with inverted contrast values
   (UX Pin p.28: "Take great care in choosing your website's colors") */
[data-theme="light-ether"] .reaction-badge {
  background: rgba(45, 40, 35, 0.03);
  border-color: rgba(26, 36, 27, 0.06);
  color: var(--text-muted);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(26, 36, 27, 0.06);
  transition:
    box-shadow var(--duration-fast) var(--ease-out-expo),
    transform var(--duration-fast) var(--ease-spring),
    background var(--duration-fast) ease;
}

[data-theme="light-ether"] .reaction-badge:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
    linear-gradient(
      135deg,
      rgba(45, 40, 35, 0.06) 0%,
      rgba(45, 40, 35, 0.03) 100%
    );
  border-color: rgba(45, 40, 35, 0.12);
  box-shadow:
    0 4px 10px rgba(45, 40, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="light-ether"] .reaction-badge.reaction-active {
  background:
    linear-gradient(180deg, rgba(255, 245, 200, 0.5) 0%, transparent 50%),
    linear-gradient(
      135deg,
      rgba(255, 195, 0, 0.22) 0%,
      rgba(255, 170, 0, 0.12) 100%
    );
  border-color: rgba(200, 155, 0, 0.45);
  color: #b8860b;
  box-shadow:
    0 0 10px rgba(255, 195, 0, 0.12),
    0 2px 6px rgba(45, 40, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light-ether"] .reaction-badge.reaction-active:hover {
  background:
    linear-gradient(180deg, rgba(255, 245, 200, 0.5) 0%, transparent 50%),
    linear-gradient(
      135deg,
      rgba(255, 195, 0, 0.22) 0%,
      rgba(255, 170, 0, 0.12) 100%
    );
  border-color: rgba(200, 155, 0, 0.5);
  box-shadow:
    0 0 14px rgba(255, 195, 0, 0.14),
    0 4px 10px rgba(45, 40, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Light theme glow pulse for freshly-activated */
[data-theme="light-ether"]
  .reaction-badge.reaction-active.reaction-just-activated {
  animation: reactionGlowLight 1.2s ease-in-out 1;
}

@keyframes reactionGlowLight {
  0%,
  100% {
    box-shadow:
      0 0 8px rgba(255, 195, 0, 0.1),
      0 2px 6px rgba(45, 40, 35, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  50% {
    box-shadow:
      0 0 16px rgba(255, 195, 0, 0.22),
      0 2px 6px rgba(45, 40, 35, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

[data-theme="light-ether"] .reaction-picker {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 30%),
    rgba(255, 255, 255, 0.97);
  border-color: rgba(26, 36, 27, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 8px rgba(26, 36, 27, 0.1),
    0 16px 48px -8px rgba(26, 36, 27, 0.14);
}

/* Light theme picker caret — removed (display:none globally) */

[data-theme="light-ether"] .reaction-picker-item:hover {
  background: rgba(255, 195, 0, 0.1);
}

/* Light theme: picker glow uses darker warm tone */
[data-theme="light-ether"] .reaction-picker::after {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 195, 0, 0.06) 0%,
    transparent 70%
  );
}

/* ── Mobile adjustments ──
   #15 Touch targets (Chipman: Responsive UI):
   44px minimum for comfortable touch interaction
   #D Mobile Bottom Sheet: picker transforms into a drawer from bottom edge,
   positioned in the "Thumb Zone" per Fitts' Law. On mobile, the imprecise
   fat-finger input and lack of hover demand radically different UX. */
@media (max-width: 768px) {
  /* #H On mobile, no hover exists — add-btn always visible at full opacity.
       Button enlarged to 44px for WCAG touch target compliance. */
  .reaction-add-btn {
    opacity: 0.7;
    width: 44px;
    height: 44px;
    margin-left: var(--space-xs, 4px);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .post:hover .reaction-add-btn {
    opacity: 1;
  }

  /* SVG icon slightly larger on mobile for touch clarity */
  .reaction-add-icon {
    width: 24px;
    height: 24px;
  }

  .reaction-add-plus {
    width: 14px;
    height: 14px;
  }

  /* +30% icône réaction sur mobile (30px → 39px) */
  .reaction-icon {
    width: 24px;
    height: 24px;
  }

  /* #15 Touch: min 44px touch target per WCAG + Apple HIG */
  .reaction-badge {
    padding: 2px 6px 2px 2px;
    gap: 2px;
    font-size: var(--text-xs, 12px);
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
    /* Remove desktop stagger animation on mobile for GPU performance */
    animation: none;
  }

  /* Active badges: slightly more padding for count */
  .reaction-badge.reaction-active {
    padding: 2px 7px 2px 2px;
    gap: 2px;
  }

  .reaction-count {
    font-size: var(--text-xs, 12px);
  }

  /* #D Bottom Sheet paradigm: picker becomes a full-width drawer
       anchored to the bottom of the viewport, positioned in the Thumb Zone.
       Uses safe-area-inset to avoid iPhone home indicator. */
  .reaction-picker {
    position: fixed !important;
    bottom: 0 !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 20px 20px 0 0;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    justify-items: stretch;
    align-items: stretch;
    gap: var(--space-sm, 8px);
    padding: 20px 14px calc(16px + var(--safe-area-bottom, 0px));
    z-index: 9999999 !important;
    /* Disable GPU-expensive backdrop-filter on mobile (performance guard) */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(22, 22, 22, 0.98);
    /* Bottom sheet entrance */
    animation: pickerBottomSheetIn var(--duration-normal, 250ms)
      var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  }

  /* Bottom sheet drag handle indicator */
  .reaction-picker::before {
    display: block !important;
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 auto 12px;
    grid-column: 1 / -1;
  }

  .reaction-picker-item {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 6px 3px 5px;
  }

  .reaction-picker-icon {
    width: 40px;
    height: 40px;
  }

  .reaction-picker-label {
    font-size: 11px;
  }

  /* :active press effect — simulates physical button depression.
       On mobile, this replaces :hover as the primary visual feedback.
       Coupled with navigator.vibrate() in JS for visuo-haptic confirmation. */
  .reaction-badge:active {
    transform: scale(0.95) !important;
  }

  .reaction-picker-item:active {
    transform: scale(0.92) !important;
  }
}

/* Bottom sheet entrance animation */
@keyframes pickerBottomSheetIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile bottom sheet backdrop overlay */
.reaction-picker-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .reaction-picker-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999998 !important;
    animation: fadeIn var(--duration-fast, 150ms) ease;
  }
}

/* AUDIT FIX: Duplicate @keyframes fadeIn removed.
   Canonical definition at ~L.7849. */

/* ── Exit animation class (used by JS smart-diffing) ── */
.reaction-badge.reaction-exit {
  transform: scale(0);
  opacity: 0;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  pointer-events: none;
}

/* ── Micro-toast: ephemeral confirmation on first reaction ── */
.reaction-micro-toast {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(22, 22, 22, 0.95);
  color: rgba(255, 195, 0, 0.9);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  border: 1px solid rgba(255, 195, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.reaction-micro-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Light theme: warmer, paper-compatible toast */
[data-theme="light-ether"] .reaction-micro-toast {
  background: rgba(255, 255, 255, 0.97);
  color: #b8860b;
  border-color: rgba(200, 155, 0, 0.25);
  box-shadow: 0 4px 12px rgba(45, 40, 35, 0.12);
}

/* ── Light theme: active count color fix ── */
[data-theme="light-ether"] .reaction-badge.reaction-active .reaction-count {
  color: #b8860b;
}

/* ════════════════════════════════════════════════════════════════
   #A DEEP ETHER THEME — Azure accent, glassmorphism-aware
   ════════════════════════════════════════════════════════════════
   Deep Ether uses --primary-azure (#3B82F6) and --accent-secondary (#5B9BFF)
   instead of the gold palette. Badges use tinted blue shadows instead of gold.
   Backdrop-filter is NOT applied to individual badges (GPU perf guard)
   — only the main picker panel gets the glassmorphism treatment. */

[data-theme="deep-ether"] .reaction-badge {
  background: rgba(13, 102, 255, 0.06);
  border-color: rgba(59, 130, 246, 0.15);
  color: var(--text-muted, #8aa0c0);
}

[data-theme="deep-ether"] .reaction-badge:hover,
[data-theme="deep-ether"] .reaction-badge:focus-visible {
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.12) 0%, transparent 40%),
    linear-gradient(
      135deg,
      rgba(13, 102, 255, 0.15) 0%,
      rgba(0, 212, 255, 0.08) 100%
    );
  border-color: rgba(13, 102, 255, 0.3);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #e5e5e7;
}

[data-theme="deep-ether"] .reaction-badge.reaction-active {
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
    linear-gradient(
      135deg,
      rgba(59, 130, 246, 0.28) 0%,
      rgba(0, 212, 255, 0.12) 100%
    );
  border-color: rgba(13, 102, 255, 0.5);
  color: var(--accent-secondary, #5b9bff);
  box-shadow:
    0 0 12px rgba(59, 130, 246, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(59, 130, 246, 0.12);
}

[data-theme="deep-ether"] .reaction-badge.reaction-active .reaction-icon {
  filter: drop-shadow(0 1px 4px rgba(13, 102, 255, 0.35)) saturate(1.2);
}

[data-theme="deep-ether"] .reaction-badge.reaction-active .reaction-count {
  color: var(--accent-secondary, #5b9bff);
}

[data-theme="deep-ether"] .reaction-badge.reaction-active:hover,
[data-theme="deep-ether"] .reaction-badge.reaction-active:focus-visible {
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.28) 0%, transparent 50%),
    linear-gradient(
      135deg,
      rgba(13, 102, 255, 0.3) 0%,
      rgba(0, 212, 255, 0.15) 100%
    );
  border-color: rgba(13, 102, 255, 0.65);
  box-shadow:
    0 0 20px rgba(13, 102, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(59, 130, 246, 0.15);
}

/* Deep Ether glow pulse: azure instead of gold */
@keyframes reactionGlowEther {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(59, 130, 246, 0.25),
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(59, 130, 246, 0.12);
  }

  50% {
    box-shadow:
      0 0 20px rgba(13, 102, 255, 0.35),
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(59, 130, 246, 0.12);
  }
}

[data-theme="deep-ether"]
  .reaction-badge.reaction-active.reaction-just-activated {
  animation: reactionGlowEther 1.2s ease-in-out 1;
}

/* Deep Ether add button */
[data-theme="deep-ether"] .reaction-add-btn {
  border-color: rgba(13, 102, 255, 0.15);
  color: rgba(77, 148, 255, 0.5);
  --reaction-plus-stroke: #0a0a14;
}

[data-theme="deep-ether"] .reaction-add-btn:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(13, 102, 255, 0.4);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.25);
  color: rgba(77, 148, 255, 0.9);
}

[data-theme="deep-ether"] .reaction-add-plus {
  color: var(--accent-secondary, #5b9bff);
}

/* Deep Ether picker labels */
[data-theme="deep-ether"] .reaction-picker-label {
  color: rgba(138, 160, 192, 0.5);
}

[data-theme="deep-ether"] .reaction-picker-item:hover .reaction-picker-label {
  color: rgba(229, 229, 231, 0.9);
}

/* Deep Ether picker: glassmorphism panel
   NOTE: blur is applied ONLY to this parent panel, never to individual badges.
   Multiplying blur across N badges would tank GPU FPS during scrolling. */
[data-theme="deep-ether"] .reaction-picker {
  background:
    linear-gradient(180deg, rgba(13, 102, 255, 0.04) 0%, transparent 30%),
    var(--surface-glass, rgba(20, 20, 20, 0.85));
  border-color: rgba(13, 102, 255, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 12px 40px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(13, 102, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="deep-ether"] .reaction-picker::after {
  background: radial-gradient(
    ellipse at center,
    rgba(59, 130, 246, 0.12) 0%,
    transparent 70%
  );
}

[data-theme="deep-ether"] .reaction-picker-item:hover {
  background: rgba(13, 102, 255, 0.15);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.15);
}

[data-theme="deep-ether"] .reaction-picker-item:active {
  background: rgba(59, 130, 246, 0.28);
}

/* Deep Ether micro-toast */
[data-theme="deep-ether"] .reaction-micro-toast {
  background: rgba(20, 20, 20, 0.97);
  color: var(--accent-secondary, #5b9bff);
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Deep Ether focus ring: azure */
[data-theme="deep-ether"] .reaction-badge:focus-visible {
  outline-color: rgba(13, 102, 255, 0.6);
}

[data-theme="deep-ether"] .reaction-add-btn:focus-visible {
  outline-color: rgba(13, 102, 255, 0.6);
}

[data-theme="deep-ether"] .reaction-picker-item:focus-visible {
  outline-color: rgba(13, 102, 255, 0.6);
}

/* Deep Ether mobile: disable backdrop-filter on picker for GPU perf */
@media (max-width: 768px) {
  [data-theme="deep-ether"] .reaction-picker {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 20, 20, 0.98);
  }
}

/* ── Reduced motion: disable all reaction animations ──
   WCAG 2.2 criterion 2.3.3: Movement from an interaction.
   Critical for users with vestibular disorders or photosensitive epilepsy.
   The prefers-reduced-motion: reduce query forces all animation durations
   to effectively zero, removing all kinetic feedback. */
@media (prefers-reduced-motion: reduce) {
  .reaction-badge,
  .reaction-badge.reaction-pop,
  .reaction-badge.reaction-active.reaction-just-activated,
  .reaction-badge.reaction-error,
  .reaction-picker,
  .reaction-picker-item,
  .reaction-picker::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reaction-badge.reaction-exit {
    transition-duration: 0.01ms !important;
  }

  /* Also disable bottom sheet animation on mobile */
  .reaction-picker-backdrop {
    animation: none !important;
  }
}

/* --- Scrollbar: Smoother Appearance --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* --- GPU Acceleration for Smooth Animations --- */
.topic-card,
.post,
.nav-btn,
.btn,
.sidebar-menu-item,
.mobile-nav-item {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  min-width: 0;
  min-height: 0;
}

/* ================================================================== */
/* ===  AUDIT FIX: COMPREHENSIVE THEME OVERRIDES                   === */
/* ===  Fills all missing component theming for deep-ether + light  === */
/* ================================================================== */

/* --- DEEP ETHER: Header (v7: saturate(120%) Vibrancy-lite) --- */
[data-theme="deep-ether"] header {
  background: var(--surface-glass);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(4, 8, 30, 0.35),
    0 4px 16px rgba(4, 8, 30, 0.25);
}

/* ─── DEEP ETHER: Sidebar ─── */
[data-theme="deep-ether"] .sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  box-shadow: inset -1px 0 0 var(--border-color);
  min-width: 0;
  min-height: 0;
}

/* ─── DEEP ETHER: Topic Header ─── */
[data-theme="deep-ether"] .topic-header {
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 12px rgba(4, 8, 30, 0.35);
}

/* ─── DEEP ETHER: Reply Form + Editor ─── */
[data-theme="deep-ether"] .fixed-reply-form {
  background: var(--bg-header);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 -4px 16px rgba(4, 8, 30, 0.35);
}

[data-theme="deep-ether"] .chat-editor-wrapper {
  background: var(--input-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="deep-ether"] .chat-editor:focus {
  box-shadow:
    0 0 0 2px rgba(13, 102, 255, 0.3),
    0 0 20px rgba(59, 130, 246, 0.12);
  border-color: rgba(13, 102, 255, 0.4);
}

/* ─── DEEP ETHER: Mobile Bottom Nav ─── */
/* Mobile nav themes are now automatically handled by --glass-surface CSS tokens */

/* ─── DEEP ETHER: User Card Modal ─── */
[data-theme="deep-ether"] #user-card-modal > div {
  background: rgba(12, 14, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    var(--shadow-floating);
}

/* ─── DEEP ETHER: Context Menu ─── */
[data-theme="deep-ether"] .context-menu {
  background: rgba(12, 14, 24, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    var(--shadow-floating);
}

[data-theme="deep-ether"] .context-item:hover {
  background: rgba(13, 102, 255, 0.15);
}

[data-theme="deep-ether"] .context-menu-icon {
  color: rgba(255, 255, 255, 0.5);
}

/* ─── DEEP ETHER: Toasts ─── */
[data-theme="deep-ether"] .toast-notification {
  box-shadow:
    0 8px 30px rgba(4, 8, 30, 0.55),
    0 0 20px rgba(59, 130, 246, 0.12);
}

[data-theme="deep-ether"] .toast-info {
  background: linear-gradient(
    135deg,
    rgba(13, 102, 255, 0.95) 0%,
    rgba(0, 85, 204, 0.95) 100%
  );
  box-shadow:
    0 8px 30px rgba(4, 8, 30, 0.55),
    0 0 25px rgba(13, 102, 255, 0.3);
}

/* ─── DEEP ETHER: Skeleton Loader ─── */
[data-theme="deep-ether"] .skeleton-avatar,
[data-theme="deep-ether"] .skeleton-line {
  background: linear-gradient(
    90deg,
    rgba(12, 14, 24, 0.8) 0px,
    rgba(99, 140, 230, 0.04) 50%,
    rgba(12, 14, 24, 0.8) 100%
  );
  background-size: 200px 100%;
}

/* — DEEP ETHER: Scrollbar (v7: more visible + color-mix derived) — */
[data-theme="deep-ether"] ::-webkit-scrollbar-track {
  background: var(--surface-void);
}

[data-theme="deep-ether"] ::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--primary-azure) 30%, transparent);
  border: 2px solid var(--surface-void);
  border-radius: 6px;
}

[data-theme="deep-ether"] ::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--primary-azure) 50%, transparent);
}

/* Firefox scrollbar */
[data-theme="deep-ether"] {
  scrollbar-color: color-mix(in srgb, var(--primary-azure) 30%, transparent)
    var(--surface-void);
}

/* ─────────────────────────────────────── */
/* ─── LIGHT ETHER: Component Overrides ─── */
/* ─────────────────────────────────────── */

/* ─── LIGHT ETHER: Toasts — Warmer paper-white treatment ─── */
[data-theme="light-ether"] .toast-notification {
  box-shadow: var(--shadow-floating);
  border: 1px solid rgba(26, 36, 27, 0.06);
}

[data-theme="light-ether"] .toast-success {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.95) 0%,
    rgba(22, 163, 74, 0.95) 100%
  );
}

[data-theme="light-ether"] .toast-error {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.95) 0%,
    rgba(220, 38, 38, 0.95) 100%
  );
}

[data-theme="light-ether"] .toast-info {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.95) 0%,
    rgba(37, 99, 235, 0.95) 100%
  );
}

[data-theme="light-ether"] .toast-warning {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.95) 0%,
    rgba(217, 119, 6, 0.95) 100%
  );
}

/* ─── LIGHT ETHER: Dropdown Panel — Ceramic shadow ─── */
[data-theme="light-ether"] .dropdown-panel {
  background: rgba(250, 250, 247, 0.98);
  border-color: rgba(26, 36, 27, 0.06);
  box-shadow: var(--shadow-floating);
}

/* ─── LIGHT ETHER: Context Menu — Ceramic card ─── */
[data-theme="light-ether"] .context-menu {
  background: rgba(250, 250, 247, 0.98);
  border: 1px solid rgba(26, 36, 27, 0.08);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 30px -5px rgba(0, 0, 0, 0.1);
}

[data-theme="light-ether"] .context-item:hover {
  background: rgba(26, 36, 27, 0.04);
}

[data-theme="light-ether"] .context-menu-icon {
  color: var(--text-muted);
}

[data-theme="light-ether"] .context-menu::before {
  /* Drag handle visible on light background */
  background: var(--text-muted);
  opacity: 0.2;
}

/* ─── LIGHT ETHER: Skeleton Loader — Warm Avoine gradient ─── */
[data-theme="light-ether"] .skeleton-avatar,
[data-theme="light-ether"] .skeleton-line {
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 0px,
    var(--bg-surface) 50%,
    var(--bg-surface-alt) 100%
  );
  background-size: 200px 100%;
}

/* ─── LIGHT ETHER: Firefox scrollbar ─── */
[data-theme="light-ether"] {
  scrollbar-color: color-mix(in srgb, var(--primary-matcha) 25%, #c5bfb5)
    var(--bg-body);
}

/* ─── LIGHT ETHER: User Card Modal ─── */
[data-theme="light-ether"] #user-card-modal > div {
  background: rgba(250, 250, 247, 0.98);
  box-shadow: var(--modal-card-shadow);
  border: 1px solid rgba(26, 36, 27, 0.06);
}

/* ================================================================== */
/* ===  ACCESSIBILITY: prefers-contrast support                    === */
/* ================================================================== */
@media (prefers-contrast: more) {
  [data-theme="light-ether"] .post,
  [data-theme="light-ether"] .topic-card {
    border: 1px solid rgba(26, 36, 27, 0.2) !important;
  }

  [data-theme="light-ether"] .btn:not(.btn-create-topic) {
    border: 1px solid rgba(26, 36, 27, 0.3) !important;
  }

  [data-theme="deep-ether"] .post,
  [data-theme="deep-ether"] .topic-card {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
}

/* --- Selection Color --- */
::selection {
  background: var(--accent-primary);
  color: white;
}

::-moz-selection {
  background: var(--accent-primary);
  color: white;
}

/* --- Print Styles: Clean Output --- */
@media print {
  .sidebar,
  .mobile-bottom-nav,
  .nav-btn,
  header,
  .fixed-reply-form {
    display: none !important;
    min-width: 0;
    min-height: 0;
  }

  .main-content {
    width: 100% !important;
    padding: 0 !important;
    min-width: 0;
    min-height: 0;
  }

  .post {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}

/* =======================================
   STICKER QUICK ACTION BAR
   ======================================= */
#sticker-quick-action-bar {
  animation: quickActionPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes quickActionPop {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#sticker-quick-action-bar button:active {
  transform: scale(0.9);
}

/* Context menu overlay: see unified CONTEXT MENU section */

/* Stickers in posts - show pointer cursor to indicate interactivity */
.post-content .sticker {
  cursor: pointer;
  transition: transform 0.15s ease;
  /* Meilleur alignement des stickers avec le texte */
  vertical-align: middle;
}

@media (hover: hover) and (pointer: fine) {
  .post-content .sticker:hover {
    transform: scale(1.05);
  }

  .post-content .sticker:active {
    transform: scale(0.95);
  }
}

/* ═══════════════════════════════════════════════════════════
   NSFW FILTER — Blur & Click-to-Reveal for Risibank stickers
   ═══════════════════════════════════════════════════════════ */
.nsfw-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}

.nsfw-container .nsfw-blur {
  filter: blur(25px) brightness(0.7);
  transition:
    filter 0.4s ease,
    transform 0.3s ease;
  pointer-events: none;
}

/* NSFW Label overlay */
.nsfw-container .nsfw-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease;
}

/* Revealed state — user clicked to reveal */
.nsfw-container.revealed .nsfw-blur {
  filter: none;
  pointer-events: auto;
}

.nsfw-container.revealed .nsfw-label {
  opacity: 0;
  pointer-events: none;
}

/* Hover hint on blurred */
.nsfw-container:not(.revealed):hover .nsfw-blur {
  filter: blur(18px) brightness(0.8);
}

.nsfw-container:not(.revealed):hover .nsfw-label {
  background: rgba(220, 38, 38, 0.95);
}

/* Data attribute category styling variants */
.nsfw-container[data-nsfw="hard"] .nsfw-label {
  background: rgba(185, 28, 28, 0.9);
}

.nsfw-container[data-nsfw="degen"] .nsfw-label {
  background: rgba(146, 64, 14, 0.9);
}

/* Ensure context menu items have icons aligned */
.context-item {
  display: flex;
  align-items: center;
}

/* =======================================
   PREMIUM BUTTON ENHANCEMENTS
   ======================================= */

/* Ripple effect for buttons */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--duration-normal, 250ms);
  pointer-events: none;
}

.btn-ripple:active::after {
  opacity: 1;
  transition: none;
}

/* Button active state feedback */
.btn:active,
.editor-btn:active {
  transform: scale(0.97);
}

/* Enhanced button hover */
.btn:hover {
  transform: translateY(-1px);
}

/* =======================================
   STAT CARDS - For Dashboard/Stats
   ======================================= */
.stat-card {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: var(--space-lg, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.stat-value {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  color: var(--text-main);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-muted);
  margin-top: var(--space-sm, 8px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =======================================
   TOAST NOTIFICATIONS (Global)
   ======================================= */
.sticker-toast,
.toast-notification {
  position: fixed;
  bottom: calc(20px + var(--safe-area-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: var(--radius-full, 24px);
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 500;
  z-index: var(--z-toast, 10001);
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  animation: toastSlideIn 0.3s var(--ease-spring) forwards;
}

.toast-success {
  background: linear-gradient(
    135deg,
    rgba(52, 199, 89, 0.95) 0%,
    rgba(48, 176, 80, 0.95) 100%
  );
  color: white;
}

.toast-error {
  background: linear-gradient(
    135deg,
    rgba(255, 59, 48, 0.95) 0%,
    rgba(215, 40, 30, 0.95) 100%
  );
  color: white;
}

.toast-info {
  background: linear-gradient(
    135deg,
    rgba(13, 102, 255, 0.95) 0%,
    rgba(0, 122, 255, 0.95) 100%
  );
  color: white;
}

.toast-warning {
  background: linear-gradient(
    135deg,
    rgba(255, 149, 0, 0.95) 0%,
    rgba(255, 128, 0, 0.95) 100%
  );
  color: white;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* =======================================
   LOADING STATES
   ======================================= */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  border-top-color: var(--accent-primary);
  animation: spin 0.8s linear infinite;
}

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

/* Premium shimmer skeleton */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 80%,
    var(--bg-surface) 100%
  );
  background-size: 2000px 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* AUDIT FIX: Duplicate @keyframes shimmer removed.
   Canonical definition at ~L.2915. */

/* =======================================
   BADGE COMPONENTS
   ======================================= */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  border-radius: var(--radius-full, 9999px);
  white-space: nowrap;
}

.badge-primary {
  background: var(--accent-primary);
  color: white;
}

.badge-danger {
  background: var(--accent-danger);
  color: white;
}

.badge-success {
  background: var(--accent-success, #34c759);
  color: white;
}

.badge-info {
  background: var(--accent-blue);
  color: white;
}

.badge-muted {
  background: var(--bg-surface-alt);
  color: var(--text-muted);
}

/* ═══ Badge Accessibilité Light-Ether ═══
   Règle stricte de l'audit : NE JAMAIS utiliser Poire Acide (#A8C545)
   comme couleur de texte sur fond blanc — ratio WCAG insuffisant.
   Les badges Poire utilisent fond translucide 15% + texte Forêt sombre. */
[data-theme="light-ether"] .badge-primary {
  background: rgba(168, 197, 69, 0.15);
  color: #3f5e14;
  font-weight: 700;
}

/* =======================================
   CARD HOVER EFFECTS
   ======================================= */
.card-hover {
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

[data-theme="deep-ether"] .card-hover:hover {
  border-color: rgba(13, 102, 255, 0.3);
  box-shadow: 0 8px 30px rgba(13, 102, 255, 0.15);
}

/* =======================================
   ANIMATION UTILITIES
   ======================================= */
.animate-fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.animate-slide-up {
  animation: slideUp 0.4s var(--ease-spring) forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s var(--ease-spring) forwards;
}

/* AUDIT FIX: Duplicate @keyframes fadeIn removed.
   Canonical definition at ~L.7849. */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =======================================
   PREMIUM SKELETON LOADERS
   ======================================= */
/* AUDIT FIX: Duplicate @keyframes premiumShimmer removed.
   Canonical definition at ~L.8268. */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 80%,
    var(--bg-surface) 100%
  );
  background-size: 2000px 100%;
  animation: premiumShimmer 2s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
}

.skeleton-text-sm {
  height: 10px;
  width: 60%;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  min-height: 80px;
}

/* Light theme skeleton — AUDIT v5: warm tints */
[data-theme="light-ether"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 0%,
    rgba(45, 40, 35, 0.02) 20%,
    rgba(45, 40, 35, 0.04) 50%,
    rgba(45, 40, 35, 0.02) 80%,
    var(--bg-surface-alt) 100%
  );
  background-size: 2000px 100%;
}

/* =======================================
   BUTTON RIPPLE EFFECT
   ======================================= */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn-ripple:active::after {
  opacity: 1;
  transition: none;
}

/* =======================================
   STAT CARD COMPONENTS
   ======================================= */
.stat-card {
  flex: 1;
  min-width: 250px;
  text-align: center;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

[data-theme="deep-ether"] .stat-card {
  background: rgba(28, 28, 28, 0.6);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="deep-ether"] .stat-card:hover {
  box-shadow: 0 8px 30px rgba(13, 102, 255, 0.15);
}

.stat-value {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  line-height: 1.2;
}

.stat-value-primary {
  color: var(--accent-primary);
}

.stat-value-blue {
  color: var(--accent-blue);
}

.stat-value-danger {
  color: var(--accent-danger);
}

.stat-value-success {
  color: var(--accent-success);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stat grid container */
.stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 768px) {
  .stat-grid {
    flex-direction: column;
  }

  .stat-card {
    min-width: 100%;
  }
}

/* =======================================
   PAGE CONTAINER UTILITY
   ======================================= */
.page-container {
  max-width: 1000px;
  margin: var(--space-lg) auto;
  padding: var(--space-md);
}

.page-title {
  margin-bottom: var(--space-lg);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-main);
}

/* =======================================
   LEADERBOARD ROW UTILITY
   ======================================= */
.leaderboard-container {
  position: relative;
  display: inline-block;
}

.leaderboard-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  z-index: var(--z-tooltip);
  min-width: 240px;
  max-width: 280px;
  text-align: left;
  box-shadow: var(--shadow-floating);
  font-size: var(--text-sm);
  color: var(--text-main);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s var(--ease-spring);
}

.leaderboard-container:hover .leaderboard-tooltip,
.leaderboard-tooltip:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

.leaderboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-color);
}

.leaderboard-row:last-child {
  border-bottom: none;
}

.leaderboard-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.leaderboard-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.leaderboard-rank {
  font-weight: var(--font-bold);
  width: 15px;
}

.leaderboard-count {
  font-weight: var(--font-bold);
}

/* =======================================
   FORM UTILITIES
   ======================================= */
.form-card {
  background: var(--bg-surface);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

[data-theme="deep-ether"] .form-card {
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-semibold);
  color: var(--text-main);
}

.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: var(--text-base);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* User rank badge */
.rank-badge {
  font-size: 0.5em;
  background: #e65100;
  color: white;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: var(--font-semibold);
}

/* Moderation action buttons */
.mod-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.mod-btn {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  font-weight: var(--font-medium);
  cursor: pointer;
  transition:
    filter 0.2s,
    transform 0.2s;
}

.mod-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.mod-btn:active {
  transform: translateY(0);
}

.mod-btn-danger {
  background: #d32f2f;
}

.mod-btn-success {
  background: #4caf50;
}

.mod-btn-warning {
  background: #e65100;
}

.mod-btn-info {
  background: #1976d2;
}

.mod-btn-muted {
  background: #757575;
}

.mod-btn-secondary {
  background: #607d8b;
}

/* =======================================
   HEADER CONTROLS - Fix Alignement Droite
   ======================================= */
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  /* Sépare les éléments : Logo à gauche, le reste est poussé */
  justify-content: space-between;
}

.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* On retire les marges qui poussaient le contenu */
  margin-right: 0;
}

.header-logo-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-main);
  transition: opacity 0.2s ease;
}

.header-logo-link:hover {
  opacity: 0.85;
}

.header-logo-img {
  height: 36px;
  width: auto;
  object-fit: cover;
  margin-right: var(--space-sm);
  border-radius: var(--radius-sm);
}

.header-logo-text {
  font-weight: 700;
  margin-right: 6px;
}

.header-menu-arrow {
  font-size: 12px;
  transition: transform 0.3s var(--ease-out-expo);
  color: var(--text-muted);
}

.header-menu-arrow.open {
  transform: rotate(-90deg);
}

.header-right-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* Pousse à droite */
  margin-left: auto !important;
  margin-right: 0 !important;
  /* Séparateur vertical subtil */
  position: relative;
  padding-left: 20px;
}

/* Ligne de séparation subtile avant les outils utilisateur */
.header-right-actions::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  width: 1px;
  background: var(--border-color);
  opacity: 0.5;
}

/* Media Query Desktop - On confirme l'alignement */
@media (min-width: 769px) {
  .header-controls {
    width: 100%;
  }

  .header-right-actions {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* On cache le séparateur sur mobile pour gagner de la place */
@media (max-width: 768px) {
  .header-right-actions::before {
    display: none;
  }

  .header-right-actions {
    padding-left: 0;
    justify-content: flex-end;
    gap: var(--space-xs);
    flex: 1;
    /* Space balanced with left side */
  }

  .header-controls {
    position: relative;
    justify-content: space-between;
  }

  .header-left-actions.show-on-mobile {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}

/* =======================================
   ICON BUTTONS - Touch Friendly (44x44)
   ======================================= */
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-main);
  padding: 0;
  border-radius: var(--radius-sm);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
  position: relative;
}

.icon-btn:hover {
  background: var(--bg-surface-alt);
  color: var(--accent-primary);
}

.icon-btn:active {
  transform: scale(0.92);
}

[data-theme="deep-ether"] .icon-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--primary-azure);
}

/* Icon button badge */
.icon-btn-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--accent-danger);
  color: white;
  border-radius: 9999px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 600;
  /* Flexbox centering — pixel-perfect regardless of font rendering */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Auto-expand to pill for multi-digit counts (99+) */
  padding: 0 3px;
  box-sizing: border-box;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.icon-btn-badge.blue {
  background: #2196f3;
}

.icon-btn-badge:empty,
.icon-btn-badge[data-count="0"] {
  display: none;
}

/* =======================================
   DROPDOWN PANELS - Animated
   ======================================= */
.dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  z-index: var(--z-dropdown);
  margin-top: var(--space-sm);
  max-height: 400px;
  overflow-y: auto;

  /* Animation */
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease-out-expo),
    transform var(--duration-fast) var(--ease-out-expo);
}

.dropdown-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dropdown-panel-wide {
  width: 300px;
  max-width: 85vw;
}

.dropdown-panel-narrow {
  width: 200px;
  max-width: 85vw;
}

[data-theme="deep-ether"] .dropdown-panel {
  background: rgba(28, 28, 28, 0.95);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown loading state */
.dropdown-loading {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Dropdown empty state */
.dropdown-empty {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Dropdown item */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-main);
  text-decoration: none;
  transition: background 0.2s ease;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: var(--bg-surface-alt);
}

.dropdown-item i {
  width: 20px;
  text-align: center;
  color: var(--text-muted);
}

.dropdown-item-danger {
  color: var(--accent-danger);
}

.dropdown-item-danger i {
  color: var(--accent-danger);
}

/* Block mode help button (?) */
.block-mode-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 4px;
}

.block-mode-help-btn:hover {
  opacity: 1;
  color: #ffc300;
  background: rgba(255, 195, 0, 0.1);
}

/* Dropdown header */
.dropdown-header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  color: var(--text-main);
  text-align: center;
}

/* Dropdown footer link */
.dropdown-footer {
  display: block;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--accent-primary);
  border-top: 1px solid var(--border-color);
  text-decoration: none;
  background: var(--bg-surface-alt);
}

.dropdown-footer:hover {
  background: var(--bg-surface);
}

/* =======================================
   TOPIC HEADER - Refactored
   ======================================= */
.topic-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.topic-header-content {
  flex: 1;
  min-width: 0;
}

.topic-admin-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* Mobile back button — 48px min for Apple HIG compliance */
.topic-back-btn {
  background: transparent;
  border: none;
  padding: 10px 16px;
  margin-left: -8px;
  color: var(--text-main);
  font-size: 22px;
  cursor: pointer;
  display: none;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  /* Kill 300ms tap delay on iOS */
}

@media (max-width: 768px) {
  .topic-back-btn {
    display: flex;
  }

  /* Make the entire header content area tappable on mobile (back navigation) */
  .topic-header-content {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* =======================================
   ADMIN BUTTONS - Icon-Only, Theme Aware
   ======================================= */
.btn-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s,
    color 0.2s;
  color: var(--text-muted);
  background: var(--bg-surface-alt, rgba(0, 0, 0, 0.05));
  line-height: 1;
}

.btn-admin:hover {
  transform: translateY(-1px);
  color: var(--text-main);
  background: var(--bg-surface, rgba(0, 0, 0, 0.08));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-admin:active {
  transform: translateY(0);
}

/* Pin button — active: amber */
.btn-admin-pin.active {
  color: #ff9800;
  background: rgba(255, 152, 0, 0.12);
  border-color: rgba(255, 152, 0, 0.3);
}

.btn-admin-pin.active:hover {
  background: rgba(255, 152, 0, 0.2);
  box-shadow: 0 2px 12px rgba(255, 152, 0, 0.25);
}

/* Lock button — active: red */
.btn-admin-lock.active {
  color: #f44336;
  background: rgba(244, 67, 54, 0.12);
  border-color: rgba(244, 67, 54, 0.3);
}

.btn-admin-lock.active:hover {
  background: rgba(244, 67, 54, 0.2);
  box-shadow: 0 2px 12px rgba(244, 67, 54, 0.25);
}

/* Deep Ether: glassmorphism admin buttons */
[data-theme="deep-ether"] .btn-admin {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

[data-theme="deep-ether"] .btn-admin:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  color: var(--text-main);
}

[data-theme="deep-ether"] .btn-admin-pin.active {
  background: rgba(255, 152, 0, 0.15);
  border-color: rgba(255, 152, 0, 0.35);
  color: #ffb74d;
}

[data-theme="deep-ether"] .btn-admin-lock.active {
  background: rgba(244, 67, 54, 0.15);
  border-color: rgba(244, 67, 54, 0.35);
  color: #ef5350;
}

/* =======================================
   ALERT BARS - System Messages
   ======================================= */
.alert-bar {
  padding: var(--space-md);
  text-align: center;
  border-top: 1px solid;
  z-index: 100;
  font-size: var(--text-base);
}

.alert-bar i {
  margin-right: var(--space-sm);
}

.alert-bar-danger {
  background: linear-gradient(
    135deg,
    rgba(244, 67, 54, 0.1) 0%,
    rgba(211, 47, 47, 0.15) 100%
  );
  color: #b71c1c;
  border-color: var(--accent-danger);
}

[data-theme="deep-ether"] .alert-bar-danger,
[data-theme="dark"] .alert-bar-danger,
[data-theme="grey"] .alert-bar-danger,
[data-theme="custom"] .alert-bar-danger {
  background: linear-gradient(
    135deg,
    rgba(244, 67, 54, 0.2) 0%,
    rgba(211, 47, 47, 0.25) 100%
  );
  color: #ef5350;
}

.alert-bar-info {
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  border-color: var(--border-color);
}

.alert-bar-info a {
  color: var(--accent-primary);
  font-weight: 600;
}

.alert-bar strong {
  font-weight: 700;
}

.alert-bar-warning {
  background: linear-gradient(
    135deg,
    rgba(255, 152, 0, 0.1) 0%,
    rgba(230, 81, 0, 0.15) 100%
  );
  color: #e65100;
  border-color: #ff9800;
  font-size: var(--text-sm);
}

[data-theme="deep-ether"] .alert-bar-warning,
[data-theme="dark"] .alert-bar-warning,
[data-theme="grey"] .alert-bar-warning,
[data-theme="custom"] .alert-bar-warning {
  background: linear-gradient(
    135deg,
    rgba(255, 152, 0, 0.2) 0%,
    rgba(230, 81, 0, 0.25) 100%
  );
  color: #ffb74d;
}

/* =======================================
   FLEX ROW UTILITIES
   ======================================= */
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-center {
  display: flex;
  align-items: center;
}

.flex-row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* =======================================
   FLASH MESSAGES - Refactored
   ======================================= */
.flash-messages-container {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-end;
  pointer-events: none;
}

.flash-msg {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  min-width: 250px;
  max-width: 450px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: flashSlideIn 0.3s var(--ease-out-expo);
  pointer-events: auto;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.flash-msg i.flash-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.flash-msg .flash-text {
  flex: 1;
}

.flash-msg .flash-dismiss {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.flash-msg .flash-dismiss:hover {
  opacity: 1;
}

.flash-msg-success {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  color: #155724;
  border: 1px solid #c3e6cb;
}

.flash-msg-error {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Dark theme flash messages */
[data-theme="dark"] .flash-msg-success,
[data-theme="grey"] .flash-msg-success,
[data-theme="custom"] .flash-msg-success,
[data-theme="deep-ether"] .flash-msg-success {
  background: linear-gradient(
    135deg,
    rgba(52, 199, 89, 0.2) 0%,
    rgba(52, 199, 89, 0.1) 100%
  );
  color: #6ee7a0;
  border: 1px solid rgba(52, 199, 89, 0.3);
}

[data-theme="dark"] .flash-msg-error,
[data-theme="grey"] .flash-msg-error,
[data-theme="custom"] .flash-msg-error,
[data-theme="deep-ether"] .flash-msg-error {
  background: linear-gradient(
    135deg,
    rgba(255, 59, 48, 0.2) 0%,
    rgba(255, 59, 48, 0.1) 100%
  );
  color: #ff8a84;
  border: 1px solid rgba(255, 59, 48, 0.3);
}

/* AUDIT FIX: Duplicate @keyframes flashSlideIn removed.
   Canonical definition at ~L.8414. */

/* =======================================
   TOAST MANAGER � In-page notifications
   ======================================= */
.toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: var(--z-toast, 10000);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
  max-width: 420px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateX(100%);
  transition:
    opacity 0.3s ease,
    transform 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  min-width: 260px;
  max-width: 100%;
  backdrop-filter: blur(8px);
}

.toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-exit {
  animation: toastSlideOutRight 0.3s ease forwards;
}

/* AUDIT FIX: Renamed from duplicate toastSlideOut — this one slides right (X-axis) */
@keyframes toastSlideOutRight {
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.toast-text {
  flex: 1;
}

.toast-action {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.toast-action:hover {
  background: rgba(255, 255, 255, 0.3);
}

.toast-dismiss {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.toast-dismiss:hover {
  opacity: 1;
}

/* Toast type variants */
.toast-success {
  background: linear-gradient(
    135deg,
    rgba(52, 199, 89, 0.95),
    rgba(48, 180, 82, 0.95)
  );
  color: white;
}

.toast-error {
  background: linear-gradient(
    135deg,
    rgba(255, 59, 48, 0.95),
    rgba(220, 50, 42, 0.95)
  );
  color: white;
}

.toast-warning {
  background: linear-gradient(
    135deg,
    rgba(255, 149, 0, 0.95),
    rgba(230, 135, 0, 0.95)
  );
  color: white;
}

.toast-info {
  background: linear-gradient(
    135deg,
    rgba(0, 122, 255, 0.95),
    rgba(0, 105, 220, 0.95)
  );
  color: white;
}

/* Light theme — Toasts Céramique Organique : tons chauds + ombres 3 couches */
[data-theme="light-ether"] .toast-success {
  background: linear-gradient(135deg, #e8f3e5, #d4eacd);
  color: #1a5c27;
  border: 1px solid rgba(34, 197, 94, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(26, 36, 27, 0.08),
    0 4px 16px rgba(26, 36, 27, 0.06);
}

[data-theme="light-ether"] .toast-error {
  background: linear-gradient(135deg, #f9e0df, #f4ccc9);
  color: #7a1f25;
  border: 1px solid rgba(239, 68, 68, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(26, 36, 27, 0.08),
    0 4px 16px rgba(26, 36, 27, 0.06);
}

[data-theme="light-ether"] .toast-warning {
  background: linear-gradient(135deg, #fdf3d7, #f8e7b3);
  color: #7a5a0f;
  border: 1px solid rgba(245, 158, 11, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(26, 36, 27, 0.08),
    0 4px 16px rgba(26, 36, 27, 0.06);
}

[data-theme="light-ether"] .toast-info {
  background: linear-gradient(135deg, #dce8f8, #c8daf4);
  color: #0d3b72;
  border: 1px solid rgba(59, 130, 246, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(26, 36, 27, 0.08),
    0 4px 16px rgba(26, 36, 27, 0.06);
}

[data-theme="light-ether"] .toast-action {
  background: rgba(45, 40, 35, 0.06);
  border-color: rgba(45, 40, 35, 0.12);
}

[data-theme="light-ether"] .toast-action:hover {
  background: rgba(45, 40, 35, 0.1);
}

/* Confirm modal */
.toast-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop, rgba(0, 0, 0, 0.6));
  backdrop-filter: var(--modal-blur, blur(4px));
  -webkit-backdrop-filter: var(--modal-blur, blur(4px));
  z-index: var(--z-modal, 1050);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.toast-confirm-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  padding: 28px 24px 20px;
  max-width: 380px;
  width: 100%;
}

.toast-confirm-text {
  font-size: 1rem;
  color: var(--text-main);
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: center;
}

.toast-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.toast-confirm-btn {
  padding: 9px 20px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.toast-confirm-cancel {
  background: var(--bg-surface-alt);
  color: var(--text-muted);
}

.toast-confirm-cancel:hover {
  background: var(--bg-surface);
  color: var(--text-main);
}

.toast-confirm-ok {
  background: var(--accent-primary);
  color: white;
  border-color: transparent;
}

.toast-confirm-ok:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.toast-confirm-danger {
  background: var(--accent-danger, #dc3545);
}

/* Mobile toast positioning */
@media (max-width: 768px) {
  .toast-container {
    top: auto;
    /* Sur mobile, doit être au dessus de la bottom-nav (60px) avec une marge sécurisée, ou juste au-dessus du form d'édition */
    bottom: calc(85px + env(safe-area-inset-bottom, 0px));
    right: 10px;
    left: 10px;
    align-items: stretch;
    /* CRITICAL: Doit toujours passer au-dessus du layout Topic fullscreen (9500) et de la zone d'édition (9999) */
    z-index: 30000 !important;
  }

  .toast {
    min-width: 0;
  }
}

/* =======================================
   USER AVATAR - Header
   ======================================= */
.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--border-color);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.header-avatar:hover {
  border-color: var(--accent-primary);
  transform: scale(1.05);
}

/* =======================================
   MOBILE BOTTOM NAV - Enhanced
   ======================================= */
.mobile-nav-item {
  position: relative;
}

.mobile-nav-item:active {
  transform: scale(0.92);
}

.mobile-nav-item.active {
  color: var(--accent-primary);
}



[data-theme="deep-ether"] .mobile-nav-item.active {
  color: var(--primary-azure);
}



/* Mobile message dropdown enhancement */
.mobile-msg-dropdown {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  max-width: 90vw;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  margin-bottom: var(--space-sm);
  z-index: var(--z-dropdown);
  overflow: hidden;
}

[data-theme="deep-ether"] .mobile-msg-dropdown {
  background: rgba(28, 28, 28, 0.95);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Inbox conversation list (native app style) */
.conversation-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
}

.conversation-list-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px;
  font-size: var(--text-sm);
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(160, 160, 160, 0.12);
  background: transparent;
  transition: background-color 0.16s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.conversation-item:hover {
  background: var(--bg-surface-alt);
}

.conversation-item:active {
  background: var(--bg-surface-alt);
}

.conversation-item-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.conversation-item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.conversation-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.conversation-item-name {
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-item-name--admin {
  color: var(--accent-danger);
}

.conversation-item-name--moderator {
  color: var(--accent-primary);
}

.conversation-item-date {
  font-size: 0.76rem;
  color: #a0a0a0;
  flex-shrink: 0;
  white-space: nowrap;
}

.conversation-item-preview {
  display: block;
  min-width: 0;
  font-size: 0.86rem;
  color: #a0a0a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-item-unread {
  background: rgba(160, 160, 160, 0.08);
}

.conversation-item-unread .conversation-item-preview {
  color: var(--text-main, #e0e0e0);
  font-weight: 600;
}

.conversation-item-badge {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-primary, #667eea);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
  animation: unreadPulse 2s ease-in-out infinite;
}

@keyframes unreadPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); }
  50% { box-shadow: 0 0 0 5px rgba(102, 126, 234, 0.1); }
}

@media (max-width: 768px) {
  .conversation-item {
    padding: 12px 16px;
  }
}

/* Message item in dropdown */
.msg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.16s ease;
  border-bottom: 1px solid var(--border-color);
  -webkit-tap-highlight-color: transparent;
}

.msg-item:last-child {
  border-bottom: none;
}

.msg-item:hover {
  background: var(--bg-surface-alt);
}

.msg-item:active {
  background: var(--bg-surface-alt);
}

.msg-item-avatar,
.msg-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.msg-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.msg-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.msg-item-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-item-name--admin {
  color: var(--accent-danger);
}

.msg-item-name--moderator {
  color: var(--accent-primary);
}

.msg-item-date {
  color: #a0a0a0;
  font-size: 0.72rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.msg-item-preview {
  font-size: 0.78rem;
  color: #a0a0a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-msg-dropdown .msg-item {
  padding: 12px;
}

.mobile-msg-dropdown .msg-item-avatar,
.mobile-msg-dropdown .msg-item img {
  width: 36px;
  height: 36px;
}

/* =======================================
   NOTIFICATION ITEM - Enhanced
   ======================================= */
.notif-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.2s ease;
}

.notif-item:hover {
  background: var(--bg-surface-alt);
}

.notif-item.unread {
  background: rgba(168, 197, 69, 0.05);
}

[data-theme="deep-ether"] .notif-item.unread {
  background: rgba(59, 130, 246, 0.12);
}

.notif-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.notif-topic-title {
  color: var(--text-muted);
  font-style: italic;
}

/* =======================================
   LEADERBOARD - Enhanced Touch
   ======================================= */
.leaderboard-trigger {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--accent-danger);
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease;
}

.leaderboard-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(244, 67, 54, 0.3);
}

/* Leaderboard tooltip header */
.leaderboard-tooltip-header {
  font-weight: 700;
  margin-bottom: var(--space-sm);
  text-align: center;
  color: var(--accent-danger);
}

.leaderboard-count {
  font-weight: 700;
  color: var(--accent-danger);
}

/* =======================================
   PAGE ICON ACCENT
   ======================================= */
.page-icon {
  margin-right: var(--space-sm);
  color: var(--accent-primary);
}

[data-theme="deep-ether"] .page-icon {
  color: var(--primary-azure);
}

/* =======================================
   RESPONSIVE DROPDOWN FIXES
   ======================================= */
@media (max-width: 480px) {
  .dropdown-panel {
    position: fixed !important;
    top: 60px !important;
    left: 5% !important;
    right: 5% !important;
    width: 90% !important;
    max-width: none !important;
    transform: none !important;
  }

  .dropdown-panel.open {
    transform: none !important;
  }
}

/* =======================================
   HIDE/SHOW MOBILE UTILITIES
   ======================================= */
.hide-on-mobile {
  display: flex;
}

.show-on-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }

  .show-on-mobile {
    display: block !important;
  }

  .show-on-mobile.flex {
    display: flex !important;
  }
}

/* =======================================
   🎨 UI/UX PREMIUM ENHANCEMENTS 2026
   Senior-level improvements for production
   ======================================= */

/* ===================================
   1. ENHANCED CONTRAST - ACCESSIBILITY
   Deep Ether --text-muted is now CANONICAL at L.359 (#94A6C7).
   Ghost override removed — was #9CA3AF (grey, non-indigo),
   which broke the Abyssal Indigo chromatic identity.
   =================================== */

/* AUDIT v5→v9: --text-muted: #6B665E (Gris Mousse) is the canonical value
   for the "Organic Ceramic" light-ether palette. */

/* ===================================
   2. PREMIUM SKELETON LOADERS
   Multi-stop gradient shimmer effect
   =================================== */
.skeleton,
.skeleton-line,
.skeleton-avatar,
.skeleton-post {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 0%,
    var(--bg-surface) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    var(--bg-surface) 75%,
    var(--bg-surface) 100%
  );
  background-size: 400% 100%;
  animation: premiumShimmer 1.8s infinite ease-in-out;
}

/* Note: @keyframes premiumShimmer is defined earlier in the file (line ~6044) */

/* Dark theme skeleton */
[data-theme="dark"] .skeleton,
[data-theme="grey"] .skeleton,
[data-theme="custom"] .skeleton,
[data-theme="dark"] .skeleton-line,
[data-theme="grey"] .skeleton-line,
[data-theme="custom"] .skeleton-line,
[data-theme="deep-ether"] .skeleton,
[data-theme="deep-ether"] .skeleton-line {
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 0%,
    var(--bg-surface-alt) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    var(--bg-surface-alt) 75%,
    var(--bg-surface-alt) 100%
  );
  background-size: 400% 100%;
}

/* Skeleton avatar with proper shape */
.skeleton-avatar {
  border-radius: var(--radius-squircle);
}

.skeleton-avatar.round {
  border-radius: 50%;
}

/* Skeleton text lines */
.skeleton-text {
  height: 14px;
  border-radius: var(--radius-xs);
  margin-bottom: 8px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-text.full {
  width: 100%;
}

/* ===================================
   3. EMPTY STATES - Premium Design
   For when there's no content
   =================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  min-height: 300px;
}

.empty-state-icon {
  font-size: 72px;
  color: var(--text-muted);
  opacity: 0.25;
  margin-bottom: var(--space-lg);
}

[data-theme="deep-ether"] .empty-state-icon {
  color: var(--primary-azure);
  opacity: 0.3;
}

.empty-state-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-main);
  margin: 0 0 var(--space-sm) 0;
}

.empty-state-description {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 400px;
  margin: 0 0 var(--space-lg) 0;
  line-height: 1.6;
}

.empty-state-action {
  margin-top: var(--space-md);
}

/* Empty state illustration animation */
.empty-state-icon i {
  animation: emptyStatePulse 3s ease-in-out infinite;
}

@keyframes emptyStatePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.25;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .empty-state-icon i {
    animation: none;
  }
}

/* ===================================
   4. MICRO-FEEDBACK & HAPTIC TOUCHES
   Enhanced tactile interactions
   =================================== */

/* Button tactile flash */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ripple:active {
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.15)
  );
  transition: background-image 0.05s ease;
}

/* Nav button tactile feedback */
.nav-btn:active {
  background: var(--accent-primary) !important;
  transform: scale(0.92) !important;
}

[data-theme="deep-ether"] .nav-btn:active {
  background: var(--primary-azure) !important;
}

/* Mobile bottom nav tactile */
.mobile-nav-item:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-item:active i {
  color: var(--accent-primary);
}

[data-theme="deep-ether"] .mobile-nav-item:active i {
  color: var(--primary-azure);
}

/* Card press feedback — desktop only to avoid scroll-triggered flicker on mobile */
@media (hover: hover) {
  .topic-card:active,
  .post-item:active,
  .stat-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Interactive element highlight on focus */
.interactive:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ===================================
   5. PAGE TRANSITIONS - SPA Navigation
   Smooth entry animations for pages
   =================================== */
.page-enter {
  animation: pageEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-exit {
  animation: pageExit 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Fade transition variant */
.fade-enter {
  animation: fadeEnter 0.25s ease-out;
}

@keyframes fadeEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Fade + Slide animation for expandable panels */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
   6. UTILITY CLASSES - Replace Inline Styles
   Standardized spacing and layout utilities
   =================================== */

/* Icon margins */
.icon-mr {
  margin-right: var(--space-sm);
}

.icon-mr-xs {
  margin-right: var(--space-xs);
}

.icon-mr-md {
  margin-right: var(--space-md);
}

.icon-ml {
  margin-left: var(--space-sm);
}

/* Flex utilities */
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-row-center.gap-md {
  gap: var(--space-md);
}

.flex-row-center.gap-sm {
  gap: var(--space-sm);
}

.flex-row-center.gap-lg {
  gap: var(--space-lg);
}

/* Fixed heights for images */
.img-height-50 {
  height: 50px;
}

.img-height-40 {
  height: 40px;
}

.img-height-32 {
  height: 32px;
}

/* Text utilities */
.text-pre-wrap {
  white-space: pre-wrap;
}

.min-height-auto {
  min-height: auto;
}

/* ===================================
   7. HOME PAGE STYLES
   Extracted from home.ejs for consistency
   =================================== */
.home-hero {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(168, 197, 69, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(13, 102, 255, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

[data-theme="deep-ether"] .home-hero::before {
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(13, 102, 255, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(0, 212, 255, 0.1) 0%,
      transparent 50%
    );
}

.home-hero-content {
  text-align: center;
  max-width: 700px;
  position: relative;
  z-index: 1;
}

.home-logo-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-lg);
}

.home-logo {
  width: 220px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  animation: logoFloat 4s ease-in-out infinite;
  object-fit: contain;
}

.home-logo-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    circle,
    rgba(168, 197, 69, 0.3) 0%,
    transparent 70%
  );
  filter: blur(20px);
  animation: logoGlowPulse 3s ease-in-out infinite;
  z-index: -1;
}

[data-theme="deep-ether"] .home-logo-glow {
  background: radial-gradient(
    circle,
    rgba(13, 102, 255, 0.4) 0%,
    transparent 70%
  );
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* AUDIT FIX: Renamed from glowPulse to logoGlowPulse — avoids cascade conflict with canonical at L.2028 */
@keyframes logoGlowPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.home-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin: 0 0 var(--space-md);
  color: var(--text-main);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.home-title-accent {
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary, #8eaf35) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="deep-ether"] .home-title-accent {
  background: linear-gradient(135deg, var(--primary-azure) 0%, #5b9bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.home-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin: 0 0 var(--space-xl);
  line-height: 1.6;
}

.home-stats {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.home-stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease;
}

.home-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

[data-theme="deep-ether"] .home-stat-card {
  background: rgba(28, 28, 28, 0.6);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.08);
}

.home-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(168, 197, 69, 0.1);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.home-stat-icon.success {
  background: rgba(52, 199, 89, 0.1);
  color: var(--accent-success);
}

[data-theme="deep-ether"] .home-stat-icon {
  background: rgba(13, 102, 255, 0.15);
  color: var(--primary-azure);
}

.home-stat-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

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

.home-stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-main);
  font-feature-settings: "tnum" 1;
}

.home-stat-value.success {
  color: var(--accent-success);
}

.home-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s var(--ease-spring);
  cursor: pointer;
}

.home-btn-primary {
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary, #8eaf35) 100%
  );
  color: white;
  box-shadow: 0 4px 15px rgba(168, 197, 69, 0.3);
}

.home-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(168, 197, 69, 0.4);
  color: white;
}

[data-theme="deep-ether"] .home-btn-primary {
  background: linear-gradient(135deg, var(--primary-azure) 0%, #1d4ed8 100%);
  box-shadow: 0 4px 15px rgba(13, 102, 255, 0.3);
}

[data-theme="deep-ether"] .home-btn-primary:hover {
  box-shadow: 0 8px 25px rgba(13, 102, 255, 0.4);
}

.home-btn-secondary {
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.home-btn-secondary:hover {
  background: var(--bg-surface-alt);
  transform: translateY(-2px);
}

[data-theme="deep-ether"] .home-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.home-features {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.home-feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.home-feature i {
  color: var(--accent-primary);
  font-size: 14px;
}

[data-theme="deep-ether"] .home-feature i {
  color: var(--primary-azure);
}

/* Home page responsive */
@media (max-width: 768px) {
  .home-hero {
    padding: var(--space-lg);
  }

  .home-stats {
    flex-direction: column;
    align-items: center;
  }

  .home-stat-card {
    width: 100%;
    max-width: 280px;
    justify-content: flex-start;
  }

  .home-features {
    flex-direction: column;
    align-items: center;
  }
}

/* Home page reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-logo,
  .home-logo-glow {
    animation: none;
  }
}

/* ===================================
   8. PROFILE PAGE ENHANCEMENTS
   Premium profile hero section
   =================================== */
.profile-hero {
  position: relative;
  padding: var(--space-2xl);
  background: linear-gradient(
    135deg,
    rgba(168, 197, 69, 0.08) 0%,
    rgba(168, 197, 69, 0.02) 100%
  );
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  overflow: hidden;
}

[data-theme="deep-ether"] .profile-hero {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15) 0%,
    rgba(13, 102, 255, 0.04) 100%
  );
}

.profile-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(168, 197, 69, 0.15) 0%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
}

[data-theme="deep-ether"] .profile-hero::before {
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.25) 0%,
    transparent 70%
  );
}

.profile-avatar-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--accent-primary);
  box-shadow: 0 8px 32px rgba(168, 197, 69, 0.25);
}

[data-theme="deep-ether"] .profile-avatar-large {
  border-color: var(--primary-azure);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.28);
}

/* ===================================
   9. STAT CARD ENHANCEMENTS
   For stats.ejs and dashboard
   =================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease;
  border: 1px solid var(--border-color);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

[data-theme="deep-ether"] .stat-card {
  background: rgba(28, 28, 28, 0.6);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.08);
}

.stat-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  margin-bottom: var(--space-xs);
}

.stat-value-primary {
  color: var(--accent-primary);
}

.stat-value-blue {
  color: var(--accent-blue);
}

.stat-value-danger {
  color: var(--accent-danger);
}

.stat-value-success {
  color: var(--accent-success);
}

[data-theme="deep-ether"] .stat-value-primary {
  color: var(--primary-azure);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===================================
   10. LEADERBOARD THEME OVERRIDES
   Deep-ether enhancements for stats.ejs
   =================================== */
[data-theme="deep-ether"] .leaderboard-tooltip {
  background: rgba(28, 28, 28, 0.95);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.1);
}

/* =======================================
   STATS PAGE - PREMIUM 2026 REDESIGN
   Hero, Podium, Animations, Glassmorphism
   ======================================= */

/* --- Stats Hero Section --- */
.stats-hero {
  position: relative;
  padding: var(--space-2xl) var(--space-xl);
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(13, 102, 255, 0.15) 0%,
    rgba(139, 92, 246, 0.1) 50%,
    rgba(244, 67, 54, 0.1) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.stats-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: heroShimmer 8s ease-in-out infinite;
}

@keyframes heroShimmer {
  0%,
  100% {
    background-position: -200% 0;
  }

  50% {
    background-position: 200% 0;
  }
}

.stats-hero-title {
  position: relative;
  z-index: 1;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 var(--space-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.stats-hero-title i {
  color: var(--accent-primary);
  font-size: 0.9em;
}

.stats-hero-subtitle {
  position: relative;
  z-index: 1;
  color: var(--text-muted);
  font-size: var(--text-base);
  margin: 0;
}

.stats-hero-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(255, 255, 255, 0.05);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--accent-primary);
  margin-top: var(--space-md);
}

/* Deep ether theme hero */
[data-theme="deep-ether"] .stats-hero {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15) 0%,
    rgba(139, 92, 246, 0.08) 50%,
    rgba(244, 67, 54, 0.06) 100%
  );
  backdrop-filter: blur(20px);
}

/* --- Stats Cards Premium --- */
.stats-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.stats-card {
  position: relative;
  padding: var(--space-xl);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  text-align: center;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s ease,
    border-color 0.3s ease;

  /* Stagger animation */
  opacity: 0;
  transform: translateY(30px);
  animation: statsCardEnter 0.6s var(--ease-spring) forwards;
}

.stats-card:nth-child(1) {
  animation-delay: 0.1s;
}

.stats-card:nth-child(2) {
  animation-delay: 0.2s;
}

.stats-card:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes statsCardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-elevated);
}

.stats-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-accent, var(--accent-primary));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stats-card:hover::before {
  opacity: 1;
}

.stats-card--primary {
  --card-accent: var(--accent-primary);
}

.stats-card--blue {
  --card-accent: var(--accent-blue);
}

.stats-card--danger {
  --card-accent: var(--accent-danger);
}

.stats-card--success {
  --card-accent: var(--accent-success);
}

/* Deep ether cards */
[data-theme="deep-ether"] .stats-card {
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="deep-ether"] .stats-card:hover {
  border-color: var(--card-accent);
  box-shadow: 0 12px 40px rgba(13, 102, 255, 0.15);
}

/* --- Card Icon --- */
.stats-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    rgba(var(--card-accent-rgb, 13, 102, 255), 0.15) 0%,
    rgba(var(--card-accent-rgb, 13, 102, 255), 0.05) 100%
  );
  color: var(--card-accent, var(--accent-primary));
  transition: transform 0.3s var(--ease-spring);
}

.stats-card:hover .stats-card-icon {
  transform: scale(1.1) rotate(-5deg);
}

.stats-card--primary .stats-card-icon {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.25) 0%,
    rgba(13, 102, 255, 0.05) 100%
  );
  color: var(--accent-primary);
}

.stats-card--blue .stats-card-icon {
  background: linear-gradient(
    135deg,
    rgba(33, 150, 243, 0.2) 0%,
    rgba(33, 150, 243, 0.05) 100%
  );
  color: var(--accent-blue);
}

.stats-card--danger .stats-card-icon {
  background: linear-gradient(
    135deg,
    rgba(244, 67, 54, 0.2) 0%,
    rgba(244, 67, 54, 0.05) 100%
  );
  color: var(--accent-danger);
}

/* --- Card Value --- */
.stats-card-value {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  margin-bottom: var(--space-xs);
  background: linear-gradient(
    135deg,
    var(--card-accent) 0%,
    var(--text-main) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stats-card--primary .stats-card-value {
  background: linear-gradient(135deg, var(--accent-primary) 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.stats-card--blue .stats-card-value {
  background: linear-gradient(135deg, var(--accent-blue) 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.stats-card--danger .stats-card-value {
  background: linear-gradient(135deg, var(--accent-danger) 0%, #fb923c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- Card Label --- */
.stats-card-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* =======================================
   STATS PODIUM - Leaderboard Premium
   ======================================= */
.stats-podium-section {
  margin-top: var(--space-xl);
}

.stats-podium-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-main);
}

.stats-podium-header i {
  color: #ffd700;
}

/* Podium Container */
.stats-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-md);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 215, 0, 0.03) 100%
  );
  border-radius: var(--radius-lg);
}

/* Podium Place */
.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  min-width: 100px;
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease;

  /* Stagger animation */
  opacity: 0;
  animation: podiumEnter 0.5s var(--ease-spring) forwards;
}

.podium-place:nth-child(1) {
  animation-delay: 0.3s;
}

/* 2nd place */
.podium-place:nth-child(2) {
  animation-delay: 0.1s;
}

/* 1st place */
.podium-place:nth-child(3) {
  animation-delay: 0.5s;
}

/* 3rd place */

@keyframes podiumEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.podium-place:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

/* 1st Place - Gold */
.podium-place--gold {
  order: 2;
  padding-bottom: var(--space-xl);
  background: linear-gradient(
    180deg,
    rgba(255, 215, 0, 0.08) 0%,
    var(--bg-surface) 100%
  );
  border-color: rgba(255, 215, 0, 0.3);
}

.podium-place--gold:hover {
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.2);
}

/* 2nd Place - Silver */
.podium-place--silver {
  order: 1;
}

/* 3rd Place - Bronze */
.podium-place--bronze {
  order: 3;
}

[data-theme="deep-ether"] .podium-place {
  background: rgba(28, 28, 28, 0.8);
  backdrop-filter: blur(12px);
}

[data-theme="deep-ether"] .podium-place--gold {
  background: linear-gradient(
    180deg,
    rgba(255, 215, 0, 0.1) 0%,
    rgba(28, 28, 28, 0.8) 100%
  );
}

/* Medal */
.podium-medal {
  position: relative;
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.podium-place--gold .podium-medal {
  animation: crownFloat 3s ease-in-out infinite;
}

@keyframes crownFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-5px) rotate(2deg);
  }
}

/* Crown for #1 */
.podium-crown {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  animation: crownGlow 2s ease-in-out infinite;
}

@keyframes crownGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    transform: translateX(-50%) scale(1);
  }

  50% {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9));
    transform: translateX(-50%) scale(1.1);
  }
}

/* Podium Avatar */
.podium-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-color);
  margin-bottom: var(--space-xs);
  transition:
    transform 0.3s var(--ease-spring),
    border-color 0.3s ease;
}

.podium-place--gold .podium-avatar {
  width: 64px;
  height: 64px;
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.podium-place--silver .podium-avatar {
  border-color: #c0c0c0;
}

.podium-place--bronze .podium-avatar {
  border-color: #cd7f32;
}

.podium-place:hover .podium-avatar {
  transform: scale(1.1);
}

/* Podium Username */
.podium-username {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-main);
  margin-bottom: var(--space-xs);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Podium Count */
.podium-count {
  font-size: var(--text-lg);
  font-weight: 800;
  font-feature-settings: "tnum" 1;
  color: var(--accent-danger);
}

.podium-place--gold .podium-count {
  color: #ffd700;
}

/* --- Rest of leaderboard (4+) --- */
.stats-leaderboard-rest {
  margin-top: var(--space-lg);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.leaderboard-rest-header {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface-alt);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color);
}

.leaderboard-rest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
}

.leaderboard-rest-row:last-child {
  border-bottom: none;
}

.leaderboard-rest-row:hover {
  background: var(--bg-surface-alt);
}

.leaderboard-rest-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.leaderboard-rest-rank {
  font-weight: 700;
  color: var(--text-muted);
  min-width: 24px;
  font-feature-settings: "tnum" 1;
}

.leaderboard-rest-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.leaderboard-rest-name {
  font-weight: 500;
  color: var(--text-main);
}

.leaderboard-rest-count {
  font-weight: 700;
  color: var(--accent-danger);
  font-feature-settings: "tnum" 1;
}

[data-theme="deep-ether"] .stats-leaderboard-rest {
  background: rgba(28, 28, 28, 0.6);
  backdrop-filter: blur(12px);
}

/* --- Empty State for Podium --- */
.stats-empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
}

.stats-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .stats-hero {
    padding: var(--space-lg);
    text-align: center;
  }

  .stats-hero-title {
    justify-content: center;
    font-size: 1.5rem;
  }

  .stats-card-grid {
    grid-template-columns: 1fr;
  }

  .stats-podium {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  .podium-place {
    order: unset !important;
    width: 100%;
    max-width: 200px;
  }

  .podium-place--gold {
    margin-bottom: var(--space-sm);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stats-card,
  .podium-place {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .stats-hero::before {
    animation: none;
  }

  .podium-place--gold .podium-medal,
  .podium-crown {
    animation: none;
  }
}

/* ===================================
   11. PAGE CONTAINER & TITLE
   Standardized page layout
   =================================== */
.page-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 var(--space-xl) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.page-title .page-icon {
  color: var(--accent-primary);
}

[data-theme="deep-ether"] .page-title .page-icon {
  color: var(--primary-azure);
}

/* ===================================
   12. FORM ENHANCEMENTS
   Consistent form styling
   =================================== */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: var(--space-sm);
}

.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--text-main);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

[data-theme="deep-ether"] .form-input:focus {
  border-color: var(--primary-azure);
  box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.15);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ===================================
   13. MODERATION BUTTONS
   For admin/mod actions
   =================================== */
.mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.mod-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.mod-btn:hover {
  transform: translateY(-1px);
}

.mod-btn:active {
  transform: scale(0.98);
}

.mod-btn-danger {
  background: rgba(255, 59, 48, 0.1);
  color: var(--accent-danger);
  border: 1px solid rgba(255, 59, 48, 0.3);
}

.mod-btn-danger:hover {
  background: rgba(255, 59, 48, 0.2);
}

.mod-btn-success {
  background: rgba(52, 199, 89, 0.1);
  color: var(--accent-success);
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.mod-btn-success:hover {
  background: rgba(52, 199, 89, 0.2);
}

.mod-btn-warning {
  background: rgba(255, 149, 0, 0.1);
  color: var(--accent-warning);
  border: 1px solid rgba(255, 149, 0, 0.3);
}

.mod-btn-warning:hover {
  background: rgba(255, 149, 0, 0.2);
}

.mod-btn-info {
  background: rgba(0, 122, 255, 0.1);
  color: var(--accent-blue);
  border: 1px solid rgba(0, 122, 255, 0.3);
}

.mod-btn-info:hover {
  background: rgba(0, 122, 255, 0.2);
}

.mod-btn-muted {
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.mod-btn-muted:hover {
  background: var(--bg-surface);
  color: var(--text-main);
}

.mod-btn-secondary {
  background: var(--bg-surface-alt);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.mod-btn-secondary:hover {
  background: var(--bg-surface);
}

/* ===================================
   14. RANK BADGE
   For user ranks/roles
   =================================== */
.rank-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(168, 197, 69, 0.1);
  color: var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="deep-ether"] .rank-badge {
  background: rgba(13, 102, 255, 0.15);
  color: var(--primary-azure);
}

.rank-badge.admin {
  background: rgba(255, 59, 48, 0.1);
  color: var(--accent-danger);
}

.rank-badge.mod {
  background: rgba(52, 199, 89, 0.1);
  color: var(--accent-success);
}

/* ===================================
   15. POST LIST - Profile Posts
   For displaying user's recent posts
   =================================== */
.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ===================================
   PIN VAULT - Secure PIN Code System
   Premium randomized numpad interface
   =================================== */

/* Modal Overlay */
.pin-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop, rgba(0, 0, 0, 0.7));
  backdrop-filter: var(--modal-blur, blur(12px));
  -webkit-backdrop-filter: var(--modal-blur, blur(12px));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 1050);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.pin-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Modal Container */
.pin-modal {
  position: relative;
  background: var(--bg-surface);
  border-radius: var(--radius-xl, 20px);
  padding: var(--space-xl) var(--space-lg);
  width: 90%;
  max-width: 360px;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.pin-modal-overlay.visible .pin-modal {
  transform: scale(1) translateY(0);
}

/* Gradient background decoration */
.pin-modal::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(168, 197, 69, 0.15) 0deg,
    transparent 60deg,
    rgba(59, 130, 246, 0.12) 180deg,
    transparent 240deg,
    rgba(168, 197, 69, 0.1) 360deg
  );
  animation: pinGradientRotate 15s linear infinite;
  pointer-events: none;
  z-index: -1;
}

[data-theme="deep-ether"] .pin-modal::before {
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(59, 130, 246, 0.25) 0deg,
    transparent 60deg,
    rgba(0, 212, 255, 0.15) 180deg,
    transparent 240deg,
    rgba(13, 102, 255, 0.15) 360deg
  );
}

@keyframes pinGradientRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Header */
.pin-modal-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.pin-lock-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-md);
  background: linear-gradient(
    135deg,
    rgba(168, 197, 69, 0.15) 0%,
    rgba(168, 197, 69, 0.05) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  box-shadow:
    0 8px 32px rgba(168, 197, 69, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="deep-ether"] .pin-lock-icon {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.25) 0%,
    rgba(13, 102, 255, 0.05) 100%
  );
  color: var(--primary-azure);
  box-shadow:
    0 8px 32px rgba(59, 130, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pin-modal-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.02em;
}

.pin-modal-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  transition: all 0.3s ease;
}

.pin-subtitle-confirm {
  color: var(--accent-primary);
  font-weight: 600;
}

[data-theme="deep-ether"] .pin-subtitle-confirm {
  color: var(--primary-azure);
}

/* PIN Dots */
.pin-dots-container {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding: var(--space-sm) 0;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-surface-alt);
  border: 2px solid var(--border-color);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pin-dot.filled {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(168, 197, 69, 0.5);
}

[data-theme="deep-ether"] .pin-dot.filled {
  background: var(--primary-azure);
  border-color: var(--primary-azure);
  box-shadow: 0 0 12px rgba(13, 102, 255, 0.5);
}

/* Shake animation for wrong PIN */
.pin-dots-container.shake {
  animation: pinShake 0.5s ease-in-out;
}

@keyframes pinShake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(-8px);
  }

  80% {
    transform: translateX(8px);
  }
}

/* Numpad Grid */
.pin-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  max-width: 280px;
  margin: 0 auto var(--space-lg);
}

.pin-key {
  aspect-ratio: 1;
  width: 100%;
  max-width: 80px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-alt);
  color: var(--text-main);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.pin-key:hover {
  background: var(--bg-surface);
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pin-key:active,
.pin-key.pressed {
  transform: scale(0.95);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Reshuffling animation */
.pin-key.reshuffled {
  animation: pinKeyReshuffle 0.3s ease-out;
}

@keyframes pinKeyReshuffle {
  0% {
    opacity: 0;
    transform: scale(0.8) rotateY(90deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotateY(0);
  }
}

/* Action keys (clear, confirm) */
.pin-key-action {
  background: rgba(168, 197, 69, 0.1);
  color: var(--accent-primary);
}

.pin-key-action:hover {
  background: rgba(168, 197, 69, 0.2);
}

[data-theme="deep-ether"] .pin-key-action {
  background: rgba(13, 102, 255, 0.15);
  color: var(--primary-azure);
}

[data-theme="deep-ether"] .pin-key-action:hover {
  background: rgba(59, 130, 246, 0.28);
}

/* Confirm button - special styling */
.pin-key-confirm {
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary, #8eaf35) 100%
  );
  color: white;
  box-shadow: 0 4px 15px rgba(168, 197, 69, 0.3);
}

.pin-key-confirm:hover {
  box-shadow: 0 6px 20px rgba(168, 197, 69, 0.4);
  background: linear-gradient(135deg, #b8d74d 0%, var(--accent-primary) 100%);
}

.pin-key-confirm:disabled {
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.5;
}

[data-theme="deep-ether"] .pin-key-confirm {
  background: linear-gradient(135deg, var(--primary-azure) 0%, #1d4ed8 100%);
  box-shadow: 0 4px 15px rgba(13, 102, 255, 0.3);
}

[data-theme="deep-ether"] .pin-key-confirm:hover {
  box-shadow: 0 6px 20px rgba(13, 102, 255, 0.4);
}

/* Error message */
.pin-error {
  text-align: center;
  color: var(--accent-danger);
  font-size: var(--text-sm);
  font-weight: 500;
  min-height: 20px;
  margin-bottom: var(--space-sm);
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

.pin-error.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Modal Footer */
.pin-modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

.pin-text-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.pin-text-btn:hover {
  color: var(--text-main);
  background: var(--bg-surface-alt);
}

.pin-text-btn-danger:hover {
  color: var(--accent-danger);
  background: rgba(255, 59, 48, 0.1);
}

.pin-separator {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Password Prompt (for setup) */
.pin-password-prompt {
  position: absolute;
  inset: 0;
  background: rgba(var(--bg-surface-rgb, 30, 30, 30), 0.98);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  z-index: 20;
  animation: fadeSlideIn 0.3s ease-out;
}

.pin-password-content {
  width: 100%;
  text-align: center;
}

.pin-password-content h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 var(--space-xs);
}

.pin-password-content p {
  margin: 0 0 var(--space-md);
}

.pin-password-content input {
  width: 100%;
  padding: var(--space-md);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-main);
  text-align: center;
  margin-bottom: var(--space-md);
}

.pin-password-content input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

[data-theme="deep-ether"] .pin-password-content input:focus {
  border-color: var(--primary-azure);
  box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.15);
}

.pin-password-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .pin-modal {
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--radius-lg);
    max-width: 320px;
  }

  .pin-numpad {
    gap: var(--space-xs);
    max-width: 240px;
  }

  .pin-key {
    max-width: 70px;
    font-size: var(--text-xl);
  }

  .pin-dots-container {
    gap: var(--space-sm);
  }

  .pin-dot {
    width: 14px;
    height: 14px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pin-modal::before {
    animation: none;
  }

  .pin-key.reshuffled {
    animation: none;
  }

  .pin-dots-container.shake {
    animation: none;
  }
}

/* =======================================
   FLEX UTILITIES - Global Layout Helpers
   ======================================= */
.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Gap utilities */
.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.gap-xl {
  gap: var(--space-xl);
}

/* Image height utilities */
.img-height-50 {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* ===================================
   TEAM PAGE - Premium Profile Cards 2026
   Redesign with banner + overlapping avatar
   =================================== */

.team-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--space-xl) var(--space-md);
  overflow-x: hidden;
}

.team-page,
.team-header-block,
.team-section,
.team-grid,
.team-card,
.team-card-body,
.team-card-name,
.team-header-title,
.team-header-subtitle {
  box-sizing: border-box;
  max-width: 100%;
}

/* --- Hero Header --- */
.team-header-block {
  text-align: center;
  margin-bottom: 50px;
}

.team-header-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(
    135deg,
    var(--text-main) 0%,
    var(--text-muted) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.team-header-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- Sections --- */
.team-section {
  margin-bottom: 60px;
}

.team-section:last-child {
  margin-bottom: 0;
}

.team-section-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.team-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.team-badge-count {
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
}

/* --- Responsive Grid --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  width: 100%;
}

/* --- TEAM CARD - Premium Profile Card --- */
.team-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  width: 100%;
  min-width: 0;

  /* Staggered entrance animation */
  animation: teamCardPopIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* Cascade animation delays */
.team-card:nth-child(1) {
  animation-delay: 0.05s;
}

.team-card:nth-child(2) {
  animation-delay: 0.1s;
}

.team-card:nth-child(3) {
  animation-delay: 0.15s;
}

.team-card:nth-child(4) {
  animation-delay: 0.2s;
}

.team-card:nth-child(5) {
  animation-delay: 0.25s;
}

.team-card:nth-child(6) {
  animation-delay: 0.3s;
}

.team-card:nth-child(7) {
  animation-delay: 0.35s;
}

.team-card:nth-child(8) {
  animation-delay: 0.4s;
}

@keyframes teamCardPopIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  border-color: var(--accent-primary);
  z-index: 2;
}

.team-card:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-color);
}

/* Banner at top */
.team-card-banner {
  height: 85px;
  width: 100%;
  position: relative;
}

/* Admin Banner: Red gradient */
.team-card.admin .team-card-banner {
  background: linear-gradient(135deg, #ef5350 0%, #b71c1c 100%);
}

.team-card.admin:hover {
  border-color: #ef5350;
}

/* Mod Banner: Green/Teal gradient */
.team-card.mod .team-card-banner {
  background: linear-gradient(135deg, #4db6ac 0%, #00695c 100%);
}

.team-card.mod:hover {
  border-color: #4db6ac;
}

/* Subtle dot pattern on banner */
.team-card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.15) 1px,
    transparent 0
  );
  background-size: 10px 10px;
  opacity: 0.5;
}

/* Avatar Container (Overlap effect) */
.team-card-avatar-wrapper {
  width: 84px;
  height: 84px;
  margin: -42px auto 10px;
  /* Pulls up halfway over banner */
  position: relative;
  border-radius: 50%;
  background: var(--bg-surface);
  /* Inner border color = background */
  padding: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.team-card:hover .team-card-avatar-wrapper {
  transform: scale(1.05);
}

.team-card-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface-alt);
}

/* Card Body */
.team-card-body {
  padding: 0 20px 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.team-card-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.team-card-role {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 15px;
  display: inline-block;
}

.team-card.admin .team-card-role {
  color: #ef5350;
  background: rgba(239, 83, 80, 0.1);
  border: 1px solid rgba(239, 83, 80, 0.2);
}

.team-card.mod .team-card-role {
  color: #26a69a;
  background: rgba(38, 166, 154, 0.1);
  border: 1px solid rgba(38, 166, 154, 0.2);
}

/* Stats Pills */
.team-card-stats {
  display: flex;
  gap: 10px;
  margin-top: auto;
  width: 100%;
  justify-content: center;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  min-width: 0;
  flex: 1 1 96px;
  align-items: center;
}

.stat-item strong {
  font-size: 0.9rem;
  color: var(--text-main);
  font-weight: 700;
}

/* --- Deep Ether Theme --- */
[data-theme="deep-ether"] .team-page {
  background: transparent;
}

[data-theme="deep-ether"] .team-card {
  background: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="deep-ether"] .team-card:hover {
  background: rgba(45, 45, 45, 0.8);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

[data-theme="deep-ether"] .team-card-avatar-wrapper {
  background: #161616;
  /* Matches approx background */
}

[data-theme="deep-ether"] .team-card.admin:hover {
  border-color: #ef5350;
  box-shadow: 0 0 30px rgba(239, 83, 80, 0.2);
}

[data-theme="deep-ether"] .team-card.mod:hover {
  border-color: #4db6ac;
  box-shadow: 0 0 30px rgba(77, 182, 172, 0.2);
}

[data-theme="deep-ether"] .team-header-title {
  background: linear-gradient(135deg, #ffffff 0%, var(--primary-azure) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- MOBILE: Compact vertical cards without horizontal overflow --- */
@media (max-width: 768px) {
  .team-page {
    width: 100%;
    max-width: 100%;
    padding: var(--space-md);
  }

  .team-header-block {
    margin-bottom: 30px;
  }

  .team-header-title {
    font-size: 1.8rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
  }

  .team-header-subtitle {
    font-size: 0.95rem;
  }

  .team-section {
    margin-bottom: 40px;
  }

  .team-section-header {
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    flex-wrap: wrap;
  }

  .team-section-title {
    font-size: 1.2rem;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .team-card {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0 0 14px;
    text-align: center;
    min-height: auto;
    gap: 0;
    border-radius: 16px;
  }

  .team-card-banner {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 64px;
    border-radius: 16px 16px 0 0;
  }

  .team-card-banner::after {
    display: none;
  }

  .team-card-avatar-wrapper {
    margin: -26px auto 10px;
    width: 64px;
    height: 64px;
    padding: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: var(--bg-surface);
    flex-shrink: 0;
  }

  .team-card-body {
    padding: 0 14px;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .team-card-name {
    font-size: 1.1rem;
    margin-bottom: 4px;
    font-weight: 700;
    text-align: center;
    justify-content: center;
  }

  .team-card-role {
    margin-bottom: 12px;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
  }

  .team-card-stats {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding-top: 12px;
  }

  /* General Form Inputs on Mobile (Responsive & Tactile) */
  .form-input {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Empty State */
.team-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  background: var(--bg-surface-alt);
  border-radius: 12px;
  border: 2px dashed var(--border-color);
}

.team-empty i {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: 0.5;
}

.team-empty p {
  margin: 0;
  font-size: var(--text-base);
}

/* ===================================
   WELCOME PANEL — Forum Empty State
   =================================== */

.welcome-panel {
  max-width: 440px;
  text-align: center;
  padding: 48px 32px 36px;
  margin: 0 auto;
  animation: welcomeFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes welcomeFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Visual / Image --- */
.welcome-visual {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.welcome-img-ring {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  padding: 4px;
  background: linear-gradient(135deg,
    rgba(168, 197, 69, 0.3) 0%,
    rgba(168, 197, 69, 0.05) 50%,
    rgba(168, 197, 69, 0.2) 100%
  );
}

.welcome-hero-img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: contain;
  display: block;
}

/* --- Typography --- */
.welcome-title {
  color: var(--text-main);
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.welcome-accent {
  background: linear-gradient(135deg, var(--accent-primary, #a8c545), #d4e88a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  color: var(--text-muted);
  margin: 0 0 28px;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* --- CTA Button --- */
.welcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a241b;
  background: var(--accent-primary, #a8c545);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
              0 4px 14px rgba(168, 197, 69, 0.25);
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.2s ease-out,
              box-shadow 0.2s ease-out;
}

.welcome-cta:hover {
  transform: scale(1.04) translateY(-1px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 8px 24px rgba(168, 197, 69, 0.35);
}

.welcome-cta:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

.welcome-cta i {
  font-size: 13px;
}

/* --- Footer hints --- */
.welcome-footer {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.welcome-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.5;
}

.welcome-hint i {
  margin-right: 4px;
  font-size: 0.72rem;
}

.welcome-contact {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.4;
}

.welcome-contact i {
  margin-right: 4px;
  font-size: 0.68rem;
}

.welcome-contact a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.welcome-contact a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* --- Poirier Dark (deep-ether realm) overrides --- */
html[data-realm="poirier"][data-theme="deep-ether"] .welcome-img-ring {
  background: linear-gradient(135deg,
    rgba(107, 143, 163, 0.35) 0%,
    rgba(107, 143, 163, 0.05) 50%,
    rgba(107, 143, 163, 0.25) 100%
  );
  box-shadow: 0 0 40px rgba(107, 143, 163, 0.08);
}

html[data-realm="poirier"][data-theme="deep-ether"] .welcome-accent {
  background: linear-gradient(135deg, #6B8FA3, #E8C98A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-realm="poirier"][data-theme="deep-ether"] .welcome-cta {
  color: #1a1510;
  background: #6B8FA3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
              0 4px 14px rgba(107, 143, 163, 0.25);
}

html[data-realm="poirier"][data-theme="deep-ether"] .welcome-cta:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 8px 24px rgba(107, 143, 163, 0.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .welcome-panel {
    animation: none !important;
  }
  .welcome-cta {
    transition: opacity 0.15s linear !important;
    transform: none !important;
  }
}

/* ===================================
   TOPIC COMPOSER - Premium 2026 Design
   Inspired by Medium/Ghost/Discord
   =================================== */

.create-topic-page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--space-lg);
  box-sizing: border-box;
  overflow-x: hidden;
}