/* ==========================================================================
   Quick Answer for AI Citation — Public Styles
   7 visual templates, all driven by --quickanswer-accent CSS variable
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base block wrapper
   -------------------------------------------------------------------------- */
.quickanswer-block {
	--quickanswer-accent: #2563eb;
	box-sizing: border-box;
	margin: 1.5em 0;
	font-size: 1rem;
	line-height: 1.6;
}

.quickanswer-block *,
.quickanswer-block *::before,
.quickanswer-block *::after {
	box-sizing: inherit;
}

.quickanswer-inner {
	position: relative;
}

.quickanswer-answer-text {
	margin: 0;
}

.quickanswer-answer-text p:first-child { margin-top: 0; }
.quickanswer-answer-text p:last-child  { margin-bottom: 0; }

/* CTA */
.quickanswer-cta {
	margin-top: 1em;
}

.quickanswer-cta-button {
	display: inline-block;
	padding: .5em 1.25em;
	background: var( --quickanswer-accent );
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
	font-size: .9em;
	transition: opacity .15s ease;
}

.quickanswer-cta-button:hover {
	opacity: .85;
	color: #fff;
}

.quickanswer-cta-link {
	color: var( --quickanswer-accent );
	font-weight: 600;
	text-decoration: underline;
}

.quickanswer-cta-link:hover {
	text-decoration: none;
}

/* Icon shared */
.quickanswer-icon {
	display: inline-flex;
	align-items: center;
	color: var( --quickanswer-accent );
	margin-bottom: .6em;
}


/* ==========================================================================
   1. Minimal Card
   ========================================================================== */
.quickanswer-template-minimal-card .quickanswer-inner {
	padding: 1.25em 1.5em;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid var( --quickanswer-accent );
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba( 0,0,0,.06 );
}

.quickanswer-template-minimal-card .quickanswer-icon {
	color: var( --quickanswer-accent );
}

.quickanswer-template-minimal-card .quickanswer-answer-text {
	color: #374151;
}


/* ==========================================================================
   2. Minimal Inline
   ========================================================================== */
.quickanswer-template-minimal-inline .quickanswer-inner {
	padding: .6em 0 .6em 1.25em;
	border-left: 3px solid var( --quickanswer-accent );
	background: transparent;
}

.quickanswer-template-minimal-inline .quickanswer-icon {
	display: none;
}

.quickanswer-template-minimal-inline .quickanswer-answer-text {
	font-size: 1.05em;
	font-weight: 500;
	color: inherit;
}


/* ==========================================================================
   3. Minimal Alert
   ========================================================================== */
.quickanswer-template-minimal-alert .quickanswer-inner {
	padding: 1.25em 1.5em;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

/* Tinted background via pseudo-element so content alpha is unaffected */
.quickanswer-template-minimal-alert .quickanswer-inner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var( --quickanswer-accent );
	opacity: .08;
	pointer-events: none;
	z-index: 0;
}

.quickanswer-template-minimal-alert .quickanswer-icon,
.quickanswer-template-minimal-alert .quickanswer-body {
	position: relative;
	z-index: 1;
}

.quickanswer-template-minimal-alert .quickanswer-answer-text {
	color: #1f2937;
}


/* ==========================================================================
   4. Rich Card
   ========================================================================== */
.quickanswer-template-rich-card .quickanswer-inner {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba( 0,0,0,.1 );
}

.quickanswer-template-rich-card .quickanswer-header {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .75em 1.25em;
	background: var( --quickanswer-accent );
	color: #fff;
}

.quickanswer-template-rich-card .quickanswer-label {
	font-weight: 700;
	font-size: .85em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.quickanswer-template-rich-card .quickanswer-body {
	padding: 1.25em 1.5em;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-top: 0;
	border-radius: 0 0 8px 8px;
}

.quickanswer-template-rich-card .quickanswer-answer-text {
	color: #374151;
}

.quickanswer-template-rich-card .quickanswer-cta-button {
	margin-top: .25em;
}


/* ==========================================================================
   5. Rich Dark
   ========================================================================== */
.quickanswer-template-rich-dark .quickanswer-inner {
	padding: 1.5em 1.75em;
	background: #1a1f2e;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba( 0,0,0,.25 );
}

.quickanswer-template-rich-dark .quickanswer-icon {
	color: var( --quickanswer-accent );
}

.quickanswer-template-rich-dark .quickanswer-answer-text {
	color: #e2e8f0;
}

.quickanswer-template-rich-dark .quickanswer-cta-link {
	color: var( --quickanswer-accent );
}


/* ==========================================================================
   6. Rich Gradient
   ========================================================================== */
.quickanswer-template-rich-gradient .quickanswer-inner {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba( 0,0,0,.08 );
}

.quickanswer-template-rich-gradient .quickanswer-header {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .8em 1.25em;
	background: linear-gradient( 135deg, var( --quickanswer-accent ) 0%, rgba(255,255,255,.25) 100% ),
	            var( --quickanswer-accent );
	color: #fff;
}

.quickanswer-template-rich-gradient .quickanswer-label {
	font-weight: 700;
	font-size: .85em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.quickanswer-template-rich-gradient .quickanswer-body {
	padding: 1.25em 1.5em;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-top: 0;
	border-radius: 0 0 8px 8px;
}

.quickanswer-template-rich-gradient .quickanswer-answer-text {
	color: #374151;
}


/* ==========================================================================
   7. Citation Box
   ========================================================================== */
.quickanswer-template-citation-box .quickanswer-inner {
	padding: 1.25em 1.5em;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fafafa;
}

.quickanswer-template-citation-box .quickanswer-header {
	display: flex;
	align-items: center;
	gap: .4em;
	margin-bottom: .75em;
	color: var( --quickanswer-accent );
}

.quickanswer-template-citation-box .quickanswer-label {
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7280;
}

.quickanswer-template-citation-box .quickanswer-body {
	padding: 0;
	border-top: 1px solid #e5e7eb;
	padding-top: .75em;
}

.quickanswer-template-citation-box .quickanswer-answer-text {
	color: #374151;
	font-style: italic;
}

.quickanswer-template-citation-box .quickanswer-cta-link {
	font-style: normal;
}