/* r599: naam, datum en bericht zoals snoeten_popup_windows_voorbeeld_v2.html.
   Dit bestand wordt zowel op prikbord.html als in de meldingpopup geladen. */

html body #container.dashboard-page-shell #overview-posts > .post > article,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts > .post > article {
    box-sizing: border-box !important;
    padding: 16px !important;
    border: 1px solid #cdd3ce !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
}

html body #container.dashboard-page-shell #overview-posts .post .header,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .header {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body #container.dashboard-page-shell #overview-posts .post .avatar-wrapper,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .avatar-wrapper {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden !important;
    border: 1px solid #b6bdb8 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14) !important;
    box-sizing: border-box !important;
}

html body #container.dashboard-page-shell #overview-posts .post .avatar-wrapper img.avatar,
html body #container.dashboard-page-shell #overview-posts .post .avatar-wrapper .avatar,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .avatar-wrapper img.avatar,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .avatar-wrapper .avatar {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 3px !important;
}

html body #container.dashboard-page-shell #overview-posts .post .meta,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .meta {
    min-width: 0 !important;
    display: block !important;
    padding-top: 2px !important;
}

html body #container.dashboard-page-shell #overview-posts .post .statuses-user-name,
html body #container.dashboard-page-shell #overview-posts .post .statuses-date,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .statuses-user-name,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .statuses-date {
    display: block !important;
}

html body #container.dashboard-page-shell #overview-posts .post .statuses-user-name,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .statuses-user-name {
    color: #557a3e !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

html body #container.dashboard-page-shell #overview-posts .post .statuses-user-name:hover,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .statuses-user-name:hover {
    text-decoration: underline !important;
}

html body #container.dashboard-page-shell #overview-posts .post .statuses-date,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .statuses-date {
    margin-top: 5px !important;
    color: #777 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
}

html body #container.dashboard-page-shell #overview-posts .post .status-post-actions,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .status-post-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-left: 0 !important;
}

html body #container.dashboard-page-shell #overview-posts .post > article > .message,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .message {
    width: auto !important;
    max-width: none !important;
    margin: 15px 0 0 66px !important;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

html body #container.dashboard-page-shell #overview-posts .post > article > .actions,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .actions {
    width: auto !important;
    max-width: none !important;
    margin: 16px 0 0 66px !important;
    padding-top: 12px !important;
    border-top: 1px solid #e0e4e1 !important;
}

/* Reacties krijgen dezelfde verticale naam-datum-opbouw en een rustig wit item
   binnen het grijze reactiesvlak. */
html body #container.dashboard-page-shell #overview-posts .status-comment,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border: 1px solid #e0e3e1 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    box-sizing: border-box !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:last-child,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:last-child {
    margin-bottom: 0 !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-avatar-link,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-avatar-link {
    width: 42px !important;
    height: 42px !important;
    padding: 2px !important;
    border: 1px solid #c9ceca !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-avatar,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-avatar {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 3px !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-body,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-body {
    min-width: 0 !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-header,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 0 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-name,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    color: #557a3e !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-name:hover,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-name:hover {
    text-decoration: underline !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-date,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-date {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: block !important;
    margin-top: 5px !important;
    color: #777 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-header .status-comment-actions,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-header .status-comment-actions {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    margin-left: 0 !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-message,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-message {
    margin: 15px 0 0 !important;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-options,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-options {
    margin-top: 12px !important;
}

@media (max-width: 620px) {
    html body #container.dashboard-page-shell #overview-posts > .post > article,
    html body .notification-detail-dialog #notification-detail-dashboard #overview-posts > .post > article {
        padding: 14px !important;
    }

    html body #container.dashboard-page-shell #overview-posts .post .header,
    html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .header {
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    html body #container.dashboard-page-shell #overview-posts .post .avatar-wrapper,
    html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .avatar-wrapper {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    html body #container.dashboard-page-shell #overview-posts .post > article > .message,
    html body #container.dashboard-page-shell #overview-posts .post > article > .actions,
    html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .message,
    html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .actions {
        margin-left: 0 !important;
    }

    html body #container.dashboard-page-shell #overview-posts .status-comment,
    html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    html body #container.dashboard-page-shell #overview-posts .status-comment-avatar-link,
    html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-avatar-link {
        width: 38px !important;
        height: 38px !important;
    }
}

/* De reactiesluiting rekent met de 16px interne padding van de witte kaart,
   zodat de grijze strook exact aansluit zonder horizontale overloop. */
html body #container.dashboard-page-shell #overview-posts .post > article > .status-comments,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .status-comments {
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
    margin: 14px -16px -16px !important;
    padding: 14px 16px 16px !important;
    box-sizing: border-box !important;
}

@media (max-width: 620px) {
    html body #container.dashboard-page-shell #overview-posts .post > article > .status-comments,
    html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .status-comments {
        width: calc(100% + 28px) !important;
        max-width: calc(100% + 28px) !important;
        margin: 14px -14px -14px !important;
        padding: 14px !important;
    }
}


/* r602: respect en Reacties verbergen exact dezelfde knophoogte. */
html body #container.dashboard-page-shell #overview-posts .post > article > .actions,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
html body #container.dashboard-page-shell #overview-posts .post > article > .actions > .heart-btn,
html body #container.dashboard-page-shell #overview-posts .post > article > .actions > .comments-btn,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .actions > .heart-btn,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .actions > .comments-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: 36px !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* De nieuwere metadataregels mogen de profielfoto niet opnieuw vierkant maken. */
html body #container.dashboard-page-shell #overview-posts .post .avatar-wrapper,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .avatar-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
html body #container.dashboard-page-shell #overview-posts .post .avatar-wrapper img.avatar,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post .avatar-wrapper img.avatar {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 78px !important;
    object-fit: contain !important;
}


/* r603: geen scheidingslijn tussen berichttekst en de actieknoppen. */
html body #container.dashboard-page-shell #overview-posts .post > article > .actions,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .actions {
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* De driepuntknop gebruikt daadwerkelijk de algemene Snoeten .button-opmaak. */
html body #container.dashboard-page-shell #overview-posts .status-action-toggle.button,
html body #container.dashboard-page-shell #overview-posts .status-comment-action-toggle.button,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-action-toggle.button,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-action-toggle.button {
    width: 36px !important;
    min-width: 36px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid #707070 !important;
    border-radius: 3px !important;
    background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
    color: #000 !important;
    box-shadow: none !important;
    line-height: 1.6 !important;
}

html body #container.dashboard-page-shell #overview-posts .status-action-toggle.button:hover,
html body #container.dashboard-page-shell #overview-posts .status-action-toggle.button:focus,
html body #container.dashboard-page-shell #overview-posts .status-comment-action-toggle.button:hover,
html body #container.dashboard-page-shell #overview-posts .status-comment-action-toggle.button:focus,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-action-toggle.button:hover,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-action-toggle.button:focus,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-action-toggle.button:hover,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-action-toggle.button:focus {
    border-color: #3c7fb1 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    box-shadow: 0 0 3px #a7d9f5 !important;
    color: #000 !important;
}

/* Een leeg respectaantal neemt geen ruimte of flex-gap in. */
html body #container.dashboard-page-shell #overview-posts .like-count:empty,
html body #container.dashboard-page-shell #overview-posts .comment-respect span:last-child:empty,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .like-count:empty,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .comment-respect span:last-child:empty {
    display: none !important;
}


/* =========================================================
   r604 — Reacties als nette losse witte platen zonder scheidingslijnen,
   met subtiele doorlopende vorm linksonder en rechtsboven.
   ========================================================= */
html body #container.dashboard-page-shell #overview-posts .post > article > .status-comments,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .status-comments {
    background: #f3f3f1 !important;
    border-radius: 0 0 12px 12px !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment {
    position: relative !important;
    overflow: visible !important;
    gap: 12px !important;
    margin: 0 0 5px !important;
    padding: 12px 14px 13px !important;
    border: 1px solid #e5e7e4 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:last-child,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:last-child {
    margin-bottom: 5px !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment::before,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment::before {
    content: "";
    position: absolute !important;
    top: -6px !important;
    right: 18px !important;
    width: 26px !important;
    height: 12px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e7e4 !important;
    border-right: 1px solid #e5e7e4 !important;
    border-radius: 0 12px 0 0 !important;
    box-sizing: border-box !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment::after,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment::after {
    content: "";
    position: absolute !important;
    left: 18px !important;
    bottom: -6px !important;
    width: 28px !important;
    height: 12px !important;
    background: #ffffff !important;
    border-left: 1px solid #e5e7e4 !important;
    border-bottom: 1px solid #e5e7e4 !important;
    border-radius: 0 0 0 12px !important;
    box-sizing: border-box !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:first-child::before,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:first-child::before {
    display: none !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:last-child::after,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:last-child::after {
    display: none !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-avatar-link,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-avatar-link {
    border-radius: 999px !important;
    border: 1px solid #d6dad7 !important;
    box-shadow: none !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-avatar,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-avatar {
    border-radius: 999px !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-message,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-message {
    margin: 13px 0 0 !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-options,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-options {
    margin-top: 10px !important;
}


/* =========================================================
   r605 — Reacties als losse witte platen op grijze achtergrond
   met kleine ronde uitsteeksels: linksonder en rechtsboven.
   ========================================================= */
html body #container.dashboard-page-shell #overview-posts .post > article > .status-comments,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .status-comments {
    background: #f1f1ee !important;
    border-radius: 0 0 12px 12px !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment {
    position: relative !important;
    overflow: visible !important;
    gap: 12px !important;
    margin: 0 0 5px !important;
    padding: 12px 14px 13px !important;
    border: 1px solid #e2e4e0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:last-child,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:last-child {
    margin-bottom: 5px !important;
}

/* Klein afgerond uitsteeksel linksonder. */
html body #container.dashboard-page-shell #overview-posts .status-comment::after,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment::after {
    content: "";
    position: absolute !important;
    left: 18px !important;
    bottom: -8px !important;
    width: 22px !important;
    height: 14px !important;
    background: #ffffff !important;
    border-left: 1px solid #e2e4e0 !important;
    border-right: 1px solid #e2e4e0 !important;
    border-bottom: 1px solid #e2e4e0 !important;
    border-radius: 0 0 12px 12px !important;
    box-sizing: border-box !important;
}

/* Bij de volgende kaart het tegengestelde ronde uitsteeksel rechtsboven. */
html body #container.dashboard-page-shell #overview-posts .status-comment::before,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment::before {
    content: "";
    position: absolute !important;
    right: 18px !important;
    top: -8px !important;
    width: 22px !important;
    height: 14px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e4e0 !important;
    border-left: 1px solid #e2e4e0 !important;
    border-right: 1px solid #e2e4e0 !important;
    border-radius: 12px 12px 0 0 !important;
    box-sizing: border-box !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:first-child::before,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:first-child::before {
    display: none !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:last-child::after,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:last-child::after {
    display: none !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-avatar-link,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-avatar-link {
    border-radius: 999px !important;
    border: 1px solid #d6dad7 !important;
    box-shadow: none !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-avatar,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-avatar {
    border-radius: 999px !important;
}


/* =========================================================
   r606 — Reacties als echt losse witte platen op grijze ondergrond,
   met subtiele ronde nok linksonder en ronde nok rechtsboven.
   ========================================================= */
html body #container.dashboard-page-shell #overview-posts .post > article > .status-comments,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .post > article > .status-comments {
    background: #efefeb !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    padding: 10px 14px 12px !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment {
    position: relative !important;
    overflow: visible !important;
    margin: 0 0 5px !important;
    padding: 12px 14px 13px !important;
    background: #fff !important;
    border: 1px solid #dde1dd !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:last-child,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:last-child {
    margin-bottom: 0 !important;
}

/* klein rond nokje rechtsboven (vanaf reactie 2) */
html body #container.dashboard-page-shell #overview-posts .status-comment::before,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment::before {
    content: "";
    position: absolute !important;
    top: -9px !important;
    right: 22px !important;
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border: 1px solid #dde1dd !important;
    border-bottom: none !important;
    border-radius: 999px !important;
    clip-path: inset(0 0 9px 0) !important;
    box-sizing: border-box !important;
}

/* klein rond nokje linksonder (tot en met voorlaatste reactie) */
html body #container.dashboard-page-shell #overview-posts .status-comment::after,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment::after {
    content: "";
    position: absolute !important;
    left: 22px !important;
    bottom: -9px !important;
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border: 1px solid #dde1dd !important;
    border-top: none !important;
    border-radius: 999px !important;
    clip-path: inset(9px 0 0 0) !important;
    box-sizing: border-box !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment:first-child::before,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:first-child::before {
    display: none !important;
}
html body #container.dashboard-page-shell #overview-posts .status-comment:last-child::after,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment:last-child::after {
    display: none !important;
}

/* Verwijder de eerdere meer 'haak'-achtige vormen door alles met hogere specificiteit te overschrijven */
html body #container.dashboard-page-shell #overview-posts .status-comment-avatar-link,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-avatar-link {
    border-radius: 999px !important;
}


/* =========================================================
   r1207 — reactieplaat met betere schaduw; formulier zonder extra witte achterplaat.
   WYSIWYG-tools gebruiken de gewone Snoeten .button-uitstraling.
   ========================================================= */
html body #container.dashboard-page-shell #overview-posts .status-comment,
html body #container.dashboard-page-shell #overview-posts .status-comment.status-comment-social,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment.status-comment-social {
    border-color: #d8ddda !important;
    box-shadow: 0 3px 9px rgba(31, 43, 58, .14), 0 1px 2px rgba(0, 0, 0, .07) !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-composer-body,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-composer-body {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* r1207: geen extra witte plaat om het formulier. De schaduw hoort alleen
   bij het daadwerkelijke invoerveld, net zoals bij de reactieplaat. */
html body #container.dashboard-page-shell #overview-posts .status-comments.status-comments-facebook .status-comment-editor,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comments.status-comments-facebook .status-comment-editor {
    box-shadow: 0 3px 9px rgba(31, 43, 58, .14), 0 1px 2px rgba(0, 0, 0, .07) !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comments.status-comments-facebook .status-comment-editor:focus,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comments.status-comments-facebook .status-comment-editor:focus {
    box-shadow: 0 3px 9px rgba(31, 43, 58, .14), 0 0 0 2px rgba(75, 114, 170, .10) !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-toolbar > button.button,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-toolbar > button.button {
    width: 34px !important;
    height: 30px !important;
    min-width: 34px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #707070 !important;
    border-radius: 3px !important;
    background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
    color: #000 !important;
    box-shadow: none !important;
    font-family: var(--base-font) !important;
    font-size: var(--base-font-size) !important;
    line-height: 1 !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-toolbar > button.button:hover,
html body #container.dashboard-page-shell #overview-posts .status-comment-toolbar > button.button:focus-visible,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-toolbar > button.button:hover,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-toolbar > button.button:focus-visible {
    border-color: #3c7fb1 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    box-shadow: 0 0 3px #a7d9f5 !important;
    outline: none !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-submit-row,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-submit-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 13px 0 2px !important;
    padding-top: 2px !important;
}

html body #container.dashboard-page-shell #overview-posts .status-comment-submit-row .button,
html body .notification-detail-dialog #notification-detail-dashboard #overview-posts .status-comment-submit-row .button {
    margin: 0 !important;
}