/* Velora CP - community features (solved topics, reactions, accent picker).
   Uses Velora tokens when present, with neutral fallbacks for other styles. */
.velora-svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

/* Solved */
.velora-solved-banner {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
	margin: .75rem 0 1rem; padding: .75rem 1rem;
	border: 1px solid color-mix(in oklab, var(--v-success, #16a34a) 35%, transparent);
	border-radius: var(--v-radius-card, 12px);
	background: var(--v-success-soft, #ecfdf3); color: var(--v-success, #15803d);
	font-weight: 600; font-size: .9375rem;
}
.velora-solved-banner .velora-svg { width: 1.25rem; height: 1.25rem; }
.velora-solved-link {
	margin-inline-start: auto; padding: .375rem .75rem; border-radius: var(--v-radius-pill, 999px);
	background: var(--v-success, #16a34a); color: #fff !important; font-size: .8125rem; text-decoration: none !important;
}
.velora-solved-link:hover { filter: brightness(1.08); }
.velora-solution-badge, .velora-solved-pill {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .125rem .55rem; border-radius: var(--v-radius-pill, 999px);
	background: var(--v-success-soft, #ecfdf3); color: var(--v-success, #15803d);
	font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.velora-solution-badge { margin-block-end: .375rem; }
.velora-solved-pill { margin-inline-end: .375rem; }
.post:has(.velora-solution-badge) {
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--v-success, #16a34a) 45%, transparent), var(--v-shadow-card, 0 0 0 transparent);
}
.velora-solve-btn.is-active, .velora-solve-btn.is-active:hover { color: var(--v-success, #16a34a) !important; }

/* Reactions */
.velora-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: 1rem; }
.velora-reaction-list { display: contents; }
.velora-reaction, .velora-react-toggle {
	display: inline-flex; align-items: center; gap: .3rem;
	height: 2rem; padding: 0 .625rem; border: 1px solid var(--v-border, #d9dee7);
	border-radius: var(--v-radius-pill, 999px); background: var(--v-surface, #fff); color: var(--v-muted, #5b6474);
	font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1; cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s;
}
.velora-reaction:disabled { cursor: default; }
.velora-reaction:not(:disabled):hover, .velora-react-toggle:hover, .velora-react-toggle[aria-expanded="true"] {
	border-color: var(--v-brand-300, #a5b4fc); background: var(--v-brand-soft, #eef2ff); color: var(--v-brand-text, #4338ca);
}
.velora-reaction.is-mine { border-color: var(--v-brand-400, #818cf8); background: var(--v-brand-soft, #eef2ff); color: var(--v-brand-text, #4338ca); }
.velora-emoji { font-size: 1rem; line-height: 1; }
.velora-react-toggle { width: 2rem; padding: 0; justify-content: center; }
.velora-react-toggle .velora-svg { width: 1.05rem; height: 1.05rem; }
.velora-react-picker { position: relative; }
.velora-react-menu {
	position: absolute; bottom: calc(100% + .5rem); inset-inline-start: 0; z-index: 30;
	display: flex; gap: .125rem; padding: .3rem;
	border: 1px solid var(--v-border, #d9dee7); border-radius: var(--v-radius-pill, 999px);
	background: var(--v-surface, #fff); box-shadow: var(--v-shadow-pop, 0 12px 32px rgba(15, 23, 42, .18));
	animation: velora-pop .14s ease-out;
}
.velora-react-menu[hidden] { display: none; }
.velora-react-option {
	display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
	border: 0; border-radius: 999px; background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer;
	transition: transform .14s, background-color .14s;
}
.velora-react-option:hover, .velora-react-option:focus-visible { transform: scale(1.25) translateY(-2px); background: var(--v-surface-2, #f3f5f9); outline: none; }
.velora-react-option.is-mine { background: var(--v-brand-soft, #eef2ff); }
.velora-reactions.is-busy { opacity: .6; pointer-events: none; }
@keyframes velora-pop { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
.velora-bump { animation: velora-bump .3s ease; }
@keyframes velora-bump { 50% { transform: scale(1.15); } }

/* UCP accent picker */
.velora-accents { display: flex; flex-wrap: wrap; gap: .5rem; }
.velora-accent { position: relative; cursor: pointer; }
.velora-accent input { position: absolute; opacity: 0; pointer-events: none; }
.velora-accent-swatch {
	display: block; width: 2rem; height: 2rem; border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .15s, box-shadow .15s;
}
.velora-accent-swatch.is-default { background: conic-gradient(#6366f1, #ec4899, #f59e0b, #10b981, #0ea5e9, #6366f1); }
.velora-accent:hover .velora-accent-swatch { transform: scale(1.08); }
.velora-accent input:checked + .velora-accent-swatch { box-shadow: 0 0 0 2px var(--v-surface, #fff), 0 0 0 4px var(--v-text, #1f2937); }
.velora-accent input:focus-visible + .velora-accent-swatch { outline: 2px solid var(--v-link, #4f46e5); outline-offset: 4px; }

@media print { .velora-react-picker { display: none; } }

/* Who reacted */
.velora-reaction-summary {
	margin-inline-start: .25rem;
	color: var(--v-muted, #5b6474);
	font-size: .8125rem;
	cursor: default;
}
.velora-reaction-summary[hidden] { display: none; }
[data-velora-tip] { position: relative; }
[data-velora-tip]:not([data-velora-tip=""]):hover::after,
[data-velora-tip]:not([data-velora-tip=""]):focus-visible::after {
	content: attr(data-velora-tip);
	position: absolute;
	bottom: calc(100% + .5rem);
	inset-inline-start: 0;
	z-index: 40;
	width: max-content;
	max-width: 16rem;
	padding: .4rem .6rem;
	border-radius: .5rem;
	background: var(--v-heading, #111827);
	color: var(--v-surface, #fff);
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: normal;
	text-align: start;
	box-shadow: var(--v-shadow-pop, 0 8px 24px rgba(0, 0, 0, .2));
	pointer-events: none;
	animation: velora-pop .12s ease-out;
}

/* UCP profile cover picker */
.velora-cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; margin: .75rem 0 1.25rem; }
.velora-cover-option { position: relative; display: flex; flex-direction: column; gap: .4rem; cursor: pointer; }
.velora-cover-option input { position: absolute; opacity: 0; pointer-events: none; }
.velora-cover-swatch {
	display: block; aspect-ratio: 16 / 7; border-radius: var(--v-radius-control, 10px);
	background:
		radial-gradient(120% 140% at 0% 0%, oklch(0.62 0.2 var(--velora-cover-a) / .9) 0%, transparent 60%),
		radial-gradient(90% 120% at 100% 100%, oklch(0.6 0.19 var(--velora-cover-b) / .8) 0%, transparent 60%),
		linear-gradient(135deg, oklch(0.36 0.12 var(--velora-cover-a)), oklch(0.2 0.07 var(--velora-cover-b)));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
	transition: transform .15s, box-shadow .15s;
}
.velora-cover-swatch.is-default {
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--v-brand-500, #6366f1) 85%, transparent) 0%, transparent 60%),
		radial-gradient(90% 120% at 100% 100%, color-mix(in oklch, var(--v-accent-2, #ec4899) 75%, transparent) 0%, transparent 60%),
		linear-gradient(135deg, var(--v-brand-800, #312e81), var(--v-brand-950, #1e1b4b));
}
.velora-cover-swatch.velora-cover-midnight { background: radial-gradient(100% 140% at 20% 0%, oklch(0.4 0.08 265 / .8), transparent 60%), linear-gradient(160deg, oklch(0.24 0.03 260), oklch(0.12 0.02 260)); }
.velora-cover-swatch.is-image { background-position: center; background-size: cover; }
.velora-cover-name { color: var(--v-muted, #5b6474); font-size: .8125rem; font-weight: 600; }
.velora-cover-option:hover .velora-cover-swatch { transform: translateY(-2px); }
.velora-cover-option input:checked + .velora-cover-swatch { box-shadow: 0 0 0 2px var(--v-surface, #fff), 0 0 0 4px var(--v-link, #4f46e5); }
.velora-cover-option input:checked ~ .velora-cover-name { color: var(--v-heading, #111827); }
.velora-cover-option input:focus-visible + .velora-cover-swatch { outline: 2px solid var(--v-link, #4f46e5); outline-offset: 4px; }

/* Upload validation */
.velora-upload-error { margin: .5rem 0 0; color: var(--v-danger, #dc2626) !important; font-size: .8125rem; font-weight: 600; }
.velora-upload-error[hidden] { display: none; }
.velora-input-error { outline: 2px solid var(--v-danger, #dc2626); outline-offset: 2px; border-radius: 6px; }