/**
 * PureDesk component library.
 * Every class is prefixed .puredesk- and consumes tokens.css variables only.
 */

/* The [hidden] attribute always wins, even over components that set their
   own display (flex/grid) — an element JS hides stays hidden. The doubled
   attribute lifts specificity above every single-class component rule
   regardless of stylesheet order (no !important needed). */
#puredesk-app [hidden][hidden] { display: none; }

/* ---------- Buttons ---------- */

#puredesk-app .puredesk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var(--pd-control-h);
	padding: 0 var(--pd-space-4);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	background: var(--pd-surface);
	color: var(--pd-text);
	font: inherit;
	font-size: var(--pd-text-sm);
	font-weight: var(--pd-weight-medium);
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--pd-duration) var(--pd-ease), border-color var(--pd-duration) var(--pd-ease), color var(--pd-duration) var(--pd-ease), box-shadow var(--pd-duration) var(--pd-ease), transform var(--pd-duration) var(--pd-ease);
	text-decoration: none;
	/* Neutralize the gradients/shadows WordPress admin paints on bare buttons. */
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
	box-shadow: var(--pd-shadow-xs);
	text-shadow: none;
	margin: 0;
}

#puredesk-app .puredesk-btn:hover { background: var(--pd-surface-2); border-color: var(--pd-border-strong); color: var(--pd-text); }
#puredesk-app .puredesk-btn:active { transform: translateY(1px); box-shadow: none; }
#puredesk-app .puredesk-btn:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-btn:disabled,
#puredesk-app .puredesk-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

#puredesk-app .puredesk-btn--primary {
	background: linear-gradient(180deg, color-mix(in srgb, var(--pd-accent) 92%, #fff) 0%, var(--pd-accent) 100%);
	background-color: var(--pd-accent);
	border-color: var(--pd-accent-strong);
	color: var(--pd-on-accent);
	box-shadow: var(--pd-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#puredesk-app .puredesk-btn--primary:hover { background: var(--pd-accent-strong); border-color: var(--pd-accent-strong); color: var(--pd-on-accent); }
#puredesk-app .puredesk-btn--danger { color: var(--pd-danger); }
#puredesk-app .puredesk-btn--danger:hover { background: var(--pd-danger-soft); border-color: var(--pd-danger); }

/*
 * Secondary = the neutral base button, named explicitly so dialogs can opt in
 * without inheriting whatever WordPress admin paints on bare <button>s.
 */
#puredesk-app .puredesk-btn--secondary { background: var(--pd-surface); border-color: var(--pd-border); color: var(--pd-text); }
#puredesk-app .puredesk-btn--secondary:hover:not(:disabled) { background: var(--pd-surface-2); border-color: var(--pd-border-strong); color: var(--pd-text); }
#puredesk-app .puredesk-btn--secondary:active:not(:disabled) { background: var(--pd-surface-2); border-color: var(--pd-border-strong); }

/*
 * Destructive = solid danger fill, for the confirm step of a delete.
 * (--danger stays the quiet text-only variant used by rows and the bulk bar.)
 */
#puredesk-app .puredesk-btn--destructive { background: var(--pd-danger); border-color: var(--pd-danger); color: var(--pd-on-danger); }
#puredesk-app .puredesk-btn--destructive:hover:not(:disabled) { background: var(--pd-danger-strong); border-color: var(--pd-danger-strong); color: var(--pd-on-danger); }
#puredesk-app .puredesk-btn--destructive:active:not(:disabled) { background: var(--pd-danger-strong); border-color: var(--pd-danger-strong); }
#puredesk-app .puredesk-btn--destructive:focus-visible { outline: none; box-shadow: var(--pd-ring-danger); }
#puredesk-app .puredesk-btn--destructive:disabled,
#puredesk-app .puredesk-btn--destructive[aria-disabled="true"] { background: var(--pd-danger); border-color: var(--pd-danger); color: var(--pd-on-danger); }

#puredesk-app .puredesk-btn--ghost { border-color: transparent; background: transparent; box-shadow: none; }
#puredesk-app .puredesk-btn--ghost:hover { background: var(--pd-surface-2); }
#puredesk-app .puredesk-btn--sm { height: var(--pd-control-h-sm); padding: 0 var(--pd-space-3); font-size: var(--pd-text-xs); }
#puredesk-app .puredesk-btn--lg { height: var(--pd-control-h-lg); padding: 0 var(--pd-space-5); font-size: var(--pd-text-md); }

#puredesk-app .puredesk-btn .puredesk-spinner { width: 12px; height: 12px; }

/* Icon button */

#puredesk-app .puredesk-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--pd-radius-sm);
	background: transparent;
	color: var(--pd-text-soft);
	cursor: pointer;
	transition: background var(--pd-duration) var(--pd-ease), color var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-icon-btn:hover { background: var(--pd-surface-2); color: var(--pd-text); }
#puredesk-app .puredesk-icon-btn:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-icon-btn svg { width: 16px; height: 16px; }

/* ---------- Spinner / skeleton ---------- */

#puredesk-app .puredesk-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--pd-border);
	border-top-color: var(--pd-accent);
	border-radius: var(--pd-radius-full);
	animation: puredesk-spin 0.7s linear infinite;
}

#puredesk-app .puredesk-skeleton {
	display: block;
	height: 12px;
	border-radius: var(--pd-radius-sm);
	background: linear-gradient(90deg, var(--pd-surface-2) 25%, var(--pd-border) 37%, var(--pd-surface-2) 63%);
	background-size: 400px 100%;
	animation: puredesk-shimmer 1.4s ease infinite;
}

#puredesk-app .puredesk-skeleton--row { height: 44px; margin: var(--pd-space-2) 0; }
#puredesk-app .puredesk-skeleton--card { height: 96px; border-radius: var(--pd-radius); }

/* ---------- Badges ---------- */

#puredesk-app .puredesk-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 var(--pd-space-1);
	border-radius: var(--pd-radius-full);
	background: var(--pd-danger);
	color: #fff;
	font-size: 11px;
	font-weight: var(--pd-weight-semibold);
	line-height: 1;
}

#puredesk-app .puredesk-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 var(--pd-space-2);
	border-radius: var(--pd-radius-full);
	background: var(--pd-surface-2);
	color: var(--pd-text-soft);
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-medium);
	line-height: 1;
	white-space: nowrap;
}

#puredesk-app .puredesk-pill .puredesk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* Status pill: colored via inline --pd-pill-color from the status record. */
#puredesk-app .puredesk-pill--status { color: var(--pd-pill-color, var(--pd-text-soft)); background: color-mix(in srgb, var(--pd-pill-color, var(--pd-text-soft)) 12%, transparent); }

/* Priority pill */
#puredesk-app .puredesk-pill--priority-low { color: var(--pd-priority-low); background: color-mix(in srgb, var(--pd-priority-low) 12%, transparent); }
#puredesk-app .puredesk-pill--priority-normal { color: var(--pd-priority-normal); background: color-mix(in srgb, var(--pd-priority-normal) 12%, transparent); }
#puredesk-app .puredesk-pill--priority-high { color: var(--pd-priority-high); background: color-mix(in srgb, var(--pd-priority-high) 12%, transparent); }
#puredesk-app .puredesk-pill--priority-urgent { color: var(--pd-priority-urgent); background: color-mix(in srgb, var(--pd-priority-urgent) 14%, transparent); }

/* Label chip */
#puredesk-app .puredesk-label-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 18px;
	padding: 0 var(--pd-space-2);
	border-radius: var(--pd-radius-full);
	border: 1px solid var(--pd-border);
	color: var(--pd-text-soft);
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
}

#puredesk-app .puredesk-label-chip .puredesk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pd-chip-color, var(--pd-text-faint)); }

/* ---------- Avatar ---------- */

#puredesk-app .puredesk-avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--pd-radius-full);
	object-fit: cover;
	background: var(--pd-surface-2);
	flex: none;
}

#puredesk-app .puredesk-avatar--lg { width: 40px; height: 40px; }
#puredesk-app .puredesk-avatar--sm { width: 20px; height: 20px; }
#puredesk-app .puredesk-avatar--lg { width: 48px; height: 48px; }

#puredesk-app .puredesk-avatar-stack { display: inline-flex; }
#puredesk-app .puredesk-avatar-stack .puredesk-avatar { margin-left: -8px; border: 2px solid var(--pd-surface); }
#puredesk-app .puredesk-avatar-stack .puredesk-avatar:first-child { margin-left: 0; }

/* ---------- Cards & panels ---------- */

#puredesk-app .puredesk-card {
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius);
	box-shadow: var(--pd-shadow-xs);
}

#puredesk-app .puredesk-card--interactive { transition: border-color var(--pd-duration) var(--pd-ease), box-shadow var(--pd-duration) var(--pd-ease); }
#puredesk-app .puredesk-card--interactive:hover { border-color: var(--pd-border-strong); box-shadow: var(--pd-shadow-sm); }

#puredesk-app .puredesk-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pd-space-3);
	padding: var(--pd-space-3) var(--pd-space-4);
	border-bottom: 1px solid var(--pd-border);
}

#puredesk-app .puredesk-card__title { margin: 0; font-size: var(--pd-text-sm); font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
#puredesk-app .puredesk-card__more { flex: none; font-size: var(--pd-text-xs); font-weight: var(--pd-weight-medium); color: var(--pd-accent); text-decoration: none; }
#puredesk-app .puredesk-card__more:hover { text-decoration: underline; }
#puredesk-app .puredesk-card__body { padding: var(--pd-space-4); }
#puredesk-app .puredesk-card__body--flush { padding: 0; }

#puredesk-app .puredesk-panel { border-top: 1px solid var(--pd-border); padding: var(--pd-space-3) var(--pd-space-4); }
#puredesk-app .puredesk-panel:first-child { border-top: 0; }
#puredesk-app .puredesk-panel__title {
	margin: 0 0 var(--pd-space-2);
	font-size: 11px;
	font-weight: var(--pd-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pd-text-faint);
}

/* Stat card */

#puredesk-app .puredesk-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--pd-space-4);
}

#puredesk-app .puredesk-stat__value { font-size: var(--pd-text-2xl); font-weight: var(--pd-weight-bold); line-height: var(--pd-leading-tight); color: var(--pd-text); }
#puredesk-app .puredesk-stat__label { font-size: var(--pd-text-sm); color: var(--pd-text-soft); }
#puredesk-app .puredesk-stat__hint { font-size: var(--pd-text-xs); color: var(--pd-text-faint); }
#puredesk-app .puredesk-stat--accent .puredesk-stat__value { color: var(--pd-accent); }

/* Shared icon-chip stat grid (admin dashboard, customer portal, profiles). */
#puredesk-app .puredesk-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--pd-space-3); }
#puredesk-app .puredesk-statgrid .puredesk-stat {
	flex-direction: row;
	align-items: center;
	gap: var(--pd-space-3);
	padding: var(--pd-space-3) var(--pd-space-4);
	text-decoration: none;
	transition: border-color var(--pd-duration) var(--pd-ease), box-shadow var(--pd-duration) var(--pd-ease), transform var(--pd-duration) var(--pd-ease);
}
#puredesk-app .puredesk-statgrid .puredesk-stat[role="link"],
#puredesk-app .puredesk-statgrid a.puredesk-stat { cursor: pointer; }
#puredesk-app .puredesk-statgrid .puredesk-stat[role="link"]:hover,
#puredesk-app .puredesk-statgrid a.puredesk-stat:hover {
	border-color: color-mix(in srgb, var(--pd-stat-color, var(--pd-accent)) 45%, var(--pd-border));
	box-shadow: var(--pd-shadow-sm);
	transform: translateY(-1px);
}
#puredesk-app .puredesk-statgrid .puredesk-stat:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-stat__chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--pd-radius);
	color: var(--pd-stat-color, var(--pd-accent));
	background: color-mix(in srgb, var(--pd-stat-color, var(--pd-accent)) 12%, transparent);
}
#puredesk-app .puredesk-stat__meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#puredesk-app .puredesk-stat__valuerow { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#puredesk-app .puredesk-statgrid .puredesk-stat__value { font-variant-numeric: tabular-nums; }
#puredesk-app .puredesk-statgrid .puredesk-stat__label { font-size: var(--pd-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Forms ---------- */

#puredesk-app .puredesk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--pd-space-4); }
#puredesk-app .puredesk-field__label { font-size: var(--pd-text-sm); font-weight: var(--pd-weight-medium); color: var(--pd-text); }
#puredesk-app .puredesk-field__help { font-size: var(--pd-text-xs); color: var(--pd-text-faint); }
#puredesk-app .puredesk-field__error { font-size: var(--pd-text-xs); color: var(--pd-danger); }
#puredesk-app .puredesk-field--invalid .puredesk-input,
#puredesk-app .puredesk-field--invalid .puredesk-textarea,
#puredesk-app .puredesk-field--invalid .puredesk-select { border-color: var(--pd-danger); }

#puredesk-app .puredesk-input,
#puredesk-app .puredesk-textarea,
#puredesk-app .puredesk-select {
	width: 100%;
	min-height: var(--pd-control-h);
	padding: 7px 11px;
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	background: var(--pd-surface);
	color: var(--pd-text);
	font: inherit;
	font-size: var(--pd-text-sm);
	line-height: var(--pd-leading);
	transition: border-color var(--pd-duration) var(--pd-ease), box-shadow var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease);
	box-shadow: var(--pd-shadow-xs);
}

#puredesk-app .puredesk-input:hover,
#puredesk-app .puredesk-textarea:hover,
#puredesk-app .puredesk-select:hover { border-color: var(--pd-border-strong); }

#puredesk-app .puredesk-input:focus,
#puredesk-app .puredesk-textarea:focus,
#puredesk-app .puredesk-select:focus { outline: none; border-color: var(--pd-accent); box-shadow: var(--pd-ring-soft); }

#puredesk-app .puredesk-input::placeholder,
#puredesk-app .puredesk-textarea::placeholder { color: var(--pd-text-faint); opacity: 1; }

#puredesk-app .puredesk-input:disabled,
#puredesk-app .puredesk-textarea:disabled,
#puredesk-app .puredesk-select:disabled { background: var(--pd-surface-2); color: var(--pd-text-faint); cursor: not-allowed; box-shadow: none; }

#puredesk-app .puredesk-textarea { resize: vertical; min-height: 80px; }

/* Selects (whether classed .puredesk-select or built as select.puredesk-input):
   native arrow replaced with a token-colored chevron. */
#puredesk-app select.puredesk-input,
#puredesk-app .puredesk-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 32px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23828a9b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
}

/* Date inputs: align the picker affordance with the control rhythm. */
#puredesk-app input[type="date"].puredesk-input { cursor: pointer; }
#puredesk-app input[type="date"].puredesk-input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
#puredesk-app input[type="date"].puredesk-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Checkboxes + radios: native controls, token-accented and rhythm-sized. */
#puredesk-app .puredesk-checkbox,
#puredesk-app .puredesk-radio { display: inline-flex; align-items: center; gap: 8px; font-size: var(--pd-text-sm); color: var(--pd-text); cursor: pointer; }

#puredesk-app .puredesk-checkbox input[type="checkbox"],
#puredesk-app .puredesk-radio input[type="radio"],
#puredesk-app input[type="checkbox"].puredesk-check,
#puredesk-app input[type="radio"].puredesk-check {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--pd-accent);
	cursor: pointer;
	flex: none;
}

#puredesk-app .puredesk-checkbox input[type="checkbox"]:focus-visible,
#puredesk-app .puredesk-radio input[type="radio"]:focus-visible { outline: none; box-shadow: var(--pd-ring); border-radius: 3px; }

/* Switch: <label class="puredesk-switch"><input type="checkbox"><span
   class="puredesk-switch__track"></span> Label</label> */
#puredesk-app .puredesk-switch { display: inline-flex; align-items: center; gap: 8px; font-size: var(--pd-text-sm); color: var(--pd-text); cursor: pointer; }
#puredesk-app .puredesk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
#puredesk-app .puredesk-switch__track {
	position: relative;
	width: 34px;
	height: 20px;
	border-radius: var(--pd-radius-full);
	background: var(--pd-border-strong);
	transition: background var(--pd-duration) var(--pd-ease);
	flex: none;
}
#puredesk-app .puredesk-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--pd-shadow-xs);
	transition: transform var(--pd-duration) var(--pd-ease);
}
#puredesk-app .puredesk-switch input:checked + .puredesk-switch__track { background: var(--pd-accent); }
#puredesk-app .puredesk-switch input:checked + .puredesk-switch__track::after { transform: translateX(14px); }
#puredesk-app .puredesk-switch input:focus-visible + .puredesk-switch__track { box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-switch input:disabled + .puredesk-switch__track { opacity: 0.5; cursor: not-allowed; }

/* Search box */

#puredesk-app .puredesk-search { position: relative; }
#puredesk-app .puredesk-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--pd-text-faint); pointer-events: none; }
#puredesk-app .puredesk-search .puredesk-input { padding-left: 30px; }
#puredesk-app .puredesk-search__kbd {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Kbd hint */

#puredesk-app .puredesk-kbd {
	display: inline-block;
	min-width: 18px;
	padding: 2px 5px;
	border: 1px solid var(--pd-border);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: var(--pd-surface-2);
	color: var(--pd-text-faint);
	font-family: var(--pd-font-mono);
	font-size: 10px;
	line-height: 1;
	text-align: center;
}

/* ---------- Tabs ---------- */

#puredesk-app .puredesk-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pd-space-1);
	padding: var(--pd-space-3) var(--pd-space-4) 0;
	border-bottom: 1px solid var(--pd-border);
	background: var(--pd-surface);
}

#puredesk-app .puredesk-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: var(--pd-radius-sm) var(--pd-radius-sm) 0 0;
	padding: var(--pd-space-2) var(--pd-space-3);
	font: inherit;
	font-size: var(--pd-text-sm);
	color: var(--pd-text-soft);
	cursor: pointer;
	transition: color var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-tab:hover { color: var(--pd-text); background: var(--pd-surface-2); }
#puredesk-app .puredesk-tab:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: -2px; }
#puredesk-app .puredesk-tab.is-active { color: var(--pd-accent); border-bottom-color: var(--pd-accent); font-weight: var(--pd-weight-semibold); }

/* ---------- Breadcrumb ---------- */

#puredesk-app .puredesk-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--pd-text-sm); color: var(--pd-text-faint); min-width: 0; }
#puredesk-app .puredesk-breadcrumb a { color: var(--pd-text-soft); text-decoration: none; }
#puredesk-app .puredesk-breadcrumb a:hover { color: var(--pd-accent); }
#puredesk-app .puredesk-breadcrumb__sep { color: var(--pd-border-strong); }
#puredesk-app .puredesk-breadcrumb__current { color: var(--pd-text); font-weight: var(--pd-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Dropdown ---------- */

#puredesk-app .puredesk-dropdown { position: relative; display: inline-flex; }

#puredesk-app .puredesk-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: var(--pd-z-dropdown);
	min-width: 200px;
	max-height: 320px;
	overflow: auto;
	padding: var(--pd-space-1);
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius);
	box-shadow: var(--pd-shadow-lg);
	animation: puredesk-pop-in var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-menu--right { left: auto; right: 0; }
#puredesk-app .puredesk-menu--up { top: auto; bottom: calc(100% + 4px); }

#puredesk-app .puredesk-menu__item {
	display: flex;
	align-items: center;
	gap: var(--pd-space-2);
	width: 100%;
	padding: 7px 10px;
	border: 0;
	border-radius: var(--pd-radius-sm);
	background: transparent;
	color: var(--pd-text);
	font: inherit;
	font-size: var(--pd-text-sm);
	text-align: left;
	cursor: pointer;
	text-decoration: none;
}

#puredesk-app .puredesk-menu__item:hover,
#puredesk-app .puredesk-menu__item.is-active { background: var(--pd-surface-2); }
#puredesk-app .puredesk-menu__item:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-menu__item.is-selected { color: var(--pd-accent); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-menu__item--danger { color: var(--pd-danger); }
#puredesk-app .puredesk-menu__sep { height: 1px; margin: var(--pd-space-1) 0; background: var(--pd-border); }
#puredesk-app .puredesk-menu__header { padding: 6px 10px 4px; font-size: 11px; font-weight: var(--pd-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--pd-text-faint); }
#puredesk-app .puredesk-menu__search { padding: var(--pd-space-1); border-bottom: 1px solid var(--pd-border); margin-bottom: var(--pd-space-1); }
#puredesk-app .puredesk-menu__empty { padding: var(--pd-space-3); color: var(--pd-text-faint); font-size: var(--pd-text-sm); text-align: center; }

/* ---------- Tooltip ---------- */

#puredesk-app .puredesk-tooltip {
	position: fixed;
	z-index: var(--pd-z-toast);
	max-width: 240px;
	padding: 5px 9px;
	border-radius: var(--pd-radius-sm);
	background: var(--pd-text);
	color: var(--pd-surface);
	font-size: var(--pd-text-xs);
	line-height: 1.4;
	pointer-events: none;
	animation: puredesk-fade-in var(--pd-duration) var(--pd-ease);
}

/* ---------- Modal ---------- */

#puredesk-app .puredesk-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--pd-z-modal);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 8vh var(--pd-space-4) var(--pd-space-4);
	background: var(--pd-overlay);
	backdrop-filter: blur(2px);
	animation: puredesk-fade-in var(--pd-duration) var(--pd-ease);
	overflow-y: auto;
}

#puredesk-app .puredesk-modal {
	width: 100%;
	max-width: 520px;
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	box-shadow: var(--pd-shadow-lg);
	animation: puredesk-pop-in var(--pd-duration-slow) var(--pd-ease);
}

#puredesk-app .puredesk-modal--lg { max-width: 720px; }
#puredesk-app .puredesk-modal--buyer { max-width: 560px; }

#puredesk-app .puredesk-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pd-space-3);
	padding: var(--pd-space-4);
	border-bottom: 1px solid var(--pd-border);
}

#puredesk-app .puredesk-modal__title { margin: 0; font-size: var(--pd-text-lg); font-weight: var(--pd-weight-semibold); }
#puredesk-app .puredesk-modal__body { padding: var(--pd-space-4); max-height: 60vh; overflow-y: auto; }
#puredesk-app .puredesk-modal__footer { display: flex; justify-content: flex-end; gap: var(--pd-space-2); padding: var(--pd-space-3) var(--pd-space-4); border-top: 1px solid var(--pd-border); }

/* ---------- Confirm dialog ---------- */

#puredesk-app .puredesk-modal--confirm { max-width: 440px; }
#puredesk-app .puredesk-confirm__message { margin: 0; color: var(--pd-text-soft); font-size: var(--pd-text-sm); line-height: 1.55; }
#puredesk-app .puredesk-modal--confirm .puredesk-modal__body { padding-bottom: var(--pd-space-5); }
#puredesk-app .puredesk-modal--confirm .puredesk-modal__footer .puredesk-btn { min-width: 92px; }

@media (max-width: 600px) {
	#puredesk-app .puredesk-overlay { padding: var(--pd-space-5) var(--pd-space-3) var(--pd-space-4); }
	#puredesk-app .puredesk-modal--confirm .puredesk-modal__footer { flex-direction: column-reverse; align-items: stretch; }
	#puredesk-app .puredesk-modal--confirm .puredesk-modal__footer .puredesk-btn { width: 100%; }
}

/* ---------- Drawer ---------- */

#puredesk-app .puredesk-drawer-overlay { position: fixed; inset: 0; z-index: var(--pd-z-drawer); background: rgba(15, 18, 25, 0.4); animation: puredesk-fade-in var(--pd-duration) var(--pd-ease); }

#puredesk-app .puredesk-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: var(--pd-z-drawer);
	width: min(420px, 92vw);
	display: flex;
	flex-direction: column;
	background: var(--pd-surface);
	border-left: 1px solid var(--pd-border);
	box-shadow: var(--pd-shadow-lg);
	animation: puredesk-slide-in-right var(--pd-duration-slow) var(--pd-ease);
}

#puredesk-app .puredesk-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--pd-space-4); border-bottom: 1px solid var(--pd-border); }
#puredesk-app .puredesk-drawer__title { margin: 0; font-size: var(--pd-text-lg); font-weight: var(--pd-weight-semibold); }
#puredesk-app .puredesk-drawer__body { flex: 1; overflow-y: auto; padding: var(--pd-space-4); }

/* ---------- Toast ---------- */

#puredesk-app .puredesk-toasts {
	position: fixed;
	bottom: var(--pd-space-5);
	right: var(--pd-space-5);
	z-index: var(--pd-z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--pd-space-2);
	pointer-events: none;
}

#puredesk-app .puredesk-toast {
	display: flex;
	align-items: center;
	gap: var(--pd-space-2);
	min-width: 220px;
	max-width: 360px;
	padding: var(--pd-space-3) var(--pd-space-4);
	border-radius: var(--pd-radius);
	border: 1px solid var(--pd-border);
	border-left: 3px solid var(--pd-info);
	background: var(--pd-surface);
	color: var(--pd-text);
	font-size: var(--pd-text-sm);
	font-weight: var(--pd-weight-medium);
	box-shadow: var(--pd-shadow-lg);
	pointer-events: auto;
	animation: puredesk-slide-in-right var(--pd-duration-slow) var(--pd-ease);
}

#puredesk-app .puredesk-toast--success { border-left-color: var(--pd-success); }
#puredesk-app .puredesk-toast--error { border-left-color: var(--pd-danger); }
#puredesk-app .puredesk-toast--warning { border-left-color: var(--pd-warning); }

/* ---------- Table / data grid ---------- */

#puredesk-app .puredesk-table-wrap { overflow-x: auto; }

#puredesk-app .puredesk-table { width: 100%; border-collapse: collapse; font-size: var(--pd-text-sm); }
#puredesk-app .puredesk-table th {
	padding: var(--pd-space-2) var(--pd-space-3);
	border-bottom: 1px solid var(--pd-border);
	background: var(--pd-surface);
	color: var(--pd-text-faint);
	font-size: 11px;
	font-weight: var(--pd-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--pd-tracking-wide);
	text-align: left;
	white-space: nowrap;
}

#puredesk-app .puredesk-table td { padding: var(--pd-space-3); border-bottom: 1px solid var(--pd-border); color: var(--pd-text); vertical-align: middle; }
#puredesk-app .puredesk-table tr:last-child td { border-bottom: 0; }
#puredesk-app .puredesk-table tbody tr { transition: background var(--pd-duration) var(--pd-ease); }
#puredesk-app .puredesk-table tbody tr:hover { background: var(--pd-surface-2); }

/* Opt-in sticky header for tall scrollable tables. */
#puredesk-app .puredesk-table--sticky thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--pd-border); border-bottom: 0; }

/* ---------- Pagination ---------- */

#puredesk-app .puredesk-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-3); padding: var(--pd-space-3) var(--pd-space-4); font-size: var(--pd-text-sm); color: var(--pd-text-soft); }
#puredesk-app .puredesk-pagination__controls { display: flex; align-items: center; gap: var(--pd-space-1); }

/* ---------- Empty state ---------- */

#puredesk-app .puredesk-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--pd-space-2);
	padding: var(--pd-space-8) var(--pd-space-6);
	min-height: 220px;
}

#puredesk-app .puredesk-empty-state h2,
#puredesk-app .puredesk-empty-state__title { font-size: var(--pd-text-lg); font-weight: var(--pd-weight-semibold); margin: 0; color: var(--pd-text); }
#puredesk-app .puredesk-empty-state p { max-width: 46ch; margin: 0; color: var(--pd-text-soft); }
#puredesk-app .puredesk-empty-state svg { width: 40px; height: 40px; color: var(--pd-text-faint); }

/* ---------- Timeline / activity ---------- */

#puredesk-app .puredesk-timeline { list-style: none; margin: 0; padding: 0; }

#puredesk-app .puredesk-activity {
	position: relative;
	display: flex;
	gap: var(--pd-space-3);
	padding: var(--pd-space-2) 0 var(--pd-space-2) var(--pd-space-4);
	font-size: var(--pd-text-sm);
	color: var(--pd-text-soft);
}

#puredesk-app .puredesk-activity::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--pd-border);
}

#puredesk-app .puredesk-activity::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 14px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pd-border-strong);
}

#puredesk-app .puredesk-activity:first-child::before { top: 14px; }
#puredesk-app .puredesk-activity:last-child::before { bottom: auto; height: 14px; }
#puredesk-app .puredesk-activity strong { color: var(--pd-text); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-activity__text { min-width: 0; }
#puredesk-app .puredesk-activity time { margin-left: auto; flex: none; color: var(--pd-text-faint); font-size: var(--pd-text-xs); }

/* ---------- Attachment card ---------- */

#puredesk-app .puredesk-attachments { display: flex; flex-wrap: wrap; gap: var(--pd-space-2); }

#puredesk-app .puredesk-attachment {
	display: flex;
	align-items: center;
	gap: var(--pd-space-2);
	max-width: 220px;
	padding: var(--pd-space-1) var(--pd-space-2) var(--pd-space-1) var(--pd-space-1);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	background: var(--pd-surface);
	color: var(--pd-text);
	font-size: var(--pd-text-xs);
	text-decoration: none;
	transition: border-color var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-attachment:hover { border-color: var(--pd-accent); background: var(--pd-accent-soft); }
#puredesk-app .puredesk-attachment__thumb { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; background: var(--pd-surface-2); flex: none; display: flex; align-items: center; justify-content: center; color: var(--pd-text-faint); }
#puredesk-app .puredesk-attachment__meta { min-width: 0; }
#puredesk-app .puredesk-attachment__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-attachment__size { color: var(--pd-text-faint); }
#puredesk-app .puredesk-attachment__remove { margin-left: 2px; }

/* ---------- Filter bar ---------- */

#puredesk-app .puredesk-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pd-space-2);
	padding: var(--pd-space-3) var(--pd-space-4);
	border-bottom: 1px solid var(--pd-border);
	background: var(--pd-surface);
}

#puredesk-app .puredesk-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 var(--pd-space-2);
	border: 1px dashed var(--pd-border-strong);
	border-radius: var(--pd-radius-full);
	background: transparent;
	color: var(--pd-text-soft);
	font: inherit;
	font-size: var(--pd-text-xs);
	cursor: pointer;
	transition: border-color var(--pd-duration) var(--pd-ease), color var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-filter-chip:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
#puredesk-app .puredesk-filter-chip:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-filter-chip.is-active { border-style: solid; border-color: var(--pd-accent); background: var(--pd-accent-soft); color: var(--pd-accent); font-weight: var(--pd-weight-medium); }

/* ---------- Bulk bar ---------- */

#puredesk-app .puredesk-bulkbar {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: var(--pd-space-2);
	padding: var(--pd-space-2) var(--pd-space-4);
	background: var(--pd-surface);
	border-top: 2px solid var(--pd-accent);
	box-shadow: var(--pd-shadow);
	animation: puredesk-pop-in var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-bulkbar__count { font-size: var(--pd-text-sm); font-weight: var(--pd-weight-semibold); color: var(--pd-accent); margin-right: var(--pd-space-2); }

/* Reduced motion: collapse all animation to none. */
@media (prefers-reduced-motion: reduce) {
	#puredesk-app .puredesk-menu,
	#puredesk-app .puredesk-modal,
	#puredesk-app .puredesk-overlay,
	#puredesk-app .puredesk-drawer,
	#puredesk-app .puredesk-drawer-overlay,
	#puredesk-app .puredesk-toast,
	#puredesk-app .puredesk-tooltip,
	#puredesk-app .puredesk-bulkbar { animation: none; }
	#puredesk-app .puredesk-skeleton { animation-duration: 3s; }
}

/* ==== Shared ticket UI (moved from admin.css — used by admin + customer portal) ==== */

/* ---------- Inbox ---------- */

#puredesk-app .puredesk-inbox { display: flex; flex-direction: column; }

#puredesk-app .puredesk-inbox__toolbar { display: flex; align-items: center; gap: var(--pd-space-3); padding: var(--pd-space-3) var(--pd-space-4); border-bottom: 1px solid var(--pd-border); }
#puredesk-app .puredesk-inbox__toolbar .puredesk-search { flex: 1; max-width: 380px; }

#puredesk-app .puredesk-ticket-list { list-style: none; margin: 0; padding: 0; }

#puredesk-app .puredesk-ticket-row {
	display: grid;
	grid-template-columns: 34px 10px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--pd-space-2);
	padding: var(--pd-space-2) var(--pd-space-4);
	border-bottom: 1px solid var(--pd-border);
	cursor: pointer;
	transition: background var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-ticket-row:hover,
#puredesk-app .puredesk-ticket-row.is-focused { background: var(--pd-surface-2); }
#puredesk-app .puredesk-ticket-row.is-focused { box-shadow: inset 2px 0 0 var(--pd-accent); }
#puredesk-app .puredesk-ticket-row.is-selected { background: var(--pd-accent-soft); }
#puredesk-app .puredesk-ticket-row:focus-visible { outline: none; box-shadow: var(--pd-ring); }

#puredesk-app .puredesk-ticket-row__unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
#puredesk-app .puredesk-ticket-row--awaiting .puredesk-ticket-row__unread { background: var(--pd-accent); }
#puredesk-app .puredesk-ticket-row--awaiting .puredesk-ticket-row__subject { font-weight: var(--pd-weight-semibold); }

#puredesk-app .puredesk-ticket-row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#puredesk-app .puredesk-ticket-row__top { display: flex; align-items: center; gap: var(--pd-space-2); min-width: 0; }
#puredesk-app .puredesk-ticket-row__id { color: var(--pd-text-faint); font-size: var(--pd-text-xs); font-family: var(--pd-font-mono); flex: none; }
#puredesk-app .puredesk-ticket-row__subject { font-size: var(--pd-text-sm); color: var(--pd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#puredesk-app .puredesk-ticket-row__meta { display: flex; align-items: center; gap: var(--pd-space-2); min-width: 0; font-size: var(--pd-text-xs); color: var(--pd-text-faint); flex-wrap: wrap; }

#puredesk-app .puredesk-ticket-row__side { display: flex; align-items: center; gap: var(--pd-space-3); flex: none; }
#puredesk-app .puredesk-ticket-row__time { font-size: var(--pd-text-xs); color: var(--pd-text-faint); min-width: 48px; text-align: right; }

#puredesk-app .puredesk-convo { display: flex; flex-direction: column; min-width: 0; }

#puredesk-app .puredesk-convo__header { display: flex; align-items: center; gap: var(--pd-space-3); padding: var(--pd-space-3) var(--pd-space-4); border-bottom: 1px solid var(--pd-border); flex-wrap: wrap; }
#puredesk-app .puredesk-convo__title { margin: 0; font-size: var(--pd-text-lg); font-weight: var(--pd-weight-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
#puredesk-app .puredesk-convo__actions { display: flex; align-items: center; gap: var(--pd-space-2); flex-wrap: wrap; }

#puredesk-app .puredesk-convo__stream { display: flex; flex-direction: column; gap: var(--pd-space-4); padding: var(--pd-space-4); max-height: 60vh; overflow-y: auto; scroll-behavior: smooth; }

#puredesk-app .puredesk-message { display: flex; gap: var(--pd-space-3); max-width: 88%; }
#puredesk-app .puredesk-message--agent { align-self: flex-end; flex-direction: row-reverse; }

#puredesk-app .puredesk-message__bubble {
	padding: var(--pd-space-3) var(--pd-space-4);
	border-radius: var(--pd-radius-lg);
	border-top-left-radius: var(--pd-radius-sm);
	background: var(--pd-surface-2);
	border: 1px solid var(--pd-border);
	box-shadow: var(--pd-shadow-xs);
	min-width: 0;
}

#puredesk-app .puredesk-message--agent .puredesk-message__bubble {
	border-top-left-radius: var(--pd-radius-lg);
	border-top-right-radius: var(--pd-radius-sm);
	background: var(--pd-accent-soft);
	border-color: color-mix(in srgb, var(--pd-accent) 24%, transparent);
}
#puredesk-app .puredesk-message--note .puredesk-message__bubble { background: var(--pd-note-bg); border-color: var(--pd-note-border); border-style: dashed; }

#puredesk-app .puredesk-message__head { display: flex; align-items: baseline; gap: var(--pd-space-2); margin-bottom: var(--pd-space-1); font-size: var(--pd-text-xs); color: var(--pd-text-faint); flex-wrap: wrap; }
#puredesk-app .puredesk-message__author { font-weight: var(--pd-weight-semibold); color: var(--pd-text); font-size: var(--pd-text-sm); text-transform: capitalize;}
#puredesk-app .puredesk-message__note-tag { color: var(--pd-warning); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-message__body { font-size: var(--pd-text-md); color: var(--pd-text); overflow-wrap: anywhere; }
#puredesk-app .puredesk-message__body ul {
	padding-left: 14px;
}
#puredesk-app .puredesk-message__body p { margin: 0 0 var(--pd-space-2); }
#puredesk-app .puredesk-message__body p:last-child { margin-bottom: 0; }
#puredesk-app .puredesk-message__body pre { background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-sm); padding: var(--pd-space-2); overflow-x: auto; font-family: var(--pd-font-mono); font-size: var(--pd-text-sm); }
#puredesk-app .puredesk-message__body code { font-family: var(--pd-font-mono); font-size: 0.92em; background: var(--pd-surface); padding: 1px 4px; border-radius: 3px; }
#puredesk-app .puredesk-message__body img { max-width: 100%; border-radius: var(--pd-radius-sm); }
#puredesk-app .puredesk-message__body blockquote { margin: 0 0 var(--pd-space-2); padding-left: var(--pd-space-3); border-left: 3px solid var(--pd-border-strong); color: var(--pd-text-soft); }
#puredesk-app .puredesk-message .puredesk-attachments { margin-top: var(--pd-space-2); }

/* Event row inside conversation */
#puredesk-app .puredesk-convo-event { display: flex; align-items: center; gap: var(--pd-space-2); align-self: center; color: var(--pd-text-faint); font-size: var(--pd-text-xs); }
#puredesk-app .puredesk-convo-event::before,
#puredesk-app .puredesk-convo-event::after { content: ""; flex: 1; min-width: 32px; height: 1px; background: var(--pd-border); }

/* ---------- Reply editor ---------- */

#puredesk-app .puredesk-editor { border-top: 1px solid var(--pd-border); padding-top: 20px;}

#puredesk-app .puredesk-editor__tabs { display: flex; gap: var(--pd-space-1); padding: var(--pd-space-2) var(--pd-space-4) 0; margin-bottom: 9px;}

#puredesk-app .puredesk-editor__mode {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--pd-text-sm);
	padding: 6px 10px;
	border-radius: var(--pd-radius-sm) var(--pd-radius-sm) 0 0;
	color: var(--pd-text-soft);
	cursor: pointer;
}

#puredesk-app .puredesk-editor__mode.is-active { background: var(--pd-surface-2); color: var(--pd-text); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-editor__mode--note.is-active { background: var(--pd-note-bg); color: var(--pd-warning); }
#puredesk-app .puredesk-editor__mode:focus-visible { outline: none; box-shadow: var(--pd-ring); }

#puredesk-app .puredesk-editor__surface { margin: 0 var(--pd-space-4) var(--pd-space-3); border: 1px solid var(--pd-border); border-radius: var(--pd-radius); background: var(--pd-surface); transition: border-color var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease); }
#puredesk-app .puredesk-editor__surface:focus-within { border-color: var(--pd-accent); box-shadow: 0 0 0 3px var(--pd-accent-soft); }
#puredesk-app .puredesk-editor--note .puredesk-editor__surface { background: var(--pd-note-bg); border-color: var(--pd-note-border); }
#puredesk-app .puredesk-editor--note .puredesk-editor__surface:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-warning) 18%, transparent); }

#puredesk-app .puredesk-editor__toolbar { display: flex; align-items: center; gap: 2px; padding: var(--pd-space-1) var(--pd-space-2); border-bottom: 1px solid var(--pd-border); flex-wrap: wrap; }
#puredesk-app .puredesk-editor--note .puredesk-editor__toolbar { border-color: var(--pd-note-border); }

#puredesk-app .puredesk-editor__input {
	min-height: 96px;
	max-height: 320px;
	overflow-y: auto;
	padding: var(--pd-space-3) var(--pd-space-4);
	font-size: var(--pd-text-md);
	line-height: var(--pd-leading);
	color: var(--pd-text);
	outline: none;
	overflow-wrap: anywhere;
}

#puredesk-app .puredesk-editor__input:empty::before { content: attr(data-placeholder); color: var(--pd-text-faint); pointer-events: none; }
#puredesk-app .puredesk-editor__input pre { background: var(--pd-surface-2); border-radius: var(--pd-radius-sm); padding: var(--pd-space-2); font-family: var(--pd-font-mono); font-size: var(--pd-text-sm); }

#puredesk-app .puredesk-editor__footer { display: flex; align-items: center; gap: var(--pd-space-2); padding: var(--pd-space-2) var(--pd-space-4) var(--pd-space-3); }
#puredesk-app .puredesk-editor__status { font-size: var(--pd-text-xs); color: var(--pd-text-faint); }
#puredesk-app .puredesk-editor__footer .puredesk-btn--primary { margin-left: auto; }

/* Drag-over state */
#puredesk-app .puredesk-editor__surface.is-dragover { border-color: var(--pd-accent); background: var(--pd-accent-soft); }
#puredesk-app .puredesk-editor__drophint { display: none; padding: var(--pd-space-2) var(--pd-space-4); font-size: var(--pd-text-xs); color: var(--pd-accent); }
#puredesk-app .puredesk-editor__surface.is-dragover .puredesk-editor__drophint { display: block; }


/* ---------- Message hover actions (edit/delete) ---------- */

#puredesk-app .puredesk-message__actions { display: inline-flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--pd-duration) var(--pd-ease); }
#puredesk-app .puredesk-message:hover .puredesk-message__actions,
#puredesk-app .puredesk-message__actions:focus-within { opacity: 1; }
#puredesk-app .puredesk-message__actions .puredesk-icon-btn { width: 22px; height: 22px; }


/* ---------- Email templates (list badges, editor, live preview) ---------- */

#puredesk-app .puredesk-modal--xl { max-width: 1080px; }

#puredesk-app .puredesk-badge--success { background: color-mix(in srgb, var(--pd-priority-low) 15%, transparent); color: var(--pd-priority-low); }
#puredesk-app .puredesk-badge--muted { background: var(--pd-surface-2); color: var(--pd-text-faint); }

#puredesk-app .puredesk-muted { color: var(--pd-text-faint); font-size: var(--pd-text-sm); }
#puredesk-app .puredesk-field__hint { margin: var(--pd-space-1) 0 0; font-size: var(--pd-text-xs); color: var(--pd-text-faint); }

#puredesk-app .puredesk-code-input { font-family: var(--pd-font-mono); font-size: var(--pd-text-sm); line-height: 1.5; resize: vertical; }

#puredesk-app .puredesk-ph-list { display: flex; flex-wrap: wrap; gap: var(--pd-space-1); }
#puredesk-app .puredesk-ph-chip {
	font-family: var(--pd-font-mono);
	font-size: var(--pd-text-xs);
	color: var(--pd-accent);
	background: var(--pd-accent-soft);
	border: 1px solid transparent;
	border-radius: var(--pd-radius-sm);
	padding: 2px 8px;
	cursor: pointer;
}
#puredesk-app .puredesk-ph-chip:hover,
#puredesk-app .puredesk-ph-chip:focus-visible { border-color: var(--pd-accent); }

#puredesk-app .puredesk-template-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pd-space-5); }
#puredesk-app .puredesk-template-preview-pane { display: flex; flex-direction: column; gap: var(--pd-space-2); min-width: 0; }
#puredesk-app .puredesk-preview-subject {
	font-weight: 600;
	padding: var(--pd-space-2) var(--pd-space-3);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	background: var(--pd-surface-2);
	overflow-wrap: anywhere;
}
#puredesk-app .puredesk-preview-frame {
	width: 100%;
	flex: 1;
	min-height: 340px;
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	background: #fff;
}

@media (max-width: 960px) {
	#puredesk-app .puredesk-template-editor { grid-template-columns: 1fr; }
}

/* ---------- IMAP connection tester ---------- */

#puredesk-app .puredesk-imap-ok { color: var(--pd-priority-low); }

/* ---------- Email Piping settings (M-5) ---------- */

#puredesk-app .puredesk-notice {
	margin: 4px 0 0;
	padding: 10px 12px;
	font-size: var(--pd-text-xs);
	color: var(--pd-text-soft);
	background: var(--pd-surface-2, rgba(0, 0, 0, 0.03));
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
}

#puredesk-app .puredesk-notice--warning {
	color: var(--pd-warning);
	border-color: var(--pd-warning);
	background: transparent;
}

#puredesk-app .puredesk-pipe-status__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 8px 0 0;
	font-size: var(--pd-text-sm);
}

#puredesk-app .puredesk-pipe-status__list dt { color: var(--pd-text-faint); }
#puredesk-app .puredesk-pipe-status__list dd { margin: 0; color: var(--pd-text); }
#puredesk-app .puredesk-pipe-status--ok { color: var(--pd-success); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-pipe-status--failed { color: var(--pd-danger); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-pipe-status .puredesk-card__title + .puredesk-card__title,
#puredesk-app .puredesk-pipe-status .puredesk-pipe-status__list + .puredesk-card__title { margin-top: 16px; }

/* ---------- Inbound Email Log (M-6) ---------- */

#puredesk-app .puredesk-inbound-reason { max-width: 480px; overflow-wrap: anywhere; color: var(--pd-text-soft); }

/* ---------- Envato integration ---------- */

#puredesk-app .puredesk-envato-profile {
	margin: 8px 0;
	padding: 12px;
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	display: grid;
	gap: 10px;
}

#puredesk-app .puredesk-envato-profile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#puredesk-app .puredesk-envato-status--active { color: var(--pd-success); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-envato-status--expired { color: var(--pd-danger); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-envato-status--unknown { color: var(--pd-text-faint); }

#puredesk-app .puredesk-envato-summary {
	display: flex;
	align-items: flex-start;
	gap: var(--pd-space-3);
	margin-top: var(--pd-space-2);
	padding: var(--pd-space-3) var(--pd-space-4);
	border: 1px solid color-mix(in srgb, var(--pd-success) 35%, var(--pd-border));
	border-radius: var(--pd-radius);
	background: color-mix(in srgb, var(--pd-success) 6%, var(--pd-surface));
	color: var(--pd-text);
	font-size: var(--pd-text-sm);
}

#puredesk-app .puredesk-envato-summary svg { color: var(--pd-success); flex: none; }
#puredesk-app .puredesk-envato-summary__check {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--pd-radius-full);
	background: color-mix(in srgb, var(--pd-success) 14%, transparent);
}
#puredesk-app .puredesk-envato-summary__meta { min-width: 0; flex: 1; }
#puredesk-app .puredesk-envato-summary__source {
	display: inline-block;
	padding: 0 6px;
	border-radius: var(--pd-radius-full);
	font-size: 10px;
	font-weight: var(--pd-weight-semibold);
	letter-spacing: 0.03em;
	color: var(--pd-success);
	background: color-mix(in srgb, var(--pd-success) 12%, transparent);
	vertical-align: 2px;
}
#puredesk-app .puredesk-envato-summary__remove {
	flex: none;
	border: 0;
	background: transparent;
	padding: 2px 4px;
	font: inherit;
	font-size: var(--pd-text-xs);
	color: var(--pd-text-faint);
	cursor: pointer;
	border-radius: var(--pd-radius-sm);
}
#puredesk-app .puredesk-envato-summary__remove:hover { color: var(--pd-danger); }
#puredesk-app .puredesk-envato-summary__remove:focus-visible { outline: none; box-shadow: var(--pd-ring); }

/* AI assistant chip: icon + text (never color alone). */
#puredesk-app .puredesk-ai-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px;
	border-radius: var(--pd-radius-full);
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-medium);
	color: var(--pd-accent);
	background: var(--pd-accent-soft);
	white-space: nowrap;
}
#puredesk-app .puredesk-ai-chip svg { flex: none; }
#puredesk-app .puredesk-ai-chip--danger { color: var(--pd-danger); background: color-mix(in srgb, var(--pd-danger) 10%, transparent); }
#puredesk-app .puredesk-ai-chip--success { color: var(--pd-success); background: color-mix(in srgb, var(--pd-success) 10%, transparent); }
#puredesk-app .puredesk-ai-chip--info { color: var(--pd-info); background: color-mix(in srgb, var(--pd-info) 10%, transparent); }

/* Assistant typing indicator inside the conversation stream. */
#puredesk-app .puredesk-ai-typing {
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: var(--pd-space-2) var(--pd-space-3);
	border-radius: var(--pd-radius-lg);
	background: var(--pd-surface-2);
	color: var(--pd-text-soft);
	font-size: var(--pd-text-sm);
}

/* Availability badge: colored dot + text (never color alone). */
#puredesk-app .puredesk-state-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 9px;
	border-radius: var(--pd-radius-full);
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-medium);
	color: var(--pd-text-soft);
	background: var(--pd-surface-2);
	white-space: nowrap;
}
#puredesk-app .puredesk-state-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--pd-border-strong); flex: none; }
#puredesk-app .puredesk-state-badge--on { color: var(--pd-success); background: color-mix(in srgb, var(--pd-success) 10%, transparent); }
#puredesk-app .puredesk-state-badge--on i { background: var(--pd-success); }

/* Switch rows: label + help left, toggle right (settings, portal prefs). */
#puredesk-app .puredesk-field.puredesk-setting-row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--pd-space-4); }
#puredesk-app .puredesk-setting-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#puredesk-app .puredesk-setting-row__label { font-size: var(--pd-text-sm); font-weight: var(--pd-weight-medium); color: var(--pd-text); cursor: pointer; }
#puredesk-app .puredesk-setting-row .puredesk-switch { flex: none; }

/* Checkbox grid (multi-select membership pickers). */
#puredesk-app .puredesk-check-grid { display: flex; flex-wrap: wrap; gap: var(--pd-space-2) var(--pd-space-3); }

/* Modal subtitle line under the title. */
#puredesk-app .puredesk-modal-sub { margin: calc(-1 * var(--pd-space-2)) 0 var(--pd-space-4); font-size: var(--pd-text-sm); color: var(--pd-text-soft); }

/* Sectioned forms (create ticket, settings-style cards) */
#puredesk-app .puredesk-form-section { padding: var(--pd-space-4) var(--pd-space-5); border-top: 1px solid var(--pd-border); }
#puredesk-app .puredesk-form-section:first-child { border-top: 0; }
#puredesk-app .puredesk-form-section__title {
	display: flex;
	align-items: center;
	gap: var(--pd-space-2);
	margin: 0 0 var(--pd-space-3);
	font-size: 11px;
	font-weight: var(--pd-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pd-text-faint);
}
#puredesk-app .puredesk-form-section .puredesk-field:last-child { margin-bottom: 0; }
/* The shared editor drops its conversation-footer chrome inside a form section. */
#puredesk-app .puredesk-form-section .puredesk-editor { border-top: 0; }
#puredesk-app .puredesk-form-section .puredesk-editor__surface { margin-left: 0; margin-right: 0; }
#puredesk-app .puredesk-form-section .puredesk-editor__tabs { padding-left: 0; }
#puredesk-app .puredesk-form-section .puredesk-editor__footer { padding-left: 0; padding-right: 0; padding-bottom: 0; }

/* Input + action button joined on one line */
#puredesk-app .puredesk-verify-group { display: flex; gap: var(--pd-space-2); align-items: stretch; }
#puredesk-app .puredesk-verify-group .puredesk-input { flex: 1; min-width: 0; }
#puredesk-app .puredesk-verify-group .puredesk-btn { flex: none; white-space: nowrap; }
#puredesk-app .puredesk-verify-group .puredesk-btn .puredesk-spinner { width: 13px; height: 13px; margin-right: 5px; }
@media (max-width: 480px) {
	#puredesk-app .puredesk-verify-group { flex-wrap: wrap; }
	#puredesk-app .puredesk-verify-group .puredesk-btn { flex: 1 1 100%; }
}

/* ---------- Purchase UI (UI/UX 2.0 phase 1) ---------- */

/* Source badges: ThemePure carries the accent, Envato stays neutral —
   always paired with the text label, never color-only. */
#puredesk-app .puredesk-badge-source {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-medium);
	border: 1px solid var(--pd-border);
	border-radius: 999px;
	color: var(--pd-text-soft);
	white-space: nowrap;
}
#puredesk-app .puredesk-badge-source i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
#puredesk-app .puredesk-badge-source--themepure { color: var(--pd-accent); border-color: var(--pd-accent); }

/* Status badges (Active / Expired / Unknown) — text + dot, never color-only. */
#puredesk-app .puredesk-badge-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-medium);
	border-radius: 999px;
	white-space: nowrap;
	color: var(--pd-text-faint);
	background: var(--pd-surface-2, rgba(0, 0, 0, 0.04));
}
#puredesk-app .puredesk-badge-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
#puredesk-app .puredesk-badge-status--active { color: var(--pd-success); background: color-mix(in srgb, var(--pd-success) 12%, transparent); }
#puredesk-app .puredesk-badge-status--expired { color: var(--pd-danger); background: color-mix(in srgb, var(--pd-danger) 10%, transparent); }

/* Purchase key presentation. */
#puredesk-app .puredesk-purchase-key {
	font-family: var(--pd-font-mono, ui-monospace, monospace);
	font-size: var(--pd-text-xs);
	background: var(--pd-surface-2, rgba(0, 0, 0, 0.04));
	border-radius: var(--pd-radius-sm);
	padding: 2px 6px;
	white-space: nowrap;
}

/* Registry table: name-over-email hierarchy + a sane scroll width. */
#puredesk-app .puredesk-purchases-table { min-width: 860px; }
#puredesk-app .puredesk-cell-stack { display: grid; gap: 1px; min-width: 0; }
#puredesk-app .puredesk-cell-stack small { color: var(--pd-text-faint); font-size: var(--pd-text-xs); overflow: hidden; text-overflow: ellipsis; }

/* Add/Edit modal sections. */
#puredesk-app .puredesk-modal-section { display: grid; gap: var(--pd-space-3); }
#puredesk-app .puredesk-modal-section + .puredesk-modal-section { margin-top: var(--pd-space-4); padding-top: var(--pd-space-3); border-top: 1px solid var(--pd-border); }
#puredesk-app .puredesk-modal-section__title {
	margin: 0;
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pd-text-faint);
}
#puredesk-app .puredesk-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pd-space-3); }
@media (max-width: 600px) {
	#puredesk-app .puredesk-field-grid { grid-template-columns: 1fr; }
}

/* Portal purchase source toggle (segmented control). */
#puredesk-app .puredesk-source-toggle {
	display: inline-flex;
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	overflow: hidden;
}
#puredesk-app .puredesk-source-toggle button {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 8px 18px;
	font-size: var(--pd-text-sm);
	color: var(--pd-text-soft);
	cursor: pointer;
}
#puredesk-app .puredesk-source-toggle button + button { border-left: 1px solid var(--pd-border); }
#puredesk-app .puredesk-source-toggle button.is-active {
	background: var(--pd-accent);
	color: #fff;
	font-weight: var(--pd-weight-medium);
}
#puredesk-app .puredesk-source-toggle button:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: -2px; }

/* Customer purchase history (staff modal): responsive card list. */
#puredesk-app .puredesk-purchase-history { display: grid; gap: var(--pd-space-3); }
#puredesk-app .puredesk-purchase-item {
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	padding: var(--pd-space-3);
	display: grid;
	gap: 6px;
}
#puredesk-app .puredesk-purchase-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-2); flex-wrap: wrap; }
#puredesk-app .puredesk-purchase-item__name { font-weight: var(--pd-weight-semibold); font-size: var(--pd-text-sm); color: var(--pd-text); }
#puredesk-app .puredesk-purchase-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: var(--pd-text-xs);
	color: var(--pd-text-soft);
}
#puredesk-app .puredesk-purchase-item__meta dt { color: var(--pd-text-faint); display: inline; }
#puredesk-app .puredesk-purchase-item__meta dd { margin: 0 0 0 4px; display: inline; }
#puredesk-app .puredesk-purchase-item__meta > div { display: inline-flex; }

/* ---------- Design system 2.0 primitives ---------- */

/* Alerts: one family for inline notices. <div class="puredesk-alert
   puredesk-alert--warning" role="alert">…</div>. Variants pair soft
   backgrounds with readable text — status is always text + color. */
#puredesk-app .puredesk-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--pd-space-2);
	padding: var(--pd-space-3) var(--pd-space-4);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	background: var(--pd-surface-2);
	color: var(--pd-text-soft);
	font-size: var(--pd-text-sm);
	line-height: var(--pd-leading);
}
#puredesk-app .puredesk-alert svg { flex: none; margin-top: 2px; }
#puredesk-app .puredesk-alert--info { background: var(--pd-info-soft); border-color: color-mix(in srgb, var(--pd-info) 35%, transparent); color: var(--pd-info); }
#puredesk-app .puredesk-alert--success { background: var(--pd-success-soft); border-color: color-mix(in srgb, var(--pd-success) 35%, transparent); color: var(--pd-success); }
#puredesk-app .puredesk-alert--warning { background: var(--pd-warning-soft); border-color: color-mix(in srgb, var(--pd-warning) 40%, transparent); color: var(--pd-warning); }
#puredesk-app .puredesk-alert--danger { background: var(--pd-danger-soft); border-color: color-mix(in srgb, var(--pd-danger) 35%, transparent); color: var(--pd-danger); }

/* Legacy notice classes (settings screens) join the alert family. */
#puredesk-app .puredesk-notice {
	display: block;
	margin: 4px 0 0;
	padding: var(--pd-space-3) var(--pd-space-4);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	background: var(--pd-surface-2);
	color: var(--pd-text-soft);
	font-size: var(--pd-text-xs);
	line-height: var(--pd-leading);
}
#puredesk-app .puredesk-notice--warning {
	background: var(--pd-warning-soft);
	border-color: color-mix(in srgb, var(--pd-warning) 40%, transparent);
	color: var(--pd-warning);
}

/* Soft status badges: the generic recipe behind Active/Expired/etc. Reuse
   for any labeled state — dot + text, never color-only. */
#puredesk-app .puredesk-badge-soft {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-medium);
	border-radius: var(--pd-radius-full);
	white-space: nowrap;
	color: var(--pd-text-faint);
	background: var(--pd-surface-2);
}
#puredesk-app .puredesk-badge-soft i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
#puredesk-app .puredesk-badge-soft--success { color: var(--pd-success); background: var(--pd-success-soft); }
#puredesk-app .puredesk-badge-soft--warning { color: var(--pd-warning); background: var(--pd-warning-soft); }
#puredesk-app .puredesk-badge-soft--danger { color: var(--pd-danger); background: var(--pd-danger-soft); }
#puredesk-app .puredesk-badge-soft--info { color: var(--pd-info); background: var(--pd-info-soft); }
#puredesk-app .puredesk-badge-soft--accent { color: var(--pd-accent); background: var(--pd-accent-soft); }

/* File upload dropzone (formalizes the editor's drag-drop affordance for
   any future upload surface). Add .is-dragover from JS while dragging. */
#puredesk-app .puredesk-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pd-space-2);
	padding: var(--pd-space-6);
	border: 1.5px dashed var(--pd-border-strong);
	border-radius: var(--pd-radius);
	background: var(--pd-surface-2);
	color: var(--pd-text-soft);
	font-size: var(--pd-text-sm);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease);
}
#puredesk-app .puredesk-dropzone:hover,
#puredesk-app .puredesk-dropzone.is-dragover { border-color: var(--pd-accent); background: var(--pd-accent-soft); color: var(--pd-accent); }
#puredesk-app .puredesk-dropzone:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-dropzone svg { color: currentColor; }

/* Loading overlay for in-place refreshes (opt-in wrapper state). */
#puredesk-app .puredesk-loading { position: relative; pointer-events: none; }
#puredesk-app .puredesk-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: color-mix(in srgb, var(--pd-surface) 60%, transparent);
	animation: puredesk-fade-in var(--pd-duration) var(--pd-ease);
}