/*
 * Blog Advisor panel.
 *
 * Everything is position: fixed, so the widget never contributes to layout
 * shift on the page behind it. All rules are scoped under #mba-root to keep
 * theme styles out.
 */

#mba-root {
	--mba-panel: #0e0e11;
	--mba-surface: #17171c;
	--mba-surface-2: #1f1f26;
	--mba-border: rgba(255, 255, 255, 0.09);
	--mba-text: #ffffff;
	--mba-muted: #9a9aa5;
	--mba-radius: 14px;
	--mba-online: #35d07f;
	--mba-panel-width: 420px;

	position: relative;
	font-family: inherit;
}

#mba-root *,
#mba-root *::before,
#mba-root *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- launcher */

.mba-launcher {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 48px);
	margin: 0;
	padding: 13px 22px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mba-text);
	background: var(--mba-panel);
	border: 1.5px solid var(--mba-accent);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.mba-launcher:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.mba-launcher:focus-visible,
#mba-root button:focus-visible,
#mba-root a:focus-visible {
	outline: 2px solid var(--mba-accent);
	outline-offset: 2px;
}

/*
 * The text field sits inside a pill, so a rectangular ring around the input
 * does not follow the shape. The caret marks the insertion point and the pill
 * border carries the focus state, which keeps a visible indicator without the
 * mismatched rectangle.
 */
.mba-input:focus,
.mba-input:focus-visible {
	outline: none;
}

.mba-composer:focus-within {
	border-color: var(--mba-accent);
}

.mba-launcher[hidden] {
	display: none;
}

.mba-mark {
	flex: 0 0 auto;
	color: var(--mba-accent);
}

/* ---------------------------------------------------------------- panel */

.mba-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	width: var(--mba-panel-width);
	max-width: 100vw;
	color: var(--mba-text);
	background: var(--mba-panel);
	border-left: 1px solid var(--mba-border);
	box-shadow: -18px 0 48px rgba(0, 0, 0, 0.5);
	transform: translateX(100%);
	transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
	visibility: hidden;
}

.mba-panel.is-open {
	transform: translateX(0);
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.mba-panel,
	.mba-launcher {
		transition: none;
	}
}

@media (max-width: 640px) {
	#mba-root {
		--mba-panel-width: 100vw;
	}

	.mba-launcher {
		right: 16px;
		bottom: 16px;
	}
}

/* --------------------------------------------------------------- header */

.mba-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--mba-border);
}

.mba-header-text {
	flex: 1 1 auto;
	min-width: 0;
	margin-right: auto;
}

.mba-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.mba-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--mba-muted);
}

.mba-status::before {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--mba-online);
	border-radius: 50%;
}

.mba-home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 4px;
	padding: 6px 12px 6px 9px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--mba-text);
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: 999px;
	cursor: pointer;
}

.mba-home[hidden] {
	display: none;
}

.mba-home:hover {
	background: var(--mba-surface-2);
}

.mba-close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--mba-text);
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: 50%;
	cursor: pointer;
}

/* ----------------------------------------------------------------- avatar */

/*
 * Ring and presence dot as in the approved mockup. Both sizes carry explicit
 * dimensions so the panel does not reflow while the image decodes.
 */
.mba-avatar {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--mba-surface-2);
}

.mba-avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.mba-avatar--large {
	width: 96px;
	height: 96px;
	padding: 3px;
	box-shadow: 0 0 0 3px var(--mba-ring, #f2c14e), 0 6px 20px rgba(0, 0, 0, 0.45);
}

.mba-avatar--small {
	width: 34px;
	height: 34px;
	padding: 2px;
	box-shadow: 0 0 0 2px var(--mba-ring, #f2c14e);
}

.mba-presence {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 26%;
	height: 26%;
	min-width: 9px;
	min-height: 9px;
	background: var(--mba-online);
	border: 2px solid var(--mba-panel);
	border-radius: 50%;
}

.mba-avatar--small .mba-presence {
	border-width: 1.5px;
}

/* ------------------------------------------------------------ transcript */

.mba-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px;
	overscroll-behavior: contain;
}

.mba-welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 55%;
	padding: 24px 8px;
	text-align: center;
}

.mba-welcome-mark {
	margin-bottom: 20px;
	color: var(--mba-accent);
}

.mba-welcome .mba-avatar--large {
	margin-bottom: 22px;
}

.mba-welcome h3 {
	margin: 0 0 24px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
}

.mba-suggestions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.mba-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px 16px;
	font: inherit;
	font-size: 14px;
	color: var(--mba-text);
	text-align: left;
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: var(--mba-radius);
	cursor: pointer;
}

.mba-suggestion:hover {
	background: var(--mba-surface-2);
	border-color: rgba(255, 255, 255, 0.16);
}

.mba-turn {
	margin-bottom: 22px;
}

.mba-question {
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	border: 1.5px solid var(--mba-accent);
	border-radius: var(--mba-radius);
}

.mba-response {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 18px;
}

.mba-response .mba-avatar--small {
	margin-top: 1px;
}

.mba-response-body {
	flex: 1 1 auto;
	min-width: 0;
}

.mba-answer {
	margin: 2px 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.mba-caveat {
	margin: 2px 0 10px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--mba-muted);
	background: var(--mba-surface);
	border-left: 3px solid var(--mba-accent);
	border-radius: 8px;
}

/* ---------------------------------------------------------- loading state */

.mba-loading-label {
	margin: 2px 0 0;
	font-size: 17px;
	font-weight: 600;
}

.mba-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 46px;
	margin-top: 10px;
}

.mba-dots span {
	width: 8px;
	height: 8px;
	background: var(--mba-surface-2);
	border-radius: 50%;
	animation: mba-pulse 1.2s ease-in-out infinite;
}

.mba-dots span:nth-child(2) { animation-delay: 0.1s; }
.mba-dots span:nth-child(3) { animation-delay: 0.2s; }
.mba-dots span:nth-child(4) { animation-delay: 0.3s; }
.mba-dots span:nth-child(5) { animation-delay: 0.4s; }
.mba-dots span:nth-child(6) { animation-delay: 0.5s; }

@keyframes mba-pulse {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mba-dots span { animation: none; opacity: 0.5; }
	.mba-spinner   { animation: none; }
}

.mba-steps {
	margin-top: 18px;
	padding: 16px;
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: var(--mba-radius);
}

.mba-step {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--mba-text);
}

.mba-step + .mba-step {
	margin-top: 14px;
}

.mba-step-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid var(--mba-border);
	border-radius: 50%;
}

.mba-step.is-done .mba-step-icon {
	border-color: var(--mba-online);
	background:
		linear-gradient(45deg, transparent 45%, var(--mba-online) 45%, var(--mba-online) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--mba-online) 45%, var(--mba-online) 55%, transparent 55%);
	background-size: 60% 2px, 60% 2px;
	background-position: 20% 60%, 45% 55%;
	background-repeat: no-repeat;
}

.mba-step.is-active .mba-step-icon {
	border-color: var(--mba-accent);
	border-top-color: transparent;
	animation: mba-spin 0.9s linear infinite;
}

@keyframes mba-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ item cards */

.mba-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.mba-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px;
	color: inherit;
	text-decoration: none;
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: 12px;
}

a.mba-item:hover {
	background: var(--mba-surface-2);
	border-color: rgba(255, 255, 255, 0.18);
}

a.mba-item .mba-item-title {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.25);
	text-underline-offset: 2px;
}

.mba-item-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: cover;
	background: var(--mba-surface-2);
	border-radius: 8px;
}

.mba-item-text {
	min-width: 0;
}

.mba-item-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.mba-item-desc {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--mba-muted);
}

/* --------------------------------------------------------- source and CTA */

.mba-source {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 10px;
	padding: 12px;
	color: inherit;
	text-decoration: none;
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: 12px;
}

.mba-source:hover {
	border-color: rgba(255, 255, 255, 0.18);
}

.mba-source-eyebrow {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mba-online);
}

.mba-source-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.mba-source-note {
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--mba-muted);
}

.mba-source-arrow {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--mba-muted);
}

.mba-cta {
	display: block;
	margin-top: 12px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	background: var(--mba-accent);
	border-radius: 999px;
}

.mba-cta:hover {
	filter: brightness(1.08);
}

/* The second call to action goes to the product, so it reads as an
   alternative rather than as a duplicate of the guide link. */
.mba-cta-secondary {
	margin-top: 8px;
	color: var(--mba-text);
	background: transparent;
	border: 1.5px solid var(--mba-accent);
}

.mba-cta-secondary:hover {
	filter: none;
	background: rgba(255, 255, 255, 0.05);
}

.mba-related {
	margin-top: 14px;
}

.mba-related-heading {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mba-muted);
}

.mba-related a {
	display: block;
	padding: 12px;
	font-size: 14px;
	color: var(--mba-text);
	text-decoration: none;
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: 12px;
}

.mba-related a + a {
	margin-top: 8px;
}

.mba-retry {
	margin-top: 12px;
	padding: 10px 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--mba-text);
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: 999px;
	cursor: pointer;
}

/* ------------------------------------------------------------- composer */

.mba-footer {
	flex: 0 0 auto;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--mba-border);
}

.mba-composer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 16px;
	background: var(--mba-surface);
	border: 1px solid var(--mba-border);
	border-radius: 999px;
}

.mba-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 0;
	font: inherit;
	font-size: 15px;
	color: var(--mba-text);
	background: transparent;
	border: 0;
}

.mba-input::placeholder {
	color: var(--mba-muted);
}

.mba-input:focus {
	outline: none;
}

.mba-send {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: #ffffff;
	background: var(--mba-accent);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.mba-send[disabled] {
	background: var(--mba-surface-2);
	color: var(--mba-muted);
	cursor: default;
}

.mba-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--mba-muted);
}

.mba-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* -------------------------------------------------- deep-link highlight */

/*
 * Applied to the heading or phrase an item card pointed at. Scoped outside
 * #mba-root because it decorates the page, not the panel, and kept to a
 * background and outline so it cannot disturb the surrounding layout.
 */
.mba-hl {
	background: transparent;
	color: inherit;
	border-radius: 4px;
	scroll-margin-top: 96px;
	transition: background-color 400ms ease, box-shadow 400ms ease;
}

.mba-hl-active {
	background: rgba(245, 16, 75, 0.16);
	box-shadow: 0 0 0 6px rgba(245, 16, 75, 0.16);
}

mark.mba-hl {
	background: rgba(245, 16, 75, 0.22);
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.mba-hl {
		transition: none;
	}
}

/* The support link inside the disclaimer. */
.mba-note-link {
	color: var(--mba-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mba-note-link:hover {
	color: var(--mba-accent);
}