@okjavis/nodebb-theme-javis 2.0.0 → 2.2.0

package/scss/_topic.scss

@@ -4,64 +4,59 @@
 // ===========================================================
 
 // ===========================================================
-// BREADCRUMB – Softer, More Subtle
+// HIDDEN ELEMENTS
 // ===========================================================
 body.template-topic {
-  .breadcrumb {
-    background: transparent;
-    padding: $jv-space-2 0;
-    margin-bottom: $jv-space-4;
-    font-size: $jv-font-size-sm;
-
-    .breadcrumb-item {
-      color: $jv-text-soft;
-
-      a {
-        color: $jv-text-muted;
-        text-decoration: none;
-        transition: color $jv-transition-fast;
-
-        &:hover {
-          color: $jv-primary;
-        }
-      }
+  .breadcrumb,
+  [component="topic/thumb/list"] {
+    display: none !important;
+  }
 
-      // Separator styling
-      + .breadcrumb-item::before {
-        color: $jv-text-soft;
-        content: "/";
-        padding: 0 $jv-space-2;
-      }
+  // ===========================================================
+  // LAYOUT & CONTAINER
+  // ===========================================================
+  #content {
+    padding-left: 48px !important;
+    padding-right: 48px !important;
+  }
 
-      // Active/current item
-      &.active {
-        color: $jv-text-muted;
-        font-weight: 500;
-      }
-    }
+  [itemscope][itemtype="https://schema.org/DiscussionForumPosting"] > .d-flex.flex-column.gap-3 {
+    margin-top: 24px !important;
   }
 
   // ===========================================================
-  // TOPIC HEADER – Title and Meta
+  // TOPIC HEADER – Title Typography
   // ===========================================================
   .topic-header,
-  [component="topic/header"] {
-    margin-bottom: $jv-space-6;
+  [component="topic/header"],
+  [component="post/header"].fs-3 {
+    margin-bottom: 0;
+    display: flex;
+    align-items: flex-start;
+    gap: $jv-space-3;
 
-    // Topic title
     h1,
-    [component="topic/title"] {
-      font-size: 28px;
+    [component="topic/title"],
+    .topic-title {
+      font-size: $jv-font-size-xl;
       font-weight: 700;
       line-height: $jv-line-height-tight;
       letter-spacing: -0.02em;
       color: $jv-text-main;
-      margin-bottom: $jv-space-3;
+      margin-bottom: 0;
+      flex: 1;
     }
   }
 
+  h1.fs-3 {
+    font-size: $jv-font-size-xl !important;
+    font-weight: 700 !important;
+    line-height: $jv-line-height-tight !important;
+    letter-spacing: -0.02em !important;
+  }
+
   // ===========================================================
-  // META PILLS – Category, Tags, Stats
+  // META PILLS – Tags & Stats
   // ===========================================================
   .topic-tags,
   [component="topic/tags"] {
@@ -88,7 +83,6 @@ body.template-topic {
     }
   }
 
-  // Category badge in topic
   .category-badge,
   [component="category/link"] .badge {
     background: rgba(0, 0, 0, 0.06);
@@ -96,8 +90,20 @@ body.template-topic {
     font-weight: 500;
   }
 
+  .topic-info .stats,
+  .badge.stats,
+  .topic-stats .badge {
+    background: rgba(0, 0, 0, 0.04) !important;
+    border: 1px solid $jv-border-subtle !important;
+    color: $jv-text-muted !important;
+    font-size: $jv-font-size-xs;
+    font-weight: 500;
+    padding: $jv-space-1 $jv-space-3;
+    border-radius: $jv-radius-pill;
+  }
+
   // ===========================================================
-  // POST CONTAINER – Clean, Borderless Design
+  // POSTS CONTAINER
   // ===========================================================
   .topic {
     .posts-container {
@@ -105,25 +111,77 @@ body.template-topic {
       width: 100%;
     }
 
-    // Individual post
+    // Remove timeline start/end dots from posts list
+    .posts.timeline::before,
+    .posts.timeline::after {
+      display: none !important;
+    }
+
     [component="post"] {
-      background: $jv-surface;
-      border-radius: $jv-radius-md;
-      margin-bottom: $jv-space-4;
-      border: none; // Borderless as per theme
-      box-shadow: none; // No shadow for cleaner look
+      background: transparent;
+      margin-bottom: $jv-space-3;
+      border: none;
+      box-shadow: none;
+
+      // Remove timeline vertical line from Harmony theme
+      border-left: none !important;
+
+      // Remove timeline end dot
+      &:last-child::after {
+        display: none !important;
+      }
+
+      // Remove all timeline pseudo-elements (dots at start/end)
+      &::before,
+      &::after {
+        display: none !important;
+      }
+
+      // Hide user status indicator (green/grey dot below avatar)
+      [component="user/status"] {
+        display: none !important;
+      }
+
+      // Card styling on the parent container that includes avatar
+      .post-container-parent {
+        background: $jv-surface;
+        border-radius: $jv-radius-md;
+        border: 1px solid $jv-border-subtle;
+        padding: $jv-space-3;
+        gap: $jv-space-2 !important; // Tighter gap
+
+        // Reduce avatar size from 48px to 36px
+        > .bg-body {
+          // Align avatar container with the post header (username/timestamp line)
+          align-self: flex-start;
+          margin-top: 2px; // Fine-tune to vertically center with text
+
+          [component="user/picture"],
+          .avatar {
+            width: 36px !important;
+            height: 36px !important;
+            font-size: $jv-font-size-sm !important;
+            line-height: 36px !important;
+          }
+        }
+      }
+
+      // Align the post header row with avatar
+      .post-header {
+        min-height: 36px; // Match avatar height
+        align-items: center !important;
+        margin-bottom: 0 !important;
+      }
 
-      // Post container inner
       .post-container {
-        padding: $jv-space-6;
+        padding: 0;
+        padding-top: 0 !important;
         border: none;
         background: transparent;
       }
 
-      // Selected state (when linked directly)
-      &.selected .post-container {
+      &.selected .post-container-parent {
         background: $jv-selected-bg;
-        border-radius: $jv-radius-md;
       }
     }
   }
@@ -134,30 +192,28 @@ body.template-topic {
   .post-header {
     display: flex;
     align-items: center;
-    gap: $jv-space-3;
-    margin-bottom: $jv-space-4;
-    font-size: $jv-font-size-sm;
+    gap: $jv-space-2;
+    margin-bottom: $jv-space-3;
+    font-size: $jv-font-size-xs;
 
-    // Avatar
     .avatar {
-      width: 40px;
-      height: 40px;
+      width: 32px;
+      height: 32px;
       border-radius: 50%;
       object-fit: cover;
       flex-shrink: 0;
     }
 
-    // User info container
     .user-info {
       display: flex;
       flex-direction: column;
-      gap: 2px;
+      gap: $jv-space-1;
     }
 
-    // Username
     .username,
     [component="post/header/username"] {
       font-weight: 600;
+      font-size: $jv-font-size-sm;
       color: $jv-text-main;
       text-decoration: none;
 
@@ -166,27 +222,20 @@ body.template-topic {
       }
     }
 
-    // Timestamp
     .timeago,
     [component="post/timestamp"] {
       color: $jv-text-soft;
       font-size: $jv-font-size-xs;
     }
 
-    // Post index/number - Subtle
     .post-index,
     [component="post/header/index"] {
       color: $jv-text-soft;
       font-size: $jv-font-size-xs;
       font-weight: 400;
-      opacity: 0.6;
-
-      &::before {
-        content: "#";
-      }
+      opacity: 0.5;
     }
 
-    // Bookmarked indicator
     .bookmarked {
       color: $jv-warning;
     }
@@ -201,35 +250,27 @@ body.template-topic {
     color: $jv-text-main;
 
     p {
-      margin-bottom: $jv-space-4;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
+      margin-bottom: $jv-space-3;
+      &:last-child { margin-bottom: 0; }
     }
 
-    // Code blocks
     pre, code {
       background: rgba(0, 0, 0, 0.04);
       border-radius: $jv-radius-sm;
-      font-size: $jv-font-size-sm;
+      font-size: $jv-font-size-xs;
     }
 
-    code {
-      padding: 2px 6px;
-    }
+    code { padding: 2px 5px; }
 
     pre {
-      padding: $jv-space-4;
+      padding: $jv-space-3;
       overflow-x: auto;
-
       code {
         padding: 0;
         background: transparent;
       }
     }
 
-    // Blockquotes
     blockquote {
       border-left: 3px solid $jv-border-strong;
       padding-left: $jv-space-4;
@@ -238,42 +279,123 @@ body.template-topic {
       font-style: italic;
     }
 
-    // Images
     img {
       max-width: 100%;
       border-radius: $jv-radius-sm;
     }
 
-    // Links
-    a {
-      color: $jv-primary;
+    // ===========================================================
+    // POST IMAGE CAROUSEL
+    // ===========================================================
+    .post-image-carousel {
+      border-radius: $jv-radius-md;
+      overflow: hidden;
+      margin: $jv-space-4 0;
+      background: rgba(0, 0, 0, 0.03);
+
+      .carousel-inner {
+        border-radius: $jv-radius-md;
+      }
+
+      .carousel-item {
+        // Fixed height container to prevent jumping
+        height: 400px;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          background: rgba(0, 0, 0, 0.02);
+        }
+      }
+
+      // Navigation arrows
+      .carousel-control-prev,
+      .carousel-control-next {
+        width: 48px;
+        height: 48px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity $jv-transition-fast;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.7);
+        }
+
+        .carousel-control-prev-icon,
+        .carousel-control-next-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      .carousel-control-prev {
+        left: $jv-space-3;
+      }
+
+      .carousel-control-next {
+        right: $jv-space-3;
+      }
 
       &:hover {
-        text-decoration: underline;
+        .carousel-control-prev,
+        .carousel-control-next {
+          opacity: 1;
+        }
       }
+
+      // Indicator dots
+      .carousel-indicators {
+        margin-bottom: $jv-space-3;
+        gap: $jv-space-2;
+
+        button {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.5);
+          border: none;
+          opacity: 1;
+          transition: background-color $jv-transition-fast, transform $jv-transition-fast;
+
+          &.active {
+            background: #fff;
+            transform: scale(1.2);
+          }
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.8);
+          }
+        }
+      }
+    }
+
+    a {
+      color: $jv-primary;
+      &:hover { text-decoration: underline; }
     }
   }
 
   // ===========================================================
-  // POST FOOTER – Action Bar
+  // POST FOOTER & ACTIONS
   // ===========================================================
   [component="post/footer"],
   .post-footer {
-    padding-top: $jv-space-4;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
     margin-top: $jv-space-4;
     border-top: 1px solid $jv-border-subtle;
   }
 
-  // ===========================================================
-  // ACTION ICONS – Ghost Button Style
-  // ===========================================================
   [component="post/actions"] {
     display: flex;
     align-items: center;
     gap: $jv-space-2;
     flex-wrap: wrap;
 
-    // All action buttons - Ghost style
     .btn,
     [component="post/reply"],
     [component="post/quote"],
@@ -293,9 +415,7 @@ body.template-topic {
       align-items: center;
       gap: $jv-space-2;
 
-      i {
-        font-size: 16px;
-      }
+      i { font-size: 16px; }
 
       &:hover {
         background: $jv-hover-bg !important;
@@ -307,7 +427,6 @@ body.template-topic {
         box-shadow: $jv-focus-ring;
       }
 
-      // Active states (voted, bookmarked)
       &.active,
       &.upvoted,
       &.downvoted,
@@ -317,7 +436,6 @@ body.template-topic {
       }
     }
 
-    // Vote counts
     [component="post/vote-count"] {
       font-weight: 600;
       color: $jv-text-muted;
@@ -326,71 +444,244 @@ body.template-topic {
     }
   }
 
+  // Always visible post actions (override Harmony's hover behavior)
+  .topic .posts [component="post"] [component="post/actions"] {
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+
   // ===========================================================
-  // RIGHT SIDEBAR ACTIONS – Ghost Buttons
+  // GHOST BUTTON – Shared Style
   // ===========================================================
-  .topic-main-buttons,
-  [component="topic/actions"],
-  .sidebar [data-widget-area] {
-    .btn {
-      background: transparent !important;
-      border: 1px solid transparent !important;
+  .btn-ghost {
+    background: transparent !important;
+    border: 1px solid transparent !important;
+    color: $jv-text-muted;
+    padding: $jv-space-2 $jv-space-3;
+    border-radius: $jv-radius-sm;
+    font-size: $jv-font-size-sm;
+    font-weight: 500;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast;
+    display: inline-flex;
+    align-items: center;
+    gap: $jv-space-2;
+
+    i {
+      font-size: 16px;
+      color: $jv-primary;
+    }
+
+    &:hover {
+      background: $jv-hover-bg !important;
+      color: $jv-text-main;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
+  }
+
+  // ===========================================================
+  // PRIMARY BUTTON – Reply
+  // ===========================================================
+  .btn-primary {
+    background: $jv-primary !important;
+    border-color: $jv-primary !important;
+    color: #fff !important;
+
+    &:hover {
+      background: $jv-primary-hover !important;
+      border-color: $jv-primary-hover !important;
+    }
+  }
+
+  // ===========================================================
+  // PAGINATION / TIMELINE NAVIGATOR – Shared
+  // ===========================================================
+  .pagination-block {
+    .scroller-content {
+      min-width: 180px;
+    }
+
+    .scroller-thumb-icon {
+      background: $jv-primary !important;
+      border-radius: $jv-radius-xs;
+      transition: transform $jv-transition-fast;
+    }
+
+    .pagetop,
+    .pagebottom {
+      background: transparent;
+      border: none;
       color: $jv-text-muted;
-      padding: $jv-space-2 $jv-space-4;
+      padding: $jv-space-2 $jv-space-3;
       border-radius: $jv-radius-sm;
       font-size: $jv-font-size-sm;
-      font-weight: 500;
-      transition: background-color $jv-transition-fast, color $jv-transition-fast;
-      display: inline-flex;
-      align-items: center;
-      gap: $jv-space-2;
-      width: 100%;
-      justify-content: flex-start;
-      text-align: left;
-
-      i {
-        font-size: 16px;
-        width: 20px;
-        text-align: center;
-      }
 
       &:hover {
-        background: $jv-hover-bg !important;
+        background: $jv-hover-bg;
         color: $jv-text-main;
       }
 
-      &:focus-visible {
-        outline: none;
-        box-shadow: $jv-focus-ring;
+      i { color: $jv-primary; }
+    }
+
+    .thumb-text {
+      color: $jv-text-main;
+      font-weight: 600;
+      font-size: $jv-font-size-sm;
+    }
+
+    .thumb-timestamp {
+      color: $jv-text-soft;
+      font-size: $jv-font-size-xs;
+    }
+  }
+
+  // ===========================================================
+  // TOPIC SIDEBAR – Right Column
+  // ===========================================================
+  .topic-sidebar-container {
+    position: sticky;
+    top: 80px;
+    height: fit-content;
+    align-self: flex-start;
+    z-index: 100;
+    pointer-events: auto;
+  }
+
+  .topic-sidebar {
+    background: $jv-surface;
+    border: 1px solid $jv-border-subtle;
+    border-radius: $jv-radius-md;
+    padding: $jv-space-4;
+    position: relative;
+    pointer-events: auto;
+
+    button, a, .btn, .dropdown-toggle, [role="button"] {
+      pointer-events: auto;
+      cursor: pointer;
+    }
+
+    .topic-sidebar-actions {
+      position: relative;
+      z-index: 10;
+
+      .btn,
+      [component="topic/reply/container"],
+      .btn-group,
+      .thread-tools {
+        width: 100%;
+        position: relative;
+        z-index: 10;
       }
 
-      // Primary action (Reply)
-      &.btn-primary {
-        background: $jv-primary !important;
-        color: #fff;
+      [component="topic/reply/container"] {
+        display: flex;
+        flex-direction: column;
+        gap: $jv-space-2;
+
+        .btn-primary {
+          flex: 1;
+          border-radius: $jv-radius-sm;
+          font-weight: 600;
+          padding: $jv-space-3 $jv-space-4;
+        }
+
+        .dropdown-toggle { display: none; }
+      }
+
+      // Consistent ghost button styling for all sidebar action buttons
+      .btn-ghost,
+      .bottom-sheet > .btn,
+      .thread-tools > .dropdown-toggle {
+        background: transparent !important;
+        border: 1px solid transparent !important;
+        color: $jv-text-muted;
+        padding: $jv-space-2 $jv-space-3;
+        border-radius: $jv-radius-sm;
+        font-size: $jv-font-size-sm;
+        font-weight: 500;
+        text-align: left;
+        width: 100%;
+        justify-content: flex-start;
+        transition: background-color $jv-transition-fast, color $jv-transition-fast;
+
+        i {
+          width: 16px;
+          color: $jv-primary;
+        }
 
         &:hover {
-          background: $jv-primary-hover !important;
-          color: #fff;
+          background: $jv-hover-bg !important;
+          color: $jv-text-main;
         }
       }
+
+      .bottom-sheet {
+        width: 100%;
+        .dropdown-menu { width: 100%; }
+      }
+
+      .thread-tools {
+        .dropdown-menu { min-width: 100%; }
+      }
+    }
+
+    .pagination-block {
+      margin-top: $jv-space-4;
+      padding-top: $jv-space-4;
+      border-top: 1px solid $jv-border-subtle;
+
+      .scroller-content { gap: $jv-space-2; }
+
+      .scroller-container {
+        padding: $jv-space-2 $jv-space-3;
+        position: relative !important;
+        left: auto !important;
+        height: auto !important;
+        border-left: none !important;
+      }
     }
   }
 
-  // Sidebar action list
-  .topic-actions-list,
-  .topic-tools {
-    display: flex;
-    flex-direction: column;
-    gap: $jv-space-1;
+  // ===========================================================
+  // WIDGET AREA
+  // ===========================================================
+  [data-widget-area="sidebar"] {
+    .btn {
+      transition: background-color $jv-transition-fast, color $jv-transition-fast;
+      &:focus-visible {
+        outline: none;
+        box-shadow: $jv-focus-ring;
+      }
+    }
 
-    .dropdown-item,
-    .action-item {
-      padding: $jv-space-2 $jv-space-4;
-      border-radius: $jv-radius-sm;
+    .widget {
+      background: $jv-surface;
+      border: 1px solid $jv-border-subtle;
+      border-radius: $jv-radius-md;
+      padding: $jv-space-4;
+    }
+  }
+
+  // ===========================================================
+  // TOPIC NAVIGATOR (Floating)
+  // ===========================================================
+  [component="topic/navigator"] {
+    background: $jv-surface;
+    border-radius: $jv-radius-md;
+    box-shadow: $jv-shadow-lg;
+    border: 1px solid $jv-border-subtle;
+    padding: $jv-space-3;
+
+    .btn {
+      background: transparent;
+      border: none;
       color: $jv-text-muted;
-      font-size: $jv-font-size-sm;
-      transition: background-color $jv-transition-fast, color $jv-transition-fast;
+      padding: $jv-space-2;
+      border-radius: $jv-radius-sm;
 
       &:hover {
         background: $jv-hover-bg;
@@ -410,14 +701,12 @@ body.template-topic {
     margin-top: $jv-space-6;
     border: 1px solid $jv-border-subtle;
 
-    // Quick reply header
     .quick-reply-header {
       margin-bottom: $jv-space-4;
       font-weight: 600;
       color: $jv-text-main;
     }
 
-    // Textarea
     textarea,
     .form-control {
       border: 1px solid $jv-border-subtle;
@@ -435,12 +724,9 @@ body.template-topic {
         box-shadow: $jv-focus-ring;
       }
 
-      &::placeholder {
-        color: $jv-text-soft;
-      }
+      &::placeholder { color: $jv-text-soft; }
     }
 
-    // Quick reply footer with buttons
     .quick-reply-footer,
     .composer-actions {
       display: flex;
@@ -451,45 +737,282 @@ body.template-topic {
   }
 
   // ===========================================================
-  // REPLY CONTAINER (Nested replies)
+  // PARENT POST CONTEXT (shown when viewing a reply)
   // ===========================================================
-  [component="post/replies/container"] {
-    margin-top: $jv-space-4;
-    padding-left: $jv-space-6;
-    border-left: 2px solid $jv-border-subtle;
+  [component="post/parent"] {
+    background: $jv-surface !important;
+    border: 1px solid $jv-border-subtle !important;
+    border-left: 3px solid $jv-primary !important;
+    border-radius: $jv-radius-sm !important;
+    padding: $jv-space-3 !important;
+    margin-bottom: $jv-space-3 !important;
+    transition: background-color $jv-transition-fast, border-color $jv-transition-fast;
+
+    &:hover {
+      background: $jv-hover-bg !important;
+      border-color: $jv-border-strong !important;
+      border-left-color: $jv-primary-hover !important;
+    }
 
-    [component="post"] {
-      margin-bottom: $jv-space-3;
-      padding: $jv-space-4;
-      background: rgba(0, 0, 0, 0.02);
-      border-radius: $jv-radius-sm;
+    // Header row with avatar and metadata
+    > .d-flex:first-child {
+      gap: $jv-space-2 !important;
+      margin-bottom: $jv-space-2;
+
+      // Small avatar
+      .avatar,
+      [component="user/picture"] {
+        width: 20px !important;
+        height: 20px !important;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
 
-      .post-container {
-        padding: 0;
+      // Username and time
+      .text-nowrap,
+      .fw-bold {
+        font-size: $jv-font-size-xs !important;
+        font-weight: 600;
+        color: $jv-text-main;
+      }
+
+      .text-muted {
+        font-size: $jv-font-size-xs !important;
+        color: $jv-text-soft !important;
+      }
+    }
+
+    // Parent content preview
+    [component="post/parent/content"] {
+      font-size: $jv-font-size-sm !important;
+      color: $jv-text-muted !important;
+      line-height: $jv-line-height-base;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+
+      p {
+        margin: 0;
       }
     }
   }
 
   // ===========================================================
-  // TOPIC NAVIGATOR (Floating scroll helper)
+  // REPLY COUNT BUTTON (Accordion trigger)
   // ===========================================================
-  [component="topic/navigator"] {
-    background: $jv-surface;
-    border-radius: $jv-radius-md;
-    box-shadow: $jv-shadow-lg;
-    border: 1px solid $jv-border-subtle;
-    padding: $jv-space-3;
+  [component="post/reply-count"] {
+    display: inline-flex !important;
+    align-items: center;
+    gap: $jv-space-2;
+    background: $jv-surface !important;
+    border: 1px solid $jv-border-subtle !important;
+    border-radius: $jv-radius-pill !important;
+    padding: $jv-space-1 $jv-space-3 !important;
+    font-size: $jv-font-size-xs !important;
+    color: $jv-text-muted !important;
+    cursor: pointer;
+    transition: all $jv-transition-fast;
+
+    &:hover {
+      background: $jv-hover-bg !important;
+      border-color: $jv-border-strong !important;
+      color: $jv-text-main !important;
+    }
 
-    .btn {
-      background: transparent;
-      border: none;
-      color: $jv-text-muted;
-      padding: $jv-space-2;
-      border-radius: $jv-radius-sm;
+    // Avatar stack
+    [component="post/reply-count/avatars"] {
+      display: flex;
+      align-items: center;
 
-      &:hover {
-        background: $jv-hover-bg;
-        color: $jv-text-main;
+      span {
+        margin-left: -4px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .avatar,
+      img {
+        width: 18px !important;
+        height: 18px !important;
+        border-radius: 50%;
+        border: 2px solid $jv-surface;
+      }
+    }
+
+    // Reply count text
+    .replies-count,
+    [component="post/reply-count/text"] {
+      font-weight: 600;
+      color: $jv-text-main;
+    }
+
+    // Last reply time
+    .replies-last {
+      color: $jv-text-soft;
+      font-size: $jv-font-size-xs;
+    }
+
+    // Chevron icon
+    .fa-chevron-down {
+      font-size: 10px;
+      color: $jv-text-soft;
+      transition: transform $jv-transition-fast;
+    }
+
+    // Expanded state
+    &[aria-expanded="true"] {
+      .fa-chevron-down {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  // ===========================================================
+  // NESTED REPLIES CONTAINER (Threaded style)
+  // ===========================================================
+  [component="post/replies/container"] {
+    margin-top: $jv-space-3 !important;
+    margin-bottom: 0 !important;
+    margin-left: $jv-space-6;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    position: relative;
+
+    // Thread line
+    &::before {
+      content: "";
+      position: absolute;
+      left: -$jv-space-4;
+      top: 0;
+      bottom: $jv-space-4;
+      width: 2px;
+      background: $jv-border-subtle;
+      border-radius: 1px;
+    }
+
+    // Replies list
+    [component="post/replies"],
+    ul.list-unstyled {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: $jv-space-3;
+    }
+
+    // Individual reply posts
+    [component="post"] {
+      margin: 0 !important;
+      padding: 0 !important;
+      background: transparent !important;
+      position: relative;
+
+      // Thread connector dot
+      &::before {
+        content: "";
+        position: absolute;
+        left: -$jv-space-4 - 3px;
+        top: $jv-space-4;
+        width: 8px;
+        height: 8px;
+        background: $jv-surface;
+        border: 2px solid $jv-border-strong;
+        border-radius: 50%;
+        z-index: 1;
+      }
+
+      // Reply card
+      .post-container-parent {
+        background: $jv-surface !important;
+        border: 1px solid $jv-border-subtle !important;
+        border-radius: $jv-radius-sm !important;
+        padding: $jv-space-3 !important;
+        gap: $jv-space-2 !important;
+        transition: border-color $jv-transition-fast, box-shadow $jv-transition-fast;
+
+        &:hover {
+          border-color: $jv-border-strong !important;
+          box-shadow: $jv-shadow-sm;
+        }
+
+        // Smaller avatar for replies
+        > .bg-body,
+        > div:first-child {
+          .avatar,
+          [component="user/picture"] {
+            width: 28px !important;
+            height: 28px !important;
+          }
+        }
+      }
+
+      // Post content area
+      .post-container {
+        padding: 0 !important;
+        background: transparent !important;
+        border: none !important;
+      }
+
+      // Reply header
+      .post-header {
+        font-size: $jv-font-size-xs !important;
+        min-height: auto !important;
+        margin-bottom: $jv-space-1 !important;
+
+        .fw-bold,
+        a[data-username] {
+          font-size: $jv-font-size-xs !important;
+          font-weight: 600;
+        }
+
+        .text-muted {
+          font-size: $jv-font-size-xs !important;
+        }
+
+        // Hide post index in replies
+        .post-index {
+          display: none !important;
+        }
+      }
+
+      // Reply content
+      [component="post/content"] {
+        font-size: $jv-font-size-sm !important;
+        line-height: $jv-line-height-base;
+      }
+
+      // Reply footer/actions
+      [component="post/footer"],
+      .post-footer {
+        margin-top: $jv-space-2 !important;
+        padding-top: $jv-space-2 !important;
+        padding-bottom: 0 !important;
+        border-top: 1px solid $jv-border-subtle !important;
+        border-bottom: none !important;
+      }
+
+      [component="post/actions"] {
+        gap: $jv-space-1 !important;
+
+        .btn,
+        .btn-ghost {
+          padding: $jv-space-1 $jv-space-2 !important;
+          font-size: $jv-font-size-xs !important;
+
+          i {
+            font-size: 14px !important;
+          }
+        }
+      }
+
+      // Last reply - no bottom spacing on thread line
+      &:last-child::before {
+        display: block !important;
       }
     }
   }
@@ -518,11 +1041,7 @@ body.template-topic {
       [component="post/upvote"],
       [component="post/downvote"] {
         padding: $jv-space-2;
-
-        // Hide text on smaller screens
-        span:not(.fa):not(.fas):not(.far):not(.fab) {
-          display: none;
-        }
+        span:not(.fa):not(.fas):not(.far):not(.fab) { display: none; }
       }
     }
   }
@@ -532,7 +1051,7 @@ body.template-topic {
   body.template-topic {
     .topic-header h1,
     .topic-header [component="topic/title"] {
-      font-size: 22px;
+      font-size: $jv-font-size-xl;
     }
 
     .quick-reply,
@@ -540,8 +1059,35 @@ body.template-topic {
       padding: $jv-space-4;
     }
 
+    // Mobile adjustments for threaded replies
     [component="post/replies/container"] {
-      padding-left: $jv-space-4;
+      margin-left: $jv-space-4;
+
+      &::before {
+        left: -$jv-space-3;
+      }
+
+      [component="post"] {
+        &::before {
+          left: -$jv-space-3 - 3px;
+        }
+      }
+    }
+
+    // Mobile adjustments for parent context
+    [component="post/parent"] {
+      padding: $jv-space-2 !important;
+
+      [component="post/parent/content"] {
+        -webkit-line-clamp: 1;
+      }
+    }
+
+    // Mobile reply count button
+    [component="post/reply-count"] {
+      .replies-last {
+        display: none !important;
+      }
     }
   }
-}
+}