/* ==========================================================================
   Help Center — Default Theme (Clean Minimal)
   Pico CSS v2 provides the base reset, typography, and form styles.
   This file contains help-center-specific component styles only.
   ========================================================================== */

/* ---------- Pico Variable Overrides ---------- */

:root {
	--hc-bg: #fafafa;
	--hc-card: #ffffff;
	--hc-border: #e5e5e5;
	--hc-text: #18181b;
	--hc-muted: #71717a;
	--hc-light: #a1a1aa;
	--hc-radius: 8px;
	--hc-max-width: 720px;

	--pico-font-family:
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
		sans-serif;
	--pico-font-size: 100%;
	--pico-line-height: 1.6;
	--pico-color: var(--hc-text);
	--pico-background-color: var(--hc-bg);
	--pico-border-color: var(--hc-border);
	--pico-border-radius: var(--hc-radius);
	--pico-card-background-color: var(--hc-card);
	--pico-muted-color: var(--hc-muted);
	--pico-block-spacing-vertical: 1rem;
	--pico-block-spacing-horizontal: 0;
}

/* ---------- Dark mode ---------- */
/* Pico v2 auto-switches to dark when prefers-color-scheme: dark. We follow
   suit by flipping the --hc-* tokens so every component that reads them
   (tickets table, message bubbles, header dropdown, modals, …) keeps its
   contrast. Tinted backgrounds for the message-contact bubble and the
   status pills are still defined inline near each component below — those
   pick up dark variants in the same media query further down. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--hc-bg: #0f172a;
		--hc-card: #1e293b;
		--hc-border: #334155;
		--hc-text: #f1f5f9;
		--hc-muted: #94a3b8;
		--hc-light: #64748b;
	}
}

/* ---------- Layout ---------- */

.hc-container {
	max-width: var(--hc-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Header ---------- */

.hc-header {
	border-bottom: 1px solid var(--hc-border);
	background: var(--hc-card);
	position: sticky;
	top: 0;
	z-index: 100;
}

.hc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	gap: 16px;
}

/* ---------- Logo ---------- */

.hc-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--hc-text);
	flex-shrink: 0;
}

.hc-logo-img {
	height: 24px;
	width: auto;
}

.hc-logo-bar {
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

.hc-logo-text {
	font-weight: 600;
	font-size: 14px;
}

/* ---------- Search ---------- */

.hc-search-wrap {
	position: relative;
	flex: 1;
	max-width: 280px;
}

.hc-search-input {
	width: 100%;
	padding: 6px 12px;
	background: var(--hc-bg);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	font-size: 13px;
	outline: none;
	color: var(--hc-text);
	transition: border-color 0.15s;
	margin-bottom: 0;
}

.hc-search-input:focus {
	border-color: var(--hc-muted);
}

.hc-search-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--hc-card);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	z-index: 200;
	max-height: 300px;
	overflow-y: auto;
}

.hc-search-result {
	display: block;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--hc-text);
	border-bottom: 1px solid var(--hc-border);
	transition: background-color 0.15s;
}

.hc-search-result:last-of-type {
	border-bottom: none;
}

.hc-search-result:hover {
	background: var(--hc-bg);
}

.hc-search-result-title {
	font-size: 13px;
	font-weight: 500;
}

.hc-search-result-meta {
	font-size: 11px;
	color: var(--hc-muted);
	margin-top: 2px;
}

.hc-search-view-all {
	display: block;
	padding: 8px 12px;
	text-align: center;
	font-size: 12px;
	color: var(--hc-muted);
	text-decoration: none;
	border-top: 1px solid var(--hc-border);
	transition: color 0.15s;
}

.hc-search-view-all:hover {
	color: var(--hc-text);
}

/* ---------- Nav ---------- */

.hc-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	flex-shrink: 0;
}

.hc-nav a {
	color: var(--hc-muted);
	text-decoration: none;
	transition: color 0.15s;
}

.hc-nav a:hover {
	color: var(--hc-text);
}

.hc-nav-cta {
	/* biome-ignore lint/complexity/noImportantStyles: must beat the more specific .hc-nav a color so the CTA stays white on the brand background */
	color: white !important;
	padding: 6px 14px;
	border-radius: var(--hc-radius);
	font-size: 12px;
	font-weight: 500;
	transition: opacity 0.15s;
}

.hc-nav-cta:hover {
	opacity: 0.9;
}

/* ---------- Header actions group (right side: CTA + auth) ---------- */

.hc-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* ---------- Page-level actions row (Contact CTA) ---------- */
/* Lives inside .hc-container (top of <main>). Absolute-positioned at the
   top-right of the page so any breadcrumb in {{ content }} renders left-
   aligned on the same visual row. The `right: 24px` matches the
   .hc-container horizontal padding so the action's right edge lines up
   pixel-for-pixel with the rightmost flex child of .hc-header-inner above
   (which sits inside the container's padding box). */

.hc-page {
	position: relative;
}

.hc-page-actions {
	position: absolute;
	top: 0;
	right: 24px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* On mobile we let the actions row flow inline so it doesn't fight for
   horizontal space with the breadcrumb / page heading. */
@media (max-width: 640px) {
	.hc-page-actions {
		position: static;
		justify-content: flex-end;
		margin-bottom: 16px;
	}
}

/* ---------- Main ---------- */

.hc-main {
	padding: 40px 0 60px;
}

/* ---------- Footer ---------- */

.hc-footer {
	border-top: 1px solid var(--hc-border);
	padding: 24px 0;
}

.hc-footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: var(--hc-muted);
}

.hc-footer a {
	color: var(--hc-muted);
	text-decoration: underline;
	transition: color 0.15s;
}

.hc-footer a:hover {
	color: var(--hc-text);
}

/* ---------- Hero ---------- */

.hc-hero {
	text-align: center;
	padding: 20px 0 40px;
}

.hc-hero h1 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 8px;
}

/* ---------- Sections ---------- */

.hc-section {
	margin-bottom: 40px;
}

.hc-section h2 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 16px;
}

.hc-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.hc-subtitle {
	color: var(--hc-muted);
	font-size: 14px;
	margin-bottom: 16px;
}

.hc-link {
	font-size: 13px;
	color: var(--hc-muted);
	text-decoration: none;
	transition: color 0.15s;
}

.hc-link:hover {
	color: var(--hc-text);
}

/* ---------- Cards ---------- */

.hc-card {
	display: block;
	padding: 20px;
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	text-decoration: none;
	color: var(--hc-text);
	background: var(--hc-card);
	transition: border-color 0.15s;
}

.hc-card:hover {
	border-color: var(--hc-muted);
}

.hc-card h3 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 6px;
}

.hc-card p {
	font-size: 13px;
	color: var(--hc-muted);
	line-height: 1.5;
}

.hc-card-meta {
	font-size: 12px;
	color: var(--hc-light);
	margin-top: 8px;
}

.hc-card-icon {
	font-size: 20px;
	margin-bottom: 8px;
	display: block;
}

.hc-card-sections {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

/* ---------- Grids ---------- */

.hc-category-grid,
.hc-article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

/* ---------- Article List ---------- */

.hc-article-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hc-article-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-radius: var(--hc-radius);
	text-decoration: none;
	color: var(--hc-text);
	transition: background-color 0.15s;
}

.hc-article-item:hover {
	background: var(--hc-card);
}

.hc-article-title {
	font-size: 14px;
	font-weight: 500;
}

.hc-article-excerpt {
	font-size: 13px;
	color: var(--hc-muted);
	margin-top: 2px;
}

/* ---------- FAQ List ---------- */

.hc-faq-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hc-faq-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-radius: var(--hc-radius);
	text-decoration: none;
	color: var(--hc-text);
	transition: background-color 0.15s;
}

.hc-faq-item:hover {
	background: var(--hc-card);
}

.hc-faq-title {
	font-size: 14px;
	font-weight: 500;
}

.hc-faq-excerpt {
	font-size: 13px;
	color: var(--hc-muted);
	margin-top: 2px;
}

/* ---------- Arrow & Meta ---------- */

.hc-arrow {
	color: var(--hc-light);
	font-size: 14px;
	flex-shrink: 0;
}

.hc-meta {
	font-size: 12px;
	color: var(--hc-light);
	white-space: nowrap;
}

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

.hc-breadcrumb {
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--hc-muted);
	margin-bottom: 20px;
}

.hc-breadcrumb a {
	color: var(--hc-muted);
	text-decoration: none;
	transition: color 0.15s;
}

.hc-breadcrumb a:hover {
	color: var(--hc-text);
}

/* ---------- Article ---------- */

.hc-article-header {
	margin-bottom: 32px;
}

.hc-article-header h1 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 12px;
}

.hc-article-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--hc-muted);
}

.hc-article-body {
	font-size: 15px;
	line-height: 1.7;
}

.hc-article-body h2 {
	font-size: 20px;
	font-weight: 600;
	margin-top: 32px;
	margin-bottom: 12px;
}

.hc-article-body h3 {
	font-size: 17px;
	font-weight: 600;
	margin-top: 24px;
	margin-bottom: 8px;
}

.hc-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--hc-radius);
}

.hc-article-body a {
	color: var(--hc-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s;
}

.hc-article-body a:hover {
	color: var(--hc-muted);
}

/* ---------- Tags ---------- */

.hc-tags {
	display: flex;
	gap: 6px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.hc-tag {
	font-size: 11px;
	padding: 2px 8px;
	background: var(--hc-bg);
	border-radius: 4px;
	color: var(--hc-muted);
}

/* ---------- Subsection ---------- */

.hc-subsection {
	margin-bottom: 32px;
}

.hc-subsection h2 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hc-border);
}

.hc-section-link {
	color: inherit;
	text-decoration: none;
}

.hc-section-link:hover {
	color: var(--hc-brand-color, var(--hc-text));
	text-decoration: underline;
}

/* ---------- Related ---------- */

.hc-related {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--hc-border);
}

/* ---------- Form ---------- */

.hc-form {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.hc-form-page {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.hc-form-page > h1,
.hc-form-page > .hc-subtitle {
	text-align: center;
}

.hc-form-page .hc-form,
.hc-form-page .hc-form-error {
	text-align: left;
}

.hc-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.hc-form-field {
	margin-bottom: 16px;
}

.hc-form-field label {
	font-size: 13px;
	font-weight: 500;
}

.hc-form-field input,
.hc-form-field textarea,
.hc-form-field select {
	background: var(--hc-card);
}

.hc-form-field textarea {
	resize: vertical;
	min-height: 100px;
}

.hc-form-field--readonly input,
.hc-form-field--readonly textarea,
.hc-form-field--readonly select {
	background: var(--hc-muted, #f4f4f5);
	color: var(--hc-muted-foreground, #71717a);
	cursor: not-allowed;
}

.hc-form-field--error input,
.hc-form-field--error textarea,
.hc-form-field--error select,
.hc-form-field--error .hc-file-drop {
	border-color: #ef4444;
}

.hc-form-field--error input:focus,
.hc-form-field--error textarea:focus,
.hc-form-field--error select:focus {
	outline-color: #ef4444;
}

.hc-required {
	color: #ef4444;
}

.hc-help {
	font-size: 12px;
	color: var(--hc-muted);
	margin-top: 4px;
}

/* biome-ignore lint/style/noDescendingSpecificity: the earlier, more specific rule is a deliberate override; specificity, not source order, decides between them */
.hc-form-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
	padding: 10px 14px;
	border-radius: var(--hc-radius);
	font-size: 13px;
	margin-bottom: 16px;
}

.hc-form-success {
	text-align: center;
	padding: 40px 0;
}

.hc-success-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.hc-file-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px;
	background: var(--hc-bg);
	border-radius: var(--hc-radius);
	margin-top: 6px;
	font-size: 12px;
}

.hc-file-remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--hc-muted);
	font-size: 16px;
	line-height: 1;
	transition: color 0.15s;
}

.hc-file-remove:hover {
	color: #dc2626;
}

.hc-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
}

/* ---------- Form builder additions ---------- */

.hc-form-group {
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	padding: 14px 16px 2px;
	margin-bottom: 16px;
}

.hc-form-group legend {
	padding: 0 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hc-muted);
}

/* biome-ignore lint/style/noDescendingSpecificity: the earlier, more specific rule is a deliberate override; specificity, not source order, decides between them */
.hc-file-drop {
	border: 2px dashed var(--hc-border);
	border-radius: var(--hc-radius);
	padding: 24px;
	text-align: center;
	color: var(--hc-muted);
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
	margin-top: 6px;
	font-size: 13px;
}

.hc-file-drop:hover,
.hc-file-drop--active {
	border-color: var(--hc-accent, #2563eb);
	background: var(--hc-bg);
}

.hc-file-list {
	margin-top: 8px;
}

.hc-file-thumb {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 4px;
	margin-right: 10px;
}

.hc-file-icon {
	font-size: 22px;
	margin-right: 10px;
}

.hc-file-meta {
	flex: 1;
}

.hc-field-error {
	color: #dc2626;
	font-size: 12px;
	margin-top: 4px;
}

/* "Did you mean gmail.com?" (#369) is styled inline by form.js, not here: a
   brand with custom CSS REPLACES this stylesheet rather than layering over it
   (base.liquid), so a rule here would not reach a themed help center. Only the
   hover/focus affordance lives in CSS, where its absence is cosmetic. */
.hc-email-hint:hover,
.hc-email-hint:focus-visible {
	color: inherit;
}

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

.hc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: var(--hc-radius);
	font-size: 14px;
	font-weight: 500;
	color: white;
	background-color: #2563eb;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s;
}

.hc-btn:hover {
	opacity: 0.9;
}

.hc-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* The reply form's file picker is a <label> pointing at a hidden input with
   `for`, so it can carry neither `disabled` nor `:disabled`. It gets the same
   look while a send is in flight (#634). Not scoped to .hc-btn: a brand template
   that restyles the picker without that class must still show it frozen.

   Pico usually gets there first — its `label[aria-disabled=true]` sets the same
   two properties — but it is loaded from a third-party CDN in base.liquid, so
   none of that is guaranteed. This rule is the fallback for when it does not
   load.

   `pointer-events: none` is what makes the opacity stick, not a nicety. This
   selector is (0,1,0), while `.hc-btn:hover` and `.hc-btn-secondary:hover` are
   both (0,2,0) and the picker carries `hc-btn hc-btn-secondary` — so on hover
   they won, and the frozen picker brightened back to 0.9 with the secondary
   hover background, looking enabled exactly when the pointer was on it.
   Suppressing hover beats raising specificity here: matching (0,2,0) with
   `.hc-picker-disabled:hover` still loses to `.hc-btn-secondary:hover`, which is
   defined later in this file. It also blocks the click on the label itself,
   rather than leaving the freeze to the target input's `disabled` alone.

   No `cursor` declaration: with pointer-events off, the cursor never resolves
   against this element, so one would be dead code in every case — including the
   no-Pico fallback this rule exists for. */
.hc-picker-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.hc-btn-submit {
	width: 100%;
	margin-top: 8px;
}

/* ---------- Utility ---------- */

.hc-center {
	text-align: center;
	padding: 60px 0;
}

.hc-empty {
	color: var(--hc-muted);
	font-size: 14px;
	text-align: center;
	padding: 40px 0;
}

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

@media (max-width: 640px) {
	.hc-header-inner {
		flex-wrap: wrap;
		height: auto;
		padding: 12px 0;
	}

	.hc-search-wrap {
		max-width: 100%;
		order: 3;
		width: 100%;
		margin-top: 8px;
	}

	.hc-header-actions {
		gap: 8px;
	}

	.hc-header-actions .hc-nav-cta {
		padding: 5px 10px;
		font-size: 11px;
	}

	.hc-category-grid,
	.hc-article-grid {
		grid-template-columns: 1fr;
	}

	.hc-form-row {
		grid-template-columns: 1fr;
	}

	.hc-hero h1 {
		font-size: 22px;
	}

	.hc-article-header h1 {
		font-size: 22px;
	}

	.hc-footer-inner {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}
}

/* ==========================================================================
   Phase E — Auth banner, tickets list, ticket detail, message bubbles
   ========================================================================== */

/* ---------- Auth banner (form, tickets-list, ticket-detail) ---------- */

.hc-auth-banner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 13px;
}

.hc-auth-greeting {
	color: var(--hc-muted);
}

.hc-auth-link {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--hc-radius);
	border: 1px solid var(--hc-border);
	background: var(--hc-card);
	color: var(--hc-text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition:
		background 0.15s,
		border-color 0.15s;
}

.hc-auth-link:hover {
	background: var(--hc-bg);
	border-color: var(--hc-light);
}

/* ---------- Login required ---------- */

.hc-login-required {
	padding: 32px 0;
}

.hc-login-required .hc-card {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
}

/* ---------- Secondary / tertiary buttons (used by tickets reply form) ---------- */

.hc-btn-secondary {
	background: var(--hc-card);
	color: var(--hc-text);
	border: 1px solid var(--hc-border);
}

.hc-btn-secondary:hover {
	background: var(--hc-bg);
	border-color: var(--hc-light);
}

.hc-btn-tertiary {
	background: transparent;
	color: var(--hc-muted);
	border: 1px solid transparent;
	padding-left: 12px;
	padding-right: 12px;
}

.hc-btn-tertiary:hover {
	background: var(--hc-bg);
	color: var(--hc-text);
}

/* ---------- File list (reply attachments + form attachments share) ---------- */

.hc-file-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hc-file-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	background: var(--hc-bg);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	font-size: 13px;
}

.hc-file-meta {
	color: var(--hc-text);
}

.hc-file-remove {
	background: transparent;
	border: none;
	color: var(--hc-muted);
	font-size: 18px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
}

.hc-file-remove:hover {
	color: var(--hc-text);
}

/* ---------- Tickets list ---------- */

.hc-tickets-list h1 {
	font-size: 22px;
	margin-bottom: 4px;
}

.hc-tickets-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.hc-tickets-list-header h1 {
	margin-bottom: 0;
}

.hc-tickets-list-new {
	width: auto;
	margin-top: 0;
	padding: 8px 16px;
	font-size: 13px;
	flex-shrink: 0;
}

.hc-tickets-empty {
	padding: 32px 0;
	text-align: center;
}

.hc-tickets-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	background: var(--hc-card);
}

.hc-tickets-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.hc-tickets-table th,
.hc-tickets-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--hc-border);
	vertical-align: middle;
}

.hc-tickets-table th {
	font-weight: 600;
	color: var(--hc-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--hc-bg);
}

.hc-tickets-table tbody tr {
	background: var(--hc-card);
	transition: background 0.1s;
}

.hc-tickets-table tbody tr:hover {
	background: var(--hc-bg);
}

.hc-tickets-table tbody tr:last-child td {
	border-bottom: none;
}

/* biome-ignore lint/style/noDescendingSpecificity: the earlier, more specific rule is a deliberate override; specificity, not source order, decides between them */
.hc-tickets-table td {
	color: var(--hc-text);
}

.hc-tickets-table a {
	color: var(--hc-text);
	text-decoration: none;
	font-weight: 500;
}

.hc-tickets-table a:hover {
	text-decoration: underline;
}

/* ---------- Status pills ---------- */

.hc-ticket-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid transparent;
	background: var(--hc-bg);
	color: var(--hc-muted);
}

.hc-ticket-status-new {
	background: #dbeafe;
	color: #1e40af;
	border-color: #bfdbfe;
}

.hc-ticket-status-open {
	background: #dcfce7;
	color: #166534;
	border-color: #bbf7d0;
}

.hc-ticket-status-pending {
	background: #fef3c7;
	color: #92400e;
	border-color: #fde68a;
}

.hc-ticket-status-on_hold {
	background: #e5e7eb;
	color: #374151;
	border-color: #d1d5db;
}

.hc-ticket-status-resolved {
	background: #f1f5f9;
	color: #475569;
	border-color: #e2e8f0;
}

.hc-ticket-status-closed {
	background: #f3f4f6;
	color: #6b7280;
	border-color: #e5e7eb;
}

/* ---------- Ticket detail ---------- */

.hc-ticket-detail h1 {
	font-size: 22px;
	margin-bottom: 4px;
}

.hc-ticket-header .hc-subtitle {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 4px;
	font-size: 13px;
}

.hc-back-link {
	color: var(--hc-muted);
	font-size: 13px;
	text-decoration: none;
}

.hc-back-link:hover {
	color: var(--hc-text);
	text-decoration: underline;
}

.hc-ticket-messages {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---------- Message bubbles ---------- */

.hc-message {
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	padding: 12px 16px;
	background: var(--hc-card);
	max-width: 85%;
}

.hc-message-contact {
	align-self: flex-end;
	background: #eff6ff;
	border-color: #bfdbfe;
}

.hc-message-agent,
.hc-message-ai_bot {
	align-self: flex-start;
	background: var(--hc-card);
}

.hc-message-system {
	align-self: center;
	max-width: 100%;
	background: transparent;
	border: none;
	color: var(--hc-muted);
	font-style: italic;
	font-size: 13px;
	text-align: center;
	padding: 8px 0;
}

.hc-message-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--hc-muted);
}

.hc-message-sender {
	font-weight: 600;
	color: var(--hc-text);
}

.hc-message-content {
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.hc-message-attachments {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.hc-message-attachments a {
	color: var(--hc-text);
	text-decoration: underline;
	text-decoration-color: var(--hc-light);
}

.hc-message-attachments a:hover {
	text-decoration-color: var(--hc-text);
}

/* ---------- Reply form + closed banner ---------- */

.hc-ticket-reply h2 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 12px;
}

.hc-ticket-reply textarea {
	width: 100%;
	min-height: 110px;
	padding: 10px 12px;
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	background: var(--hc-card);
	color: var(--hc-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	resize: vertical;
}

.hc-ticket-reply textarea:focus {
	outline: none;
	border-color: var(--hc-muted);
}

.hc-ticket-closed-banner {
	padding: 24px;
	background: var(--hc-bg);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	color: var(--hc-muted);
	font-size: 14px;
	text-align: center;
}

.hc-ticket-closed-title {
	margin: 0 0 8px;
	color: var(--hc-text);
	font-size: 16px;
	font-weight: 600;
}

.hc-ticket-closed-body {
	margin: 0;
	line-height: 1.5;
}

.hc-ticket-closed-cta {
	margin: 16px 0 0;
}

.hc-ticket-closed-cta .hc-btn {
	width: auto;
	margin-top: 0;
	padding: 8px 18px;
	font-size: 13px;
	display: inline-flex;
}

/* ---------- Modal (native <dialog>) ---------- */

.hc-modal {
	width: min(440px, calc(100vw - 32px));
	max-width: 100%;
	padding: 0;
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	background: var(--hc-card);
	color: var(--hc-text);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.hc-modal::backdrop {
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(2px);
}

.hc-modal[open] {
	animation: hc-modal-in 0.16s ease-out;
}

@keyframes hc-modal-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.hc-modal-content {
	margin: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hc-modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--hc-text);
}

.hc-modal-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--hc-muted);
}

.hc-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.hc-modal-actions .hc-btn {
	width: auto;
	margin-top: 0;
	padding: 8px 16px;
	font-size: 13px;
}

@media (max-width: 480px) {
	.hc-modal-actions {
		flex-direction: column-reverse;
	}

	.hc-modal-actions .hc-btn {
		width: 100%;
	}
}

/* ---------- Responsive (Phase E additions) ---------- */

@media (max-width: 640px) {
	.hc-tickets-table th,
	.hc-tickets-table td {
		padding: 10px 12px;
	}

	.hc-message {
		max-width: 100%;
	}

	.hc-auth-banner {
		justify-content: space-between;
		font-size: 12px;
	}
}

/* ==========================================================================
   Header auth control (sign-in button + signed-in dropdown menu)
   Lives in base.liquid header alongside .hc-nav.
   ========================================================================== */

.hc-header-auth {
	flex-shrink: 0;
}

/* Sign-in button (anonymous) — solid brand-color background, like .hc-nav-cta */

.hc-header-auth-signin {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--hc-radius);
	font-size: 12px;
	font-weight: 500;
	color: white;
	text-decoration: none;
	background: #2563eb;
	transition: opacity 0.15s;
}

.hc-header-auth-signin:hover {
	opacity: 0.9;
}

/* Signed-in dropdown — uses native <details>/<summary> for keyboard +
   screen-reader support; no JS required. */

.hc-header-auth-menu {
	position: relative;
}

/* Belt-and-suspenders reset of the native <details>/<summary> disclosure
   triangle. Without all four declarations at least one engine still renders
   a stray ▶/► glyph next to the avatar pill. */
.hc-header-auth-menu summary {
	display: flex;
	align-items: center;
	list-style: none;
	cursor: pointer;
}

.hc-header-auth-menu summary::-webkit-details-marker {
	display: none;
}

.hc-header-auth-menu summary::marker {
	content: "";
	display: none;
}

/* Pico CSS v2 injects a chevron-right via summary::after on every
   <details><summary>. We render our own caret SVG inside the trigger,
   so suppress Pico's so the dropdown doesn't render two arrows. */
.hc-header-auth-menu summary::after {
	display: none;
}

.hc-header-auth-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--hc-border);
	border-radius: 999px;
	background: var(--hc-card);
	color: var(--hc-text);
	font-size: 13px;
	font-weight: 500;
	transition:
		background 0.15s,
		border-color 0.15s;
}

.hc-header-auth-trigger:hover {
	background: var(--hc-bg);
	border-color: var(--hc-light);
}

.hc-header-auth-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #2563eb;
	color: white;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
}

.hc-header-auth-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hc-header-auth-caret {
	color: var(--hc-muted);
	transition: transform 0.15s;
}

.hc-header-auth-menu[open] .hc-header-auth-caret {
	transform: rotate(180deg);
}

.hc-header-auth-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 220px;
	padding: 8px;
	background: var(--hc-card);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hc-header-auth-dropdown-header {
	padding: 8px 12px 10px;
	border-bottom: 1px solid var(--hc-border);
	margin-bottom: 6px;
}

.hc-header-auth-dropdown-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--hc-text);
}

.hc-header-auth-dropdown-email {
	font-size: 12px;
	color: var(--hc-muted);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hc-header-auth-dropdown-item {
	display: block;
	padding: 8px 12px;
	font-size: 13px;
	color: var(--hc-text);
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.1s;
}

.hc-header-auth-dropdown-item:hover {
	background: var(--hc-bg);
}

.hc-header-auth-dropdown-item-danger {
	color: #b91c1c;
}

.hc-header-auth-dropdown-item-danger:hover {
	background: #fee2e2;
}

@media (max-width: 640px) {
	.hc-header-auth-name {
		display: none;
	}

	.hc-header-auth-trigger {
		padding: 4px;
	}
}

/* ==========================================================================
   Article voting widget (issue #134)
   ========================================================================== */

.hc-vote {
	margin: 32px 0;
	padding: 20px;
	border-top: 1px solid var(--hc-border, #e5e5e5);
	text-align: center;
}

.hc-vote-question {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--hc-text, #18181b);
}

.hc-vote-actions {
	display: inline-flex;
	gap: 10px;
}

.hc-vote-button {
	background: transparent;
	border: 1px solid var(--hc-border, #e5e5e5);
	border-radius: 999px;
	padding: 8px 22px;
	cursor: pointer;
	min-width: 80px;
	color: inherit;
	font: inherit;
}

.hc-vote-button[aria-pressed="true"] {
	background: var(--hc-accent, #2563eb);
	color: white;
	border-color: transparent;
}

.hc-vote-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hc-vote-thanks {
	margin: 12px 0 0;
	color: var(--hc-muted, #71717a);
	font-size: 13px;
}