/* Social feed, friendships, messages and notifications — mobile first. */
.social-page-shell {
    display: grid;
    padding-block: clamp(1.5rem, 4vw, 3.5rem);
    gap: 1.25rem;
}

.social-page-header,
.member-profile-card {
    display: grid;
    align-items: center;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    gap: 1rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.social-page-header h1,
.member-profile-card h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 3.5rem);
    line-height: 1.05;
}

.social-page-header p,
.member-profile-card p {
    margin-block-end: 0;
    color: var(--text-secondary);
}

.social-feed {
    display: grid;
    gap: 1rem;
}

.social-feed-layout {
    display: grid;
    align-items: start;
    gap: 1.25rem;
}

.social-feed-intro {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 5vw, 2.25rem);
    border: 0.0625rem solid color-mix(in srgb, var(--action-primary) 26%, var(--border-default));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--action-primary) 16%, transparent), transparent 40%),
        var(--surface-card);
}

.social-feed-intro h1 {
    max-inline-size: 16ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.social-feed-intro__lead {
    max-inline-size: 62ch;
    color: var(--text-secondary);
    font-size: var(--text-lg);
}

.social-feed-intro__actions,
.social-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.social-quick-links {
    margin-block-start: 1rem;
}

.social-quick-link {
    display: inline-flex;
    min-block-size: 2.65rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 800;
    text-decoration: none;
}

.social-quick-link:hover {
    border-color: var(--action-primary);
    color: var(--action-primary);
}

.social-post-card,
.social-panel,
.social-discussion {
    overflow: hidden;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: 0 0.45rem 1.8rem rgb(31 21 36 / 5%);
}

.social-post-card__header {
    display: flex;
    align-items: flex-start;
    padding: 1rem 1rem 0.75rem;
    gap: 0.75rem;
}

.social-avatar {
    display: grid;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--action-primary) 16%, var(--surface-subtle));
    color: var(--action-primary);
    font-size: 1.1rem;
    font-weight: 900;
}

.social-avatar--small {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    font-size: 0.9rem;
}

.social-avatar--large {
    inline-size: 5rem;
    block-size: 5rem;
    font-size: 2rem;
}

.social-post-card__identity {
    min-inline-size: 0;
    flex: 1;
}

.social-post-card__identity-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.social-post-card__identity-line > a,
.social-post-card__identity-line > strong,
.comment-item__content header > a,
.friend-row a {
    color: var(--text-primary);
    font-weight: 900;
    text-decoration: none;
}

.social-post-card__identity-line > a:hover,
.comment-item__content header > a:hover,
.friend-row a:hover {
    color: var(--action-primary);
}

.social-post-card__identity > p {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.verified-mark {
    display: inline-grid;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    place-items: center;
    border-radius: 50%;
    background: var(--action-primary);
    color: var(--action-on-primary);
    font-size: 0.7rem;
    font-weight: 900;
}

.social-post-card__body {
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--text-secondary);
    white-space: pre-line;
}

.expandable-text {
    min-inline-size: 0;
}

.expandable-text.is-expandable:not(.is-expanded) [data-expandable-content] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.expandable-text--post.is-expandable:not(.is-expanded) [data-expandable-content] {
    -webkit-line-clamp: 7;
}

.expandable-text--comment.is-expandable:not(.is-expanded) [data-expandable-content] {
    -webkit-line-clamp: 4;
}

.expandable-text__toggle {
    color: var(--action-primary);
}

.expandable-text--post .social-post-card__body {
    padding-block-end: 0.35rem;
}

.expandable-text--post .expandable-text__toggle {
    margin: 0 1rem 0.8rem;
}

.expandable-text--comment .expandable-text__toggle {
    margin-block-start: 0.35rem;
}

.social-content-preview {
    display: block;
    margin: 0 1rem 1rem;
    padding: 1rem;
    border: 0.0625rem solid color-mix(in srgb, var(--action-primary) 24%, var(--border-default));
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--surface-subtle), var(--surface-card));
    color: var(--text-primary);
    text-decoration: none;
}

.social-content-preview:hover {
    border-color: var(--action-primary);
}

.social-content-preview__eyebrow {
    color: var(--action-primary);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html[dir='rtl'] .social-content-preview__eyebrow {
    letter-spacing: 0;
}

.social-content-preview h2 {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 5vw, 2rem);
    line-height: 1.15;
}

.social-content-preview p {
    margin: 0.6rem 0 0;
    color: var(--text-secondary);
}

.social-content-preview__meta {
    display: flex;
    margin: 0.85rem 0 0;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.social-content-preview__meta div {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-card);
    font-size: 0.75rem;
}

.social-content-preview__meta dt {
    color: var(--text-muted);
}

.social-content-preview__meta dd {
    margin: 0;
    font-weight: 800;
}

.shared-result {
    display: grid;
    margin: 0 1rem 1rem;
    padding: 1rem;
    gap: 0.2rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #1f9d67 12%, var(--surface-subtle));
}

.shared-result > span,
.shared-result > small {
    color: var(--text-secondary);
}

.shared-result > strong {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
}

.social-post-card__footer {
    border-block-start: 0.0625rem solid var(--border-default);
}

.social-post-card__metrics {
    display: flex;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.social-post-card__metrics a {
    color: inherit;
    text-decoration: none;
}

.social-post-card__actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block-start: 0.0625rem solid var(--border-default);
}

.social-post-card__actions form {
    min-inline-size: 0;
    margin: 0;
}

.social-action {
    display: inline-flex;
    inline-size: 100%;
    min-block-size: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.social-action span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-action:hover,
.social-action.is-active {
    background: var(--surface-subtle);
    color: var(--action-primary);
}

.social-action [data-social-toggle-icon] {
    fill: none;
    transition: fill 160ms ease, transform 160ms ease;
}

.social-action.is-active [data-social-toggle-icon] {
    fill: currentColor;
    transform: scale(1.06);
}

.friend-action,
.friend-action form {
    display: inline-flex;
    margin: 0;
}

.friend-action .social-action {
    inline-size: auto;
    min-block-size: 2.25rem;
    padding: 0.35rem 0.6rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 999px;
}

.friend-action--compact .social-action span {
    display: none;
}

.friend-action__response {
    display: inline-flex;
    gap: 0.3rem;
}

.social-chip,
.count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
    text-decoration: none;
}

.social-chip--success {
    background: color-mix(in srgb, #1f9d67 14%, var(--surface-subtle));
    color: #17764e;
}

html[data-theme='dark'] .social-chip--success {
    color: #86e6bd;
}

.social-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    gap: 1rem;
}

.social-section-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 5vw, 2rem);
}

.social-section-heading p {
    margin-block-end: 0;
    color: var(--text-secondary);
}

.social-discussion {
    padding-block-end: 1rem;
}

.social-comment-form,
.social-reply-form {
    display: grid;
    margin: 0 1rem 1rem;
    padding: 1rem;
    gap: 0.65rem;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.social-comment-form textarea,
.social-reply-form textarea,
.message-composer textarea {
    inline-size: 100%;
    resize: vertical;
}

.social-comment-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.social-comment-form__footer small {
    color: var(--text-muted);
}

.character-counter {
    display: flex;
    justify-content: flex-end;
    margin-block-start: -0.25rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.character-counter.is-near-limit {
    color: #a15c00;
}

.character-counter.is-at-limit {
    color: #b42318;
    font-weight: 850;
}

html[data-theme='dark'] .character-counter.is-near-limit {
    color: #ffc46b;
}

html[data-theme='dark'] .character-counter.is-at-limit {
    color: #ff9c95;
}

.social-login-prompt {
    margin: 0 1rem 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.comment-thread {
    display: grid;
    gap: 0.9rem;
    padding-inline: 1rem;
}

.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.comment-item__content {
    min-inline-size: 0;
    flex: 1;
}

.comment-item__content > header,
.comment-item__content > .comment-replies .comment-item__content > header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.comment-item__content header time {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.comment-item__content > .expandable-text {
    margin: 0.4rem 0;
}

.comment-item__content > .expandable-text > p {
    margin: 0;
    padding: 0.75rem;
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    background: var(--surface-subtle);
    white-space: pre-line;
}

html[dir='rtl'] .comment-item__content > .expandable-text > p {
    border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md);
}

.comment-item__actions,
.comment-item__actions form {
    display: flex;
    margin: 0;
    gap: 0.5rem;
}

.comment-item__actions {
    align-items: flex-start;
    flex-wrap: wrap;
}

.text-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

.text-action:hover {
    color: var(--action-primary);
}

.text-action--danger:hover {
    color: #b42318;
}

.comment-replies {
    display: grid;
    margin-block-start: 0.8rem;
    padding-inline-start: 0.75rem;
    gap: 0.8rem;
    border-inline-start: 0.15rem solid var(--border-default);
}

.social-back-nav a {
    color: var(--action-primary);
    font-weight: 800;
    text-decoration: none;
}

.member-profile-card {
    grid-template-columns: auto 1fr;
}

.member-profile-card > .friend-action {
    grid-column: 1 / -1;
}

.social-panel {
    padding: 1rem;
}

.social-panel > .social-section-heading {
    padding: 0 0 1rem;
}

.social-search-form,
.notification-filters,
.notification-preferences {
    display: grid;
    gap: 0.85rem;
}

.social-search-form > div {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.social-search-form input {
    min-inline-size: 0;
    flex: 1;
}

.friend-search-result,
.friend-row,
.followed-exams-list article {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    margin-block-start: 1rem;
    padding: 0.8rem;
    gap: 0.75rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.friend-search-result > .friend-action,
.friend-row__actions,
.followed-exams-list article > form {
    grid-column: 1 / -1;
}

.friend-row > div:nth-child(2),
.friend-search-result > div:nth-child(2) {
    display: grid;
    min-inline-size: 0;
}

.friend-row small,
.friend-search-result p,
.followed-exams-list small {
    color: var(--text-muted);
}

.friend-row__actions,
.friend-row__actions form {
    display: flex;
    margin: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.friend-list,
.conversation-list,
.notification-list,
.followed-exams-list {
    display: grid;
    gap: 0.65rem;
}

.conversation-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0.9rem;
    gap: 0.75rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    text-decoration: none;
}

.conversation-row:hover {
    border-color: var(--action-primary);
}

.conversation-row__content {
    min-inline-size: 0;
}

.conversation-row__content > div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.conversation-row__content time,
.conversation-row__content p {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.conversation-row__content p {
    overflow: hidden;
    margin: 0.25rem 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.count-badge {
    min-inline-size: 1.6rem;
    justify-content: center;
    background: var(--action-primary);
    color: var(--action-on-primary);
}

.message-page {
    min-block-size: calc(100dvh - 8rem);
    grid-template-rows: auto 1fr auto;
}

.message-page__header {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.7rem;
}

.message-page__header h1 {
    margin: 0;
    font-size: 1.2rem;
}

.message-page__header p {
    margin: 0.1rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.message-thread {
    display: flex;
    min-block-size: 22rem;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    gap: 0.65rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}

.message-bubble {
    align-self: flex-start;
    max-inline-size: min(85%, 38rem);
    padding: 0.75rem 0.9rem;
    border-radius: 0.2rem 1rem 1rem 1rem;
    background: var(--surface-card);
    box-shadow: 0 0.2rem 0.8rem rgb(31 21 36 / 7%);
}

.message-bubble--mine {
    align-self: flex-end;
    border-radius: 1rem 0.2rem 1rem 1rem;
    background: color-mix(in srgb, var(--action-primary) 15%, var(--surface-card));
}

html[dir='rtl'] .message-bubble {
    border-radius: 1rem 0.2rem 1rem 1rem;
}

html[dir='rtl'] .message-bubble--mine {
    border-radius: 0.2rem 1rem 1rem 1rem;
}

.message-bubble p {
    margin: 0;
    white-space: pre-line;
}

.message-bubble footer {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 0.3rem;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.message-shared-card {
    display: grid;
    margin-block-start: 0.5rem;
    padding: 0.65rem;
    gap: 0.15rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.65rem;
    background: var(--surface-subtle);
    color: var(--text-primary);
    text-decoration: none;
}

.message-shared-card span,
.message-shared-card small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.message-composer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.5rem;
}

.message-composer .button {
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
}

.notification-filters label {
    display: grid;
    gap: 0.35rem;
}

.bulk-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notification-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    padding: 0.8rem;
    gap: 0.65rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-md);
}

.notification-row--unread {
    border-color: color-mix(in srgb, var(--action-primary) 45%, var(--border-default));
    background: color-mix(in srgb, var(--action-primary) 6%, var(--surface-card));
}

.notification-row__icon {
    display: grid;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-subtle);
    color: var(--action-primary);
}

.notification-row__content {
    display: grid;
    min-inline-size: 0;
}

.notification-row__content a {
    display: grid;
    color: var(--text-primary);
    text-decoration: none;
}

.notification-row__content span,
.notification-row__content small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.notification-preferences .choice-row {
    margin: 0;
}

.followed-exams-list article > div {
    display: grid;
}

.header-social-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.header-counter {
    position: relative;
}

.header-counter__badge {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    display: grid;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: 0.2rem;
    place-items: center;
    border: 0.12rem solid var(--surface-card);
    border-radius: 999px;
    background: #c82c58;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 900;
}

.share-panel,
.follow-panel {
    display: grid;
    margin-block-start: 1rem;
    padding: 1rem;
    gap: 0.75rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.share-panel textarea,
.share-panel select {
    inline-size: 100%;
}

.share-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@media (min-width: 48rem) {
    .social-page-header {
        grid-template-columns: 1fr auto;
    }

    .member-profile-card {
        grid-template-columns: auto 1fr auto;
    }

    .member-profile-card > .friend-action {
        grid-column: auto;
    }

    .friend-search-result,
    .friend-row,
    .followed-exams-list article {
        grid-template-columns: auto 1fr auto;
    }

    .friend-search-result > .friend-action,
    .friend-row__actions,
    .followed-exams-list article > form {
        grid-column: auto;
    }

    .notification-filters {
        grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) minmax(9rem, 1fr) auto;
        align-items: end;
    }
}

@media (min-width: 64rem) {
    .social-feed-layout {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.48fr);
    }

    .social-feed-sidebar {
        position: sticky;
        inset-block-start: 6rem;
        order: 2;
    }

    .social-feed-main {
        min-inline-size: 0;
    }

    .social-post-card__header,
    .social-post-card__body,
    .social-content-preview,
    .shared-result {
        margin-inline: 1.25rem;
    }

    .social-post-card__header {
        padding-inline: 0;
    }

    .social-post-card__body {
        padding-inline: 0;
    }
}

/* Social UX V3 — notifications, recent conversations and messenger workspace. */
.notification-list-heading > div:first-child {
    display: grid;
    gap: 0.65rem;
}

.notification-select-all {
    display: inline-flex;
    align-items: center;
    inline-size: fit-content;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
}

.notification-select-all input,
.notification-row > input[type='checkbox'] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    accent-color: var(--action-primary);
    cursor: pointer;
}

.notification-selection-error {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 0.0625rem solid color-mix(in srgb, #b42318 45%, var(--border-default));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #b42318 8%, var(--surface-card));
    color: #9f1c13;
    font-weight: 800;
}

html[data-theme='dark'] .notification-selection-error {
    color: #ffb4ab;
}

.home-community-panel {
    display: grid;
    gap: 0.9rem;
}

.home-community-panel__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.home-community-panel__heading h2 {
    margin: 0.2rem 0 0;
    font-family: var(--font-display);
    font-size: 1.45rem;
}

.home-community-panel__empty {
    margin: 0;
    padding: 0.85rem;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.home-community-panel__links {
    display: grid;
    gap: 0.45rem;
}

.home-community-panel__links a {
    display: flex;
    min-block-size: 2.75rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 800;
    text-decoration: none;
}

.home-community-panel__links a:hover {
    background: var(--surface-subtle);
    color: var(--action-primary);
}

.messages-page-shell {
    inline-size: min(100%, 96rem);
}

.messenger-shell {
    display: grid;
    min-block-size: min(46rem, calc(100dvh - 8rem));
    overflow: hidden;
    border: 0.0625rem solid var(--border-default);
    border-radius: clamp(1rem, 3vw, 1.6rem);
    background: var(--surface-card);
    box-shadow: 0 1rem 3rem rgb(31 21 36 / 8%);
}

.messaging-sidebar {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    background: var(--surface-card);
}

.messaging-sidebar__header {
    display: flex;
    min-block-size: 5.2rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    gap: 0.75rem;
    border-block-end: 0.0625rem solid var(--border-default);
}

.messaging-sidebar__header h2 {
    margin: 0.15rem 0 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
}

.conversation-search {
    display: flex;
    align-items: center;
    margin: 0.8rem;
    padding-inline: 0.8rem;
    gap: 0.5rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--text-muted);
}

.conversation-search:focus-within {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--action-primary) 14%, transparent);
}

.conversation-search input {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 2.65rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
}

.messaging-sidebar > .conversation-list {
    overflow-y: auto;
    padding: 0 0.65rem 0.75rem;
}

.conversation-list__empty {
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    gap: 0.65rem;
    color: var(--text-muted);
    text-align: center;
}

.conversation-list__empty p {
    margin: 0;
}

.conversation-row {
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
}

.conversation-row:hover,
.conversation-row--active {
    border-color: transparent;
    background: var(--surface-subtle);
}

.conversation-row--active {
    box-shadow: inset 0.22rem 0 0 var(--action-primary);
}

html[dir='rtl'] .conversation-row--active {
    box-shadow: inset -0.22rem 0 0 var(--action-primary);
}

.conversation-list--compact {
    max-block-size: 19rem;
    overflow-y: auto;
}

.conversation-list--compact .conversation-row {
    padding: 0.65rem 0.55rem;
}

.conversation-list--compact .social-avatar {
    inline-size: 2.35rem;
    block-size: 2.35rem;
    font-size: 0.9rem;
}

.conversation-list--compact .conversation-row__content time {
    display: none;
}

.messaging-main {
    display: flex;
    min-inline-size: 0;
    min-block-size: 0;
    flex-direction: column;
    background: var(--surface-card);
}

.message-page__header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    min-block-size: 5.2rem;
    align-items: center;
    padding: 0.75rem 1rem;
    gap: 0.7rem;
    border-block-end: 0.0625rem solid var(--border-default);
    background: color-mix(in srgb, var(--surface-card) 96%, transparent);
    backdrop-filter: blur(1rem);
}

.message-page__identity {
    min-inline-size: 0;
}

.message-page__identity > a {
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 1.08rem;
    font-weight: 900;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-page__identity > a:hover {
    color: var(--action-primary);
}

.message-page__header p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-thread {
    position: relative;
    display: flex;
    min-block-size: 24rem;
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 1.1rem clamp(0.75rem, 3vw, 2rem);
    gap: 0.5rem;
    border: 0;
    border-radius: 0;
    background-color: color-mix(in srgb, var(--action-primary) 4%, var(--surface-subtle));
    background-image:
        radial-gradient(circle at 1rem 1rem, color-mix(in srgb, var(--action-primary) 7%, transparent) 0.08rem, transparent 0.1rem),
        linear-gradient(135deg, transparent 47%, color-mix(in srgb, var(--border-default) 30%, transparent) 48%, transparent 49%);
    background-size: 2.8rem 2.8rem, 4.5rem 4.5rem;
    scroll-behavior: smooth;
}

html[data-theme='dark'] .message-thread {
    background-color: color-mix(in srgb, var(--action-primary) 5%, #111);
}

.message-thread__date {
    align-self: center;
    position: sticky;
    inset-block-start: 0.35rem;
    z-index: 1;
    margin-block: 0.35rem;
    padding: 0.32rem 0.7rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    backdrop-filter: blur(0.6rem);
}

.message-bubble {
    position: relative;
    max-inline-size: min(86%, 42rem);
    padding: 0.65rem 0.78rem 0.45rem;
    border: 0.0625rem solid color-mix(in srgb, var(--border-default) 70%, transparent);
    border-radius: 0.28rem 1rem 1rem 1rem;
    background: var(--surface-card);
    box-shadow: 0 0.18rem 0.65rem rgb(31 21 36 / 7%);
}

.message-bubble--mine {
    border-color: color-mix(in srgb, var(--action-primary) 20%, var(--border-default));
    border-radius: 1rem 0.28rem 1rem 1rem;
    background: color-mix(in srgb, var(--action-primary) 13%, var(--surface-card));
}

.message-bubble p {
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.message-bubble footer {
    align-items: center;
    min-block-size: 1rem;
}

.message-bubble--mine footer span {
    color: var(--action-primary);
    font-weight: 900;
}

.message-thread__empty {
    display: grid;
    align-self: center;
    margin: auto;
    place-items: center;
    max-inline-size: 24rem;
    padding: 1.4rem;
    gap: 0.45rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    color: var(--text-secondary);
    text-align: center;
    backdrop-filter: blur(0.7rem);
}

.message-thread__empty-icon,
.messaging-empty-panel__icon {
    display: grid;
    inline-size: 4rem;
    block-size: 4rem;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--action-primary) 14%, var(--surface-subtle));
    color: var(--action-primary);
}

.message-thread__empty span {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.message-composer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 0.7rem;
    gap: 0.55rem;
    border-block-start: 0.0625rem solid var(--border-default);
    background: var(--surface-card);
}

.message-composer textarea {
    inline-size: 100%;
    min-block-size: 3rem;
    max-block-size: 9rem;
    padding: 0.78rem 1rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 1.5rem;
    outline: 0;
    background: var(--surface-subtle);
    color: var(--text-primary);
    line-height: 1.4;
    resize: none;
}

.message-composer textarea:focus {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--action-primary) 14%, transparent);
}

.message-composer__send {
    display: grid;
    inline-size: 3rem;
    block-size: 3rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--action-primary);
    color: var(--action-on-primary);
    cursor: pointer;
}

.message-composer__send:hover {
    filter: brightness(1.05);
    transform: translateY(-0.05rem);
}

.messaging-empty-panel {
    display: grid;
    place-items: center;
    align-content: center;
    padding: 2rem;
    gap: 0.7rem;
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--action-primary) 9%, transparent), transparent 38%),
        var(--surface-subtle);
    text-align: center;
}

.messaging-empty-panel h2 {
    margin: 0.4rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.messaging-empty-panel p {
    max-inline-size: 34rem;
    margin: 0;
    color: var(--text-muted);
}

@media (max-width: 63.99rem) {
    .messenger-shell {
        min-block-size: calc(100dvh - 10rem);
        border-radius: var(--radius-lg);
    }

    .messenger-shell--active .messaging-sidebar {
        display: none;
    }

    .messenger-shell--index .messaging-empty-panel {
        display: none;
    }

    .message-thread {
        min-block-size: calc(100dvh - 21rem);
    }
}

@media (min-width: 64rem) {
    .messenger-shell {
        grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr);
        max-block-size: calc(100dvh - 7rem);
    }

    .messaging-sidebar {
        border-inline-end: 0.0625rem solid var(--border-default);
    }

    html[dir='rtl'] .messaging-sidebar {
        border-inline-end: 0;
        border-inline-start: 0.0625rem solid var(--border-default);
    }

    .message-page__back {
        display: none;
    }

    .message-thread {
        min-block-size: 0;
    }

    .social-feed-layout {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.44fr);
    }
}

/* Social UX Lot 1 — full-height messenger and mobile notification access. */
.mobile-header-notifications {
    display: inline-flex;
}

html.page-message-conversation-root {
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

body.page-message-conversation {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100dvh;
    min-block-size: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

.page-message-conversation .site-shell {
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    max-inline-size: none;
    block-size: 100dvh;
    min-block-size: 0;
    overflow: hidden;
}

html.message-viewport-fallback .page-message-conversation .site-shell {
    inset: auto;
    top: var(--message-viewport-offset-top, 0);
    left: var(--message-viewport-offset-left, 0);
    inline-size: var(--message-viewport-width, 100vw);
    block-size: var(--message-viewport-height, 100dvh);
}

.page-message-conversation .site-main {
    display: flex;
    min-block-size: 0;
    overflow: hidden;
    flex: 1 1 auto;
    flex-direction: column;
}

.page-message-conversation .site-footer {
    display: none;
}

.page-message-conversation .site-main > .flash {
    position: fixed;
    inset-block-start: 5.35rem;
    inset-inline: 1rem;
    z-index: 70;
    inline-size: min(calc(100% - 2rem), 42rem);
    margin-inline: auto;
    box-shadow: 0 0.8rem 2.5rem rgb(31 21 36 / 16%);
}

.page-message-conversation .messages-page-shell {
    display: grid;
    min-block-size: 0;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
    padding-block: clamp(0.65rem, 1.5vh, 1.1rem);
}

.page-message-conversation .messenger-shell--active {
    block-size: 100%;
    min-block-size: 0;
    max-block-size: none;
}

.page-message-conversation .messaging-sidebar,
.page-message-conversation .messaging-main,
.page-message-conversation .message-thread {
    min-block-size: 0;
}

.page-message-conversation .messaging-sidebar > .conversation-list {
    min-block-size: 0;
    flex: 1 1 auto;
    align-content: start;
    grid-auto-rows: max-content;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.page-message-conversation .message-thread {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.message-composer textarea {
    min-inline-size: 0;
    flex: 1 1 auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.message-composer textarea::-webkit-scrollbar {
    inline-size: 0;
    block-size: 0;
}

.message-composer textarea[data-overflowing='true'] {
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent;
    scrollbar-width: thin;
}

.message-composer textarea[data-overflowing='true']::-webkit-scrollbar {
    inline-size: 0.3rem;
}

.message-composer textarea[data-overflowing='true']::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

@media (max-width: 63.99rem) {
    .page-message-conversation .site-header,
    .page-message-conversation .site-footer,
    .page-message-conversation .mobile-drawer,
    .page-message-conversation .mobile-noscript-nav {
        display: none !important;
    }

    .page-message-conversation .messages-page-shell {
        inline-size: 100%;
        padding: 0;
    }

    .page-message-conversation .messenger-shell--active {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .page-message-conversation .message-page__header {
        min-block-size: calc(4.35rem + env(safe-area-inset-top));
        padding-block-start: calc(0.6rem + env(safe-area-inset-top));
        padding-inline-start: max(0.7rem, env(safe-area-inset-left));
        padding-inline-end: max(0.7rem, env(safe-area-inset-right));
    }

    .page-message-conversation .message-thread {
        padding-inline-start: max(0.75rem, env(safe-area-inset-left));
        padding-inline-end: max(0.75rem, env(safe-area-inset-right));
        scrollbar-gutter: auto;
    }

    .page-message-conversation .message-composer {
        padding-block-end: calc(0.55rem + env(safe-area-inset-bottom));
        padding-inline-start: max(0.65rem, env(safe-area-inset-left));
        padding-inline-end: max(0.65rem, env(safe-area-inset-right));
    }

    .page-message-conversation .site-main > .flash {
        inset-block-start: calc(0.7rem + env(safe-area-inset-top));
    }
}

@media (min-width: 64rem) {
    .mobile-header-notifications {
        display: none;
    }
}

/* Social UX V7 — actions de modification et suppression des messages. */
.message-bubble--manageable {
    position: relative;
    padding-inline-end: 3rem;
}

.message-actions {
    position: absolute;
    z-index: 4;
    inset-block-start: 0.35rem;
    inset-inline-end: 0.35rem;
}

.message-actions[hidden] {
    display: none;
}

.message-actions__trigger {
    display: grid;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

.message-actions__trigger::-webkit-details-marker {
    display: none;
}

.message-actions__trigger:hover,
.message-actions__trigger:focus-visible,
.message-actions[open] .message-actions__trigger {
    background: color-mix(in srgb, var(--action-primary) 12%, var(--surface-card));
    color: var(--action-primary);
}

.message-actions__menu {
    position: absolute;
    z-index: 6;
    inset-block-start: calc(100% + 0.3rem);
    inset-inline-end: 0;
    display: grid;
    min-inline-size: 10.5rem;
    overflow: hidden;
    padding: 0.35rem;
    gap: 0.15rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.85rem;
    background: var(--surface-card);
    box-shadow: 0 0.85rem 2.2rem rgb(31 21 36 / 18%);
}

.message-actions__menu form {
    margin: 0;
}

.message-actions__item {
    display: flex;
    inline-size: 100%;
    min-block-size: 2.75rem;
    align-items: center;
    padding: 0.6rem 0.7rem;
    gap: 0.55rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    text-align: start;
    cursor: pointer;
}

.message-actions__item:hover,
.message-actions__item:focus-visible {
    background: var(--surface-subtle);
    color: var(--action-primary);
}

.message-actions__item--danger {
    color: #b42318;
}

html[data-theme='dark'] .message-actions__item--danger {
    color: #ffb4ab;
}

.message-edit-form {
    display: grid;
    min-inline-size: min(19rem, 72vw);
    gap: 0.55rem;
}

.message-edit-form[hidden] {
    display: none;
}

.message-edit-form textarea {
    inline-size: 100%;
    min-block-size: 4.5rem;
    max-block-size: 11rem;
    resize: vertical;
    padding: 0.7rem 0.8rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.75rem;
    outline: 0;
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.45;
}

.message-edit-form textarea:focus {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--action-primary) 14%, transparent);
}

.message-edit-form__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.message-edit-form__error {
    margin: 0;
    color: #b42318;
    font-size: 0.75rem;
    font-weight: 800;
}

html[data-theme='dark'] .message-edit-form__error {
    color: #ffb4ab;
}

@media (max-width: 47.99rem) {
    .message-actions__menu {
        min-inline-size: 11.5rem;
    }

    .message-edit-form {
        min-inline-size: min(17rem, 68vw);
    }
}



/* Social UX V8 — côtés physiques, direction automatique du texte et scrollbar discrète. */
.page-message-conversation .message-thread {
    scrollbar-width: none;
}

.page-message-conversation .message-thread::-webkit-scrollbar {
    inline-size: 0;
    block-size: 0;
}

.page-message-conversation .message-bubble {
    align-self: auto;
    margin-left: 0;
    margin-right: auto;
}

.page-message-conversation .message-bubble--mine {
    align-self: auto;
    margin-left: auto;
    margin-right: 0;
}

html[dir='rtl'] .page-message-conversation .message-bubble {
    border-radius: 0.28rem 1rem 1rem 1rem;
}

html[dir='rtl'] .page-message-conversation .message-bubble--mine {
    border-radius: 1rem 0.28rem 1rem 1rem;
}

.message-bubble [data-message-body-display][dir='auto'],
.message-edit-form textarea[dir='auto'],
.message-composer textarea[dir='auto'] {
    unicode-bidi: plaintext;
    text-align: start;
}

.message-bubble footer {
    direction: ltr;
}

/* Social moderation V10 — signalements responsives, file éditoriale et sanctions traçables. */
.comment-report {
    min-inline-size: 0;
    margin-block-start: 0.45rem;
    max-inline-size: 34rem;
}

.comment-item__actions > .comment-report:not([open]) {
    flex: 0 0 auto;
    inline-size: auto;
}

.comment-item__actions > .comment-report[open] {
    flex: 1 0 100%;
    inline-size: min(100%, 34rem);
}

.comment-report > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 800;
}

.comment-report > summary::-webkit-details-marker {
    display: none;
}

.text-action--warning {
    color: #9a3412;
}

html[data-theme='dark'] .text-action--warning {
    color: #fdba74;
}

.comment-item__actions .comment-report__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    inline-size: 100%;
    min-inline-size: 0;
    gap: 0.65rem;
    margin-block-start: 0.65rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--surface-elevated) 94%, var(--action-primary) 6%);
}

.comment-report__field,
.comment-report__form label,
.moderation-form label,
.moderation-filters label {
    display: grid;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 800;
}

.comment-report__field {
    min-inline-size: 0;
}

.comment-report__form select,
.comment-report__form textarea,
.moderation-form select,
.moderation-form textarea,
.moderation-form input,
.moderation-filters select,
.moderation-filters input,
.moderation-action-card input {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: 2.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.72rem;
    background: var(--surface-elevated);
    color: var(--text-primary);
    font: inherit;
}

.comment-report__form textarea,
.moderation-form textarea {
    resize: vertical;
    overflow-y: auto;
    unicode-bidi: plaintext;
    text-align: start;
}

.comment-report__form :is(select, textarea):focus,
.moderation-form :is(select, textarea, input):focus,
.moderation-filters :is(select, input):focus,
.moderation-action-card input:focus {
    outline: none;
    border-color: var(--action-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--action-primary) 14%, transparent);
}

.comment-report__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.comment-report__footer small {
    color: var(--text-muted);
}

.moderation-header {
    align-items: flex-start;
}

.moderation-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin-block-end: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.moderation-summary__card {
    display: grid;
    gap: 0.35rem;
    min-inline-size: 8.5rem;
    padding: 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.95rem;
    background: var(--surface-elevated);
    box-shadow: var(--shadow-soft);
}

.moderation-summary__card span {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 800;
}

.moderation-summary__card strong {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.moderation-filters {
    align-items: end;
}

.moderation-table td:first-child {
    min-inline-size: 16rem;
}

.moderation-table td:first-child small {
    display: block;
    max-inline-size: 28rem;
    margin-block-start: 0.2rem;
    color: var(--text-muted);
    unicode-bidi: plaintext;
    text-align: start;
}

.status-chip--open,
.status-chip--warning {
    background: color-mix(in srgb, #f59e0b 16%, var(--surface-elevated));
    color: #92400e;
}

.status-chip--in_review,
.status-chip--temporary_block {
    background: color-mix(in srgb, #2563eb 14%, var(--surface-elevated));
    color: #1d4ed8;
}

.status-chip--resolved {
    background: color-mix(in srgb, #16a34a 14%, var(--surface-elevated));
    color: #166534;
}

.status-chip--rejected {
    background: color-mix(in srgb, #64748b 15%, var(--surface-elevated));
    color: #475569;
}

.status-chip--permanent_block,
.status-chip--blacklist {
    background: color-mix(in srgb, #dc2626 14%, var(--surface-elevated));
    color: #991b1b;
}

html[data-theme='dark'] :is(.status-chip--open, .status-chip--warning) {
    color: #fcd34d;
}

html[data-theme='dark'] :is(.status-chip--in_review, .status-chip--temporary_block) {
    color: #93c5fd;
}

html[data-theme='dark'] .status-chip--resolved {
    color: #86efac;
}

html[data-theme='dark'] .status-chip--rejected {
    color: #cbd5e1;
}

html[data-theme='dark'] :is(.status-chip--permanent_block, .status-chip--blacklist) {
    color: #fca5a5;
}

.moderation-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.85rem;
}

.moderation-action-card {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    background: var(--surface-elevated);
}

.moderation-action-card--blacklist {
    border-color: color-mix(in srgb, #dc2626 28%, var(--border-subtle));
}

.moderation-action-card p,
.moderation-action-card small {
    margin: 0;
}

.moderation-action-card form {
    display: grid;
    gap: 0.55rem;
    margin-block-start: auto;
}

.moderation-fingerprint-list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.moderation-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
    align-items: start;
    gap: 1rem;
}

.moderation-detail-card {
    margin: 0;
}

.moderation-definition-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.moderation-definition-list > div {
    padding: 0.75rem;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
}

.moderation-definition-list dt {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.moderation-definition-list dd {
    margin: 0.2rem 0 0;
    font-weight: 800;
}

.moderation-comment-snapshot {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border-inline-start: 0.28rem solid var(--action-primary);
    border-radius: 0.7rem;
    background: var(--surface-muted);
    color: var(--text-primary);
    unicode-bidi: plaintext;
    text-align: start;
}

.moderation-report-details {
    margin-block-end: 1rem;
}

.moderation-report-details p {
    unicode-bidi: plaintext;
    text-align: start;
}

.moderation-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.moderation-form__wide,
.moderation-form > button,
.moderation-critical-note {
    grid-column: 1 / -1;
}

.moderation-form > button {
    justify-self: start;
}

.moderation-form .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.moderation-form .checkbox-row input {
    inline-size: 1.1rem;
    min-block-size: 1.1rem;
    margin-block-start: 0.15rem;
}

.moderation-critical-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, #dc2626 28%, var(--border-subtle));
    border-radius: 0.85rem;
    background: color-mix(in srgb, #dc2626 7%, var(--surface-elevated));
}

.moderation-critical-note p {
    margin: 0;
}

.moderation-timeline {
    display: grid;
    gap: 0.8rem;
}

.moderation-timeline__item {
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem;
    border-inline-start: 0.25rem solid var(--border-strong);
    border-radius: 0.75rem;
    background: var(--surface-elevated);
}

.moderation-timeline__item > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.moderation-timeline__item p,
.moderation-timeline__item small {
    margin: 0;
}

.moderation-timeline__item form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.moderation-timeline__item form input {
    flex: 1 1 16rem;
}

@media (max-width: 63.99rem) {
    .moderation-detail-grid {
        grid-template-columns: 1fr;
    }

    .moderation-summary {
        grid-template-columns: repeat(6, minmax(8.5rem, 10rem));
    }
}

@media (max-width: 47.99rem) {
    .comment-report,
    .comment-item__actions > .comment-report[open] {
        inline-size: 100%;
        max-inline-size: none;
    }

    .comment-report__footer,
    .moderation-timeline__item form {
        align-items: stretch;
        flex-direction: column;
    }

    .comment-report__footer .button,
    .moderation-timeline__item form .button {
        inline-size: 100%;
    }

    .moderation-definition-list,
    .moderation-form {
        grid-template-columns: 1fr;
    }

    .moderation-form__wide,
    .moderation-form > button,
    .moderation-critical-note {
        grid-column: auto;
    }

    .moderation-form > button {
        inline-size: 100%;
    }
}