/*
 * SellKit UI — Support page and its ?action=tickets|ticket|new-ticket sub-views (shortcodes/support/*, partials/support-*)
 * ---------------------------------------------------------------------------
 * Owned by the support page engineer. Only this engineer edits this file.
 * Scope every rule under your page class (e.g. .ui-page-support ...), use tokens
 * only (no raw colours), and check light, dark and system. See
 * docs/ui-system.md.
 */

/* ===========================================================================
 * Reference implementation (built with the design system; extend freely)
 * ======================================================================== */

/* --- Help-center search (partials/support-search.php + search.js results) --- */
.ui-page-support .ui-support-search__label { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ui-page-support .ui-support-search__group .ui-input-group__icon { display: inline-flex; align-items: center; }
.ui-page-support .artbees-support-search.ui-input { max-width: none; padding-top: 0; padding-bottom: 0; padding-right: var(--space-3); font-size: var(--text-md); }
.ui-page-support .ui-support-search__loader { display: none; width: 1rem; height: 1rem; border-width: 2px; color: var(--muted-foreground); } /* search.js shows it inline */
.ui-page-support .ui-support-search__icon { display: inline-flex; }
.ui-page-support .ui-support-search__icon svg { width: 1rem; height: 1rem; }
.ui-page-support .ui-support-search__icon svg path { stroke: currentColor; }

.ui-page-support .artbees-search-article-list { margin: 0; padding: 0; gap: var(--space-3); }
.ui-page-support .js__support-search-container:empty { display: none; } /* search.js fills and shows it */
.ui-page-support .artbees-search-results-title { margin: 0; font-size: var(--text-base); color: var(--foreground); }
.ui-page-support .artbees-search-article-list ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 767px) { .ui-page-support .artbees-search-article-list ul { grid-template-columns: minmax(0, 1fr); } }
.ui-page-support .artbees-search-article-list ul li,
.ui-page-support .artbees-search-article-list ul li:last-child {
	position: relative;
	display: flex;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border);
}
/* No divider under the last row (two columns ≥768, one below). */
.ui-page-support .artbees-search-article-list ul li:last-child,
.ui-page-support .artbees-search-article-list ul li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
@media (max-width: 767px) { .ui-page-support .artbees-search-article-list ul li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--border); } }
.ui-page-support .artbees-support-article-icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	padding: 0;
	margin-top: 2px;
	color: var(--muted-foreground);
}
.ui-page-support .artbees-support-article-icon svg { width: 1rem; height: 1rem; }
.ui-page-support .artbees-support-article-icon svg path { stroke: currentColor; }
.ui-page-support .artbees-support-article-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; }
.ui-page-support .artbees-support-article-title {
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: var(--foreground);
	text-decoration: none;
}
/* The whole row is the click target (title link stretched). */
.ui-page-support .artbees-support-article-title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.ui-page-support .artbees-support-article-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-page-support .artbees-support-article-title:focus-visible { outline: none; }
.ui-page-support .artbees-support-article-title:focus-visible::after { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-page-support .artbees-support-article-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--muted-foreground);
	text-decoration: none;
}
@media (max-width: 767px) { .ui-page-support .artbees-search-article-list ul li { min-height: var(--touch-target); } }

/* Not-found state: search.js toggles it with inline display. */
.ui-page-support .js__no-search-results-found { display: none; }
.ui-page-support .ui-empty__description p { margin: 0; }

/* --- Your tickets card (partials/support-tickets.php, variant summary) --- */
.ui-page-support .ui-support-tickets .ui-list-row { padding-inline: var(--space-6); }
.ui-page-support .ui-support-tickets .ui-list-row__title { font-weight: var(--weight-medium); white-space: nowrap; }
@media (max-width: 639px) { .ui-page-support .ui-support-tickets .ui-list-row { padding-inline: var(--space-4); } }

/* --- Sub-views (?action=tickets|ticket|new-ticket): light restyle only --- */
.ui-page-support .ui-card__title .ui-badge { margin-left: var(--space-1-5); vertical-align: 2px; }
.ui-page-support .sellkit-ticket-view { max-width: none; }
.ui-page-support .sellkit-ticket-thread-list { margin: 0 0 var(--space-6); }
.ui-page-support .sellkit-ticket-thread { border-radius: var(--radius-xl); }
.ui-page-support .sellkit-ticket-reply { margin-top: 0; }
.ui-page-support .sellkit-ticket-reply textarea { margin: 0; }
.ui-page-support .sellkit-ticket-form { max-width: none; padding: 0; }
.ui-page-support .sellkit-ticket-form .form-control { max-width: none; }
.ui-page-support .sellkit-ticket-form .sellkit-ticket-field-label,
.ui-page-support .sellkit-ticket-form .form-group .sellkit-ticket-field-label { padding-bottom: 0; gap: var(--space-1); }
.ui-page-support .sellkit-ticket-field-title { font-size: var(--text-base); font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.ui-page-support .sellkit-ticket-field-hint { font-size: var(--text-sm); }
.ui-page-support .sellkit-form-uploader-container { padding: var(--space-6); }
.ui-page-support .sellkit-form-uploader-icon { margin-bottom: var(--space-2); }

/* ===========================================================================
 * Sub-views, finished (customer page engineer)
 * ======================================================================== */

/* Breadcrumb "Your tickets" link: undo the legacy .sellkit-ticket-back button look */
.ui-page-support .ui-breadcrumb .sellkit-ticket-back { display: inline; margin: 0; color: inherit; font-weight: inherit; }

/* --- Ticket header meta row --- */
.ui-page-support .ui-ticket__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1-5) var(--space-2);
	margin: var(--space-2) 0 0;
	font-size: var(--text-sm);
	color: var(--muted-foreground);
}
/* Every child sits after a 1rem slot; meta items draw a "·" in it. The row is
   shifted left by one slot and clipped there, so whatever starts a (wrapped)
   line shows no leading dot. */
.ui-page-support .ui-ticket__meta { column-gap: 0; margin-left: -1rem; clip-path: inset(0 0 0 1rem); }
.ui-page-support .ui-ticket__meta > * { margin-left: 1rem; }
.ui-page-support .ui-ticket__meta > .ui-badge + .ui-badge { margin-left: var(--space-2); }
.ui-page-support .ui-ticket__meta-item { position: relative; }
.ui-page-support .ui-ticket__meta-item::before { content: "·"; position: absolute; left: -1rem; width: 1rem; text-align: center; }
.ui-page-support .ui-ticket__site { display: inline-flex; align-items: center; gap: var(--space-1); overflow-wrap: anywhere; }
.ui-page-support .ui-ticket__site svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

/* --- Conversation: staff bubbles left, customer bubbles right ---
 * Markup from Sellkit_Support_Tickets::renderThreads():
 * .sellkit-ticket-thread.sellkit-ticket-thread-{agent|customer} > .sellkit-ticket-thread-meta (strong + time),
 * .sellkit-ticket-thread-body, .sellkit-ticket-attachments > a.sellkit-ticket-attachment */
.ui-page-support .sellkit-ticket-thread-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
}
.ui-page-support .sellkit-ticket-thread-list:empty { display: none; }
.ui-page-support .sellkit-ticket-thread {
	position: relative;
	width: fit-content;
	min-width: min(100%, 16rem);
	max-width: min(100%, 40rem);
	padding: var(--space-3) var(--space-4) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	color: var(--card-foreground);
	box-shadow: var(--shadow-xs);
}
.ui-page-support .sellkit-ticket-thread-agent { margin-right: auto; border-top-left-radius: var(--radius-sm); }
.ui-page-support .sellkit-ticket-thread-customer {
	margin-left: auto;
	border-top-right-radius: var(--radius-sm);
	border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
	background: color-mix(in srgb, var(--primary) 9%, var(--card));
}
.ui-page-support .sellkit-ticket-thread-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	color: var(--muted-foreground);
}
.ui-page-support .sellkit-ticket-thread-meta strong { font-weight: var(--weight-semibold); color: var(--foreground); }
.ui-page-support .sellkit-ticket-thread-body {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed, 1.65);
	color: var(--card-foreground);
	overflow-wrap: anywhere;
}
.ui-page-support .sellkit-ticket-thread-body > :first-child { margin-top: 0; }
.ui-page-support .sellkit-ticket-thread-body > :last-child { margin-bottom: 0; }
.ui-page-support .sellkit-ticket-thread-body p { margin: 0 0 var(--space-3); }
.ui-page-support .sellkit-ticket-thread-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.ui-page-support .sellkit-ticket-thread-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.ui-page-support .sellkit-ticket-thread-body pre,
.ui-page-support .sellkit-ticket-thread-body code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--text-sm); }
.ui-page-support .sellkit-ticket-thread-body pre { padding: var(--space-3); overflow-x: auto; border-radius: var(--radius-md); background: var(--muted); }
.ui-page-support .sellkit-ticket-thread-body blockquote { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--border); color: var(--muted-foreground); }
.ui-page-support .sellkit-ticket-attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.ui-page-support .sellkit-ticket-attachment {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1-5);
	max-width: 100%;
	min-height: 2rem;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--background);
	color: var(--foreground);
	font-size: var(--text-sm);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.ui-page-support .sellkit-ticket-attachment::before {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url(../../icons/files/paperclip.svg) center / contain no-repeat;
	mask: url(../../icons/files/paperclip.svg) center / contain no-repeat;
	opacity: 0.7;
}
.ui-page-support .sellkit-ticket-attachment:hover { background: var(--accent); }
.ui-page-support .sellkit-ticket-attachment:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (max-width: 639px) {
	.ui-page-support .sellkit-ticket-thread { max-width: 100%; width: auto; }
	.ui-page-support .sellkit-ticket-thread-agent { margin-right: var(--space-6); }
	.ui-page-support .sellkit-ticket-thread-customer { margin-left: var(--space-6); }
}

/* --- Reply box --- */
.ui-page-support .ui-ticket-reply .ui-textarea { min-height: 8rem; resize: vertical; }
.ui-page-support .ui-ticket-reply__footer { justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.ui-page-support .ui-ticket-reply__footer p { margin: 0; flex: 1 1 18rem; }
.ui-page-support .ui-ticket-reply__footer .ui-btn svg { width: 1rem; height: 1rem; }
.ui-page-support .ui-ticket-reply .js__form-ajax-response { margin: 0; }
@media (max-width: 639px) { .ui-page-support .ui-ticket-reply__footer .ui-btn { flex: 1 1 100%; } }

/* --- Uploader (reply + new ticket): compact drop zone + file chips --- */
.ui-page-support .sellkit-form-uploader-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-5);
	border: 1px dashed var(--input);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--muted) 45%, transparent);
	text-align: center;
	transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}
.ui-page-support .ui-uploader--compact { flex-direction: row; justify-content: center; gap: var(--space-3); padding: var(--space-4); text-align: left; }
.ui-page-support .ui-uploader__icon,
.ui-page-support .sellkit-form-uploader-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--background);
	color: var(--foreground);
	box-shadow: var(--shadow-xs);
}
.ui-page-support .ui-uploader__icon svg,
.ui-page-support .sellkit-form-uploader-icon svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; }
.ui-page-support .sellkit-form-uploader-content { gap: 2px; font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-page-support .ui-uploader--compact .sellkit-form-uploader-content { text-align: left; }
.ui-page-support .sellkit-form-uploader-content a { color: var(--brand); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 2px; }
.ui-page-support .sellkit-form-uploader-container.dragover { border-color: var(--ring); background: var(--brand-subtle); }
.ui-page-support .sellkit-upload-attached-files { margin: var(--space-2) 0 0; gap: var(--space-2); }
.ui-page-support .sellkit-upload-attached-files:empty { display: none; }
.ui-page-support .sellkit-uploader-file-item,
.ui-page-support .sellkit-uploader-file-error {
	width: calc(50% - var(--space-1));
	padding: var(--space-2) var(--space-10, 2.5rem) var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	color: var(--foreground);
}
.ui-page-support .sellkit-uploader-file-error { border-color: var(--danger-border); background: var(--danger-subtle); color: var(--danger-subtle-foreground); font-size: var(--text-sm); }
.ui-page-support .sellkit-uploader-file-name { font-size: var(--text-sm); color: var(--foreground); overflow-wrap: anywhere; }
.ui-page-support .sellkit-uploader-file-size { font-size: var(--text-xs); color: var(--muted-foreground); }
.ui-page-support .sellkit-uploader-file-remove {
	top: 50%;
	right: var(--space-2);
	width: 2rem;
	height: 2rem;
	margin-top: -1rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--muted-foreground);
	opacity: 1;
	cursor: pointer;
}
.ui-page-support .sellkit-uploader-file-remove::before {
	content: "";
	position: absolute;
	inset: 0.5rem;
	background: currentColor;
	-webkit-mask: url(../../icons/general/trash-01.svg) center / contain no-repeat;
	mask: url(../../icons/general/trash-01.svg) center / contain no-repeat;
}
.ui-page-support .sellkit-uploader-file-remove:hover { background: var(--accent); color: var(--foreground); }
.ui-page-support .sellkit-uploader-file-remove:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
@media (max-width: 639px) {
	.ui-page-support .sellkit-uploader-file-item,
	.ui-page-support .sellkit-uploader-file-error { width: 100%; }
	.ui-page-support .ui-uploader--compact { flex-direction: column; text-align: center; }
	.ui-page-support .ui-uploader--compact .sellkit-form-uploader-content { text-align: center; }
}

/* --- New ticket form (partials/new-ticket.php) --- */
.ui-page-support .sellkit-ticket-form .form-group { margin: 0; }
.ui-page-support .sellkit-ticket-form .sellkit-ticket-field-label,
.ui-page-support .sellkit-ticket-form .form-group .sellkit-ticket-field-label {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	background: none;
	font-size: inherit;
}
.ui-page-support .sellkit-ticket-form .sellkit-ticket-field-hint { line-height: var(--leading-snug); }
.ui-page-support .sellkit-ticket-form .sellkit-toggle { margin-top: var(--space-3); }
.ui-page-support .sellkit-ticket-form .sellkit-ticket-access-details.is-open { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.ui-page-support .sellkit-ticket-form .sellkit-ticket-access-input { min-height: 7.5rem; margin: 0; }
.ui-page-support .sellkit-ticket-form .js__form-ajax-response { margin: 0; max-width: none; }

/* TinyMCE: frame follows the theme (the editor body itself is themed from
   new-ticket.php via skin/content_style). Legacy support-tickets.css uses
   !important, so these need it too. */
.ui-page-support .sellkit-ticket-editor .tox.tox-tinymce {
	border: 0 !important;
	border-radius: var(--radius-md) !important;
	box-shadow: 0 0 0 1px var(--input), var(--shadow-xs) !important;
}
.ui-page-support .sellkit-ticket-editor .tox.tox-tinymce:focus-within { box-shadow: 0 0 0 1px var(--ring), 0 0 0 4px color-mix(in srgb, var(--ring) 22%, transparent) !important; }
.ui-page-support .sellkit-ticket-editor .tox .tox-editor-header { border-bottom: 1px solid var(--border) !important; }
.ui-page-support .sellkit-ticket-editor .tox .tox-toolbar,
.ui-page-support .sellkit-ticket-editor .tox .tox-toolbar__primary,
.ui-page-support .sellkit-ticket-editor .tox .tox-toolbar__overflow,
.ui-page-support .sellkit-ticket-editor .tox .tox-editor-header,
.ui-page-support .sellkit-ticket-editor .tox .tox-menubar { background: var(--muted) !important; }
.ui-page-support .sellkit-ticket-editor .tox .tox-edit-area__iframe { background: var(--input-background) !important; }
.ui-page-support .sellkit-ticket-editor .tox .tox-tbtn { color: var(--foreground); }
.ui-page-support .sellkit-ticket-editor .tox .tox-tbtn svg { fill: currentColor !important; }
/* The "Paragraph" block picker: oxide-dark paints it slate blue (off-palette). */
.ui-page-support .sellkit-ticket-editor .tox .tox-tbtn--bespoke,
.ui-page-support .sellkit-ticket-editor .tox .tox-tbtn--select { background: transparent; }
.ui-page-support .sellkit-ticket-editor .tox .tox-tbtn:hover { background: var(--accent); }
.ui-page-support .sellkit-ticket-editor .tox .tox-tbtn--enabled,
.ui-page-support .sellkit-ticket-editor .tox .tox-tbtn--enabled:hover { background: var(--background); }

/* Legacy style.css colours every `table td` #3c4257 (unreadable on dark): restore the token. */
.ui-page-support .ui-table td { color: var(--foreground); }