:root {
        --hsi-primary: #1a4d2e;
        --hsi-bg: #f3f6f9;
        --hsi-border: #e2e8f0;
    }


    .km-forum-detail-page{

    max-width:700px;

    margin:0 auto;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

    /* Sticky Header & OP Card Area */
    .sticky-top-area{

    position:sticky;

    top:0;

    z-index:50;

    background:#f3f6f9;

    padding:
        1rem
        1rem
        .5rem;

}
    
    /* Scrollable Replies Area */
    .scrollable-content{

    flex:1;

    overflow-y:visible;

    padding:
        0 1rem 8rem 1rem;

}
    
    /* Post Utama */
    .op-card { border-radius: 16px; border: none; background: white; }
    .op-header { padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--hsi-border); }
    .op-body { padding: 1.2rem; }
    .op-title { font-weight: 700; color: #0f172a; font-size: 1.15rem; margin-bottom: 0.5rem; }

    /* Bubble Style */
    .reply-bubble { 
        max-width: 85%;
        border: 1px solid #eef2f6 !important;
        background: #fff;
    }

    /* Action Buttons (Right Side) */
    .btn-reply-icon, .btn-reaction-trigger {
        background: #f1f5f9;
        border: none;
        color: #64748b;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 0.9rem;
        transition: 0.2s;
    }
    .btn-reply-icon:hover { background: var(--hsi-primary); color: white; }
    .btn-reaction-trigger:hover { background: #e2e8f0; color: #0f172a; }

    .reaction-dropdown-menu {
        min-width: auto;
        background: white;
        border: 1px solid var(--hsi-border) !important;
    }

    .btn-emoji-item {
        background: transparent;
        border: none;
        font-size: 1.1rem;
        padding: 4px;
        border-radius: 50%;
        transition: 0.2s;
        line-height: 1;
    }
    .btn-emoji-item:hover { background: #f1f5f9; transform: scale(1.3); }

    /* Buttons & Inputs */
    .btn-hsi { 
        background: var(--hsi-primary); 
        color: white; 
        border-radius: 8px; 
        padding: 5px 15px; 
        font-weight: 600; 
        font-size: 0.8rem;
        border: none;
    }

    .input-custom {
        width: 100%;
        border-radius: 10px;
        border: 1px solid var(--hsi-border);
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    .fade-in { animation: fadeIn 0.2s ease-in; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

    .child-container { border-left: 2px solid #f1f5f9; margin-left: 10px; padding-left: 5px; }
    
    /* =========================
   SIMPLE REPLY UI
========================= */

.km-reply-card{

    background:white;

    border-radius:18px;

    padding:14px;

    margin-bottom:12px;

    border:1px solid #eef2f7;

}

/* top */

.km-reply-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:10px;

    margin-bottom:10px;

}

/* user */

.km-reply-user{

    display:flex;

    align-items:center;

    gap:10px;

}

/* avatar */

.km-reply-avatar{

    width:40px;
    height:40px;

    border-radius:50%;

    overflow:hidden;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.km-reply-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

}

/* name */

.km-reply-name{

    font-size:13px;

    font-weight:700;

    color:#0f172a;

}

/* time */

.km-reply-time{

    font-size:11px;

    color:#94a3b8;

}

/* parent */

.km-parent-preview{

    background:#f8fafc;

    border-radius:12px;

    padding:10px;

    margin-bottom:10px;

}

/* parent label */

.km-parent-label{

    font-size:11px;

    font-weight:700;

    color:#2563eb;

}

/* parent text */

.km-parent-text{

    font-size:12px;

    color:#64748b;

    margin-top:4px;

}

/* text */

.km-reply-text{

    font-size:14px;

    line-height:1.6;

    color:#334155;

}

/* reply btn */

.km-reply-btn{

    border:none;

    background:#eff6ff;

    color:#2563eb;

    border-radius:10px;

    padding:6px 12px;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

}


/* =========================
   PAGE
========================= */

.km-forum-detail-page{

    padding-bottom:80px;

}

/* =========================
   FACEBOOK STYLE COMMENT
========================= */

.thread-node{

    margin-bottom:14px;
    margin-left: 6px;
    margin-bottom: 0px;

}

/* bubble */

.km-fb-comment {
    background: #ffffff;
    border-radius: 10px;
    padding: 4px 6px;
    position: relative;
    word-break: break-word;

    box-shadow:
        0 1px 2px rgba(0,0,0,0.06),
        0 4px 12px rgba(0,0,0,0.08);
}

/* text */

.reply-message {
    font-size: 17px;
    line-height: 1.5;
    white-space: inherit;
    border-radius: 9px;
}

/* nested */

.child-container{

    margin-left:14px;

    margin-top:8px;

    border-left:
        2px solid #e5e7eb;

    padding-left:12px;

}

/* reply button */

.btn-reply-icon{

    border:none;

    background:none;

    padding:0;

    margin:0;

    font-size:12px;

    font-weight:600;

    color:#65676b;

    cursor:pointer;

}

.btn-reply-icon:hover{

    text-decoration:underline;

}

/* textarea */

.input-custom{

    width:100%;

    border:none;

    background:#f0f2f5;

    border-radius:18px;

    padding:12px 14px;

    font-size:14px;

    line-height:1.5;

    resize:none;

    outline:none;

}

.input-custom:focus{

    background:#e9eef5;

}

/* top card */

.op-card{

    overflow:hidden;

}

/* title */

.op-title{

    font-size:18px;

    font-weight:700;

    line-height:1.45;

    color:#111827;

}

/* content */

.op-content{

    font-size:15px;

    line-height:1.75;

    color:#334155;

}

/* empty */

.km-empty-state{

    text-align:center;

    padding:60px 20px;

    color:#94a3b8;

}

/* card */

.card{

    border-radius:20px !important;

}

/* btn */

.btn-hsi{

    border-radius:999px !important;

    background:#1a4d2e;

    border:none;

    color:white;

    font-weight:600;

}

.btn-hsi:hover{

    background:#143d25;

    color:white;

}

/* small meta */

.small{

    font-size:12px !important;

}

/* avatar */

.rounded-circle{

    object-fit:cover;

    flex-shrink:0;

}

/* reply form animation */

#form-reply-0,
[id^="form-reply-"]{

    animation:
        fadeReply .15s ease;

}

@keyframes fadeReply{

    from{

        opacity:0;

        transform:
            translateY(4px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

/* mobile */

@media(max-width:768px){

    .km-fb-comment{

        padding:4px 6px;

    }

    .reply-message{

        font-size:17px;

    }

    .child-container{

        margin-left:10px;

        padding-left:10px;

    }

}

/* =========================
   FACEBOOK THREAD LINE
========================= */

.thread-node{

    position:relative;

}

/* child wrapper */

.child-container{

    position:relative;

    margin-left:-25px;

    padding-left:10px;

    margin-top:8px;

}

/* garis vertikal utama */

.child-container::before{

    content:'';

    position:absolute;

    top:0;

    left:0;

    width:2px;

    height:100%;

    background:#d1d5db;

    border-radius:999px;

}

/* garis horizontal ke bubble */

.child-container > .thread-node::before{

    content:'';

    position:absolute;

    top:20px;

    left: -17px;
    width: 30px;

    height:2px;

    background:#d1d5db;

    border-radius:999px;

}


.km-reply-tag{

    color:#1877f2;

    font-weight:600;

    margin-right:4px;

}

/* mention */

.km-reply-tag{

    color:#1877f2;

    font-weight:600;

    cursor:pointer;

}

/* show more */

.km-show-more-replies{

    border:none;

    background:none;

    color:#65676b;

    font-size:13px;

    font-weight:600;

    margin-top:6px;

    padding:0;

    cursor:pointer;

}

.km-show-more-replies:hover{

    text-decoration:underline;

}