.chat-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
}
#app > .chat-tools {
    padding: 0 0 18px;
}
.chat-archive-search {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 150px 150px auto;
    gap: 12px;
    align-items: end;
}
.chat-archive-search .form-group {
    margin: 0;
    min-width: 0;
}
.chat-archive-search input {
    width: 100%;
}
.chat-archive-message {
    padding: 18px 24px;
    border-top: 1px solid var(--border);
}
.chat-archive-message p {
    margin: 10px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.chat-archive-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: baseline;
}
.chat-archive-meta > a {
    font-weight: 700;
}
.chat-archive-meta time {
    color: var(--muted);
    font-size: 0.8rem;
}
.chat-archive-message.chat-removed {
    background: var(--surface-alt);
}
.chat-removal-note {
    color: var(--muted);
    font-size: 0.85rem;
}
.chat-archive-empty {
    padding: 20px 24px;
    color: var(--muted);
}
.chat-remove {
    font-size: 0.75rem;
    margin-left: auto;
}
.chat-message-meta .chat-remove {
    color: var(--danger);
}
.chat-archive-message .chat-remove {
    color: var(--danger);
}
@media (max-width: 720px) {
    .chat-archive-search {
        grid-template-columns: 1fr 1fr;
    }
    .chat-archive-search .form-group:first-child {
        grid-column: 1 / -1;
    }
    .chat-archive-search button {
        grid-column: 1 / -1;
    }
    .chat-archive-message {
        padding: 16px;
    }
}