/* SunucuRadar - comments.css
   Yorumlar sekmesi premium gaming UI.
   Sadece görsel katmandır; Python mantığına dokunmaz.
*/

/* =========================
   YORUMLAR ANA PANEL
========================= */

#yorumlar.server-detail-panel {
    position: relative !important;
    padding: 24px !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(34, 197, 94, .13), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(59, 130, 246, .10), transparent 28%),
        linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(2, 6, 23, .72)) !important;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

#yorumlar.server-detail-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
    opacity: .18 !important;
}

#yorumlar.server-detail-panel > * {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================
   ÜST ÖZET KARTLARI
========================= */

.comment-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 18px 0 20px !important;
}

.comment-summary-card {
    position: relative !important;
    min-height: 92px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    padding: 17px 18px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 197, 94, .12), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(2, 6, 23, .58)) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16) !important;
}

.comment-summary-card::after {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(34,197,94,.75), transparent) !important;
}

.comment-summary-card span {
    display: block !important;
    margin-bottom: 10px !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
}

.comment-summary-card strong {
    display: block !important;
    color: #dcfce7 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    text-shadow: 0 0 24px rgba(34, 197, 94, .22) !important;
}

/* =========================
   YORUM YAZMA KUTUSU
========================= */

.comment-compose {
    margin: 0 0 20px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .11), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(2, 6, 23, .58)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .16) !important;
}

.comment-compose label {
    display: block !important;
    margin-bottom: 10px !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
}

.comment-compose textarea,
.thread-reply-box textarea {
    width: 100% !important;
    min-height: 108px !important;
    resize: vertical !important;
    border-radius: 18px !important;
    padding: 14px 15px !important;
    color: #e5e7eb !important;
    background: rgba(2, 6, 23, .72) !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.comment-compose textarea:focus,
.thread-reply-box textarea:focus {
    border-color: rgba(34, 197, 94, .58) !important;
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, .10),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.comment-compose button,
.thread-reply-box button {
    border: 0 !important;
    border-radius: 14px !important;
    padding: 11px 16px !important;
    color: #03140a !important;
    background: linear-gradient(135deg, #86efac, #22c55e) !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 26px rgba(34, 197, 94, .20) !important;
}

/* =========================
   LİSTE / SAYFALAMA
========================= */

.comment-thread-list,
.conversation-list {
    display: grid !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

.comment-pagination,
.message-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 14px 0 !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(15, 23, 42, .44) !important;
}

.message-pagination {
    margin: 14px 0 0 64px !important;
}

.comment-pagination span,
.message-pagination span {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.comment-page-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.comment-page-link {
    min-width: 34px !important;
    height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(2, 6, 23, .42) !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.comment-page-link:hover,
.comment-page-link.active {
    color: #052e16 !important;
    border-color: rgba(134, 239, 172, .72) !important;
    background: linear-gradient(135deg, #86efac, #22c55e) !important;
}

/* =========================
   KONUŞMA KARTI
========================= */

.comment-thread,
.conversation-thread {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    padding: 0 !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(148, 163, 184, .10), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .88), rgba(2, 6, 23, .62)) !important;
    box-shadow:
        0 22px 58px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.conversation-thread.answered {
    border-color: rgba(34, 197, 94, .34) !important;
}

.conversation-thread.pending {
    border-color: rgba(251, 146, 60, .40) !important;
}

/* details oku gizle */
.conversation-thread summary::-webkit-details-marker,
.thread-reply-box summary::-webkit-details-marker {
    display: none !important;
}

.conversation-summary {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 54px 1fr auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 84px !important;
    padding: 18px 20px !important;
    cursor: pointer !important;
    list-style: none !important;
    user-select: none !important;
}

.conversation-summary:hover {
    background: rgba(255, 255, 255, .025) !important;
}

.conversation-summary::after {
    content: "Aç" !important;
    position: absolute !important;
    right: 20px !important;
    bottom: 12px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.conversation-thread[open] .conversation-summary::after {
    content: "Kapat" !important;
}

.thread-avatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    color: #03210d !important;
    font-size: 16px !important;
    font-weight: 1000 !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 22%),
        linear-gradient(135deg, #86efac, #14b8a6) !important;
    border: 1px solid rgba(134, 239, 172, .48) !important;
    box-shadow:
        0 12px 30px rgba(34, 197, 94, .16),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.conversation-summary-main {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
}

.conversation-summary-main strong {
    color: #f8fafc !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 1000 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.conversation-summary-main small {
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

/* Durum rozeti */
.comment-status {
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-right: 54px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.comment-status::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: 0 0 16px currentColor !important;
}

.comment-status.answered {
    color: #86efac !important;
    background: rgba(34, 197, 94, .12) !important;
    border: 1px solid rgba(34, 197, 94, .34) !important;
}

.comment-status.pending {
    color: #fdba74 !important;
    background: rgba(251, 146, 60, .12) !important;
    border: 1px solid rgba(251, 146, 60, .34) !important;
}

/* =========================
   MESAJLAR
========================= */

.thread-replies,
.conversation-messages {
    margin: 0 20px 0 20px !important;
    padding: 16px 0 18px 64px !important;
    display: grid !important;
    gap: 12px !important;
    border-left: 2px solid rgba(148, 163, 184, .16) !important;
}

.conversation-thread:not([open]) .conversation-messages,
.conversation-thread:not([open]) .message-pagination,
.conversation-thread:not([open]) .thread-actions {
    display: none !important;
}

.thread-message {
    position: relative !important;
    max-width: 86% !important;
    padding: 14px 15px !important;
    border-radius: 18px !important;
    color: #dbeafe !important;
    line-height: 1.58 !important;
    font-size: 14px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .62) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14) !important;
    overflow-wrap: anywhere !important;
}

.thread-message::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    width: 10px !important;
    height: 10px !important;
    transform: rotate(45deg) !important;
    background: inherit !important;
    border: inherit !important;
    z-index: -1 !important;
}

.thread-message.user-follow,
.thread-message.conversation-parent-message {
    justify-self: start !important;
    border-color: rgba(59, 130, 246, .28) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .12), transparent 32%),
        rgba(30, 41, 59, .66) !important;
}

.thread-message.user-follow::before,
.thread-message.conversation-parent-message::before {
    left: -5px !important;
}

.thread-message.owner {
    justify-self: end !important;
    border-color: rgba(34, 197, 94, .42) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 197, 94, .16), transparent 34%),
        linear-gradient(135deg, rgba(22, 101, 52, .52), rgba(2, 6, 23, .46)) !important;
    box-shadow:
        0 14px 34px rgba(34, 197, 94, .08),
        0 12px 30px rgba(0, 0, 0, .16) !important;
}

.thread-message.owner::before {
    right: -5px !important;
}

.thread-message-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

.thread-message-head strong {
    color: #e0f2fe !important;
    font-weight: 1000 !important;
}

.thread-message.owner .thread-message-head strong {
    color: #bbf7d0 !important;
}

.thread-message-head span {
    color: #64748b !important;
    white-space: nowrap !important;
}

/* Bildirimle gidilen yorum vurgusu */
.thread-message:target {
    border-color: rgba(250, 204, 21, .75) !important;
    box-shadow:
        0 0 0 4px rgba(250, 204, 21, .12),
        0 18px 44px rgba(250, 204, 21, .10) !important;
}

/* =========================
   YANITLA ALANI
========================= */

.thread-actions {
    margin: 0 20px 20px 84px !important;
}

.thread-reply-box {
    border-radius: 18px !important;
}

.thread-reply-box summary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    width: fit-content !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    list-style: none !important;
    color: #dbeafe !important;
    background: rgba(59, 130, 246, .10) !important;
    border: 1px solid rgba(59, 130, 246, .24) !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.thread-reply-box summary::before {
    content: "↩" !important;
    color: #86efac !important;
}

.thread-reply-box[open] summary {
    color: #052e16 !important;
    background: linear-gradient(135deg, #bbf7d0, #22c55e) !important;
    border-color: rgba(134, 239, 172, .66) !important;
}

.thread-reply-box[open] summary::before {
    color: #052e16 !important;
}

.thread-reply-box form {
    margin-top: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(2, 6, 23, .38) !important;
}

.thread-reply-box .actions {
    margin-top: 10px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* =========================
   ESKİ TEKİL YORUM SINIFLARI
   Eski HTML kalırsa da bozulmasın.
========================= */

.thread-head {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 18px 20px 0 !important;
}

.thread-user strong {
    display: block !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 1000 !important;
}

.thread-user span {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.thread-body {
    margin: 12px 20px 0 84px !important;
    color: #e2e8f0 !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}

/* =========================
   BOŞ DURUM
========================= */

.empty {
    border-radius: 20px !important;
    padding: 22px !important;
    color: #cbd5e1 !important;
    border: 1px dashed rgba(148, 163, 184, .26) !important;
    background: rgba(15, 23, 42, .44) !important;
    text-align: center !important;
    font-weight: 800 !important;
}

/* =========================
   MOBİL
========================= */

@media (max-width: 900px) {
    #yorumlar.server-detail-panel {
        padding: 16px !important;
        border-radius: 20px !important;
    }

    .comment-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .conversation-summary {
        grid-template-columns: 48px 1fr !important;
        align-items: start !important;
        padding: 16px !important;
    }

    .thread-avatar {
        width: 48px !important;
        height: 48px !important;
        border-radius: 16px !important;
    }

    .comment-status {
        grid-column: 2 !important;
        justify-self: start !important;
        margin-right: 0 !important;
        margin-top: 8px !important;
    }

    .conversation-summary::after {
        right: 16px !important;
        bottom: 14px !important;
    }

    .thread-replies,
    .conversation-messages {
        margin: 0 14px !important;
        padding: 14px 0 !important;
        border-left: 0 !important;
    }

    .thread-message {
        max-width: 100% !important;
    }

    .thread-message::before {
        display: none !important;
    }

    .thread-actions,
    .message-pagination {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    .comment-pagination,
    .message-pagination {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .thread-body {
        margin-left: 20px !important;
    }
}

@media (max-width: 560px) {
    .comment-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .conversation-summary-main strong {
        white-space: normal !important;
    }

    .thread-message-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* =========================================================
   PREMIUM COMMENTS V2 - Referans yorum sayfasına yaklaşım
   comments_ui.py HTML sınıfları için görsel katman
========================================================= */

.comment-insights {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) 260px !important;
    gap: 14px !important;
    margin: 16px 0 14px !important;
}

.comment-score-card,
.comment-distribution-card,
.comment-sentiment-card {
    border-radius: 20px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 197, 94, .10), transparent 34%),
        rgba(15, 23, 42, .58) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16) !important;
}

.comment-score-card {
    min-height: 132px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 8px !important;
    padding: 18px !important;
    text-align: center !important;
}

.comment-score-label {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.comment-score-card strong {
    color: #f8fafc !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: -1px !important;
}

.comment-stars {
    display: flex !important;
    gap: 4px !important;
    color: #86efac !important;
    font-size: 16px !important;
    text-shadow: 0 0 14px rgba(34, 197, 94, .25) !important;
}

.comment-score-card small {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.comment-distribution-card {
    display: grid !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 18px !important;
}

.comment-dist-row {
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 10px !important;
}

.comment-dist-row span,
.comment-dist-row strong {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.comment-dist-row div {
    height: 10px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(51, 65, 85, .62) !important;
}

.comment-dist-row i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #86efac, #22c55e) !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, .24) !important;
}

.comment-sentiment-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px !important;
}

.comment-sentiment-icon {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    color: #052e16 !important;
    font-size: 34px !important;
    font-weight: 1000 !important;
    background: linear-gradient(135deg, #bbf7d0, #22c55e) !important;
    box-shadow: 0 0 28px rgba(34,197,94,.20) !important;
}

.comment-sentiment-card span {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.comment-sentiment-card strong {
    display: block !important;
    margin: 3px 0 !important;
    color: #86efac !important;
    font-size: 18px !important;
    font-weight: 1000 !important;
}

.comment-sentiment-card p {
    margin: 0 !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.comment-metric-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .44) !important;
}

.comment-metric-strip > div {
    padding: 16px !important;
    border-right: 1px solid rgba(148, 163, 184, .12) !important;
}

.comment-metric-strip > div:last-child {
    border-right: 0 !important;
}

.comment-metric-strip span,
.comment-metric-strip small {
    display: block !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.comment-metric-strip strong {
    display: block !important;
    margin: 4px 0 !important;
    color: #86efac !important;
    font-size: 20px !important;
    font-weight: 1000 !important;
}

.comment-compose {
    margin: 14px 0 16px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .10), transparent 35%),
        rgba(15, 23, 42, .52) !important;
}

.comment-compose textarea {
    min-height: 82px !important;
}

.premium-comment-list {
    gap: 12px !important;
}

.premium-comment-card {
    border-radius: 18px !important;
    border-color: rgba(148, 163, 184, .18) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .08), transparent 34%),
        rgba(15, 23, 42, .52) !important;
}

.premium-comment-card.pending {
    border-color: rgba(248, 113, 113, .34) !important;
}

.premium-comment-card.answered {
    border-color: rgba(34, 197, 94, .34) !important;
}

.premium-conversation-summary {
    min-height: 72px !important;
    padding: 14px 16px !important;
}

.conversation-summary::after,
.conversation-thread[open] .conversation-summary::after {
    display: none !important;
    content: "" !important;
}

.thread-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
}

.conversation-summary-main strong {
    font-size: 14px !important;
}

.conversation-summary-main small {
    font-size: 11px !important;
}

.comment-status {
    margin-right: 0 !important;
    padding: 8px 12px !important;
}

.premium-message-list {
    padding-left: 52px !important;
}

.premium-message {
    max-width: 86% !important;
    border-radius: 16px !important;
}

.premium-message.owner {
    border-color: rgba(34, 197, 94, .46) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 197, 94, .16), transparent 36%),
        rgba(22, 101, 52, .32) !important;
}

.premium-message .thread-message-head em {
    display: inline-flex !important;
    margin-left: 7px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    color: #052e16 !important;
    background: #86efac !important;
    font-style: normal !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
}

.premium-message-body {
    color: #e2e8f0 !important;
}

.premium-reply-box summary {
    border-color: rgba(34,197,94,.28) !important;
}

.premium-empty {
    margin-top: 14px !important;
}

@media (max-width: 1120px) {
    .comment-insights {
        grid-template-columns: 1fr 1fr !important;
    }

    .comment-sentiment-card {
        grid-column: 1 / -1 !important;
    }

    .comment-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .comment-insights {
        grid-template-columns: 1fr !important;
    }

    .comment-metric-strip {
        grid-template-columns: 1fr !important;
    }

    .comment-metric-strip > div {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    }

    .comment-dist-row {
        grid-template-columns: 80px minmax(0, 1fr) 34px !important;
    }

    .premium-message-list {
        padding-left: 0 !important;
    }
}

/* =========================================================
   CONVERSATION PREVIEW
   Kapalı konuşma kartında son mesaj önizlemesi
========================================================= */

.conversation-preview {
    display: block !important;
    margin-top: 8px !important;
    max-width: 100% !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    background: rgba(2, 6, 23, .26) !important;
}

.conversation-preview b {
    color: #93c5fd !important;
    font-weight: 1000 !important;
}

.conversation-preview.owner-preview {
    color: #dcfce7 !important;
    border-color: rgba(34, 197, 94, .22) !important;
    background: rgba(34, 197, 94, .08) !important;
}

.conversation-preview.owner-preview b {
    color: #86efac !important;
}

.conversation-thread[open] .conversation-preview {
    display: none !important;
}

.premium-conversation-summary {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
}

@media (max-width: 760px) {
    .conversation-preview {
        white-space: normal !important;
    }

    .premium-conversation-summary {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }
}

/* =========================================================
   MESSAGE PAGE ORDER + REPLY BUTTON FIX
   Açık konuşma altında cevap butonunu temiz hizalar.
========================================================= */

.thread-actions {
    margin: 12px 20px 18px 20px !important;
    padding-left: 52px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.thread-reply-box {
    width: auto !important;
    max-width: 100% !important;
}

.thread-reply-box summary {
    min-width: 132px !important;
    justify-content: center !important;
    box-shadow: 0 12px 28px rgba(34, 197, 94, .10) !important;
}

.thread-reply-box[open] {
    width: 100% !important;
}

.thread-reply-box[open] summary {
    margin-left: auto !important;
}

.thread-reply-box form {
    width: 100% !important;
    margin-top: 12px !important;
}

.message-pagination {
    margin: 14px 20px 0 72px !important;
}

.premium-pagination {
    min-height: 48px !important;
}

@media (max-width: 760px) {
    .thread-actions {
        margin: 12px 14px 18px 14px !important;
        padding-left: 0 !important;
        justify-content: stretch !important;
    }

    .thread-reply-box,
    .thread-reply-box summary {
        width: 100% !important;
    }

    .message-pagination {
        margin: 14px 14px 0 14px !important;
    }
}