/* Klvn Support Tickets - seller pages. Uses SMM Provider's dashboard look (.kd). */

.kst-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
	gap: 22px;
	align-items: start;
}

.kst-row {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 0 14px;
}

.kst-optional { font-weight: 500; color: var(--s-dim, #6a7487); font-size: 12.5px; margin-left: 4px; }

.kd textarea {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid var(--s-line, #1c2434);
	border-radius: 11px;
	font-size: 15px;
	line-height: 1.55;
	font-family: inherit;
	background: var(--s-deep, #05070d);
	color: var(--s-ink, #f2f3f8);
	box-sizing: border-box;
	resize: vertical;
	min-height: 120px;
}

.kd textarea::placeholder { color: var(--s-dim, #6a7487); }

.kd textarea:focus {
	outline: none;
	border-color: var(--s-accent, #0b5fff);
	box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.3);
}

.kst .smmp-notice { max-width: none; margin-left: 0; margin-right: 0; }
.kst-form .smmp-notice, .kd-card > .smmp-notice { margin-top: 14px; }

.kst-submit { width: 100%; margin-top: 20px; min-height: 50px; font-size: 16px; }

.kst-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.kst-actions .kd-btn { margin: 0; }

/* Tips */
.kst-tips ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.kst-tips li {
	position: relative;
	padding-left: 22px;
	font-size: 14.5px;
	color: var(--s-muted, #99a3b8);
}

.kst-tips li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--s-dim, #8a94a8);
}

.kst-tips strong { color: var(--s-ink, #f2f3f8); font-weight: 600; }

/* Ticket list */
.kst-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }

.kst-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--s-line, #1c2434);
	border-radius: 14px;
	background: var(--s-deep, #05070d);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.kst-list a:hover { border-color: #2a3550; background: #070a12; }

.kst-list .is-unread a { border-color: rgba(31, 162, 255, 0.55); box-shadow: inset 3px 0 0 var(--s-accent2, #1fa2ff); }

.kst-list-main { display: grid; gap: 3px; min-width: 0; }
.kst-list-subject { font-weight: 700; color: var(--s-ink, #f2f3f8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kst-list .is-unread .kst-list-subject::after { content: " \2022"; color: var(--s-accent2, #1fa2ff); }
.kst-list-meta { font-size: 13px; color: var(--s-dim, #6a7487); }
.kst-list-side { display: grid; justify-items: end; gap: 4px; flex: none; }
.kst-list-side time { font-size: 12.5px; color: var(--s-dim, #6a7487); white-space: nowrap; }

.kst-empty { margin: 8px 0 0; padding: 26px 0; text-align: center; color: var(--s-muted, #99a3b8); }

/* Status badges */
.kst-badge.kst-open { background: #161e30; color: #d3d9e6; }
.kst-badge.kst-answered { background: rgba(31, 162, 255, 0.16); color: var(--s-accent2, #1fa2ff); }
.kst-badge.kst-closed { background: rgba(52, 211, 153, 0.13); color: var(--s-green, #34d399); }

/* One ticket */
.kst-back { justify-self: start; font-size: 14px; font-weight: 600; color: var(--s-muted, #99a3b8) !important; text-decoration: none; }
.kst-back:hover { color: var(--s-ink, #f2f3f8) !important; }

.kst-head-status { align-self: flex-end; padding-bottom: 7px; }

.kst-thread { display: grid; gap: 14px; }

.kst-msg {
	max-width: min(86%, 620px);
	padding: 14px 18px 16px;
	border: 1px solid var(--s-line, #1c2434);
	border-radius: 16px;
	background: var(--s-deep, #05070d);
}

.kst-msg-me { justify-self: end; border-bottom-right-radius: 6px; background: #0a1430; border-color: rgba(31, 162, 255, 0.3); }
.kst-msg-staff { justify-self: start; border-bottom-left-radius: 6px; background: var(--s-bg2, #111726); border-color: var(--s-line, #1c2434); }

.kst-msg header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-bottom: 6px; }
.kst-msg header strong { font-size: 14px; color: var(--s-ink, #f2f3f8); }
.kst-msg-staff header strong { color: var(--s-gold, #ffd100); }
.kst-msg time { font-size: 12.5px; color: var(--s-dim, #6a7487); }

.kst-body { font-size: 15px; line-height: 1.6; color: #dfe4ee; overflow-wrap: anywhere; }
.kst-body a { color: var(--s-accent2, #1fa2ff); text-decoration: underline; }

.kst-close {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--s-line, #1c2434);
	font-size: 14px;
}

.kst-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--s-line, #1c2434);
	border-radius: 10px;
	background: var(--s-bg2, #111726);
	color: var(--s-ink, #f2f3f8);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.kst-link:hover { border-color: #2a3550; background: #161e30; }

/* One ticket: a reading column, the badge next to the title, a quiet meta line. */
.kst:has(> .kst-back) { width: 100%; max-width: 880px; margin-inline: auto; }
.kst:has(> .kst-back) > .kd-head { justify-content: flex-start; column-gap: 14px; }
.kst-back + .kd-head .kd-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--s-muted, #99a3b8); }

/* Sign-in / not approved */
.kst-gate { max-width: 680px; width: 100%; margin: clamp(8px, 5vh, 48px) auto 0; text-align: center; padding: 40px 36px; }
.kst-gate .smmp-muted { max-width: 560px; margin-inline: auto; text-wrap: balance; }
.kst-gate .kst-actions .kd-btn { font-size: 15px; }
.kst-gate h3 { font-size: 22px; }
.kst-gate .kst-actions { justify-content: center; }

/* Dashboard button */
.kst-dash-btn { gap: 8px; }

.kst-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--s-accent, #0b5fff);
	color: #fff;
	font-size: 12px;
	font-style: normal;
	font-weight: 800;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (max-width: 860px) {
	.kst-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	.kst-row { grid-template-columns: minmax(0, 1fr); }
	.kst .kst-msg { max-width: 90%; }
	.kst-gate { margin-top: 0; }
	#reply .kst-actions .kd-btn { flex: 1 1 100%; }
	.kst-back { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
	.kst-link { min-height: 44px; }
	.kst-list a { flex-direction: column; align-items: stretch; gap: 10px; }
	.kst-list-side { display: flex; justify-content: space-between; align-items: center; }
	.kst-gate { padding: 26px 20px; }
	.kst-gate .kst-actions .kd-btn { flex: 1 1 100%; }
}

/* Tips beside the form: an open column, so the space under it reads as margin. */
@media (min-width: 861px) {
	.kd .kst-tips { padding: 26px 0 0 28px; border: 0; border-left: 1px solid var(--s-line, #1c2434); border-radius: 0; background: none; }
}

/* Live tickets (1.1.0) */
.kst [hidden] { display: none !important; }
.kst-live-note { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13px; color: var(--s-dim, #6a7487); }
.kst-live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--s-green, #34d399); }
.kst-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: kst-ping 1.8s ease-out infinite; }
.kst-msg-new { animation: kst-in 0.35s ease-out; }
.kst-hint { font-size: 13px; color: var(--s-dim, #6a7487); }
.kst-closed-box { text-align: center; }
.kst-closed-box .kst-actions { justify-content: center; }
.kst-form [data-kst-error] { margin: 0 0 12px; }
@keyframes kst-ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.8); opacity: 0; } }
@keyframes kst-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (hover: none) { .kst-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .kst-live-dot::after, .kst-msg-new { animation: none; } }