@layer components {
    .conversation-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: var(--space-2);
    }

    .conversation-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        text-decoration: none;
        color: inherit;
    }

    .conversation-row-unread {
        border-inline-start: 4px solid var(--sky-deep);
        background: var(--haze);
    }

    .conversation-thumb {
        flex: 0 0 auto;
        inline-size: 56px;
        block-size: 56px;
        border-radius: var(--radius-m);
        object-fit: cover;
    }

    .conversation-thumb-empty {
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        color: var(--fog);
    }

    .conversation-main {
        display: grid;
        gap: 2px;
        min-inline-size: 0;
    }

    .conversation-title {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .conversation-party {
        font-size: var(--size-small);
        color: var(--fog);
    }

    .conversation-preview {
        font-size: var(--size-small);
        color: var(--fog);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .conversation-meta {
        margin-inline-start: auto;
        display: grid;
        justify-items: end;
        gap: var(--space-1);
        font-size: var(--size-small);
        color: var(--fog);
        flex: 0 0 auto;
    }

    .conversation-unread-badge {
        display: inline-grid;
        place-items: center;
        min-inline-size: 1.5rem;
        block-size: 1.5rem;
        padding-inline: var(--space-1);
        border-radius: 999px;
        background: var(--sky-deep);
        color: var(--paper);
        font-weight: 600;
    }

    .thread {
        display: grid;
        gap: var(--space-4);
    }

    .thread-listing {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        position: sticky;
        inset-block-start: calc(var(--header-height) + var(--space-2));
        background: var(--paper);
        z-index: 1;
    }

    .thread-listing-main {
        min-inline-size: 0;
        display: grid;
        gap: 2px;
    }

    .thread-listing-title {
        display: flex;
        align-items: center;
        min-block-size: var(--touch-target);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .thread-listing-meta {
        margin: 0;
        font-size: var(--size-small);
        color: var(--fog);
    }

    .thread-listing form {
        margin-inline-start: auto;
    }

    .thread-status {
        margin: 0;
        padding: var(--space-3);
        border-radius: var(--radius-m);
        background: var(--haze);
        border: 1px solid var(--line);
    }

    .message-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: var(--space-3);
    }

    .message-item {
        max-inline-size: min(85%, 34rem);
        justify-self: start;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-m);
        background: var(--haze);
        border: 1px solid var(--line);
    }

    .message-own {
        justify-self: end;
        background: var(--sky-tint);
    }

    .message-body {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .message-meta {
        margin: var(--space-1) 0 0;
        font-size: var(--size-small);
        color: var(--fog);
    }

    .composer {
        display: grid;
        gap: var(--space-2);
        position: sticky;
        inset-block-end: 0;
        background: var(--paper);
        padding-block: var(--space-2);
    }

    @media (max-width: 1023px) {
        .composer {
            inset-block-end: calc(var(--deck-height) + env(safe-area-inset-bottom));
        }
    }

    .conversation-filters [aria-current="page"] {
        background: var(--haze);
        border-color: var(--soil);
        font-weight: 600;
    }

    .safety-notice {
        padding: var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        background: var(--wheat-tint);
        font-size: var(--size-small);
    }

    .safety-notice ul {
        margin: 0;
        padding-inline-start: var(--space-4);
        display: grid;
        gap: var(--space-1);
    }

    .message-warning {
        margin: var(--space-1) 0 0;
        padding: var(--space-2);
        border-radius: var(--radius-s);
        background: var(--wheat-tint);
        font-size: var(--size-small);
    }

    .message-report-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: var(--touch-target);
        min-inline-size: var(--touch-target);
        margin-block: calc((1lh - var(--touch-target)) / 2);
        font-size: var(--size-micro);
        color: var(--fog);
    }

    .thread-actions {
        justify-content: space-between;
        align-items: center;
        font-size: var(--size-small);
    }

    .thread-actions a {
        display: inline-flex;
        align-items: center;
        min-block-size: var(--touch-target);
    }

    .composer textarea {
        inline-size: 100%;
        resize: vertical;
        min-block-size: 4.5rem;
    }

    .composer .btn {
        justify-self: end;
    }

    @media (min-width: 700px) {
        .thread {
            max-inline-size: 44rem;
        }
    }
}