#rjhw-discussion-app {
    color: #172033;
    font-family: Arial, Helvetica, sans-serif;
}

.rjhw-comment-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rjhw-comment {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid #E3D7BE;
    border-radius: 10px;
    background: #FFFDF8;
    box-shadow: 0 2px 7px rgba(6,20,61,.025);
}

.rjhw-comment.is-reply {
    background: #FFF9ED;
}

.rjhw-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
}

.rjhw-avatar-0 { background: #7797BA; }
.rjhw-avatar-1 { background: #B59A66; }
.rjhw-avatar-2 { background: #A169B5; }
.rjhw-avatar-3 { background: #53A9C8; }
.rjhw-avatar-4 { background: #C8679D; }

.rjhw-comment-content {
    min-width: 0;
}

.rjhw-comment-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 4px;
}

.rjhw-comment-author {
    color: #06143D;
    font-size: 13px;
    line-height: 1.3;
}

.rjhw-comment-time {
    color: #8A93A3;
    font-size: 11px;
    line-height: 1.3;
}

.rjhw-admin-delete {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #B42318;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.rjhw-comment-body {
    margin: 0 !important;
    color: #263550 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    white-space: pre-wrap;
}

.rjhw-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 7px;
}

.rjhw-reaction,
.rjhw-reply-button {
    min-height: 27px;
    border: 1px solid #E1E4EA;
    border-radius: 999px;
    background: #fff;
    color: #4B5563;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.rjhw-reaction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 7px;
}

.rjhw-reaction.is-active {
    border-color: #0DAEFD;
    background: #EEF8FF;
    color: #0933F2;
}

.rjhw-reply-button {
    padding: 4px 9px;
    color: #5E0BE4;
    font-weight: 800;
}

.rjhw-replies {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 2px solid #F1C5E3;
}

.rjhw-empty {
    padding: 16px;
    border: 1px dashed #D9CDAF;
    border-radius: 10px;
    background: #FFFDF8;
    color: #70798A;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
}

.rjhw-empty.is-error,
.rjhw-status.is-error {
    color: #B42318;
}

.rjhw-composer-shell {
    margin-top: 11px;
}

.rjhw-composer-teaser {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #D9DCE5;
    border-radius: 10px;
    background: #fff;
    color: #7A8190;
    cursor: text;
    text-align: left;
}

.rjhw-composer-person {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid #B7C6E8;
    border-radius: 50%;
    background: #EEF5FF;
    color: #0933F2;
    font-size: 16px;
}

.rjhw-composer-teaser-copy {
    font-size: 14px;
}

.rjhw-composer-shell.is-open {
    padding: 10px;
    border: 1px solid #E3D7BE;
    border-radius: 10px;
    background: #fff;
}

.rjhw-composer-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 112px;
    gap: 8px;
    align-items: stretch;
}

.rjhw-name-input,
.rjhw-composer-text {
    width: 100%;
    border: 1px solid #D6DAE4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #172033 !important;
    font: inherit !important;
    box-shadow: none !important;
}

.rjhw-name-input {
    min-height: 44px;
    padding: 9px 10px !important;
}

.rjhw-composer-text {
    min-height: 66px;
    padding: 9px 10px !important;
    resize: vertical;
}

.rjhw-post-button {
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    background: linear-gradient(
        90deg,
        #0933F2 0%,
        #0DAEFD 32%,
        #E50DA4 68%,
        #5E0BE4 100%
    );
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(94,11,228,.16);
}

.rjhw-post-button:disabled {
    opacity: .58;
    cursor: wait;
}

.rjhw-status {
    min-height: 17px;
    margin-top: 6px;
    color: #586276;
    font-size: 12px;
    font-weight: 700;
}

.rjhw-rules {
    margin-top: 3px;
    color: #8A93A3;
    font-size: 11px;
    text-align: right;
}

.rjhw-replying {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    background: #EEF8FF;
    color: #0933F2;
    font-size: 12px;
    font-weight: 800;
}

.rjhw-replying button {
    border: 0;
    background: transparent;
    color: #E50DA4;
    font-weight: 900;
    cursor: pointer;
}

@media(max-width:760px) {
    .rjhw-comment {
        grid-template-columns: 38px minmax(0,1fr);
        padding: 10px;
    }

    .rjhw-avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .rjhw-composer-row {
        grid-template-columns: 1fr;
    }

    .rjhw-post-button {
        min-height: 44px;
    }

    .rjhw-rules {
        text-align: left;
    }

    .rjhw-replies {
        margin-left: 4px;
    }
}