/**
 * PureDesk customer portal layout.
 * Builds on tokens.css + components.css (shared with the admin workspace);
 * only portal-specific structure lives here.
 */

/* ---------- Portal token overrides (design system 2.0) ----------
   The portal is customer-facing: slightly larger base type and roomier
   controls than the dense agent workspace. Token-level only — components
   pick these up automatically, and the admin surface is unaffected. */

#puredesk-app.puredesk-portal {
	--pd-text-sm: 14px;
	--pd-text-md: 15px;
	--pd-control-h: 40px;
	--pd-control-h-sm: 32px;
	--pd-radius-sm: 8px;
}

/* Explicit ground for the theme-embedded shortcode container: the portal
   never inherits the theme's typography or box model by accident. */
#puredesk-app.puredesk-portal {
	font-family: var(--pd-font);
	font-size: var(--pd-text-md);
	line-height: var(--pd-leading);
	color: var(--pd-text);
	-webkit-font-smoothing: antialiased;
}
/* Headings inside the portal never inherit the theme's display face. */
#puredesk-app.puredesk-portal h1,
#puredesk-app.puredesk-portal h2,
#puredesk-app.puredesk-portal h3,
#puredesk-app.puredesk-portal h4 { font-family: var(--pd-font); }

/* ---------- Shell ---------- */

#puredesk-app.puredesk-portal {
	max-width: 1200px;
	margin: 0 auto;
	font-family: var(--pd-font);
	font-size: var(--pd-text-md);
	line-height: var(--pd-leading);
	color: var(--pd-text);
}

#puredesk-app.puredesk-portal *,
#puredesk-app.puredesk-portal *::before,
#puredesk-app.puredesk-portal *::after { box-sizing: border-box; }

#puredesk-app .puredesk-portal__header {
	display: flex;
	align-items: center;
	gap: var(--pd-space-4);
	padding-bottom: var(--pd-space-4);
	margin-bottom: var(--pd-space-5);
	border-bottom: 1px solid var(--pd-border);
	flex-wrap: wrap;
}

#puredesk-app .puredesk-portal__brand {
	display: flex;
	align-items: center;
	gap: var(--pd-space-2);
	font-size: var(--pd-text-lg);
	font-weight: var(--pd-weight-semibold);
	min-width: 0;
}

#puredesk-app .puredesk-portal__brand img {
	max-height: 32px;
	width: auto;
	display: block;
}

#puredesk-app .puredesk-portal__nav {
	display: flex;
	align-items: center;
	gap: var(--pd-space-1);
	flex: 1;
	min-width: 0;
	overflow-x: auto;
}

#puredesk-app .puredesk-portal__nav a {
	display: inline-flex;
	align-items: center;
	padding: 6px var(--pd-space-3);
	border-radius: var(--pd-radius-full);
	color: var(--pd-text-soft);
	font-size: var(--pd-text-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--pd-duration) var(--pd-ease), color var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-portal__nav a:hover { background: var(--pd-surface-2); color: var(--pd-text); }
#puredesk-app .puredesk-portal__nav a.is-active { background: var(--pd-accent-soft); color: var(--pd-accent); font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-portal__nav a:focus-visible { outline: none; box-shadow: var(--pd-ring); }

#puredesk-app .puredesk-portal__main { min-width: 0; }

#puredesk-app .puredesk-portal__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--pd-accent);
	color: var(--pd-on-accent);
	font-size: var(--pd-text-md);
	font-weight: var(--pd-weight-bold);
	box-shadow: var(--pd-shadow-xs);
}
#puredesk-app .puredesk-portal__brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Account chip (right of nav) */
#puredesk-app .puredesk-portal__account { display: flex; align-items: center; gap: var(--pd-space-2); flex: none; }
/* The customer's WordPress avatar image (get_avatar), same 30px circle. */
#puredesk-app img.puredesk-portal__avatar {
	flex: none;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: var(--pd-radius-full);
	object-fit: cover;
	background: var(--pd-accent-soft);
}
#puredesk-app .puredesk-portal__account-name {
	font-size: var(--pd-text-sm);
	font-weight: var(--pd-weight-medium);
	color: var(--pd-text);
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: capitalize;
}

/* Minimal footer */
#puredesk-app .puredesk-portal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pd-space-3);
	flex-wrap: wrap;
	margin-top: var(--pd-space-8);
	padding-top: var(--pd-space-4);
	border-top: 1px solid var(--pd-border);
	font-size: var(--pd-text-xs);
	color: var(--pd-text-faint);
}
#puredesk-app .puredesk-portal__footer-brand { font-weight: var(--pd-weight-medium); color: var(--pd-text-soft); }

/* Per-screen page head: title + short line + one primary action. */
#puredesk-app .puredesk-portal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pd-space-3); flex-wrap: wrap; margin-bottom: var(--pd-space-4); }
#puredesk-app .puredesk-portal-head__title { margin: 0; font-size: var(--pd-text-xl); font-weight: var(--pd-weight-bold); letter-spacing: -0.01em; color: var(--pd-text); }
#puredesk-app .puredesk-portal-head__sub { margin: 2px 0 0; font-size: var(--pd-text-sm); color: var(--pd-text-soft); }
#puredesk-app .puredesk-portal-head .puredesk-btn svg { flex: none; }

/* Portal conversation: bounded so long threads scroll inside the stream
   (overflow-y: auto comes from the shared .puredesk-convo__stream rule)
   instead of stretching the page past the composer. A little taller than
   the admin pane; min() keeps it sane on short viewports. */
#puredesk-app.puredesk-portal .puredesk-convo__stream { max-height: min(600px, 70vh); }
@media (max-width: 640px) {
	#puredesk-app.puredesk-portal .puredesk-convo__stream { max-height: min(420px, 65vh); }
}

/* Portal chat orientation: the signed-in customer's own replies sit on the
   RIGHT with the accent bubble; agent/assistant replies on the LEFT with the
   plain bubble. The --customer/--agent classes come from the shared renderer
   (derived from the actual sender, never message order), so alternating or
   consecutive replies always keep their side. Portal-only — staff surfaces
   keep their customer-left / agent-right layout from components.css. */
#puredesk-app.puredesk-portal .puredesk-message--agent { align-self: flex-start; flex-direction: row; }
#puredesk-app.puredesk-portal .puredesk-message--agent .puredesk-message__bubble {
	border-top-left-radius: var(--pd-radius-sm);
	border-top-right-radius: var(--pd-radius-lg);
	background: var(--pd-surface-2);
	border-color: var(--pd-border);
}
#puredesk-app.puredesk-portal .puredesk-message--customer { align-self: flex-end; flex-direction: row-reverse; }
#puredesk-app.puredesk-portal .puredesk-message--customer .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);
}

/* ---------- Customer dashboard ---------- */

#puredesk-app .puredesk-portal__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--pd-space-3);
}

/* Portal ticket rows: no selection column, friendlier spacing. */
#puredesk-app.puredesk-portal .puredesk-ticket-row { grid-template-columns: 10px minmax(0, 1fr) auto; padding: var(--pd-space-3) var(--pd-space-4); }
#puredesk-app.puredesk-portal .puredesk-ticket-row:focus-visible { outline: none; box-shadow: var(--pd-ring); }

/* "Reply waiting" chip — text + tinted background, never color alone. */
#puredesk-app .puredesk-await-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 1px 8px;
	border-radius: var(--pd-radius-full);
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-semibold);
	color: var(--pd-accent);
	background: var(--pd-accent-soft);
	white-space: nowrap;
}
#puredesk-app .puredesk-await-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Conversation sub-header (status + context under the title). */
#puredesk-app.puredesk-portal .puredesk-convo__header { flex-direction: column; align-items: stretch; gap: var(--pd-space-2); }
#puredesk-app .puredesk-portal-convo__titlerow { display: flex; align-items: center; gap: var(--pd-space-2); min-width: 0; }
#puredesk-app .puredesk-portal-convo__sub { display: flex; align-items: center; gap: var(--pd-space-2); flex-wrap: wrap; padding-left: 36px; font-size: var(--pd-text-xs); color: var(--pd-text-faint); }
#puredesk-app .puredesk-portal-convo__notice { margin: 0; padding: var(--pd-space-2) var(--pd-space-4); font-size: var(--pd-text-xs); color: var(--pd-text-faint); border-top: 1px solid var(--pd-border); }

#puredesk-app .puredesk-portal-link { color: var(--pd-accent); font-size: var(--pd-text-sm); text-decoration: none; }
#puredesk-app .puredesk-portal-link:hover { text-decoration: underline; }

/* Assistant bar under the conversation: identity, feedback, human handoff. */
#puredesk-app .puredesk-ai-bar {
	display: flex;
	align-items: center;
	gap: var(--pd-space-2);
	flex-wrap: wrap;
	padding: var(--pd-space-2) var(--pd-space-4);
	border-top: 1px solid var(--pd-border);
	background: var(--pd-surface-2);
}
#puredesk-app .puredesk-ai-bar__ask { font-size: var(--pd-text-sm); color: var(--pd-text-soft); }
/* Sentence-length chips (e.g. the escalated notice) must wrap on phones. */
#puredesk-app .puredesk-ai-bar .puredesk-ai-chip { white-space: normal; min-width: 0; }

/* Profile screen. */
#puredesk-app .puredesk-portal-profile__head { display: flex; align-items: center; gap: var(--pd-space-3); margin-bottom: var(--pd-space-4); min-width: 0; }
#puredesk-app .puredesk-portal-profile__actions { display: flex; align-items: center; gap: var(--pd-space-2); }
#puredesk-app .puredesk-portal-profile__actions .puredesk-btn .puredesk-spinner { margin-right: 5px; }

/* ---------- Compose page (new-ticket form) ---------- */

#puredesk-app .puredesk-compose { max-width: 760px; margin: 0 auto; }
#puredesk-app .puredesk-compose__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pd-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--pd-space-4);
}
#puredesk-app .puredesk-compose__title { margin: 0; font-size: var(--pd-text-xl); font-weight: var(--pd-weight-bold); letter-spacing: -0.01em; color: var(--pd-text); }
#puredesk-app .puredesk-compose__sub { margin: 2px 0 0; font-size: var(--pd-text-sm); color: var(--pd-text-soft); }
#puredesk-app .puredesk-compose__head .puredesk-btn { text-decoration: none; }
#puredesk-app .puredesk-compose__head .puredesk-btn svg { flex: none; }

/* ---------- Department picker (new-ticket form) ---------- */

#puredesk-app .puredesk-dept-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--pd-space-3);
}

#puredesk-app .puredesk-dept-grid.is-invalid .puredesk-dept-card { border-color: var(--pd-danger); }

#puredesk-app .puredesk-dept-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pd-space-1);
	padding: var(--pd-space-3);
	border: 1px solid var(--pd-border);
	border-left: 3px solid var(--pd-dept-color, var(--pd-border));
	border-radius: var(--pd-radius);
	background: var(--pd-surface);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease), transform var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-dept-card:hover { border-color: var(--pd-accent); transform: translateY(-1px); }
#puredesk-app .puredesk-dept-card:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-dept-card.is-selected { border-color: var(--pd-accent); background: var(--pd-accent-soft); }

#puredesk-app .puredesk-dept-card__image { max-height: 40px; width: auto; border-radius: var(--pd-radius-sm); }
#puredesk-app .puredesk-dept-card__name { font-size: var(--pd-text-sm); font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
#puredesk-app .puredesk-dept-card__desc {
	font-size: var(--pd-text-xs);
	color: var(--pd-text-faint);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---------- Support-track chooser (create-ticket step 1) ---------- */

#puredesk-app .puredesk-track-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pd-space-3);
}

#puredesk-app .puredesk-track-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pd-space-2);
	padding: var(--pd-space-4);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius);
	background: var(--pd-surface);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease), transform var(--pd-duration) var(--pd-ease), box-shadow var(--pd-duration) var(--pd-ease);
}

#puredesk-app .puredesk-track-card:hover { border-color: var(--pd-accent); transform: translateY(-2px); box-shadow: var(--pd-shadow-sm, 0 4px 12px rgba(0,0,0,.06)); }
#puredesk-app .puredesk-track-card:focus-visible { outline: none; box-shadow: var(--pd-ring); }

#puredesk-app .puredesk-track-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--pd-radius);
	color: var(--pd-accent);
	background: var(--pd-accent-soft);
}

#puredesk-app .puredesk-track-card__title { font-size: var(--pd-text-md); font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
#puredesk-app .puredesk-track-card__desc { font-size: var(--pd-text-sm); color: var(--pd-text-faint); }

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

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
	#puredesk-app .puredesk-portal__header { gap: var(--pd-space-2); }
	#puredesk-app .puredesk-portal__brand { flex-basis: 100%; }
	#puredesk-app .puredesk-portal__account { margin-left: auto; }
	#puredesk-app .puredesk-portal__account-name { display: none; }

	#puredesk-app.puredesk-portal .puredesk-ticket-row { grid-template-columns: 0 8px minmax(0, 1fr) auto; padding-left: var(--pd-space-2); }
	#puredesk-app.puredesk-portal .puredesk-message { max-width: 100%; }
	#puredesk-app.puredesk-portal .puredesk-filterbar { padding: var(--pd-space-2); }
	#puredesk-app.puredesk-portal .puredesk-filterbar .puredesk-search { flex-basis: 100%; }
	#puredesk-app.puredesk-portal .puredesk-editor__surface { margin: 0 var(--pd-space-2) var(--pd-space-2); }
	#puredesk-app .puredesk-dept-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Auth screens (login / register / forgot / reset) ----------
   Design system 2.0: centered SaaS layout — soft accent wash behind a
   single elevated card, brand row, title/subtitle hierarchy, roomy
   controls (the portal's 40px rhythm), and text+icon alerts. */

#puredesk-app.puredesk-portal--auth { display: block; }

#puredesk-app .puredesk-auth {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/* min-height: min(84vh, 900px); */
	padding: 50px 0;
	background:
		radial-gradient(48rem 26rem at 50% -8rem, var(--pd-accent-soft), transparent 70%),
		var(--pd-bg);
	border-radius: var(--pd-radius-lg);
}

#puredesk-app .puredesk-auth__card {
	width: 100%;
	max-width: 420px;
	padding: var(--pd-space-8) var(--pd-space-8) var(--pd-space-6);
	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);
}

/* Brand: configured logo, or accent monogram + site name. */
#puredesk-app .puredesk-auth__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pd-space-2);
	margin-bottom: var(--pd-space-5);
}
#puredesk-app .puredesk-auth__logo { max-height: 40px; max-width: 200px; object-fit: contain; }
#puredesk-app .puredesk-auth__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--pd-radius);
	background: var(--pd-accent);
	color: var(--pd-on-accent);
	font-size: var(--pd-text-lg);
	font-weight: var(--pd-weight-bold);
	box-shadow: var(--pd-shadow-sm);
}
#puredesk-app .puredesk-auth__brand-name { font-size: var(--pd-text-md); font-weight: var(--pd-weight-semibold); color: var(--pd-text); }

#puredesk-app .puredesk-auth__title {
	margin: 0 0 var(--pd-space-1);
	font-size: var(--pd-text-2xl);
	font-weight: var(--pd-weight-bold);
	line-height: var(--pd-leading-tight);
	color: var(--pd-text);
	text-align: center;
}
#puredesk-app .puredesk-auth__subtitle {
	margin: 0 0 var(--pd-space-6);
	font-size: var(--pd-text-sm);
	color: var(--pd-text-soft);
	text-align: center;
	line-height: var(--pd-leading);
}

#puredesk-app .puredesk-auth__form { display: flex; flex-direction: column; gap: var(--pd-space-4); }
#puredesk-app .puredesk-auth__form .puredesk-field { margin-bottom: 0; }

/* Password input + show/hide toggle. */
#puredesk-app .puredesk-auth__pw { position: relative; }
#puredesk-app .puredesk-auth__pw .puredesk-input { padding-right: 42px; }
#puredesk-app .puredesk-auth__pw-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: var(--pd-radius-sm);
	background: transparent;
	color: var(--pd-text-faint);
	cursor: pointer;
	transition: color var(--pd-duration) var(--pd-ease), background var(--pd-duration) var(--pd-ease);
}
#puredesk-app .puredesk-auth__pw-toggle:hover { color: var(--pd-text); background: var(--pd-surface-2); }
#puredesk-app .puredesk-auth__pw-toggle:focus-visible { outline: none; box-shadow: var(--pd-ring); }

/* Remember-me + forgot link on one line. */
#puredesk-app .puredesk-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pd-space-3);
	font-size: var(--pd-text-sm);
}
#puredesk-app .puredesk-auth__row a { color: var(--pd-accent); text-decoration: none; font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-auth__row a:hover { text-decoration: underline; }

#puredesk-app .puredesk-auth__submit { width: 100%; justify-content: center; margin-top: var(--pd-space-1); }
#puredesk-app .puredesk-auth__submit .puredesk-spinner { border-color: color-mix(in srgb, var(--pd-on-accent) 35%, transparent); border-top-color: var(--pd-on-accent); }

#puredesk-app .puredesk-auth__hint { margin: 0; color: var(--pd-text-soft); font-size: var(--pd-text-sm); }

/* Alerts: icon + text, success/danger tokens (never color-only). */
#puredesk-app .puredesk-auth__alert {
	display: flex;
	align-items: flex-start;
	gap: var(--pd-space-2);
	padding: var(--pd-space-3);
	border: 1px solid color-mix(in srgb, var(--pd-danger) 35%, transparent);
	border-radius: var(--pd-radius-sm);
	background: var(--pd-danger-soft);
	color: var(--pd-danger);
	font-size: var(--pd-text-sm);
	line-height: var(--pd-leading);
}
#puredesk-app .puredesk-auth__alert svg { flex: none; margin-top: 3px; }
#puredesk-app .puredesk-auth__alert--ok {
	border-color: color-mix(in srgb, var(--pd-success) 35%, transparent);
	background: var(--pd-success-soft);
	color: var(--pd-success);
}

#puredesk-app .puredesk-auth__links {
	margin-top: var(--pd-space-5);
	padding-top: var(--pd-space-4);
	border-top: 1px solid var(--pd-border);
	font-size: var(--pd-text-sm);
	color: var(--pd-text-soft);
	text-align: center;
}
#puredesk-app .puredesk-auth__links a { color: var(--pd-accent); text-decoration: none; font-weight: var(--pd-weight-medium); }
#puredesk-app .puredesk-auth__links a:hover { text-decoration: underline; }
#puredesk-app .puredesk-auth__links a:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- Support announcement (auth split + dashboard notice) ---------- */

/* Split auth layout: announcement ~45% · form ~55%. Only present when an
   announcement is active — otherwise the centered card is untouched. */
#puredesk-app .puredesk-auth__split {
	display: grid;
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	gap: var(--pd-space-5);
	align-items: stretch;
	width: 100%;
	max-width: 920px;
}
#puredesk-app .puredesk-auth__split .puredesk-auth__card { max-width: none; }

#puredesk-app .puredesk-annc {
	/* Per-type accents (overridden by the modifiers below). */
	--pd-annc-color: var(--pd-accent);
	--pd-annc-tint: var(--pd-accent-soft);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pd-space-3);
	min-width: 0;
	padding: var(--pd-space-6);
	background:
		linear-gradient(180deg, var(--pd-annc-tint), transparent 55%),
		var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	box-shadow: var(--pd-shadow-sm);
	overflow: hidden;
	animation: puredesk-fade-in var(--pd-duration-slow) var(--pd-ease);
}
/* Accent indicator: the notice stripe that reads "notification" at a glance. */
#puredesk-app .puredesk-annc::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--pd-annc-color);
}
#puredesk-app .puredesk-annc--warning { --pd-annc-color: var(--pd-warning); --pd-annc-tint: var(--pd-warning-soft); }
#puredesk-app .puredesk-annc--maintenance { --pd-annc-color: var(--pd-info); --pd-annc-tint: var(--pd-info-soft); }

#puredesk-app .puredesk-annc__head { display: flex; align-items: center; gap: var(--pd-space-2); }
#puredesk-app .puredesk-annc__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: var(--pd-radius-full);
	background: var(--pd-annc-tint);
	color: var(--pd-annc-color);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pd-annc-color) 25%, transparent);
}
#puredesk-app .puredesk-annc__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--pd-radius-full);
	background: var(--pd-annc-tint);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pd-annc-color) 25%, transparent);
	font-size: var(--pd-text-xs);
	font-weight: var(--pd-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pd-annc-color) 72%, var(--pd-text));
}
#puredesk-app .puredesk-annc__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pd-annc-color); }

#puredesk-app .puredesk-annc__title {
	margin: var(--pd-space-1) 0 0;
	font-size: var(--pd-text-xl);
	font-weight: var(--pd-weight-bold);
	line-height: var(--pd-leading-tight);
	color: var(--pd-text);
	text-wrap: balance;
}
#puredesk-app .puredesk-annc__message {
	margin: 0;
	font-size: var(--pd-text-sm);
	line-height: var(--pd-leading);
	color: var(--pd-text-soft);
	white-space: pre-line;
}

#puredesk-app .puredesk-annc__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pd-space-3) var(--pd-space-6);
	margin-top: auto;
	padding-top: var(--pd-space-4);
	border-top: 1px solid var(--pd-border);
}
#puredesk-app .puredesk-annc__meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#puredesk-app .puredesk-annc__meta-label { font-size: var(--pd-text-xs); color: var(--pd-text-faint); }
#puredesk-app .puredesk-annc__meta-value { font-size: var(--pd-text-sm); font-weight: var(--pd-weight-semibold); color: var(--pd-text); }

/* Compact variant (customer dashboard): tighter, inline meta. */
#puredesk-app .puredesk-annc--compact { padding: var(--pd-space-4) var(--pd-space-5); margin-bottom: var(--pd-space-4); gap: var(--pd-space-2); }
#puredesk-app .puredesk-annc--compact .puredesk-annc__title { font-size: var(--pd-text-md); }
#puredesk-app .puredesk-annc--compact .puredesk-annc__meta { padding-top: var(--pd-space-3); }

/* Stack: announcement above the form, kept compact on small screens. */
@media (max-width: 782px) {
	#puredesk-app .puredesk-auth__split { grid-template-columns: minmax(0, 1fr); gap: var(--pd-space-4); max-width: 480px; }
	#puredesk-app .puredesk-annc { padding: var(--pd-space-4) var(--pd-space-5); gap: var(--pd-space-2); }
	#puredesk-app .puredesk-annc__title { font-size: var(--pd-text-md); }
	#puredesk-app .puredesk-annc__meta { padding-top: var(--pd-space-3); }
}

/* Tablet / mobile: the card breathes less, then goes edge-to-edge. */
@media (max-width: 640px) {
	#puredesk-app .puredesk-auth { padding: var(--pd-space-5) var(--pd-space-3) var(--pd-space-6); min-height: 0; }
	#puredesk-app .puredesk-auth__card { padding: var(--pd-space-6) var(--pd-space-5); }
}

@media (max-width: 420px) {
	#puredesk-app .puredesk-auth { padding: var(--pd-space-3) var(--pd-space-2); border-radius: 0; }
	#puredesk-app .puredesk-auth__card { padding: var(--pd-space-5) var(--pd-space-4); box-shadow: var(--pd-shadow-sm); }
}

/* ============================================================
 * Customer Help Center — premium SaaS home (redesign)
 * Scoped to the portal; staff workspace / admin SPA unaffected.
 * ============================================================ */

#puredesk-app.puredesk-portal .puredesk-portal__main { max-width: 100%; margin: 0 auto; }

/* ---------- Hero ---------- */
#puredesk-app .puredesk-hero { text-align: center; margin: 45px 0; }
#puredesk-app .puredesk-hero--skeleton { display: flex; flex-direction: column; align-items: center; }
#puredesk-app .puredesk-hero__title { margin: 0; font-size: var(--pd-text-3xl); line-height: var(--pd-leading-tight); font-weight: var(--pd-weight-semibold); letter-spacing: -0.02em; color: var(--pd-text); }
#puredesk-app .puredesk-hero__sub { margin: var(--pd-space-2) 0 0; font-size: var(--pd-text-lg); color: var(--pd-text-soft); }

#puredesk-app .puredesk-hero__search { position: relative; display: flex; align-items: center; max-width: 620px; margin: var(--pd-space-6) auto 0; }
#puredesk-app .puredesk-hero__search > svg { position: absolute; left: 18px; color: var(--pd-text-faint); pointer-events: none; }
#puredesk-app .puredesk-hero__input {
	width: 100%; height: 56px; padding: 0 var(--pd-space-5) 0 50px;
	font-size: var(--pd-text-md); color: var(--pd-text);
	border: 1px solid var(--pd-border); border-radius: var(--pd-radius-lg);
	background: var(--pd-surface); box-shadow: var(--pd-shadow-sm);
	transition: border-color var(--pd-duration) var(--pd-ease), box-shadow var(--pd-duration) var(--pd-ease);
}
#puredesk-app .puredesk-hero__input::placeholder { color: var(--pd-text-faint); }
#puredesk-app .puredesk-hero__input:focus { outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 4px var(--pd-accent-soft); }

#puredesk-app .puredesk-hero__results { max-width: 100%;
  margin: 40px 0 0 0; text-align: left; transition: opacity var(--pd-duration) var(--pd-ease); }
#puredesk-app .puredesk-hero__results.is-loading { opacity: 0.5; }
#puredesk-app .puredesk-kb-label { display: block; margin: 0 2px var(--pd-space-2); font-size: var(--pd-text-xs); font-weight: var(--pd-weight-semibold); text-transform: uppercase; letter-spacing: var(--pd-tracking-wide); color: var(--pd-text-faint); }
#puredesk-app .puredesk-kb-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--pd-space-3); }
#puredesk-app .puredesk-kb-card {
	display: flex; align-items: center; gap: var(--pd-space-3);
	padding: var(--pd-space-4); text-align: left; font: inherit; cursor: pointer;
	border: 1px solid var(--pd-border); border-radius: var(--pd-radius); background: var(--pd-surface);
	transition: border-color var(--pd-duration) var(--pd-ease), transform var(--pd-duration) var(--pd-ease), box-shadow var(--pd-duration) var(--pd-ease);
}
#puredesk-app .puredesk-kb-card:hover { border-color: var(--pd-accent); transform: translateY(-1px); box-shadow: var(--pd-shadow-sm); }
#puredesk-app .puredesk-kb-card:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-kb-card__body { min-width: 0; flex: 1; }
#puredesk-app .puredesk-kb-card__cat { display: inline-block; font-size: var(--pd-text-xs); font-weight: var(--pd-weight-semibold); color: var(--pd-accent); text-transform: uppercase; letter-spacing: .03em; }
#puredesk-app .puredesk-kb-card__title { margin: 4px 0 0; font-size: var(--pd-text-sm); font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
#puredesk-app .puredesk-kb-card__excerpt { margin: 4px 0 0; font-size: var(--pd-text-xs); color: var(--pd-text-faint); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
#puredesk-app .puredesk-kb-card__go { flex: none; color: var(--pd-text-faint); transition: color var(--pd-duration) var(--pd-ease), transform var(--pd-duration) var(--pd-ease); }
#puredesk-app .puredesk-kb-card:hover .puredesk-kb-card__go { color: var(--pd-accent); transform: translateX(2px); }
#puredesk-app .puredesk-kb-empty { text-align: center; padding: var(--pd-space-6) var(--pd-space-4); color: var(--pd-text-faint); }
#puredesk-app .puredesk-kb-empty p { margin: var(--pd-space-2) 0 var(--pd-space-3); font-size: var(--pd-text-sm); color: var(--pd-text-soft); }
#puredesk-app .puredesk-kb-note { text-align: center; color: var(--pd-text-faint); font-size: var(--pd-text-sm); }

#puredesk-app .puredesk-hero__fallback { margin: var(--pd-space-6) 0 0; font-size: var(--pd-text-sm); color: var(--pd-text-faint); }
#puredesk-app .puredesk-link-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--pd-accent); font-weight: var(--pd-weight-medium); text-decoration: none; }
#puredesk-app .puredesk-link-cta:hover { text-decoration: underline; }

/* ---------- Ticket stats (lightweight) ---------- */
#puredesk-app .puredesk-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pd-space-3); margin-top: var(--pd-space-6); }
#puredesk-app .puredesk-stat { display: flex; align-items: center; gap: var(--pd-space-3); padding: var(--pd-space-4); text-decoration: none; border: 1px solid var(--pd-border); border-radius: var(--pd-radius); background: var(--pd-surface); transition: border-color var(--pd-duration) var(--pd-ease), transform var(--pd-duration) var(--pd-ease); }
#puredesk-app .puredesk-stat:hover { border-color: var(--pd-border-strong); transform: translateY(-1px); }
#puredesk-app .puredesk-stat:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-stat__chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: var(--pd-radius-sm); color: var(--pd-text-soft); background: var(--pd-surface-2); }
#puredesk-app .puredesk-stat--info .puredesk-stat__chip { color: var(--pd-info); background: var(--pd-info-soft); }
#puredesk-app .puredesk-stat--success .puredesk-stat__chip { color: var(--pd-success); background: var(--pd-success-soft); }
#puredesk-app .puredesk-stat--accent .puredesk-stat__chip { color: var(--pd-accent); background: var(--pd-accent-soft); }
#puredesk-app .puredesk-stat__meta { display: flex; flex-direction: column; min-width: 0; }
#puredesk-app .puredesk-stat__value { font-size: var(--pd-text-xl); font-weight: var(--pd-weight-semibold); color: var(--pd-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
#puredesk-app .puredesk-stat__label { font-size: var(--pd-text-xs); color: var(--pd-text-faint); }

/* ---------- Recent conversations ---------- */
#puredesk-app .puredesk-recent { margin-top: var(--pd-space-8); }
#puredesk-app .puredesk-recent__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--pd-space-3); }
#puredesk-app .puredesk-recent__title { margin: 0; font-size: var(--pd-text-lg); font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
#puredesk-app .puredesk-recent__more { display: inline-flex; align-items: center; gap: 3px; font-size: var(--pd-text-sm); color: var(--pd-accent); text-decoration: none; }
#puredesk-app .puredesk-recent__more:hover { text-decoration: underline; }
#puredesk-app .puredesk-recent .puredesk-ticket-list { border: 1px solid var(--pd-border); border-radius: var(--pd-radius); overflow: hidden; background: var(--pd-surface); }
#puredesk-app.puredesk-portal .puredesk-recent .puredesk-ticket-row { border-bottom: 1px solid var(--pd-border); }
#puredesk-app.puredesk-portal .puredesk-recent .puredesk-ticket-row:last-child { border-bottom: 0; }
#puredesk-app.puredesk-portal .puredesk-recent .puredesk-ticket-row__side svg { color: var(--pd-text-faint); }

/* ---------- Article reader overlay ---------- */
#puredesk-app .puredesk-article-overlay { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: clamp(var(--pd-space-4), 6vh, var(--pd-space-12)) var(--pd-space-4); background: var(--pd-overlay); overflow-y: auto; }

/* ---------- "View All Knowledge" modal (same cards, search and reader as the hero) ---------- */
#puredesk-app .puredesk-kb-all { display: flex; justify-content: center; margin-top: var(--pd-space-4); }
#puredesk-app .puredesk-kb-all .puredesk-btn svg { flex: none; }
#puredesk-app .puredesk-kb-modal-overlay { align-items: center; padding: var(--pd-space-4); overflow: hidden; }
#puredesk-app .puredesk-kb-modal {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1240px;
	height: 84vh;
	max-height: 84vh;
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	box-shadow: var(--pd-shadow-lg);
	overflow: hidden;
}
#puredesk-app .puredesk-kb-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-3); padding: var(--pd-space-4) var(--pd-space-5); border-bottom: 1px solid var(--pd-border); flex: none; }
#puredesk-app .puredesk-kb-modal__title { margin: 0; font-size: var(--pd-text-xl); font-weight: var(--pd-weight-bold); letter-spacing: -0.01em; color: var(--pd-text); }
#puredesk-app .puredesk-kb-modal__search { position: relative; display: flex; align-items: center; padding: var(--pd-space-4) var(--pd-space-5) 0; flex: none; }
#puredesk-app .puredesk-kb-modal__search > svg { position: absolute; left: calc(var(--pd-space-5) + 18px); color: var(--pd-text-faint); pointer-events: none; }
#puredesk-app .puredesk-kb-modal__search .puredesk-hero__input { width: 100%; }
#puredesk-app .puredesk-kb-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--pd-space-4) var(--pd-space-5) var(--pd-space-5); }
#puredesk-app .puredesk-kb-modal__body.is-loading { opacity: 0.7; }
#puredesk-app .puredesk-kb-modal__more { display: flex; justify-content: center; padding: var(--pd-space-4) 0 0; }
@media (max-width: 640px) {
	#puredesk-app .puredesk-kb-modal-overlay { padding: var(--pd-space-2); }
	#puredesk-app .puredesk-kb-modal { height: 96vh; max-height: 96vh; border-radius: var(--pd-radius); }
	#puredesk-app .puredesk-kb-modal__head { padding: var(--pd-space-3) var(--pd-space-4); }
	#puredesk-app .puredesk-kb-modal__search { padding: var(--pd-space-3) var(--pd-space-4) 0; }
	#puredesk-app .puredesk-kb-modal__search > svg { left: calc(var(--pd-space-4) + 18px); }
	#puredesk-app .puredesk-kb-modal__body { padding: var(--pd-space-3) var(--pd-space-4) var(--pd-space-4); }
}
#puredesk-app .puredesk-article { width: 100%; max-width: 720px; background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-lg); box-shadow: var(--pd-shadow-lg); padding: var(--pd-space-6) var(--pd-space-6) var(--pd-space-5); }
#puredesk-app .puredesk-article__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--pd-space-4); padding: 6px 10px 6px 6px; border: 0; border-radius: var(--pd-radius-sm); background: transparent; color: var(--pd-text-soft); font: inherit; font-size: var(--pd-text-sm); cursor: pointer; }
#puredesk-app .puredesk-article__back:hover { background: var(--pd-surface-2); color: var(--pd-text); }
#puredesk-app .puredesk-article__back:focus-visible { outline: none; box-shadow: var(--pd-ring); }
#puredesk-app .puredesk-article__title { margin: var(--pd-space-2) 0 var(--pd-space-4); font-size: var(--pd-text-2xl); font-weight: var(--pd-weight-semibold); letter-spacing: -0.01em; color: var(--pd-text); }
#puredesk-app .puredesk-article__body { color: var(--pd-text-soft); font-size: var(--pd-text-md); line-height: 1.7; }
#puredesk-app .puredesk-article__body p { margin: 0 0 var(--pd-space-3); }
#puredesk-app .puredesk-article__body h2, #puredesk-app .puredesk-article__body h3 { color: var(--pd-text); margin: var(--pd-space-5) 0 var(--pd-space-2); }
#puredesk-app .puredesk-article__body a { color: var(--pd-accent); }
#puredesk-app .puredesk-article__body ul, #puredesk-app .puredesk-article__body ol { padding-left: var(--pd-space-5); margin: 0 0 var(--pd-space-3); }
#puredesk-app .puredesk-article__body code { font-family: var(--pd-font-mono); font-size: 0.92em; background: var(--pd-surface-2); padding: 1px 5px; border-radius: var(--pd-radius-sm); }
#puredesk-app .puredesk-article__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-3); margin-top: var(--pd-space-6); padding-top: var(--pd-space-4); border-top: 1px solid var(--pd-border); font-size: var(--pd-text-sm); color: var(--pd-text-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	#puredesk-app .puredesk-hero { padding: var(--pd-space-6) var(--pd-space-2) var(--pd-space-4); }
	#puredesk-app .puredesk-hero__title { font-size: var(--pd-text-2xl); }
	#puredesk-app .puredesk-hero__sub { font-size: var(--pd-text-md); }
	#puredesk-app .puredesk-kb-grid { grid-template-columns: 1fr; }
	#puredesk-app .puredesk-statgrid { grid-template-columns: 1fr; }
	#puredesk-app .puredesk-article { padding: var(--pd-space-4); }
}