.dps-customer-support {
	--dps-border: #e5e7eb;
	--dps-muted: #6b7280;
	--dps-bg: #f8fafc;
}

.dps-customer-head,
.dps-customer-ticket-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.dps-customer-head h2,
.dps-customer-ticket-head h2 {
	margin: 0 0 6px;
}

.dps-customer-head p {
	margin: 0;
	color: var(--dps-muted);
}

.dps-customer-empty,
.dps-customer-panel,
.dps-customer-ticket-head {
	border: 1px solid var(--dps-border);
	border-radius: 10px;
	padding: 20px;
	background: #fff;
}

.dps-customer-empty p {
	margin-bottom: 0;
}

.dps-customer-ticket-list {
	border: 1px solid var(--dps-border);
	border-radius: 10px;
	overflow: hidden;
}

.dps-customer-ticket-row {
	display: grid;
	grid-template-columns: minmax(220px, 2fr) minmax(90px, .6fr) minmax(120px, .8fr) minmax(125px, .8fr);
	gap: 16px;
	align-items: center;
	padding: 14px 16px;
	background: #fff;
	border-bottom: 1px solid var(--dps-border);
	text-decoration: none !important;
	color: inherit;
}

.dps-customer-ticket-row:last-child { border-bottom: 0; }
.dps-customer-ticket-row:hover { background: var(--dps-bg); }
.dps-customer-ticket-main { display: flex; flex-direction: column; gap: 3px; }
.dps-customer-ticket-main span,
.dps-customer-ticket-date,
.dps-customer-ticket-order { color: var(--dps-muted); font-size: .9em; }

.dps-customer-status {
	display: inline-flex;
	border-radius: 999px;
	padding: 4px 9px;
	font-size: 12px;
	font-weight: 700;
	background: #eef2f7;
}

.dps-status-new { background: #fee2e2; color: #991b1b; }
.dps-status-open { background: #dbeafe; color: #1e40af; }
.dps-status-waiting_customer { background: #fef3c7; color: #92400e; }
.dps-status-waiting_internal { background: #ede9fe; color: #5b21b6; }
.dps-status-resolved { background: #dcfce7; color: #166534; }
.dps-status-closed { background: #e5e7eb; color: #374151; }

.dps-customer-panel label { font-weight: 600; }
.dps-customer-panel input[type="text"],
.dps-customer-panel input[type="file"],
.dps-customer-panel select,
.dps-customer-panel textarea {
	width: 100%;
	box-sizing: border-box;
}

.dps-customer-panel small { display: block; margin-top: 5px; color: var(--dps-muted); }

.dps-customer-ticket-number { color: var(--dps-muted); font-size: .9em; }
.dps-customer-ticket-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--dps-muted); }

.dps-customer-thread {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 20px 0;
}

.dps-customer-message {
	border: 1px solid var(--dps-border);
	border-radius: 10px;
	padding: 16px 18px;
	background: #fff;
}

.dps-customer-message.is-customer {
	margin-left: 7%;
	border-left: 4px solid #2563eb;
}

.dps-customer-message.is-staff {
	margin-right: 7%;
	border-left: 4px solid #16a34a;
	background: #f7fef9;
}

.dps-customer-message-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	color: var(--dps-muted);
	font-size: .9em;
}

.dps-customer-message-meta strong { color: inherit; }
.dps-customer-message-body p:last-child { margin-bottom: 0; }

.dps-customer-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--dps-border);
}

.dps-customer-attachments a {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 220px;
	padding: 7px 9px;
	border: 1px solid var(--dps-border);
	border-radius: 7px;
	text-decoration: none !important;
	background: #fff;
}

.dps-customer-attachments img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.dps-file-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 5px; background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 800; }
.dps-customer-reply { margin-top: 20px; }
.dps-customer-reply h3 { margin-top: 0; }
.dps-order-support-cta { margin: 18px 0; }

@media (max-width: 900px) {
	.dps-customer-ticket-row { grid-template-columns: 1fr 1fr; }
	.dps-customer-ticket-main { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	.dps-customer-head,
	.dps-customer-ticket-head { flex-direction: column; }
	.dps-customer-ticket-row { grid-template-columns: 1fr; }
	.dps-customer-message.is-customer,
	.dps-customer-message.is-staff { margin-left: 0; margin-right: 0; }
	.dps-customer-message-meta { flex-direction: column; gap: 2px; }
}