.support-stats {
    margin-top: 16px;
}

.support-ticket-form {
    max-width: 920px;
}

.support-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.support-ticket-meta,
.support-reply-actions,
.support-ticket-heading .row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.support-priority-low {
    background: var(--surface-soft);
    color: var(--muted);
}

.support-priority-normal {
    background: var(--info-soft);
    color: var(--info-ink);
}

.support-priority-high {
    background: var(--danger-soft);
    color: var(--danger-ink);
}

.status-open {
    background: var(--warning-soft);
    color: var(--warning-ink);
}

.support-ticket-link {
    display: grid;
    gap: 4px;
    min-width: 210px;
}

.support-ticket-link:hover strong {
    color: var(--brand);
}

.support-ticket-link small {
    color: var(--muted);
}

.support-ticket-link small span {
    color: var(--accent);
    font-weight: 800;
}

.support-row-unread {
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.support-row-unread td:first-child {
    box-shadow: inset 4px 0 0 var(--accent);
}

[dir="rtl"] .support-row-unread td:first-child {
    box-shadow: inset -4px 0 0 var(--accent);
}

.support-thread {
    display: grid;
    gap: 12px;
    max-width: 980px;
    margin: 18px 0;
}

.support-message {
    width: min(78%, 760px);
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 8px 20px var(--shadow-color);
}

.support-message-workspace {
    justify-self: start;
    border-inline-start: 4px solid var(--brand);
}

.support-message-support {
    justify-self: end;
    border-inline-start: 4px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.support-message header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: .84rem;
}

.support-message header strong {
    color: var(--text);
}

.support-message p {
    margin: 12px 0 0;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.support-attachment {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: var(--brand);
    font-weight: 700;
}

.support-reply-form {
    max-width: 980px;
    margin-top: 16px;
}

.support-reply-actions {
    justify-content: space-between;
}

.support-file-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--muted);
}

.support-file-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.support-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 20px;
    align-items: start;
}

.support-ticket-controls {
    position: sticky;
    top: 84px;
}

.support-ticket-controls form {
    display: grid;
    gap: 12px;
}

.support-filters {
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto;
}

@media (max-width: 900px) {
    .support-detail-layout,
    .support-form-grid,
    .support-filters {
        grid-template-columns: 1fr;
    }

    .support-ticket-controls {
        position: static;
    }

    .support-message {
        width: 92%;
    }
}

@media (max-width: 560px) {
    .support-message {
        width: 100%;
    }

    .support-message header,
    .support-reply-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

.support-waiting-support {
    background: var(--warning-soft);
    color: var(--warning-ink);
}

.support-waiting-workspace {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: color-mix(in srgb, var(--accent) 72%, var(--text));
}

