.dashboard-page .ticket-chat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 46rem;
    overflow-y: auto;
    padding-inline-end: var(--space-2);
    margin-bottom: var(--space-5);
}

.dashboard-page .ticket-row { display: flex; }
.dashboard-page .ticket-row.is-admin { justify-content: flex-start; }
.dashboard-page .ticket-row.is-user  { justify-content: flex-end; }

.dashboard-page .ticket-bubble {
    max-width: min(75%, 46ch);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}

.dashboard-page .ticket-row.is-admin .ticket-bubble {
    background: var(--surface-2);
    border-inline-start: 3px solid var(--primary);
}
.dashboard-page .ticket-row.is-user .ticket-bubble {
    border-inline-end: 3px solid var(--accent);
}

.dashboard-page .ticket-bubble-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-1);
}
.dashboard-page .ticket-bubble-name {
    font-size: 1.35rem;
    font-weight: var(--fw-bold);
    color: var(--ink);
}
.dashboard-page .ticket-bubble-time {
    font-size: var(--fs-caption);
    color: var(--muted);
    white-space: nowrap;
}
.dashboard-page .ticket-bubble-text {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.8;
    color: var(--text-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.dashboard-page .ticket-attach {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--fs-caption);
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dashboard-page .ticket-reply,
.dashboard-page .ticket-form-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.dashboard-page .ticket-reply {
    border-top: 1px solid var(--border);
    padding-top: var(--space-5);
}

.dashboard-page .ticket-reply textarea,
.dashboard-page .ticket-form-grid textarea { resize: vertical; }

.dashboard-page .ticket-optional,
.dashboard-page .ticket-hint {
    font-size: var(--fs-caption);
    color: var(--muted);
    font-weight: var(--fw-normal);
}
.dashboard-page .ticket-hint { display: block; margin-top: var(--space-1); }

.dashboard-page .ticket-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.dashboard-page .ticket-closed-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 1.4rem;
    color: var(--muted);
}

.dashboard-page .ticket-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-9) var(--space-5);
    text-align: center;
}
.dashboard-page .ticket-empty-icon { font-size: 4rem; color: var(--border-2); }
.dashboard-page .ticket-empty-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    color: var(--ink);
}
.dashboard-page .ticket-empty-text {
    margin: 0;
    max-width: 42ch;
    font-size: 1.4rem;
    color: var(--muted);
}

.dashboard-page .ticket-clip { color: var(--muted); margin-inline-start: var(--space-1); }
.dashboard-page .ticket-date { color: var(--muted); white-space: nowrap; }
.dashboard-page .ticket-count { font-size: var(--fs-caption); color: var(--muted); }

.dashboard-page .pagination { gap: var(--space-1); margin: 0; }
.dashboard-page .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    min-height: 3.4rem;
    border: 1px solid var(--border-2);
    border-radius: var(--r-xs);
    color: var(--text-2);
    font-size: 1.35rem;
}
.dashboard-page .pagination .page-link:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.dashboard-page .pagination .page-item.active .page-link {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-brand);
}