/*==========================================================
    CONTRIBUTION HEADER
    ==========================================================*/
        .contributor-avatar{

            width:48px;
            height:48px;
            object-fit:cover;

            border:2px solid rgba(255,255,255,.12);

            box-shadow:0 8px 20px rgba(0,0,0,.12);

        }

        .contributor-badge{

            display:inline-flex;

            align-items:center;

            gap:4px;

            padding:4px 10px;

            border-radius:999px;

            font-size:.72rem;

            background:rgba(255,255,255,.06);

            border:1px solid rgba(255,255,255,.10);

            backdrop-filter:blur(12px);

        }

        .contribution-menu-btn{

            border-radius:50%;

            width:36px;

            height:36px;

        }

        .contribution-menu-btn:hover{

            background:rgba(13,110,253,.08);

        }

    /*==========================================================
        REFERENCE QUOTE
    ==========================================================*/
        .reference-quote{
            position:relative;
            padding:16px 18px;
            margin-bottom:1rem;
            border-radius:18px;
            background:rgba(255,255,255,.04);
            backdrop-filter:blur(16px);
            border-left:4px solid rgba(13,110,253,.75);
            box-shadow:0 8px 22px rgba(0,0,0,.08);
        }

        .reference-title{
            font-size:.82rem;
            font-weight:700;
            color:var(--bs-primary);
            margin-bottom:10px;
        }

        .reference-content{
            margin:0;
            font-style:italic;
            color:var(--bs-secondary-color);
            line-height:1.65;
            font-size:.92rem;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }

    /*==========================================================
        CONTRIBUTION CONTENT
    ==========================================================*/

        .contribution-content{

            font-size:.96rem;

            line-height:1.85;

            color:var(--bs-body-color);

            word-break:break-word;

            overflow-wrap:anywhere;

        }

        .contribution-content p{

            margin-bottom:1rem;

        }

        .contribution-content a{

            color:var(--bs-primary);

            text-decoration:none;

            font-weight:600;

        }

        .contribution-content a:hover{

            text-decoration:underline;

        }

    /*==========================================================
        ATTACHMENTS
    ==========================================================*/
        .contribution-attachments{

            display:flex;

            flex-direction:column;

            gap:12px;

        }

        .attachment-image{

            width:100%;

            max-height:350px;

            object-fit:cover;

            border-radius:18px;

            box-shadow:0 12px 24px rgba(0,0,0,.12);

            transition:.25s;

        }

        .attachment-image:hover{

            transform:scale(1.015);

        }

        .attachment-document,
        .attachment-link,
        .attachment-video{

            padding:14px 18px;

            border-radius:16px;

            background:rgba(255,255,255,.05);

            backdrop-filter:blur(14px);

            border:1px solid rgba(255,255,255,.08);

        }

    /*==========================================================
        CONTRIBUTION ACTION BAR
    ==========================================================*/
        .contribution-actions{

            display:flex;

            align-items:center;

            justify-content:space-between;

            flex-wrap:wrap;

            gap:10px;

            margin-top:20px;

            padding-top:18px;

            border-top:1px solid rgba(255,255,255,.08);

        }

        .contribution-action-btn{

            display:inline-flex;

            align-items:center;

            gap:8px;

            padding:10px 16px;

            border:none;

            border-radius:999px;

            background:rgba(255,255,255,.05);

            backdrop-filter:blur(16px);

            transition:.25s;

            color:inherit;

        }

        .contribution-action-btn:hover{

            transform:translateY(-2px);

            box-shadow:0 10px 20px rgba(0,0,0,.12);

            background:rgba(13,110,253,.08);

        }

    /*==========================================================
            REPLY CONTEXT
        ==========================================================*/

        .reply-context{

        margin-bottom:18px;

        padding:18px;

        border-radius:18px;

        background:rgba(255,255,255,.04);

        border-left:4px solid var(--bs-primary);

        }

        .reply-topic{

        font-weight:700;

        margin-bottom:8px;

        }

        .reply-quote{

        font-style:italic;

        opacity:.8;

        line-height:1.7;

        }

        .reply-composer{

        display:flex;

        justify-content:space-between;

        align-items:center;

        margin-top:18px;

        gap:15px;

        flex-wrap:wrap;

        }

        .reply-tools{

        display:flex;

        gap:10px;

        flex-wrap:wrap;

        }

        .reply-tool{

        width:42px;

        height:42px;

        border:none;

        border-radius:50%;

        background:rgba(255,255,255,.06);

        backdrop-filter:blur(18px);

        transition:.25s;

        }

        .reply-tool:hover{

        transform:translateY(-2px);

        background:rgba(13,110,253,.10);

        }


        .contribution-children{

            margin-left:28px;

            padding-left:18px;

            border-left:2px solid rgba(13,110,253,.15);

        }



/* ============================================================
   QAMSA DISCUSSION ENGINE
   SECTION: CONTRIBUTION ACTION BAR
   ------------------------------------------------------------
   This styles the contribution-level actions separately from
   the main Content Details action dock.
   ============================================================ */

.contribution-actions {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(13, 110, 253, 0.08);
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0 0 18px 18px;
    position: relative;
    overflow: visible !important;
    z-index: 5;
}


/* ============================================================
   SECTION: CONTRIBUTION ACTION BUTTON
   ============================================================ */

.contribution-actions .action-btn {
    appearance: none;
    -webkit-appearance: none;

    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px 13px;

    border: 1px solid rgba(13, 110, 253, 0.12);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.58);

    color:
        var(--bs-body-color, #212529);

    font-size: 0.84rem;
    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    cursor: pointer;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.06);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}


.contribution-actions .action-btn:hover {
    transform:
        translateY(-2px);

    background:
        rgba(255, 255, 255, 0.86);

    border-color:
        rgba(13, 110, 253, 0.25);

    box-shadow:
        0 9px 24px
        rgba(15, 23, 42, 0.10);

    color:
        #0d6efd;
}


.contribution-actions .action-btn:active {
    transform:
        translateY(0);
}


.contribution-actions .action-btn:focus-visible {
    outline:
        3px solid
        rgba(13, 110, 253, 0.18);

    outline-offset:
        2px;
}


/* ============================================================
   SECTION: CONTRIBUTION ACTION ICONS
   ============================================================ */

.contribution-actions .action-btn i {
    font-size:
        0.95rem;

    line-height:
        1;

    flex:
        0 0 auto;
}


.contribution-actions .action-btn span {
    display:
        inline-flex;

    align-items:
        center;

    min-width:
        0;
}


/* ============================================================
   SECTION: ACTIVE REACTION
   ============================================================ */

.contribution-actions
.action-btn.active-like {
    color:
        #dc3545;

    border-color:
        rgba(220, 53, 69, 0.25);

    background:
        rgba(220, 53, 69, 0.07);
}


.contribution-actions
.action-btn.active-like:hover {
    color:
        #bb2d3b;

    background:
        rgba(220, 53, 69, 0.11);
}


/* ============================================================
   SECTION: REPLIES BUTTON
   ============================================================ */

.contribution-actions
.action-btn.action-replies {
    color:
        #0d6efd;
}


.contribution-actions
.action-btn.action-replies:hover {
    background:
        rgba(13, 110, 253, 0.08);
}


/* ============================================================
   SECTION: REPORT
   ============================================================ */

.contribution-actions
.action-btn[data-action="report"] {
    color:
        #6c757d;
}


.contribution-actions
.action-btn[data-action="report"]:hover {
    color:
        #dc3545;

    background:
        rgba(220, 53, 69, 0.06);
}


/* ============================================================
   SECTION: MORE MENU
   ============================================================ */

.contribution-actions .dropdown {
    position:
        relative;

    flex:
        0 0 auto;
}


.contribution-actions .dropdown .action-btn {
    width:
        42px;

    min-width:
        42px;

    padding:
        8px;
}


.contribution-actions
.dropdown-menu {
    z-index:
        1080;

    min-width:
        190px;

    padding:
        7px;

    margin:
        6px 0 0;

    border:
        1px solid
        rgba(13, 110, 253, 0.10);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 40px
        rgba(15, 23, 42, 0.14);
}


.contribution-actions
.dropdown-menu .dropdown-item {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        38px;

    padding:
        8px 10px;

    border-radius:
        9px;

    font-size:
        0.84rem;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.contribution-actions
.dropdown-menu .dropdown-item:hover {
    background:
        rgba(13, 110, 253, 0.08);

    color:
        #0d6efd;
}


/* ============================================================
   SECTION: DARK MODE
   ============================================================ */

[data-bs-theme="dark"]
.contribution-actions {
    background:
        rgba(15, 23, 42, 0.22);

    border-top-color:
        rgba(255, 255, 255, 0.07);
}


[data-bs-theme="dark"]
.contribution-actions
.action-btn {
    background:
        rgba(30, 41, 59, 0.52);

    border-color:
        rgba(148, 163, 184, 0.16);

    color:
        #e5e7eb;

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, 0.18);
}


[data-bs-theme="dark"]
.contribution-actions
.action-btn:hover {
    background:
        rgba(51, 65, 85, 0.72);

    border-color:
        rgba(96, 165, 250, 0.30);

    color:
        #60a5fa;
}


[data-bs-theme="dark"]
.contribution-actions
.dropdown-menu {
    background:
        rgba(22, 27, 38, 0.96);

    border-color:
        rgba(148, 163, 184, 0.15);
}


[data-bs-theme="dark"]
.contribution-actions
.dropdown-menu .dropdown-item {
    color:
        #e5e7eb;
}


[data-bs-theme="dark"]
.contribution-actions
.dropdown-menu .dropdown-item:hover {
    background:
        rgba(96, 165, 250, 0.10);

    color:
        #60a5fa;
}


/* ============================================================
   SECTION: MOBILE
   ============================================================ */

@media (max-width: 575.98px) {

    .contribution-actions {
        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            8px;

        padding:
            10px;
    }


    .contribution-actions .action-btn {
        width:
            100%;

        min-width:
            0;

        min-height:
            42px;

        padding:
            8px 9px;

        font-size:
            0.78rem;
    }


    .contribution-actions .dropdown {
        width:
            100%;
    }


    .contribution-actions
    .dropdown > .action-btn {
        width:
            100%;
    }


    .contribution-actions
    .dropdown-menu {
        max-width:
            calc(100vw - 30px);

        min-width:
            180px;
    }
}


/* ============================================================
   SECTION: TABLET
   ============================================================ */

@media (min-width: 576px) and (max-width: 991.98px) {

    .contribution-actions {
        gap:
            8px;
    }


    .contribution-actions .action-btn {
        flex:
            1 1 auto;
    }
}