@layer components {
  /* ==========================================================
     MUTED INFO BOX
  ========================================================== */
  .muted-box {
    background: var(--card-gradient);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--section-border);
    box-shadow: var(--shadow-soft);
    margin-top: 1rem;
    color: var(--text-primary);
  }

  .lead {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-primary);
    max-width: 65ch;
  }

  /* ==========================================================
     FORM ELEMENTS
  ========================================================== */
  .anchor-target {
    scroll-margin-top: 120px;
  }

  .discussion-form {
    margin-top: 1rem;
  }

  .discussion-form textarea,
  .discussion-form input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    resize: vertical;
    font: inherit;
  }

  .discussion-form textarea:focus,
  .discussion-form input[type="text"]:focus {
    outline: 2px solid var(--input-focus-border);
    outline-offset: 2px;
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
  }

  /* ==========================================================
     MESSAGE LIST WRAPPER
  ========================================================== */
  .discussion-messages,
  #discussion-messages,
  #messages {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.25rem;
  }

  /* ==========================================================
     INDIVIDUAL MESSAGE CARD (Desktop)
  ========================================================== */
  .discussion-message {
    position: relative;
    padding: 0.9rem 1rem;
    background: var(--card-bg, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--section-border);
    border-left-width: 2px;
    border-left-color: var(--accent-page);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    transition: background 0.25s ease, border-color 0.25s ease;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Top-level comments breathe */
  .discussion-message[data-depth="0"] {
    margin-bottom: 1.6rem;
  }

  /* Replies stay tighter */
  .discussion-message[data-depth]:not([data-depth="0"]) {
    margin-bottom: 0.6rem;
  }

  /* Reputation-based glow */
  .discussion-message[data-rep="initiate"] {
    box-shadow: 0 0 6px rgba(120, 200, 200, 0.25);
  }

  .discussion-message[data-rep="adept"] {
    box-shadow: 0 0 10px rgba(140, 220, 220, 0.32);
  }

  .discussion-message[data-rep="master"] {
    box-shadow: 0 0 14px rgba(160, 240, 240, 0.38);
  }

  .discussion-message[data-rep="luminary"] {
    box-shadow: 0 0 18px rgba(255, 215, 125, 0.45);
    border-left-color: var(--accent-gold);
  }

  /* Pinned message */
  .discussion-message.is-pinned {
    border-left-width: 3px;
    border-left-color: var(--glyph-color);
    background: var(--card-gradient);
    box-shadow: 0 0 14px var(--shadow-glow);
  }

  /* Depth-based background tones */
  .discussion-message[data-depth="0"] {
    background: var(--card-gradient, rgba(255, 255, 255, 0.03));
  }

  .discussion-message[data-depth="1"] {
    background: rgba(255, 255, 255, 0.02);
  }

  .discussion-message[data-depth="2"] {
    background: rgba(255, 255, 255, 0.04);
  }

  .discussion-message[data-depth="3"] {
    background: rgba(255, 255, 255, 0.06);
  }

  /* ==========================================================
   REDDIT-STYLE FLAT THREAD NESTING
   ========================================================== */

.discussion-message[data-depth="0"] {
  margin-left: 0;
}

.discussion-message[data-depth="1"] {
  margin-left: 1rem;
}

.discussion-message[data-depth="2"] {
  margin-left: 2rem;
}

.discussion-message[data-depth="3"] {
  margin-left: 3rem;
}

.discussion-message[data-depth="4"],
.discussion-message[data-depth="5"],
.discussion-message[data-depth="6"] {
  margin-left: 4rem;
}

.discussion-message[data-depth]:not([data-depth="0"])::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.discussion-message[data-depth="1"]::after { left: -0.6rem; }
.discussion-message[data-depth="2"]::after { left: -0.7rem; }
.discussion-message[data-depth="3"]::after { left: -0.8rem; }
.discussion-message[data-depth="4"]::after,
.discussion-message[data-depth="5"]::after,
.discussion-message[data-depth="6"]::after { left: -0.9rem; }
  

  /* ==========================================================
     MESSAGE HEADER
  ========================================================== */
  .discussion-message-header {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
    position: relative;
  }

  .discussion-message-author {
    font-weight: 600;
    color: var(--text-accent);
    font-size: 0.92rem;
  }

  .discussion-message-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
  }

  .rep-badge {
    margin-left: 0.35rem;
    font-size: 1.1rem;
    opacity: 0.9;
    color: var(--accent-page);
  }

  /* ==========================================================
     STEEL MAN BLOCK
  ========================================================== */
  .discussion-message-steelman {
    margin: 0.4rem 0 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: var(--card-gradient);
    border: 1px dashed var(--section-border);
    color: var(--text-primary);
    font-style: italic;
    word-break: break-word;
  }

  .steelman-label {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 0.25rem;
  }

  /* ==========================================================
     ACTION BAR & VOTING
  ========================================================== */
  .discussion-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    pointer-events: auto;
  }

  .btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-accent);
  }

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

  .vote-group {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
    font-size: 0.75rem;
    border: 1px solid transparent;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .vote-btn[data-vote-type="insight"] {
    color: var(--vote-insight);
    border-color: var(--vote-insight-bg);
    background: var(--vote-insight-bg);
  }

  .vote-btn[data-vote-type="agree"] {
    color: var(--vote-agree);
    border-color: var(--vote-agree-bg);
    background: var(--vote-agree-bg);
  }

  .vote-btn[data-vote-type="challenge"] {
    color: var(--vote-challenge);
    border-color: var(--vote-challenge-bg);
    background: var(--vote-challenge-bg);
  }

  .vote-btn:hover {
    filter: brightness(1.08);
  }

  .vote-btn.active {
    box-shadow: 0 0 8px currentColor;
    color: #fff;
  }

  .vote-btn.active[data-vote-type="insight"] {
    background: var(--vote-insight);
  }

  .vote-btn.active[data-vote-type="agree"] {
    background: var(--vote-agree);
  }

  .vote-btn.active[data-vote-type="challenge"] {
    background: var(--vote-challenge);
  }

  .vote-count {
    opacity: 0.9;
  }

  /* Tooltips & Animations */
  .vote-tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    border: 1px solid var(--section-border);
    box-shadow: var(--shadow-soft);
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
  }

  .vote-btn:hover .vote-tooltip {
    opacity: 1;
  }

  .vote-ripple {
    position: absolute;
    width: 14px;
    height: 14px;
    background: currentColor;
    opacity: 0.35;
    border-radius: 50%;
    transform: scale(0);
    animation: vote-ripple-anim 0.45s ease-out forwards;
    pointer-events: none;
  }

  @keyframes vote-ripple-anim {
    from { transform: scale(0); opacity: 0.35; }
    to { transform: scale(8); opacity: 0; }
  }

  .insight-particle {
    position: absolute;
    pointer-events: none;
    font-size: 0.9rem;
    color: var(--vote-insight);
    animation: insight-particle-rise 0.75s ease-out forwards;
  }

  @keyframes insight-particle-rise {
    0% { transform: translateY(0) scale(0.6); opacity: 0.9; }
    100% { transform: translateY(-18px) scale(1.1); opacity: 0; }
  }

  /* ==========================================================
     DEPTH GLYPHS & THREAD LINES (Reddit-style)
  ========================================================== */
.discussion-message {
  --glyph-level: "☉";
}

.discussion-message[data-depth="1"] { --glyph-level: "☽"; }
.discussion-message[data-depth="2"] { --glyph-level: "✶"; }
.discussion-message[data-depth="3"] { --glyph-level: "🜂"; }
.discussion-message[data-depth="4"] { --glyph-level: "⚚"; }
.discussion-message[data-depth="5"] { --glyph-level: "✺"; }
.discussion-message[data-depth="6"] { --glyph-level: "☬"; }

  .discussion-message::before {
    content: var(--glyph-level);
    position: absolute;
    left: -1.1rem;
    top: 0.6rem;
    font-size: 1.1rem;
    opacity: 0.55;
    color: var(--glyph-color);
  }

  .discussion-message.is-pinned::before {
    content: "♛";
    font-size: 1.25rem;
    opacity: 1;
  }

  /* ==========================================================
     REPLY COLLAPSE TOGGLE
  ========================================================== */
  .reply-collapse-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-right: 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.8;
    z-index: 1;
    user-select: none;
  }

  .reply-collapse-toggle:hover {
    color: var(--text-accent);
    text-decoration: underline;
  }

  .discussion-children.is-collapsed {
    display: none;
  }

  /* ==========================================================
     MOBILE STYLES (≤768px)
  ========================================================== */
  @media (max-width: 768px) {
    .discussion-message {
      padding: 0.75rem;
      border-radius: 0.75rem;
    }

    .discussion-children {
      margin-left: 0.5rem;
      padding-left: 0.5rem;
      border-left-width: 1px;
    }

    /* Cap indentation at depth 2, highlight deeper levels */
    .discussion-message[data-depth="0"] { margin-left: 0; }
    .discussion-message[data-depth="1"] { margin-left: 0.75rem; }
    .discussion-message[data-depth="2"],
    .discussion-message[data-depth="3"],
    .discussion-message[data-depth="4"],
    .discussion-message[data-depth="5"],
    .discussion-message[data-depth="6"] {
      margin-left: 1.25rem;
    }

    .discussion-message[data-depth="3"],
    .discussion-message[data-depth="4"],
    .discussion-message[data-depth="5"],
    .discussion-message[data-depth="6"] {
      border-left: 2px solid rgba(120, 200, 200, 0.35);
      padding-left: 0.75rem;
      background: linear-gradient(90deg, rgba(120, 200, 200, 0.06), transparent 40%);
    }

    .discussion-message-body,
    .steelman-text {
      font-size: 0.95rem;
      line-height: 1.45;
    }

    .discussion-message-steelman {
      font-size: 0.85rem;
    }

    .vote-tooltip {
      display: none;
    }

    .vote-label {
      display: none;
    }

    .vote-btn {
      min-width: 44px;
    }
  }

  .discussion-message-deleted {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--muted-text);
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--accent-muted);
}


  .discussion-collapsible > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  }

  .discussion-collapsible > summary::-webkit-details-marker {
    display: none;
  }

  .discussion-collapsible > summary::after {
    content: "+";
    float: right;
    opacity: 1;
  }

  .discussion-collapsible[open] > summary::after {
    content: "-";
  }

  .discussion-collapsible > summary:hover {
    opacity: 0.9;
  }

  /* ==========================================================
     HIGHLIGHT ANIMATION
  ========================================================== */
  @keyframes highlightPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-page); }
    50% { box-shadow: 0 0 10px 3px var(--accent-page); }
  }

  .discussion-highlight {
    animation: highlightPulse 1.5s ease-out;
  }

  .discussion-thread {
    overflow-x: hidden;
  }
}