/* === IA LANDMARK: COMPONENTS (UI, OVERRIDES, FIXES) === */
/* ===== GRID LAYOUT ===== */
.composer-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: var(--space-lg);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== MAIN EDITOR AREA ===== */
.composer-main {
  background: rgba(30, 30, 33, 0.65);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 550px;
  animation: composerEnter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes composerEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

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

/* Top Bar */
.composer-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(22, 22, 24, 0.5);
}

.composer-back-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.composer-back-link:hover {
  color: var(--text-main);
  background: var(--bg-surface);
}

.composer-back-link i {
  font-size: 12px;
}

/* Draft Status */
.draft-status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-success);
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s var(--ease-out-expo);
}

.draft-status.visible {
  opacity: 1;
  transform: translateY(0);
}

.draft-status i {
  font-size: 14px;
}

/* ===== BIG TITLE INPUT ===== */
.composer-title-area {
  padding: var(--space-lg) var(--space-xl);
  position: relative;
}

.composer-title-input {
  width: 100%;
  background: transparent;
  border: none;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text-main);
  outline: none;
  padding: var(--space-md) 0 var(--space-sm);
  line-height: 1.15;
  font-family: inherit;
  letter-spacing: -0.02em;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.04);
  transition: border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.composer-title-input:focus {
  border-bottom-color: var(--accent-primary);
}

.composer-title-input::placeholder {
  color: var(--text-muted);
  opacity: 0.35;
}

.title-char-count {
  position: absolute;
  right: var(--space-xl);
  bottom: var(--space-lg);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.6;
  font-feature-settings: "tnum" 1;
  transition: all 0.2s ease;
}

.title-char-count.caution {
  color: var(--accent-warning);
  opacity: 1;
}

.title-char-count.warning {
  color: var(--accent-danger);
  opacity: 1;
}

/* ===== FLAIR SELECTOR ===== */
.composer-flairs {
  display: flex;
  gap: var(--space-sm);
  padding: 0 var(--space-xl) var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.composer-flairs::-webkit-scrollbar {
  display: none;
}

.flair-option {
  cursor: pointer;
}

.flair-option input {
  display: none;
}

.flair-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  will-change: transform, background;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.15s ease-out,
              border-color 0.15s ease-out,
              color 0.15s ease-out,
              box-shadow 0.15s ease-out;
  user-select: none;
  cursor: pointer;
}

.flair-chip i {
  font-size: 11px;
}

.flair-option:hover .flair-chip {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
}

.flair-option input:checked + .flair-chip {
  background: rgba(168, 197, 69, 0.15);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(168, 197, 69, 0.2);
}

/* Warning Flair (NSFW) */
.flair-chip.flair-warning {
  color: var(--accent-warning);
}

.flair-option:hover .flair-chip.flair-warning {
  border-color: var(--accent-warning);
}

.flair-option input:checked + .flair-chip.flair-warning {
  background: rgba(255, 159, 10, 0.15);
  color: var(--accent-warning);
  border-color: var(--accent-warning);
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.25);
}

/* Danger Flair (Gore, Porn) */
.flair-chip.flair-danger {
  color: var(--accent-danger);
}

.flair-option:hover .flair-chip.flair-danger {
  border-color: var(--accent-danger);
}

.flair-option input:checked + .flair-chip.flair-danger {
  background: rgba(255, 59, 48, 0.15);
  color: var(--accent-danger);
  border-color: var(--accent-danger);
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.25);
}

/* Noir Flair */
.flair-chip.flair-noir {
  color: #9b8ec4;
}

.flair-option:hover .flair-chip.flair-noir {
  border-color: #9b8ec4;
}

.flair-option input:checked + .flair-chip.flair-noir {
  background: rgba(155, 142, 196, 0.15);
  color: #9b8ec4;
  border-color: #9b8ec4;
  box-shadow: 0 2px 8px rgba(155, 142, 196, 0.25);
}

/* ===== TABS ===== */
.composer-tabs {
  display: flex;
  gap: var(--space-lg);
  padding: 0 var(--space-xl);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface-alt);
}

.composer-tab {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  background: none;
  border: none;
  transition: color 0.2s ease;
}

.composer-tab i {
  font-size: 12px;
}

.composer-tab:hover {
  color: var(--text-main);
}

.composer-tab.active {
  color: var(--accent-primary);
}

.composer-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-primary);
  border-radius: 3px 3px 0 0;
}

/* ===== EDITOR PANE ===== */
.composer-editor-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
}

/* Override wysiwyg-container styles for seamless integration */
.composer-editor-pane .wysiwyg-container {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.composer-editor-pane .editor-toolbar-compact {
  background: rgba(22, 22, 24, 0.4);
  padding: var(--space-sm) var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  justify-content: flex-start;
}

.composer-editor-pane .editor-content,
.composer-editor-pane #editor-zone {
  padding: var(--space-lg) var(--space-xl);
  min-height: 300px;
  font-size: var(--text-base);
  line-height: 1.7;
  flex: 1;
}

/* ===== PREVIEW PANE ===== */
.composer-preview-pane {
  display: none;
  padding: var(--space-xl);
  min-height: 350px;
  background: var(--bg-surface);
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--text-muted);
  text-align: center;
}

.preview-placeholder i {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: var(--space-md);
}

.preview-placeholder p {
  margin: 0;
  opacity: 0.6;
}

/* ===== SIDEBAR ===== */
.composer-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: var(--space-lg);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  animation: sidebarEnter 0.4s var(--ease-out-expo) 0.1s both;
}

@keyframes sidebarEnter {
  from {
    opacity: 0;
    transform: translateX(15px);
  }

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

/* Publish Section */
.sidebar-publish {
  text-align: center;
  min-width: 0;
  min-height: 0;
}

.publish-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  min-height: 52px;
  font-size: var(--text-base);
  font-weight: 700;
  color: #1a241b;
  background: var(--accent-primary, #a8c545);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
              0 4px 14px rgba(168, 197, 69, 0.3);
  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;
}

.publish-btn i {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.publish-btn:hover {
  transform: scale(1.02) 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.4);
}

.publish-btn:active {
  transform: scale(0.97);
  transition-duration: 80ms;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
              0 1px 2px rgba(168, 197, 69, 0.15);
}

.publish-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.publish-hint {
  margin: var(--space-sm) 0 0;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Sidebar Widget */
.sidebar-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-width: 0;
  min-height: 0;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  user-select: none;
}

.widget-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-main);
}

.widget-title i {
  color: var(--accent-primary);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-color);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
  cursor: pointer;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* Widget Content */
.widget-content {
  padding: var(--space-md);
  display: none;
}

.widget-content.visible {
  display: block;
}

.poll-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-main);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.poll-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.poll-input::placeholder {
  color: var(--text-muted);
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.add-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-option-btn:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: rgba(168, 197, 69, 0.05);
}

/* Sidebar Preview Widget */
.sidebar-preview {
  background: rgba(18, 18, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  min-width: 0;
  min-height: 0;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(22, 22, 24, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-main);
}

.preview-header i {
  color: var(--accent-primary);
}

.preview-content {
  padding: var(--space-md);
  max-height: 300px;
  overflow-y: auto;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.preview-content::-webkit-scrollbar {
  width: 4px;
}

.preview-content::-webkit-scrollbar-track {
  background: transparent;
}

.preview-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  text-align: center;
  color: var(--text-muted);
}

.preview-placeholder i {
  font-size: 32px;
  opacity: 0.3;
  margin-bottom: var(--space-sm);
}

.preview-placeholder p {
  margin: 0;
  font-size: 12px;
  opacity: 0.6;
}

/* ===== BAN ALERT ===== */
.composer-ban-alert {
  display: flex;
  gap: var(--space-md);
  max-width: 600px;
  margin: var(--space-xl) auto;
  padding: var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.ban-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 59, 48, 0.1);
  border-radius: var(--radius-lg);
  color: var(--accent-danger);
  font-size: 20px;
  flex-shrink: 0;
}

.ban-content h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-lg);
  color: var(--accent-danger);
}

.ban-content p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-main);
}

.ban-reason {
  margin-top: var(--space-sm);
  color: var(--text-muted);
}
/* ===== LIGHT ETHER THEME (Le Poirier Clair) ===== */
[data-theme="light-ether"] .composer-main {
  background: var(--bg-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

[data-theme="light-ether"] .composer-top-bar,
[data-theme="light-ether"] .composer-editor-pane .editor-toolbar-compact,
[data-theme="light-ether"] .preview-header {
  background: var(--bg-surface-alt);
  border-bottom-color: var(--border-color);
}

[data-theme="light-ether"] .composer-title-input {
  border-bottom-color: var(--border-color);
}

[data-theme="light-ether"] .flair-chip {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
}

[data-theme="light-ether"] .flair-option:hover .flair-chip {
  border-color: var(--accent-primary);
  background: var(--bg-surface-alt);
}

[data-theme="light-ether"] .publish-btn {
  background: var(
    --topic-btn-bg,
    linear-gradient(180deg, #b5d15a 0%, #a8c545 100%)
  );
  color: var(--topic-btn-text, #1a241b);
  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));
}

[data-theme="light-ether"] .publish-btn:hover {
  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));
}

[data-theme="light-ether"] .sidebar-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .composer-main,
  .composer-sidebar {
    animation: none !important;
  }

  .flair-chip,
  .publish-btn {
    transition: opacity 0.15s linear !important;
    transform: none !important;
  }
}

/* ===== DEEP ETHER THEME ===== */
[data-theme="deep-ether"] .composer-main,
[data-theme="deep-ether"] .sidebar-widget {
  background: rgba(28, 28, 28, 0.9);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.08);
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .composer-top-bar,
[data-theme="deep-ether"] .widget-header,
[data-theme="deep-ether"] .preview-header,
[data-theme="deep-ether"] .composer-editor-pane .editor-toolbar-compact {
  background: rgba(28, 28, 28, 0.6);
}

[data-theme="deep-ether"] .composer-title-input:focus {
  border-bottom-color: var(--primary-azure);
}

[data-theme="deep-ether"] .flair-option input:checked + .flair-chip {
  background: rgba(59, 130, 246, 0.25);
  color: var(--primary-azure);
  border-color: var(--primary-azure);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

[data-theme="deep-ether"] .widget-title i,
[data-theme="deep-ether"] .preview-header i {
  color: var(--primary-azure);
}

[data-theme="deep-ether"] .toggle-switch input:checked + .toggle-slider {
  background: var(--primary-azure);
}

[data-theme="deep-ether"] .publish-btn {
  background: linear-gradient(135deg, var(--primary-azure) 0%, #1d4ed8 100%);
  box-shadow: 0 4px 16px rgba(13, 102, 255, 0.35);
}

[data-theme="deep-ether"] .publish-btn:hover {
  box-shadow: 0 8px 24px rgba(13, 102, 255, 0.5);
}

[data-theme="deep-ether"] .sidebar-preview {
  background: rgba(28, 28, 28, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  min-width: 0;
  min-height: 0;
}

[data-theme="deep-ether"] .add-option-btn:hover {
  color: var(--primary-azure);
  border-color: var(--primary-azure);
  background: rgba(13, 102, 255, 0.05);
}

[data-theme="deep-ether"] .poll-input:focus {
  border-color: var(--primary-azure);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 900px) {
  .create-topic-page {
    padding: var(--space-md);
  }

  .composer-grid {
    grid-template-columns: 1fr;
  }

  /* Sidebar at bottom on mobile (publish button) */
  .composer-sidebar {
    order: 1;
    position: static;
  }

  /* Hide preview on mobile - users can see content in editor */
  .sidebar-preview {
    display: none;
    min-width: 0;
    min-height: 0;
  }

  .composer-main {
    min-height: 350px;
  }

  .composer-title-area {
    padding: var(--space-md) var(--space-lg);
  }

  /* iOS Safari zoom fix: inputs must be 16px+ to prevent auto-zoom on focus */
  .composer-title-input {
    font-size: 16px;
  }

  .composer-flairs {
    padding: 0 var(--space-lg) var(--space-md);
  }

  .composer-editor-pane .editor-toolbar-compact {
    padding: var(--space-sm) var(--space-lg);
  }

  .composer-editor-pane .editor-content,
  .composer-editor-pane #editor-zone {
    padding: var(--space-md) var(--space-lg);
    min-height: 200px;
    font-size: 16px;
    /* iOS zoom fix */
  }

  /* Publish button full width on mobile */
  .sidebar-publish {
    padding: var(--space-md) 0 0;
    min-width: 0;
    min-height: 0;
  }

  .publish-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .flair-chip {
    padding: 5px 10px;
    font-size: 11px;
  }

  .publish-btn {
    min-height: 48px;
  }
}

/* ===================================
   EDIT PAGE - SPECIFIC STYLES
   =================================== */

/* Zone de Danger (Suppression) */
.danger-zone {
  border-top: 1px dashed rgba(255, 59, 48, 0.3);
  margin-top: 20px;
  padding-top: 20px;
}

.danger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  color: var(--accent-danger);
  background: rgba(255, 59, 48, 0.05);
  border: 1px solid var(--accent-danger);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.danger-btn:hover {
  background: rgba(255, 59, 48, 0.15);
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.15);
  transform: translateY(-1px);
}

.danger-hint {
  font-size: 11px;
  color: var(--accent-danger);
  opacity: 0.8;
  margin-bottom: 8px;
  text-align: center;
}

/* Bouton Vert Poire Forcé (Override le thème bleu Deep Ether) */
.btn-poire-gradient {
  background: var(
    --topic-btn-bg,
    linear-gradient(135deg, #a8c545 0%, #8eaf35 100%)
  ) !important;
  color: var(--topic-btn-text, white) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: var(--topic-btn-shadow, 0 4px 15px rgba(168, 197, 69, 0.3));
}

/* Light-Ether : texte sombre pour conformité WCAG AA */
[data-theme="light-ether"] .btn-poire-gradient {
  color: var(--topic-btn-text, #1a241b) !important;
  border-color: rgba(26, 36, 27, 0.1) !important;
}

.btn-poire-gradient:hover {
  box-shadow: var(--topic-btn-shadow, 0 6px 20px rgba(168, 197, 69, 0.4));
  filter: brightness(1.05);
}

/* Deep Ether override pour btn-poire-gradient */
[data-theme="deep-ether"] .btn-poire-gradient {
  background: var(
    --topic-btn-bg,
    linear-gradient(135deg, #a8c545 0%, #8eaf35 100%)
  ) !important;
  box-shadow: var(
    --topic-btn-shadow,
    0 4px 15px rgba(168, 197, 69, 0.3)
  ) !important;
}

/* ================================================================== */
/* --- FIX SCROLL INFINI BIDIRECTIONNEL - SYSTÈME ---                 */
/* ================================================================== */

/* 1. Désactiver l'ancrage natif pour laisser le JS gérer la mathématique exacte */
html,
body,
.topic-scroll-container,
#posts-container,
.main-content {
  overflow-anchor: none !important;
  min-width: 0;
  min-height: 0;
}

/* 2. S'assurer que les éléments techniques ne perturbent pas le flux */
#top-spacer,
#bottom-spacer,
.sentinel {
  overflow-anchor: none !important;
  transform: translateZ(0);
}

/* Donne une taille physique aux détecteurs pour qu'ils soient impossibles à rater */
.sentinel {
  height: 50px !important;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  display: block;
  z-index: -1;
}

/* 3. Classe pour désactiver le smooth scroll pendant l'insertion (Vital !) */
.is-scroll-locked,
.is-scroll-locked * {
  scroll-behavior: auto !important;
  pointer-events: none;
  /* Bloque les clics pendant le micro-calcul */
}

[data-theme="deep-ether"] .btn-poire-gradient:hover {
  box-shadow: 0 6px 20px rgba(168, 197, 69, 0.4) !important;
}

/* ================================================================== */
/* --- AUDIT TRAIL - INDICATEUR MODÉRATION STAFF (Industrial Pro)     */
/* ================================================================== */

/* Post modéré par le staff - Bordure latérale indicatrice */
.post.staff-moderated {
  position: relative;
  border-left: 3px solid var(--staff-mod-accent, #d4a574);
}

.post.staff-moderated::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #eab676 0%, #c4956a 100%);
  opacity: 0.9;
}

/* L'indicateur inline - Style minimaliste Industrial Pro */
.staff-moderated-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(212, 165, 116, 0.1);
  color: #d4a574;
  font-size: 10px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(212, 165, 116, 0.25);
  cursor: pointer;
  transition: all 0.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  letter-spacing: 0.02em;
}

.staff-moderated-indicator i {
  font-size: 10px;
  opacity: 0.9;
}

.staff-moderated-indicator:hover {
  background: rgba(212, 165, 116, 0.2);
  border-color: rgba(212, 165, 116, 0.4);
  color: #e8c39e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(212, 165, 116, 0.15);
}

/* Animation subtile au lieu du pulse agressif */
.staff-moderated-indicator::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 6px;
  height: 6px;
  background: #d4a574;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.post:hover .staff-moderated-indicator::after {
  animation: subtlePulse 2s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes subtlePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* Deep Ether theme adaptation */
[data-theme="deep-ether"] .post.staff-moderated {
  border-left-color: #c4956a;
}

[data-theme="deep-ether"] .post.staff-moderated::before {
  background: linear-gradient(180deg, #c4956a 0%, #a67c52 100%);
}

[data-theme="deep-ether"] .staff-moderated-indicator {
  background: rgba(196, 149, 106, 0.12);
  border-color: rgba(196, 149, 106, 0.25);
  color: #c4956a;
}

[data-theme="deep-ether"] .staff-moderated-indicator:hover {
  background: rgba(196, 149, 106, 0.22);
  border-color: rgba(196, 149, 106, 0.45);
  color: #debb94;
}

/* Light theme adaptation */
[data-theme="light-ether"] .post.staff-moderated {
  border-left-color: #b8860b;
}

[data-theme="light-ether"] .staff-moderated-indicator {
  background: rgba(184, 134, 11, 0.08);
  border-color: rgba(184, 134, 11, 0.2);
  color: #8b6914;
}

[data-theme="light-ether"] .staff-moderated-indicator:hover {
  background: rgba(184, 134, 11, 0.15);
  color: #6b5200;
}

/* ================================================================== */
/* --- EDIT HISTORY MODAL (Public - for all users) ---                */
/* ================================================================== */

.edit-history-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  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));
  z-index: var(--z-modal, 1050);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.edit-history-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.edit-history-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
}

.edit-history-modal-overlay.active .edit-history-modal {
  transform: scale(1) translateY(0);
}

.edit-history-header {
  padding: 16px 20px;
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 100%
  );
  /* Audit fix: was hardcoded purple var(--accent-primary) → var(--accent-secondary) */
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-history-header h3 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-history-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.2s;
}

.edit-history-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.edit-history-body {
  padding: 15px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

.edit-history-loading,
.edit-history-empty {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
}

.edit-history-loading i,
.edit-history-empty i {
  margin-right: 8px;
}

.edit-history-item {
  background: var(--bg-surface-alt);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
  border-left: 3px solid var(--accent-primary);
}

.edit-history-item:last-child {
  margin-bottom: 0;
}

.edit-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.85em;
}

.edit-history-user {
  color: var(--accent-primary);
  font-weight: 600;
}

.edit-history-user i {
  margin-right: 4px;
}

.edit-history-date {
  color: var(--text-muted);
}

.edit-history-action {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.9em;
  font-weight: 500;
}

.edit-history-diff {
  margin-top: 10px;
}

.edit-history-before,
.edit-history-after {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
}

.edit-history-before {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.edit-history-before strong {
  color: #ff6b6b;
}

.edit-history-after {
  background: rgba(46, 213, 115, 0.1);
  border: 1px solid rgba(46, 213, 115, 0.3);
}

.edit-history-after strong {
  color: #2ed573;
}

.edit-history-before strong i,
.edit-history-after strong i {
  margin-right: 5px;
}

.edit-history-content {
  margin-top: 8px;
  font-size: 0.9em;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 150px;
  overflow-y: auto;
  color: var(--text-main);
}

/* Mobile */
@media (max-width: 768px) {
  .edit-history-modal {
    width: 95%;
    max-height: 85vh;
  }

  .edit-history-meta {
    flex-direction: column;
    gap: 5px;
  }
}

/* ================================================================== */
/* --- DIFF ENGINE STYLES (Word-by-word comparison) ---              */
/* ================================================================== */

/* Diff Highlighting - Suppression (Rouge, barré) */
.diff-del {
  background: rgba(255, 59, 48, 0.2);
  color: #ff4d4d;
  text-decoration: line-through;
  padding: 1px 3px;
  border-radius: 3px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

/* Diff Highlighting - Ajout (Vert, gras) */
.diff-add {
  background: rgba(52, 199, 89, 0.2);
  color: #2ecc71;
  font-weight: bold;
  padding: 1px 3px;
  border-radius: 3px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

/* Unified diff container */
.edit-history-diff-unified {
  margin-top: 10px;
  background: var(--bg-surface-alt);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

/* Diff legend */
.diff-legend {
  display: flex;
  gap: 15px;
  padding: 8px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8em;
}

.diff-legend-del {
  color: #ff4d4d;
}

.diff-legend-add {
  color: #2ecc71;
}

.diff-legend i {
  margin-right: 4px;
}

/* Unified diff content */
.diff-content-unified {
  padding: 12px 15px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

/* Deleted content (full deletion) */
.edit-history-before.deleted-content {
  background: rgba(255, 59, 48, 0.08);
  border-color: rgba(255, 59, 48, 0.3);
}

.edit-history-before.deleted-content strong {
  color: #ff4d4d;
}

/* Staff edit badge (improved clickable) */
.staff-edit-badge {
  background: rgba(255, 59, 48, 0.15);
  color: #ff3b30;
  border: 1px solid rgba(255, 59, 48, 0.3);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.staff-edit-badge:hover {
  background: #ff3b30;
  color: white;
}

/* ================================================================== */
/* --- POST ACTION BUTTONS (Edit/Delete for authors & staff) ---     */
/* ================================================================== */

.post-action-buttons {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
}

.btn-post-action {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.btn-post-action:hover {
  opacity: 1;
  transform: scale(1.05);
}

.btn-post-action.btn-edit:hover {
  background: rgba(52, 152, 219, 0.15);
  border-color: #3498db;
  color: #3498db;
}

.btn-post-action.btn-delete:hover {
  background: rgba(231, 76, 60, 0.15);
  border-color: #e74c3c;
  color: #e74c3c;
}

/* Show buttons on post hover (desktop) */
@media (hover: hover) {
  .post .post-action-buttons {
    opacity: 0;
    transition: opacity 0.2s;
  }

  .post:hover .post-action-buttons {
    opacity: 1;
  }
}

/* Always show on mobile */
@media (max-width: 768px) {
  .post .post-action-buttons {
    opacity: 1;
  }

  .btn-post-action {
    width: 32px;
    height: 32px;
  }
}

/* ================================================================== */
/* --- DELETE CONFIRMATION MODAL ---                                 */
/* ================================================================== */

.delete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop, rgba(0, 0, 0, 0.8));
  backdrop-filter: var(--modal-blur, blur(5px));
  -webkit-backdrop-filter: var(--modal-blur, blur(5px));
  /* Must sit above the mobile topic shell (9500) and floating nav controls (20000),
     while staying below the project's emergency overlays (30000+). */
  z-index: 20001 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

body.mobile-view-content .delete-modal-overlay {
  z-index: 20001 !important;
}

.delete-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.delete-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(231, 76, 60, 0.3);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
}

.delete-modal-overlay.active .delete-modal {
  transform: scale(1) translateY(0);
}

.delete-modal-header {
  padding: 20px;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  display: flex;
  align-items: center;
  gap: 12px;
}

.delete-modal-header i {
  font-size: 1.5em;
}

.delete-modal-header h3 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
}

.delete-modal-body {
  padding: 20px;
}

.delete-modal-body p {
  margin: 0 0 10px 0;
  color: var(--text-main);
}

.delete-warning {
  font-size: 0.85em;
  color: var(--text-muted);
  padding: 10px;
  background: rgba(231, 76, 60, 0.1);
  border-radius: 8px;
  border-left: 3px solid #e74c3c;
}

.delete-modal-actions {
  padding: 15px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
}

.delete-modal-actions button {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-cancel {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-cancel:hover {
  background: var(--bg-surface);
}

.btn-confirm-delete {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border: none;
  color: white;
}

.btn-confirm-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

.btn-confirm-delete:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ================================================================== */
/* --- TOAST NOTIFICATIONS ---                                       */
/* ================================================================== */

.topic-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 24px;
  border-radius: 30px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20000;
  opacity: 0;
  transition: all 0.3s ease;
}

.topic-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.topic-toast.success {
  border-color: #2ecc71;
}

.topic-toast.success i {
  color: #2ecc71;
}

.topic-toast.error {
  border-color: #e74c3c;
}

.topic-toast.error i {
  color: #e74c3c;
}

.topic-toast span {
  color: var(--text-main);
  font-weight: 500;
}

/* =======================================
   INLINE EDIT - PREMIUM WYSIWYG EDITOR 2026
   Full-featured glassmorphism editor with toolbar
   ======================================= */

/* ===== CONTAINER - Premium Glassmorphism ===== */
.inline-edit-container {
  width: 100%;
  padding: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    145deg,
    var(--bg-surface-alt) 0%,
    var(--bg-surface) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  animation: premium-edit-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.inline-edit-container.premium-editor {
  animation-name: premium-edit-appear;
}

@keyframes premium-edit-appear {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }

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

/* Closing animation */
.inline-edit-container.closing {
  animation: premium-edit-close 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes premium-edit-close {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
}

/* Saving state */
.inline-edit-container.saving {
  pointer-events: none;
}

.inline-edit-container.saving::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(168, 197, 69, 0.1) 50%,
    transparent 100%
  );
  animation: saving-shimmer 1.5s infinite;
}

@keyframes saving-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Success state */
.inline-edit-container.success {
  border-color: rgba(168, 197, 69, 0.4);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(168, 197, 69, 0.15);
}

/* ===== HEADER - Badge & Char Counter ===== */
.inline-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.edit-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.edit-icon-pulse {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    var(--accent-glow-soft, rgba(168, 197, 69, 0.2)) 0%,
    var(--accent-highlight, rgba(168, 197, 69, 0.1)) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.edit-icon-pulse i {
  color: var(--accent-primary, #a8c545);
  font-size: 14px;
  z-index: 1;
}

.edit-icon-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle,
    var(--accent-glow, rgba(168, 197, 69, 0.3)) 0%,
    transparent 70%
  );
  animation: icon-pulse 2s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes icon-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

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

.edit-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.edit-header-right {
  display: flex;
  align-items: center;
}

/* Character Counter */
.char-counter {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: "SF Mono", "Monaco", "Inconsolata", monospace;
  font-size: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
}

.char-current {
  font-weight: 700;
  color: var(--text-main);
  transition: color 0.3s ease;
}

.char-separator {
  color: var(--text-muted);
  opacity: 0.4;
}

.char-max {
  color: var(--text-muted);
  opacity: 0.6;
}

.char-counter.ok .char-current {
  color: var(--accent-primary, #a8c545);
}

.char-counter.warning {
  background: rgba(255, 183, 77, 0.1);
  border-color: rgba(255, 183, 77, 0.3);
}

.char-counter.warning .char-current {
  color: #ffb74d;
}

.char-counter.danger {
  background: rgba(239, 83, 80, 0.1);
  border-color: rgba(239, 83, 80, 0.3);
  animation: counter-shake 0.4s ease;
}

.char-counter.danger .char-current {
  color: #ef5350;
}

@keyframes counter-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

/* ===== TOOLBAR - Formatting Buttons ===== */
.inline-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 8px;
}

.toolbar-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.15s ease;
  position: relative;
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  transform: translateY(-1px);
}

.toolbar-btn:active,
.toolbar-btn.clicked {
  transform: scale(0.92);
  background: rgba(168, 197, 69, 0.2);
}

.toolbar-btn.active {
  background: rgba(168, 197, 69, 0.15);
  color: #a8c545;
}

.toolbar-btn.sticker-trigger.active {
  background: rgba(255, 183, 77, 0.15);
  color: #ffb74d;
}

/* Tooltip for buttons */
.toolbar-btn::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 100;
}

.toolbar-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== WYSIWYG ZONE ===== */
.inline-edit-wysiwyg {
  min-height: 180px;
  max-height: 450px;
  padding: 18px 20px;
  margin: 0;
  background: rgba(0, 0, 0, 0.15);
  color: var(--text-main);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  overflow-y: auto;
  outline: none;
  border: none;
  word-wrap: break-word;
  transition: background 0.2s ease;
}

.inline-edit-wysiwyg:focus {
  background: rgba(0, 0, 0, 0.2);
}

/* Placeholder */
.inline-edit-wysiwyg:empty::before {
  content: attr(placeholder);
  color: var(--text-muted);
  opacity: 0.5;
  pointer-events: none;
}

/* Content styles inside WYSIWYG */
.inline-edit-wysiwyg b,
.inline-edit-wysiwyg strong {
  font-weight: 700;
  color: var(--text-main);
}

.inline-edit-wysiwyg i,
.inline-edit-wysiwyg em {
  font-style: italic;
}

.inline-edit-wysiwyg u {
  text-decoration: underline;
}

.inline-edit-wysiwyg s,
.inline-edit-wysiwyg strike {
  text-decoration: line-through;
  opacity: 0.7;
}

.inline-edit-wysiwyg blockquote {
  margin: 10px 0;
  padding: 10px 15px;
  background: rgba(168, 197, 69, 0.08);
  border-left: 3px solid #a8c545;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.inline-edit-wysiwyg a {
  color: #3b82f6;
  text-decoration: underline;
}

.inline-edit-wysiwyg .spoiler {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.inline-edit-wysiwyg img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  vertical-align: middle;
  margin: 4px 2px;
}

.inline-edit-wysiwyg img.sticker {
  max-height: 80px;
  max-width: 80px;
  border-radius: 0;
}

/* Upload placeholder */
.inline-edit-wysiwyg .upload-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(168, 197, 69, 0.1);
  border: 1px dashed rgba(168, 197, 69, 0.4);
  border-radius: 8px;
  color: #a8c545;
  font-size: 12px;
  font-weight: 500;
  margin: 4px 2px;
}

/* Hidden textarea */
.inline-edit-textarea.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== STICKER PICKER INLINE ===== */
.inline-sticker-picker {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
  animation: sticker-picker-in 0.25s ease forwards;
}

@keyframes sticker-picker-in {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 350px;
  }
}

.inline-sticker-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.inline-sticker-picker .sticker-tab-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .inline-sticker-picker .sticker-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

.inline-sticker-picker .sticker-tab-btn.active {
  background: rgba(255, 183, 77, 0.15);
  color: #ffb74d;
}

.inline-sticker-content {
  padding: 12px 14px;
}

.sticker-search-box {
  margin-bottom: 12px;
}

.inline-sticker-search {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 13px;
  transition: all 0.2s ease;
}

.inline-sticker-search::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.inline-sticker-search:focus {
  outline: none;
  border-color: rgba(255, 183, 77, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.1);
}

.inline-sticker-results {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.inline-sticker-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  cursor: pointer;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px;
  transition: all 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .inline-sticker-thumb:hover {
    background: rgba(255, 183, 77, 0.15);
    transform: scale(1.08);
  }
}

.sticker-loading,
.sticker-hint {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  opacity: 0.7;
}

.sticker-loading i {
  font-size: 16px;
  color: #ffb74d;
}

/* ===== ACTIONS BAR ===== */
.inline-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 100%
  );
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.edit-actions-left,
.edit-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Keyboard hint redesign */
.inline-edit-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
}

.inline-edit-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.inline-edit-hint .hint-text {
  margin-left: 4px;
}

/* Cancel button */
.inline-edit-cancel {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-edit-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.15);
}

.inline-edit-cancel:active {
  transform: scale(0.97);
}

/* Save button - Premium gradient */
.inline-edit-save {
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-md);
  background: var(
    --topic-btn-bg,
    linear-gradient(135deg, #a8c545 0%, #8eaf35 100%)
  );
  color: var(--topic-btn-text, #1a1a1a);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow:
    var(--topic-btn-shadow, 0 4px 12px rgba(168, 197, 69, 0.3)),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.inline-edit-save:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--topic-btn-shadow, 0 6px 20px rgba(168, 197, 69, 0.4)),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: brightness(1.05);
}

.inline-edit-save:active {
  transform: translateY(0) scale(0.98);
}

.inline-edit-save i {
  font-size: 12px;
}

.inline-edit-save .btn-text,
.inline-edit-cancel .btn-text {
  white-space: nowrap;
}

/* Disabled states */
.inline-edit-save:disabled,
.inline-edit-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
  pointer-events: none;
}

/* ===== LIGHT ETHER THEME ===== */
[data-theme="light-ether"] .inline-edit-container {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(250, 249, 246, 0.99) 100%
  );
  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.12);
}

[data-theme="light-ether"] .inline-edit-header {
  background: linear-gradient(
    180deg,
    rgba(45, 40, 35, 0.02) 0%,
    transparent 100%
  );
  border-bottom-color: rgba(45, 40, 35, 0.06);
}

[data-theme="light-ether"] .edit-icon-pulse {
  background: linear-gradient(
    135deg,
    rgba(168, 197, 69, 0.15) 0%,
    rgba(168, 197, 69, 0.08) 100%
  );
}

[data-theme="light-ether"] .edit-icon-pulse i {
  color: #3f5e14;
}

[data-theme="light-ether"] .edit-icon-pulse::before {
  background: radial-gradient(
    circle,
    rgba(168, 197, 69, 0.3) 0%,
    transparent 70%
  );
}

[data-theme="light-ether"] .char-counter {
  background: rgba(45, 40, 35, 0.03);
  border-color: rgba(45, 40, 35, 0.06);
}

[data-theme="light-ether"] .char-counter.ok .char-current {
  color: #3f5e14;
}

[data-theme="light-ether"] .inline-edit-toolbar {
  background: rgba(45, 40, 35, 0.03);
  border-bottom-color: rgba(45, 40, 35, 0.06);
}

[data-theme="light-ether"] .toolbar-separator {
  background: rgba(45, 40, 35, 0.1);
}

[data-theme="light-ether"] .toolbar-btn {
  color: var(--text-muted);
}

[data-theme="light-ether"] .toolbar-btn:hover {
  background: rgba(45, 40, 35, 0.06);
  color: var(--text-main);
}

[data-theme="light-ether"] .toolbar-btn.active,
[data-theme="light-ether"] .toolbar-btn:active {
  background: rgba(168, 197, 69, 0.12);
  color: #3f5e14;
}

[data-theme="light-ether"] .inline-edit-wysiwyg {
  background: rgba(45, 40, 35, 0.02);
  box-shadow:
    inset 0 2px 4px rgba(26, 36, 27, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light-ether"] .inline-edit-wysiwyg:focus {
  background: #ffffff;
  box-shadow:
    inset 0 1px 2px rgba(26, 36, 27, 0.03),
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(168, 197, 69, 0.5);
}

[data-theme="light-ether"] .inline-edit-wysiwyg blockquote {
  background: var(--bg-surface-alt);
  border-left: 4px solid var(--accent-primary);
  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.5);
}

[data-theme="light-ether"] .inline-sticker-picker {
  background: rgba(45, 40, 35, 0.02);
  border-top-color: rgba(45, 40, 35, 0.06);
}

[data-theme="light-ether"] .inline-sticker-picker .sticker-tab-btn.active {
  background: rgba(168, 197, 69, 0.12);
  color: #3f5e14;
}

[data-theme="light-ether"] .inline-sticker-search {
  background: rgba(45, 40, 35, 0.03);
  border-color: rgba(45, 40, 35, 0.1);
}

[data-theme="light-ether"] .inline-sticker-search:focus {
  border-color: var(--accent-primary);
  box-shadow:
    inset 0 1px 3px rgba(26, 36, 27, 0.04),
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(168, 197, 69, 0.5);
}

[data-theme="light-ether"] .inline-sticker-thumb {
  background: rgba(45, 40, 35, 0.02);
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="light-ether"] .inline-sticker-thumb:hover {
    background: rgba(168, 197, 69, 0.12);
  }
}

[data-theme="light-ether"] .inline-edit-actions {
  border-top-color: rgba(45, 40, 35, 0.06);
}

[data-theme="light-ether"] .inline-edit-hint kbd {
  background: #ffffff;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 0 var(--border-color);
}

[data-theme="light-ether"] .inline-edit-cancel {
  border-color: rgba(45, 40, 35, 0.12);
  color: var(--text-muted);
}

[data-theme="light-ether"] .inline-edit-cancel:hover {
  background: rgba(45, 40, 35, 0.04);
  color: var(--text-main);
}

/* Save btn — Pastille volumétrique Poire (cohérence dégradé zénithal) */
[data-theme="light-ether"] .inline-edit-save {
  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.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);
}

[data-theme="light-ether"] .inline-edit-save: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),
    0 6px 18px rgba(168, 197, 69, 0.35);
}

[data-theme="light-ether"] .inline-edit-save:active {
  transform: scale(0.97);
  background: 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);
}

/* ═══ DEEP ETHER: Inline Edit — Azure glassmorphism ═══ */
[data-theme="deep-ether"] .inline-edit-container {
  background: linear-gradient(
    145deg,
    rgba(69, 72, 76, 0.97) 0%,
    rgba(61, 65, 71, 0.98) 100%
  );
  border-color: rgba(59, 130, 246, 0.15);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(13, 102, 255, 0.06),
    inset 0 1px 0 rgba(13, 102, 255, 0.08);
}

[data-theme="deep-ether"] .inline-edit-save {
  background: linear-gradient(135deg, var(--primary-azure) 0%, #1d4ed8 100%);
  color: white;
  box-shadow:
    0 2px 8px rgba(13, 102, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="deep-ether"] .inline-edit-save:hover {
  box-shadow:
    0 4px 16px rgba(13, 102, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="deep-ether"] .inline-edit-cancel:hover {
  background: rgba(13, 102, 255, 0.08);
}

[data-theme="deep-ether"] .inline-edit-wysiwyg:focus {
  box-shadow:
    0 0 0 2px rgba(13, 102, 255, 0.3),
    0 0 20px rgba(13, 102, 255, 0.08);
}

/* ═══ DEEP ETHER: Sticker Picker — Azure tinted glass ═══ */
[data-theme="deep-ether"] .inline-sticker-picker {
  background: rgba(61, 65, 71, 0.9);
  border-top-color: rgba(59, 130, 246, 0.12);
}

[data-theme="deep-ether"] .inline-sticker-picker .sticker-tab-btn.active {
  background: rgba(13, 102, 255, 0.15);
  color: var(--accent-secondary);
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="deep-ether"] .inline-sticker-thumb:hover {
    background: rgba(59, 130, 246, 0.15);
  }
}

/* ═══ LIGHT ETHER: Alert Bars — Ceramic-compatible tones ═══ */
[data-theme="light-ether"] .alert-bar-danger {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.08) 0%,
    rgba(220, 38, 38, 0.12) 100%
  );
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="light-ether"] .alert-bar-warning {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.08) 0%,
    rgba(217, 119, 6, 0.12) 100%
  );
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="light-ether"] .alert-bar-info {
  background: var(--bg-surface);
  border-color: rgba(26, 36, 27, 0.06);
  box-shadow: var(--shadow-card);
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  .inline-edit-container {
    border-radius: 12px;
    margin: -8px;
    width: calc(100% + 16px);
  }

  .inline-edit-header {
    padding: 12px 14px;
  }

  .edit-icon-pulse {
    width: 32px;
    height: 32px;
  }

  .edit-title {
    font-size: 13px;
  }

  .char-counter {
    font-size: 11px;
    padding: 4px 8px;
  }

  .inline-edit-toolbar {
    padding: 8px 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .toolbar-btn {
    min-width: 40px;
    width: 40px;
    height: 40px;
  }

  .toolbar-btn::after {
    display: none;
    /* No tooltips on mobile */
  }

  .inline-edit-wysiwyg {
    min-height: 150px;
    max-height: 350px;
    padding: 14px 16px;
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  .inline-sticker-picker {
    max-height: 280px;
  }

  .inline-sticker-results {
    max-height: 160px;
  }

  .inline-sticker-thumb {
    width: 56px;
    height: 56px;
  }

  .inline-edit-actions {
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
  }

  .edit-actions-left {
    display: none;
    /* Hide keyboard hint on mobile */
  }

  .edit-actions-right {
    width: 100%;
  }

  .inline-edit-cancel,
  .inline-edit-save {
    flex: 1;
    justify-content: center;
    padding: 14px 20px;
  }

  /* Disable heavy effects on mobile */
  .inline-edit-container {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .edit-icon-pulse::before {
    display: none;
  }
}

/* ================================================================== */
/* ===  PREMIUM PERFORMANCE & POLISH 2026  ===                        */
/* ===  Optimisations GPU, Texture, UX Tactile                        */
/* ================================================================== */

/* --- 1. TEXTURE NOISE : Anti-banding & Finition Premium --- */
/* Ajoute de la matière aux dégradés, évite l'effet "plastique" */
[data-theme="deep-ether"]::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Bruit SVG léger en base64 pour donner de la texture organique */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}

/* --- 2. OPTIMISATION GPU MOBILE : Désactive backdrop-filter sur les posts --- */
/* Le blur est un tueur de FPS sur les listes infinies en mobile */
@media (max-width: 768px) {
  [data-theme="deep-ether"] .post {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Fond plus opaque pour compenser l'absence de blur */
    background: var(--bg-surface) !important;
  }

  /* Garder le blur pour les éléments statiques (header, modales) */
  [data-theme="deep-ether"] .topic-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-surface) !important;
  }
}

/* --- 3. SQUIRCLES : Avatars modernes (super-ellipse) --- */
/* Plus organique et moderne que les cercles parfaits */
.author-avatar-small,
.mobile-nav-avatar,
.profile-avatar-large,
.reply-context-avatar,
.msg-avatar,
.user-card-avatar {
  border-radius: 22% !important;
  /* Le "Squircle" visuel façon Apple */
}

/* Micro-interaction ludique sur les avatars */
.author-avatar-small {
  transition: transform 0.25s
    var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

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

/* --- 4. TOUCH TARGETS ACCESSIBILITÉ (Apple/Android 44px minimum) --- */
@media (max-width: 768px) {
  .chat-action-btn,
  .sidebar-search-btn,
  .btn-post-action,
  .nav-btn,
  .mobile-nav-item,
  .sticker-btn,
  .toolbar-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0;
    min-height: 0;
  }

  /* Espacement accru entre les boutons tactiles */
  .post-action-buttons {
    gap: 8px;
  }
}

/* --- 5. FEEDBACK TACTILE HARMONISÉ (Game Juice) --- */
/* Animation de pression cohérente pour tous les interactifs */
.btn:not(.no-press),
.nav-btn,
.mobile-nav-item,
.chat-action-btn,
.sticker-btn,
.toolbar-btn,
.flair-chip {
  transition:
    transform 0.1s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)),
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:not(.no-press):active,
.nav-btn:active,
.mobile-nav-item:active,
.chat-action-btn:active,
.sticker-btn:active,
.toolbar-btn:active,
.flair-chip:active {
  transform: scale(0.95) !important;
  /* Feedback subtil mais perceptible */
}

/* --- 6. INNER GLOW : Remplacement des ombres externes lourdes --- */
/* Plus léger visuellement et meilleur pour les performances */
[data-theme="deep-ether"] .post {
  /* Lumière interne subtile au lieu d'ombre externe lourde */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="deep-ether"] .post:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(59, 130, 246, 0.15);
}

/* --- 7. REDUCED MOTION RESPECT --- */
/* Désactive les animations non-essentielles pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  [data-theme="deep-ether"]::before {
    display: none;
    /* Pas de texture animée */
  }

  .author-avatar-small:hover {
    transform: none;
  }

  .topic-card:hover {
    transform: none;
  }

  .btn:active,
  .nav-btn:active,
  .mobile-nav-item:active {
    transform: none !important;
  }

  @keyframes glowPulse {
    0%,
    100% {
      opacity: 1;
    }
  }

  @keyframes subtlePulse {
    0%,
    100% {
      opacity: 0.5;
    }
  }
}

/* ================================================================== */
/* ===  DEEP DIVE ENHANCEMENTS 2026  ===                              */
/* ===  Spotlight, Zen Mode, Data-Block Citations, Chat Clustering    */
/* ================================================================== */

/* --- 1. SPOTLIGHT EFFECT : Lumière dynamique suivant le curseur --- */
/* --- DÉSACTIVÉ : Spotlight supprimé sur demande utilisateur ---
[data-theme="deep-ether"] .topic-card,
[data-theme="deep-ether"] .post {
    --mouse-x: 50%;
    --mouse-y: 50%;
}

[data-theme="deep-ether"] .topic-card::after,
[data-theme="deep-ether"] .post::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),
            rgba(13, 102, 255, 0.08),
            transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

[data-theme="deep-ether"] .topic-card:hover::after,
[data-theme="deep-ether"] .post:hover::after {
    opacity: 0;
}

[data-theme="deep-ether"] .topic-card>*,
[data-theme="deep-ether"] .post>* {
    position: relative;
    z-index: 2;
}
--- FIN DÉSACTIVÉ --- */

/* --- DÉSACTIVÉ : Zen Mode supprimé sur demande utilisateur ---
body.zen-mode::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 15, 0.75);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 89;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5,
5, 15, 0.75);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 89;
}

.fixed-reply-form,
.reply-form-container,
.mobile-reply-form {
    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.3s ease;
    position: relative;
    z-index: 90;
}

body.zen-mode .fixed-reply-form,
body.zen-mode .reply-form-container,
body.zen-mode .mobile-reply-form {
    transform: translateY(-8px);
    box-shadow:
        0 -10px 40px rgba(0,
0, 0, 0.5),
        0 0 30px rgba(13, 102, 255, 0.15);
    border-color: var(--accent-primary, #A8C545) !important;
}

[data-theme="deep-ether"] body.zen-mode .fixed-reply-form,
[data-theme="deep-ether"] body.zen-mode .reply-form-container {
    box-shadow:
        0 -10px 40px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(59, 130, 246, 0.25);
    border-color: var(--primary-azure) !important;
}
--- FIN DÉSACTIVÉ --- */

/* --- 3. CITATIONS DATA-BLOCK (Style Sci-Fi pour Deep Ether) --- */
[data-theme="deep-ether"] .post-content blockquote {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(13, 102, 255, 0.06) 0%,
    rgba(13, 102, 255, 0.02) 100%
  );
  border-left: none;
  border: 1px solid rgba(13, 102, 255, 0.15);
  border-radius: 8px;
  padding: 14px 18px 14px 18px;
  margin: 14px 0;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
  font-style: normal;
  color: var(--text-muted);
  overflow: hidden;
}

/* Indicateur latéral style "terminal" */
[data-theme="deep-ether"] .post-content blockquote::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  background: rgba(59, 130, 246, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-azure);
  font-size: 1.2em;
  font-weight: bold;
  border-right: 1px solid rgba(13, 102, 255, 0.15);
}

/* Décalage du contenu pour l'indicateur */
[data-theme="deep-ether"] .post-content blockquote {
  padding-left: 40px;
}

/* Barre lumineuse décorative en bas */
[data-theme="deep-ether"] .post-content blockquote::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 28px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-azure) 0%, transparent 100%);
  opacity: 0.6;
}

/* --- 4. CHAT CLUSTERING (Regroupement messages consécutifs) --- */
/* Réduire l'espace entre les messages du même expéditeur */
.message-bubble {
  transition:
    border-radius 0.15s ease,
    margin 0.15s ease;
}

/* Messages envoyés (droite) - Groupement */
.message-sent:has(+ .message-sent) {
  border-bottom-right-radius: 6px;
  margin-bottom: 3px;
}

.message-sent + .message-sent {
  border-top-right-radius: 6px;
  margin-top: 0;
}

/* Messages reçus (gauche) - Groupement */
.message-received:has(+ .message-received) {
  border-bottom-left-radius: 6px;
  margin-bottom: 3px;
}

.message-received + .message-received {
  border-top-left-radius: 6px;
  margin-top: 0;
}

/* Séparation forte quand l'interlocuteur change */
.message-sent + .message-received,
.message-received + .message-sent {
  margin-top: 14px !important;
}

/* Fallback pour navigateurs sans :has() (Safari < 15.4) */
@supports not selector(:has(*)) {
  .message-bubble {
    margin-bottom: 6px;
  }
}

/* --- 5. MESSAGE DELETION & SELECTION MODE --- */
.message-bubble.message-deleted {
  opacity: 0.6;
  font-style: italic;
  background: var(--bg-surface-alt, rgba(255, 255, 255, 0.03)) !important;
  border: 1px dashed var(--border-color, #333) !important;
}

.message-bubble.selectable {
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.message-bubble.selectable::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: border-color 0.15s ease;
  pointer-events: none;
}

.message-bubble.selectable:hover::before {
  border-color: rgba(102, 126, 234, 0.4);
}

.message-bubble.selected {
  background: rgba(102, 126, 234, 0.15) !important;
}

.message-bubble.selected::before {
  border-color: var(--accent-primary) !important;
}

.message-bubble.selected::after {
  content: "\2713";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
}

/* AUDIT FIX: Duplicate @keyframes slideUp removed.
   Canonical definition at ~L.10281. */

/* Context menu animation for MP right-click */
@keyframes ctxFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

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

/* ================================================================== */
/* --- FIX CRITIQUE : SCROLL INFINI BIDIRECTIONNEL ------------------ */
/* ================================================================== */

/* 1. Désactiver l'ancrage natif pour laisser le JS gérer les maths */
html,
body,
.topic-scroll-container,
#posts-container,
.main-content {
  overflow-anchor: none !important;
  min-width: 0;
  min-height: 0;
}

/* 2. La classe utilisée par le JS pour forcer le saut instantané */
.is-scroll-locked,
.is-scroll-locked * {
  scroll-behavior: auto !important;
  /* TUE le smooth scroll temporairement */
  pointer-events: none;
  /* Bloque les interférences souris */
}

/* 3. Empêcher les animations d'entrée sur l'historique */
/* Sinon le calcul de hauteur du JS est faux car l'élément est en train de bouger */
.post.no-anim {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 4. Stabilisation des sentinelles */
.sentinel {
  overflow-anchor: none !important;
  transform: translateZ(0);
  /* Force le rendu GPU */
}

/* =======================================
   📱 MOBILE GESTURES UI
   Industrial Pro V5 — Heavy-Feel Edition
   ======================================= */

/* Fluidité native pour les gestures — GPU layer promotion */
.main-content,
.post {
  will-change: transform;
  min-width: 0;
  min-height: 0;
}

/* =======================================
   🏆 STYLE "TOP VIOLEUR" (THE KING)
   Avec images Risitas bien intégrées
   ======================================= */

.post.is-top-violator {
  /* Bordure Or subtile */
  border-left: 3px solid #ffd700 !important;
  /* Fond très légèrement doré */
  background: linear-gradient(
    135deg,
    var(--bg-surface) 0%,
    rgba(255, 215, 0, 0.05) 100%
  ) !important;
  position: relative;
}

/* Lueur dorée subtile au hover */
.post.is-top-violator:hover {
  box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.08);
}

/* --- TAMPON sur l'avatar (petit et discret) --- */
.post.is-top-violator .author-avatar-small {
  position: relative;
}

/* Le petit tampon en bas à droite de l'avatar */
/* Le petit tampon en bas à droite de l'avatar */
.post.is-top-violator .author-avatar-small::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  /* Coin bas-droite de l'avatar */
  width: 24px;
  height: 24px;
  background-image: url("https://risibank.fr/cache/medias/0/42/4230/423086/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-12deg);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  z-index: 10;
  pointer-events: none;
  opacity: 1;
}

/* --- FILIGRANE Risitas (fond du post, très subtil) --- */
.post.is-top-violator::before {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background-image: url("https://risibank.fr/cache/medias/0/0/59/5989/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.06;
  /* Très subtil */
  transform: rotate(-8deg);
  z-index: 0;
  pointer-events: none;
}

/* Contenu au-dessus du filigrane (exclude hover pill which needs absolute positioning) */
.post.is-top-violator > *:not(.post-hover-pill) {
  position: relative;
  z-index: 1;
}

/* =======================================
   ✨ TOP VIOLEUR — PREMIUM GOLD CARD
   Canvas-based gold particle system (goldParticles.js)
   ======================================= */

/* Background for the post card — minimal, sober */
.post.is-top-violator {
  /* No background tint — keep default post background */
  /* Thin gold left accent */
  border-left: 2px solid rgba(255, 215, 0, 0.5) !important;
  /* Very faint inner glow, barely visible */
  box-shadow: inset 2px 0 8px -3px rgba(255, 215, 0, 0.08) !important;
  position: relative !important;
  /* overflow: visible so orbit pseudo-element can extend beyond post edges */
  overflow: visible !important;
  /* Sit above previous post so orbit doesn't clip behind it */
  z-index: 1;
}

/* Ensure all post content sits ABOVE the gold particle canvas (z-index: 0) */
.post.is-top-violator > .post-header-row,
.post.is-top-violator > .post-content,
.post.is-top-violator > .post-reactions,
.post.is-top-violator > .post-reply-context,
.post.is-top-violator > .post-poll,
.post.is-top-violator > .post-signature,
.post.is-top-violator > .post-deleted-badge {
  position: relative;
  z-index: 1;
}

.post.is-top-violator .author-username {
  /* Or Gradient Métallique Premium */
  background: linear-gradient(
    180deg,
    #ffd700 0%,
    #fdb931 45%,
    #ffffff 50%,
    #fdb931 55%,
    #ffd700 100%
  ) !important;
  background-size: 100% 250% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  display: inline-block !important;
  position: relative !important;
  text-shadow: none !important;
  /* Gold Glow Filter */
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6));
  animation: goldShine 4s linear infinite !important;
}

/* Allow orbit to be visible outside the name container */
.post.is-top-violator .author-name,
.post.is-dieu-dechu .author-name {
  overflow: visible !important;
  max-width: none !important;
  text-overflow: clip !important;
}

/* FIX: Ensure entire ancestor chain allows overflow for orbiting stickers */
.post.is-top-violator .post-header-row,
.post.is-top-violator .post-author-info,
.post.is-top-violator .author-meta,
.post.is-top-violator .author-meta-row,
.post.is-dieu-dechu .post-header-row,
.post.is-dieu-dechu .post-author-info,
.post.is-dieu-dechu .author-meta,
.post.is-dieu-dechu .author-meta-row {
  overflow: visible !important;
}

/* Le satellite (Risitas) qui tourne autour du pseudo */
.post.is-top-violator .author-username::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: url("https://risibank.fr/cache/medias/0/42/4230/423086/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
  margin-top: -12px;
  margin-left: -12px;
  /* Orbit animation: rotate container, counter-rotate element to keep upright */
  animation: orbitUsername 4s linear infinite;
  pointer-events: none;
  z-index: 10;
}

/* Le 2e satellite (Risitas rire) — opposé à 180° */
.post.is-top-violator .author-username::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-image: url("https://risibank.fr/cache/medias/0/0/59/5989/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
  margin-top: -11px;
  margin-left: -11px;
  /* Same orbit, glued to the right of the first sticker */
  animation: orbitUsernameCompanion 4s linear infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes orbitUsername {
  from {
    transform: rotate(0deg) translateX(50px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(50px) rotate(-360deg);
  }
}

/* Companion: follows the first sticker with a small gap */
@keyframes orbitUsernameCompanion {
  from {
    transform: rotate(0deg) translateX(50px) rotate(0deg) translateX(18px);
  }

  to {
    transform: rotate(360deg) translateX(50px) rotate(-360deg) translateX(18px);
  }
}

@keyframes goldShine {
  0% {
    background-position: 0% 0%;
  }

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

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

/* Badge "VIOLEUR" après le niveau - style premium */
.post.is-top-violator .level-badge::after {
  content: "VIOLEUR";
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ffd700, #ff6b00);
  color: #1d1d1f;
  border-radius: 3px;
  animation: violeurPulse 2s ease-in-out infinite;
}

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

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* AUDIT FIX: Renamed from 'pulse' to 'pulseOpacity' — canonical pulse uses scale. */
@keyframes pulseOpacity {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* =======================================
   🏆 GRADES DU JOUR (Artiste & Poire)
   ======================================= */

/* --- Animations --- */
@keyframes brushWiggle {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(15deg) scale(1.1);
  }

  75% {
    transform: rotate(-10deg) scale(1.1);
  }
}

@keyframes pearRadioactive {
  0% {
    filter: drop-shadow(0 0 2px #76ff03);
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 8px #76ff03) hue-rotate(20deg);
    transform: scale(1.15);
  }

  100% {
    filter: drop-shadow(0 0 2px #76ff03);
    transform: scale(1);
  }
}

@keyframes artistFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

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

/* --- GRADE ARTISTE : Texte Dégradé Animé --- */
.post.is-artist .author-username {
  /* Dégradé Rose/Bleu/Violet */
  background: linear-gradient(270deg, #ff00cc, #333399, #00ccff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  display: inline-block;
  /* Lueur externe */
  text-shadow: none;
  /* Shadow conflicts with transparent text fill */
  filter: drop-shadow(0 0 4px rgba(224, 86, 253, 0.5));
  animation: artistFlow 3s ease infinite;
}

.badge-artist {
  display: inline-block;
  width: 24px;
  height: 24px;
  /* Image Pinceau - URL spécifiée par l'utilisateur */
  background-image: url("https://risibank.fr/cache/medias/0/42/4217/421767/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: text-bottom;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: brushWiggle 3s ease-in-out infinite;
}

/* --- GRADE POIRE : Vert Radioactif --- */
.post.is-poire .author-username {
  color: #76ff03 !important;
  /* Vert Acide */
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(118, 255, 3, 0.5);
}

.badge-poire {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/images/poire.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: text-bottom;
  animation: pearRadioactive 2s infinite;
}

/* =======================================
   ? COMBO POIRE � ARTISTE : "L'�TERNEL"
   Fusion cosmique � �v�nement ultra-rare
   ======================================= */

/* --- Pseudo fusionn� : D�grad� Vert ? Violet anim� --- */
.post.is-poire-artiste .author-username {
  background: linear-gradient(270deg, #76ff03, #e056fd, #00d2d3, #76ff03);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 900 !important;
  /* FIX: text-shadow ne marche pas avec color:transparent + background-clip:text
       ? on utilise filter: drop-shadow() qui s'applique sur le r�sultat visuel */
  filter: drop-shadow(0 0 6px rgba(118, 255, 3, 0.35))
    drop-shadow(0 0 6px rgba(224, 86, 253, 0.35));
  animation: poireArtisteFlow 3s ease infinite;
}

@keyframes poireArtisteFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

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

/* --- Post container : bordure anim�e + glow pulsant + scan lumineux --- */
.post.is-poire-artiste {
  border-left: 4px solid #76ff03 !important;
  position: relative;
  overflow: hidden;
  /* Double animation : couleur de bordure + glow */
  animation: poireArtistePostPulse 3s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

@keyframes poireArtistePostPulse {
  0%,
  100% {
    box-shadow:
      inset 4px 0 18px -6px rgba(118, 255, 3, 0.18),
      0 0 8px -3px rgba(118, 255, 3, 0.06);
  }

  50% {
    box-shadow:
      inset 4px 0 18px -6px rgba(224, 86, 253, 0.18),
      0 0 8px -3px rgba(224, 86, 253, 0.06);
  }
}

/* --- Lueur fusionn�e au hover + micro-lift --- */
.post.is-poire-artiste:hover {
  transform: translateX(2px);
  box-shadow:
    inset 0 0 25px rgba(118, 255, 3, 0.06),
    inset 0 0 25px rgba(224, 86, 253, 0.06),
    0 2px 15px -4px rgba(118, 255, 3, 0.1),
    0 2px 15px -4px rgba(224, 86, 253, 0.1) !important;
}

/* --- Scan lumineux diagonal qui balaie le post --- */
.post.is-poire-artiste::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(118, 255, 3, 0.04) 45%,
    rgba(224, 86, 253, 0.06) 50%,
    rgba(118, 255, 3, 0.04) 55%,
    transparent 70%
  );
  animation: poireArtisteScan 6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes poireArtisteScan {
  0% {
    left: -60%;
  }

  45% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

/* --- Invasion ???? : poires et pinceaux dispers�s sur tout le post --- */
.poire-artiste-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.poire-artiste-watermark > span {
  position: absolute;
  opacity: 0.04;
  animation: poireArtisteWmFloat 5s ease-in-out infinite;
}

/* Douce pulsation : les ic�nes respirent entre 0.04 et 0.07 d'opacit� */
@keyframes poireArtisteWmFloat {
  0%,
  100% {
    opacity: 0.04;
    transform: scale(1) rotate(0deg);
  }

  50% {
    opacity: 0.07;
    transform: scale(1.08) rotate(4deg);
  }
}

.post.is-poire-artiste > *:not(.post-hover-pill) {
  position: relative;
  z-index: 1;
}

/* --- Badge fusionn� : Poire + Pinceau qui swappent de place --- */
.badge-poire-artiste {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: auto;
  height: 24px;
  vertical-align: text-bottom;
  position: relative;
  filter: drop-shadow(0 0 4px rgba(118, 255, 3, 0.5))
    drop-shadow(0 0 4px rgba(224, 86, 253, 0.5));
}

.badge-poire-artiste::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("/images/poire.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Combo : pulse radioactif + swap p�riodique vers la droite */
  animation: poireArtistePearSwap 8s ease-in-out infinite;
}

.badge-poire-artiste::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("https://risibank.fr/cache/medias/0/42/4217/421767/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Combo : wiggle artistique + swap p�riodique vers la gauche */
  animation: poireArtisteBrushSwap 8s ease-in-out infinite;
}

/* Poire : pulse radioactif (scale) + swap translateX(+24px) entre 35%-72% */
@keyframes poireArtistePearSwap {
  /* Phase 1 : position normale, pulse */
  0% {
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 0 2px #76ff03);
  }

  8% {
    transform: translateX(0) scale(1.15);
    filter: drop-shadow(0 0 6px #76ff03);
  }

  16% {
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 0 2px #76ff03);
  }

  25% {
    transform: translateX(0) scale(1.1);
    filter: drop-shadow(0 0 5px #76ff03);
  }

  33% {
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 0 2px #76ff03);
  }

  /* Phase 2 : SWAP ? glisse � droite */
  38% {
    transform: translateX(0) scale(1.2);
    filter: drop-shadow(0 0 8px #76ff03);
  }

  43% {
    transform: translateX(24px) scale(1.1);
    filter: drop-shadow(0 0 6px #76ff03);
  }

  /* Phase 3 : position swapp�e, continue � pulser */
  50% {
    transform: translateX(24px) scale(1);
    filter: drop-shadow(0 0 2px #76ff03);
  }

  58% {
    transform: translateX(24px) scale(1.15);
    filter: drop-shadow(0 0 7px #76ff03);
  }

  65% {
    transform: translateX(24px) scale(1);
    filter: drop-shadow(0 0 2px #76ff03);
  }

  /* Phase 4 : SWAP RETOUR ? glisse � gauche */
  72% {
    transform: translateX(24px) scale(1.2);
    filter: drop-shadow(0 0 8px #76ff03);
  }

  78% {
    transform: translateX(0) scale(1.1);
    filter: drop-shadow(0 0 5px #76ff03);
  }

  /* Phase 5 : retour normal, pulse */
  85% {
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 0 2px #76ff03);
  }

  92% {
    transform: translateX(0) scale(1.12);
    filter: drop-shadow(0 0 5px #76ff03);
  }

  100% {
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 0 2px #76ff03);
  }
}

/* Pinceau : wiggle (rotate) + swap translateX(-24px) entre 35%-72% */
@keyframes poireArtisteBrushSwap {
  /* Phase 1 : position normale, wiggle */
  0% {
    transform: translateX(0) rotate(0deg) scale(1);
  }

  8% {
    transform: translateX(0) rotate(12deg) scale(1.05);
  }

  16% {
    transform: translateX(0) rotate(-8deg) scale(1);
  }

  25% {
    transform: translateX(0) rotate(10deg) scale(1.05);
  }

  33% {
    transform: translateX(0) rotate(0deg) scale(1);
  }

  /* Phase 2 : SWAP ? glisse � gauche */
  38% {
    transform: translateX(0) rotate(15deg) scale(1.1);
  }

  43% {
    transform: translateX(-24px) rotate(-5deg) scale(1.05);
  }

  /* Phase 3 : position swapp�e, continue wiggle */
  50% {
    transform: translateX(-24px) rotate(0deg) scale(1);
  }

  58% {
    transform: translateX(-24px) rotate(-12deg) scale(1.05);
  }

  65% {
    transform: translateX(-24px) rotate(8deg) scale(1);
  }

  /* Phase 4 : SWAP RETOUR ? glisse � droite */
  72% {
    transform: translateX(-24px) rotate(-10deg) scale(1.1);
  }

  78% {
    transform: translateX(0) rotate(5deg) scale(1.05);
  }

  /* Phase 5 : retour normal, wiggle */
  85% {
    transform: translateX(0) rotate(0deg) scale(1);
  }

  92% {
    transform: translateX(0) rotate(-8deg) scale(1.05);
  }

  100% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

/* =======================================
   🔱 LE DIEU DÉCHU — TRIPLE CROWN
   Violeur du Jour + Poire + Artiste
   Événement mythique. L'entité suprême.
   ======================================= */

/* --- Post container : Bordure tri-couleur animée + glow triple + scan holographique --- */
.post.is-dieu-dechu {
  border-left: 4px solid #ffd700 !important;
  position: relative;
  overflow: hidden;
  animation:
    dieuDechuPostPulse 4s ease-in-out infinite,
    dieuDechuBorderCycle 3s linear infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  z-index: 1;
}

/* Cycle de couleur de la bordure gauche */
@keyframes dieuDechuBorderCycle {
  0%,
  100% {
    border-left-color: #ffd700;
  }

  33% {
    border-left-color: #76ff03;
  }

  66% {
    border-left-color: #e056fd;
  }
}

/* Glow triple qui pulse — or/vert/violet */
@keyframes dieuDechuPostPulse {
  0%,
  100% {
    box-shadow:
      inset 4px 0 20px -6px rgba(255, 215, 0, 0.2),
      0 0 12px -3px rgba(255, 215, 0, 0.08);
  }

  33% {
    box-shadow:
      inset 4px 0 20px -6px rgba(118, 255, 3, 0.2),
      0 0 12px -3px rgba(118, 255, 3, 0.08);
  }

  66% {
    box-shadow:
      inset 4px 0 20px -6px rgba(224, 86, 253, 0.2),
      0 0 12px -3px rgba(224, 86, 253, 0.08);
  }
}

/* Lueur triple au hover + micro-lift */
.post.is-dieu-dechu:hover {
  transform: translateX(3px);
  box-shadow:
    inset 0 0 30px rgba(255, 215, 0, 0.06),
    inset 0 0 30px rgba(118, 255, 3, 0.06),
    inset 0 0 30px rgba(224, 86, 253, 0.06),
    0 2px 20px -4px rgba(255, 215, 0, 0.12),
    0 2px 15px -4px rgba(118, 255, 3, 0.08),
    0 2px 15px -4px rgba(224, 86, 253, 0.08) !important;
}

/* Scan holographique — sweep diagonal tri-couleur */
.post.is-dieu-dechu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255, 215, 0, 0.05) 35%,
    rgba(118, 255, 3, 0.06) 45%,
    rgba(224, 86, 253, 0.07) 50%,
    rgba(118, 255, 3, 0.06) 55%,
    rgba(255, 215, 0, 0.05) 65%,
    transparent 75%
  );
  animation: dieuDechuScanPost 5s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes dieuDechuScanPost {
  0% {
    left: -50%;
  }

  40% {
    left: 130%;
  }

  100% {
    left: 130%;
  }
}

/* Contenu au-dessus du scan */
.post.is-dieu-dechu > *:not(.post-hover-pill) {
  position: relative;
  z-index: 1;
}

/* --- Username : Dégradé tri-couleur animé + glitch périodique --- */
.post.is-dieu-dechu .author-username {
  background: linear-gradient(
    270deg,
    #ffd700,
    #ff8c00,
    #76ff03,
    #e056fd,
    #00d2d3,
    #ffd700
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4))
    drop-shadow(0 0 5px rgba(118, 255, 3, 0.25))
    drop-shadow(0 0 5px rgba(224, 86, 253, 0.25));
  animation:
    dieuDechuPostNameFlow 3s ease infinite,
    dieuDechuPostGlitch 8s ease-in-out infinite;
  display: inline-block;
  position: relative !important;
  overflow: visible !important;
}

@keyframes dieuDechuPostNameFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

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

@keyframes dieuDechuPostGlitch {
  0%,
  86%,
  100% {
    transform: translateX(0) skewX(0);
  }

  88% {
    transform: translateX(-2px) skewX(-3deg);
    filter: hue-rotate(60deg) drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
  }

  90% {
    transform: translateX(2px) skewX(2deg);
    filter: hue-rotate(-60deg) drop-shadow(0 0 5px rgba(118, 255, 3, 0.4));
  }

  92% {
    transform: translateX(-1px) skewX(-1deg);
    filter: hue-rotate(30deg) drop-shadow(0 0 5px rgba(224, 86, 253, 0.4));
  }

  94% {
    transform: translateX(0) skewX(0);
    filter: none;
  }
}

/* Overflow visible pour pseudo-éléments */
.post.is-dieu-dechu .author-name {
  overflow: visible !important;
  max-width: none !important;
  text-overflow: clip !important;
}

/* Mini satellites autour du pseudo — 🔱 trident qui orbite */
.post.is-dieu-dechu .author-username::before {
  content: "🔱";
  position: absolute;
  font-size: 14px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  margin-left: -8px;
  animation: dieuDechuUsernameOrbit 5s linear infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes dieuDechuUsernameOrbit {
  from {
    transform: rotate(0deg) translateX(42px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(42px) rotate(-360deg);
  }
}

/* Badge "DIEU DÉCHU" après le level badge */
.post.is-dieu-dechu .level-badge::after {
  content: "DIEU DÉCHU";
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ffd700, #76ff03, #e056fd);
  background-size: 300% 100%;
  color: #1d1d1f;
  border-radius: 3px;
  animation:
    dieuDechuLevelBadge 2s ease-in-out infinite,
    dieuDechuLevelGlitch 6s ease-in-out infinite;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}

@keyframes dieuDechuLevelBadge {
  0%,
  100% {
    background-position: 0% 0;
    opacity: 1;
  }

  50% {
    background-position: 100% 0;
    opacity: 0.9;
  }
}

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

  93% {
    transform: scale(1.08) skewX(-2deg);
  }

  96% {
    transform: scale(0.95) skewX(2deg);
  }
}

/* --- Watermark : invasion de 👑🍐🎨⚡🔥💀 --- */
.dieu-dechu-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.dieu-dechu-watermark > span {
  position: absolute;
  opacity: 0.05;
  animation: dieuDechuWmFloat 5s ease-in-out infinite;
}

@keyframes dieuDechuWmFloat {
  0%,
  100% {
    opacity: 0.04;
    transform: scale(1) rotate(0deg) translateY(0);
  }

  25% {
    opacity: 0.08;
    transform: scale(1.1) rotate(3deg) translateY(-2px);
  }

  50% {
    opacity: 0.06;
    transform: scale(1.05) rotate(-2deg) translateY(1px);
  }

  75% {
    opacity: 0.09;
    transform: scale(1.12) rotate(4deg) translateY(-3px);
  }
}

/* --- Badge fusionné : Triple Crown — 👑 + 🍐 + 🎨 --- */
.badge-dieu-dechu {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 24px;
  vertical-align: text-bottom;
  position: relative;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.35));
  animation: dieuDechuBadgeGoldPulse 2s ease-in-out infinite;
}

@keyframes dieuDechuBadgeGoldPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.3));
  }

  50% {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
  }
}

/* Couronne (gauche) */
.badge-dieu-dechu::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("/images/poire.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: dieuDechuBadgePear 3s ease-in-out infinite;
}

/* Pinceau (droite) */
.badge-dieu-dechu::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("https://risibank.fr/cache/medias/0/42/4217/421767/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: dieuDechuBadgeBrush 3s ease-in-out infinite;
}

/* Poire pulse */
@keyframes dieuDechuBadgePear {
  0%,
  100% {
    transform: scale(1);
  }

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

/* Pinceau wiggle */
@keyframes dieuDechuBadgeBrush {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  33% {
    transform: rotate(8deg) scale(1.05);
  }

  66% {
    transform: rotate(-5deg) scale(1.05);
  }
}

/* Tampon Risitas en bas à droite de l'avatar (même que top-violator) */
.post.is-dieu-dechu .author-avatar-small {
  position: relative;
}

.post.is-dieu-dechu .author-avatar-small::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  background-image: url("https://risibank.fr/cache/medias/0/42/4230/423086/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-12deg);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  z-index: 10;
  pointer-events: none;
  animation: dieuDechuStampGlow 2s ease-in-out infinite;
}

@keyframes dieuDechuStampGlow {
  0%,
  100% {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
  }

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

/* Filigrane Risitas géant en fond du post — très subtil */
.post.is-dieu-dechu::after {
  content: "";
  position: absolute;
  bottom: -25px;
  right: -25px;
  width: 140px;
  height: 140px;
  background-image: url("https://risibank.fr/cache/medias/0/0/59/5989/full.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.04;
  transform: rotate(-10deg);
  z-index: 0;
  pointer-events: none;
  animation: dieuDechuWatermarkPulse 4s ease-in-out infinite;
}

@keyframes dieuDechuWatermarkPulse {
  0%,
  100% {
    opacity: 0.03;
    transform: rotate(-10deg) scale(1);
  }

  50% {
    opacity: 0.06;
    transform: rotate(-8deg) scale(1.05);
  }
}

/* --- Page de Vote --- */
.vote-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.vote-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 25px;
  text-align: center;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

.vote-card:hover {
  transform: translateY(-2px);
}

.vote-card.artist {
  border-top: 4px solid #e056fd;
}

.vote-card.poire {
  border-top: 4px solid #76ff03;
}

.vote-icon-lg {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 15px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
}

.leaderboard-list {
  text-align: left;
  margin-top: 20px;
  background: var(--bg-surface-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9em;
}

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

.leaderboard-item.rank-1 {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08), transparent);
  font-weight: bold;
}

.vote-input-group {
  display: flex;
  gap: 8px;
  margin: 15px 0;
}

.vote-input-group input {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
}

/* Toast Notification Pro */
#vote-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-surface);
  color: var(--text-main);
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: var(--shadow-floating);
  z-index: 10000;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
}

@media (max-width: 768px) {
  .vote-container {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   MOBILE TOPIC LIST — Single Source of Truth (2026 Pro)
   Touch-friendly with circle avatars, large titles
   =================================== */
@media (max-width: 768px) {
  /* Topic card - Touch-friendly padding (min 44px touch targets) */
  .topic-card {
    padding: 8px 12px;
    padding-right: 42px;
    margin-bottom: 4px;
    border-radius: var(--radius-md, 8px);
  }

  /* Topic card body - Compact gap */
  .topic-card-body {
    gap: 3px;
  }

  /* Topic card header - Breathing room */
  .topic-card-header {
    gap: 8px;
  }

  /* Avatar - CIRCLE, large enough to be recognizable */
  .topic-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-width: 2px;
  }

  /* Title - LARGE & READABLE (14px min) */
  .topic-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* Pin badge - Compact but visible */
  .topic-pin-badge {
    font-size: 10px;
  }

  /* Footer - Well-spaced */
  .topic-card-footer {
    gap: 6px;
    margin-top: 2px;
  }

  /* Author name - Readable */
  .author-name {
    font-size: 11px;
    max-width: 120px;
  }

  /* Date - Visible */
  .topic-date {
    font-size: 10px;
    opacity: 0.7;
  }

  /* Reply count badge - Touch-friendly */
  .reply-count {
    font-size: 10px;
    padding: 2px 6px;
    min-width: 24px;
  }

  /* Participated indicator */
  .topic-participated {
    font-size: 8px;
  }

  /* Sidebar topics container */
  #sidebar-topics {
    padding: 6px;
  }

  /* Sidebar action bar - Touch-optimized */
  .sidebar-action-bar {
    padding: 6px 8px;
    gap: 6px;
    margin-bottom: 6px;
    min-width: 0;
    min-height: 0;
  }

  .btn-create-topic {
    height: 34px;
    font-size: 12px;
  }

  .sidebar-search-btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
    min-width: 0;
    min-height: 0;
  }
}

/* ==================================================================
   MINIMAL INLINE EDITOR - Discord/Slack style in-place editing
   ================================================================== */

.minimal-edit-zone {
  width: 100%;
  min-height: 60px;
  padding: 12px 14px;
  border: 2px solid var(--accent-primary, #3b82f6);
  border-radius: 8px;
  background: var(--bg-surface-alt, rgba(30, 30, 30, 0.6));
  color: var(--text-main, #e8e8e8);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.minimal-edit-zone:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.minimal-edit-zone:empty::before {
  content: attr(placeholder);
  color: var(--text-muted, #6b7280);
  pointer-events: none;
}

/* Text formatting inside edit zone */
.minimal-edit-zone b,
.minimal-edit-zone strong {
  font-weight: 700;
}

.minimal-edit-zone i,
.minimal-edit-zone em {
  font-style: italic;
}

.minimal-edit-zone u {
  text-decoration: underline;
}

.minimal-edit-zone s,
.minimal-edit-zone strike {
  text-decoration: line-through;
  opacity: 0.7;
}

.minimal-edit-zone blockquote {
  border-left: 3px solid var(--accent-primary, #3b82f6);
  padding-left: 10px;
  margin: 8px 0;
  color: var(--text-muted, #a0a0a0);
}

.minimal-edit-zone a {
  color: var(--accent-primary, #3b82f6);
  text-decoration: underline;
}

.minimal-edit-zone img {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-xs);
}

.minimal-edit-zone img.sticker {
  max-width: 120px;
  max-height: 120px;
  vertical-align: middle;
}

/* Action bar */
.minimal-edit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  gap: 12px;
}

.minimal-edit-bar .edit-hint {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.minimal-edit-bar .edit-hint kbd {
  display: inline-block;
  padding: 2px 5px;
  font-size: 10px;
  font-family: "Inter", monospace;
  font-weight: 600;
  background: var(--bg-surface, #2a2f3a);
  border: 1px solid var(--border-color, #3a3f4a);
  border-radius: var(--radius-xs);
  color: var(--text-muted, #a0a0a0);
}

.minimal-edit-bar .edit-buttons {
  display: flex;
  gap: 8px;
}

/* Cancel button */
.minimal-edit-bar .btn-cancel {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border-color, #3a3f4a);
  border-radius: var(--radius-sm);
  color: var(--text-muted, #a0a0a0);
  cursor: pointer;
  transition: all 0.15s;
}

.minimal-edit-bar .btn-cancel:hover {
  background: var(--bg-surface, #2a2f3a);
  border-color: var(--text-muted, #6b7280);
  color: var(--text-main, #e8e8e8);
}

.minimal-edit-bar .btn-cancel:active {
  transform: scale(0.97);
}

/* Save button */
.minimal-edit-bar .btn-save {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-primary, #3b82f6);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  cursor: pointer;
  transition: all 0.15s;
}

.minimal-edit-bar .btn-save:hover {
  background: #0a52cc;
  box-shadow: 0 2px 8px rgba(13, 102, 255, 0.3);
}

.minimal-edit-bar .btn-save:active {
  transform: scale(0.97);
}

.minimal-edit-bar .btn-save:disabled,
.minimal-edit-bar .btn-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Light theme adjustments — Embossage céramique cohérent */
[data-theme="light-ether"] .minimal-edit-zone {
  background: var(--bg-surface-alt);
  border-color: var(--input-border);
  box-shadow:
    inset 0 2px 4px rgba(26, 36, 27, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  transition:
    border-color var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    background var(--duration-fast) ease;
}

[data-theme="light-ether"] .minimal-edit-zone:focus {
  background: #ffffff;
  border-color: var(--accent-primary);
  box-shadow:
    inset 0 1px 2px rgba(26, 36, 27, 0.03),
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(168, 197, 69, 0.5);
}

[data-theme="light-ether"] .minimal-edit-bar .edit-hint kbd {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
}

/* ---- Inline Edit Formatting Toolbar ---- */
.inline-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  margin-bottom: 6px;
  background: var(--bg-surface, #2a2f3a);
  border: 1px solid var(--border-color, #3a3f4a);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.inline-edit-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-muted, #a0a0a0);
  cursor: pointer;
  font-size: 13px;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

.inline-edit-toolbar button:hover {
  background: var(--bg-surface-alt, rgba(255, 255, 255, 0.08));
  color: var(--text-main, #e8e8e8);
}

.inline-edit-toolbar button:active {
  transform: scale(0.92);
}

.inline-edit-toolbar .toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border-color, #3a3f4a);
  margin: 0 4px;
  flex-shrink: 0;
}

/* AUDIT v5: Removed duplicate light-ether .inline-edit-toolbar override.
   Canonical version is in the inline-edit section (L.14309). */

/* ---- Edit Mode Transition (enter/exit) ---- */
.post-content.edit-entering .minimal-edit-zone,
.post-content.edit-entering .inline-edit-toolbar,
.post-content.edit-entering .minimal-edit-bar {
  animation: editSlideIn 0.2s ease-out forwards;
}

@keyframes editSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

/* ---- Post Updated Flash Animation ---- */
@keyframes postFlashUpdated {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 193, 7, 0);
    background-color: transparent;
  }

  15% {
    box-shadow: inset 0 0 0 2px rgba(255, 193, 7, 0.5);
    background-color: rgba(255, 193, 7, 0.06);
  }

  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 193, 7, 0);
    background-color: transparent;
  }
}

.post.post-flash-updated {
  animation: postFlashUpdated 1.8s ease-out forwards;
}

/* --- Staff moderation flash (red tint) --- */
@keyframes postFlashStaffEdit {
  0% {
    box-shadow: inset 0 0 0 0 rgba(239, 83, 80, 0);
    background-color: transparent;
  }

  15% {
    box-shadow: inset 0 0 0 2px rgba(239, 83, 80, 0.45);
    background-color: rgba(239, 83, 80, 0.05);
  }

  100% {
    box-shadow: inset 0 0 0 0 rgba(239, 83, 80, 0);
    background-color: transparent;
  }
}

.post.post-flash-staff-edit {
  animation: postFlashStaffEdit 1.8s ease-out forwards;
}

/* ---- Editing Guard Indicator (shown when someone else edits this post while you're reading) ---- */
.inline-edit-guard {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--accent-warning, #ffc107);
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.2);
  border-radius: var(--radius-xs);
  animation: editSlideIn 0.2s ease-out;
}

.inline-edit-guard i {
  font-size: 12px;
  opacity: 0.9;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .minimal-edit-zone {
    min-height: 80px;
    padding: 14px;
    font-size: 15px;
  }

  .minimal-edit-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .minimal-edit-bar .edit-hint {
    display: none;
    /* Hide hints on mobile */
  }

  .minimal-edit-bar .edit-buttons {
    justify-content: flex-end;
  }

  .minimal-edit-bar .btn-cancel,
  .minimal-edit-bar .btn-save {
    padding: 10px 16px;
    font-size: 14px;
  }

  .inline-edit-toolbar {
    gap: 1px;
    padding: 3px 4px;
  }

  .inline-edit-toolbar button {
    width: 34px;
    height: 32px;
    font-size: 14px;
  }
}

/* ==================================================================
   PAGE CONTAINER - Full width layout for menu pages
   (Clans, Stats, Logs, Elections, Messagerie, etc.)
   ================================================================== */
.page-container {
  width: 100%;
  max-width: none;
  padding: 20px 24px;
  margin: 0;
  box-sizing: border-box;
}

/* For pages that still need some max-width constraint (forms, etc.) */
.page-container.narrow {
  max-width: 800px;
  margin: 20px auto;
}

.page-container.medium {
  max-width: 1000px;
  margin: 20px auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .page-container {
    padding: 15px 12px;
  }

  .page-container.narrow,
  .page-container.medium {
    margin: 10px auto;
    padding: 15px;
  }
}

/* Election styles are fully inline in election.ejs */

/* Election styles are fully inline in election.ejs */

/* -----------------------------------------------
   ??? SOFT DELETE � Staff visibility (2026)
   Posts supprim�s visibles uniquement par le staff
   ----------------------------------------------- */

/* Post marqu� comme supprim� (soft-delete) */
.post.post-soft-deleted {
  opacity: 0.55;
  border-left: 3px solid var(--accent-danger) !important;
  position: relative;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(239, 83, 80, 0.03) 10px,
    rgba(239, 83, 80, 0.03) 20px
  ) !important;
  transition: opacity 0.3s ease;
}

.post.post-soft-deleted:hover {
  opacity: 0.85;
}

/* Badge de suppression en haut du post */
.post-deleted-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-danger);
  background: rgba(239, 83, 80, 0.08);
  border: 1px solid rgba(239, 83, 80, 0.2);
  border-radius: var(--radius-xs);
  cursor: help;
  user-select: none;
}

.post-deleted-badge i {
  font-size: 10px;
  opacity: 0.8;
}

/* Barre du post-content pour contenu supprim� */
.post.post-soft-deleted .post-content {
  text-decoration: line-through;
  text-decoration-color: rgba(239, 83, 80, 0.3);
}

/* Th�me clair */
[data-theme="light-ether"] .post.post-soft-deleted {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(239, 83, 80, 0.04) 10px,
    rgba(239, 83, 80, 0.04) 20px
  ) !important;
}

[data-theme="light-ether"] .post-deleted-badge {
  background: rgba(239, 83, 80, 0.06);
  border-color: rgba(239, 83, 80, 0.15);
}

/* ===================================
   AUTH FORM COMPONENTS — v2.0 (Feb 2026)
   GPU-only animations, zero filter:blur
   Pure CSS stagger — no JS dependency
   =================================== */

/* ── Keyframes (GPU-composited: opacity + transform ONLY) ── */
@keyframes authCardEntry {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.96);
  }

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

@keyframes authFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

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

  33% {
    transform: translate(25px, -35px) scale(1.05);
  }

  66% {
    transform: translate(-15px, -50px) scale(0.97);
  }
}

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

  40% {
    transform: translate(-30px, 20px) scale(1.07);
  }

  80% {
    transform: translate(20px, -25px) scale(0.95);
  }
}

/* Single-shot shimmer — runs once then stays invisible */
@keyframes authShimmerOnce {
  0% {
    opacity: 0;
    transform: translateX(-120%) rotate(15deg);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(220%) rotate(15deg);
  }
}

/* Single-shot pulse on logo */
@keyframes authLogoPulseOnce {
  0% {
    transform: scale(0.85);
    opacity: 0.5;
  }

  60% {
    transform: scale(1.35);
    opacity: 0.1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes authSubmitSuccess {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotate(0);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes authErrorShake {
  0%,
  100% {
    transform: translateX(0);
  }

  15%,
  55% {
    transform: translateX(-4px);
  }

  35%,
  75% {
    transform: translateX(4px);
  }
}

/* ── Auth Page Container ── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--bg-body);
  position: relative;
  /* NO overflow:hidden — mobile keyboard must not clip content */
}

/* ── Ambient Background — 2 orbs only ── */
.auth-bg-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* clip orbs here, not on auth-page */
  z-index: 0;
}

.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.auth-orb-1 {
  width: 280px;
  height: 280px;
  background: var(--accent-primary);
  opacity: 0.25;
  top: -60px;
  right: -40px;
  animation: authOrbDrift1 20s ease-in-out infinite;
}

.auth-orb-2 {
  width: 220px;
  height: 220px;
  background: var(--accent-secondary);
  opacity: 0.2;
  bottom: -80px;
  left: -60px;
  animation: authOrbDrift2 24s ease-in-out infinite;
  animation-delay: -8s;
}

/* ── Auth Card ── */
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--border-color);
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: authCardEntry 0.65s var(--ease-out-expo) both;
}

/* Card shimmer — pseudo-element, single pass, no DOM node */
.auth-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 40%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  animation: authShimmerOnce 1.2s var(--ease-out-expo) 0.8s both;
  animation-iteration-count: 1;
}
/* ── Pure CSS Staggered Entry ──
   animation-fill-mode: both ensures:
   - Before delay: element in "from" state (invisible)
   - After animation: element in "to" state (visible)
   No JS needed for visibility. Zero risk of invisible content. */
.auth-anim-item {
  animation: authFadeInUp 0.5s var(--ease-out-expo) both;
  animation-delay: calc(0.15s + var(--anim-order, 0) * 0.08s);
}

/* ── Brand / Logo ── */
.auth-brand {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.auth-logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-md);
}

/* Single-shot pulse behind logo — pseudo-element, no DOM node */
.auth-logo-wrap::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  z-index: 0;
  animation: authLogoPulseOnce 0.9s var(--ease-out-expo) 0.4s both;
  animation-iteration-count: 1;
}

.auth-brand img {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--ease-out-expo);
}

.auth-brand img:hover {
  transform: scale(1.04);
}

.auth-brand h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ── Form Groups ── */
.auth-form-group {
  margin-bottom: var(--space-lg);
}

.auth-form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-main);
  margin-bottom: var(--space-xs);
}

.auth-label-icon {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  transition:
    color 0.25s,
    opacity 0.25s;
}

.auth-form-group:focus-within .auth-label-icon {
  color: var(--accent-primary);
  opacity: 1;
}

/* ── Input Wrapper ── */
.auth-input-wrap {
  position: relative;
}

.auth-form-group input {
  width: 100%;
  padding: 13px var(--space-md);
  background: var(--input-bg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--text-main);
  transition:
    border-color 0.25s var(--ease-out-expo),
    box-shadow 0.25s var(--ease-out-expo),
    background 0.25s ease;
  box-sizing: border-box;
  font-family: var(--font-family-base);
}

.auth-form-group input::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.25s;
}

.auth-form-group input:focus::placeholder {
  opacity: 0.3;
}

.auth-form-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  background: var(--bg-surface);
}

/* Focus line — gradient bar beneath input on focus */
.auth-input-focus-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--accent-primary),
    var(--accent-secondary)
  );
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition:
    left 0.3s var(--ease-out-expo),
    right 0.3s var(--ease-out-expo);
  pointer-events: none;
}

.auth-input-wrap.focused .auth-input-focus-line {
  left: 0;
  right: 0;
}

/* ── Password Toggle ── */
.auth-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  transition:
    color 0.2s,
    background 0.2s,
    transform 0.2s var(--ease-spring);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-pw-toggle:hover {
  color: var(--accent-primary);
  background: var(--accent-highlight);
}

.auth-pw-toggle.active {
  color: var(--accent-primary);
}

.auth-pw-toggle:active {
  transform: translateY(-50%) scale(0.85);
}

/* Password input: extra padding for eye toggle.
   :has() — supported in all browsers since 2023 */
.auth-input-wrap:has(.auth-pw-toggle) input {
  padding-right: 42px;
}

/* ── Error Alert ── */
.auth-error {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--input-error-bg);
  color: var(--input-error-text);
  border: 1px solid var(--input-error-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
  animation: authErrorShake 0.45s ease-out;
}

.auth-error i {
  flex-shrink: 0;
  font-size: 14px;
}

/* ── Submit Button ── */
.auth-submit {
  width: 100%;
  padding: 14px 16px;
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background 0.25s var(--ease-out-expo),
    transform 0.15s var(--ease-spring),
    box-shadow 0.25s var(--ease-out-expo);
  font-family: var(--font-family-base);
}

/* Glossy overlay on hover — subtle, not "Dribbble template" */
.auth-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.auth-submit:hover {
  background: var(--accent-secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.auth-submit:hover::before {
  opacity: 1;
}

.auth-submit:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
  transition-duration: 50ms;
}

/* ── Submit Loading / Success States ── */
.auth-submit-text {
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.auth-submit-loader,
.auth-submit-success {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
}

.auth-submit.loading .auth-submit-text {
  opacity: 0;
  transform: translateY(-8px);
}

.auth-submit.loading .auth-submit-loader {
  display: flex;
}

.auth-submit.loading {
  pointer-events: none;
  opacity: 0.85;
}

.auth-submit.success .auth-submit-text {
  opacity: 0;
}

.auth-submit.success .auth-submit-success {
  display: flex;
  animation: authSubmitSuccess 0.4s var(--ease-spring) forwards;
}

.auth-submit.success {
  background: var(--accent-success);
}

/* ── Light-Ether Submit — Poire céramique ── */
[data-theme="light-ether"] .auth-submit {
  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.12),
    var(--topic-btn-shadow-light, 0 3px 8px rgba(168, 197, 69, 0.25));
}

[data-theme="light-ether"] .auth-submit:hover {
  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));
}

[data-theme="light-ether"] .auth-submit:active {
  transform: scale(0.97);
  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);
}

/* ── Deep-Ether Submit — Azure glow ── */
[data-theme="deep-ether"] .auth-submit {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow:
    0 0 20px rgba(13, 102, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="deep-ether"] .auth-submit:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  box-shadow:
    0 0 30px rgba(13, 102, 255, 0.45),
    0 8px 24px rgba(59, 130, 246, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Footer ── */
.auth-footer {
  text-align: center;
  margin-top: var(--space-lg);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.auth-footer a {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: var(--font-semibold);
  position: relative;
  transition: color 0.2s;
}

.auth-footer a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: width 0.3s var(--ease-out-expo);
}

.auth-footer a:hover::after {
  width: 100%;
}

[data-theme="light-ether"] .auth-footer a {
  color: var(--text-link);
}

[data-theme="light-ether"] .auth-footer a:hover {
  color: var(--text-link-hover);
}

.auth-footer a:hover {
  text-decoration: none;
}

/* ── Contact Hint ── */
.auth-contact-hint {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-contact-hint i {
  font-size: 11px;
}

.auth-contact-hint a {
  font-weight: var(--font-normal, 400);
  opacity: 0.9;
}

/* ── Divider ── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* ── Auth Links (register page) ── */
.auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

.auth-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-links a:hover {
  color: var(--accent-primary);
}

/* ── Forgot Password Link ── */
.auth-forgot-link {
  display: block;
  text-align: right;
  margin-top: 8px;
  font-size: 0.82em;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.7;
  transition:
    color 0.2s,
    opacity 0.2s;
}

.auth-forgot-link:hover {
  color: var(--text-link);
  opacity: 1;
}

/* ── Hint Text ── */
.auth-hint {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-sm);
  opacity: 0.5;
}

/* ── Subtitle ── */
.auth-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 6px 0 0;
}

/* ── Field Hint (register page) ── */
.auth-field-hint {
  display: block;
  font-weight: normal;
  margin-top: 4px;
  opacity: 0.7;
  font-size: 11px;
}

/* ══════════════════════════════════════
   THEME OVERRIDES — Deep Ether
   ══════════════════════════════════════ */
[data-theme="deep-ether"] .auth-card {
  background: rgba(14, 21, 40, 0.85); /* Coherent cosmic blue glass */
  border-color: rgba(99, 140, 230, 0.15); /* Match deep-ether borders */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 20px 50px rgba(4, 8, 30, 0.5),
    inset 0 1px 0 rgba(99, 140, 230, 0.08); /* Match deep-ether glow */
}

/* Shimmer in azure */
[data-theme="deep-ether"] .auth-card::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 140, 230, 0.03) 40%,
    rgba(99, 140, 230, 0.08) 50%,
    rgba(99, 140, 230, 0.03) 60%,
    transparent 100%
  );
}

[data-theme="deep-ether"] .auth-orb-1 {
  background: var(--primary-azure, #3b82f6);
  opacity: 0.12;
}

[data-theme="deep-ether"] .auth-orb-2 {
  background: var(--accent-secondary, #5b9bff);
  opacity: 0.1;
}

[data-theme="deep-ether"] .auth-logo-wrap::after {
  background: rgba(59, 130, 246, 0.35); /* Match accent-primary */
}

[data-theme="deep-ether"] .auth-input-focus-line {
  background: linear-gradient(90deg, var(--primary-azure, #3b82f6), var(--accent-secondary, #5b9bff));
}

/* ══════════════════════════════════════
   THEME OVERRIDES — Light Ether
   ══════════════════════════════════════ */
[data-theme="light-ether"] .auth-card {
  box-shadow:
    0 1px 2px rgba(26, 36, 27, 0.04),
    0 4px 12px rgba(26, 36, 27, 0.06),
    0 12px 32px rgba(168, 197, 69, 0.08);
}

[data-theme="light-ether"] .auth-orb-1 {
  background: #a8c545;
  opacity: 0.18;
}

[data-theme="light-ether"] .auth-orb-2 {
  background: #8eaf35;
  opacity: 0.12;
}

[data-theme="light-ether"] .auth-logo-wrap::after {
  background: rgba(168, 197, 69, 0.25);
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 480px) {
  .auth-card {
    padding: 28px 20px;
    margin: var(--space-sm);
    border-radius: var(--radius-md);
  }

  .auth-brand img {
    width: 90px;
  }

  .auth-orb {
    filter: blur(60px);
  }

  .auth-orb-1 {
    width: 180px;
    height: 180px;
  }

  .auth-orb-2 {
    width: 140px;
    height: 140px;
  }
}

/* ══════════════════════════════════════
   ACCESSIBILITY — Reduced Motion
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .auth-card {
    animation: none;
    opacity: 1;
  }

  .auth-anim-item {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .auth-card::after {
    animation: none;
    display: none;
  }

  .auth-logo-wrap::after {
    animation: none;
    display: none;
  }

  .auth-orb {
    animation: none !important;
  }

  .auth-error {
    animation: none;
  }

  .auth-pw-strength-fill {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   PASSWORD STRENGTH INDICATOR — Auth v2.1
   ═══════════════════════════════════════════════════ */
.auth-pw-strength {
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.auth-pw-strength.visible {
  opacity: 1;
  transform: translateY(0);
}

.auth-pw-strength-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

[data-theme="light-ether"] .auth-pw-strength-bar {
  background: rgba(0, 0, 0, 0.06);
}

.auth-pw-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.35s var(--ease-out-expo),
              background 0.35s ease;
}

/* Strength levels → color mapping */
.auth-pw-strength-fill[data-str="0"] {
  width: 0%;
  background: transparent;
}

.auth-pw-strength-fill[data-str="1"] {
  width: 25%;
  background: #ef4444;
}

.auth-pw-strength-fill[data-str="2"] {
  width: 50%;
  background: #f59e0b;
}

.auth-pw-strength-fill[data-str="3"] {
  width: 75%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.auth-pw-strength-fill[data-str="4"] {
  width: 100%;
  background: linear-gradient(90deg, #22c55e, #059669);
}

.auth-pw-strength-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.65;
}

.auth-pw-strength-label .str-text {
  transition: color 0.25s ease;
}

.auth-pw-strength-label .str-text[data-str="1"] { color: #ef4444; }
.auth-pw-strength-label .str-text[data-str="2"] { color: #f59e0b; }
.auth-pw-strength-label .str-text[data-str="3"] { color: #22c55e; }
.auth-pw-strength-label .str-text[data-str="4"] { color: #059669; }


/* ===================================
   ROLE BADGE COMPONENT
   For admin/mod/user role display
   =================================== */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.4;
}

.role-badge-admin {
  background: var(--role-admin-bg);
  color: var(--role-admin);
}

.role-badge-mod {
  background: var(--role-mod-bg);
  color: var(--role-mod);
}

.role-badge-user {
  background: var(--role-user-bg);
  color: var(--role-user-color);
}

/* ===================================
   NOTIFICATION ICON BADGE
   Overlay icon on notification avatars
   =================================== */
.notif-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.notif-avatar-wrap img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-squircle);
  object-fit: cover;
}

.notif-icon-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-surface);
}

.notif-icon-badge i {
  font-size: 8px;
  color: white;
}

.notif-icon-badge-reply {
  background: var(--accent-primary);
}

.notif-icon-badge-mention {
  background: var(--accent-blue);
}

.notif-icon-badge-quote {
  background: var(--accent-warning);
}

.notif-icon-badge-react {
  background: var(--accent-success);
}

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

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

.notif-body-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.notif-time-icon {
  font-size: 10px;
}

.notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 4px;
}

/* ===================================
   MOBILE BOTTOM NAV - Active State
   =================================== */
.mobile-nav-item.active {
  color: var(--accent-primary);
}

/* ===================================
   SIDEBAR USER PROFILE FOOTER
   Extracted from inline styles
   =================================== */
.sidebar-user-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-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.sidebar-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  min-width: 0;
  min-height: 0;
}

.sidebar-user-meta {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.sidebar-user-name {
  font-weight: var(--font-semibold);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  min-height: 0;
}

.sidebar-user-status {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
  min-height: 0;
}

.sidebar-separator {
  width: 1px;
  height: 30px;
  background: var(--border-color);
  margin: 0 10px;
  min-width: 0;
  min-height: 0;
}

.sidebar-home-link {
  color: var(--text-muted);
  font-size: 18px;
  padding: 5px;
  transition: color 0.2s;
  min-width: 0;
  min-height: 0;
}

.sidebar-home-link:hover {
  color: var(--accent-primary);
  min-width: 0;
  min-height: 0;
}

.sidebar-sentinel {
  text-align: center;
  padding: 0;
  min-height: 1px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
  min-width: 0;
  min-height: 0;
}

.sidebar-user-menu {
  display: none;
  position: absolute;
  bottom: 70px;
  left: 10px;
  right: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  z-index: var(--z-dropdown);
  padding: 5px;
  min-width: 0;
  min-height: 0;
}

.sidebar-auth-buttons {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.sidebar-auth-btn {
  flex: 1;
  text-align: center;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: all 0.2s ease;
  min-width: 0;
  min-height: 0;
}

.sidebar-auth-btn-outline {
  background: transparent;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  min-width: 0;
  min-height: 0;
}

.sidebar-auth-btn-outline:hover {
  background: var(--accent-highlight);
  min-width: 0;
  min-height: 0;
}

.sidebar-auth-btn-fill {
  background: var(--accent-primary);
  color: #fff;
  border: none;
  min-width: 0;
  min-height: 0;
}

.sidebar-auth-btn-fill:hover {
  background: var(--accent-secondary);
  min-width: 0;
  min-height: 0;
}

/* ==================================================================
   🚫 BLOCK SYSTEM — Blocked user post masking (2026)
   Posts by blocked users are hidden behind a spoiler overlay
   ================================================================== */

/* Container for blocked posts — collapsed by default */
.post.post-blocked {
  position: relative;
  overflow: hidden;
}

/* Strict mode: completely hidden — !important guarantees no CSS or JS override */
.post.post-blocked.post-blocked-strict {
  display: none !important;
}

/* When NOT revealed, blur the content and collapse height */
.post.post-blocked:not(.post-blocked-revealed) {
  max-height: 70px;
  min-height: 50px;
}

/* Hide post internals when blocked (not revealed) */
.post.post-blocked:not(.post-blocked-revealed) .post-content,
.post.post-blocked:not(.post-blocked-revealed) .post-reactions,
.post.post-blocked:not(.post-blocked-revealed) .post-poll,
.post.post-blocked:not(.post-blocked-revealed) .post-signature,
.post.post-blocked:not(.post-blocked-revealed) .post-reply-context,
.post.post-blocked:not(.post-blocked-revealed) .post-header-row {
  opacity: 0;
  pointer-events: none;
}

/* Overlay bar */
.post-blocked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: var(--surface-overlay);
  border-left: 3px solid var(--text-muted, #6b7280);
  transition: opacity 0.2s ease;
}

.blocked-overlay-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  user-select: none;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px 12px;
}

.blocked-overlay-content i {
  font-size: 14px;
  opacity: 0.6;
}

.blocked-overlay-content strong {
  color: var(--text-muted, #a0a0a0);
}

.blocked-reveal-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border-color, #3a3f4a);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.blocked-reveal-btn:hover {
  background: var(--bg-surface, #2a2f3a);
  border-color: var(--text-muted, #6b7280);
  color: var(--text-main, #e8e8e8);
}

/* When revealed — show content, hide overlay */
.post.post-blocked.post-blocked-revealed {
  max-height: none;
  min-height: auto;
  opacity: 0.6;
  border-left: 3px solid var(--text-muted, #6b7280);
  transition: opacity 0.3s ease;
}

.post.post-blocked.post-blocked-revealed:hover {
  opacity: 0.85;
}

.post.post-blocked.post-blocked-revealed .post-blocked-overlay {
  display: none;
}

.post.post-blocked.post-blocked-revealed .post-content,
.post.post-blocked.post-blocked-revealed .post-reactions,
.post.post-blocked.post-blocked-revealed .post-poll,
.post.post-blocked.post-blocked-revealed .post-signature,
.post.post-blocked.post-blocked-revealed .post-reply-context,
.post.post-blocked.post-blocked-revealed .post-header-row {
  opacity: 1;
  pointer-events: auto;
}

/* Light theme — AUDIT v5: warm tokens instead of cold grays */
[data-theme="light-ether"] .post-blocked-overlay {
  background: var(--surface-overlay);
}

[data-theme="light-ether"] .blocked-reveal-btn {
  border-color: var(--border-color);
}

[data-theme="light-ether"] .blocked-reveal-btn:hover {
  background: var(--bg-surface-alt);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .blocked-overlay-content {
    font-size: 12px;
    gap: 8px;
  }

  .blocked-reveal-btn {
    font-size: 10px;
    padding: 3px 10px;
  }
}

/* ===================================
   🔘 BUTTON VARIANTS
   Contextual buttons for danger/success/warning/ghost actions
   =================================== */
.btn-danger {
  background: var(--accent-danger);
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-danger:hover {
  filter: brightness(0.9);
  color: white;
}

.btn-success {
  background: var(--accent-success);
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-success:hover {
  filter: brightness(0.9);
  color: white;
}

.btn-warning {
  background: var(--accent-warning);
  color: #1a1a2e;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-warning:hover {
  filter: brightness(0.9);
  color: #1a1a2e;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-ghost:hover {
  background: var(--bg-surface-alt);
}

/* ===================================
   🔔 NOTIFICATION ICON BADGE — Extended Type Classes
   Completes the type mapping for all notification types
   =================================== */
.notif-icon-badge-system {
  background: var(--accent-danger);
}

.notif-icon-badge-clan-join {
  background: var(--accent-success);
}

.notif-icon-badge-clan-accepted {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.notif-icon-badge-clan-rejected {
  background: var(--accent-danger);
}

.notif-icon-badge-password {
  background: var(--accent-warning);
}

/* Border-left color classes for notification items by type */
.notif-item-reply {
  border-left: 3px solid var(--accent-primary);
}

.notif-item-quote {
  border-left: 3px solid var(--accent-warning);
}

.notif-item-mention {
  border-left: 3px solid var(--accent-blue);
}

.notif-item-system {
  border-left: 3px solid var(--accent-danger);
}

.notif-item-clan {
  border-left: 3px solid var(--accent-success);
}

.notif-item-password {
  border-left: 3px solid var(--accent-warning);
}

.notif-item-default {
  border-left: 3px solid var(--accent-primary);
}

/* ===================================
   📱 MOBILE DROPDOWN ITEM
   Replaces inline styles in mobile profile/msg dropdowns
   =================================== */
.mobile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
  cursor: pointer;
  user-select: none;
}

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

.mobile-dropdown-item i {
  color: var(--text-muted);
  width: 20px;
  text-align: center;
}

.mobile-dropdown-item-danger {
  color: var(--accent-danger);
  border-bottom: none;
}

.mobile-dropdown-item-danger i {
  color: var(--accent-danger);
}

.mobile-dropdown-item-primary i {
  color: var(--accent-primary);
}

/* Mobile dropdown footer link */
.mobile-dropdown-footer {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-main);
  border-top: 1px solid var(--border-color);
  text-decoration: none;
  background: var(--bg-surface-alt);
}

.mobile-dropdown-footer:hover {
  background: var(--bg-hover);
}

/* Mobile dropdown empty/loading states */
.mobile-dropdown-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.mobile-dropdown-list {
  max-height: 300px;
  overflow-y: auto;
}

/* AUDIT FIX: Duplicate "INLINE EDITING ENHANCEMENTS v2.0" block removed.
   Canonical definitions are in the MINIMAL INLINE EDITOR section (L.15647+).
   The duplicate had conflicting fallback colors (#6c5ce7 purple instead of theme accent)
   and different property values. */
/* Utility for smooth view switching */
.animate-fade-in {
  animation: fadeInSlide 0.2s ease-out forwards;
}

/* AUDIT FIX: Was duplicate @keyframes fadeIn but with DIFFERENT content.
   Renamed to fadeInSlide to prevent cascade conflict with canonical fadeIn at ~L.7849. */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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

/* ================================================================== */
/* ===  2026 UI REDESIGN (POIRE SPACE) - DEFINITIVE OVERRIDES      === */
/* ================================================================== */

/* --- 1. TOPIC LIST REDESIGN --- */

.topic-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 12px 16px !important;
  gap: 16px !important;
}

.topic-card-avatar-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topic-author-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow: none !important;
}

.topic-card-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.topic-card-header-line {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: 100%;
}

.topic-card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
  line-height: 1.35 !important;
}

.topic-card-meta-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  font-size: 13px;
  font-family: "Montserrat", sans-serif;
  color: var(--text-muted);
  min-width: 0;
}

.topic-stats-inline {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.topic-meta-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-left: 0;
}

.topic-meta-sep {
  font-size: 10px;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .topic-card {
    padding: 10px 12px !important;
    gap: 12px !important;
  }

  .topic-author-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  /* ── YouTube-style compact meta-line on mobile ──
       Layout: [Pseudo] • [Time] • [Replies]
       All items flow as a single tight inline block.
       Desktop layout (flex-start with wider gap) is NOT touched. */

  .topic-card-meta-line {
    justify-content: flex-start !important;
    gap: 5px !important;
    /* Tighter spacing for compact feel */
    font-size: 12px !important;
    min-width: 0;
    /* Allow flex parent to shrink */
  }

  /* Author name: truncate with ellipsis when too long */
  .topic-card-meta-line .author-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    /* Crucial: lets the name shrink in flex */
    max-width: 120px;
    /* Cap pseudo width so time+replies always fit */
    flex-shrink: 1;
  }

  /* Separators + date + replies: never shrink, never wrap */
  .topic-card-meta-line .topic-meta-sep {
    flex-shrink: 0;
    opacity: 0.4;
  }

  .topic-card-meta-line .topic-date {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .topic-card-meta-line .reply-count-inline {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ===================================
   SIDEBAR CONTAINER QUERIES
   Adapts topic cards when sidebar is resized narrow via drag handle.
   Breakpoints: 280px (compact), 220px (ultra-compact)
   =================================== */

@container sidebar (max-width: 280px) {
  .topic-card {
    padding: 8px 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  .topic-author-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .topic-card-title {
    font-size: 13px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  .topic-card-meta-line {
    font-size: 11px;
  }

  /* Hide author name to save space, keep only reply count + date */
  .topic-meta-info .author-name,
  .topic-meta-sep {
    display: none !important;
  }

  .reply-count {
    font-size: 11px !important;
  }
}

@container sidebar (max-width: 220px) {
  .topic-card-title {
    font-size: 12px !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  .topic-card-meta-line {
    display: none !important;
  }

  .topic-author-avatar {
    width: 24px !important;
    height: 24px !important;
  }

  .topic-card {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  /* Compact action bar: hide text, keep icon */
  .btn-create-topic {
    font-size: 0 !important;
    gap: 0 !important;
    min-width: 34px !important;
    padding: 0 !important;
  }

  .btn-create-topic i {
    font-size: 13px !important;
  }

  .sidebar-action-bar {
    gap: 4px !important;
    padding: 6px !important;
    min-width: 0;
    min-height: 0;
  }

  .sidebar-header {
    padding: 6px !important;
    min-width: 0;
    min-height: 0;
  }
}

/* --- 2. MESSAGE REDESIGN (BUBBLE STYLE) --- */
/* Uses CSS variables to respect both dark and light themes */

.post {
  background-color: var(--bg-card, #2b2d31) !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
  /* Bottom padding is 53px to reserve space for the absolutely positioned reaction bar */
  padding: 12px 16px 53px 16px !important;
  transition: none !important;
  transform: none !important;
}

.post:hover {
  background-color: var(--bg-card, #2b2d31) !important;
  box-shadow: none !important;
  transform: none !important;
}

.post-header-row {
  border-bottom: none !important;
  padding: 0 0 8px 0 !important;
  background: transparent !important;
}

/* Default username style — skip special grade posts so their custom colors/effects are preserved */
.post:not(.is-poire):not(.is-artist):not(.is-poire-artiste):not(
    .is-top-violator
  ):not(.is-dieu-dechu):not(.is-moderatrice):not(.is-mod-simp):not(.is-mod-sous)
  .author-username {
  color: var(--text-muted, #a0a5ab) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}

/* For special grades, only override size/weight but leave color/bg/shadow to the grade rules */
.post.is-poire .author-username,
.post.is-artist .author-username,
.post.is-poire-artiste .author-username,
.post.is-dieu-dechu .author-username,
.post.is-moderatrice .author-username,
.post.is-mod-simp .author-username,
.post.is-mod-sous .author-username {
  font-size: 15px !important;
}

.post-content {
  color: var(--text-main, #dbdee1) !important;
  padding: 0 !important;
  font-size: 15px !important;
}

/* Reply context bar integrated into bubble shape */
.post .post-reply-context {
  margin: -12px -16px 10px -16px !important;
  /* Pull flush to parent's padding */
  padding: 8px 16px !important;
  border-radius: 18px 18px 0 0 !important;
  /* Match parent's top radius */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  cursor: pointer;
}

/* When inside a consecutive post (flat top corners) */
.post.consecutive-post .post-reply-context {
  border-radius: 0 !important;
  margin-top: -4px !important;
}

/* ===== UNIFIED BLOCK for consecutive posts ===== */
/* Posts from the same author merge into ONE continuous block            */
/* with a subtle separator line — no gap, no separate border-radius     */

/* First post in a group → no bottom radius, no bottom margin */
.post.has-consecutive-next {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Consecutive posts → no top/bottom radius, zero margin, thin top border */
.post.consecutive-post {
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
}

/* Last consecutive post → restore only the bottom radius */
.post.consecutive-post:not(.has-consecutive-next) {
  border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
  margin-bottom: 12px !important;
  padding-bottom: 16px !important;
}

/* Hide the ---- separator inside consecutive posts (redundant with border-top) */
.post.consecutive-post .post-separator {
  border-top: none !important;
  margin-top: 8px !important;
}

/* Also hide it in the first post of a group (cleaner look within a unified block) */
.post.has-consecutive-next .post-separator {
  border-top: none !important;
  margin-top: 8px !important;
}

/* --- Light themes: séparateur visible sur fond blanc --- */
/* Le rgba(255,255,255,0.06) est blanc-sur-blanc → invisible. On utilise un séparateur Forêt teinté. */
[data-theme="light-ether"] .post.consecutive-post {
  border-top: none !important;
}

:root .post.consecutive-post,
:not([data-theme="dark"]):not([data-theme="deep-ether"]) .post.consecutive-post,
:not([data-theme="grey"]):not([data-theme="deep-ether"]) .post.consecutive-post,
:not([data-theme="custom"]):not([data-theme="deep-ether"])
  .post.consecutive-post {
  border-top: none !important;
}

/* --- Dark themes: restore post elevation (overrides generic box-shadow:none) --- */
/* Without this, posts are flat and indistinguishable from the background */
[data-theme="dark"] .post,
[data-theme="grey"] .post,
[data-theme="custom"] .post {
  box-shadow:
    0 1px 4px rgba(5, 12, 8, 0.3),
    0 4px 12px rgba(5, 12, 8, 0.15) !important;
  border: 1px solid rgba(47, 62, 54, 0.4) !important;
}

[data-theme="dark"] .post:hover,
[data-theme="grey"] .post:hover,
[data-theme="custom"] .post:hover {
  box-shadow:
    0 2px 8px rgba(5, 12, 8, 0.4),
    0 6px 18px rgba(5, 12, 8, 0.2) !important;
}

[data-theme="deep-ether"] .post {
  box-shadow:
    0 1px 4px rgba(4, 5, 12, 0.3),
    0 4px 12px rgba(4, 5, 12, 0.15) !important;
  border: 1px solid rgba(99, 140, 230, 0.08) !important;
}

[data-theme="deep-ether"] .post:hover {
  box-shadow:
    0 2px 8px rgba(4, 5, 12, 0.4),
    0 6px 18px rgba(13, 102, 255, 0.08) !important;
}

/* ================================================================== */
/* === 3. CLAN BADGES (3D GLOSSY SQUIRCLE) - PREMIUM 2026 EDITION === */
/* ================================================================== */

/* 1. Conteneur principal (Libéré de sa découpe pour projeter son ombre) */
.author-clans .clan-badge {
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  clip-path: none !important;
  overflow: visible !important;

  /* Véritable ombre portée qui épouse la forme du masque */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transform: translateZ(0);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.3s ease !important;
  z-index: 1 !important;
}

/* 2. L'image du logo (S'adapte parfaitement aux GIFs) */
.author-clans .clan-badge img:not(.clan-badge-glow) {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  clip-path: none !important;
  z-index: 1 !important;

  /* High-quality downscaling — crisp even at small sizes */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;

  /* Fond solide pour que la lumière rebondisse même sur les zones transparentes d'un GIF */
  background-color: var(--bg-surface-alt, #2b2d31) !important;

  /* Application du masque SVG aux coins doux */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;

  filter: saturate(1.2) contrast(1.1) !important;
  transition: filter 0.3s ease !important;
}

/* 3. Le Dôme de Verre (Le fameux halo "Frutiger Aero") */
.author-clans .clan-badge::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;

  /* Le reflet prend la MÊME forme parfaite que l'image */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;

  /* Architecture de la lumière : Halo + Horizon + Ombre 3D */
  background:
        /* Halo blanc brillant excentré en haut à gauche */
    radial-gradient(
      ellipse 110% 90% at 25% 10%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.2) 40%,
      transparent 45%
    ),
    /* Volume global (sombre en bas à droite) */
    linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 45%,
        rgba(0, 0, 0, 0.5) 100%
      ) !important;

  /* Liseré interne de réfraction pour l'épaisseur du verre */
  box-shadow:
    inset 1px 2px 3px rgba(255, 255, 255, 0.8),
    inset -1px -2px 3px rgba(0, 0, 0, 0.6) !important;

  /* Fusionne optiquement le reflet avec l'image derrière */
  mix-blend-mode: hard-light !important;
}

/* 4. L'Aura de couleur en arrière-plan (le Glow diffuse de la couleur du logo) */
.author-clans .clan-badge .clan-badge-glow {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  object-fit: cover !important;
  clip-path: none !important;

  /* Masqué pour épouser la forme globale avant d'être flouté */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;

  filter: blur(5px) saturate(2.5) brightness(1.4) !important;
  opacity: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

/* 5. Comportement au survol (Lévitation, Illumination) */
.author-clans .clan-badge:hover {
  transform: scale(1.35) translateY(-2px) !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)) !important;
  z-index: 10 !important;
}

.author-clans .clan-badge:hover img:not(.clan-badge-glow) {
  filter: saturate(1.4) contrast(1.15) brightness(1.1) !important;
}

.author-clans .clan-badge:hover .clan-badge-glow {
  opacity: 0.85 !important;
}

/* ================================================================== */
/* === VARIANTE THÉMATIQUE (DEEP ETHER NEON)                      === */
/* ================================================================== */
[data-theme="deep-ether"] .author-clans .clan-badge::after {
  background:
    radial-gradient(
      ellipse 110% 90% at 25% 10%,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0) 45%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 45%,
      rgba(59, 130, 246, 0.25) 100%
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(13, 102, 255, 0.4),
    inset 1px 2px 3px rgba(255, 255, 255, 0.7),
    inset -1px -2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* --- 4. INPUT BAR REFINEMENT --- */

/* ================================================================== */
/* === CLAN BADGES IN USERCARD (Larger variant for modal context)  === */
/* ================================================================== */
#user-card-modal .author-clans .clan-badge {
  width: 42px !important;
  height: 42px !important;
}

#user-card-modal .author-clans .clan-badge img:not(.clan-badge-glow) {
  width: 100% !important;
  height: 100% !important;
}

/* ================================================================== */
/* === CLAN FORM — Premium Create / Edit 2026                       === */
/* ================================================================== */

.clan-create-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88em;
  margin-bottom: 20px;
  transition:
    color 0.2s,
    gap 0.25s;
}

.clan-create-back:hover {
  color: var(--accent-primary);
  gap: 10px;
}

.clan-form-hero {
  text-align: center;
  margin-bottom: 28px;
}

.clan-form-hero h1 {
  font-size: 1.6em;
  font-weight: 700;
  margin: 0 0 6px;
}

.clan-form-hero p {
  color: var(--text-muted);
  font-size: 0.92em;
  margin: 0;
}

.clan-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  padding: 28px 24px;
  max-width: 560px;
  margin: 0 auto;
}

.clan-form-group {
  margin-bottom: 22px;
}

.clan-form-label {
  display: block;
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 6px;
  color: var(--text-main);
}

.clan-form-label .clan-form-optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.88em;
}

.clan-form-label .clan-form-hint {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.82em;
  margin-top: 2px;
}

.clan-form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-base, var(--bg-body));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  color: var(--text-main);
  font-size: 0.95em;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  box-sizing: border-box;
}

.clan-form-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 99, 102, 241), 0.15);
}

.clan-form-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.clan-form-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 14px;
  background: var(--bg-base, var(--bg-body));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  color: var(--text-main);
  font-size: 0.95em;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  box-sizing: border-box;
}

.clan-form-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 99, 102, 241), 0.15);
}

.clan-form-counter {
  text-align: right;
  font-size: 0.78em;
  color: var(--text-muted);
  margin-top: 4px;
  transition: color 0.2s;
}

.clan-form-counter.warn {
  color: #ff9800;
}

.clan-form-counter.danger {
  color: var(--accent-danger, #ef4444);
  font-weight: 600;
}

/* ─── Drop Zone ─── */
.clan-dropzone {
  position: relative;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg, 12px);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.25s,
    background 0.25s,
    transform 0.15s;
  background: var(--bg-base, var(--bg-body));
}

.clan-dropzone:hover {
  border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.04);
}

.clan-dropzone.dragover {
  border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.08);
  transform: scale(1.01);
}

.clan-dropzone.has-file {
  border-style: solid;
  border-color: var(--accent-primary);
  padding: 20px;
}

.clan-dropzone-icon {
  font-size: 2em;
  color: var(--text-muted);
  margin-bottom: 8px;
  transition:
    color 0.2s,
    transform 0.3s;
}

.clan-dropzone:hover .clan-dropzone-icon {
  color: var(--accent-primary);
  transform: translateY(-2px);
}

.clan-dropzone-text {
  font-size: 0.92em;
  color: var(--text-muted);
}

.clan-dropzone-text strong {
  color: var(--accent-primary);
}

.clan-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ─── Hex Preview ─── */
.clan-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.clan-preview-hex {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clan-preview-hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background-color: var(--bg-surface-alt, #2b2d31);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  filter: saturate(1.2) contrast(1.05)
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));

  animation: clan-preview-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes clan-preview-pop {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

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

.clan-preview-filename {
  font-size: 0.82em;
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clan-preview-change {
  font-size: 0.82em;
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.clan-preview-change:hover {
  opacity: 0.7;
}

/* ─── Form Actions ─── */
.clan-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.clan-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}

.clan-form-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--accent-primary-rgb, 99, 102, 241), 0.35);
}

.clan-form-submit:active {
  transform: translateY(0);
}

.clan-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.clan-form-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--bg-surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  font-size: 0.92em;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}

.clan-form-cancel:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
  color: var(--text-main);
}

/* ─── Info banner ─── */
.clan-form-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.08);
  border: 1px solid rgba(var(--accent-primary-rgb, 99, 102, 241), 0.2);
  border-radius: var(--radius-md, 8px);
  font-size: 0.84em;
  color: var(--text-muted);
  margin-bottom: 22px;
  line-height: 1.5;
}

.clan-form-info i {
  color: var(--accent-primary);
  margin-top: 2px;
  flex-shrink: 0;
}

/* ─── Current image (edit page) ─── */
.clan-form-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-surface-alt);
  border-radius: var(--radius-md, 8px);
  font-size: 0.88em;
  color: var(--text-muted);
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .clan-form {
    padding: 20px 16px;
  }

  .clan-preview-hex {
    width: 110px;
    height: 110px;
  }

  .clan-form-submit {
    width: 100%;
    justify-content: center;
  }

  .clan-form-actions {
    flex-direction: column;
  }

  .clan-form-cancel {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================== */
/* === CLAN HUB — Premium Redesign 2026                            === */
/* ================================================================== */

/* --- Larger hexagonal badge variants for clan pages --- */
/* Must use .author-clans scope to beat the base 22px !important specificity */
.author-clans .clan-badge.clan-badge-md {
  width: 36px !important;
  height: 36px !important;
}

.author-clans .clan-badge.clan-badge-lg {
  width: 52px !important;
  height: 52px !important;
}

.author-clans .clan-badge.clan-badge-hub {
  width: 120px !important;
  height: 120px !important;
  transition: transform var(--duration-fast) var(--ease-spring) !important;
}

.author-clans .clan-badge.clan-badge-xl {
  width: 200px !important;
  height: 200px !important;
}

/* Image zoom inside hex — Parent-mask approach:
   The hex mask is on the PARENT .clan-badge, which clips all children.
   The img is simply 115% of parent → parent mask clips the overshoot → zoom.
   drop-shadow follows the parent mask shape → correct hex shadow.
   No transform on img → zero hover conflict. */
.author-clans .clan-badge {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='black' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
}

/* Zoom: img is 115% of parent, parent mask clips the overshoot */
.author-clans .clan-badge img:not(.clan-badge-glow) {
  width: 115% !important;
  height: 115% !important;
  top: -7.5% !important;
  left: -7.5% !important;
  /* Remove img-level mask since parent now handles clipping */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ─── HERO SECTION ─── */
.clan-hub-hero {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  min-height: 120px;
  border: 1px solid var(--border-color);
}

.clan-hub-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 80% 120% at 10% 80%,
      rgba(168, 197, 69, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 80% at 90% 20%,
      rgba(142, 175, 53, 0.08) 0%,
      transparent 50%
    ),
    var(--bg-surface);
  transition: opacity 0.4s ease;
}

.clan-hub-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  min-width: 0;
}

.clan-hub-hero-text {
  flex: 1;
  min-width: 0;
}

.clan-hub-title {
  margin: 0;
  font-size: 1.65em;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.clan-hub-title-icon {
  font-size: 0.85em;
  color: var(--accent-primary);
  opacity: 0.85;
}

.clan-hub-subtitle {
  margin: 6px 0 0;
  font-size: 0.9em;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Stats pills */
.clan-hub-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.clan-hub-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.clan-hub-stat-value {
  font-size: 1.35em;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.clan-hub-stat-label {
  font-size: 0.7em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.clan-hub-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border-color);
  opacity: 0.6;
}

/* Hero action */
.clan-hub-hero-actions {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.clan-hub-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.88em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) ease,
    background var(--duration-fast) ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  box-sizing: border-box;
}

.clan-hub-create-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  background: var(--accent-secondary, var(--accent-primary));
}

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

.clan-hub-create-btn i {
  font-size: 0.9em;
}

/* ─── SEARCH BAR ─── */
.clan-hub-search-bar {
  position: relative;
  margin-bottom: 16px;
}

.clan-hub-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85em;
  pointer-events: none;
  transition: color var(--duration-fast) ease;
}

.clan-hub-search-input {
  width: 100%;
  padding: 11px 40px 11px 42px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 0.88em;
  font-family: var(--font-family-base);
  box-sizing: border-box;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background var(--duration-fast) ease;
  outline: none;
}

.clan-hub-search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow-soft, rgba(168, 197, 69, 0.15));
}

.clan-hub-search-input:focus ~ .clan-hub-search-icon {
  color: var(--accent-primary);
}

.clan-hub-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8em;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-full);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.clan-hub-search-clear:hover {
  color: var(--accent-danger);
}

/* ─── CLAN LIST (vertical, one per row) ─── */
.clan-hub-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── CARD WRAPPER ─── */
.clan-hub-card {
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* Staggered entrance */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.4s var(--ease-out-expo),
    transform 0.4s var(--ease-out-expo);
  transition-delay: calc(min(var(--stagger, 0), 12) * 50ms);
}

.clan-hub-card-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── ORPHANED CLAN (admin-only visibility) ─── */
.clan-hub-card.clan-orphaned {
  border: 1px dashed var(--accent-danger);
  opacity: 0.7;
  position: relative;
}

.clan-orphan-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  background: var(--accent-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .clan-hub-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── CARD LINK (main clickable area → clan page) ─── */
.clan-hub-card-link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

@media (hover: hover) {
  .clan-hub-card-link:hover {
    background: var(--bg-surface-alt);
  }

  .clan-hub-card-link:hover .clan-badge-hub {
    transform: scale(1.06) !important;
  }

  .clan-hub-card-link:hover .clan-hub-card-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

.clan-hub-card-link:active {
  background: var(--bg-surface-alt);
}

/* ─── BIG BADGE (image is the hero) ─── */
.clan-hub-card-badge {
  flex-shrink: 0;
}

/* clan-badge-hub sizing is in the scoped variants section above (.author-clans .clan-badge.clan-badge-hub) */

/* ─── CARD BODY (title + desc) ─── */
.clan-hub-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clan-hub-card-name {
  margin: 0;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.clan-hub-card-desc {
  margin: 0;
  font-size: 0.84em;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

/* ─── CARD RIGHT (members + arrow) ─── */
.clan-hub-card-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.clan-hub-card-members {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-muted);
}

.clan-hub-card-members i {
  font-size: 0.85em;
  opacity: 0.7;
}

.clan-hub-card-arrow {
  color: var(--text-muted);
  font-size: 0.85em;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-spring);
}

/* ─── CHEF ROW (below the link, separate clickable area) ─── */
.clan-hub-card-chef {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 12px;
  font-size: 0.82em;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.clan-hub-card-chef-icon {
  color: #f59e0b;
  font-size: 0.85em;
  flex-shrink: 0;
}

.clan-hub-card-chef-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-squircle, 30%);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.clan-hub-card-chef-avatar:hover {
  transform: scale(1.1);
}

.clan-hub-card-chef-name {
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: color var(--duration-fast) ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clan-hub-card-chef-name:hover {
  color: var(--accent-primary);
}

/* ─── EMPTY STATE ─── */
.clan-hub-empty {
  text-align: center;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.clan-hub-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--accent-highlight, rgba(168, 197, 69, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.clan-hub-empty-icon i {
  font-size: 1.5em;
  color: var(--accent-primary);
  opacity: 0.6;
  animation: clan-empty-pulse 2.5s ease-in-out infinite;
}

@keyframes clan-empty-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

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

.clan-hub-empty-title {
  margin: 0;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--text-main);
}

.clan-hub-empty-desc {
  margin: 0;
  font-size: 0.9em;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.5;
}

/* ─── NO RESULTS (search) ─── */
.clan-hub-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.clan-hub-no-results i {
  font-size: 1.8em;
  opacity: 0.3;
}

.clan-hub-no-results p {
  margin: 0;
  font-size: 0.9em;
}

/* ─── CLAN SHOW — Back link ─── */
.clan-show-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88em;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 16px;
  padding: 6px 0;
  transition: color var(--duration-fast) ease;
}

.clan-show-back:hover {
  color: var(--accent-primary);
}

.clan-show-back i {
  font-size: 0.8em;
  transition: transform var(--duration-fast) ease;
}

.clan-show-back:hover i {
  transform: translateX(-3px);
}

/* ─── DEEP ETHER THEME OVERRIDES ─── */
[data-theme="deep-ether"] .clan-hub-hero-bg {
  background:
    radial-gradient(
      ellipse 80% 120% at 10% 80%,
      rgba(13, 102, 255, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 80% at 90% 20%,
      rgba(77, 148, 255, 0.05) 0%,
      transparent 50%
    ),
    var(--bg-surface);
}

[data-theme="deep-ether"] .clan-hub-hero {
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="deep-ether"] .clan-hub-card {
  background: var(--bg-card, #242427);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="deep-ether"] .clan-hub-card-chef {
  border-color: rgba(255, 255, 255, 0.04);
  background: var(--bg-card, #242427);
}

@media (hover: hover) {
  [data-theme="deep-ether"] .clan-hub-card-link:hover {
    background: rgba(255, 255, 255, 0.03);
  }
}

[data-theme="deep-ether"] .clan-hub-create-btn {
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.28);
}

[data-theme="deep-ether"] .clan-hub-create-btn:hover {
  box-shadow: 0 4px 20px rgba(13, 102, 255, 0.35);
}

[data-theme="deep-ether"] .clan-hub-search-input:focus {
  box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.15);
}

[data-theme="deep-ether"] .clan-hub-empty-icon {
  background: rgba(13, 102, 255, 0.06);
}

/* ─── DARK THEME OVERRIDES ─── */
[data-theme="dark"] .clan-hub-hero-bg,
[data-theme="grey"] .clan-hub-hero-bg,
[data-theme="custom"] .clan-hub-hero-bg {
  background:
    radial-gradient(
      ellipse 80% 120% at 10% 80%,
      rgba(168, 197, 69, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 80% at 90% 20%,
      rgba(142, 175, 53, 0.05) 0%,
      transparent 50%
    ),
    var(--bg-surface);
}

/* ─── MOBILE RESPONSIVE ─── */
@media (max-width: 768px) {
  .clan-hub-hero {
    padding: 22px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: auto;
  }

  .clan-hub-hero-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }

  .clan-hub-title {
    font-size: 1.35em;
  }

  .clan-hub-stats {
    width: 100%;
    justify-content: flex-start;
    gap: 20px;
  }

  .clan-hub-stat {
    align-items: flex-start;
  }

  .clan-hub-hero-actions {
    width: 100%;
  }

  .clan-hub-create-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    border-radius: var(--radius-md, 12px);
    padding: 12px 20px;
    white-space: normal;
    text-align: center;
  }

  .clan-hub-list {
    gap: 8px;
  }

  .clan-hub-card-link {
    padding: 14px 14px;
    gap: 14px;
  }

  .author-clans .clan-badge.clan-badge-hub {
    width: 90px !important;
    height: 90px !important;
  }

  .clan-hub-card-arrow {
    display: none;
  }

  .clan-hub-card-chef {
    padding: 8px 14px 10px;
  }

  .clan-hub-empty {
    padding: 40px 16px;
  }
}

@media (max-width: 480px) {
  .clan-hub-hero {
    padding: 18px 14px;
    border-radius: var(--radius-md);
  }

  .clan-hub-title {
    font-size: 1.2em;
  }

  .author-clans .clan-badge.clan-badge-hub {
    width: 72px !important;
    height: 72px !important;
  }
}

/* ─── CLAN SHOW PAGE (kept from original) ─── */
.clan-show-header {
  text-align: center;
  margin-bottom: 30px;
  background: var(--bg-surface);
  padding: 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.clan-show-badge-wrapper {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

.clan-show-title {
  margin: 0;
  font-size: 1.6em;
  color: var(--text-main);
}

.clan-show-desc {
  color: var(--text-muted);
  max-width: 600px;
  margin: 10px auto;
  font-size: 0.95em;
  line-height: 1.5;
}

.clan-show-owner {
  color: var(--text-main);
  font-size: 0.95em;
}

.clan-show-owner .fa-crown {
  color: #f59e0b;
  margin-right: 4px;
}

.clan-show-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.clan-btn-outline {
  background: transparent !important;
  border: 1px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.clan-btn-outline:hover {
  background: var(--accent-primary) !important;
  color: white !important;
}

.clan-btn-outline-danger {
  background: transparent !important;
  border: 1px solid var(--accent-danger) !important;
  color: var(--accent-danger) !important;
}

.clan-btn-outline-danger:hover {
  background: var(--accent-danger) !important;
  color: white !important;
}

/* --- Clan Sections (Members, Admin) --- */
.clan-section {
  margin-bottom: 24px;
}

.clan-section-title {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.clan-section-title .fa-users,
.clan-section-title .fa-cog {
  margin-right: 6px;
}

.clan-members-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.clan-member-card {
  text-align: center;
  width: 80px;
}

.clan-member-avatar-wrap {
  position: relative;
  display: inline-block;
}

.clan-member-avatar {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-squircle, 12px);
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: transform 0.2s ease;
}

.clan-member-avatar:hover {
  transform: scale(1.08);
}

.clan-member-name {
  font-size: 0.78em;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: var(--text-main);
  margin-top: 4px;
  white-space: nowrap;
}

.clan-kick-form {
  position: absolute;
  top: -5px;
  right: -10px;
}

.clan-kick-btn {
  background: var(--accent-danger) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 10px !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- Clan Admin Section --- */
.clan-admin-section {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: var(--radius-md);
}

.clan-requests-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clan-request-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  gap: 10px;
  flex-wrap: wrap;
}

.clan-request-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clan-request-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-squircle, 12px);
  object-fit: cover;
}

.clan-request-actions {
  display: flex;
  gap: 6px;
}

.clan-btn-accept {
  background: #4caf50 !important;
  font-size: 0.85em !important;
  padding: 5px 12px !important;
}

.clan-btn-reject {
  background: var(--accent-danger) !important;
  font-size: 0.85em !important;
  padding: 5px 12px !important;
}

/* --- Clan Forms (Create / Edit) --- */
.clan-form {
  background: var(--bg-surface);
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.clan-form-group {
  margin-bottom: 18px;
}

.clan-form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9em;
  color: var(--text-main);
}

.clan-form-input {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 0.9em;
  box-sizing: border-box;
}

.clan-form-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.clan-form-textarea {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 0.9em;
  min-height: 100px;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}

.clan-form-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.clan-form-optional {
  color: var(--text-muted);
  font-size: 0.85em;
  font-weight: 400;
}

.clan-form-current-image {
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.clan-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* --- Mobile Adjustments for Show/Detail Page --- */
@media (max-width: 768px) {
  .author-clans .clan-badge.clan-badge-lg {
    width: 42px !important;
    height: 42px !important;
  }

  .author-clans .clan-badge.clan-badge-xl {
    width: 120px !important;
    height: 120px !important;
  }

  .clan-show-header {
    padding: 20px;
  }

  .clan-members-grid {
    gap: 12px;
  }

  .clan-member-card {
    width: 70px;
  }

  .clan-member-avatar {
    width: 42px;
    height: 42px;
  }

  .clan-request-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .clan-request-actions {
    width: 100%;
  }

  .clan-request-actions form {
    flex: 1;
  }

  .clan-request-actions .btn {
    width: 100%;
  }
}

.fixed-reply-form {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding: 10px 20px;
}

.chat-editor-wrapper {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
}

/* --- MOBILE SPECIFICS --- */
@media (max-width: 768px) {
  /* Header: hide logo text on mobile */
  .header-logo-text {
    display: none !important;
  }

  /* Remove old bottom nav */
  /* KEPT: Bottom nav provides quick access to home/clans/messages/profile */
  /* Hiding it behind a burger menu would be a UX regression */

  /* Input Bar Mobile (Dense) */
  .fixed-reply-form {
    padding: 8px 12px !important;
    background: var(--bg-surface-alt, #1e1f22) !important;
    border-top: none !important;
  }

  .chat-input-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* "+" toggle button (left) */
  .chat-actions {
    order: 1 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* When tray is open, lift above the backdrop (z-index 99 at doc level) */
  .chat-actions.mobile-tray-open {
    z-index: 200 !important;
  }

  /* Hide all action buttons — they go in the expandable tray */
  .chat-action-btn {
    display: none !important;
  }

  /* The first button stays visible as the "+" toggle */
  .chat-action-btn:first-child {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    transition:
      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      background 0.2s !important;
    z-index: 2 !important;
  }

  .chat-action-btn:first-child i::before {
    content: "\f067";
    /* fa-plus */
  }

  /* Active state: rotate "+" to "×" */
  .chat-actions.mobile-tray-open .chat-action-btn:first-child {
    transform: rotate(45deg) !important;
    background: var(--accent-primary, #5865f2) !important;
    color: white !important;
  }

  /* === EXPANDABLE TRAY (popup above + button) === */
  .mobile-actions-tray {
    position: absolute !important;
    bottom: 46px !important;
    left: 0 !important;
    background: var(--bg-card) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
    min-width: 200px !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(0.95) !important;
    pointer-events: none !important;
    transition:
      opacity 0.2s ease,
      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 100 !important;
    overflow: hidden !important;
  }

  .chat-actions.mobile-tray-open .mobile-actions-tray {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  /* Tray items */
  .mobile-tray-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    color: var(--text-main) !important;
    font-size: 15px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    transition: background 0.15s ease !important;
    font-family: inherit !important;
  }

  .mobile-tray-item:active {
    background: var(--bg-surface-alt) !important;
  }

  .mobile-tray-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color) !important;
  }

  .mobile-tray-item i {
    width: 22px !important;
    text-align: center !important;
    font-size: 17px !important;
  }

  /* Color-coded icons */
  .mobile-tray-item .tray-icon-sticker {
    color: #fbbf24 !important;
  }

  .mobile-tray-item .tray-icon-image {
    color: #34d399 !important;
  }

  .mobile-tray-item .tray-icon-poll {
    color: #60a5fa !important;
  }

  .mobile-tray-item .tray-icon-bold {
    color: #f472b6 !important;
  }

  .mobile-tray-item .tray-icon-italic {
    color: #a78bfa !important;
  }

  .mobile-tray-item .tray-icon-spoiler {
    color: #f87171 !important;
  }

  /* 🔑 Backdrop removed: was causing stacking context conflict.
       .main-content (z-index: 2) creates a stacking context on mobile,
       so a backdrop at body-level z-index: 99 blocked ALL clicks inside
       .main-content. Replaced by document-level dismiss handler in JS. */

  /* Central pill input */
  .chat-editor-wrapper {
    order: 2 !important;
    flex: 1 1 auto !important;
    background: var(--bg-card) !important;
    border-radius: 20px !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    min-height: 32px !important;
    margin-bottom: 0 !important;
    min-width: 0;
  }

  .chat-editor {
    padding: 8px 40px 8px 16px !important;
    font-size: 16px !important;
    color: var(--text-main) !important;
    width: 100% !important;
    max-height: 100px !important;
  }

  /* Smiley button (right side of input) — real clickable button, not ::after */
  .chat-editor-wrapper::after {
    display: none !important;
    /* Replaced by real button injected via JS */
  }

  .mobile-smiley-btn {
    position: absolute !important;
    right: 8px !important;
    bottom: 6px !important;
    width: 28px !important;
    height: 28px !important;
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 2 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-smiley-btn:active {
    color: var(--accent-primary, #5865f2) !important;
    transform: scale(0.9) !important;
  }

  /* Send button (right) */
  .chat-send-btn {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--accent-primary, #5865f2) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .chat-send-btn i {
    font-size: 14px;
    transform: translate(-1px, 1px);
  }

  /* Hide formatting buttons and separator on mobile (they're in the tray) */
  .chat-fmt-btn,
  .chat-actions-sep {
    display: none !important;
  }

  /* === POLL MODAL MOBILE FIX === */
  #poll-modal {
    z-index: 10001 !important;
    padding: 16px !important;
  }

  #poll-modal > div {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
  }

  /* --- MOBILE STACK NAVIGATION (iOS/Discord Style) --- */
  .app-layout {
    position: relative !important;
    overflow: hidden !important;
    /* Clip any residual shadow bleed from the topic overlay */
    overflow-x: hidden !important;
    min-width: 0;
    min-height: 0;
  }

  /* 🚀 CRITIQUE: Disable iOS Safari native swipe-back to let our JS handle it */
  body.mobile-topic-view {
    overscroll-behavior-x: none;
  }

  /* Sidebar (topic list) stays fixed behind */
  .sidebar {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    /* No parasitic shadow on the sidebar */
    box-shadow: none !important;
    min-width: 0;
    min-height: 0;
  }

  /* Topic (main content) slides over from right.
       ⚠️ NO !important on transform/transition — JS must control these for 60fps swipe.
       ⚠️ NO permanent box-shadow — the swipe JS adds/removes a light shadow
          dynamically during the gesture. A permanent CSS shadow bleeds onto
          the home screen edge when the panel is off-screen (translateX 100%).
       ⚠️ position/size/z-index MUST be here with !important to override the
          earlier mobile block (L.3527) that sets height:auto and overflow:visible
          for non-topic pages. Without these, the topic panel loses its scroll
          container and the chat editor disappears. */
  .main-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 100vh;
    /* z-index must be strictly higher than 9998 (.mobile-bottom-nav) */
    z-index: 10000 !important;
    background: var(--bg-body) !important;
    transform: translateX(100%);
    /* ⚠️ NO permanent transition — JS controls timing for 60fps swipe */
    display: flex !important;
    box-shadow: none !important;
    touch-action: pan-y;
    /* Limit native gestures to vertical scroll */
    min-width: 0;
    min-height: 0;
  }

  /* Allow horizontal scroll on code blocks */
  pre,
  code,
  .scrollable-x {
    touch-action: auto !important;
  }

  body.mobile-view-content .main-content {
    /* FIX: Use 'none' instead of 'translateX(0)'. Both are visually identical,
           but translateX(0) creates a new containing block that traps
           position:fixed children (like .fixed-reply-form), making them
           position relative to .main-content instead of the viewport.
           This broke the mobile editor positioning (gap above keyboard). */
    transform: none;
    min-width: 0;
    min-height: 0;
  }

  /* Keep sidebar static: swipe only moves the current topic panel */
  body.mobile-view-content .sidebar {
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    min-width: 0;
    min-height: 0;
  }

  body:not(.mobile-view-content) .sidebar {
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    min-width: 0;
    min-height: 0;
  }
}

/* ================================================================== */
/* ===  DRAG & DROP FEEDBACK (Editors PC/Mobile)                  === */
/* ================================================================== */
.editor-content.drag-over,
.chat-editor.drag-over,
.minimal-edit-zone.drag-over {
  background-color: rgba(168, 197, 69, 0.1) !important;
  border: 2px dashed var(--accent-primary) !important;
  box-shadow: inset 0 0 15px rgba(168, 197, 69, 0.2) !important;
  transition: all 0.2s ease;
}

[data-theme="deep-ether"] .drag-over {
  background-color: rgba(59, 130, 246, 0.12) !important;
  border-color: var(--primary-azure) !important;
  box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.25) !important;
}

[data-theme="light-ether"] .drag-over {
  background-color: rgba(168, 197, 69, 0.06) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: inset 0 0 15px rgba(168, 197, 69, 0.12) !important;
}

/* ================================================================== */
/* ===  PREMIUM 2026 — 6 Advisor Suggestions Implementation       === */
/* ===  Date: 2026-02-18                                          === */
/* ================================================================== */

/* ──────────────────────────────────────────────────────────────────── */
/* 1. 🖼️  SMART MEDIA CONTAINMENT — Tame user-generated chaos       */
/* ──────────────────────────────────────────────────────────────────── */

/* Inline images/emoji inside text ─ constrain to line-height.
   The following rules target images within inline elements. */

/* Specifically target images that look like inline emoji / badges */
.post-content p > img:not(.sticker):not(.sticker-thumb):not(.expanded),
.post-content span > img:not(.sticker):not(.sticker-thumb),
.post-content a > img:not(.sticker):not(.sticker-thumb):not(.expanded),
.post-content em > img,
.post-content strong > img {
  max-height: 1.5em;
  width: auto;
  vertical-align: middle;
  display: inline;
  border-radius: 3px;
  /* Prevent them from blowing up the line */
  object-fit: contain;
}

/* Block images (standalone, not inside text paragraphs) ─ encapsulated look */
.post-content > img:not(.sticker):not(.sticker-thumb),
.post-content > p > img:only-child:not(.sticker) {
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.15);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.post-content > img:not(.sticker):not(.sticker-thumb):hover,
.post-content > p > img:only-child:not(.sticker):hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Deep Ether: stronger inset glow on block images */
[data-theme="deep-ether"] .post-content > img:not(.sticker):not(.sticker-thumb),
[data-theme="deep-ether"] .post-content > p > img:only-child:not(.sticker) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Emoji from Unicode rendered as images by the browser ─ clamp them */
.post-content img[src*="emoji"],
.post-content img[src*="twemoji"],
.post-content img[alt="✅"],
.post-content img[alt="❌"],
.post-content img[alt="✔"],
.post-content img[alt="❤"],
.post-content img[alt="👍"] {
  max-height: 1.5em !important;
  width: auto !important;
  vertical-align: middle !important;
  display: inline !important;
}

/* ──────────────────────────────────────────────────────────────────── */
/* 2. 🫧  FLOATING GLASS BAR — Levitating input dock                 */
/* ──────────────────────────────────────────────────────────────────── */

/* Desktop only ─ on mobile, keep edge-to-edge for thumb reach */
@media (min-width: 769px) {
  .fixed-reply-form {
    margin: 0 20px 16px 20px;
    border-radius: 24px !important;
    border-top: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 200;
    transition:
      box-shadow 0.3s ease,
      transform 0.3s ease,
      border-color 0.3s ease;
  }

  .fixed-reply-form:focus-within {
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 0 1px rgba(168, 197, 69, 0.2);
    transform: translateY(-2px);
  }

  /* Match pill shape for editor wrapper inside floating bar */
  .fixed-reply-form .chat-editor-wrapper {
    border-radius: 18px;
  }
}

/* Deep Ether: frosted glass effect */
[data-theme="deep-ether"] .fixed-reply-form {
  background: rgba(61, 65, 71, 0.78) !important;
}

@media (min-width: 769px) {
  [data-theme="deep-ether"] .fixed-reply-form {
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  [data-theme="deep-ether"] .fixed-reply-form:focus-within {
    border-color: rgba(13, 102, 255, 0.3) !important;
    box-shadow:
      0 14px 40px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 20px rgba(59, 130, 246, 0.12);
  }
}

/* Light Ether: subtle ceramic floating */
@media (min-width: 769px) {
  [data-theme="light-ether"] .fixed-reply-form {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(26, 36, 27, 0.08) !important;
    box-shadow:
      0 8px 24px rgba(26, 36, 27, 0.1),
      inset 0 -1px 0 rgba(26, 36, 27, 0.03);
  }

  [data-theme="light-ether"] .fixed-reply-form:focus-within {
    box-shadow:
      0 10px 30px rgba(26, 36, 27, 0.12),
      0 0 0 2px rgba(168, 197, 69, 0.2);
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* 3. 🏷️  MICRO-BADGES UI — Transform [Prefix] tags into pills       */
/*    (JS adds class "topic-prefix-badge" with data-prefix attr)      */
/* ──────────────────────────────────────────────────────────────────── */

.topic-prefix-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.4;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

/* Semantic colors */
.topic-prefix-badge[data-prefix="nsfw"] {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.topic-prefix-badge[data-prefix="noir"] {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.topic-prefix-badge[data-prefix="rollback"] {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.topic-prefix-badge[data-prefix="meta"] {
  background: rgba(168, 197, 69, 0.12);
  color: var(--accent-text, #a8c545);
  border: 1px solid rgba(168, 197, 69, 0.2);
}

.topic-prefix-badge[data-prefix="rp"] {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.topic-prefix-badge[data-prefix="sondage"] {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.topic-prefix-badge[data-prefix="important"] {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.topic-prefix-badge[data-prefix="leak"] {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Generic fallback for unknown prefixes */
.topic-prefix-badge[data-prefix="other"] {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Light Ether: higher contrast for pills */
[data-theme="light-ether"] .topic-prefix-badge[data-prefix="nsfw"] {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

[data-theme="light-ether"] .topic-prefix-badge[data-prefix="noir"] {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

[data-theme="light-ether"] .topic-prefix-badge[data-prefix="rollback"] {
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
}

/* ──────────────────────────────────────────────────────────────────── */
/* 5. 🧵  VISUAL THREADING — Sublime blockquote citations             */
/* ──────────────────────────────────────────────────────────────────── */

/* Base blockquote improvements */
.post-content blockquote {
  border-left: 4px solid var(--accent-primary, #a8c545) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  font-style: italic !important;
  padding: 12px 16px 12px 18px !important;
  margin: 12px 0 !important;
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0 !important;
  position: relative;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.post-content blockquote:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Deep Ether: override the sci-fi style to be more readable */
[data-theme="deep-ether"] .post-content blockquote {
  background: linear-gradient(
    135deg,
    rgba(13, 102, 255, 0.06) 0%,
    rgba(13, 102, 255, 0.02) 100%
  ) !important;
  border: none !important;
  border-left: 4px solid var(--primary-azure, #3b82f6) !important;
  border-radius: 0 8px 8px 0 !important;
  font-family: inherit !important;
  font-style: italic !important;
  color: var(--text-muted) !important;
}

[data-theme="deep-ether"] .post-content blockquote::before {
  content: none !important;
}

[data-theme="deep-ether"] .post-content blockquote::after {
  content: none !important;
}

[data-theme="deep-ether"] .post-content blockquote:hover {
  background: linear-gradient(
    135deg,
    rgba(13, 102, 255, 0.09) 0%,
    rgba(13, 102, 255, 0.04) 100%
  ) !important;
}

/* Light Ether: earthy accent bar */
[data-theme="light-ether"] .post-content blockquote {
  background: rgba(26, 36, 27, 0.02) !important;
  border-left-color: var(--accent-primary, #a8c545) !important;
}

/* Reply context bar (above post) ─ also gets visual threading */
.post-reply-context {
  border-left: 3px solid var(--accent-primary, #a8c545);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease;
}

[data-theme="deep-ether"] .post-reply-context {
  border-left-color: var(--primary-azure, #3b82f6);
  background: rgba(13, 102, 255, 0.04);
}

/* Role-themed reply context borders — match the post's identity color
   ⚠️ FIX 2026-02-18: Toned-down colors + ::before gradient replaces border-image
   (border-image kills border-radius in all browsers) */
.post.is-poire .post-reply-context {
  border-left-color: #8bc34a;
  background: rgba(139, 195, 74, 0.05);
}

.post.is-artist .post-reply-context {
  border-left-color: #ce93d8;
  background: rgba(206, 147, 216, 0.05);
}

.post.is-poire-artiste .post-reply-context {
  position: relative;
  border-left-color: transparent;
  background: linear-gradient(
    135deg,
    rgba(139, 195, 74, 0.04) 0%,
    rgba(206, 147, 216, 0.04) 100%
  );
  overflow: hidden;
}

/* Gradient bar via pseudo-element — preserves border-radius */
.post.is-poire-artiste .post-reply-context::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #8bc34a, #ce93d8);
  border-radius: 3px 0 0 3px;
  pointer-events: none;
}

.post.is-top-violator .post-reply-context {
  border-left-color: #ffd54f;
  background: rgba(255, 213, 79, 0.04);
}

/* Dieu Déchu : reply-context tri-gradient premium avec scan animé */
.post.is-dieu-dechu .post-reply-context {
  position: relative;
  border-left-color: transparent;
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.05) 0%,
    rgba(118, 255, 3, 0.04) 40%,
    rgba(224, 86, 253, 0.05) 100%
  );
  overflow: hidden;
  box-shadow:
    inset 0 0 12px rgba(255, 215, 0, 0.03),
    inset 0 0 12px rgba(224, 86, 253, 0.03);
}

/* Barre latérale tri-couleur animée */
.post.is-dieu-dechu .post-reply-context::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #ffd700, #76ff03, #e056fd, #ffd700);
  background-size: 100% 300%;
  border-radius: 3px 0 0 3px;
  pointer-events: none;
  animation: dieuDechuReplyBar 3s linear infinite;
}

/* Scan lumineux subtil sur la citation */
.post.is-dieu-dechu .post-reply-context::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.04) 30%,
    rgba(118, 255, 3, 0.05) 50%,
    rgba(224, 86, 253, 0.04) 70%,
    transparent 100%
  );
  animation: dieuDechuReplyScan 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes dieuDechuReplyBar {
  0% {
    background-position: 0 0;
  }

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

@keyframes dieuDechuReplyScan {
  0% {
    left: -80%;
  }

  40% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* 6. 🌉  SEAMLESS BRIDGE — Sidebar ↔ Main Content continuity        */
/*                                                                    */
/*    The sidebar separator is a `sidebar-resizer` element (4px).     */
/*    The bridge effect uses a right-edge glow on the active card     */
/*    that creates the visual impression of flowing into main content.*/
/* ──────────────────────────────────────────────────────────────────── */

/* When a topic is active, enhance right-edge visual flow */
.topic-card.active {
  position: relative;
  z-index: 2;
}

/* Right-edge accent bar — creates the "opening" illusion */
.topic-card.active::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  width: 3px;
  height: calc(100% - 8px);
  border-radius: 2px 0 0 2px;
  background: var(--accent-primary, #a8c545);
  opacity: 0.7;
  z-index: 10;
  transition:
    opacity 0.2s ease,
    height 0.2s ease;
}

.topic-card.active:hover::after {
  opacity: 1;
  top: 2px;
  height: calc(100% - 4px);
}

/* Deep Ether: azure glow bar */
[data-theme="deep-ether"] .topic-card.active::after {
  background: var(--primary-azure, #3b82f6);
  box-shadow: 0 0 8px rgba(13, 102, 255, 0.4);
  opacity: 0.8;
}

/* Light Ether: subtle poire accent */
[data-theme="light-ether"] .topic-card.active::after {
  background: var(--accent-primary, #a8c545);
  opacity: 0.6;
}

/* Keep the glow dot on the left but adjust for bridge */
[data-theme="deep-ether"] .topic-card.active::before {
  left: 3px;
}

[data-theme="light-ether"] .topic-card.active::before {
  left: 3px;
}

/* ──────────────────────────────────────────────────────────────────── */
/* PREMIUM 2026 — BATCH 2: Ergonomie Cognitive & Micro-Interactions   */
/* ──────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────── */
/* 7. 📐  GRID ARCHITECTURE — Strict 2-Column Post Layout            */
/*                                                                    */
/*    Avatar in fixed left gutter, content never wraps underneath.    */
/*    Desktop only — mobile keeps the compact flex layout.            */
/* ──────────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  /* Convert post inner structure to grid */
  .post {
    display: grid !important;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 0;
  }

  /* Reply context spans the full width */
  .post .post-reply-context {
    grid-column: 1 / -1;
  }

  /* To correctly accommodate absolute .post-reactions without clipping text */
  .post {
    padding-bottom: 28px !important;
  }

  /* Avatar takes up the left gutter, vertically aligned to header */
  .post .post-header-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    border-bottom: none;
    padding: 14px 20px 4px;
  }

  .post .post-author-info {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: center;
  }

  .post .author-avatar-small {
    grid-row: 1;
    grid-column: 1;
    width: 44px;
    height: 44px;
    margin-top: 0;
  }

  .post .author-meta {
    grid-row: 1;
    grid-column: 2;
    gap: 2px;
    justify-content: center;
  }

  .post .author-level-badge,
  .post .author-clans .clan-badge {
    width: 30px !important;
    height: 30px !important;
  }

  /* Date moves inline with username (see Suggestion 8) */
  .post .post-actions {
    position: absolute;
    top: 14px;
    right: 20px;
  }

  /* Content: left padding = avatar gutter, never under avatar */
  .post .post-content {
    grid-column: 1 / -1;
    padding: 4px 20px 14px 76px !important;
    /* 20px base pad + 56px avatar col = 76px indent */
  }

  /* Signature: left-aligned, slightly indented from avatar gutter */
  .post .post-signature {
    grid-column: 1 / -1;
    padding-left: 62px;
    padding-right: 20px;
    margin-left: 0;
    margin-right: 0;
  }

  /* Reactions: perfectly aligned with post content */
  .post .post-reactions {
    grid-column: 1 / -1;
    padding-left: 76px;
    padding-right: 20px;
  }

  .post .post-poll {
    grid-column: 1 / -1;
    padding-left: 76px;
    padding-right: 20px;
  }

  /* Consecutive posts: hide header, align content */
  .post.consecutive-post .post-header-row {
    display: none !important;
  }

  .post.consecutive-post .post-content {
    padding-top: 0 !important;
    padding-bottom: 6px;
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* 8. ⏱️  MICRO-TYPOGRAPHY — Inline Timestamp "Dashboard" Style       */
/*                                                                    */
/*    Timestamp next to username: "Alear • 2h"                        */
/*    Chiffres compacts alignés pour une lecture rapide.               */
/* ──────────────────────────────────────────────────────────────────── */

/* Post date: anchored to the right, monospace digits */
@media (min-width: 769px) {
  /* Keep date on the right (position: absolute from Section 7) */
  /* Do NOT override to position: static — user prefers right-aligned time */

  .post .post-date {
    font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
  }

  .post .post-header-row {
    position: relative;
  }
}

/* Sidebar date: compact timestamp treatment */
.topic-date {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  opacity: 0.8;
}

/* ──────────────────────────────────────────────────────────────────── */
/* 9. 🎛️  HOVER PILL — Furtive Action Bar                             */
/*                                                                    */
/*    Floating pill with glassmorphic background, appears on hover.   */
/*    Houses quick actions: Reply, Copy, Report.                      */
/* ──────────────────────────────────────────────────────────────────── */

.post-hover-pill {
  position: absolute;
  top: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  border-radius: 20px;
  background: var(--bg-surface, rgba(30, 30, 30, 0.85));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 15;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

/* Deep Ether specific */
[data-theme="deep-ether"] .post-hover-pill {
  background: rgba(61, 65, 71, 0.82);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-floating);
}

[data-theme="deep-ether"] .post-hover-pill .pill-btn:hover,
[data-theme="light-ether"] .post-hover-pill .pill-btn:hover {
  background: var(--surface-tint);
}

/* Light Ether specific */
[data-theme="light-ether"] .post-hover-pill {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(26, 36, 27, 0.08);
  box-shadow: 0 2px 12px rgba(26, 36, 27, 0.1);
}

/* Show on post hover (desktop only) */
@media (hover: hover) {
  .post:hover .post-hover-pill {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Individual action buttons within the pill */
.post-hover-pill .pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    transform 0.12s ease;
  padding: 0;
  line-height: 1;
}

.post-hover-pill .pill-btn:hover {
  background: var(--bg-surface-alt, rgba(255, 255, 255, 0.1));
  color: var(--text-main);
  transform: scale(1.1);
}

/* Accent color for specific actions */
.post-hover-pill .pill-btn.pill-reply:hover {
  color: var(--accent-primary, #a8c545);
}

.post-hover-pill .pill-btn.pill-react:hover {
  color: #ffb800;
}

.post-hover-pill .pill-btn.pill-more:hover {
  color: var(--text-muted);
}

/* Ping-pong condensed: hide hover pill on middle posts (too compact) */
.post.pingpong-middle .post-hover-pill {
  display: none;
}

/* Keep pills on first/last posts*/
.post.pingpong-first .post-hover-pill {
  top: 8px;
}

.post.pingpong-last .post-hover-pill {
  top: 4px;
}

/* Consecutive (grouped) posts — slightly higher pill */
.post.consecutive-post:not(.pingpong-condensed) .post-hover-pill {
  top: 4px;
}

/* ──────────────────────────────────────────────────────────────────── */
/* 10. 🧊  DYNAMIC FROSTED HEADER — Glassmorphism on Scroll           */
/*                                                                    */
/*    Topic header starts transparent, gains blur+frost on scroll.    */
/*    Controlled by JS class `.topic-header--frosted`.                */
/* ──────────────────────────────────────────────────────────────────── */

/* Base state: transparent header */
.topic-header {
  transition:
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease,
    padding 0.25s ease;
}

/* Frosted state (applied by JS when scrolled > threshold) */
.topic-header.topic-header--frosted {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Title shrinks when frosted for compactness */
.topic-header.topic-header--frosted .topic-title {
  font-size: 16px;
  letter-spacing: -0.2px;
  transition:
    font-size 0.25s ease,
    letter-spacing 0.25s ease;
}

/* Theme-specific frosted states */
.topic-header--frosted {
  background: var(--glass-surface) !important;
}

[data-theme="deep-ether"] .topic-header--frosted {
  background: var(--glass-surface) !important;
  border-bottom-color: rgba(59, 130, 246, 0.15) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(13, 102, 255, 0.08) !important;
}

[data-theme="light-ether"] .topic-header--frosted {
  background: rgba(249, 248, 246, 0.8) !important;
  border-bottom-color: rgba(26, 36, 27, 0.06) !important;
  box-shadow: 0 2px 12px rgba(26, 36, 27, 0.06) !important;
}

/* ──────────────────────────────────────────────────────────────────── */
/* 11. 📏  COMFORT LINE — Editorial Text Width                        */
/*                                                                    */
/*    Limit text blocks to ~75 characters per line.                   */
/*    Increased line-height for pleasant scanning.                    */
/* ──────────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .post-content {
    max-width: 75ch;
    line-height: 1.72;
  }

  /* Ensure images/embeds can still go full-width */
  .post-content img,
  .post-content video,
  .post-content iframe,
  .post-content .embed-container {
    max-width: calc(100% + 2ch);
    /* Slight overshoot to fill naturally */
  }

  /* Polls & blockquotes should NOT be constrained by 75ch */
  .post-content .poll-card,
  .post-content blockquote,
  .post-content .spoiler-block {
    max-width: none;
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* 12. 🧩  SMART MEDIA GRID — Auto-Mosaic for Multiple Images         */
/*                                                                    */
/*    JS wraps consecutive images in `.media-grid-N` containers.      */
/*    CSS handles the responsive layout for 2, 3, and 4+ images.     */
/* ──────────────────────────────────────────────────────────────────── */

/* Base grid container */
.media-grid {
  display: grid;
  gap: 4px;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  margin: 8px 0;
  max-width: 100%;
}

.media-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition:
    transform 0.2s ease,
    filter 0.15s ease;
  border-radius: 0;
  /* Override parent radius — grid handles clipping */
}

.media-grid img:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
  z-index: 1;
}

/* 2 images: side by side */
.media-grid-2 {
  grid-template-columns: 1fr 1fr;
  max-height: 320px;
}

.media-grid-2 img {
  height: 100%;
  min-height: 160px;
  max-height: 320px;
}

/* 3 images: 1 big left + 2 stacked right */
.media-grid-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  max-height: 400px;
}

.media-grid-3 img:first-child {
  grid-row: 1 / 3;
  min-height: 240px;
}

.media-grid-3 img:not(:first-child) {
  min-height: 120px;
}

/* 4 images: 2x2 grid */
.media-grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  max-height: 400px;
}

.media-grid-4 img {
  min-height: 140px;
  max-height: 200px;
}

/* 5+ images: 3 top + rest below, or fallback grid */
.media-grid-5 {
  grid-template-columns: 1fr 1fr 1fr;
  max-height: 450px;
}

.media-grid-5 img:nth-child(1),
.media-grid-5 img:nth-child(2) {
  grid-column: span 1;
}

/* Overflow indicator for 5+ images */
.media-grid-overflow {
  position: relative;
}

.media-grid-overflow::after {
  content: attr(data-overflow-text);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Mobile: simpler grid */
@media (max-width: 768px) {
  .media-grid-2 {
    max-height: 220px;
  }

  .media-grid-3 {
    max-height: 280px;
  }

  .media-grid-4 {
    max-height: 280px;
  }

  .media-grid-5 {
    grid-template-columns: 1fr 1fr;
    max-height: 320px;
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* END: PREMIUM 2026 — Advisor Suggestions (Batch 1 + 2)              */
/* ──────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   🪄 MASTERCLASS BATCH — "Espace Spatial Numérique" Features
   5 concepts d'ingénierie front-end de niveau Premium 2026
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────── */
/* 1. 🪄 MAGIC MORPHING — View Transitions API                        */
/*    Continuité physique entre sidebar et topic header                 */
/* ──────────────────────────────────────────────────────────────────── */

/* View transition names for shared element animations */
.topic-card-avatar-col img.topic-author-avatar {
  view-transition-name: none;
  /* Default: no transition */
}

.topic-card-title {
  view-transition-name: none;
}

/* Active morphing state — set dynamically by JS before transition */
.topic-card.morphing-source .topic-author-avatar {
  view-transition-name: topic-hero-avatar;
}

.topic-card.morphing-source .topic-card-title {
  view-transition-name: topic-hero-title;
}

/* Target in topic header */
.topic-header .topic-author-avatar-header {
  view-transition-name: topic-hero-avatar;
}

.topic-header .topic-title {
  view-transition-name: topic-hero-title;
}

/* View Transition animations */
::view-transition-old(topic-hero-avatar),
::view-transition-new(topic-hero-avatar) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(topic-hero-title),
::view-transition-new(topic-hero-title) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Crossfade for the rest of the page */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: ease-out;
}

/* Mobile hard-disable for cross-document view-transition flashes */
@media (max-width: 768px) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(root),
  ::view-transition-image-pair(root) {
    animation: none !important;
    animation-duration: 0s !important;
  }
}

/* Fallback slide-in for non-supporting browsers */
@keyframes spa-morph-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

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

.spa-morph-enter {
  animation: spa-morph-slide-in 350ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ──────────────────────────────────────────────────────────────────── */
/* 2. 🕳️ CONTEXT PORTALS — Peek & Pop Glassmorphic                    */
/*    Hovering over a citation reveals the original post               */
/* ──────────────────────────────────────────────────────────────────── */

.context-portal {
  position: fixed;
  z-index: 9990;
  width: min(480px, 90vw);
  max-height: 360px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-overlay);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid var(--border-subtle);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.context-portal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.context-portal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-hover);
}

.context-portal-header img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.context-portal-header .portal-author {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-main);
}

.context-portal-header .portal-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
  font-family: var(--font-family-mono);
}

.context-portal-body {
  padding: 12px 16px 16px;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-secondary);
  overflow-y: auto;
  max-height: 280px;
}

.context-portal-body img {
  max-width: 100%;
  max-height: 160px;
  border-radius: 8px;
  margin: 6px 0;
}

/* Overlay dimming effect when portal is active */
.portal-dim-overlay {
  position: fixed;
  inset: 0;
  z-index: 9989;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.portal-dim-overlay.visible {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────── */
/* 3. 🗺️ SEMANTIC MINIMAP — Tactical Scrollbar Heat Map               */
/*    Visual overview of the conversation on the right edge            */
/* ──────────────────────────────────────────────────────────────────── */

.semantic-minimap {
  display: none !important;
}

.semantic-minimap:hover {
  width: 10px;
  opacity: 1 !important;
}

.semantic-minimap.visible {
  opacity: 0.7;
}

.minimap-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.02);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}

/* Viewport indicator */
.minimap-viewport {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  transition:
    top 0.15s ease-out,
    height 0.15s ease-out;
  min-height: 20px;
}

/* Marker dots */
.minimap-marker {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  transition: transform 0.15s ease;
  cursor: pointer;
}

.minimap-marker:hover {
  transform: scaleX(1.8);
}

/* Marker types */
.minimap-marker--admin {
  background: #ff4757;
  box-shadow: 0 0 6px rgba(255, 71, 87, 0.5);
}

.minimap-marker--mod {
  background: #ffa502;
  box-shadow: 0 0 6px rgba(255, 165, 2, 0.4);
}

.minimap-marker--self {
  background: #2ed573;
  box-shadow: 0 0 6px rgba(46, 213, 115, 0.4);
}

.minimap-marker--hot {
  background: #ffd700;
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 20px rgba(255, 215, 0, 0.3);
  height: 6px;
  animation: minimap-pulse 2s ease-in-out infinite;
}

@keyframes minimap-pulse {
  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

/* Minimap tooltip */
.minimap-tooltip {
  position: fixed;
  right: 20px;
  padding: 6px 12px;
  background: rgba(20, 22, 30, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 0.75rem;
  font-family: var(--font-family-mono);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  z-index: 801;
}

.minimap-tooltip.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hide native scrollbar when minimap is active */
.minimap-active::-webkit-scrollbar {
  width: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────── */
/* 4. 🌌 AMBIENT AURA — Dynamic Avatar-Based Background               */
/*    Subtle radial gradient from avatar's dominant color              */
/* ──────────────────────────────────────────────────────────────────── */

.post-aura {
  position: absolute;
  inset: -40px -60px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity;
}

.post-aura.active {
  opacity: 1;
}

.post-aura-gradient {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.045;
  background: radial-gradient(
    ellipse at 15% 50%,
    var(--post-aura, transparent),
    transparent 70%
  );
}

/* Reduced motion: disable aura animations */
@media (prefers-reduced-motion: reduce) {
  .post-aura {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* 5. 🛰️ PRESENCE ORBIT — Live Multiplayer Spatial Presence           */
/*    Floating avatar cluster showing who's reading the same topic     */
/* ──────────────────────────────────────────────────────────────────── */

.presence-orbit {
  position: fixed;
  bottom: 80px;
  /* Above the reply zone */
  right: 20px;
  display: flex;
  align-items: flex-end;
  gap: 0;
  z-index: 15000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.presence-orbit.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Avatar cluster — stacked overlap */
.presence-orbit-cluster {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.presence-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-body, #161820);
  margin-left: -10px;
  opacity: 0.5;
  filter: blur(0.5px);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
  position: relative;
}

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

.presence-avatar:hover {
  opacity: 0.8;
  filter: none;
  transform: scale(1.1);
  z-index: 2;
}

/* Typing state — avatar "lifts" */
.presence-avatar.typing {
  opacity: 1;
  filter: none;
  transform: translateY(-6px) scale(1.05);
  border-color: var(--accent-primary, #3b82f6);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

/* Typing bubble */
.presence-typing-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px 12px 12px 4px;
  padding: 4px 8px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.presence-avatar.typing .presence-typing-bubble {
  opacity: 1;
}

.typing-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-primary, #3b82f6);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Reader count badge */
.presence-count {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-family: var(--font-family-mono);
  color: var(--text-muted);
  margin-left: 6px;
  white-space: nowrap;
  cursor: default;
}

.presence-count i {
  margin-right: 4px;
  font-size: 0.6rem;
  opacity: 0.6;
}

/* Mobile: adjust presence orbit to not block input */
@media (max-width: 768px) {
  .presence-orbit {
    bottom: calc(125px + env(safe-area-inset-bottom, 0));
    right: 15px;
    transition:
      bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease,
      transform 0.4s ease;
  }

  /* Audit Fix: Redescend doucement quand la nav bar du bas disparaît */
  body.mobile-nav-hidden .presence-orbit {
    bottom: calc(75px + env(safe-area-inset-bottom, 0));
  }

  /* Audit Fix: Se cache élégamment quand l'éditeur/clavier est ciblé */
  body.editor-focused .presence-orbit,
  body:has(.fixed-reply-form:focus-within) .presence-orbit {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(15px) !important;
  }

  .presence-avatar {
    width: 26px;
    height: 26px;
  }

  .semantic-minimap {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* END: MASTERCLASS BATCH — Espace Spatial Numérique                   */
/* ──────────────────────────────────────────────────────────────────── */

/* ╔═══════════════════════════════════════════════════════════════════╗ */
/* ║  FORUM ENGINE — Perceptual Intelligence Layer                    ║ */
/* â•‘  8 Features across 4 Pillars                                     â•‘ */
/* ╚═══════════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────────────── */
/* P1-§2. LIQUID DROPZONE — Full-screen Glassmorphic Drop Overlay      */
/* ──────────────────────────────────────────────────────────────────── */

.liquid-dropzone {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.liquid-dropzone.active {
  opacity: 1;
  pointer-events: auto;
}

.dropzone-inner {
  text-align: center;
  padding: 60px 80px;
  border-radius: 24px;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  animation: dropzone-breathe 2s ease-in-out infinite;
}

.dropzone-icon {
  color: var(--accent-primary, #6366f1);
  margin-bottom: 16px;
  animation: dropzone-bounce 0.6s ease-out;
}

.dropzone-text {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.dropzone-subtext {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

@keyframes dropzone-breathe {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.2);
  }

  50% {
    border-color: rgba(255, 255, 255, 0.45);
  }
}

@keyframes dropzone-bounce {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }

  60% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

[data-theme="light-ether"] .liquid-dropzone {
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light-ether"] .dropzone-inner {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light-ether"] .dropzone-text {
  color: var(--text-main);
}

[data-theme="light-ether"] .dropzone-subtext {
  color: var(--text-muted);
}

/* ──────────────────────────────────────────────────────────────────── */
/* P1-§3. OPTIMISTIC UI — Ghost Post Rendering                         */
/* ──────────────────────────────────────────────────────────────────── */

.post.post-optimistic {
  opacity: 0.55;
  position: relative;
  animation: optimistic-pulse 1.5s ease-in-out infinite;
  border-left: 3px solid var(--accent-primary, #6366f1) !important;
}

.post.post-optimistic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%
  );
  animation: optimistic-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

.post.post-optimistic.post-confirmed {
  animation: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.post.post-optimistic.post-confirmed::after {
  display: none;
}

@keyframes optimistic-pulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.75;
  }
}

@keyframes optimistic-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* P2-§4. THREAD-WEAVING SVG — Conversation Neural Map                 */
/* ──────────────────────────────────────────────────────────────────── */

.thread-weaver-svg {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.thread-weaver-path {
  fill: none;
  stroke: var(--accent-primary, #6366f1);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.3;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme: darker threads */
[data-theme="light-ether"] .thread-weaver-path {
  stroke: var(--accent-secondary, #4338ca);
  opacity: 0.2;
}

/* Deep Ether: electric blue glow */
[data-theme="deep-ether"] .thread-weaver-path {
  stroke: #0d66ff;
  opacity: 0.25;
  filter: drop-shadow(0 0 4px rgba(13, 102, 255, 0.3));
}

/* ──────────────────────────────────────────────────────────────────── */
/* P2-§6. SMART PACING — Truncation & Ping-Pong Condensation           */
/* ──────────────────────────────────────────────────────────────────── */

/* A) Smart Truncation — Long posts > 600px */
.post-content.post-content-truncated {
  max-height: 600px;
  overflow: hidden;
  position: relative;
}

.post-content.post-content-truncated::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-surface, #1a1a2e) 90%
  );
  pointer-events: none;
  z-index: 2;
}

[data-theme="light-ether"] .post-content.post-content-truncated::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-surface, #fafaf9) 90%
  );
}

[data-theme="deep-ether"] .post-content.post-content-truncated::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-surface, #0a0a12) 90%
  );
}

.truncation-reveal-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 0 4px;
  padding: 10px 20px;
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  background: var(--bg-surface-alt, rgba(255, 255, 255, 0.05));
  border: none;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncation-reveal-pill:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent-primary, #6366f1);
  border-color: var(--accent-primary, #6366f1);
}

.truncation-reveal-pill i {
  font-size: 10px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.truncation-reveal-pill:hover i {
  transform: translateY(2px);
}

/* Mobile: bigger pill for easier tapping */
@media (max-width: 768px) {
  .truncation-reveal-pill {
    font-size: 14px;
    padding: 14px 20px;
  }

  .truncation-reveal-pill i {
    font-size: 14px;
  }
}

/* B) Ping-Pong Condensation — Rapid short exchanges */
.post.pingpong-condensed {
  margin-bottom: 0 !important;
}

.post.pingpong-middle {
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 2px;
  padding-bottom: 2px;
}

.post.pingpong-middle .post-header-row {
  padding-top: 4px;
  padding-bottom: 2px;
}

.post.pingpong-first {
  border-bottom: none !important;
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
  margin-bottom: 0 !important;
}

.post.pingpong-last {
  border-top: none !important;
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
}

.post.pingpong-condensed .post-content {
  padding-top: 2px !important;
  padding-bottom: 4px !important;
}

/* Visual indicator: subtle side strip */
.post.pingpong-condensed::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--accent-primary, #6366f1) 0%,
    rgba(99, 102, 241, 0.2) 100%
  );
  opacity: 0.4;
  z-index: 2;
}

/* ──────────────────────────────────────────────────────────────────── */
/* P3-§9. HANGING PUNCTUATION — Optical Alignment                      */
/*                                                                      */
/*    Pushes leading quotes/bullets outside text box for surgical       */
/*    alignment against the avatar column.                              */
/* ──────────────────────────────────────────────────────────────────── */

.post-content p,
.post-content blockquote,
.post-content li {
  hanging-punctuation: first last;
}

/* ──────────────────────────────────────────────────────────────────── */
/* P4-§12. TEMPORAL PATINA — The Wear of Time                          */
/*                                                                      */
/*    Posts age gracefully. Ancient posts lose contrast & gain warmth.  */
/*    4 tiers: 1h+, 1d+, 7d+, 30d+                                    */
/* ──────────────────────────────────────────────────────────────────── */

/* Tier 1: Warm (1h – 24h) — barely noticeable */
.post[data-patina-tier="1"] {
  /* Marker only — visible styling starts at tier 2 */
  outline: 0 solid transparent;
}

/* Tier 2: Aging (1d – 7d) — subtle text dimming */
.post[data-patina-tier="2"] .post-content {
  opacity: 0.95;
}

/* Tier 3: Old (7d – 30d) — noticeable aging */
.post[data-patina-tier="3"] .post-content {
  opacity: 0.88;
}

.post[data-patina-tier="3"] {
  border-color: rgba(var(--border-rgb, 255, 255, 255), 0.04) !important;
}

/* Tier 4: Ancient (30d+) — archaeological patina */
.post[data-patina-tier="4"] .post-content {
  opacity: 0.82;
  filter: saturate(0.88);
}

.post[data-patina-tier="4"] {
  border-color: rgba(var(--border-rgb, 255, 255, 255), 0.03) !important;
}

/* Light Ether: warm sepia tint for ancient posts */
[data-theme="light-ether"] .post[data-patina-tier="3"] {
  background-color: rgba(245, 240, 230, 0.3);
}

[data-theme="light-ether"] .post[data-patina-tier="4"] {
  background-color: rgba(240, 235, 220, 0.5);
}

[data-theme="light-ether"] .post[data-patina-tier="4"] .post-content {
  filter: sepia(0.03) saturate(0.92);
}

/* Deep Ether: ancient posts lose their neon edge */
[data-theme="deep-ether"] .post[data-patina-tier="3"] {
  box-shadow: none !important;
}

[data-theme="deep-ether"] .post[data-patina-tier="4"] {
  box-shadow: none !important;
  border-left-color: rgba(13, 102, 255, 0.05) !important;
}

/* ──────────────────────────────────────────────────────────────────── */
/* END: FORUM ENGINE — Perceptual Intelligence Layer                    */
/* ──────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   MOBILE PAGER (ViewPager-like navigation)
   ========================================================================== */
@media (max-width: 768px) {
  .mobile-pager-host {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .mobile-pager-shell {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .mobile-pager-shell::-webkit-scrollbar {
    display: none;
  }

  .mobile-pager-panel {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-height: 100%;
    scroll-snap-align: start;
    overflow: hidden;
    position: relative;
    background: var(--bg-body);
  }

  .mobile-pager-panel-live {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-pager-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--bg-body);
  }

  .mobile-pager-fallback {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    padding: 20px;
    text-align: center;
  }

  .mobile-pager-fallback a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
  }
}

/* Embedded pages rendered inside pager iframes */
html[data-mobile-pager-embed="1"] header,
html[data-mobile-pager-embed="1"] .mobile-bottom-nav,
html[data-mobile-pager-embed="1"] .sidebar,
html[data-mobile-pager-embed="1"] .profile-hub-overlay,
html[data-mobile-pager-embed="1"] .profile-hub,
html[data-mobile-pager-embed="1"] .flash-messages-container,
html[data-mobile-pager-embed="1"] #sidebar-resizer {
  display: none !important;
  min-width: 0;
  min-height: 0;
}

html[data-mobile-pager-embed="1"] .app-layout {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100dvh !important;
  min-width: 0;
  min-height: 0;
}

html[data-mobile-pager-embed="1"] .main-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  min-height: 100vh;
  min-width: 0;
}

/* ==========================================================================
   💎 PREMIUM UX/UI POLISH (Micro-interactions & Agreeability)
   ========================================================================== */

/* 1. Smooth Scrolling Global — REMOVED.
   Already declared in 2-layout.css with proper @media (prefers-reduced-motion) guard.
   Having it unconditionally here caused scroll jank on mobile: JS scrollTop adjustments
   in topic_view.js were intercepted by smooth behavior, creating visible jitter.
   The topic-scroll-container MUST use scroll-behavior:auto for infinite scroll to work. */
.topic-scroll-container {
  scroll-behavior: auto !important;
}

/* 2. Selection Highlight (Premium feel) */
::selection {
  background: var(--accent-glow, rgba(168, 197, 69, 0.3));
  color: var(--text-main);
}

/* 3. Universal Springy Active States (Tactile feedback) */
.sidebar-menu-item,
.notif-item,
.topic-card,
.profile-tab,
.btn-ripple {
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  min-width: 0;
  min-height: 0;
}

.sidebar-menu-item:active,
.notif-item:active,
.profile-tab:active {
  transform: scale(0.98);
  min-width: 0;
  min-height: 0;
}

@media (hover: hover) and (pointer: fine) {
  .topic-card:active {
    transform: scale(0.98);
    min-width: 0;
    min-height: 0;
  }
}

/* 4. Beautiful Scrollbars Globally (Thin, rounded, translucent) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
  border: 2px solid var(--bg-body);
}

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

/* 5. Image & Interactive Elements Polish */
.post-image,
.sticker {
  transition:
    filter 0.3s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.post-image:hover,
.sticker:hover {
  filter: brightness(1.05);
}

.post-image:active,
.sticker:active {
  transform: scale(0.98);
}

/* 6. Form Polish (Inputs focus) */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  transition:
    border-color 0.25s ease-out,
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease;
}

input:focus,
textarea:focus,
.chat-editor:focus {
  box-shadow: 0 0 0 3px var(--accent-glow-soft) !important;
  border-color: var(--accent-primary) !important;
}

/* X-Card Placeholder Style (Moved from inline style) */
a.x-card-placeholder {
  display: block;
  text-decoration: none;
}

/* Juge Suprême UI styles */
.post.is-juge-supreme .author-username,
.usercard-header.is-juge-supreme h2,
h2.juge-supreme-username {
  color: #87cefa !important;
  text-shadow: 0 0 5px rgba(135, 206, 250, 0.5);
}

.badge-juge-supreme {
  font-size: 14px;
  cursor: help;
  margin-left: 2px;
}

@keyframes hammerSmash {
  0%,
  100% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-45deg);
  }

  25% {
    transform: rotate(20deg);
  }

  35% {
    transform: rotate(-10deg);
  }

  45% {
    transform: rotate(0deg);
  }
}

/* Le Createur UI styles */
.post.is-createur .author-username,
.usercard-header.is-createur h2,
h2.createur-username {
  background: linear-gradient(90deg, #1a2980, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}

.badge-createur {
  font-size: 14px;
  cursor: help;
  margin-left: 2px;
}

/* ===================================
   MOBILE FULL-SCREEN TOPIC OVERRIDES
   Forces the topic view to cover the entire screen
   (including global header and bottom nav).
   =================================== */
@media (max-width: 768px) {
  /* FIX: Force body to stretch to dynamic viewport height when topic is active.
       Without this, body stays at the initial (smaller) vh value when the
       Chrome address bar auto-hides, creating dead space at the bottom. */
  body.mobile-view-content {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  /* When a topic is active, make it full viewport */
  body.mobile-view-content .main-content.topic-layout {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    --mobile-keyboard-inset: 0px;
    /* FIX: bottom: 0 anchors to the viewport bottom edge, preventing
           the gap when the address bar hides and dvh grows */
    bottom: 0 !important;
    width: 100% !important;
    /* ANDROID KEYBOARD FIX: Use 100dvh (dynamic viewport height) which
           automatically shrinks when the keyboard opens on Android Chrome.
           100vh stays at the full viewport height (behind keyboard), causing a gap.
           Fallback to 100vh for browsers that don't support dvh. */
    height: 100vh;
    height: 100dvh;
    /* Couvre bottom-nav (9000) et header (9000), en dessous des modals (10001+) */
    z-index: 9500 !important;
    background: var(--bg-body) !important;
    /* ANDROID FIX: overflow:hidden so ONLY .topic-scroll-container scrolls.
           overflow-y:auto here created a double-scroll context that broke Android layout.
           The flex column (.topic-scroll-container flex:1 + .fixed-reply-form flex-shrink:0)
           handles the split-screen layout — no need for outer scrolling. */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    /* FIX: REMOVED transform: translate3d(0,0,0).
           Any transform on a parent creates a new CSS Containing Block,
           which makes position:fixed children position relative to THIS
           element instead of the viewport. This was documented at L.25977
           for translateX(0) but was accidentally re-introduced here.
           The swipe-out animation sets transform via JS only when needed. */
    margin: 0 !important;
    padding-bottom: var(--mobile-keyboard-inset, 0px) !important;
    min-width: 0;
    min-height: 0;
  }

  body.mobile-view-content .main-content.topic-layout .topic-scroll-container {
    padding-bottom: var(--topic-reply-occupied, 0px) !important;
    scroll-padding-bottom: calc(
      var(--mobile-keyboard-inset, 0px) + var(--topic-reply-occupied, 0px)
    ) !important;
  }

  /* Hide the redundant "← Menu / Poire.Space" bar in fullscreen topic view.
       The topic header already has its own back arrow (#mobile-topic-back). */
  body.mobile-view-content .main-content.topic-layout #mobile-nav-bar {
    display: none !important;
    min-width: 0;
    min-height: 0;
  }

  /* Topic header sits flush at the very top once the nav bar is gone */
  body.mobile-view-content .main-content.topic-layout .topic-header {
    top: 0 !important;
    z-index: 10 !important;
    /* Relatif à son parent topic-layout (z-9500) — suffisant */
    position: sticky;
    min-width: 0;
    min-height: 0;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Prevent accidental text selection on the bottom nav on iOS/Android */
  .mobile-bottom-nav {
    -webkit-user-select: none;
    user-select: none;
  }

  /* IOS SAFARI FIX: Prevent catastrophic auto-zoom on inputs.
       If an input computed font-size is < 16px, iOS Safari zooms the whole page
       in, breaking the layout completely. */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea,
  select,
  .chat-editor {
    font-size: 16px !important;
  }

  /* MOBILE UX FIX: Prevent 300ms click delay & native grey highlight box */
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* CUSTOM LONG-PRESS FIX: Prevent native iOS/Android system popup
       (the magnifier glass or Save Image/Copy menu) from appearing when
       a user long-presses a post, so the JS custom menu triggers perfectly. */
  .post {
    -webkit-touch-callout: none;
  }
}

/* ================================================================== */
/* ===  FORUM SWITCH MODAL & SIDEBAR INDICATOR                    === */
/* ===  Desktop: glassmorphic centered modal                      === */
/* ===  Mobile: bottom-sheet with slide-up + drag handle           === */
/* ================================================================== */

/* --- Sidebar Forum Indicator (REMOVED — logo now indicates active forum) ---
.forum-indicator,
.forum-indicator-label,
.forum-indicator-label.forum-indicator--bordel,
.forum-indicator-label.forum-indicator--poirier,
.forum-indicator-switch-btn,
.forum-indicator-switch-btn:hover {

display: none !important;
}
*/

/* --- Sidebar Forum Switch Button --- */
.sidebar-forum-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 20px);
  margin: 0 10px 8px;
  padding: 9px 14px;
  background: var(--bg-surface-alt, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
  border-radius: var(--radius-md, 10px);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
  min-width: 0;
  min-height: 0;
}

.sidebar-forum-switch:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.08));
  color: var(--text-main);
  border-color: var(--accent-primary, #a8c545);
  min-width: 0;
  min-height: 0;
}

.sidebar-forum-switch:active {
  transform: scale(0.97);
  min-width: 0;
  min-height: 0;
}

.sidebar-forum-switch i {
  font-size: 0.9rem;
  color: var(--accent-primary, #a8c545);
  opacity: 0.85;
  min-width: 0;
  min-height: 0;
}

.sidebar-forum-switch:hover i {
  opacity: 1;
  min-width: 0;
  min-height: 0;
}

/* --- Forum Switch Modal Overlay --- */
.forum-switch-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modal-backdrop, rgba(0, 0, 0, 0.6));
  backdrop-filter: var(--modal-blur, blur(8px));
  -webkit-backdrop-filter: var(--modal-blur, blur(8px));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal, 250ms)
    var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.forum-switch-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Forum Switch Panel --- */
.forum-switch-panel {
  width: 92%;
  max-width: 420px;
  background: var(--bg-card, #1c2520);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--modal-card-shadow, var(--shadow-floating));
  overflow: hidden;
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition:
    transform var(--duration-slow, 400ms)
      var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
    opacity var(--duration-normal, 250ms) ease;
}

.forum-switch-overlay.open .forum-switch-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* --- Panel Header --- */
.forum-switch-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forum-switch-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.forum-switch-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.3rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
  transition:
    background var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease;
  line-height: 1;
}

.forum-switch-close-btn:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.06));
  color: var(--text-main);
}

/* --- Panel Body --- */
.forum-switch-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Forum Option Button --- */
.forum-option-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-surface-alt, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  text-align: left;
  gap: 14px;
  transition:
    background var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease;
  position: relative;
  overflow: hidden;
}

.forum-option-btn:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.08));
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.forum-option-btn:active {
  transform: translateY(0);
}

/* Active forum highlight */
.forum-option-btn.forum-option--active {
  border-color: var(--accent-primary, #a8c545);
  background: var(--accent-highlight, rgba(168, 197, 69, 0.06));
}

.forum-option-btn.forum-option--active::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-text, #b5d455);
  font-size: 0.85rem;
  opacity: 0.8;
}

/* --- Forum Option Icon --- */
.forum-option-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1.2rem;
  transition: transform var(--duration-fast, 150ms) ease;
}

.forum-option-btn:hover .forum-option-icon {
  transform: scale(1.08);
}

.forum-option-icon.forum-icon--bordel {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.25);
}

.forum-option-icon.forum-icon--poirier {
  background: rgba(46, 213, 115, 0.1);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.25);
}

.forum-option-icon.forum-icon--beta {
  background: rgba(255, 165, 2, 0.1);
  color: #ffa502;
  border: 1px solid rgba(255, 165, 2, 0.25);
}

/* --- Forum Option Text --- */
.forum-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.forum-option-name {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-main);
}

.forum-option-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* --- Mobile Drag Handle --- */
.forum-switch-drag-handle {
  display: none;
}

/* ================================================================== */
/* ===  FORUM SWITCH MODAL — MOBILE RESPONSIVE                    === */
/* ================================================================== */
@media (max-width: 768px) {
  .forum-switch-overlay {
    align-items: flex-end;
  }

  .forum-switch-panel {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    border-bottom: none;
    transform: translateY(100%);
    opacity: 1;
    transition: transform var(--duration-slow, 400ms)
      var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
    padding-bottom: calc(var(--safe-area-bottom, 0px) + 8px);
  }

  .forum-switch-overlay.open .forum-switch-panel {
    transform: translateY(0);
  }

  /* Drag Handle visible on mobile */
  .forum-switch-drag-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 2px;
  }

  .forum-switch-drag-handle span {
    width: 36px;
    height: 4px;
    background: var(--text-muted, #666);
    opacity: 0.35;
    border-radius: 2px;
  }

  .forum-option-btn {
    padding: 16px;
    min-height: 56px;
  }

  .forum-option-icon {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }

  .forum-option-name {
    font-size: 1.1rem;
  }

  .forum-option-desc {
    font-size: 0.85rem;
  }
}
/* Old forum-switch-dropdown CSS removed — now using sidebar tabs */

/* --- Fix overlap reaction structure --- */
.post {
  display: flex !important;
  flex-direction: column;
  padding-bottom: 0 !important;
}

.post-content {
  flex-grow: 1;
  margin-bottom: 0 !important;
}

.post-reactions {
  position: static !important;
  flex-shrink: 0;
  min-height: 0;
  height: auto !important;
  padding-top: 2px;
  padding-bottom: 0;
}

@media (min-width: 769px) {
  .post {
    display: grid !important;
  }
}

@media (max-width: 768px) {
  .reaction-add-btn {
    width: 32px;
    height: 32px;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ UI/UX AUDIT 2026 — Standards Modernes (2023+)                  ║
   ║ Applied from UI_UX_AUDIT.md                                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════
   §2 — SMART BOTTOM NAV (Scroll-responsive)
   Hide on scroll-down, instant reappear on scroll-up
   ═══════════════════════════════════════════════ */
.mobile-bottom-nav {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.fixed-reply-form {
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.fixed-reply-form.reply-chrome-no-anim {
  transition: none !important;
}

.main-content.topic-layout.has-topic-reply-chrome #topic-reply-state.reply-chrome-no-anim {
  transition: none !important;
}

.mobile-bottom-nav.smart-nav-hidden {
  transform: translateY(100%);
}

.fixed-reply-form.smart-reply-hidden {
  transform: translateY(100%);
}

/* ═══════════════════════════════════════════════
   §3 — BODY SCROLL LOCK (Active Modals)
   Prevents background scroll when modals are open
   ═══════════════════════════════════════════════ */
body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

/* Also lock on native <dialog> open — browsers don't always do this */
body:has(dialog[open]) {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   §4 — SCROLL BUTTONS: Auto-fade on idle
   Fade out after 3s of inactivity
   ═══════════════════════════════════════════════ */
.nav-btn.scroll-idle {
  opacity: 0 !important;
  pointer-events: none;
  transition:
    opacity 0.8s ease,
    transform 0.3s ease;
}

/* ═══════════════════════════════════════════════
   §6 — ENRICHED EMPTY STATES
   Explain, Educate, Incite action
   ═══════════════════════════════════════════════ */
.dropdown-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px !important;
  color: var(--text-muted);
  gap: 8px;
}

.dropdown-empty .empty-icon {
  font-size: 2rem;
  opacity: 0.3;
  margin-bottom: 4px;
}

.dropdown-empty .empty-message {
  font-size: 0.9rem;
  line-height: 1.5;
}

.dropdown-empty .empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-primary);
  background: var(--bg-surface-alt, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-empty .empty-cta:hover {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 197, 69, 0.2);
}

[data-theme="deep-ether"] .dropdown-empty .empty-cta:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* ═══════════════════════════════════════════════
   §7 — TOUCH TARGETS: 44×44px minimum (WCAG / Apple HIG)
   Global pass for interactive elements on mobile
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Filter buttons / tags */
  .filter-btn,
  .tag,
  .chip,
  .badge-clickable {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* All header action buttons */
  .header-controls button,
  .header-controls a {
    min-width: 44px;
    min-height: 44px;
  }

  /* Notification items */
  .notif-item {
    min-height: 56px;
    padding: 10px 12px;
  }

  /* Message items */
  .msg-item {
    min-height: 56px;
    padding: 10px 12px;
  }

  /* Generic clickable elements */
  a.clickable,
  button.compact {
    min-height: 44px;
    padding: 10px 12px;
  }
}

/* ═══════════════════════════════════════════════
   §7 — FOCUS-VISIBLE: Enhanced keyboard navigation
   Clear, beautiful focus outlines across themes
   ═══════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Override outline interference on inputs/textareas that use box-shadow */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg-surface),
    0 0 0 4px var(--accent-primary);
}

/* Don't show focus outline for mouse/touch clicks */
:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════════════════════════════════════════════
   §7 — AFFORDANCE: Button hover/active feedback
   Visual cues for interactive elements
   ═══════════════════════════════════════════════ */
@media (hover: hover) {
  .notif-item:hover,
  .msg-item:hover {
    background: var(--bg-surface-alt);
    transition: background 0.15s ease;
  }
}

.notif-item:active,
.msg-item:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* ═══════════════════════════════════════════════
   §9 — WHITE SPACE: Increased breathing room
   Subtle spacing boost for cognitive relief
   ═══════════════════════════════════════════════ */
@media (min-width: 769px) {
  .main-content:not(.topic-layout) {
    padding: 16px 20px;
    min-width: 0;
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════
   §9 — BREADCRUMBS: Wayfinding for deep views
   Admin, Profile, Settings, Clans
   ═══════════════════════════════════════════════ */
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.admin-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.admin-breadcrumb a:hover {
  color: var(--accent-primary);
}

.breadcrumb-sep {
  opacity: 0.4;
  font-size: 0.9em;
  user-select: none;
}

.breadcrumb-current {
  color: var(--text-main);
  font-weight: 600;
}

/* ===================================
   Dark Themes: Hot Topics Contrast Boost
   =================================== */
[data-theme="deep-ether"] .topic-card.hot,
[data-theme="dark"] .topic-card.hot,
[data-theme="grey"] .topic-card.hot {
  --topic-hot-bg: linear-gradient(
    135deg,
    rgba(255, 87, 34, 0.15) 0%,
    rgba(255, 152, 0, 0.08) 100%
  );
  --topic-hot-bg-hover: linear-gradient(
    135deg,
    rgba(255, 87, 34, 0.22) 0%,
    rgba(255, 152, 0, 0.12) 100%
  );
  --topic-hot-border: rgba(255, 87, 34, 0.7);
  --topic-hot-border-hover: rgba(255, 87, 34, 0.85);
  --topic-hot-shadow: 0 0 12px rgba(255, 87, 34, 0.15);
  --topic-hot-shadow-hover: 0 0 16px rgba(255, 87, 34, 0.25);
  --topic-hot-bump-out: rgba(255, 87, 34, 0.7);
  --topic-hot-bump-in: rgba(255, 87, 34, 0.35);
}

/* =========================================================
   MOBILE Z-INDEX HIERARCHY OVERRIDES (STRICT — !important immunisé)
   ========================================================= */
@media (max-width: 768px) {
  /* ── Chaîne de hauteurs : html → body → app-layout → sidebar ── */
  /* Sur PC, body a height:100vh (voir @media min-width:769px).
       Sur mobile il n'a que min-height:100% ce qui casse la chaîne.
       On corrige ici pour que .app-layout puisse remplir tout l'espace. */
  html,
  body,
  #app,
  .app-layout {
    height: 100%;
    background-color: var(--bg-body) !important;
  }

  body {
    /* body est déjà display:flex flex-direction:column (règle globale).
           On lui donne min-height:100dvh pour les mobiles avec barre d'URL rétractable. */
    min-height: 100dvh;
    background-color: var(--bg-body);
    /* Évite le fond noir au rebond de scroll */
  }

  /* .app-layout doit remplir tout l'espace sous le header */
  .app-layout {
    flex: 1 1 auto;
    /* Grandit pour remplir le body flex-column */
    min-height: 0;
    /* Permet à flex de réduire en dessous du contenu */
    background: var(--bg-body);
    /* Fond cohérent, no black flash */
  }

  /* Sidebar (liste des topics sur l'accueil) :
       height:100% fonctionne car .app-layout a maintenant une hauteur réelle */
  .sidebar {
    min-height: 100px;
    /* Empêche flex de l'écraser à 0 */
    overflow-y: auto;
  }

  /* Tient compte de la fin de liste sans créer de bloc de couleur "fantôme" (bug sub-pixel) */
  .sidebar::after {
    display: none !important;
  }

  #sidebar-topics {
    padding-bottom: 90px !important;
    /* Assure que ce padding transparent remplace l'ancien pseudo-élément */
    background-color: transparent !important;
  }

  /* 1. Header mobile : z-index haut mais position sticky conservée
       (position: fixed casserait le swipe layout en retirant 50px du flux) */
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
  }

  /* 2. Barre de navigation basse : clouée en bas, empêche le saut en haut */
  .mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    /* Empêche le bug où elle saute en haut */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9500 !important;
    /* Above topic-layout (9500) but below reply form (9999) */
  }

  /* 3. Barre d'écriture (reply form) : intégrée dans le flux Flexbox du topic
       FIX: Ne PAS utiliser position:fixed ici. Le parent topic-layout a eu
       un transform (now removed) qui créait un containing block, cassant fixed.
       De plus, le topic-layout est un flex column — flex-shrink:0 suffit
       pour garder le reply form collé en bas naturellement. */
  .fixed-reply-form {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto;
    right: auto;
    width: 100%;
    z-index: 9999 !important;
    flex-shrink: 0 !important;
    /* Passe au-dessus de la nav bar quand on écrit */
  }

  body.mobile-view-content .main-content.topic-layout.mobile-keyboard-open .fixed-reply-form,
  body.mobile-view-content .main-content.topic-layout.mobile-keyboard-open .fixed-reply-form.smart-reply-hidden {
    transform: translateY(0) !important;
  }

  body.mobile-view-content .main-content.topic-layout.mobile-keyboard-open.has-topic-reply-chrome {
    --topic-reply-occupied: var(--topic-reply-height) !important;
  }

  /* ── VUE TOPIC : 4 correctifs UX ── */

  /* 4a. Titre du topic toujours visible (sticky) */
  body.mobile-view-content .topic-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40;
    background-color: var(--bg-body) !important;
    /* Masque les messages qui défilent dessous */
    background: var(--bg-body) !important;
  }

  /* 4b. Coussin de sécurité : dernier message accessible sous la barre d'écriture */
  body.mobile-view-content .main-content.topic-layout #posts-container,
  body.mobile-view-content .main-content.topic-layout .topic-container {
    padding-bottom: 40px !important;
    /* Hauteur réduite pour éviter l'espace excessif sous les messages */
  }

  /* 4c. Contient l'overscroll pour empêcher de voir la sidebar en transparence */
  body.mobile-view-content .main-content.topic-layout,
  body.mobile-view-content .topic-scroll-container {
    overscroll-behavior-y: contain !important;
    /* Le background opaque est déjà défini plus haut (bg-body). */
  }

  /* 4d. Auto-hide transitions are defined once in the shared smart chrome block above. */
}

/* CONSIGNES STRICTES MOBILE TITLE STICKY */
@media (max-width: 768px) {
  body.mobile-view-content .topic-header,
  body.mobile-topic-view .topic-header,
  .topic-layout .topic-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background-color: var(--bg-body) !important;
    background: var(--bg-body) !important;
  }

  /* Floating scroll arrows — z-index must be above .main-content (9000) */
  #scroll-top-btn,
  #scroll-bottom-btn,
  .nav-btn-top,
  .nav-btn-bottom {
    position: fixed !important;
    z-index: 20000 !important;
  }
}



/* =========================================================================
   VILLAGE.CX SOMBRE REPLICA (Realm: Bordel) — EXPERT MODE (CLONE EXACT)
   ========================================================================= */
html[data-realm="bordel"][data-theme="deep-ether"] {
  /* Palette stricte Village.cx basée sur capture d'écran */
  --bg-body: #121212;
  --bg-surface: #121212;
  --bg-surface-alt: #1a1a1a;
  --bg-surface-raised: #1f1f1f;
  --bg-header: #121212;
  
  --border-color: #262626;
  --surface-hover: #1f1f1f;
  --surface-overlay: #121212;
  --border-subtle: #262626;
  --glass-surface: #121212;

  /* Typographie très spécifique suite à l'audit du site (Roboto 16px) */
  --text-main: #ebebeb;
  --text-secondary: #8a8a8a;
  --text-muted: #8a8a8a;
  --text-link: #3b91ff; /* Bleu exact village */
  --text-link-hover: #60a5fa;

  /* Accents */
  --accent-primary: #3b91ff; 
  --accent-text: #3b91ff; 
  --accent-secondary: #3b91ff;
  --accent-danger: #cc2514; /* Rouge dossier */
  --accent-warning: #cca914; /* Jaune dossier */
  --accent-success: #6c9c10; /* Vert tack pin */
  --accent-blue: #307ecc;

  /* Composants */
  --quote-bg: #202020;
  --quote-border: #3b82f6;
  --spoiler-bg: #2a2a2a;
  --input-bg: #171717;
  --input-border: #2a2a2a;

  /* Code */
  --code-bg: #111111;
  --code-border: #2a2a2a;
  --code-text: #60a5fa;

  /* Formes (Village est très carré) */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;

  /* Zéro glow */
  --glow-shadow: none;
  --header-glow: none;
  --shadow-card: none;
  --shadow-elevated: none;
  --shadow-floating: none;

  /* Topics & Posts */
  --topic-title-color: #3b82f6;
  --topic-title-shadow: none;
  --post-content-color: #b0b0b0;
  --post-bg: #171717;
  --post-border: #2a2a2a;
  --bg-card: #171717;

  /* Toasts/Modals */
  --modal-backdrop: rgba(0,0,0,0.85);
  --focus-ring-color: transparent;
}

/* Base Body and fonts */
html[data-realm="bordel"][data-theme="deep-ether"] body {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #b0b0b0;
  background-color: #171717;
  background-image: none !important;
}

/* Links */
html[data-realm="bordel"][data-theme="deep-ether"] a {
  text-decoration: none;
  color: #3b82f6;
}
html[data-realm="bordel"][data-theme="deep-ether"] a:hover {
  text-decoration: underline;
  color: #60a5fa;
}

/* ---------------- STRUCTURE GLOBALE ---------------- */
html[data-realm="bordel"][data-theme="deep-ether"] .main-content {
  box-shadow: none !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 0 !important;
  background: #171717 !important;
  animation: none !important; 
  padding: 10px !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .app-layout {
  gap: 0px;
}

/* ---------------- HEADER ET NAVBAR ---------------- */
html[data-realm="bordel"][data-theme="deep-ether"] header {
  background-color: #171717 !important;
  border-bottom: 1px solid #2a2a2a !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .header-logo-text {
  font-family: Arial, sans-serif !important;
  font-weight: bold;
  font-size: 20px;
  color: #b0b0b0;
}

/* ---------------- TOPICS (Liste) ---------------- */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card {
  border: none !important;
  border-bottom: 1px solid #2a2a2a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  transition: none !important;
  display: flex !important;
  align-items: center !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .topic-card:hover {
  background-color: #202020 !important;
  transform: none !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .topic-card .topic-title,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card-title {
  font-weight: 500 !important; /* Medium weight exact */
  font-size: 16px !important; /* 16px titre exact */
  color: #3b91ff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
}

/* Sujet actif = plus clair (comme sur l'image pour les topics chauds) */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card.hot .topic-card-title {
   color: #5b9ce6 !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .topic-card .topic-meta {
  color: #8a8a8a !important;
  font-size: 14px !important;
}

/* Suppression de la couleur par défaut pour conserver la couleur de rôle Village (rouge modo, etc) */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card .topic-date {
  color: #8a8a8a !important;
}

/* Supprimer les effets 3D et bulles */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-stats .badge,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-stats div,
html[data-realm="bordel"][data-theme="deep-ether"] .reply-count-inline {
  background: transparent !important;
  border: none !important;
  color: #8a8a8a !important;
  font-size: 14px !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---------------- POSTS (Messages) ---------------- */
html[data-realm="bordel"][data-theme="deep-ether"] .post {
  border: 1px solid #222222 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
  filter: none !important;
  margin-bottom: 10px !important;
  background-color: #1a1a1a !important; /* Gris de fond exact du post ! */
  transition: none !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .post:hover {
  background-color: #1a1a1a !important;
  box-shadow: none !important;
  transform: none !important;
}

/* FIX: Les posts spéciaux (top-violator, dieu-dechu, poire-artiste) utilisent
   background: linear-gradient(..., var(--bg-surface)...) qui résout en bleu Deep Ether (#0e1528).
   Le background shorthand n'est PAS overridé par background-color du bordel.
   → On force le background à utiliser #1a1a1a (gris bordel) au lieu de --bg-surface. */
html[data-realm="bordel"][data-theme="deep-ether"] .post.is-top-violator {
  background: linear-gradient(135deg, #1a1a1a 0%, rgba(255, 215, 0, 0.05) 100%) !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .post.is-dieu-dechu {
  background: #1a1a1a !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .post.is-poire-artiste {
  background: #1a1a1a !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .post-header-row {
  background-color: transparent !important; /* MÊME COULEUR QUE LE POST */
  border-bottom: 1px solid #222222 !important; /* Ligne de séparation très fine */
  padding: 12px 16px !important; /* Un peu plus d'espace */
  border-radius: 0 !important;
  align-items: flex-start !important; /* Alignement vers le haut pour le layout avatar */
}

/* Auteur du post */
html[data-realm="bordel"][data-theme="deep-ether"] .post-author {
  font-weight: 400 !important; /* Normal sur Village */
  font-size: 14px !important;
  color: #8a8a8a !important; /* Pseudo en gris standard d'après l'audit */
}

/* Avatars Old-School (Affichés partout, format carré comme Village) */
html[data-realm="bordel"][data-theme="deep-ether"] .author-avatar,
html[data-realm="bordel"][data-theme="deep-ether"] .author-avatar-small,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-author-avatar,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card img {
  display: inline-block !important; /* Force l'affichage */
  border-radius: 6px !important; /* Rayon exact de 6px extrait de Village ! */
  border: none !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .topic-card img {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* Avatar dans les posts : GROS + carré arrondi comme Village */
html[data-realm="bordel"][data-theme="deep-ether"] .post-header-row .author-avatar-small {
  width: 48px !important;
  height: 48px !important;
  border-radius: 6px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Aligner l'avatar avec le pseudo et les clans */
html[data-realm="bordel"][data-theme="deep-ether"] .post-author-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Contenu du texte */
html[data-realm="bordel"][data-theme="deep-ether"] .post-content {
  font-size: 16px !important; /* 16px exact */
  line-height: 24px !important; /* 24px exact */
  padding: 10px 8px !important;
  color: #ebebeb !important;
}

/* Dates */
html[data-realm="bordel"][data-theme="deep-ether"] .post-date {
  color: #555555 !important;
  font-size: 11px !important;
}

/* Boutons intra-posts (Répondre, Editer) */
html[data-realm="bordel"][data-theme="deep-ether"] .post-action-btn {
  color: #555555 !important;
  background: transparent !important;
  border: none !important;
  font-size: 11px !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .post-action-btn:hover {
  color: #3b82f6 !important;
  background: transparent !important;
  text-decoration: underline !important;
}

/* ---------------- FORMS ET BOUTONS GLOBAUX ---------------- */
html[data-realm="bordel"][data-theme="deep-ether"] .btn,
html[data-realm="bordel"][data-theme="deep-ether"] .btn-create-topic {
  background-color: transparent !important; /* Pas de fond = texte seul style Village */
  color: #27a346 !important; /* Vert des "text-buttons" style village */
  border-radius: 0px !important;
  font-weight: bold !important;
  box-shadow: none !important;
  border: none !important;
  transition: color 0.1s !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .btn:hover,
html[data-realm="bordel"][data-theme="deep-ether"] .btn-create-topic:hover {
  background-color: transparent !important;
  color: #3bca5e !important;
  transform: none !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .form-control,
html[data-realm="bordel"][data-theme="deep-ether"] .editor-textarea {
  background-color: #171717 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 0px !important;
  color: #b0b0b0 !important;
  box-shadow: none !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .form-control:focus,
html[data-realm="bordel"][data-theme="deep-ether"] .editor-textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------------- ELEMENTS SECONDAIRES ---------------- */
html[data-realm="bordel"][data-theme="deep-ether"] .sidebar,
html[data-realm="bordel"][data-theme="deep-ether"] .right-sidebar {
  background: #171717 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .sidebar-title {
  color: #707070 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  border-bottom: 1px dotted #2a2a2a !important;
  padding-bottom: 4px !important;
  margin-bottom: 8px !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .category-btn {
  border-radius: 0px !important;
  font-size: 13px !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .category-btn.active {
  background-color: #202020 !important;
  color: #3b82f6 !important;
  border-left: 2px solid #3b82f6 !important;
  box-shadow: none !important;
}

/* Ensure pagination in Bordel mimics flat style */
html[data-realm="bordel"][data-theme="deep-ether"] .pagination-btn {
  background: #171717 !important;
  border: 1px solid #2a2a2a !important;
  color: #3b82f6 !important;
  border-radius: 0px !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .pagination-btn.active {
  background: #3b82f6 !important;
  color: #111111 !important;
}

/* =========================================================================
   ICONES & STYLES TEXTE EXACTS VILLAGE.CX (Remplacement visuel des bulles par des dossiers)
   ========================================================================= */
/* Removing incorrect pseudo elements that replaced message/fire icons with folders */

/* Epingles (Pinned) : Vert Lime vif exact de Village (Tack) */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-pin-badge {
  color: #72a912 !important; /* Vert pin exact de l'image */
  margin-right: 4px !important;
}

/* Ne PAS cacher l'icone bulle à coté des compteurs de vue (il y a bien la petite bulle sur Village) */
html[data-realm="bordel"][data-theme="deep-ether"] .reply-count-inline i {
  color: #737373 !important;
}

/* Cacher les likes/coeurs dans les posts pour faire "board" pur */
html[data-realm="bordel"][data-theme="deep-ether"] .post-reactions {
  display: none !important;
}

/* =========================================================================
   FORCER LA POLICE ROBOTO PARTOUT (Véritables propriétés du site live)
   ========================================================================= */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card .topic-title,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card-title,
html[data-realm="bordel"][data-theme="deep-ether"] .post-content,
html[data-realm="bordel"][data-theme="deep-ether"] .post-author,
html[data-realm="bordel"][data-theme="deep-ether"] .btn,
html[data-realm="bordel"][data-theme="deep-ether"] .form-control,
html[data-realm="bordel"][data-theme="deep-ether"] .sidebar-title,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card .topic-meta,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-date,
html[data-realm="bordel"][data-theme="deep-ether"] body,
html[data-realm="bordel"][data-theme="deep-ether"] button,
html[data-realm="bordel"][data-theme="deep-ether"] input,
html[data-realm="bordel"][data-theme="deep-ether"] textarea,
html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item span {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* =========================================================================
   MOBILE BOTTOM NAV EXACTE (VILLAGE.CX) - AFFICHÉE EN BAS DE LA LISTE SUR PC
   ========================================================================= */
@media (min-width: 769px) {
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-bottom-nav {
    display: flex !important;
    /* FIX: position:sticky + bottom:0 is unreliable in a flex column when
       sidebar content hasn't loaded yet or is too short — the element stays
       at its natural (top) position instead of the bottom. margin-top:auto
       in a flex child reliably pushes it to the bottom. */
    position: relative !important;
    bottom: auto !important;
    margin-top: auto !important;
    width: 100% !important;
    z-index: 900 !important;
    flex-shrink: 0 !important;
    background: #1c1c1c !important; /* Gris de zone UI Village */
    border-top: 1px solid #262626 !important;
    box-shadow: none !important;
    height: 52px !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item {
    color: #737373 !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  /* Village sur PC n'a que 2 onglets : Accueil (Poire) et Messagerie */
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item[data-nav="search"],
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item[data-nav="create"],
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item[data-nav="notifications"],
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item[data-nav="login"],
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item[data-nav="register"] {
    display: none !important;
  }

  /* Ajouter des labels texte sous les icônes */
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item[data-nav="messaging"]::after {
    content: "Messagerie" !important;
    font-size: 10px !important;
    color: inherit !important;
  }
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item[data-nav="home"]::after {
    content: "Poire" !important;
    font-size: 10px !important;
    color: inherit !important;
  }

  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item svg {
    width: 20px !important;
    height: 20px !important;
    color: #737373 !important;
  }

  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item.active,
  html[data-realm="bordel"][data-theme="deep-ether"] .mobile-nav-item.active svg {
    color: #ebebeb !important;
  }
}

/* =========================================================================
   BOUTON "NOUVEAU SUJET" ET BARRE LATERALE EXACTE (VILLAGE.CX)
   ========================================================================= */
@media (min-width: 769px) {
html[data-realm="bordel"][data-theme="deep-ether"] .sidebar-action-bar {
  background: #171717 !important; /* Même fond que la sidebar */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 10px 17px 10px !important; /* Padding top 8px + espacement pour Village */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Centrer Nouveau Sujet */
  position: relative !important;
  min-height: auto !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic {
  background-color: transparent !important;
  background-image: none !important;
  color: #10b981 !important; /* Emerald-500 exact Village.cx */
  padding: 8px 12px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  opacity: 1 !important;
  text-transform: none !important;
}

html[data-realm="bordel"][data-theme="deep-ether"] .sidebar-search-btn {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #737373 !important; /* Icône recherche terne */
  position: absolute !important;
  right: 15px !important;
}

}

/* =========================================================================
   NETTOYAGE ET FINITIONS EXACTES DU MODE BORDEL
   ========================================================================= */

/* Cacher le bouton "Changer de forum" de Poire.Space (RETIRE A LA DEMANDE DE L'USER) */
/* html[data-realm="bordel"][data-theme="deep-ether"] .sidebar-forum-switch {
  display: none !important;
} */

/* Cacher TOUS les badges de rôle (SG, ZG, admin, images) sous les avatars ou pseudo */
html[data-realm="bordel"][data-theme="deep-ether"] .role-badge,
html[data-realm="bordel"][data-theme="deep-ether"] .rank-badge,
html[data-realm="bordel"][data-theme="deep-ether"] .user-badge,
html[data-realm="bordel"][data-theme="deep-ether"] .author-badges,
html[data-realm="bordel"][data-theme="deep-ether"] .p-badge,
html[data-realm="bordel"][data-theme="deep-ether"] .post-author-badges,
html[data-realm="bordel"][data-theme="deep-ether"] .badge-container,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-badges {
  display: none !important;
}

/* Retrait de l'horrible bordure bleue brillante du sujet actif pour le fond discret Village */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card.active {
  background-color: #222d3b !important; /* Le bleu très très sombre de Village */
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Contexte de réponse dans le message (citation) */
html[data-realm="bordel"][data-theme="deep-ether"] .post-reply-context {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid #3b82f6 !important;
  padding: 4px 8px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
}

/* =========================================================================
   VILLAGE.CX : HEXAGONE EXTREME, NOIR PROFOND & TITRE
   ========================================================================= */

/* L'Hexagone (Badge de niveau) avec forme pointue verticale exacte Village.cx */
html[data-realm="bordel"][data-theme="deep-ether"] .author-level-badge {
  background-color: #3b4249 !important;
  clip-path: polygon(3% 25%, 50% -4%, 97% 25%, 97% 75%, 50% 104%, 3% 75%) !important;
  border-radius: 0 !important;
  width: 30px !important;
  height: 30px !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .author-level-badge svg {
  display: none !important; /* Cache le SVG de base The Poire */
}
html[data-realm="bordel"][data-theme="deep-ether"] .author-level-badge .level-text {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: bold !important;
  font-size: 12px !important;
  color: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 0 !important;
}

/* Clan badges dans les posts : même taille + forme hexagonale comme le level badge */
html[data-realm="bordel"][data-theme="deep-ether"] .author-clans .clan-badge {
  width: 30px !important;
  height: 30px !important;
  clip-path: polygon(3% 25%, 50% -4%, 97% 25%, 97% 75%, 50% 104%, 3% 75%) !important;
  border-radius: 0 !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .author-clans .clan-badge img:not(.clan-badge-glow) {
  width: 100% !important;
  height: 100% !important;
  clip-path: polygon(3% 25%, 50% -4%, 97% 25%, 97% 75%, 50% 104%, 3% 75%) !important;
  border-radius: 0 !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .author-clans .clan-badge::after {
  display: none !important; /* Pas de reflet squircle */
}

/* Forcer tout le fond du site, incluant l'intérieur d'un sujet (Topic) à être NOIR (#161616) */
html[data-realm="bordel"][data-theme="deep-ether"] body,
html[data-realm="bordel"][data-theme="deep-ether"] .app-layout,
html[data-realm="bordel"][data-theme="deep-ether"] .main-content,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-scroll-container,
html[data-realm="bordel"][data-theme="deep-ether"] #loading-sentinel {
  background-color: #161616 !important;
  background-image: none !important;
}

/* Le bandeau du sujet (qui contient le titre h1) — fond transparent comme Village */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-header {
  background-color: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 8px 0 !important;
}

/* Le conteneur du titre : fond gris arrondi avec bordure subtile comme Village.cx */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-header .topic-header-content {
  background-color: #2a2a2e !important;
  border-radius: 10px !important;
  border: 1px solid #3a3a3e !important;
  padding: 10px 20px !important;
  margin: 0 12px !important;
}

/* La flèche retour : cyan comme Village */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-back-btn {
  color: #4ecdc4 !important;
}

/* Le titre H1 du sujet *A L'INTÉRIEUR DU SUJET* - BLANC CENTRÉ comme sur Village.cx */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-header .topic-title,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-header h1 {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #d0d0d0 !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================================
   LAYOUT PRECIS DES CARDS DE SUJETS (TOPICS) POUR IMITER VILLAGE.CX
   ========================================================================= */
/* Cacher définitivement les avatars dans la liste des sujets pour le mode Bordel */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card-avatar-col,
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card img.topic-author-avatar {
  display: none !important;
}

/* Forcer la carte de sujet à être en position relative avec le padding adéquat */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card {
  position: relative !important;
  padding: 8px 50px 8px 36px !important; /* Laisse de la place à gauche pour l'icône, à droite pour la date */
  display: block !important;
  min-height: 48px !important;
}

/* Retrait de l'affichage flex pour manipuler l'intérieur plus facilement */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card-main-col {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Header-line : titre + reply count INLINE comme Village */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card-header-line {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 2px 6px !important;
  margin-bottom: 2px !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* Meta-line : juste le pseudo de l'auteur en dessous */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card-meta-line {
  display: block !important;
  margin-top: 0 !important;
}

/* Reply count : INLINE sur la header-line à côté du titre (comme Village) */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card-meta-line .reply-count-inline {
  display: none !important; /* Cacher dans la meta-line */
}
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card-header-line .reply-count-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #8a8a8a !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

/* Injection des fausses icônes de dossiers pour tout le monde */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card::before {
  content: "\f07b" !important; /* Icône dossier FontAwesome */
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 12px !important;
  top: 10px !important;
  color: #cda814 !important; /* Jaune dossier */
  font-size: 16px !important;
}

/* Remplacement de l'icône par le Pin vert si épinglé */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card.pinned::before {
  content: "\f08d" !important; /* Tack icon */
  color: #72a912 !important; /* Vert pin */
}

/* Dossier rouge si c'est un topic actif (hot) */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card.hot::before {
  color: #d11c10 !important; /* Rouge sombre de Village */
}

/* Cacher les badges épinglés générés par le JS vu qu'on a le ::before */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-pin-badge {
  display: none !important;
}

/* La Date va flotter de manière absolue tout à droite */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-date {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #8a8a8a !important;
  font-size: 13px !important;
}

/* Cacher les anciens points séparateurs • */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-meta-sep {
  display: none !important;
}

/* Le reply count icon : petit rectangle/commentaire style Village */
html[data-realm="bordel"][data-theme="deep-ether"] .reply-count-inline i::before {
  content: "\f4ad" !important; /* fa-comment-dots */
  font-weight: 400 !important; /* Force hollow (far) pour ressembler à la bulle Village */
}

html[data-realm="bordel"][data-theme="deep-ether"] .reply-count-inline i {
  color: #8a8a8a !important;
  font-size: 12px !important;
}

/* Le nombre de réponses */
html[data-realm="bordel"][data-theme="deep-ether"] .reply-count-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-left: 4px !important;
  color: #8a8a8a !important;
  font-size: 13px !important;
}

/* =========================================================================
   RÉTABLISSEMENT DES POSTS CONSÉCUTIFS (DEMANDE USER)
   ========================================================================= */
html[data-realm="bordel"][data-theme="deep-ether"] .post.consecutive-post .post-header-row {
  display: none !important; /* On cache bien l'avatar et le pseudo */
}
html[data-realm="bordel"][data-theme="deep-ether"] .post.consecutive-post {
  margin-top: -11px !important; /* On remonte pour combler le margin-bottom de 10px du parent et fusionner les bordures */
  border-top: none !important; /* Fusionne le cadre */
  padding-top: 0 !important;
}
html[data-realm="bordel"][data-theme="deep-ether"] .post.consecutive-post .post-content {
  padding-top: 4px !important; /* Espacement intérieur léger */
}

/* =========================================================================
   VILLAGE.CX CLAIR REPLICA (Realm: Bordel) — EXPERT MODE (CLONE EXACT)
   ========================================================================= */
html[data-realm="bordel"][data-theme="light-ether"] {
  /* Palette stricte Village.cx basée sur capture d'écran */
  --bg-body: #f4f5f7;
  --bg-surface: #f4f5f7;
  --bg-surface-alt: #fbfbfb;
  --bg-surface-raised: #f0f0f0;
  --bg-header: #f4f5f7;
  
  --border-color: #e5e5e5;
  --surface-hover: #f0f0f0;
  --surface-overlay: #f4f5f7;
  --border-subtle: #e5e5e5;
  --glass-surface: #f4f5f7;

  /* Typographie très spécifique suite à l'audit du site (Roboto 16px) */
  --text-main: #222222;
  --text-secondary: #777777;
  --text-muted: #777777;
  --text-link: #3b91ff; /* Bleu exact village */
  --text-link-hover: #60a5fa;

  /* Accents */
  --accent-primary: #3b91ff; 
  --accent-text: #3b91ff; 
  --accent-secondary: #3b91ff;
  --accent-danger: #cc2514; /* Rouge dossier */
  --accent-warning: #cca914; /* Jaune dossier */
  --accent-success: #6c9c10; /* Vert tack pin */
  --accent-blue: #307ecc;

  /* Composants */
  --quote-bg: #f2f2f2;
  --quote-border: #3b82f6;
  --spoiler-bg: #dddddd;
  --input-bg: #ffffff;
  --input-border: #dddddd;

  /* Code */
  --code-bg: #111111;
  --code-border: #dddddd;
  --code-text: #60a5fa;

  /* Formes (Village est très carré) */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;

  /* Zéro glow */
  --glow-shadow: none;
  --header-glow: none;
  --shadow-card: none;
  --shadow-elevated: none;
  --shadow-floating: none;

  /* Topics & Posts */
  --topic-title-color: #3b82f6;
  --topic-title-shadow: none;
  --post-content-color: #444444;
  --post-bg: #ffffff;
  --post-border: #dddddd;
  --bg-card: #ffffff;

  /* Toasts/Modals */
  --modal-backdrop: rgba(0,0,0,0.85);
  --focus-ring-color: transparent;
}

/* Base Body and fonts */
html[data-realm="bordel"][data-theme="light-ether"] body {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #444444;
  background-color: #ffffff;
  background-image: none !important;
}

/* Links */
html[data-realm="bordel"][data-theme="light-ether"] a {
  text-decoration: none;
  color: #3b82f6;
}
html[data-realm="bordel"][data-theme="light-ether"] a:hover {
  text-decoration: underline;
  color: #60a5fa;
}

/* ---------------- STRUCTURE GLOBALE ---------------- */
html[data-realm="bordel"][data-theme="light-ether"] .main-content {
  box-shadow: none !important;
  border: 1px solid #dddddd !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  animation: none !important; 
  padding: 10px !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .app-layout {
  gap: 0px;
}

/* ---------------- HEADER ET NAVBAR ---------------- */
html[data-realm="bordel"][data-theme="light-ether"] header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #dddddd !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .header-logo-text {
  font-family: Arial, sans-serif !important;
  font-weight: bold;
  font-size: 20px;
  color: #444444;
}

/* ---------------- TOPICS (Liste) ---------------- */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card {
  border: none !important;
  border-bottom: 1px solid #dddddd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  transition: none !important;
  display: flex !important;
  align-items: center !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .topic-card:hover {
  background-color: #f2f2f2 !important;
  transform: none !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .topic-card .topic-title,
html[data-realm="bordel"][data-theme="light-ether"] .topic-card-title {
  font-weight: 500 !important; /* Medium weight exact */
  font-size: 16px !important; /* 16px titre exact */
  color: oklch(54.6% .245 262.881) !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  display: block !important;
  max-width: 100% !important;
}

/* Sujet actif = plus clair (comme sur l'image pour les topics chauds) */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card.hot .topic-card-title {
   color: #5b9ce6 !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .topic-card .topic-meta {
  color: #777777 !important;
  font-size: 14px !important;
}

/* Suppression de la couleur par défaut pour conserver la couleur de rôle Village (rouge modo, etc) */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card .topic-date {
  color: #777777 !important;
}

/* Supprimer les effets 3D et bulles */
html[data-realm="bordel"][data-theme="light-ether"] .topic-stats .badge,
html[data-realm="bordel"][data-theme="light-ether"] .topic-stats div,
html[data-realm="bordel"][data-theme="light-ether"] .reply-count-inline {
  background: transparent !important;
  border: none !important;
  color: #777777 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---------------- POSTS (Messages) ---------------- */
html[data-realm="bordel"][data-theme="light-ether"] .post {
  border: 1px solid #e0e0e0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
  filter: none !important;
  margin-bottom: 10px !important;
  background-color: #fbfbfb !important; /* Gris de fond exact du post ! */
  transition: none !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .post:hover {
  background-color: #fbfbfb !important;
  box-shadow: none !important;
  transform: none !important;
}

/* FIX: Même correctif que pour deep-ether — forcer le fond bordel sur les posts spéciaux */
html[data-realm="bordel"][data-theme="light-ether"] .post.is-top-violator {
  background: linear-gradient(135deg, #fbfbfb 0%, rgba(255, 215, 0, 0.08) 100%) !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .post.is-dieu-dechu {
  background: #fbfbfb !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .post.is-poire-artiste {
  background: #fbfbfb !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .post-header-row {
  background-color: transparent !important; /* MÊME COULEUR QUE LE POST */
  border-bottom: 1px solid #e0e0e0 !important; /* Ligne de séparation très fine */
  padding: 12px 16px !important; /* Un peu plus d'espace */
  border-radius: 0 !important;
  align-items: flex-start !important; /* Alignement vers le haut pour le layout avatar */
}

/* Auteur du post */
html[data-realm="bordel"][data-theme="light-ether"] .post-author {
  font-weight: 400 !important; /* Normal sur Village */
  font-size: 14px !important;
  color: #777777 !important; /* Pseudo en gris standard d'après l'audit */
}

/* Avatars Old-School (Affichés partout, format carré comme Village) */
html[data-realm="bordel"][data-theme="light-ether"] .author-avatar,
html[data-realm="bordel"][data-theme="light-ether"] .author-avatar-small,
html[data-realm="bordel"][data-theme="light-ether"] .topic-author-avatar,
html[data-realm="bordel"][data-theme="light-ether"] .topic-card img {
  display: inline-block !important; /* Force l'affichage */
  border-radius: 6px !important; /* Rayon exact de 6px extrait de Village ! */
  border: none !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .topic-card img {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* Avatar dans les posts : GROS + carré arrondi comme Village */
html[data-realm="bordel"][data-theme="light-ether"] .post-header-row .author-avatar-small {
  width: 48px !important;
  height: 48px !important;
  border-radius: 6px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Aligner l'avatar avec le pseudo et les clans */
html[data-realm="bordel"][data-theme="light-ether"] .post-author-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Contenu du texte */
html[data-realm="bordel"][data-theme="light-ether"] .post-content {
  font-size: 16px !important; /* 16px exact */
  line-height: 24px !important; /* 24px exact */
  padding: 10px 8px !important;
  color: #222222 !important;
}

/* Dates */
html[data-realm="bordel"][data-theme="light-ether"] .post-date {
  color: #999999 !important;
  font-size: 11px !important;
}

/* Boutons intra-posts (Répondre, Editer) */
html[data-realm="bordel"][data-theme="light-ether"] .post-action-btn {
  color: #999999 !important;
  background: transparent !important;
  border: none !important;
  font-size: 11px !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .post-action-btn:hover {
  color: #3b82f6 !important;
  background: transparent !important;
  text-decoration: underline !important;
}

/* ---------------- FORMS ET BOUTONS GLOBAUX ---------------- */
html[data-realm="bordel"][data-theme="light-ether"] .btn,
html[data-realm="bordel"][data-theme="light-ether"] .btn-create-topic {
  background-color: transparent !important; /* Pas de fond = texte seul style Village */
  color: #27a346 !important; /* Vert des "text-buttons" style village */
  border-radius: 0px !important;
  font-weight: bold !important;
  box-shadow: none !important;
  border: none !important;
  transition: color 0.1s !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .btn:hover,
html[data-realm="bordel"][data-theme="light-ether"] .btn-create-topic:hover {
  background-color: transparent !important;
  color: #3bca5e !important;
  transform: none !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .form-control,
html[data-realm="bordel"][data-theme="light-ether"] .editor-textarea {
  background-color: #ffffff !important;
  border: 1px solid #dddddd !important;
  border-radius: 0px !important;
  color: #444444 !important;
  box-shadow: none !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .form-control:focus,
html[data-realm="bordel"][data-theme="light-ether"] .editor-textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------------- ELEMENTS SECONDAIRES ---------------- */
html[data-realm="bordel"][data-theme="light-ether"] .sidebar,
html[data-realm="bordel"][data-theme="light-ether"] .right-sidebar {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .sidebar-title {
  color: #666666 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  border-bottom: 1px dotted #dddddd !important;
  padding-bottom: 4px !important;
  margin-bottom: 8px !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .category-btn {
  border-radius: 0px !important;
  font-size: 13px !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .category-btn.active {
  background-color: #f2f2f2 !important;
  color: #3b82f6 !important;
  border-left: 2px solid #3b82f6 !important;
  box-shadow: none !important;
}

/* Ensure pagination in Bordel mimics flat style */
html[data-realm="bordel"][data-theme="light-ether"] .pagination-btn {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  color: #3b82f6 !important;
  border-radius: 0px !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .pagination-btn.active {
  background: #3b82f6 !important;
  color: #333333 !important;
}

/* =========================================================================
   ICONES & STYLES TEXTE EXACTS VILLAGE.CX (Remplacement visuel des bulles par des dossiers)
   ========================================================================= */
/* Removing incorrect pseudo elements that replaced message/fire icons with folders */

/* Epingles (Pinned) : Vert Lime vif exact de Village (Tack) */
html[data-realm="bordel"][data-theme="light-ether"] .topic-pin-badge {
  color: #72a912 !important; /* Vert pin exact de l'image */
  margin-right: 4px !important;
}

/* Ne PAS cacher l'icone bulle à coté des compteurs de vue (il y a bien la petite bulle sur Village) */
html[data-realm="bordel"][data-theme="light-ether"] .reply-count-inline i {
  color: #888888 !important;
}

/* Cacher les likes/coeurs dans les posts pour faire "board" pur */
html[data-realm="bordel"][data-theme="light-ether"] .post-reactions {
  display: none !important;
}

/* =========================================================================
   FORCER LA POLICE ROBOTO PARTOUT (Véritables propriétés du site live)
   ========================================================================= */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card .topic-title,
html[data-realm="bordel"][data-theme="light-ether"] .topic-card-title,
html[data-realm="bordel"][data-theme="light-ether"] .post-content,
html[data-realm="bordel"][data-theme="light-ether"] .post-author,
html[data-realm="bordel"][data-theme="light-ether"] .btn,
html[data-realm="bordel"][data-theme="light-ether"] .form-control,
html[data-realm="bordel"][data-theme="light-ether"] .sidebar-title,
html[data-realm="bordel"][data-theme="light-ether"] .topic-card .topic-meta,
html[data-realm="bordel"][data-theme="light-ether"] .topic-date,
html[data-realm="bordel"][data-theme="light-ether"] body,
html[data-realm="bordel"][data-theme="light-ether"] button,
html[data-realm="bordel"][data-theme="light-ether"] input,
html[data-realm="bordel"][data-theme="light-ether"] textarea,
html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item span {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* =========================================================================
   MOBILE BOTTOM NAV EXACTE (VILLAGE.CX) - AFFICHÉE EN BAS DE LA LISTE SUR PC
   ========================================================================= */
@media (min-width: 769px) {
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-bottom-nav {
    display: flex !important;
    position: sticky !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 900 !important;
    flex-shrink: 0 !important;
    background: #ffffff !important; /* Gris de zone UI Village */
    border-top: 1px solid #e5e5e5 !important;
    box-shadow: none !important;
    height: 52px !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item {
    color: #888888 !important;
    font-family: Roboto, Arial, Helvetica, sans-serif !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  /* Village sur PC n'a que 2 onglets : Accueil (Poire) et Messagerie */
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item[data-nav="search"],
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item[data-nav="create"],
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item[data-nav="notifications"],
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item[data-nav="login"],
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item[data-nav="register"] {
    display: none !important;
  }

  /* Ajouter des labels texte sous les icônes */
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item[data-nav="messaging"]::after {
    content: "Messagerie" !important;
    font-size: 10px !important;
    color: inherit !important;
  }
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item[data-nav="home"]::after {
    content: "Poire" !important;
    font-size: 10px !important;
    color: inherit !important;
  }

  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item svg {
    width: 20px !important;
    height: 20px !important;
    color: #888888 !important;
  }

  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item.active,
  html[data-realm="bordel"][data-theme="light-ether"] .mobile-nav-item.active svg {
    color: #222222 !important;
  }
}

/* =========================================================================
   BOUTON "NOUVEAU SUJET" ET BARRE LATERALE EXACTE (VILLAGE.CX)
   ========================================================================= */
@media (min-width: 769px) {
html[data-realm="bordel"][data-theme="light-ether"] .sidebar-action-bar {
  background: #ffffff !important; /* Même fond que la sidebar */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 10px 17px 10px !important; /* Padding top 8px + espacement pour Village */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Centrer Nouveau Sujet */
  position: relative !important;
  min-height: auto !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .sidebar-action-bar .btn-create-topic {
  background-color: transparent !important;
  background-image: none !important;
  color: #10b981 !important; /* Emerald-500 exact Village.cx */
  padding: 8px 12px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  opacity: 1 !important;
  text-transform: none !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .sidebar-search-btn {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #888888 !important; /* Icône recherche terne */
  position: absolute !important;
  right: 15px !important;
}
}

@media (max-width: 768px) {
  html[data-realm="bordel"] .sidebar-action-bar,
  html[data-realm="bordel"] .sidebar-search-btn,
  html[data-realm="bordel"] #sidebar-search-toggle,
  html[data-realm="bordel"] .sidebar-filter-panel,
  html[data-realm="bordel"] .sidebar-search-status {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }

  html[data-realm="bordel"] #sidebar-view-topics,
  html[data-realm="bordel"] .forum-tabs {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* =========================================================================
   NETTOYAGE ET FINITIONS EXACTES DU MODE BORDEL
   ========================================================================= */

/* Cacher le bouton "Changer de forum" de Poire.Space (RETIRE A LA DEMANDE DE L'USER) */
/* html[data-realm="bordel"][data-theme="light-ether"] .sidebar-forum-switch {
  display: none !important;
} */

/* Cacher TOUS les badges de rôle (SG, ZG, admin, images) sous les avatars ou pseudo */
html[data-realm="bordel"][data-theme="light-ether"] .role-badge,
html[data-realm="bordel"][data-theme="light-ether"] .rank-badge,
html[data-realm="bordel"][data-theme="light-ether"] .user-badge,
html[data-realm="bordel"][data-theme="light-ether"] .author-badges,
html[data-realm="bordel"][data-theme="light-ether"] .p-badge,
html[data-realm="bordel"][data-theme="light-ether"] .post-author-badges,
html[data-realm="bordel"][data-theme="light-ether"] .badge-container,
html[data-realm="bordel"][data-theme="light-ether"] .topic-badges {
  display: none !important;
}

/* Retrait de l'horrible bordure bleue brillante du sujet actif pour le fond discret Village */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card.active {
  background-color: #e6f0fa !important; /* Le bleu très très sombre de Village */
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Contexte de réponse dans le message (citation) */
html[data-realm="bordel"][data-theme="light-ether"] .post-reply-context {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid #3b82f6 !important;
  padding: 4px 8px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
}

/* =========================================================================
   VILLAGE.CX : HEXAGONE EXTREME, NOIR PROFOND & TITRE
   ========================================================================= */

/* L'Hexagone (Badge de niveau) avec forme pointue verticale exacte Village.cx */
html[data-realm="bordel"][data-theme="light-ether"] .author-level-badge {
  background-color: oklch(87.2% .01 258.338) !important;
  clip-path: polygon(3% 25%, 50% -4%, 97% 25%, 97% 75%, 50% 104%, 3% 75%) !important;
  border-radius: 0 !important;
  width: 30px !important;
  height: 30px !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .author-level-badge svg {
  display: none !important; /* Cache le SVG de base The Poire */
}
html[data-realm="bordel"][data-theme="light-ether"] .author-level-badge .level-text {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: bold !important;
  font-size: 12px !important;
  color: #333333 !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 0 !important;
}

/* Clan badges dans les posts : même taille + forme hexagonale comme le level badge */
html[data-realm="bordel"][data-theme="light-ether"] .author-clans .clan-badge {
  width: 30px !important;
  height: 30px !important;
  clip-path: polygon(3% 25%, 50% -4%, 97% 25%, 97% 75%, 50% 104%, 3% 75%) !important;
  border-radius: 0 !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .author-clans .clan-badge img:not(.clan-badge-glow) {
  width: 100% !important;
  height: 100% !important;
  clip-path: polygon(3% 25%, 50% -4%, 97% 25%, 97% 75%, 50% 104%, 3% 75%) !important;
  border-radius: 0 !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .author-clans .clan-badge::after {
  display: none !important; /* Pas de reflet squircle */
}

/* Forcer tout le fond du site, incluant l'intérieur d'un sujet (Topic) à être NOIR (#f4f5f7) */
html[data-realm="bordel"][data-theme="light-ether"] body,
html[data-realm="bordel"][data-theme="light-ether"] .app-layout,
html[data-realm="bordel"][data-theme="light-ether"] .main-content,
html[data-realm="bordel"][data-theme="light-ether"] .topic-scroll-container,
html[data-realm="bordel"][data-theme="light-ether"] #loading-sentinel {
  background-color: #f4f5f7 !important;
  background-image: none !important;
}

/* Le bandeau du sujet (qui contient le titre h1) — fond transparent comme Village */
html[data-realm="bordel"][data-theme="light-ether"] .topic-header {
  background-color: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 8px 0 !important;
}

/* Le conteneur du titre : fond gris arrondi avec bordure subtile comme Village.cx */
html[data-realm="bordel"][data-theme="light-ether"] .topic-header .topic-header-content {
  background-color: #f0f0f0 !important;
  border-radius: 10px !important;
  border: 1px solid #dddddd !important;
  padding: 10px 20px !important;
  margin: 0 12px !important;
}

/* La flèche retour : cyan comme Village */
html[data-realm="bordel"][data-theme="light-ether"] .topic-back-btn {
  color: #4ecdc4 !important;
}

/* Le titre H1 du sujet *A L'INTÉRIEUR DU SUJET* - BLANC CENTRÉ comme sur Village.cx */
html[data-realm="bordel"][data-theme="light-ether"] .topic-header .topic-title,
html[data-realm="bordel"][data-theme="light-ether"] .topic-header h1 {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #222222 !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================================
   LAYOUT PRECIS DES CARDS DE SUJETS (TOPICS) POUR IMITER VILLAGE.CX
   ========================================================================= */
/* Cacher définitivement les avatars dans la liste des sujets pour le mode Bordel */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card-avatar-col,
html[data-realm="bordel"][data-theme="light-ether"] .topic-card img.topic-author-avatar {
  display: none !important;
}

/* Forcer la carte de sujet à être en position relative avec le padding adéquat */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card {
  position: relative !important;
  padding: 8px 50px 8px 36px !important; /* Laisse de la place à gauche pour l'icône, à droite pour la date */
  display: block !important;
  min-height: 48px !important;
}

/* Retrait de l'affichage flex pour manipuler l'intérieur plus facilement */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card-main-col {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Header-line : titre + reply count INLINE comme Village */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card-header-line {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Meta-line : juste le pseudo de l'auteur en dessous */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card-meta-line {
  display: block !important;
  margin-top: 0 !important;
}

/* Reply count : INLINE sur la header-line à côté du titre (comme Village) */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card-meta-line .reply-count-inline {
  display: none !important; /* Cacher dans la meta-line */
}
html[data-realm="bordel"][data-theme="light-ether"] .topic-card-header-line .reply-count-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #777777 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

/* Injection des fausses icônes de dossiers pour tout le monde */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card::before {
  content: "\f07b" !important; /* Icône dossier FontAwesome */
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 12px !important;
  top: 10px !important;
  color: #cda814 !important; /* Jaune dossier */
  font-size: 16px !important;
}

/* Remplacement de l'icône par le Pin vert si épinglé */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card.pinned::before {
  content: "\f08d" !important; /* Tack icon */
  color: #72a912 !important; /* Vert pin */
}

/* Dossier rouge si c'est un topic actif (hot) */
html[data-realm="bordel"][data-theme="light-ether"] .topic-card.hot::before {
  color: #d11c10 !important; /* Rouge sombre de Village */
}

/* Cacher les badges épinglés générés par le JS vu qu'on a le ::before */
html[data-realm="bordel"][data-theme="light-ether"] .topic-pin-badge {
  display: none !important;
}

/* La Date va flotter de manière absolue tout à droite */
html[data-realm="bordel"][data-theme="light-ether"] .topic-date {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #777777 !important;
  font-size: 13px !important;
}

/* Cacher les anciens points séparateurs • */
html[data-realm="bordel"][data-theme="light-ether"] .topic-meta-sep {
  display: none !important;
}

/* Le reply count icon : petit rectangle/commentaire style Village */
html[data-realm="bordel"][data-theme="light-ether"] .reply-count-inline i::before {
  content: "\f4ad" !important; /* fa-comment-dots */
  font-weight: 400 !important; /* Force hollow (far) pour ressembler à la bulle Village */
}

html[data-realm="bordel"][data-theme="light-ether"] .reply-count-inline i {
  color: #777777 !important;
  font-size: 12px !important;
}

/* Le nombre de réponses */
html[data-realm="bordel"][data-theme="light-ether"] .reply-count-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-left: 4px !important;
  color: #777777 !important;
  font-size: 13px !important;
}

/* =========================================================================
   RÉTABLISSEMENT DES POSTS CONSÉCUTIFS (DEMANDE USER)
   ========================================================================= */
html[data-realm="bordel"][data-theme="light-ether"] .post.consecutive-post .post-header-row {
  display: none !important; /* On cache bien l'avatar et le pseudo */
}
html[data-realm="bordel"][data-theme="light-ether"] .post.consecutive-post {
  margin-top: -11px !important; /* On remonte pour combler le margin-bottom de 10px du parent et fusionner les bordures */
  border-top: none !important; /* Fusionne le cadre */
  padding-top: 0 !important;
}
html[data-realm="bordel"][data-theme="light-ether"] .post.consecutive-post .post-content {
  padding-top: 4px !important; /* Espacement intérieur léger */
}

/* ═══════════════════════════════════════════════════════════════════════
   ██╗   ██╗███████╗██████╗  ██████╗ ███████╗██████╗ 
   ██║   ██║██╔════╝██╔══██╗██╔════╝ ██╔════╝██╔══██╗
   ██║   ██║█████╗  ██████╔╝██║  ███╗█████╗  ██████╔╝
   ╚██╗ ██╔╝██╔══╝  ██╔══██╗██║   ██║██╔══╝  ██╔══██╗
    ╚████╔╝ ███████╗██║  ██║╚██████╔╝███████╗██║  ██║
     ╚═══╝  ╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝
   
   POIRIER "VERGER NOCTURNE" — Thème sombre organique & safe space
   
   Design System complet basé sur l'audit NotebookLM (12 consultations)
   Sources: UI Design Fundamentals, Flawless Typography, Envisioning 
   Information, Atomic Design, et 9 autres ouvrages de référence.
   
   Principes:
   • JAMAIS de noir pur (#000000) ni de blanc pur (#FFFFFF)
   • Palette organique terreuse (60-30-10) 
   • Typographie optimisée lecture longue (18px, line-height 1.6, 65ch)
   • Easing organique: cubic-bezier(0.22, 1, 0.36, 1)
   • Touch targets >= 48px, grille de 8px
   ═══════════════════════════════════════════════════════════════════════ */

/* =========================================================================
   🔪 KILL SWITCH — Purge totale de l'héritage néon Deep Ether
   
   Les styles globaux [data-theme="deep-ether"] (lignes 610-720, 2300-2360)
   définissent des GLOWS BLEUS, gradients aurora, border-glow azure, etc.
   Ils n'ont PAS de qualificateur data-realm et s'appliquent donc au Poirier.
   
   Ce bloc les NEUTRALISE chirurgicalement pour le realm poirier.
   Recommandation: NotebookLM (notebook 7d2abbb2)
   ========================================================================= */

/* --- NUKE 1: Aurora Glow bleu sur .main-content (ligne 617) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .main-content {
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
}

/* --- NUKE 2: Scroll mask fade (ligne 650) --- */
html[data-realm="poirier"][data-theme="deep-ether"] #posts-container {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* --- NUKE 3: Posts — CARTES élevées (NotebookLM 2026 Premium) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post {
  border-top: none !important;
  filter: none !important;
  background-color: #1F1F22 !important;  /* Card élevée vs #1A1A1B container */
  border: 1px solid #2C2C2D !important;
  border-radius: 12px !important;  /* Apple HIG: courbures douces */
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding: 24px !important;  /* 8pt grid */
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
/* Pas de scale-on-press nerveux dans le Poirier */
html[data-realm="poirier"][data-theme="deep-ether"] .post:active {
  transform: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:active {
  transform: none !important;
}

/* --- NUKE 4: Header --- */
html[data-realm="poirier"][data-theme="deep-ether"] header {
  box-shadow: none !important;
  border-bottom: 1px solid #2A2A2E !important;
}

/* --- NUKE 5: Blockquotes --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content blockquote {
  border-left: 3px solid #6B8FA3 !important;  /* Accent */
  border-image: none !important;
  background: #1F1F22 !important;  /* Élévation */
  box-shadow: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: #A1A1A6 !important;  /* Texte body */
  padding: 12px 16px !important;
}

/* --- NUKE 6: Focus ring --- */
html[data-realm="poirier"][data-theme="deep-ether"] :focus-visible {
  outline: 2px solid var(--focus-ring-color) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* --- NUKE 7: Variables --- */
html[data-realm="poirier"][data-theme="deep-ether"] {
  --glow-border: transparent !important;
  --header-glow: none !important;
  --glow-shadow: none !important;
  --accent-primary-rgb: 107, 143, 163 !important;
  --accent-hover: #88A9C0 !important;
  --accent-hover-rgb: 136, 169, 192 !important;
  --accent-lift: #A4C0D3 !important;
  --accent-lift-rgb: 164, 192, 211 !important;
  --accent-contrast: #101722 !important;
  --accent-glow: rgba(var(--accent-primary-rgb), 0.24) !important;
  --accent-glow-soft: rgba(var(--accent-primary-rgb), 0.12) !important;
  --accent-highlight: rgba(var(--accent-primary-rgb), 0.08) !important;
  --primary-azure: var(--accent-primary) !important;
  --focus-ring-color: rgba(var(--accent-primary-rgb), 0.45) !important;
  --ether-glow-opacity: 0 !important;
}

/* --- NUKE 8: Topic title links --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card a,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-title a,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-title a {
  color: #E8E8EA !important;  /* Titres */
  text-shadow: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card a:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-title a:hover {
  color: #6B8FA3 !important;  /* Accent au hover */
}

/* --- NUKE 9: Sidebar separator bleu --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar,
html[data-realm="poirier"][data-theme="deep-ether"] aside,
html[data-realm="poirier"][data-theme="deep-ether"] .layout-separator,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-list-container {
  border-right: none !important;
  border-left: none !important;
  border-color: transparent !important;
}

/* --- NUKE 10: Username role colors (rouge/vert saturé → organique) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-author a,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card .topic-meta a,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-author-name {
  text-shadow: none !important;
}

/* --- NUKE 11: Éditeur — FIX 4 fond élevé (Grok input zone) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .reply-form,
html[data-realm="poirier"][data-theme="deep-ether"] .editor-container {
  background: #1F1F20 !important;  /* Input zone élevée */
  border: 1px solid #2C2C2D !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* --- NUKE 12: Tout le main-content wrapper --- */
html[data-realm="poirier"][data-theme="deep-ether"] .main-content,
html[data-realm="poirier"][data-theme="deep-ether"] .app-layout,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-scroll-container {
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* --- NUKE 13: Topic header bar cosmique → sobre --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-header {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  border: none !important;
}

/* =========================================================================
   FIN DU KILL SWITCH — Début des composants Verger Nocturne
   ========================================================================= */

/* =========================================================================
   BASE : BODY, FONTS ET FOND
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] body {
  font-family: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #A1A1A6 !important;  /* Texte body */
  background-color: #141415 !important;  /* Base */
  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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E") !important;
  background-attachment: fixed !important;
}

/* Fond Darkest partout */
html[data-realm="poirier"][data-theme="deep-ether"] body,
html[data-realm="poirier"][data-theme="deep-ether"] .app-layout,
html[data-realm="poirier"][data-theme="deep-ether"] #loading-sentinel {
  background-color: #141415 !important;
}
/* FIX 1 : Panneau posts élevé — #1A1A1B crée la profondeur (Linear layering) */
html[data-realm="poirier"][data-theme="deep-ether"] .main-content,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-scroll-container {
  background-color: #1A1A1B !important;
  background-image: none !important;
}

/* =========================================================================
   LIENS — Accent #6B8FA3
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] a {
  text-decoration: none;
  color: var(--accent-text);
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-realm="poirier"][data-theme="deep-ether"] a:hover {
  text-decoration: none;
  color: var(--accent-lift);
}

/* =========================================================================
   STRUCTURE GLOBALE — Espaces généreux, pas de bordures dures
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .main-content {
  box-shadow: none !important;
  border: none !important;
  border-radius: 16px !important;
  background: transparent !important;  /* Transparent → noise grain du body visible */
  animation: none !important;
  padding: 16px !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .app-layout {
  gap: 16px;
}

/* =========================================================================
   HEADER
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] header {
  background-color: #141415 !important;
  border-bottom: 1px solid #2A2A2E !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transition: background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease,
              backdrop-filter 0.5s ease !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] header.is-scrolled {
  background-color: rgba(20, 20, 21, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  border-bottom: 1px solid #2A2A2E !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .header-logo-text {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-weight: 700;
  font-size: 22px;
  color: #E8E8EA;  /* Titres */
  letter-spacing: -0.02em;
}

/* =========================================================================
   TOPICS (Liste) — MOVED to TOPIC CARDS section at end of file
   All topic card styles are now in the "Linear-style Dense List" block below.
   DO NOT add topic-card rules here — they will be overridden.
   ========================================================================= */

/* =========================================================================
   POSTS (Messages) — CARTES élevées (renforce NUKE 3)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .post {
  background-color: #1F1F22 !important;  /* Card élevée */
  border: 1px solid #2C2C2D !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  margin-bottom: 0 !important;
  padding: 24px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Posts container — gap pour séparer les cartes */
html[data-realm="poirier"][data-theme="deep-ether"] #posts-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;  /* 8pt grid spacing */
}

/* Topic container — padding autour */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-container {
  padding: 24px !important;
}

/* Post hover — Gold subtil (ex-terracotta remplacé pour cohérence palette) */
html[data-realm="poirier"][data-theme="deep-ether"] .post:hover {
  border-color: rgba(107, 143, 163, 0.15) !important;
  background-color: rgba(107, 143, 163, 0.02) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  transform: none !important;
}

/* En-tête du post — aéré premium */
html[data-realm="poirier"][data-theme="deep-ether"] .post-header-row {
  background-color: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  align-items: flex-start !important;
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

/* Auteur */
html[data-realm="poirier"][data-theme="deep-ether"] .post-author {
  font-weight: 500 !important;
  font-size: 15px !important;
  color: #E8E8EA !important;  /* Titres */
}

/* Contenu du post — Lisibilité parfaite */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content {
  font-size: 15px !important;
  line-height: 1.6 !important;
  padding: 0 !important;  /* Le padding est déjà dans .post */
  color: #EAEAEA !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Dates — déférence (Apple HIG: tabular-nums) */
html[data-realm="poirier"][data-theme="deep-ether"] .post-date {
  color: #9A9A9E !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
}

/* Boutons d'action (Répondre, Éditer) — visibles mais calmes */
html[data-realm="poirier"][data-theme="deep-ether"] .post-action-btn {
  color: #8A8A8C !important;
  background: transparent !important;
  border: none !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  min-height: 36px !important;
  transition: color 0.3s ease,
              background-color 0.3s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-action-btn:hover {
  color: #88A9C0 !important;  /* Terracotta warm */
  background: rgba(136, 169, 192, 0.08) !important;
  text-decoration: none !important;
}

/* =========================================================================
   AVATARS — Squircle doux + bordure grounding (Post-Neumorphism)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .author-avatar,
html[data-realm="poirier"][data-theme="deep-ether"] .author-avatar-small,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-author-avatar,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card img {
  display: inline-block !important;
  border-radius: 38% !important;
  border: 1px solid #2C2C2D !important;
  background-color: #141415 !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

/* Avatar dans les posts */
html[data-realm="poirier"][data-theme="deep-ether"] .post-header-row .author-avatar-small {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Aligner avatar + pseudo */
html[data-realm="poirier"][data-theme="deep-ether"] .post-author-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* =========================================================================
   CITATIONS / BLOCKQUOTES — Terracotta accent, fond élévation
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .post-reply-context {
  background: rgba(31, 31, 34, 0.6) !important;
  border: none !important;
  border-left: 2px solid #6B8FA3 !important;  /* Accent */
  padding: 8px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
  border-radius: 0 8px 8px 0 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] blockquote,
html[data-realm="poirier"][data-theme="deep-ether"] .quote-block {
  background: #1F1F22 !important;
  border-left: 3px solid #6B8FA3 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 16px 20px !important;
  color: #D1D1D4 !important;
  font-style: italic !important;
  margin: 16px 0 !important;
}

/* =========================================================================
   FORMULAIRES — Focus terracotta, surfaces profondes
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .form-control,
html[data-realm="poirier"][data-theme="deep-ether"] .editor-textarea {
  background-color: #1A1A1B !important;
  border: 1px solid #2C2C2D !important;
  border-radius: 12px !important;
  color: #EAEAEA !important;
  box-shadow: none !important;
  font-size: 16px !important;
  padding: 12px 16px !important;
  transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .form-control:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .editor-textarea:focus {
  border-color: #6B8FA3 !important;
  box-shadow: 0 0 0 3px rgba(136, 169, 192, 0.15) !important;
  outline: none !important;
}

/* =========================================================================
   BOUTONS — Hiérarchie neutre-chaude
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .btn {
  background-color: #2A2A2E !important;
  color: #EAEAEA !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border: none !important;
  transition: all 0.3s ease !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  min-height: 44px !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .btn:hover {
  background-color: #3A3A3E !important;
  color: #EAEAEA !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* =========================================================================
   SIDEBAR — Architecture Premium (Linear Method + Apple HIG)
   Base: #141415, Border: #2C2C2D
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar,
html[data-realm="poirier"][data-theme="deep-ether"] .right-sidebar {
  background: #141415 !important;
  border: none !important;
  border-right: 1px solid #2C2C2D !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-title {
  color: #8A8A8C !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #2C2C2D !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .category-btn {
  border-radius: 8px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .category-btn.active {
  background-color: rgba(136, 169, 192, 0.1) !important;
  color: #6B8FA3 !important;
  border-left: 2px solid #6B8FA3 !important;
  box-shadow: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .category-btn:hover {
  background-color: #1F1F22 !important;
  transform: translateX(4px) !important;
}

/* =========================================================================
   PAGINATION — Pilules organiques
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn {
  background: #1A1A1B !important;
  border: 1px solid #2C2C2D !important;
  color: #A1A1A6 !important;
  border-radius: 12px !important;
  min-height: 40px !important;
  min-width: 40px !important;
  transition: all 0.3s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn.active {
  background: #6B8FA3 !important;
  color: #141415 !important;
  border-color: #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn:hover:not(.active) {
  background: #1F1F22 !important;
  border-color: #6B8FA3 !important;
}

/* =========================================================================
   SIDEBAR COMPACT MODULE — Action Bar + Forum Switch
   NLM Audit ×5 : Hybride CTA texte + icônes tooltips
   ========================================================================= */

/* --- La barre d'action — compacte, sans bordure parasite --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 12px 8px 12px !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  z-index: 10 !important;
  margin-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- CTA "Nouveau Sujet" — Or solide avec glow chaleureux --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(180deg, #88A9C0 0%, #6B8FA3 100%) !important;
  background-image: linear-gradient(180deg, #88A9C0 0%, #6B8FA3 100%) !important;
  color: #1A1A1B !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0 16px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
              0 4px 12px rgba(107, 143, 163, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(107, 143, 163, 0.3),
              0 1px 2px rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic:active {
  transform: translateY(0) scale(0.98) !important;
  filter: brightness(0.95) !important;
  transition-duration: 0.1s !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* --- Bouton Search — Carré discret, même hauteur que CTA --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn {
  position: relative !important;
  background-color: #1F1F22 !important;
  color: #EAEAEA !important;
  border: 1px solid rgba(234, 234, 234, 0.06) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn:hover {
  background-color: #2A2A2D !important;
  border-color: rgba(234, 234, 234, 0.12) !important;
  color: #6B8FA3 !important;
}
/* Search btn actif (panneau ouvert) — fond or, icône tournée */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn.active {
  background-color: rgba(107, 143, 163, 0.15) !important;
  color: #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn.active i {
  transform: rotate(90deg) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
/* Tooltip Search */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn::after {
  content: "Rechercher" !important;
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) scale(0.95) !important;
  background-color: #1F1F22 !important;
  color: #EAEAEA !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(107, 143, 163, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 100 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.15s !important;
  transition-delay: 0s !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  transition-delay: 0.4s !important;
}

/* --- Panneau filtres --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-filter-panel {
  padding: 12px 16px !important;
  background-color: #141415 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-filter-tabs {
  display: flex !important;
  gap: 4px !important;
  background-color: #1A1A1B !important;
  padding: 4px !important;
  border-radius: 8px !important;
  border: 1px solid #2C2C2D !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .filter-btn {
  flex: 1 !important;
  background: transparent !important;
  color: #8A8A8C !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .filter-btn:hover {
  color: #EAEAEA !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .filter-btn.active {
  background-color: #1F1F22 !important;
  color: #EAEAEA !important;
  box-shadow: 0 2px 4px rgba(13, 13, 14, 0.5) !important;
}

/* --- Search input --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-input {
  background-color: #1A1A1B !important;
  border: 1px solid #2C2C2D !important;
  color: #EAEAEA !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-input:focus {
  outline: none !important;
  background-color: #1F1F22 !important;
  border-color: #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-input::placeholder {
  color: #8A8A8C !important;
}

/* --- Forum switch button — elevated, not bordered --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-forum-switch {
  background: #1A1A1B !important;
  color: #8A8A8C !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  margin: 0 8px 0 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-forum-switch:hover {
  background-color: #1F1F22 !important;
  color: #EAEAEA !important;
}

/* =========================================================================
   TOPIC HEADER — Sticky Glassmorphism Premium (Apple HIG Liquid Glass)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background-color: rgba(26, 26, 27, 0.75) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid #2C2C2D !important;
  padding: 16px 24px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .topic-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .topic-header .topic-header-content {
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .topic-back-btn {
  color: #6B8FA3 !important;
  background: transparent !important;
  border: none !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 8px !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-back-btn:hover {
  background-color: rgba(136, 169, 192, 0.1) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .topic-header .topic-title,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-header h1 {
  font-family: 'Inter', 'Nunito', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #EAEAEA !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================================
   LEVEL BADGES & CLAN BADGES — MOVED to CLANS & LEVEL BADGES section at end of file
   DO NOT add level/clan rules here — they will be overridden.
   ========================================================================= */

/* =========================================================================
   ROLE BADGES — Warm Authority Badges (NotebookLM audit)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .role-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .role-badge.role-admin {
  background-color: #6B8FA3 !important;  /* Or éteint, ratio 7.6:1 */
  border: none !important;
  color: #141415 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .role-badge.role-moderator {
  background-color: #B0B0B4 !important;  /* Argent chaud, ratio 8.4:1 */
  border: none !important;
  color: #141415 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .role-badge.role-user {
  background: transparent !important;
  border: 1px solid #2C2C2D !important;
  color: #9A9A9E !important;
}

/* =========================================================================
   POSTS CONSÉCUTIFS — Cartes qui fusionnent en un bloc unique
   Le #posts-container a gap:16px — il faut le compenser avec margin négatif
   ========================================================================= */

/* Le post AVANT un consécutif : couper le bas de la carte */
html[data-realm="poirier"][data-theme="deep-ether"] .post.has-consecutive-next {
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  padding-bottom: 0 !important;
  /* Manger le gap du container pour coller au post suivant */
  margin-bottom: -16px !important;
}

/* Le post consécutif : couper le haut, fusionner visuellement */
html[data-realm="poirier"][data-theme="deep-ether"] .post.consecutive-post .post-header-row {
  display: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post.consecutive-post {
  border-top: none !important;
  border-radius: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Dernier consécutif : restaurer les coins bas arrondis */
html[data-realm="poirier"][data-theme="deep-ether"] .post.consecutive-post:not(.has-consecutive-next) {
  border-radius: 0 0 12px 12px !important;
}

/* Contenu dans un consécutif */
html[data-realm="poirier"][data-theme="deep-ether"] .post.consecutive-post .post-content {
  padding-top: 0 !important;
}

/* =========================================================================
   RÉACTIONS — Palette neutre-chaude cohérente avec Deep Ether
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .post-reactions {
  opacity: 1 !important;
  margin-top: 0 !important;
  padding-top: 2px !important;
  padding-bottom: 0 !important;
  /* Bordure solide subtile au lieu de dashed (plus premium) */
  border-top: 1px solid rgba(234, 234, 234, 0.06) !important;
}

/* Badges de réaction — neutres au repos, or éteint à l'activation */
html[data-realm="poirier"][data-theme="deep-ether"] .post-reactions .reaction-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-badge {
  border-radius: 9999px !important;
  /* Blanc en opacité sur fond sombre (paradigme Linear) */
  background: rgba(234, 234, 234, 0.03) !important;
  border: 1px solid rgba(234, 234, 234, 0.08) !important;
  color: #8A8A8C !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post-reactions .reaction-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-badge:hover {
  background: rgba(234, 234, 234, 0.08) !important;
  transform: scale(1.05) !important;
}

/* État actif — accent or éteint #6B8FA3 (pas le #ffc300 trop vif) */
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-badge.reaction-active {
  background: rgba(107, 143, 163, 0.12) !important;
  border: 1px solid rgba(107, 143, 163, 0.3) !important;
  color: #A4C0D3 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .reaction-badge.reaction-active:hover {
  background: rgba(107, 143, 163, 0.18) !important;
}

/* Bouton ajouter réaction — smiley doré discret */
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-add-btn {
  background: rgba(234, 234, 234, 0.03) !important;
  border: 1px solid rgba(234, 234, 234, 0.08) !important;
  color: #8A8A8C !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .reaction-add-btn:hover {
  background: rgba(107, 143, 163, 0.08) !important;
  border-color: rgba(107, 143, 163, 0.2) !important;
  color: #6B8FA3 !important;
}

/* Picker de réactions — Liquid Glass */
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-picker {
  background: rgba(31, 31, 34, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .reaction-picker-item:hover {
  background: rgba(107, 143, 163, 0.1) !important;
}

/* =========================================================================
   TYPOGRAPHIE GLOBALE — Forcer Inter partout
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card .topic-title,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-title,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content,
html[data-realm="poirier"][data-theme="deep-ether"] .post-author,
html[data-realm="poirier"][data-theme="deep-ether"] .btn,
html[data-realm="poirier"][data-theme="deep-ether"] .form-control,
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-title,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card .topic-meta,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-date,
html[data-realm="poirier"][data-theme="deep-ether"] body,
html[data-realm="poirier"][data-theme="deep-ether"] button,
html[data-realm="poirier"][data-theme="deep-ether"] input,
html[data-realm="poirier"][data-theme="deep-ether"] textarea,
html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item span {
  font-family: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* =========================================================================
   MOBILE BOTTOM NAV — Touch targets généreux, sauge
   ========================================================================= */
/* Mobile bottom nav — Glassmorphisme au lieu de fond opaque */
html[data-realm="poirier"][data-theme="deep-ether"] .mobile-bottom-nav {
  background: rgba(20, 20, 21, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3) !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item {
  color: #8A8A8C !important;
  min-height: 48px !important;
  min-width: 48px !important;
  /* Snappy iOS-like transition */
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
}

/* Feedback tactile au press — l'icône s'écrase sous le pouce */
html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item:active {
  transform: scale(0.88) !important;
  color: #A4C0D3 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item.active,
html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item.active svg {
  color: #6B8FA3 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.5px !important;
}

/* =========================================================================
   SCROLLBAR PERSONNALISÉE — Discrète et organique
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar {
  width: 6px;
}
html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar-thumb {
  background: #2C2C2D;
  border-radius: 9999px;
}
html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar-thumb:hover {
  background: #3A3A3E;
}

/* =========================================================================
   CODE BLOCKS — Surface profonde (Vercel Design System)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] pre,
html[data-realm="poirier"][data-theme="deep-ether"] code {
  background: #141416 !important;
  border: 1px solid #2C2C2D !important;
  border-radius: 8px !important;
  color: #D1D1D4 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] pre code {
  border: none !important;
}

/* =========================================================================
   SPOILERS — Surface légèrement élevée
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .spoiler-content,
html[data-realm="poirier"][data-theme="deep-ether"] .spoiler-block {
  background: #1F1F22 !important;
  border-radius: 12px !important;
  border: 1px solid #2C2C2D !important;
}

/* =========================================================================
   SÉLECTION DE TEXTE — Ambre doré (chair de poire 🍐) — NotebookLM §5
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] ::selection {
    background: rgba(136, 169, 192, 0.25);
    color: #EAEAEA;
    text-shadow: none;
}

/* =========================================================================
   §5.2 BOUTONS SECONDAIRE & TERTIAIRE (audit: 3 niveaux de hiérarchie)
   ========================================================================= */
/* Secondaire — Outline, pas de fond */
html[data-realm="poirier"][data-theme="deep-ether"] .btn-secondary,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-outline {
  background-color: transparent !important;
  color: #6B8FA3 !important;
  border: 1px solid #6B8FA3 !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  min-height: 44px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .btn-secondary:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-outline:hover {
  background-color: rgba(136, 169, 192, 0.1) !important;
  border-color: #A4C0D3 !important;
  color: #A4C0D3 !important;
  transform: translateY(-1px) !important;
}

/* Tertiaire — Texte seul, action mineure */
html[data-realm="poirier"][data-theme="deep-ether"] .btn-link,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-text,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-tertiary {
  background-color: transparent !important;
  color: #8A8A8C !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  min-height: 44px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .btn-link:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-text:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-tertiary:hover {
  color: #6B8FA3 !important;
  text-decoration: none !important;
  transform: none !important;
  background-color: transparent !important;
}

/* =========================================================================
   §5.5 INDICATEUR "NON LU" — Point sauge (audit: 6px dot accent)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.is-unread,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.unread {
  position: relative;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.is-unread::after,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.unread::after {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: #6B8FA3 !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* =========================================================================
   §5.7 TOASTS & NOTIFICATIONS — Émergence lente "feuille qui tombe"
   ========================================================================= */
@keyframes poirierFloatUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes poirierFloatDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(16px);
  }
}

html[data-realm="poirier"][data-theme="deep-ether"] .toast,
html[data-realm="poirier"][data-theme="deep-ether"] .toast-notification,
html[data-realm="poirier"][data-theme="deep-ether"] .notification-toast {
  background-color: #1F1F22 !important;
  border: 1px solid #2C2C2D !important;
  border-radius: 16px !important;
  padding: 16px 24px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  animation: poirierFloatUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  color: #EAEAEA !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .toast.toast-success {
  border-left: 3px solid #7A9674 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .toast.toast-error {
  border-left: 3px solid #C6705D !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .toast.toast-warning {
  border-left: 3px solid #D4AF37 !important;
}

/* =========================================================================
   §5.8 ÉTATS VIDES (Empty States) — "Le silence règne ici"
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state,
html[data-realm="poirier"][data-theme="deep-ether"] .no-topics,
html[data-realm="poirier"][data-theme="deep-ether"] .no-results {
  text-align: center !important;
  padding: 64px 24px !important;
  color: #8A8A8C !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state i,
html[data-realm="poirier"][data-theme="deep-ether"] .no-topics i,
html[data-realm="poirier"][data-theme="deep-ether"] .no-results i {
  color: #6B6B70 !important;
  opacity: 0.6 !important;
  margin-bottom: 16px !important;
}

/* =========================================================================
   §5.9 MESSAGES D'ERREUR — Terracotta chaud, jamais rouge sang
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .error-message,
html[data-realm="poirier"][data-theme="deep-ether"] .form-error,
html[data-realm="poirier"][data-theme="deep-ether"] .field-error,
html[data-realm="poirier"][data-theme="deep-ether"] .alert-danger,
html[data-realm="poirier"][data-theme="deep-ether"] .alert-error {
  background-color: #2C201E !important;
  color: #C6705D !important;
  border: 1px solid rgba(198, 112, 93, 0.2) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .alert-success {
  background-color: rgba(122, 150, 116, 0.1) !important;
  color: #7A9674 !important;
  border: 1px solid rgba(122, 150, 116, 0.2) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .alert-warning {
  background-color: rgba(212, 175, 55, 0.08) !important;
  color: #D4AF37 !important;
  border: 1px solid rgba(212, 175, 55, 0.15) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .alert-info {
  background-color: rgba(107, 143, 163, 0.08) !important;
  color: #6B8FA3 !important;
  border: 1px solid rgba(107, 143, 163, 0.15) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}

/* =========================================================================
   §5.10 ICONOGRAPHIE — Stroke-weight fin, aligné au texte
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .fa,
html[data-realm="poirier"][data-theme="deep-ether"] .fas,
html[data-realm="poirier"][data-theme="deep-ether"] .far,
html[data-realm="poirier"][data-theme="deep-ether"] .fal {
  /* FontAwesome n'a pas de stroke-width, mais on peut réduire le contraste */
  opacity: 0.85;
}
html[data-realm="poirier"][data-theme="deep-ether"] svg {
  stroke-width: 1.5px;
}

/* =========================================================================
   §5.6 INDICATEURS DE STATUT — Points en ligne/absent
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .status-indicator.online,
html[data-realm="poirier"][data-theme="deep-ether"] .user-status.online {
  background-color: #5C8D73 !important;
  border: 2px solid #1D201C !important; /* Cut-out effect */
}
html[data-realm="poirier"][data-theme="deep-ether"] .status-indicator.away,
html[data-realm="poirier"][data-theme="deep-ether"] .user-status.away,
html[data-realm="poirier"][data-theme="deep-ether"] .status-indicator.offline,
html[data-realm="poirier"][data-theme="deep-ether"] .user-status.offline {
  background-color: #A19D94 !important;
  border: 2px solid #1D201C !important;
}

/* =========================================================================
   §7 STAGGERED LOADING — Commentaires en cascade
   ========================================================================= */
@keyframes poirierRevealComment {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html[data-realm="poirier"][data-theme="deep-ether"] .post {
  animation: poirierRevealComment 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* Prevent re-animation on DOM mutations */
  animation-iteration-count: 1;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(1) { animation-delay: 0ms; }
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(2) { animation-delay: 60ms; }
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(3) { animation-delay: 120ms; }
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(4) { animation-delay: 180ms; }
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(5) { animation-delay: 240ms; }
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(6) { animation-delay: 300ms; }
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(7) { animation-delay: 360ms; }
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(8) { animation-delay: 420ms; }
html[data-realm="poirier"][data-theme="deep-ether"] .post:nth-child(n+9) { animation-delay: 480ms; }

/* =========================================================================
   §7 PAGE TRANSITIONS — "Sas de décompression"
   ========================================================================= */
@keyframes poirierFadeOut {
  to {
    opacity: 0;
  }
}

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

html[data-realm="poirier"][data-theme="deep-ether"] .page-exit {
  animation: poirierFadeOut 0.4s ease forwards !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .page-enter {
  animation: poirierFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards !important;
  opacity: 0;
}

/* =========================================================================
   §8 SAFE AREA — Gestion des encoches et zones gestuelles
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .main-content {
  padding-left: max(env(safe-area-inset-left, 0px), 16px) !important;
  padding-right: max(env(safe-area-inset-right, 0px), 16px) !important;
}

/* =========================================================================
   §9 ACCESSIBILITÉ — Focus visible (jamais invisible)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] :focus-visible {
  outline: 2px solid rgba(74, 93, 78, 0.6) !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}

/* Retirer l'outline pour le focus-souris (click) */
html[data-realm="poirier"][data-theme="deep-ether"] :focus:not(:focus-visible) {
  outline: none !important;
}

/* =========================================================================
   §7 HOVER IMAGE — Zoom hyper subtil (audit: scale(1.02))
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img {
  border-radius: 12px !important;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img:hover {
  transform: scale(1.02) !important;
}

/* =========================================================================
   TOASTS & NOTIFICATIONS — Pilule premium dorée discrète
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .sticker-toast,
html[data-realm="poirier"][data-theme="deep-ether"] #new-messages-toast,
html[data-realm="poirier"][data-theme="deep-ether"] .toast-notification {
  background: #252528 !important;
  border: 1px solid rgba(107, 143, 163, 0.2) !important;
  color: #EAEAEA !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
}

/* =========================================================================
   COMPOSER (Créer un sujet) — Palette Verger Nocturne (or/terracotta)
   Surcharge les styles [data-theme="deep-ether"] qui utilisent du bleu
   ========================================================================= */

/* --- Composer card élevée --- */
html[data-realm="poirier"][data-theme="deep-ether"] .composer-main {
  background: #1F1F22 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #2C2C2D !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* --- Top bar --- */
html[data-realm="poirier"][data-theme="deep-ether"] .composer-top-bar {
  background: rgba(20, 20, 21, 0.5) !important;
  border-bottom: 1px solid #2C2C2D !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .composer-back-link {
  color: #A1A1A6 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .composer-back-link:hover {
  color: #6B8FA3 !important;
  background: rgba(107, 143, 163, 0.08) !important;
}

/* --- Title input --- */
html[data-realm="poirier"][data-theme="deep-ether"] .composer-title-input {
  color: #E8E8EA !important;
  border-bottom-color: #2C2C2D !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .composer-title-input:focus {
  border-bottom-color: #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .composer-title-input::placeholder {
  color: #8A8A8C !important;
}

/* --- Flair chips — Or au lieu de bleu --- */
html[data-realm="poirier"][data-theme="deep-ether"] .flair-chip {
  background: rgba(234, 234, 234, 0.04) !important;
  border: 1px solid #2C2C2D !important;
  color: #A1A1A6 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .flair-option:hover .flair-chip {
  border-color: rgba(107, 143, 163, 0.3) !important;
  color: #E8E8EA !important;
  background: rgba(107, 143, 163, 0.06) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .flair-option input:checked + .flair-chip {
  background: rgba(107, 143, 163, 0.12) !important;
  color: #6B8FA3 !important;
  border-color: rgba(107, 143, 163, 0.4) !important;
  box-shadow: 0 2px 8px rgba(107, 143, 163, 0.15) !important;
}

/* Warning/Danger flairs: garder leurs couleurs sémantiques */
html[data-realm="poirier"][data-theme="deep-ether"] .flair-option input:checked + .flair-chip.flair-warning {
  background: rgba(255, 159, 10, 0.12) !important;
  color: #FF9F0A !important;
  border-color: rgba(255, 159, 10, 0.35) !important;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.15) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .flair-option input:checked + .flair-chip.flair-danger {
  background: rgba(255, 69, 58, 0.12) !important;
  color: #FF453A !important;
  border-color: rgba(255, 69, 58, 0.35) !important;
  box-shadow: 0 2px 8px rgba(255, 69, 58, 0.15) !important;
}

/* --- Editor pane --- */
html[data-realm="poirier"][data-theme="deep-ether"] .composer-editor-pane {
  background: #1A1A1B !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .composer-editor-pane .editor-toolbar-compact {
  background: rgba(20, 20, 21, 0.6) !important;
  border-bottom: 1px solid #2C2C2D !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .composer-editor-pane .editor-toolbar-compact button {
  color: #A1A1A6 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .composer-editor-pane .editor-toolbar-compact button:hover {
  color: #6B8FA3 !important;
  background: rgba(107, 143, 163, 0.08) !important;
}

/* --- Publish button — Or solide (cohérent avec CTA sidebar) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .publish-btn {
  background: linear-gradient(180deg, #88A9C0 0%, #6B8FA3 100%) !important;
  color: #1A1A1B !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
              0 4px 12px rgba(107, 143, 163, 0.25) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .publish-btn:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 4px 16px rgba(107, 143, 163, 0.35),
              0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .publish-btn:active {
  filter: brightness(0.95) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* --- Preview sidebar --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-preview {
  background: #1F1F22 !important;
  border: 1px solid #2C2C2D !important;
  border-radius: 12px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .preview-header {
  background: rgba(20, 20, 21, 0.5) !important;
  border-bottom: 1px solid #2C2C2D !important;
  color: #E8E8EA !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .preview-header i {
  color: #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .preview-placeholder {
  color: #8A8A8C !important;
}

/* --- Publish hint --- */
html[data-realm="poirier"][data-theme="deep-ether"] .publish-hint {
  color: #8A8A8C !important;
}

/* =========================================================================
   CHAT INPUT — Ring borders, focus doré
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor,
html[data-realm="poirier"][data-theme="deep-ether"] .minimal-edit-zone {
  background: rgba(234, 234, 234, 0.04) !important;
  border: 1px solid rgba(234, 234, 234, 0.1) !important;
  border-radius: 20px !important;
  color: #EAEAEA !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .minimal-edit-zone:focus {
  outline: none !important;
  border-color: rgba(107, 143, 163, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(107, 143, 163, 0.12),
              0 0 16px rgba(107, 143, 163, 0.06) !important;
}

/* FLUIDITY v3: Poirier editor wrapper pill — warm gold tint */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor-wrapper {
  background: rgba(234, 234, 234, 0.03) !important;
  border-color: rgba(234, 234, 234, 0.08) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor-wrapper:focus-within {
  border-color: rgba(107, 143, 163, 0.35) !important;
  box-shadow: 0 0 0 2px rgba(107, 143, 163, 0.08) !important;
}

/* =========================================================================
   MODALES & OVERLAYS — Fond neutre chaud (fix du vert #1D201C)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .modal-overlay,
html[data-realm="poirier"][data-theme="deep-ether"] .modal-backdrop {
  background-color: rgba(20, 20, 21, 0.88) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .modal-content,
html[data-realm="poirier"][data-theme="deep-ether"] .modal-body {
  background-color: #222224 !important;
  border: 1px solid rgba(234, 234, 234, 0.05) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
  color: #E4DFD5 !important;
}

/* =========================================================================
   DROPDOWNS & MENUS — Surfaces élevées
   ========================================================================= */
/* FIX: #212420 avait une teinte verte parasite → remplacé par gris chaud pur */
html[data-realm="poirier"][data-theme="deep-ether"] .dropdown-menu,
html[data-realm="poirier"][data-theme="deep-ether"] .context-menu {
  background-color: #252528 !important;
  border: 1px solid rgba(234, 234, 234, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 8px !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .dropdown-item {
  border-radius: 8px !important;
  padding: 10px 12px !important;
  color: #EAEAEA !important;
  transition: background-color 0.15s ease !important;
  min-height: 40px !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .dropdown-item:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .dropdown-item:active {
  background-color: rgba(234, 234, 234, 0.06) !important;
  color: #EAEAEA !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .dropdown-item.danger,
html[data-realm="poirier"][data-theme="deep-ether"] .dropdown-item-danger {
  color: #C6705D !important;
}

/* =========================================================================
   EDITOR TOOLBAR — Outils d'écriture discrets
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar {
  background-color: #1C1D1E !important;
  border: 1px solid rgba(107, 143, 163, 0.08) !important;
  border-radius: 12px 12px 0 0 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar button,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar-btn {
  color: #A0A0A0 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  min-width: 38px !important;
  min-height: 38px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar button:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar-btn:hover {
  background-color: rgba(107, 143, 163, 0.1) !important;
  color: #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar button.fmt-active,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar-btn.fmt-active {
  background-color: rgba(107, 143, 163, 0.15) !important;
  color: #6B8FA3 !important;
  box-shadow: inset 0 0 0 1px rgba(107, 143, 163, 0.25) !important;
}

/* =========================================================================
   🍐 IDENTITÉ POIRIER — Micro-touches organiques (NotebookLM)
   ========================================================================= */

/* --- Séparateur organique — Nervure de feuille qui s'efface --- */
html[data-realm="poirier"][data-theme="deep-ether"] hr,
html[data-realm="poirier"][data-theme="deep-ether"] .separator,
html[data-realm="poirier"][data-theme="deep-ether"] .post-separator {
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, 
    rgba(141, 163, 153, 0) 0%, 
    rgba(141, 163, 153, 0.15) 50%, 
    rgba(141, 163, 153, 0) 100%) !important;
  margin: 24px auto !important;
}

/* --- Avatars organiques "Galet" (forme poire abstraite) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-author-avatar,
html[data-realm="poirier"][data-theme="deep-ether"] .post-avatar img,
html[data-realm="poirier"][data-theme="deep-ether"] .post-author-avatar {
  border-radius: 50% 50% 50% 50% / 60% 40% 40% 60% !important;
  transition: border-radius 2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-author-avatar:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-avatar img:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-author-avatar:hover {
  border-radius: 40% 60% 50% 50% / 40% 50% 50% 60% !important;
}

/* Post cards: styles principaux dans NUKE 3 (Kill Switch) */

/* --- Topic cards separator: gap spacing suffices, no border needed --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card + .topic-card {
  border-top: none !important;
  border-image: none !important;
}

/* --- Bouton "Nouveau Sujet" — Unified gold CTA --- */
html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn,
html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn {
  background: #6B8FA3 !important;
  color: #141414 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
              0 4px 12px rgba(107, 143, 163, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn:hover {
  transform: translateY(-1px) !important;
  background: #DBC086 !important;
  box-shadow: 0 4px 16px rgba(107, 143, 163, 0.25),
              0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn:active,
html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn:active {
  transform: translateY(0) !important;
  background: #C29A53 !important;
  box-shadow: 0 2px 4px rgba(107, 143, 163, 0.15) !important;
  transition-duration: 0.1s !important;
}

/* --- Scrollbar chaude fine --- */
html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar {
  width: 6px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar-track {
  background: transparent !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar-thumb {
  background: rgba(136, 169, 192, 0.15) !important;
  border-radius: 3px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 169, 192, 0.3) !important;
}

/* --- Liens dans posts --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content a {
  color: #6B8FA3 !important;
  text-decoration-color: rgba(136, 169, 192, 0.3) !important;
  transition: all 0.3s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content a:hover {
  color: #A4C0D3 !important;
  text-decoration-color: rgba(224, 157, 131, 0.5) !important;
}

/* --- Badges de rôle — Admin = rouge, cohérent avec var(--role-admin) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .author-admin {
  color: #f87171 !important;  /* Rouge admin — même que --role-admin deep-ether */
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.3) !important;
  font-weight: 600 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .author-mod {
  color: #34d399 !important;  /* Vert modo — même que --role-mod deep-ether */
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.3) !important;
  font-weight: 600 !important;
}

/* --- Éditeur de réponse — FIX 4 fond élevé --- */
html[data-realm="poirier"][data-theme="deep-ether"] .reply-form,
html[data-realm="poirier"][data-theme="deep-ether"] .editor-container,
html[data-realm="poirier"][data-theme="deep-ether"] .compose-area {
  background: #1F1F20 !important;  /* Input zone élevée */
  border: 1px solid #2C2C2D !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 16px !important;
  transition: border-color 0.4s ease-out !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .reply-form:focus-within,
html[data-realm="poirier"][data-theme="deep-ether"] .editor-container:focus-within {
  border-color: #6B8FA3 !important;
}

/* Textarea intérieur */
html[data-realm="poirier"][data-theme="deep-ether"] textarea,
html[data-realm="poirier"][data-theme="deep-ether"] .ql-editor,
html[data-realm="poirier"][data-theme="deep-ether"] [contenteditable] {
  background: transparent !important;
  color: #A1A1A6 !important;
  border: none !important;
  caret-color: #6B8FA3 !important;
}

/* Placeholder du textarea */
html[data-realm="poirier"][data-theme="deep-ether"] textarea::placeholder,
html[data-realm="poirier"][data-theme="deep-ether"] .ql-editor.ql-blank::before {
  color: #52525A !important;
  font-style: normal !important;
}

/* Icônes de la barre d'outils — sable chaud */
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar i,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar-btn i,
html[data-realm="poirier"][data-theme="deep-ether"] .compose-toolbar i {
  color: #A1A1A6 !important;
  transition: color 0.3s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar i:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar-btn:hover i,
html[data-realm="poirier"][data-theme="deep-ether"] .compose-toolbar i:hover {
  color: #6B8FA3 !important;
}

/* --- Header brand — Typographie Serif éditorial (NotebookLM §6) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .site-title,
html[data-realm="poirier"][data-theme="deep-ether"] .header-logo-text,
html[data-realm="poirier"][data-theme="deep-ether"] .forum-name {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #E8E8EA !important;
}

/* --- Stickers et emojis — Laisser vibrants (NotebookLM §5) --- */
/* Ne PAS filtrer. Les touches de couleur vive sur fond sourd font la richesse */
html[data-realm="poirier"][data-theme="deep-ether"] .sticker img,
html[data-realm="poirier"][data-theme="deep-ether"] .emoji {
  filter: none !important;
  opacity: 1 !important;
}

/* =========================================================================
   🍐 WELCOME — Section d'accueil "WOW" (NotebookLM: contraste d'échelle)
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state,
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 24px !important;
}

/* Image communautaire — soft glow & float animation */
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop img,
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state img {
  border-radius: 50% 50% 50% 50% / 55% 45% 45% 55% !important;
  box-shadow: 0 8px 40px rgba(136, 169, 192, 0.06), 0 0 60px rgba(136, 169, 192, 0.02) !important;
  animation: poirier-float 6s ease-in-out infinite !important;
  max-width: 300px !important;
  margin-bottom: 32px !important;
}

/* Titre WOW — Playfair Display monumental */
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop h2,
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state h2 {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #E8E8EA !important;
  margin: 0 0 12px !important;
  text-align: center !important;
}

/* "Poire.Space" — Accent doré chaud */
html[data-realm="poirier"][data-theme="deep-ether"] .home-title-accent {
  color: #6B8FA3 !important;
}

/* Sous-texte accueil */
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop p,
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state p {
  color: #A1A1A6 !important;
  font-size: 1rem !important;
  max-width: 360px !important;
  text-align: center !important;
  line-height: 1.6 !important;
  margin: 0 0 28px !important;
}

/* CTA Bouton Welcome */
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state .btn,
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop .btn {
  background: #6B8FA3 !important;
  color: #141415 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 16px 32px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 16px rgba(136, 169, 192, 0.12) !important;
  transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state .btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop .btn:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(136, 169, 192, 0.12) !important;
  background: #A4C0D3 !important;
}

/* 💡 Astuce en bas */
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state small,
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop small {
  color: #52525A !important;
  font-size: 0.8rem !important;
}

/* --- Animation flottante douce --- */
@keyframes poirier-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* --- Sidebar — Darkest --- */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-list-panel {
  background-color: #141415 !important;
}

/* --- FIX 3 : Topic header — Liquid Glass (Apple WWDC) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-header {
  background: rgba(26, 26, 27, 0.75) !important;  /* #1A1A1B @ 75% */
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-bottom: 1px solid #2C2C2D !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-title {
  font-family: 'Inter', 'Nunito', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #EAEAEA !important;
  margin: 0 !important;
}

/* --- FIX 5 : Actions de post visibles (60-30-10 rule, IxDF) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions a,
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions button,
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions .action-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .reply-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .quote-btn {
  color: #8A8A8C !important;  /* Visible without shouting */
  transition: color 0.3s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions a:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions button:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions .action-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .reply-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .quote-btn:hover {
  color: #88A9C0 !important;  /* Terracotta warm hover */
}

/* --- FIX 6 : Avatars — assise visuelle (Post-Neumorphism, Pixelmatters) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-avatar img,
html[data-realm="poirier"][data-theme="deep-ether"] .post-author-avatar {
  border: 1px solid #2C2C2D !important;
  background-color: #141415 !important;
}

/* --- PREMIUM 7 : Images dans posts — Harmonie matérielle (Apple HIG: concentric design) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img,
html[data-realm="poirier"][data-theme="deep-ether"] .post-image {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  margin: 16px 0 !important;
  transition: transform 0.3s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-image:hover {
  transform: scale(1.01) !important;
  cursor: zoom-in !important;
}

/* --- PREMIUM 4 : CTA "Nouveau Sujet" — Hover lift & gold glow --- */
html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(107, 143, 163, 0.25),
              0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* --- PREMIUM 8 : Scroll-to-top — Liquid Glass (CSS-Tricks / Apple) --- */
html[data-realm="poirier"][data-theme="deep-ether"] #scroll-top-btn,
html[data-realm="poirier"][data-theme="deep-ether"] #scroll-bottom-btn {
  background: rgba(31, 31, 34, 0.65) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #6B8FA3 !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #scroll-top-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] #scroll-bottom-btn:hover {
  background: rgba(42, 42, 46, 0.8) !important;
  transform: translateY(-4px) !important;
  color: #A4C0D3 !important;
}

/* =========================================================================
   TOPIC CARDS — Linear-style Dense List (NotebookLM v2 Audit Fix)
   Fixes: layout shift, ellipsis, density, separator, floating avatars
   ========================================================================= */

/* 1. SIDEBAR CONTAINER — cards with gap */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-topics {
  padding: 6px 8px !important;
  background-color: #141415 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* 2. CARD — surface élevée, micro-bordure */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card {
  display: flex !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: min-content !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background-color: rgba(31, 31, 34, 0.5) !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease !important;
  transform: none !important;
  position: relative !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:last-child {
  border-bottom: none !important;
}

/* 3. HOVER — warm gold reveal */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:hover {
  background-color: rgba(42, 42, 46, 0.6) !important;
  border-color: rgba(107, 143, 163, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transform: none !important;
}

/* 4. ACTIVE — gold indicator bar */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.active {
  background-color: rgba(107, 143, 163, 0.06) !important;
  border-color: rgba(107, 143, 163, 0.15) !important;
  box-shadow: inset 3px 0 0 0 #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.active::before,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.active::after {
  display: none !important;
}

/* 5. No press scale */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:active {
  transform: none !important;
}

/* 6. AVATAR — 40x40 ancré avec depth */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-avatar-col {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  padding-top: 2px !important;  /* Alignement optique x-height */
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-author-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background-color: #1A1A1B !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* 7. MAIN COL — min-width:0 pour ellipsis dans flexbox */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-main-col {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* 8. HEADER LINE — titre + count, overflow protected */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-header-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
/* Kill any lingering hover translateX on titles */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:hover .topic-card-title {
  transform: none !important;
}

/* Titre du topic */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-title {
  color: #EAEAEA !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* Nombre de réponses — rigide à droite */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-response-count {
  color: #9A9A9E !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-response-count i {
  font-size: 11px !important;
  color: #8A8A8C !important;
}

/* Point de participation */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-participated {
  color: #6B8FA3 !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
}

/* 9. META LINE — auteur + date, overflow protected */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #7A7A80 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: 'Inter', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 0 !important;
  width: auto !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-meta-sep {
  color: #5A5A5E !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line .topic-date {
  color: #8A8A8C !important;
  font-variant-numeric: tabular-nums !important;
}
/* Author name in meta line */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line .author-name {
  color: #A1A1A6 !important;
  font-weight: 500 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line .author-name.author-admin {
  color: #f87171 !important;  /* Rouge admin */
  text-shadow: 0 0 6px rgba(248, 113, 113, 0.25) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line .author-name.author-mod {
  color: #34d399 !important;  /* Vert modo */
  text-shadow: 0 0 6px rgba(52, 211, 153, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════
   🎨 GAMIFICATION ROLE COLORS — Poirier Dark Theme
   Sidebar topic list (.topic-card-meta-line) + post view (.author-*)
   Warm organic palette consistent with Poirier design language
   ═══════════════════════════════════════════════════════ */

/* --- Juge Suprême: Bleu ciel — même couleur que .is-juge-supreme .author-username (#87cefa) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .author-juge {
  color: #87cefa !important;
  text-shadow: 0 0 8px rgba(135, 206, 250, 0.35) !important;
  font-weight: 600 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line .author-name.author-juge {
  color: #87cefa !important;
  text-shadow: 0 0 6px rgba(135, 206, 250, 0.25) !important;
}

/* --- Artiste du Jour: Rose-violet — même couleur que .is-artist .author-username (#E056FD) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .author-artist {
  color: #E056FD !important;
  text-shadow: 0 0 8px rgba(224, 86, 253, 0.35) !important;
  font-weight: 600 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line .author-name.author-artist {
  color: #E056FD !important;
  text-shadow: 0 0 6px rgba(224, 86, 253, 0.25) !important;
}

/* --- Poire du Jour: Vert radioactif — même couleur que .is-poire .author-username (#76ff03) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .author-poire {
  color: #76ff03 !important;
  text-shadow: 0 0 8px rgba(118, 255, 3, 0.35) !important;
  font-weight: 600 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line .author-name.author-poire {
  color: #76ff03 !important;
  text-shadow: 0 0 6px rgba(118, 255, 3, 0.25) !important;
}

/* --- Top Poireur: Or — même couleur que la couronne #FFD700 --- */
html[data-realm="poirier"][data-theme="deep-ether"] .author-top-poireur {
  color: #FFD700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.35) !important;
  font-weight: 600 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta-line .author-name.author-top-poireur {
  color: #FFD700 !important;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.25) !important;
}

/* --- Combined roles: When a user has multiple gamification roles,
   the most prestigious color should win visually.
   CSS cascade priority: juge > artist > poire > top-poireur --- */

/* 10. REPLY COUNT — correct selector (JS uses .reply-count-inline, not .topic-response-count) */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-header-line .reply-count-inline {
  color: #9A9A9E !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-header-line .reply-count-inline i {
  font-size: 11px !important;
  color: #8A8A8C !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-header-line .reply-count-inline.hot {
  color: #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-header-line .reply-count-inline.hot i {
  color: #6B8FA3 !important;
}

/* --- Pinned badge --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-pin-badge {
  color: #6B8FA3 !important;
  font-size: 12px !important;
}

/* --- Hot topic → lueur subtile --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.hot {
  background-color: rgba(136, 169, 192, 0.04) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.hot .topic-card-title {
  color: #E8A287 !important;
}

/* --- Deleted topic --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.topic-deleted {
  opacity: 0.5 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.topic-deleted .topic-card-title {
  text-decoration: line-through !important;
  color: #8A8A8C !important;
}

/* --- Prefix badges --- */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-prefix-badge {
  background-color: rgba(107, 143, 163, 0.12) !important;
  color: #6B8FA3 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  flex-shrink: 0 !important;
}

/* --- Topic scroll container fond #1A1A1B (vs body #141415) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .main-content.topic-layout,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-scroll-container {
  background-color: #1A1A1B !important;
}

/* =========================================================================
   POST IDENTITY SYSTEM — Complete User Element Styling
   (NotebookLM Audit: Linear 8pt Grid + Apple HIG Depth)
   ========================================================================= */

/* --- Post Header Row --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post .post-author-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* --- Avatar (53x53 squircle with depth) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-avatar-small {
  width: 53px !important;
  height: 53px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1px solid #2C2C2D !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  background-color: #1A1A1B !important;
  flex-shrink: 0 !important;
}

/* --- Author Meta Column --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  justify-content: center !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post .author-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* --- Username --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-username {
  color: #EAEAEA !important;  /* Ratio 10.4:1 */
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-username:hover {
  color: #6B8FA3 !important;
}

/* --- Clans container --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* --- Level Badge — Rounded diamond + warm dynamic color --- */
/* JS injects --level-color, --level-color-light, --level-text-color.
   Palette: mineral gray → dusty coral → terracotta → burgundy → muted gold
   Designed to harmonize with Deep Ether (#1A1A1B / #1F1F22 / #6B8FA3). */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  /* Dynamic gradient: warm-shifted colors per level */
  background: linear-gradient(160deg,
    var(--level-color-light, #E2C084) 0%,
    var(--level-color, #6B8FA3) 100%) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  -webkit-mask-image: var(--post-author-badge-mask-image) !important;
  mask-image: var(--post-author-badge-mask-image) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  /* Dynamic halo — color follows the level (25% opacity, single layer) */
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--level-color, #6B8FA3) 25%, transparent)) !important;
}

/* Metallic polish: gradient overlay simulating zenith illumination (Liquid Glass) */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  /* Light at top, transparent middle, shadow at bottom = polished metal coin */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.14) 0%,
    transparent 35%,
    rgba(0, 0, 0, 0.3) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  -webkit-mask-image: var(--post-author-badge-mask-image) !important;
  mask-image: var(--post-author-badge-mask-image) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

/* Hide the old SVG shell: the shape is now handled by the rounded diamond mask */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge svg {
  display: none !important;
}

/* Level number text — Pixel-perfect centroid alignment
   FIX: absolute positioning + translate(-50%,-50%) for true center. */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge .level-text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  color: var(--level-text-color, #EAEAEA) !important;
  line-height: 1 !important;
  z-index: 2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  white-space: nowrap !important;
  text-align: center !important;
  display: block !important;
}

/* --- Legendary Shimmer (Level 50+) — Premium metallic sweep --- */
@keyframes premiumShimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -100% 0; }
}

html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge.level-legendary {
  background: linear-gradient(
    135deg,
    var(--level-color, #6B8FA3) 0%,
    #E6D17B 45%,
    var(--level-color-light, #E2C084) 55%,
    var(--level-color, #6B8FA3) 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: premiumShimmer 4s ease-in-out infinite !important;
  /* Slightly stronger glow for legendary */
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--level-color, #6B8FA3) 35%, transparent)) !important;
}

/* --- Clan Badges — Rounded diamonds with halos --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans {
  gap: 6px !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge {
  position: relative !important;
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 14px !important;
  border: none !important;
  /* Very subtle glass background for transparent clan icons, completely removing the ugly solid black */
  background: linear-gradient(135deg, rgba(107, 143, 163, 0.15), rgba(107, 143, 163, 0.05)) !important;
  overflow: hidden !important;
  -webkit-mask-image: var(--post-author-badge-mask-image) !important;
  mask-image: var(--post-author-badge-mask-image) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  clip-path: none !important; /* Crucial to disable polygon */
  
  /* Initial subtle shadow */
  filter: drop-shadow(0 0 4px rgba(107, 143, 163, 0.2)) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge:hover {
  transform: scale(1.15) translateY(-2px) !important;
  filter: drop-shadow(0 0 10px rgba(107, 143, 163, 0.6)) drop-shadow(0 0 20px rgba(107, 143, 163, 0.4)) !important;
  z-index: 10 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge img:not(.clan-badge-glow) {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  clip-path: none !important;
  /* Cover ensures the icon fully fills the rounded diamond without leaving dead corners */
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transform: scale(1.18) !important;
}

/* Hide legacy glow components as we use drop-shadow */
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge .clan-badge-glow,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge::after {
  display: none !important;
}

/* --- Clan Overflow Count (+N) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .author-clans .clan-overflow {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #8A8A8C !important;
}

/* --- Post Date & Edited --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-date {
  font-size: 12px !important;
  color: #9A9A9E !important;  /* Ratio 4.6:1 */
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-edited {
  font-size: 11px !important;
  font-style: italic !important;
  color: #8A8A8C !important;
}

/* --- Reply Context (Linear/Notion quote style) --- */
/* IMPORTANT: Ne PAS mettre display:flex ici, ça override le display:none inline ! */
/* Le display est géré par le JS qui enlève style="display:none" quand il y a une réponse */
html[data-realm="poirier"][data-theme="deep-ether"] .post-reply-context {
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  margin-bottom: 12px !important;
  background-color: #1A1A1B !important;
  border-left: 3px solid rgba(136, 169, 192, 0.4) !important;
  border-radius: 0 4px 4px 0 !important;
  font-size: 12px !important;
  color: #9A9A9E !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .reply-context-avatar {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;  /* Circulaire pour contraster avec avatar carré */
  border: 1px solid #2C2C2D !important;
  object-fit: cover !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .reply-context-text {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  max-width: 80% !important;
}

/* --- Post Signature (Visual Quietness) --- */
html[data-realm="poirier"][data-theme="deep-ether"] .post-signature {
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px dashed #2C2C2D !important;
  font-size: 12px !important;
  color: #8A8A8C !important;
  line-height: 1.4 !important;
}

/* =========================================================================
   POST CONTENT FIXES — Images, stickers, embeds
   ========================================================================= */

/* Images dans les posts — fond transparent, pas de bg gris */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img {
  background-color: transparent !important;
  border-radius: 8px !important;
}

/* Wrappers d'images (galerie, lightbox) */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .image-wrapper,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .sticker-container,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .inline-image {
  background-color: transparent !important;
  border: none !important;
}

/* Stickers — alignement avec texte + cas isolé */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img.sticker,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img[src*="sticker"],
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img[src*="risibank"] {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  /* Inline-block for stable box model + baseline alignment with text */
  display: inline-block !important;
  vertical-align: text-bottom !important;
  margin: 0 4px !important;
}

/* Sticker seul sur une ligne : centrer avec whitespace above/below */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content p:has(> img.sticker:only-child),
html[data-realm="poirier"][data-theme="deep-ether"] .post-content div:has(> img.sticker:only-child) {
  display: flex !important;
  align-items: center !important;
  margin: 8px 0 !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post-content p:has(> img.sticker:only-child) > img.sticker {
  margin: 0 !important;
}

/* Emojis inline — transparent */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img.emoji {
  background-color: transparent !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ██████╗  ██████╗ ███████╗████████╗███████╗    ██████╗ ██████╗ ███████╗███╗   ███╗██╗██╗   ██╗███╗   ███╗
   ██╔══██╗██╔═══██╗██╔════╝╚══██╔══╝██╔════╝    ██╔══██╗██╔══██╗██╔════╝████╗ ████║██║██║   ██║████╗ ████║
   ██████╔╝██║   ██║███████╗   ██║   ███████╗    ██████╔╝██████╔╝█████╗  ██╔████╔██║██║██║   ██║██╔████╔██║
   ██╔═══╝ ██║   ██║╚════██║   ██║   ╚════██║    ██╔═══╝ ██╔══██╗██╔══╝  ██║╚██╔╝██║██║██║   ██║██║╚██╔╝██║
   ██║     ╚██████╔╝███████║   ██║   ███████║    ██║     ██║  ██║███████╗██║ ╚═╝ ██║██║╚██████╔╝██║ ╚═╝ ██║
   ╚═╝      ╚═════╝ ╚══════╝   ╚═╝   ╚══════╝    ╚═╝     ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚═╝ ╚═════╝ ╚═╝     ╚═╝

   POIRIER × DEEP-ETHER — Posts Premium (NLM Audit ×5)
   Header, Typographie, Réactions, Médias, États spéciaux
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   §P1 POST HEADER — Username, date, bouton actions
   ───────────────────────────────────────────────────────────── */

/* Username hover — or + glow thermique */
html[data-realm="poirier"][data-theme="deep-ether"] .author-username {
  color: #EAEAEA !important;
  text-decoration: none !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .author-username:hover {
  color: #6B8FA3 !important;
  text-shadow: 0 0 12px rgba(107, 143, 163, 0.25) !important;
}

/* Date du post — muted, poussée à droite */
html[data-realm="poirier"][data-theme="deep-ether"] .post-date {
  color: #9A9A9C !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

/* Bouton actions "..." — disclosure progressive */
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .post-more-btn {
  color: #9A9A9C !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease, background-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post:hover .post-actions-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .post:hover .post-more-btn {
  opacity: 1 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-actions-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-more-btn:hover {
  background-color: rgba(234, 234, 234, 0.06) !important;
  color: #EAEAEA !important;
}

/* ─────────────────────────────────────────────────────────────
   §P2 POST TYPOGRAPHIE — 16px, line-height 1.6, accents
   ───────────────────────────────────────────────────────────── */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content {
  color: #EAEAEA !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  word-wrap: break-word !important;
}

/* Paragraphes — espacement 8pt grid */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content p {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content p:last-child {
  margin-bottom: 0 !important;
}

/* Gras — Warm Pearl pour contrast pop */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content strong,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content b {
  font-weight: 600 !important;
  color: #F7F4F0 !important;
}

/* Italique — Or éteint pour emphase */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content em,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content i:not(.fas):not(.far):not(.fab):not(.fa) {
  font-style: italic !important;
  color: #D4B895 !important;
}

/* Soulignement — underline offset */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content u {
  text-decoration: underline !important;
  text-decoration-color: #9A9A9C !important;
  text-underline-offset: 3px !important;
}

/* Listes — puces or */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content ul,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content ol {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-left: 24px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content li {
  margin-bottom: 8px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content ul li::marker,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content ol li::marker {
  color: #D4B895 !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────
   §P3 POST FOOTER — Réactions pill, reply slide-in
   ───────────────────────────────────────────────────────────── */

/* Séparation contenu/footer */
html[data-realm="poirier"][data-theme="deep-ether"] .post-footer {
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(234, 234, 234, 0.04) !important;
}

/* Réactions — pills minimalistes */
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-btn {
  background: rgba(234, 234, 234, 0.04) !important;
  border: 1px solid rgba(234, 234, 234, 0.06) !important;
  border-radius: 100px !important;
  color: #9A9A9C !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Réaction active — teinte or */
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-btn.is-active,
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-btn.active {
  background: rgba(107, 143, 163, 0.12) !important;
  border-color: rgba(107, 143, 163, 0.3) !important;
  color: #6B8FA3 !important;
}

/* Réaction hover */
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-btn:hover {
  background: rgba(234, 234, 234, 0.08) !important;
  transform: scale(1.05) !important;
  color: #EAEAEA !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-btn.is-active:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-btn.active:hover {
  background: rgba(107, 143, 163, 0.18) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-btn:active {
  transform: scale(0.97) !important;
}

/* Boutons Répondre/Citer — slide-in au hover du post */
html[data-realm="poirier"][data-theme="deep-ether"] .post-reply-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .post-quote-btn {
  background: transparent !important;
  border: none !important;
  color: #9A9A9C !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-reply-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-quote-btn:hover {
  color: #6B8FA3 !important;
  background: rgba(107, 143, 163, 0.1) !important;
}

/* ─────────────────────────────────────────────────────────────
   §P4 MÉDIAS DANS LES POSTS — Images, GIFs, Embeds
   ───────────────────────────────────────────────────────────── */

/* Shimmer loading animation */
@keyframes shimmerLoad {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Images uploadées — coins arrondis, hover zoom, shimmer */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .post-image {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, #262629 25%, #2A2A2E 50%, #262629 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmerLoad 2.5s infinite linear !important;
  object-fit: cover !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  cursor: zoom-in !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .post-image:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
              0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* GIFs — taille max contrôlée */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img[src$=".gif"]:not(.sticker):not(.emoji) {
  max-height: 350px !important;
  width: auto !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  background-color: #262629 !important;
}

/* Stickers hover — reward bounce */
@media (hover: hover) and (pointer: fine) {
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content .sticker:hover {
    transform: scale(1.15) !important;
  }
}

/* Embeds (YouTube, Twitter) — intégrés avec profondeur */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content iframe {
  border-radius: 12px !important;
  border: 1px solid #333336 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Spacing médias ↔ texte (8pt grid) */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .post-image,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content iframe,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img[src$=".gif"]:not(.sticker):not(.emoji) {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  display: block !important;
}
/* Images consécutives — espacement réduit (Gestalt: proximité) */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .post-image + .post-image {
  margin-top: 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   §P5 ÉTATS SPÉCIAUX — Épinglé, OP, Reply context, Édité, Supprimé
   ───────────────────────────────────────────────────────────── */

/* Post épinglé — gradient + border-top or + icône */
html[data-realm="poirier"][data-theme="deep-ether"] .post.is-pinned {
  background: linear-gradient(180deg, #252529 0%, #1F1F22 120px) !important;
  border-top: 2px solid #6B8FA3 !important;
  position: relative !important;
}

/* Post de l'OP — bordure gauche or */
html[data-realm="poirier"][data-theme="deep-ether"] .post.is-author {
  border-left: 3px solid #6B8FA3 !important;
}

/* Reply context — inset sombre, bordure neutre → or au hover */
html[data-realm="poirier"][data-theme="deep-ether"] .reply-context {
  background-color: #1A1A1B !important;
  border-left: 3px solid #4A4A4D !important;
  border-radius: 4px 8px 8px 4px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  color: #9A9A9C !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-left-color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .reply-context:hover {
  background-color: #242428 !important;
  border-left-color: #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .reply-context .reply-author {
  font-weight: 600 !important;
  color: #EAEAEA !important;
  margin-bottom: 4px !important;
}

/* Post édité — mention discrète */
html[data-realm="poirier"][data-theme="deep-ether"] .post-edit-info {
  font-size: 11px !important;
  font-style: italic !important;
  color: #7A7A7D !important;
}

/* Post supprimé — état fantôme */
html[data-realm="poirier"][data-theme="deep-ether"] .post.post-soft-deleted {
  border: 1px dashed #333336 !important;
  opacity: 0.6 !important;
  filter: grayscale(100%) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-deleted-badge {
  color: #7A7A7D !important;
  font-size: 13px !important;
  font-style: italic !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   ███████╗██████╗ ██╗████████╗███████╗██╗   ██╗██████╗
   ██╔════╝██╔══██╗██║╚══██╔══╝██╔════╝██║   ██║██╔══██╗
   █████╗  ██║  ██║██║   ██║   █████╗  ██║   ██║██████╔╝
   ██╔══╝  ██║  ██║██║   ██║   ██╔══╝  ██║   ██║██╔══██╗
   ███████╗██████╔╝██║   ██║   ███████╗╚██████╔╝██║  ██║
   ╚══════╝╚═════╝ ╚═╝   ╚═╝   ╚══════╝ ╚═════╝ ╚═╝  ╚═╝

   POIRIER × DEEP-ETHER — Éditeur Premium (NLM Audit ×5)
   Chat editor, Standard editor, Sticker picker, Upload, Poll
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   §E1 CHAT EDITOR — Dock flottant, zone de saisie, placeholder
   ───────────────────────────────────────────────────────────── */

/* Dock global — Liquid Glass sans saturate (perf fix) */
html[data-realm="poirier"][data-theme="deep-ether"] .fixed-reply-form {
  background: rgba(31, 31, 34, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(234, 234, 234, 0.06) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15) !important;
  padding: 12px 16px !important;
}

/* Input bar — fond profond, squircle */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-input-bar {
  background: #141415 !important;
  border: 1px solid rgba(234, 234, 234, 0.06) !important;
  border-radius: 24px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .chat-input-bar:focus-within {
  border-color: rgba(107, 143, 163, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(107, 143, 163, 0.1) !important;
}

/* Wrapper editeur */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor-wrapper {
  background: transparent !important;
}

/* Zone de saisie contenteditable */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor {
  color: #EAEAEA !important;
  min-height: 44px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  outline: none !important;
}

/* Poirier mobile: compact editor to align with 36px send button */
@media (max-width: 768px) {
  html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor {
    min-height: 32px !important;
    padding: 6px 12px !important;
  }
  html[data-realm="poirier"][data-theme="deep-ether"] .chat-send-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Placeholder content-editable */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor[placeholder]:empty::before {
  color: #7A7A7D !important;
  opacity: 1 !important;
}

/* Reply context bar — accent or gauche */
html[data-realm="poirier"][data-theme="deep-ether"] #reply-context-bar {
  background: rgba(26, 26, 27, 0.9) !important;
  border: 1px solid rgba(234, 234, 234, 0.04) !important;
  border-left: 3px solid #6B8FA3 !important;
  border-radius: 12px !important;
  color: #EAEAEA !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ─────────────────────────────────────────────────────────────
   §E2 BOUTONS D'ACTION — CTA envoyer, outils secondaires
   ───────────────────────────────────────────────────────────── */

/* Boutons secondaires — 44px touch target, ghost
   NOTE: display is NOT forced here — mobile media query hides non-first buttons.
   Adding display: inline-flex here would override the mobile hide (higher specificity). */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-action-btn {
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9A9A9C !important;
  background: transparent !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .chat-action-btn:hover {
  background-color: rgba(234, 234, 234, 0.08) !important;
  color: #EAEAEA !important;
}

/* Bouton format "Aa" — même style */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-toggle {
  color: #9A9A9C !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-toggle:hover {
  color: #EAEAEA !important;
}

/* CTA Envoyer — cercle or, le seul élément coloré */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-send-btn {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #6B8FA3 !important;
  color: #1A1A1B !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(107, 143, 163, 0.25) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .chat-send-btn:hover {
  transform: translateY(-2px) !important;
  background-color: #DDC08B !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .chat-send-btn:active {
  transform: scale(0.92) !important;
  transition-duration: 0.1s !important;
}

/* Tray de formatage — slide-in */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-tray {
  background-color: #1A1A1B !important;
  border-top: 1px solid #2A2A2D !important;
  border-radius: 0 0 12px 12px !important;
}

/* Boutons de formatage B/I/U */
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-tray .editor-btn {
  color: #9A9A9C !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-tray .editor-btn:hover {
  color: #EAEAEA !important;
  background-color: rgba(234, 234, 234, 0.08) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-btn.active,
html[data-realm="poirier"][data-theme="deep-ether"] .chat-fmt-tray .editor-btn.active {
  color: #6B8FA3 !important;
  background-color: rgba(107, 143, 163, 0.15) !important;
}

/* ─────────────────────────────────────────────────────────────
   §E3 STICKER PICKER — Onglets, recherche, grille
   ───────────────────────────────────────────────────────────── */

/* Conteneur picker — glass elevated */
html[data-realm="poirier"][data-theme="deep-ether"] #sticker-picker {
  background-color: #1F1F22 !important;
  border: 1px solid #2D2D30 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Onglets — segmented control */
html[data-realm="poirier"][data-theme="deep-ether"] .sticker-tab-btn {
  background: transparent !important;
  border: none !important;
  color: #9A9A9C !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sticker-tab-btn.active {
  background-color: #2D2D30 !important;
  color: #6B8FA3 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Recherche sticker — focus ring or */
html[data-realm="poirier"][data-theme="deep-ether"] #sticker-search {
  background-color: #141415 !important;
  color: #EAEAEA !important;
  border: 1px solid #2D2D30 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #sticker-search::placeholder {
  color: #9A9A9C !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #sticker-search:focus {
  border-color: #6B8FA3 !important;
  box-shadow: 0 0 0 2px rgba(107, 143, 163, 0.15) !important;
}

/* Grille stickers — hover bounce */
@media (hover: hover) and (pointer: fine) {
  html[data-realm="poirier"][data-theme="deep-ether"] .sticker-tab-btn:hover {
    color: #EAEAEA !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .sticker-grid img:hover {
    border-radius: 8px !important;
    background-color: #2D2D30 !important;
    transform: scale(1.08) !important;
    transition:
      transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
      background-color 0.15s ease !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   §E4 ÉDITEUR STANDARD — WYSIWYG card, toolbar, scrollbar
   ───────────────────────────────────────────────────────────── */

/* Conteneur card premium */
html[data-realm="poirier"][data-theme="deep-ether"] .wysiwyg-container {
  background-color: #1F1F22 !important;
  border: 1px solid #333338 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(20, 20, 21, 0.5), 0 1px 3px rgba(24, 24, 26, 0.3) !important;
  overflow: hidden !important;
  transition: border-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .wysiwyg-container:focus-within {
  border-color: #6B8FA3 !important;
  box-shadow: 0 0 0 3px rgba(55, 48, 36, 0.6), 0 8px 30px rgba(17, 17, 18, 0.5) !important;
}

/* Toolbar standard — fond enfonçable */
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar-compact {
  background-color: #1A1A1B !important;
  border-bottom: 1px solid #333338 !important;
}

/* Boutons toolbar standard */
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar-compact .editor-btn {
  color: #9A9A9C !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar-compact .editor-btn:hover {
  color: #EAEAEA !important;
  background-color: rgba(234, 234, 234, 0.08) !important;
}
/* Éradication du vert sondage */
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar-compact .editor-btn[style*="color: #4caf50"] {
  color: #9A9A9C !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar-compact .editor-btn[style*="color: #4caf50"]:hover {
  color: #EAEAEA !important;
}

/* Zone d'édition — type Notion */
html[data-realm="poirier"][data-theme="deep-ether"] #editor-zone.editor-content {
  background-color: #1F1F22 !important;
  color: #EAEAEA !important;
  min-height: 180px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  padding: 20px 24px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  outline: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #editor-zone.editor-content:empty::before {
  color: #7A7A7D !important;
}

/* Scrollbar custom */
html[data-realm="poirier"][data-theme="deep-ether"] #editor-zone.editor-content::-webkit-scrollbar {
  width: 10px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #editor-zone.editor-content::-webkit-scrollbar-track {
  background: #1F1F22 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #editor-zone.editor-content::-webkit-scrollbar-thumb {
  background-color: #3A3A40 !important;
  border: 3px solid #1F1F22 !important;
  border-radius: 10px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #editor-zone.editor-content::-webkit-scrollbar-thumb:hover {
  background-color: #55555A !important;
}

/* ─────────────────────────────────────────────────────────────
   §E5 UPLOAD IMAGES + POLL MODAL
   ───────────────────────────────────────────────────────────── */

/* Upload shimmer */
@keyframes uploadShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
html[data-realm="poirier"][data-theme="deep-ether"] #editor-zone .upload-placeholder {
  border-radius: 8px !important;
  background: linear-gradient(90deg, #1F1F22 25%, #2A2A2D 50%, #1F1F22 75%) !important;
  background-size: 200% 100% !important;
  animation: uploadShimmer 1.5s infinite linear !important;
  border: 1px solid rgba(234, 234, 234, 0.05) !important;
}

/* Images dans l'éditeur */
html[data-realm="poirier"][data-theme="deep-ether"] #editor-zone img {
  max-width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid rgba(234, 234, 234, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Poll indicator — or au lieu du vert */
html[data-realm="poirier"][data-theme="deep-ether"] #poll-indicator {
  background: rgba(107, 143, 163, 0.1) !important;
  border: 1px solid rgba(107, 143, 163, 0.3) !important;
  color: #6B8FA3 !important;
  border-radius: 8px !important;
}

/* Poll modal — fond sombre, inputs thématisés */
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal > div:last-child {
  background: #1F1F22 !important;
  border: 1px solid rgba(107, 143, 163, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(234, 234, 234, 0.05) !important;
  color: #EAEAEA !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal input[type="text"],
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal input[type="number"],
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal .poll-option-input {
  background: #1A1A1B !important;
  border: 1px solid rgba(234, 234, 234, 0.1) !important;
  color: #EAEAEA !important;
  border-radius: 8px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal input:focus {
  border-color: #6B8FA3 !important;
  box-shadow: 0 0 0 3px rgba(107, 143, 163, 0.15) !important;
  outline: none !important;
}

/* Poll "Créer" button — or au lieu du vert */
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal button[onclick="savePoll()"] {
  background: #6B8FA3 !important;
  color: #1A1A1B !important;
  border: none !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(107, 143, 163, 0.2) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal button[onclick="savePoll()"]:hover {
  filter: brightness(1.1) !important;
}

/* Poll "Annuler" — ghost */
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal button[onclick="togglePollModal()"] {
  color: #9A9A9C !important;
  background: transparent !important;
  border: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal button[onclick="togglePollModal()"]:hover {
  color: #EAEAEA !important;
}

/* Poll "Ajouter une réponse" — dashed or au hover */
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal button[onclick="addPollOption()"] {
  background: transparent !important;
  border: 1px dashed #9A9A9C !important;
  color: #9A9A9C !important;
  border-radius: 8px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] #poll-modal button[onclick="addPollOption()"]:hover {
  border-color: #6B8FA3 !important;
  color: #6B8FA3 !important;
  background: rgba(107, 143, 163, 0.05) !important;
}


/* =========================================================================
   ██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗    ████████╗ ██████╗ ██╗  ██╗███████╗███╗   ██╗███████╗
   ██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║    ╚══██╔══╝██╔═══██╗██║ ██╔╝██╔════╝████╗  ██║██╔════╝
   ██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║       ██║   ██║   ██║█████╔╝ █████╗  ██╔██╗ ██║███████╗
   ██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║       ██║   ██║   ██║██╔═██╗ ██╔══╝  ██║╚██╗██║╚════██║
   ██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║       ██║   ╚██████╔╝██║  ██╗███████╗██║ ╚████║███████║
   ╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝       ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝  ╚═══╝╚══════╝

   POIRIER × DEEP-ETHER — Design Tokens + Content + Forms + Micro-interactions
   Basé sur audit NotebookLM × 5 (sidebar, contenu, header, formulaires, animations)
   ========================================================================= */

/* --- DESIGN TOKENS — Variables d'animation standardisées --- */
html[data-realm="poirier"][data-theme="deep-ether"] {
  --anim-hover: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --anim-snappy: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --anim-modal: 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
  --anim-toast: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─────────────────────────────────────────────────────────────
   §A POST CONTENT — Citations, Spoilers, Code, Liens
   ───────────────────────────────────────────────────────────── */

/* Citations (blockquote) — Surface élevée + bordure or */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content blockquote,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .quote-block {
  background-color: #252528 !important;
  border-left: 3px solid #6B8FA3 !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  color: #9A9A9C !important;
  font-style: italic !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  border-radius: 0 8px 8px 0 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content blockquote p:last-child,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .quote-block p:last-child {
  margin-bottom: 0 !important;
}

/* Spoilers — Flou textuel → révélation douce */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .spoiler-content,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .spoiler {
  background-color: #141415 !important;
  color: transparent !important;
  text-shadow: 0 0 10px #9A9A9C !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, text-shadow 0.3s ease-out !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .spoiler-content.revealed,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .spoiler.revealed {
  background-color: #252528 !important;
  color: #EAEAEA !important;
  text-shadow: none !important;
  user-select: text !important;
}

/* Code blocks — Surface creusée, monospace, scrollbar cachée */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content pre {
  background-color: #161618 !important;
  border: 1px solid #2B2B2E !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content pre::-webkit-scrollbar {
  display: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content code {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace !important;
  color: #D4D4D6 !important;
  font-size: 0.9em !important;
  line-height: 1.5 !important;
}
/* Code inline (dans du texte) */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content p > code,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content li > code {
  background-color: #252528 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

/* Liens — Or accent, underline animé au hover */
html[data-realm="poirier"][data-theme="deep-ether"] .post-content a:not(.sticker):not([class*="btn"]) {
  color: #6B8FA3 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color var(--anim-hover), border-bottom-color var(--anim-hover) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .post-content a:not(.sticker):not([class*="btn"]):hover {
  color: #E5C384 !important;
  border-bottom-color: rgba(229, 195, 132, 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────
   §B FORMULAIRES — Inputs, Selects, Textareas
   ───────────────────────────────────────────────────────────── */
html[data-realm="poirier"][data-theme="deep-ether"] input[type="text"],
html[data-realm="poirier"][data-theme="deep-ether"] input[type="password"],
html[data-realm="poirier"][data-theme="deep-ether"] input[type="email"],
html[data-realm="poirier"][data-theme="deep-ether"] input[type="search"],
html[data-realm="poirier"][data-theme="deep-ether"] input[type="url"],
html[data-realm="poirier"][data-theme="deep-ether"] textarea:not(#replyContent),
html[data-realm="poirier"][data-theme="deep-ether"] select,
html[data-realm="poirier"][data-theme="deep-ether"] .filter-select {
  background-color: #1F1F22 !important;
  color: #EAEAEA !important;
  border: 1px solid rgba(234, 234, 234, 0.06) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] input[type="text"]:focus,
html[data-realm="poirier"][data-theme="deep-ether"] input[type="password"]:focus,
html[data-realm="poirier"][data-theme="deep-ether"] input[type="email"]:focus,
html[data-realm="poirier"][data-theme="deep-ether"] input[type="search"]:focus,
html[data-realm="poirier"][data-theme="deep-ether"] input[type="url"]:focus,
html[data-realm="poirier"][data-theme="deep-ether"] textarea:not(#replyContent):focus,
html[data-realm="poirier"][data-theme="deep-ether"] select:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .filter-select:focus {
  border-color: #6B8FA3 !important;
  background-color: #1A1A1B !important;
  box-shadow: 0 0 0 3px rgba(107, 143, 163, 0.15) !important;
}

/* ─────────────────────────────────────────────────────────────
   §C MODALES — Overlay + Animation slide-up
   ───────────────────────────────────────────────────────────── */
@keyframes fadeInEther {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUpEther {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

html[data-realm="poirier"][data-theme="deep-ether"] .modal-overlay,
html[data-realm="poirier"][data-theme="deep-ether"] .poll-modal-overlay {
  background: rgba(20, 20, 20, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: fadeInEther 0.3s ease forwards !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .modal-content,
html[data-realm="poirier"][data-theme="deep-ether"] .poll-modal {
  background-color: #1F1F22 !important;
  border: 1px solid rgba(234, 234, 234, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(234, 234, 234, 0.05) !important;
  animation: slideUpEther 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* ─────────────────────────────────────────────────────────────
   §D BOUTONS — Hiérarchie Ghost vs Solid
   ───────────────────────────────────────────────────────────── */

/* Boutons secondaires (Ghost gold) */
html[data-realm="poirier"][data-theme="deep-ether"] .btn-cancel,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-secondary {
  background-color: transparent !important;
  color: #6B8FA3 !important;
  border: 1px solid rgba(107, 143, 163, 0.3) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--anim-hover) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .btn-cancel:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-secondary:hover {
  background-color: rgba(107, 143, 163, 0.08) !important;
  border-color: rgba(107, 143, 163, 0.6) !important;
}

/* Boutons primaires (Solid gold) */
html[data-realm="poirier"][data-theme="deep-ether"] .btn-submit,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-primary {
  background-color: #6B8FA3 !important;
  color: #1A1A1B !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(107, 143, 163, 0.15) !important;
  transition: transform var(--anim-hover), box-shadow var(--anim-hover), filter var(--anim-hover) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .btn-submit:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(107, 143, 163, 0.25) !important;
  filter: brightness(1.05) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .btn-submit:active,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ─────────────────────────────────────────────────────────────
   §E TOPIC CARDS — Hiérarchie typographique
   ───────────────────────────────────────────────────────────── */
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card {
  transition: background-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:hover {
  background-color: #1F1F22 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-title,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card .topic-title {
  color: #EAEAEA !important;
  font-weight: 600 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-meta,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card .topic-meta {
  color: #9A9A9C !important;
  font-size: 12px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-date,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card .topic-date {
  color: #8B8B8E !important;
  font-size: 11px !important;
}

/* ─────────────────────────────────────────────────────────────
   §F PAGINATION — Squircles, accent or
   ───────────────────────────────────────────────────────────── */
html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .page-link {
  color: #A0A0A1 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-out !important;
  text-decoration: none !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .page-link:hover {
  color: #EAEAEA !important;
  background-color: #1F1F22 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn.active,
html[data-realm="poirier"][data-theme="deep-ether"] .page-link.active,
html[data-realm="poirier"][data-theme="deep-ether"] .page-item.active .page-link {
  color: #6B8FA3 !important;
  background-color: rgba(107, 143, 163, 0.05) !important;
  border-color: rgba(107, 143, 163, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────
   §G TOASTS — Neutre-chaud (exit vert/rouge système)
   ───────────────────────────────────────────────────────────── */
@keyframes toastSlideUp {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

html[data-realm="poirier"][data-theme="deep-ether"] .sticker-toast {
  background: #1F1F22 !important;
  color: #EAEAEA !important;
  border-radius: 8px !important;
  border: 1px solid rgba(234, 234, 234, 0.08) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  animation: toastSlideUp var(--anim-toast) forwards !important;
}
/* NOTE: #new-messages-toast uses its own show/hide via .visible class.
   Do NOT apply the one-shot animation here — it fights with the toggle. */
html[data-realm="poirier"][data-theme="deep-ether"] #new-messages-toast {
  background: #1F1F22 !important;
  color: #EAEAEA !important;
  border-radius: 24px !important;  /* Pilule (cohérent avec le style de base) */
  border: 1px solid rgba(107, 143, 163, 0.2) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  /* Pas d'animation: forwards — le toggle .visible gère tout */
}
html[data-realm="poirier"][data-theme="deep-ether"] .toast-success {
  border-left: 4px solid #6B8FA3 !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .toast-error {
  border-left: 4px solid #CE6A5A !important;
}

/* ─────────────────────────────────────────────────────────────
   §H SCROLL NAV BUTTONS — Glassmorphisme léger, accent or
   ───────────────────────────────────────────────────────────── */
html[data-realm="poirier"][data-theme="deep-ether"] .nav-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-top-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-bottom-btn {
  width: 44px !important;
  height: 44px !important;
  background: rgba(31, 31, 34, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(107, 143, 163, 0.15) !important;
  border-radius: 50% !important;
  color: #6B8FA3 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  transition: all var(--anim-hover) !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .nav-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-top-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-bottom-btn:hover {
  background: rgba(31, 31, 34, 0.95) !important;
  border-color: rgba(107, 143, 163, 0.4) !important;
  color: #EAEAEA !important;
  transform: scale(1.05) !important;
}

/* ─────────────────────────────────────────────────────────────
   §I BOUTON "Changer de forum" — Compact discret
   ───────────────────────────────────────────────────────────── */
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-forum-switch {
  position: relative !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  margin: 0 12px 8px 12px !important;
  padding: 6px 12px !important;
  height: auto !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #7A7A7D !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-forum-switch span {
  font-size: 12px !important;
  color: inherit !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-forum-switch i {
  color: inherit !important;
  font-size: 12px !important;
}
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-forum-switch:hover {
  background-color: rgba(107, 143, 163, 0.08) !important;
  color: #6B8FA3 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████╗  ██████╗ ██╗██████╗ ██╗███████╗██████╗     ███╗   ███╗ ██████╗ ██████╗ ██╗██╗     ███████╗
   ██╔══██╗██╔═══██╗██║██╔══██╗██║██╔════╝██╔══██╗    ████╗ ████║██╔═══██╗██╔══██╗██║██║     ██╔════╝
   ██████╔╝██║   ██║██║██████╔╝██║█████╗  ██████╔╝    ██╔████╔██║██║   ██║██████╔╝██║██║     █████╗
   ██╔═══╝ ██║   ██║██║██╔══██╗██║██╔══╝  ██╔══██╗    ██║╚██╔╝██║██║   ██║██╔══██╗██║██║     ██╔══╝
   ██║     ╚██████╔╝██║██║  ██║██║███████╗██║  ██║    ██║ ╚═╝ ██║╚██████╔╝██████╔╝██║███████╗███████╗
   ╚═╝      ╚═════╝ ╚═╝╚═╝  ╚═╝╚═╝╚══════╝╚═╝  ╚═╝    ╚═╝     ╚═╝ ╚═════╝ ╚═════╝ ╚═╝╚══════╝╚══════╝

   POIRIER × DEEP-ETHER — Overrides mobile (Edge-to-Edge)
   
   Problème : padding cumulé (.main-content 16px + .topic-container 24px
              + .post 24px) = 128px perdus sur un écran de 390px.
   Solution : layout bord-à-bord natif, séparations par border-bottom,
              suppression des effets hover/animations pour fluidité.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* -------------------------------------------------------------------
     §1 CONTAINMENT — Supprimer les paddings qui s'empilent
     ------------------------------------------------------------------- */

  /* Main-content : position:fixed overlay sur mobile (L5791).
     On garde safe-area pour les encoches iPhone, mais on vire le padding 16px */
  html[data-realm="poirier"][data-theme="deep-ether"] .main-content {
    padding: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
  }

  /* Topic scroll container — le vrai conteneur scrollable */
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-scroll-container {
    padding: 0 !important;
  }

  /* Topic container — supprime le padding 24px qui compresse tout */
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-container {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Posts container — gap 0, les posts se touchent, séparés par border */
  html[data-realm="poirier"][data-theme="deep-ether"] #posts-container {
    gap: 0 !important;
    padding: 0 !important;
  }

  /* -------------------------------------------------------------------
     §2 POSTS — Edge-to-Edge (paradigme iOS/Android natif)
     Pas de cartes flottantes sur mobile → cellules pleine largeur
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post {
    padding: 20px 12px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #2C2C2D !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Fluidité : pas de transitions coûteuses */
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  /* Dernier post : pas de bordure en bas */
  html[data-realm="poirier"][data-theme="deep-ether"] .post:last-child {
    border-bottom: none !important;
  }

  /* Désactiver le hover glow sur mobile (pas pertinent + coûteux) */
  html[data-realm="poirier"][data-theme="deep-ether"] .post:hover {
    border-color: #2C2C2D !important;
    box-shadow: none !important;
    transform: none !important;
    background-color: #1F1F22 !important;
  }

  /* -------------------------------------------------------------------
     §3 POST HEADER — Flex-wrap pour éviter l'overflow horizontal
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-header-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  /* Badges de clans : wrap si trop nombreux */
  html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Username : limiter la largeur pour ne pas pousser les badges hors écran */
  html[data-realm="poirier"][data-theme="deep-ether"] .author-username {
    max-width: 60vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* -------------------------------------------------------------------
     §4 IMAGES & CONTENU — Prévenir tout overflow horizontal
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content img {
    max-width: 100% !important;
    height: auto !important;
    /* Pas de zoom au hover sur mobile */
    transform: none !important;
    transition: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post-content img:hover {
    transform: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post-image {
    max-width: 100% !important;
    height: auto !important;
    transition: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post-image:hover {
    transform: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post-content {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* -------------------------------------------------------------------
     §5 TOPIC HEADER — Respirer sans déborder
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-header {
    padding: 8px 12px !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .topic-header .topic-title,
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-header h1 {
    font-size: 16px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* -------------------------------------------------------------------
     §6 BOUTON "NOUVEAU SUJET" — Masqué sur mobile
     (déjà accessible depuis le menu mobile, doublon inutile)
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn,
  html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn,
  html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic {
    display: none !important;
  }

  /* -------------------------------------------------------------------
     §7 FLUIDITÉ — Kill des animations qui saccadent sur téléphone
     ------------------------------------------------------------------- */

  /* Page transitions */
  html[data-realm="poirier"][data-theme="deep-ether"] .page-exit,
  html[data-realm="poirier"][data-theme="deep-ether"] .page-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Topic cards : pas d'effets hover/active coûteux */
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-card {
    transition: none !important;
    transform: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:active {
    transform: none !important;
  }

  /* Boutons : transitions simplifiées */
  html[data-realm="poirier"][data-theme="deep-ether"] .btn {
    transition: background-color 0.15s ease !important;
    transform: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Category sidebar buttons — pas de translateX */
  html[data-realm="poirier"][data-theme="deep-ether"] .category-btn:hover {
    transform: none !important;
  }

  /* Sidebar action bar CTA — pas de bounce effect */
  html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic:hover,
  html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic:active {
    transform: none !important;
  }

  /* Avatar : pas de scale on hover */
  html[data-realm="poirier"][data-theme="deep-ether"] .author-level-badge:hover {
    transform: none !important;
  }

  /* Liens : transitions réduites à l'essentiel */
  html[data-realm="poirier"][data-theme="deep-ether"] a {
    transition: color 0.15s ease !important;
  }

  /* Scrollbar : fine pour toucher */
  html[data-realm="poirier"][data-theme="deep-ether"] ::-webkit-scrollbar {
    width: 3px !important;
  }

  /* -------------------------------------------------------------------
     §8 REPLY FORM — Pleine largeur, pas de marges perdues
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .reply-form,
  html[data-realm="poirier"][data-theme="deep-ether"] .editor-container {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
  }

  /* -------------------------------------------------------------------
     §9 BLOCKQUOTES — Padding réduit pour ne pas compresser le texte
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content blockquote,
  html[data-realm="poirier"][data-theme="deep-ether"] blockquote,
  html[data-realm="poirier"][data-theme="deep-ether"] .quote-block {
    padding: 10px 12px !important;
    margin: 12px 0 !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post-reply-context {
    padding: 6px 10px !important;
  }

  /* -------------------------------------------------------------------
     §10 CONSECUTIVE POSTS — Garder la fusion propre en edge-to-edge
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post.consecutive-post {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* -------------------------------------------------------------------
     §11 SIDEBAR ACTION BAR — Masquer sur mobile
     (recherche + nouveau sujet déjà dispo dans le menu mobile)
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar {
    display: none !important;
  }

  /* -------------------------------------------------------------------
     §12 SÉPARATEUR ENTRE POSTS — Respiration seulement, sans trait
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post {
    border-bottom: none !important;
    position: relative !important;
    /* Espacement entre posts d'auteurs différents */
    margin-bottom: 12px !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post::after {
    content: none !important;
    display: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post:last-child::after {
    display: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post:last-child {
    margin-bottom: 0 !important;
  }

  /* Consécutifs sur mobile : annuler l'espacement pour fusionner */
  html[data-realm="poirier"][data-theme="deep-ether"] .post.has-consecutive-next {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  html[data-realm="poirier"][data-theme="deep-ether"] .post.has-consecutive-next::after {
    display: none !important;
  }

  /* -------------------------------------------------------------------
     §13 BADGES DE NIVEAU & CLANS — Propres et compacts sur mobile
     ------------------------------------------------------------------- */

  /* Level badge: légèrement plus petit, halo réduit pour perf GPU */
  html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge {
    width: 24px !important;
    height: 24px !important;
    /* Halo simplifié pour mobile (moins de couches = plus fluide) */
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--level-color, #6B8FA3) 30%, transparent)) !important;
  }

  /* Level text: smaller font for compact badge, centering handled by parent absolute positioning */
  html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge .level-text {
    font-size: 9px !important;
  }

  /* Clan badges: compacts, pas de hover, pas de glow lourd */
  html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge {
    width: 24px !important;
    height: 24px !important;
    filter: none !important;
    transition: none !important;
  }

  /* Pas de hover zoom sur mobile (trop intrusif sur petit écran) */
  html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge:hover {
    transform: none !important;
    filter: none !important;
  }

  /* Clans container: espacement compact */
  html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans {
    gap: 4px !important;
  }

  /* Avatar: still large enough to preserve the new header balance on mobile */
  html[data-realm="poirier"][data-theme="deep-ether"] .post .author-avatar-small {
    width: 44px !important;
    height: 44px !important;
  }

  /* -------------------------------------------------------------------
     §14 TYPOGRAPHIE — Minimum 16px, line-height 1.5 (WCAG/Apple HIG)
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Post date : lisible mais discret */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-date {
    font-size: 11px !important;
  }

  /* -------------------------------------------------------------------
     §15 CIBLES TACTILES — 44px minimum (Apple HIG / WCAG 2.2)
     ------------------------------------------------------------------- */

  /* Boutons d'action sous les posts */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-actions button,
  html[data-realm="poirier"][data-theme="deep-ether"] .post-actions a,
  html[data-realm="poirier"][data-theme="deep-ether"] .post-actions .action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Réactions : assez grandes pour le doigt */
  html[data-realm="poirier"][data-theme="deep-ether"] .reaction-badge {
    min-height: 32px !important;
    padding: 2px 8px !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .reaction-add-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  /* Extension invisible de la zone tactile à 44px */
  html[data-realm="poirier"][data-theme="deep-ether"] .reaction-badge::after,
  html[data-realm="poirier"][data-theme="deep-ether"] .reaction-add-btn::after {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
    left: -6px !important;
  }

  /* -------------------------------------------------------------------
     §16 SAFE AREA BOTTOM — Reply form au-dessus de la barre iOS
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .fixed-reply-form {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .chat-input-bar {
    padding-bottom: 0 !important;
  }

  /* -------------------------------------------------------------------
     §16b MOBILE ACTION BUTTONS — Enforce "+" only layout
     Belt-and-suspenders: the desktop Poirier rule no longer forces
     display, but any future edit that re-adds it would re-break mobile.
     These overrides match the high specificity of the Poirier selectors.
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .chat-action-btn {
    display: none !important;
  }
  html[data-realm="poirier"][data-theme="deep-ether"] .chat-action-btn:first-child {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
  }
  /* Poirier send button: smaller on mobile to match the compact layout */
  html[data-realm="poirier"][data-theme="deep-ether"] .chat-send-btn {
    width: 36px !important;
    height: 36px !important;
  }

  /* -------------------------------------------------------------------
     §17 WATERMARKS — Désactivés sur mobile (GPU-heavy, inutile)
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .dieu-dechu-watermark,
  html[data-realm="poirier"][data-theme="deep-ether"] .poire-artiste-watermark {
    display: none !important;
  }

  /* Animations lourdes des cartes spéciales : désactivées */
  html[data-realm="poirier"][data-theme="deep-ether"] .post.is-dieu-dechu,
  html[data-realm="poirier"][data-theme="deep-ether"] .post.is-poire-artiste,
  html[data-realm="poirier"][data-theme="deep-ether"] .post.is-top-violator {
    animation: none !important;
    background-size: 100% 100% !important;
  }

  /* Badges spéciaux : pas d'animation sur mobile */
  html[data-realm="poirier"][data-theme="deep-ether"] .dieu-dechu-badge,
  html[data-realm="poirier"][data-theme="deep-ether"] .poire-artiste-badge,
  html[data-realm="poirier"][data-theme="deep-ether"] .badge-dieu-dechu,
  html[data-realm="poirier"][data-theme="deep-ether"] .badge-poire-artiste {
    animation: none !important;
  }

  /* -------------------------------------------------------------------
     §18 OVERFLOW-X — Blocs de code, embeds Twitter, URLs longues
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content pre,
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content code {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .post-content pre::-webkit-scrollbar {
    display: none !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .twitter-embed-wrapper {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html[data-realm="poirier"][data-theme="deep-ether"] .twitter-embed-wrapper iframe {
    max-width: 100% !important;
  }

  /* URLs longues : forcer le retour à la ligne */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content a {
    word-break: break-all !important;
  }

  /* -------------------------------------------------------------------
     §19 FROSTED HEADER — Glassmorphisme propre sur mobile
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-header.topic-header--frosted {
    background-color: rgba(26, 26, 27, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  /* -------------------------------------------------------------------
     §20 IMAGES DANS LES POSTS — Responsif + coins arrondis
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content img:not(.sticker):not(.emoji):not([src*="sticker"]):not([src*="risibank"]) {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    display: block !important;
  }

  /* Lightbox — fond neutre chaud au lieu de noir pur */
  html[data-realm="poirier"][data-theme="deep-ether"] #lightbox-overlay {
    background-color: rgba(20, 20, 21, 0.95) !important;
  }

  /* -------------------------------------------------------------------
     §21 USER CARD — Bottom Sheet sur mobile (thumb zone)
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .user-card-popover,
  html[data-realm="poirier"][data-theme="deep-ether"] .user-card-modal {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background-color: #1F1F22 !important;
    border: none !important;
    border-top: 1px solid rgba(234, 234, 234, 0.06) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
  }

  /* -------------------------------------------------------------------
     §22 EMBEDS (YouTube, vidéos) — aspect-ratio natif
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content iframe,
  html[data-realm="poirier"][data-theme="deep-ether"] .post-content video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px !important;
    background-color: #141415 !important;
  }

  /* -------------------------------------------------------------------
     §23 PERF BACKDROP-FILTER — Léger et stable sur mobile
     Réduit le blur (12px vs 16px), supprimé saturate() (inutile dark mode)
     et translateZ(0) (conflit compositing avec posts transform:none)
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-header--frosted,
  html[data-realm="poirier"][data-theme="deep-ether"] .mobile-bottom-nav {
    /* Fallback quasi-opaque si blur non supporté */
    background-color: rgba(26, 26, 27, 0.96) !important;
  }

  @supports (backdrop-filter: blur(12px)) {
    html[data-realm="poirier"][data-theme="deep-ether"] .topic-header--frosted,
    html[data-realm="poirier"][data-theme="deep-ether"] .mobile-bottom-nav {
      background-color: rgba(26, 26, 27, 0.88) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }
  }

  /* -------------------------------------------------------------------
     §24 METADATA CONTRAST — WCAG AA (5.0:1 ratio)
     ------------------------------------------------------------------- */
  html[data-realm="poirier"][data-theme="deep-ether"] .post-date,
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-date,
  html[data-realm="poirier"][data-theme="deep-ether"] .post-metadata,
  html[data-realm="poirier"][data-theme="deep-ether"] .topic-card .topic-meta,
  html[data-realm="poirier"][data-theme="deep-ether"] .post-edit-info {
    color: #9A9A9C !important; /* Ratio 5.0:1 vs #1A1A1B — passe WCAG AA */
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
  }

}

/* HIGHEST SPECIFICITY FIX FOR MOBILE: Hide 'New Topic' button on all themes */
@media (max-width: 768px) {
  html[data-realm][data-theme] .sidebar-action-bar .btn-create-topic,
  html[data-realm] .sidebar-action-bar .btn-create-topic,
  .sidebar-action-bar .btn-create-topic {
    display: none !important;
  }
}

/* =========================================================================
   CORRECTIF MOBILE TOPIC LAYOUT - REALM BORDEL
   Unifie la gouttiere horizontale du topic mobile et remet le header
   dans un flex coherent sans decaler le contenu vers la droite.
   ========================================================================= */
@media (max-width: 768px) {
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .main-content.topic-layout,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .main-content.topic-layout {
    --bordel-topic-mobile-gutter: 12px;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .main-content.topic-layout
    .topic-scroll-container,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .main-content.topic-layout
    .topic-scroll-container,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .main-content.topic-layout
    .topic-container,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .main-content.topic-layout
    .topic-container {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .main-content.topic-layout
    #posts-container,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .main-content.topic-layout
    #posts-container {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--bordel-topic-mobile-gutter) 40px !important;
    box-sizing: border-box !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .main-content.topic-layout
    #posts-container
    > .post,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .main-content.topic-layout
    #posts-container
    > .post {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .topic-header,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .topic-header {
    width: 100% !important;
    margin: 0 auto !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px)
      var(--bordel-topic-mobile-gutter) 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .topic-header-row,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .topic-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .topic-header-content,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .topic-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .topic-back-btn,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .topic-back-btn {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px !important;
    align-self: center !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .topic-admin-actions,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .topic-admin-actions {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: 8px !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .topic-header
    .topic-title,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .topic-header
    .topic-title,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .topic-header
    h1,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .topic-header
    h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    #reply-form,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    #reply-form {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .fixed-reply-form,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .fixed-reply-form {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 8px var(--bordel-topic-mobile-gutter)
      calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .chat-input-bar,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .chat-input-bar,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .chat-editor-wrapper,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .chat-editor-wrapper,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .chat-actions,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .chat-actions,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    #chat-picker-container,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    #chat-picker-container,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    #poll-indicator,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    #poll-indicator,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    #reply-context-bar,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    #reply-context-bar {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-view-content
    .chat-editor-wrapper,
  html[data-realm="bordel"]:is([data-theme="deep-ether"], [data-theme="light-ether"])
    body.mobile-topic-view
    .chat-editor-wrapper {
    flex: 1 1 auto !important;
  }

  html[data-realm="bordel"][data-theme="deep-ether"] body.mobile-view-content .topic-header-row,
  html[data-realm="bordel"][data-theme="deep-ether"] body.mobile-topic-view .topic-header-row {
    background-color: #2a2a2e !important;
    border: 1px solid #3a3a3e !important;
  }

  html[data-realm="bordel"][data-theme="light-ether"] body.mobile-view-content .topic-header-row,
  html[data-realm="bordel"][data-theme="light-ether"] body.mobile-topic-view .topic-header-row {
    background-color: #f0f0f0 !important;
    border: 1px solid #dddddd !important;
  }
}

/* =========================================================================
   POIRIER × DEEP-ETHER — Accent normalization to soft night blue
   Final pass at EOF so legacy Poirier hardcodes above cannot win the cascade.
   ========================================================================= */
html[data-realm="poirier"][data-theme="deep-ether"] {
  --primary-azure: var(--accent-primary) !important;
  --primary-azure-hover: var(--accent-hover) !important;
  --accent-primary-rgb: 107, 143, 163 !important;
  --accent-hover: #88A9C0 !important;
  --accent-hover-rgb: 136, 169, 192 !important;
  --accent-lift: #A4C0D3 !important;
  --accent-lift-rgb: 164, 192, 211 !important;
  --accent-contrast: #101722 !important;
  --poirier-accent-surface: rgba(var(--accent-primary-rgb), 0.05) !important;
  --poirier-accent-surface-hover: rgba(var(--accent-primary-rgb), 0.08) !important;
  --poirier-accent-surface-active: rgba(var(--accent-primary-rgb), 0.14) !important;
  --poirier-accent-border: rgba(var(--accent-primary-rgb), 0.22) !important;
  --poirier-accent-border-strong: rgba(var(--accent-primary-rgb), 0.35) !important;
  --poirier-accent-shadow: rgba(var(--accent-primary-rgb), 0.22) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] :focus-visible {
  outline-color: var(--focus-ring-color) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] ::selection {
  background: rgba(var(--accent-primary-rgb), 0.22) !important;
  color: #EAEAEA !important;
  text-shadow: none !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] a,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-back-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .preview-header i,
html[data-realm="poirier"][data-theme="deep-ether"] .welcome-accent,
html[data-realm="poirier"][data-theme="deep-ether"] .home-title-accent,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-participated,
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn.active,
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn.active i,
html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item.active,
html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item.active svg,
html[data-realm="poirier"][data-theme="deep-ether"] .mobile-nav-item:active,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-link:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-text:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-tertiary:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .composer-back-link:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .author-username:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-add-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content em,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content i:not(.fas):not(.far):not(.fab):not(.fa) {
  color: var(--accent-text) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] a:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card a:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card-title a:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content a:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .welcome-cta:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop .btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state .btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .publish-btn:hover {
  color: var(--accent-lift) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post-content ul li::marker,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content ol li::marker,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.is-unread::after,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.unread::after {
  color: var(--accent-text) !important;
  background-color: var(--accent-text) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-forum-switch:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-picker-item:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-back-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-action-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .composer-back-link:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-secondary:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-outline:hover {
  background-color: var(--poirier-accent-surface-hover) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-secondary,
html[data-realm="poirier"][data-theme="deep-ether"] .btn-outline,
html[data-realm="poirier"][data-theme="deep-ether"] .nav-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-top-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-bottom-btn,
html[data-realm="poirier"][data-theme="deep-ether"] #new-messages-toast {
  border-color: var(--poirier-accent-border) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.active,
html[data-realm="poirier"][data-theme="deep-ether"] .category-btn.active,
html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn.active,
html[data-realm="poirier"][data-theme="deep-ether"] .reaction-badge.reaction-active,
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-btn.active,
html[data-realm="poirier"][data-theme="deep-ether"] .filter-btn.active {
  background-color: var(--poirier-accent-surface-active) !important;
  border-color: var(--poirier-accent-border-strong) !important;
  color: var(--accent-text) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .topic-card.active {
  box-shadow: inset 3px 0 0 0 var(--primary-azure) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn.active {
  background: var(--primary-azure) !important;
  color: var(--accent-contrast) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .pagination-btn:hover:not(.active),
html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-search-input:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .composer-title-input:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .form-control:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .editor-textarea:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .minimal-edit-zone:focus,
html[data-realm="poirier"][data-theme="deep-ether"] .reply-form:focus-within,
html[data-realm="poirier"][data-theme="deep-ether"] .editor-container:focus-within,
html[data-realm="poirier"][data-theme="deep-ether"] .chat-editor-wrapper:focus-within {
  border-color: var(--primary-azure) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .post-reply-context,
html[data-realm="poirier"][data-theme="deep-ether"] blockquote,
html[data-realm="poirier"][data-theme="deep-ether"] .quote-block,
html[data-realm="poirier"][data-theme="deep-ether"] .toast-success {
  border-left-color: var(--primary-azure) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar {
  border-color: rgba(var(--accent-primary-rgb), 0.12) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar button:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .composer-editor-pane .editor-toolbar-compact button:hover {
  background-color: var(--poirier-accent-surface-hover) !important;
  color: var(--accent-text) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .editor-toolbar button.fmt-active,
html[data-realm="poirier"][data-theme="deep-ether"] .toolbar-btn.fmt-active {
  background-color: var(--poirier-accent-surface-active) !important;
  color: var(--accent-text) !important;
  box-shadow: inset 0 0 0 1px var(--poirier-accent-border) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic,
html[data-realm="poirier"][data-theme="deep-ether"] .publish-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn,
html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state .btn,
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop .btn,
html[data-realm="poirier"][data-theme="deep-ether"] .welcome-cta {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--primary-azure) 100%) !important;
  color: var(--accent-contrast) !important;
  box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb), 0.2) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .publish-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state .btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop .btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .welcome-cta:hover {
  background: linear-gradient(180deg, var(--accent-lift) 0%, var(--accent-hover) 100%) !important;
  box-shadow: 0 8px 24px rgba(var(--accent-primary-rgb), 0.22) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .sidebar-action-bar .btn-create-topic:active,
html[data-realm="poirier"][data-theme="deep-ether"] .publish-btn:active,
html[data-realm="poirier"][data-theme="deep-ether"] .new-topic-btn:active,
html[data-realm="poirier"][data-theme="deep-ether"] #create-topic-btn:active {
  background: linear-gradient(180deg, var(--primary-azure) 0%, #56798C 100%) !important;
  box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.16) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .home-welcome-desktop img,
html[data-realm="poirier"][data-theme="deep-ether"] .empty-state img,
html[data-realm="poirier"][data-theme="deep-ether"] .welcome-img-ring {
  box-shadow: 0 8px 40px rgba(var(--accent-primary-rgb), 0.12),
              0 0 60px rgba(var(--accent-primary-rgb), 0.05) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .nav-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-top-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-bottom-btn,
html[data-realm="poirier"][data-theme="deep-ether"] .topic-back-btn {
  color: var(--accent-text) !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .nav-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-top-btn:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .scroll-bottom-btn:hover {
  border-color: var(--poirier-accent-border-strong) !important;
  color: var(--accent-lift) !important;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  EDITOR PREMIUM OVERHAUL v1.0                                      ║
   ║  Enhanced post editor for all themes (dark/grey/deep-ether/light)   ║
   ║  and all realms (bordel/poirier/beta) — Desktop + Mobile            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────
   1. FIXED REPLY FORM — Premium backdrop & surface
   ───────────────────────────────────────────────── */
.fixed-reply-form {
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(16px);
  -webkit-backdrop-filter: saturate(1.2) blur(16px);
  border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
  padding: 6px 12px;
  transition: border-color 0.3s var(--ease-apple),
              box-shadow 0.3s var(--ease-apple),
              background 0.3s var(--ease-apple);
}

.fixed-reply-form:has(.chat-editor:focus) {
  border-top-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
  box-shadow: 0 -4px 20px color-mix(in srgb, var(--accent-primary) 6%, transparent);
}

/* ─────────────────────────────────────────────────
   2. CHAT EDITOR WRAPPER — Premium pill input
   ───────────────────────────────────────────────── */
.chat-editor-wrapper {
  background: var(--input-bg);
  border: 1.5px solid var(--border-color);
  border-radius: 22px;
  padding: 6px 14px;
  min-height: 38px;
  display: flex;
  align-items: center;
  transition: border-color 0.25s var(--ease-apple),
              box-shadow 0.25s var(--ease-apple),
              background 0.25s var(--ease-apple);
  position: relative;
  overflow: hidden;
}

.chat-editor-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-primary) 3%, transparent) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease-apple);
  pointer-events: none;
}

.chat-editor-wrapper:focus-within {
  border-color: var(--accent-primary);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent),
    0 2px 12px color-mix(in srgb, var(--accent-primary) 8%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 95%, var(--accent-primary));
}

.chat-editor-wrapper:focus-within::before {
  opacity: 1;
}

/* ─────────────────────────────────────────────────
   3. CHAT EDITOR — Text input area
   ───────────────────────────────────────────────── */
.chat-editor {
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
  overflow-wrap: break-word;
  word-break: break-word;
  caret-color: var(--accent-primary);
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-primary) 25%, transparent) transparent;
}

.chat-editor::-webkit-scrollbar {
  width: 4px;
}

.chat-editor::-webkit-scrollbar-track {
  background: transparent;
}

.chat-editor::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-primary) 25%, transparent);
  border-radius: 4px;
}

.chat-editor::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

/* Placeholder animation */
.chat-editor:empty:before,
.chat-editor:has(> br:only-child):before {
  content: attr(placeholder);
  color: var(--text-muted);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.chat-editor-wrapper:focus-within .chat-editor:empty:before,
.chat-editor-wrapper:focus-within .chat-editor:has(> br:only-child):before {
  opacity: 0.4;
}

/* ─────────────────────────────────────────────────
   4. SEND BUTTON — Premium gradient + micro-anim
   ───────────────────────────────────────────────── */
.chat-send-btn {
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    color-mix(in srgb, var(--accent-primary) 80%, var(--accent-secondary, var(--accent-primary))) 100%
  );
  border: none;
  color: white;
  font-size: 15px;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-spring),
              box-shadow 0.2s var(--ease-apple),
              opacity 0.2s ease;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent);
  padding: 0;
}

.chat-send-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-primary) 40%, transparent);
  color: white;
}

.chat-send-btn:active {
  transform: scale(0.92);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

/* Pulse animation on hover — subtle heartbeat */
@keyframes editorSendPulse {
  0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent); }
  50% { box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-primary) 50%, transparent); }
}

/* ─────────────────────────────────────────────────
   5. ACTION BUTTONS — Refined interaction states
   ───────────────────────────────────────────────── */
.chat-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: color 0.2s var(--ease-apple),
              background 0.2s var(--ease-apple),
              transform 0.15s var(--ease-spring);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: relative;
}

.chat-action-btn::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--surface-hover);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.chat-action-btn:hover {
  color: var(--accent-primary);
  transform: scale(1.05);
}

.chat-action-btn:hover::before {
  opacity: 1;
}

.chat-action-btn:active {
  transform: scale(0.92);
}

.chat-action-btn i {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────
   6. FORMAT TOGGLE (Aa) — Premium micro-interaction
   ───────────────────────────────────────────────── */
.chat-fmt-toggle {
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
  transition: all 0.2s var(--ease-apple);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 30px;
  user-select: none;
  position: relative;
}

.chat-fmt-toggle:hover {
  color: var(--text-main);
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--border-color) 50%, transparent);
}

.chat-fmt-toggle:active {
  transform: scale(0.9);
}

.chat-fmt-toggle[aria-expanded="true"] {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

/* ─────────────────────────────────────────────────
   7. FORMAT TRAY — Slide-in with premium blur
   ───────────────────────────────────────────────── */
.chat-fmt-tray {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-6px);
  transition: max-width 0.35s var(--ease-apple),
              opacity 0.25s var(--ease-apple),
              transform 0.3s var(--ease-apple);
  pointer-events: none;
  margin-left: 2px;
}

.chat-fmt-tray.open {
  max-width: 240px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Format buttons inside tray */
.chat-fmt-tray .chat-fmt-btn {
  opacity: 0;
  transform: scale(0.7) translateY(3px);
  transition: opacity 0.2s var(--ease-apple),
              transform 0.25s var(--ease-spring),
              color 0.15s ease,
              background 0.15s ease,
              border-color 0.15s ease,
              box-shadow 0.15s ease;
}

.chat-fmt-tray.open .chat-fmt-btn {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Staggered entrance timing */
.chat-fmt-tray.open .chat-fmt-btn:nth-child(1) { transition-delay: 0.02s; }
.chat-fmt-tray.open .chat-fmt-btn:nth-child(2) { transition-delay: 0.05s; }
.chat-fmt-tray.open .chat-fmt-btn:nth-child(3) { transition-delay: 0.08s; }
.chat-fmt-tray.open .chat-fmt-btn:nth-child(4) { transition-delay: 0.11s; }
.chat-fmt-tray.open .chat-fmt-btn:nth-child(5) { transition-delay: 0.14s; }

/* Format buttons base */
.chat-fmt-btn {
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 6px;
  transition: all 0.15s var(--ease-apple);
  min-width: 24px;
  height: 26px;
  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);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

/* Active state inside tray */
.chat-fmt-tray .chat-fmt-btn.fmt-active {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

/* ─────────────────────────────────────────────────
   8. REPLY CONTEXT BAR — Premium accent gradient
   ───────────────────────────────────────────────── */
#reply-context-bar {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-primary) 6%, var(--bg-surface-alt)),
    var(--bg-surface-alt)
  );
  border: 1px solid color-mix(in srgb, var(--accent-primary) 15%, var(--border-color));
  border-left: 3px solid var(--accent-primary);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease;
  animation: replyContextSlideIn 0.25s var(--ease-apple);
}

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

#reply-context-bar button {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
  line-height: 1;
}

#reply-context-bar button:hover {
  background: color-mix(in srgb, var(--accent-danger, #ef4444) 12%, transparent);
  color: var(--accent-danger, #ef4444);
}

/* ─────────────────────────────────────────────────
   9. POLL INDICATOR — Premium badge design
   ───────────────────────────────────────────────── */
#poll-indicator {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-success) 8%, var(--bg-surface-alt)),
    var(--bg-surface-alt)
  );
  border: 1px solid color-mix(in srgb, var(--accent-success) 20%, var(--border-color));
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--accent-success);
  font-weight: 500;
  animation: replyContextSlideIn 0.2s var(--ease-apple);
}

#poll-indicator button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  margin-left: 10px;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

#poll-indicator button:hover {
  background: color-mix(in srgb, var(--accent-danger) 12%, transparent);
  color: var(--accent-danger);
}

/* ─────────────────────────────────────────────────
   10. STICKER PICKER — Premium Liquid Panel 
   ───────────────────────────────────────────────── */
.chat-picker-container {
  position: absolute;
  bottom: calc(100% + 12px); /* Floating Island effect */
  left: 0;
  width: 100%;
  background: color-mix(in srgb, var(--bg-surface-alt) 85%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 99;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 4px;
  /* Opening animation via flex visibility */
  animation: pickerPopOut 0.35s var(--ease-spring) forwards;
  transform-origin: bottom center;
}

@keyframes pickerPopOut {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sticker Tab Buttons (Segmented Control style) */
.sticker-tab-btn {
  background: transparent;
  border: 1px solid transparent; 
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 9999px; /* Pill shape */
  cursor: pointer;
  transition: all 0.2s var(--ease-apple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
  .sticker-tab-btn:hover {
    background: color-mix(in srgb, var(--surface-hover) 80%, transparent);
    color: var(--text-main);
    transform: translateY(-1px);
  }

  .sticker-tab-btn:active {
    transform: scale(0.95);
  }
}

.sticker-tab-btn.active {
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  color: var(--accent-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

/* Sticker Search Input — iOS Spotlight style */
#sticker-search {
  background: color-mix(in srgb, var(--text-main) 4%, var(--bg-surface));
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-main);
  font-size: 14px;
  transition: all 0.25s var(--ease-apple);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

#sticker-search::placeholder {
  color: var(--text-muted);
  transition: opacity 0.2s ease;
}

#sticker-search:focus {
  background: var(--input-bg);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-primary) 12%, transparent),
              0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
  outline: none;
  transform: translateY(-1px);
}

#sticker-search:focus::placeholder {
  opacity: 0.5;
}

/* Sticker Grid */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 12px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border-color) 50%, transparent) transparent;
}

.sticker-grid img {
  cursor: pointer;
  border-radius: 8px;
  padding: 6px;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform 0.15s var(--ease-spring),
              background 0.15s ease,
              box-shadow 0.15s ease;
  /* ⚡ UI-UX PRO MAX: Performance Boost (Native Virtualization) */
  content-visibility: auto;
  contain-intrinsic-size: 64px 64px;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .sticker-grid img:hover {
    transform: scale(1.2);
    background: var(--surface-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
    position: relative;
  }

  .sticker-grid img:active {
    transform: scale(0.95);
  }
}

/* ─────────────────────────────────────────────────
   11. DRAG & DROP — Premium drop zone feedback
   ───────────────────────────────────────────────── */
.chat-editor.drag-over,
.editor-content.drag-over {
  border-color: var(--accent-primary) !important;
  background: color-mix(in srgb, var(--accent-primary) 5%, var(--input-bg)) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.chat-editor-wrapper:has(.chat-editor.drag-over) {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent),
              inset 0 0 20px color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

/* ─────────────────────────────────────────────────
   12. WYSIWYG CONTAINER (Standard Editor) — Premium
   ───────────────────────────────────────────────── */
.wysiwyg-container {
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s var(--ease-apple),
              box-shadow 0.25s var(--ease-apple);
}

.wysiwyg-container:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent),
              0 4px 20px color-mix(in srgb, var(--accent-primary) 6%, transparent);
}

/* Standard editor toolbar */
.editor-toolbar-compact {
  background: color-mix(in srgb, var(--bg-surface-alt) 80%, var(--bg-surface));
  border-bottom: 1px solid var(--border-color);
  padding: 6px 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  transition: background 0.2s ease;
}

.wysiwyg-container:focus-within .editor-toolbar-compact {
  background: color-mix(in srgb, var(--accent-primary) 3%, var(--bg-surface-alt));
}

/* Standard editor toolbar buttons */
.editor-toolbar-compact .editor-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s var(--ease-apple);
}

.editor-toolbar-compact .editor-btn:hover {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  transform: translateY(-1px);
}

.editor-toolbar-compact .editor-btn:active {
  transform: translateY(0) scale(0.95);
}

.editor-toolbar-compact .editor-btn.fmt-active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

/* Separator in standard toolbar */
.editor-toolbar-compact > span[role="separator"] {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  margin: 0 4px;
  align-self: center;
  border-radius: 1px;
}

/* Standard editor content area */
.wysiwyg-container .editor-content {
  min-height: 200px;
  padding: 16px;
  outline: none;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-main);
  caret-color: var(--accent-primary);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-primary) 20%, transparent) transparent;
}

/* Standard editor placeholder */
.wysiwyg-container .editor-content:empty:before {
  content: attr(placeholder);
  color: var(--text-muted);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.wysiwyg-container:focus-within .editor-content:empty:before {
  opacity: 0.4;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  THEME-SPECIFIC EDITOR ENHANCEMENTS                                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────
   13. DEEP ETHER — Electric cosmos editor
   ───────────────────────────────────────────────── */
[data-theme="deep-ether"] .fixed-reply-form {
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  border-top-color: rgba(99, 140, 230, 0.15);
  box-shadow: 0 -2px 20px rgba(4, 8, 30, 0.3);
}

[data-theme="deep-ether"] .fixed-reply-form:has(.chat-editor:focus) {
  border-top-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 -4px 30px rgba(59, 130, 246, 0.08);
}

[data-theme="deep-ether"] .chat-editor-wrapper {
  background: var(--input-bg);
  border-color: rgba(99, 140, 230, 0.18);
}

[data-theme="deep-ether"] .chat-editor-wrapper:focus-within {
  border-color: var(--primary-azure);
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.15),
    0 0 20px rgba(59, 130, 246, 0.08),
    inset 0 0 30px rgba(59, 130, 246, 0.03);
}

[data-theme="deep-ether"] .chat-send-btn {
  background: linear-gradient(135deg, var(--primary-azure), #5b9bff);
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35);
}

[data-theme="deep-ether"] .chat-send-btn:hover {
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
}

[data-theme="deep-ether"] .chat-action-btn:hover {
  color: var(--primary-azure);
}

[data-theme="deep-ether"] .chat-fmt-toggle[aria-expanded="true"] {
  color: var(--primary-azure);
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="deep-ether"] .chat-fmt-btn.fmt-active,
[data-theme="deep-ether"] .chat-fmt-tray .chat-fmt-btn.fmt-active {
  color: var(--primary-azure);
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

[data-theme="deep-ether"] #reply-context-bar {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), var(--bg-surface-alt));
  border-color: rgba(59, 130, 246, 0.15);
  border-left-color: var(--primary-azure);
}

[data-theme="deep-ether"] .sticker-tab-btn.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary-azure);
  border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="deep-ether"] .wysiwyg-container:focus-within {
  border-color: var(--primary-azure);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12),
              0 4px 24px rgba(59, 130, 246, 0.08);
}

[data-theme="deep-ether"] .editor-toolbar-compact .editor-btn:hover {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary-azure);
  border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="deep-ether"] .editor-toolbar-compact .editor-btn.fmt-active {
  background: var(--primary-azure);
  border-color: var(--primary-azure);
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35);
}

/* ─────────────────────────────────────────────────
   14. LIGHT ETHER — Organic ceramic editor
   ───────────────────────────────────────────────── */
[data-theme="light-ether"] .fixed-reply-form {
  background: rgba(252, 251, 249, 0.94);
  border-top-color: rgba(26, 36, 27, 0.08);
  box-shadow: 0 -2px 16px rgba(26, 36, 27, 0.04);
}

[data-theme="light-ether"] .fixed-reply-form:has(.chat-editor:focus) {
  border-top-color: rgba(168, 197, 69, 0.25);
  box-shadow: 0 -4px 24px rgba(168, 197, 69, 0.06);
}

[data-theme="light-ether"] .chat-editor-wrapper {
  background: var(--input-bg);
  border-color: transparent;
  box-shadow:
    inset 0 2px 5px rgba(26, 36, 27, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light-ether"] .chat-editor-wrapper:focus-within {
  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.45);
}

[data-theme="light-ether"] .chat-editor-wrapper::before {
  display: none;
}

[data-theme="light-ether"] .chat-send-btn {
  background: linear-gradient(180deg, #b5d15a 0%, #a8c545 100%);
  color: #1a241b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 8px rgba(168, 197, 69, 0.25);
}

[data-theme="light-ether"] .chat-send-btn:hover {
  background: linear-gradient(180deg, #c2dc68 0%, #b5d15a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 16px rgba(168, 197, 69, 0.35);
}

[data-theme="light-ether"] .chat-send-btn:active {
  background: linear-gradient(180deg, #9db93d 0%, #8eaf35 100%);
  box-shadow: inset 0 1px 3px rgba(26, 36, 27, 0.15);
}

[data-theme="light-ether"] .chat-action-btn:hover {
  color: #3f5e14;
}

[data-theme="light-ether"] .chat-action-btn:hover::before {
  background: rgba(168, 197, 69, 0.08);
}

[data-theme="light-ether"] .chat-fmt-toggle[aria-expanded="true"] {
  color: #3f5e14;
  background: rgba(168, 197, 69, 0.1);
  border-color: rgba(168, 197, 69, 0.25);
}

[data-theme="light-ether"] .chat-fmt-btn.fmt-active,
[data-theme="light-ether"] .chat-fmt-tray .chat-fmt-btn.fmt-active {
  color: #3f5e14;
  background: rgba(168, 197, 69, 0.12);
  border-color: rgba(168, 197, 69, 0.3);
}

[data-theme="light-ether"] #reply-context-bar {
  background: linear-gradient(135deg, rgba(168, 197, 69, 0.05), #f3f2ee);
  border-color: rgba(168, 197, 69, 0.12);
  border-left-color: #a8c545;
}

[data-theme="light-ether"] .sticker-tab-btn.active {
  background: rgba(168, 197, 69, 0.1);
  color: #3f5e14;
  border-color: rgba(168, 197, 69, 0.25);
}

[data-theme="light-ether"] .chat-picker-container {
  background: rgba(252, 251, 249, 0.96);
  box-shadow: 0 -4px 24px rgba(26, 36, 27, 0.06);
}

[data-theme="light-ether"] .wysiwyg-container {
  border-color: rgba(26, 36, 27, 0.1);
  box-shadow: var(--shadow-card);
}

[data-theme="light-ether"] .wysiwyg-container:focus-within {
  border-color: rgba(168, 197, 69, 0.4);
  box-shadow:
    0 0 0 3px rgba(168, 197, 69, 0.1),
    var(--shadow-elevated);
}

[data-theme="light-ether"] .editor-toolbar-compact {
  background: #f8f7f4;
  border-bottom-color: rgba(26, 36, 27, 0.06);
}

[data-theme="light-ether"] .editor-toolbar-compact .editor-btn {
  background: white;
  border-color: rgba(26, 36, 27, 0.08);
  box-shadow: 0 1px 2px rgba(26, 36, 27, 0.04);
}

[data-theme="light-ether"] .editor-toolbar-compact .editor-btn:hover {
  background: rgba(168, 197, 69, 0.08);
  color: #3f5e14;
  border-color: rgba(168, 197, 69, 0.2);
}

[data-theme="light-ether"] .editor-toolbar-compact .editor-btn.fmt-active {
  background: linear-gradient(180deg, #b5d15a, #a8c545);
  color: #1a241b;
  border-color: #a8c545;
  box-shadow: 0 2px 8px rgba(168, 197, 69, 0.25);
}

/* ─────────────────────────────────────────────────
   15. GREY THEME — Discord-inspired editor
   ───────────────────────────────────────────────── */
[data-theme="grey"] .fixed-reply-form {
  background: rgba(43, 45, 49, 0.95);
  border-top-color: #3f4147;
}

[data-theme="grey"] .chat-editor-wrapper {
  background: #1e1f22;
  border-color: transparent;
  border-radius: 8px;
}

[data-theme="grey"] .chat-editor-wrapper:focus-within {
  border-color: #5865f2;
  box-shadow: none;
}

[data-theme="grey"] .chat-send-btn {
  background: #5865f2;
  box-shadow: none;
  border-radius: 8px;
}

[data-theme="grey"] .chat-send-btn:hover {
  background: #4752c4;
  box-shadow: none;
}

[data-theme="grey"] .chat-action-btn:hover {
  color: #dcddde;
}

[data-theme="grey"] .chat-fmt-toggle[aria-expanded="true"] {
  color: #5865f2;
  background: rgba(88, 101, 242, 0.1);
  border-color: rgba(88, 101, 242, 0.25);
}

[data-theme="grey"] .chat-fmt-btn.fmt-active,
[data-theme="grey"] .chat-fmt-tray .chat-fmt-btn.fmt-active {
  color: #5865f2;
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.25);
}

[data-theme="grey"] .sticker-tab-btn.active {
  background: rgba(88, 101, 242, 0.12);
  color: #5865f2;
  border-color: rgba(88, 101, 242, 0.25);
}

[data-theme="grey"] .chat-picker-container {
  background: #2b2d31;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
  border-radius: 8px 8px 0 0;
}

[data-theme="grey"] .wysiwyg-container {
  border-radius: 8px;
}

[data-theme="grey"] .wysiwyg-container:focus-within {
  border-color: #5865f2;
  box-shadow: none;
}

[data-theme="grey"] .editor-toolbar-compact .editor-btn {
  border-radius: 4px;
}

[data-theme="grey"] .editor-toolbar-compact .editor-btn.fmt-active {
  background: #5865f2;
  border-color: #5865f2;
  box-shadow: none;
}

/* ─────────────────────────────────────────────────
   16. DARK (FOREST NIGHT) — Forest-tinted editor
   ───────────────────────────────────────────────── */
[data-theme="dark"] .fixed-reply-form {
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  border-top-color: #2f3e36;
}

[data-theme="dark"] .chat-editor-wrapper:focus-within {
  border-color: #a8c545;
  box-shadow:
    0 0 0 3px rgba(168, 197, 69, 0.12),
    0 0 16px rgba(168, 197, 69, 0.06);
}

[data-theme="dark"] .chat-send-btn {
  background: linear-gradient(135deg, #a8c545, #8eaf35);
  box-shadow: 0 2px 10px rgba(168, 197, 69, 0.3);
}

[data-theme="dark"] .chat-send-btn:hover {
  box-shadow: 0 4px 18px rgba(168, 197, 69, 0.4);
}

[data-theme="dark"] .chat-action-btn:hover {
  color: #b5d455;
}

[data-theme="dark"] .chat-fmt-toggle[aria-expanded="true"] {
  color: #a8c545;
  background: rgba(168, 197, 69, 0.1);
}

[data-theme="dark"] .chat-fmt-btn.fmt-active,
[data-theme="dark"] .chat-fmt-tray .chat-fmt-btn.fmt-active {
  color: #b5d455;
  background: rgba(168, 197, 69, 0.12);
  border-color: rgba(168, 197, 69, 0.25);
}

[data-theme="dark"] .sticker-tab-btn.active {
  background: rgba(168, 197, 69, 0.1);
  color: #b5d455;
  border-color: rgba(168, 197, 69, 0.2);
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  MOBILE EDITOR ENHANCEMENTS                                        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────
   17. MOBILE — Editor layout + touch optimization
   ───────────────────────────────────────────────── */
@media (max-width: 768px) {

  .fixed-reply-form {
    padding: 4px 8px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }

  /* Chat input bar: editor + send on same row, actions below */
  .chat-input-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px;
  }

  .chat-editor-wrapper {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
    min-height: 34px;
    padding: 5px 12px;
    border-radius: 20px;
  }

  .chat-send-btn {
    order: 2;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  /* Actions row below */
  .chat-actions {
    order: 3;
    flex: 0 0 100%;
    justify-content: flex-start;
    padding: 0 2px 2px;
    gap: 2px;
  }

  /* Bigger touch targets */
  .chat-action-btn {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  /* Prevent zoom on focus */
  .chat-editor {
    font-size: 16px !important;
    max-height: 200px;
  }

  /* Hide format toggle + tray on mobile (mobile tray handles it) */
  .chat-fmt-toggle,
  .chat-fmt-tray {
    display: none !important;
  }

  /* Sticker picker mobile-optimized */
  .chat-picker-container {
    border-radius: 16px 16px 0 0;
    max-height: 50vh;
    overflow-y: auto;
  }

  .sticker-grid {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    max-height: 35vh;
    gap: 4px;
  }

  /* Standard editor mobile */
  .wysiwyg-container {
    border-radius: 10px;
  }

  .editor-toolbar-compact {
    justify-content: flex-start;
    gap: 3px;
    overflow-x: auto;
    max-width: 100vw;
    padding: 4px 6px;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .editor-toolbar-compact::-webkit-scrollbar {
    display: none;
  }

  .editor-toolbar-compact .editor-btn {
    width: 40px;
    height: 40px;
    font-size: 15px;
    flex-shrink: 0;
  }

  .wysiwyg-container .editor-content {
    min-height: 160px;
    padding: 12px;
    font-size: 16px !important;
  }

  /* Reply context: compact on mobile */
  #reply-context-bar {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
    margin-bottom: 4px;
  }

  #reply-context-bar img {
    width: 18px;
    height: 18px;
  }

  /* Poll indicator compact */
  #poll-indicator {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
    margin-bottom: 4px;
  }
}

/* ─────────────────────────────────────────────────
   18. MOBILE ACTIONS TRAY — Premium slide-up panel
   ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-actions-tray {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 8px;
    gap: 6px;
    box-shadow: var(--shadow-elevated);
    z-index: 100;
    flex-wrap: wrap;
    animation: mobileTraySlideUp 0.25s var(--ease-apple);
  }

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

  .chat-actions.mobile-tray-open .mobile-actions-tray {
    display: flex;
  }

  .mobile-tray-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 6px;
    min-width: 60px;
    flex: 1;
    cursor: pointer;
    transition: all 0.15s var(--ease-apple);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-tray-item i {
    font-size: 18px;
    color: var(--text-muted);
    transition: color 0.15s ease;
  }

  .mobile-tray-item:hover,
  .mobile-tray-item:active {
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface-alt));
    border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-color));
  }

  .mobile-tray-item:active {
    transform: scale(0.95);
  }

  .mobile-tray-item:hover i,
  .mobile-tray-item:active i {
    color: var(--accent-primary);
  }

  /* Tray icon colors */
  .tray-icon-sticker { color: #f59e0b !important; }
  .tray-icon-image { color: #3b82f6 !important; }
  .tray-icon-poll { color: #22c55e !important; }
  .tray-icon-bold { color: var(--text-muted) !important; }
  .tray-icon-italic { color: var(--text-muted) !important; }
  .tray-icon-voice { color: #f97316 !important; }
  .tray-icon-video { color: #ec4899 !important; }
  .tray-icon-spoiler { color: #8b5cf6 !important; }

  /* Mobile smiley button inside editor wrapper */
  .mobile-smiley-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s var(--ease-spring);
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-smiley-btn:hover,
  .mobile-smiley-btn:active {
    color: var(--accent-primary);
  }

  .mobile-smiley-btn:active {
    transform: translateY(-50%) scale(0.9);
  }

  /* Adjust editor padding for smiley button */
  .chat-editor-wrapper:has(.mobile-smiley-btn) {
    padding-right: 38px;
    position: relative;
  }

  /* Plus button (+) transforms to (×) when tray is open */
  .chat-actions.mobile-tray-open > .chat-action-btn:first-child i {
    transition: transform 0.25s var(--ease-spring);
  }

  .chat-actions.mobile-tray-open > .chat-action-btn:first-child i::before {
    content: "\f00d"; /* fa-times */
  }
}

/* ─────────────────────────────────────────────────
   19. SMALL MOBILE (< 360px) — Compact adjustments
   ───────────────────────────────────────────────── */
@media (max-width: 360px) {
  .mobile-tray-item {
    min-width: 50px;
    padding: 8px 4px;
    font-size: 10px;
  }

  .mobile-tray-item i {
    font-size: 16px;
  }

  .chat-send-btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .chat-action-btn {
    width: 36px;
    height: 36px;
  }
}

/* ─────────────────────────────────────────────────
   20. ACCESSIBILITY & MOTION — Reduced motion
   ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chat-editor-wrapper,
  .chat-editor-wrapper::before,
  .chat-send-btn,
  .chat-action-btn,
  .chat-action-btn::before,
  .chat-fmt-toggle,
  .chat-fmt-tray,
  .chat-fmt-tray .chat-fmt-btn,
  .chat-fmt-btn,
  #reply-context-bar,
  #poll-indicator,
  .sticker-tab-btn,
  .sticker-grid img,
  .mobile-actions-tray,
  .mobile-tray-item,
  .fixed-reply-form,
  .wysiwyg-container,
  .editor-toolbar-compact .editor-btn,
  .mobile-smiley-btn {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────
   21. KEYBOARD FOCUS — Visible focus rings
   ───────────────────────────────────────────────── */
.chat-action-btn:focus-visible,
.chat-send-btn:focus-visible,
.chat-fmt-toggle:focus-visible,
.chat-fmt-btn:focus-visible,
.editor-toolbar-compact .editor-btn:focus-visible,
.sticker-tab-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────
   22. UPLOAD PROGRESS — Enhanced inline indicator
   ───────────────────────────────────────────────── */
.chat-editor .upload-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface-alt));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 15%, var(--border-color));
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0;
  animation: uploadPulse 1.5s ease-in-out infinite;
}

@keyframes uploadPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ─────────────────────────────────────────────────
   23. CHAT INPUT BAR — Consistent alignment
   ───────────────────────────────────────────────── */
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  padding: 2px 0;
}

/* ─────────────────────────────────────────────────
   24. FORUM VOICE PLAYER — Inline voice message
   ───────────────────────────────────────────────── */
.forum-voice-player {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-primary) 8%, var(--bg-surface-alt)),
    color-mix(in srgb, var(--accent-primary) 4%, var(--bg-surface)));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 15%, var(--border-color));
  border-radius: 16px;
  padding: 8px 14px 8px 8px;
  max-width: 320px;
  min-width: 200px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin: 4px 0;
}

.forum-voice-player:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.forum-voice-play-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 80%, #6366f1));
  color: white;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.forum-voice-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

.forum-voice-play-btn:active {
  transform: scale(0.95);
}

.forum-voice-wave-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.forum-voice-waveform {
  display: block;
  height: 32px;
  flex: 1;
  opacity: 0.8;
}

.forum-voice-duration {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* Spinner keyframe for loading state */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .forum-voice-player {
    max-width: 280px;
    min-width: 180px;
    padding: 6px 10px 6px 6px;
    gap: 8px;
  }

  .forum-voice-play-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .forum-voice-waveform {
    height: 28px;
  }
}

/* ─────────────────────────────────────────────────
   25. FORUM VIDEO PLAYER — Inline video in posts
   ───────────────────────────────────────────────── */
.forum-video-container {
  position: relative;
  display: inline-block;
  max-width: 560px;
  width: 100%;
  margin: 6px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a0f;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 12%, var(--border-color));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.forum-video-container:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 25%, var(--border-color));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.forum-video-player {
  display: block;
  width: 100%;
  max-height: 420px;
  border-radius: 0;
  background: #000;
  outline: none;
}

.forum-video-duration {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .forum-video-container {
    max-width: 100%;
    border-radius: 10px;
  }

  .forum-video-player {
    max-height: 300px;
  }

  .forum-video-duration {
    top: 6px;
    right: 6px;
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* ================================================================
   TOPIC CARD HOVER REMOVAL — Ghost-hover fix (mobile) + UX cleanup (PC)
   ================================================================
   Neutralises every .topic-card:hover rule defined earlier in the file.
   Placed at the very end so cascade order wins without !important.
   Preserves :hover on buttons, links, nav elements, and admin UI.
   Adds a subtle :active press effect for real click/tap feedback.
   ================================================================ */

/* --- 1. Kill all topic-card hover backgrounds, borders, shadows, transforms --- */
.topic-card:hover,
.topic-card.hot:hover,
.topic-card.topic-deleted:hover,
.topic-card.topic-noir:hover,
.topic-card.topic-werewolf:hover {
  background: inherit;
  border-color: inherit;
  box-shadow: inherit;
  transform: none;
  opacity: inherit;
}

/* Theme-specific overrides */
[data-theme="dark"] .topic-card:hover,
[data-theme="grey"] .topic-card:hover,
[data-theme="custom"] .topic-card:hover,
[data-theme="deep-ether"] .topic-card:hover,
[data-theme="light-ether"] .topic-card:hover {
  background: inherit;
  border-color: inherit;
  box-shadow: inherit;
  transform: none;
}

[data-theme="deep-ether"] .topic-card.topic-noir:hover,
[data-theme="light-ether"] .topic-card.topic-noir:hover,
[data-theme="deep-ether"] .topic-card.topic-werewolf:hover,
[data-theme="light-ether"] .topic-card.topic-werewolf:hover,
[data-theme="light-ether"] .topic-card.hot:hover {
  background: inherit;
  border-color: inherit;
  box-shadow: inherit;
  transform: none;
}

/* --- 2. Kill child hover effects (avatar, title, reply-count) --- */
.topic-card:hover .topic-author-avatar {
  border-color: inherit;
  transform: none;
  box-shadow: none;
}

[data-theme="deep-ether"] .topic-card:hover .topic-author-avatar,
[data-theme="light-ether"] .topic-card:hover .topic-author-avatar {
  border-color: inherit;
}

.topic-card:hover .topic-card-title,
[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: inherit;
}

.topic-card:hover .reply-count,
.topic-card:hover .reply-count i,
.topic-card:hover .reply-count.hot,
.topic-card:hover .reply-count.hot i,
[data-theme="deep-ether"] .topic-card:hover .reply-count:not(.hot),
[data-theme="light-ether"] .topic-card:hover .reply-count:not(.hot),
[data-theme="light-ether"] .topic-card:hover .reply-count.hot,
[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: inherit;
  color: inherit;
  box-shadow: inherit;
  opacity: inherit;
  animation: none;
}

/* --- 3. Subtle :active press feedback (desktop pointer only) --- */
@media (hover: hover) and (pointer: fine) {
  .topic-card:active {
    background: var(--bg-surface-alt);
    transition: background 0.05s ease;
  }

  [data-theme="light-ether"] .topic-card:active {
    background: rgba(0, 0, 0, 0.03);
    box-shadow: var(--shadow-card);
    transform: none;
  }

  [data-theme="deep-ether"] .topic-card:active {
    background: var(--bg-surface-alt);
  }

  /* Deleted topics: slight opacity bump on press */
  .topic-card.topic-deleted:active {
    opacity: 0.65;
  }
}

/* --- 4. Realm-specific overrides (these use !important upstream) --- */
html[data-realm="bordel"][data-theme="deep-ether"] .topic-card:hover {
  background-color: transparent !important;
}

html[data-realm="bordel"][data-theme="light-ether"] .topic-card:hover {
  background-color: transparent !important;
}

html[data-realm="poirier"][data-theme="deep-ether"] .topic-card:hover {
  background-color: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}

/* Grouped hover rule that includes .topic-card alongside buttons/links —
   we can't drop the whole selector, so we override just .topic-card via
   the rules above. The buttons/links keep their hover normally. */

/* -------------------------------------------------------------------
   Post badge + sticker halo reset
   Remove decorative glows only inside post headers and post content.
   ------------------------------------------------------------------- */
.post .author-level-badge,
.post .author-level-badge:hover,
.post .author-level-badge.level-legendary,
.post .author-clans .clan-badge,
.post .author-clans .clan-badge:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge.level-legendary,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge:hover {
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

.post .author-level-badge svg,
.post .author-level-badge img,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge svg,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-level-badge img {
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.post .author-clans .clan-badge,
.post .author-clans .clan-badge:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge:hover {
  background: transparent !important;
  background-color: transparent !important;
}

.post .author-clans .clan-badge img:not(.clan-badge-glow),
.post .author-clans .clan-badge:hover img:not(.clan-badge-glow),
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge img:not(.clan-badge-glow),
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge:hover img:not(.clan-badge-glow) {
  background: transparent !important;
  background-color: transparent !important;
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

.post .author-clans .clan-badge .clan-badge-glow,
.post .author-clans .clan-badge::after,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge .clan-badge-glow,
html[data-realm="poirier"][data-theme="deep-ether"] .post .author-clans .clan-badge::after {
  display: none !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

.post-content img.sticker,
.post-content .sticker,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img.sticker,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img[src*="sticker"],
html[data-realm="poirier"][data-theme="deep-ether"] .post-content img[src*="risibank"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

.post-content .sticker:hover,
.post-content img.sticker:hover,
.post-content .sticker:active,
.post-content img.sticker:active,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .sticker:hover,
html[data-realm="poirier"][data-theme="deep-ether"] .post-content .sticker:active {
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}