/**
 * ViracoAI floating assistant widget.
 *
 * Two things drive the shape of this file:
 *
 * 1. Every selector is scoped under #viracoai-widget. An ID beats virtually
 *    any theme selector, which matters because themes like Thim paint their
 *    primary colour onto every <button> and <a> on the page.
 * 2. The picker deliberately mirrors kut.viracoai.net's landing page — same
 *    #070512 backdrop, same violet-to-pink brand gradient, same glass cards.
 */

#viracoai-widget {
	--vi-bg: #070512;
	--vi-bg-2: #0d0a1c;
	--vi-violet: #7c3aed;
	--vi-pink: #ec4899;
	--vi-text: #f4f2ff;
	--vi-muted: #a9a3c4;
	--vi-line: rgba(255, 255, 255, 0.08);
	--vi-card: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));

	/* Scale the embedded chat is rendered at inside the panel. Lower = more
	   content and tighter spacing, but smaller text. 1 disables scaling. */
	--vi-zoom: .85;

	position: fixed;
	right: 24px;
	bottom: 24px;
	/* Above most themes and sticky headers, below modal overlays. */
	z-index: 99990;
	font-family: inherit;
	direction: rtl;
	line-height: normal;
}

#viracoai-widget *,
#viracoai-widget *::before,
#viracoai-widget *::after {
	box-sizing: border-box;
}

/**
 * Theme neutraliser.
 *
 * Themes style bare <button>/<a> aggressively — Thim sets
 * `background-color: var(--thim-body-primary-color, #ffb606)`, which is what
 * put an orange slab behind this widget. !important is warranted here: the
 * widget ships into themes we cannot see, and several of them use !important
 * themselves. Component rules below re-apply what we actually want.
 */
#viracoai-widget button,
#viracoai-widget a {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto;
	height: auto;
	outline: none;
	transition: none;
}

#viracoai-widget button::before,
#viracoai-widget button::after,
#viracoai-widget a::before,
#viracoai-widget a::after {
	content: none !important;
}


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

#viracoai-widget .viracoai-launcher {
	display: flex !important;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/**
 * The orb is the button proper, so it — not the label — must sit in the
 * corner. Under `direction: rtl` the first flex item lands on the right, so
 * pulling the orb to the front puts it against the edge with the label
 * trailing off to its left.
 */
#viracoai-widget .viracoai-launcher__orb {
	order: -1;
	position: relative;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50% !important;
	color: #fff !important;
	background: radial-gradient(120% 120% at 30% 20%, #a78bfa 0%, transparent 55%),
		linear-gradient(140deg, var(--vi-violet) 0%, var(--vi-pink) 100%) !important;
	box-shadow: 0 10px 30px rgba(124, 58, 237, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s ease !important;
}

#viracoai-widget .viracoai-launcher:hover .viracoai-launcher__orb {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 16px 38px rgba(236, 72, 153, 0.45) !important;
}

#viracoai-widget .viracoai-launcher:active .viracoai-launcher__orb {
	transform: translateY(0) scale(.97);
}

#viracoai-widget .viracoai-launcher:focus-visible .viracoai-launcher__orb {
	outline: 3px solid var(--vi-pink);
	outline-offset: 3px;
}

#viracoai-widget .viracoai-launcher__label {
	padding: 11px 18px !important;
	border-radius: 999px !important;
	background: rgba(7, 5, 18, 0.92) !important;
	color: var(--vi-text) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	white-space: nowrap;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3) !important;
	border: 1px solid var(--vi-line) !important;
	transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease !important;
}

#viracoai-widget .viracoai-launcher:hover .viracoai-launcher__label {
	transform: translateX(-3px);
}

/* Slow halo so the button reads as "live" without being noisy. */
#viracoai-widget .viracoai-launcher__ring {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(236, 72, 153, 0.5);
	opacity: 0;
	animation: viracoai-pulse 3.4s ease-out infinite;
}

@keyframes viracoai-pulse {
	0%   { transform: scale(.82); opacity: .7; }
	70%  { transform: scale(1.25); opacity: 0; }
	100% { transform: scale(1.25); opacity: 0; }
}

#viracoai-widget .viracoai-launcher__icon {
	position: absolute;
	width: 32px;
	height: 32px;
	transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}

#viracoai-widget .viracoai-launcher__icon--close {
	opacity: 0;
	transform: rotate(-90deg) scale(.5);
}

/* Open state: swap cap for X, drop the label and the halo. */
#viracoai-widget.is-open .viracoai-launcher__icon--open {
	opacity: 0;
	transform: rotate(90deg) scale(.5);
}

#viracoai-widget.is-open .viracoai-launcher__icon--close {
	opacity: 1;
	transform: none;
}

#viracoai-widget.is-open .viracoai-launcher__label {
	opacity: 0;
	transform: translateX(12px);
	pointer-events: none;
}

#viracoai-widget.is-open .viracoai-launcher__ring {
	animation: none;
	opacity: 0;
}


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

#viracoai-widget .viracoai-panel {
	position: absolute;
	right: 0;
	bottom: 84px;
	display: flex;
	flex-direction: column;
	width: 380px;
	height: min(680px, calc(100vh - 110px));
	overflow: hidden;
	border-radius: 24px;
	border: 1px solid var(--vi-line);
	background: var(--vi-bg);
	color: var(--vi-text);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
	transform-origin: bottom right;
	animation: viracoai-in .38s cubic-bezier(.22,1,.36,1);
}

#viracoai-widget .viracoai-panel[hidden] {
	display: none;
}

@keyframes viracoai-in {
	from { opacity: 0; transform: translateY(14px) scale(.94); }
	to   { opacity: 1; transform: none; }
}

#viracoai-widget .viracoai-panel__head {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 9px 12px;
	background: linear-gradient(120deg, rgba(124, 58, 237, .22), rgba(236, 72, 153, .18)), var(--vi-bg-2);
	border-bottom: 1px solid var(--vi-line);
}

#viracoai-widget .viracoai-panel__title {
	flex: 1 1 auto;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--vi-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#viracoai-widget .viracoai-iconbtn {
	display: grid !important;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	border-radius: 10px !important;
	color: var(--vi-text) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid var(--vi-line) !important;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease !important;
}

#viracoai-widget .viracoai-iconbtn:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	transform: translateY(-1px);
}

#viracoai-widget .viracoai-iconbtn[hidden] {
	display: none !important;
}

#viracoai-widget .viracoai-iconbtn svg {
	width: 16px;
	height: 16px;
}

/**
 * Density.
 *
 * The chat app is built for a full page: large avatars, roomy padding, big
 * type. Inside a 380px panel that reads as cramped, and being cross-origin
 * there is no way to restyle it. `zoom` is the one lever left — the iframe is
 * laid out wider than the panel and then scaled back down, so the app renders
 * its comfortable layout while we display it at widget scale.
 *
 * Browsers without `zoom` simply ignore it and get the previous behaviour.
 */
#viracoai-widget .viracoai-frame {
	width: calc(100% / var(--vi-zoom));
	height: calc(100% / var(--vi-zoom));
	zoom: var(--vi-zoom);
}

/* Maximised has real estate to spare, so show the app at its native scale. */
#viracoai-widget.is-max {
	--vi-zoom: 1;
}

/**
 * Maximise.
 *
 * The assistant answers with wide markdown tables, and those live inside a
 * cross-origin iframe we cannot restyle — the only lever available from out
 * here is to hand the iframe more width.
 */
#viracoai-widget .viracoai-max__shrink,
#viracoai-widget.is-max .viracoai-max__grow {
	display: none;
}

#viracoai-widget.is-max .viracoai-max__shrink {
	display: block;
}

#viracoai-widget.is-max .viracoai-panel {
	width: min(940px, calc(100vw - 48px));
	height: calc(100vh - 132px);
}

/* With the extra width the cards can sit in a grid, as they do on the
   landing page — which also stops the picker from needing to scroll. */
#viracoai-widget.is-max .viracoai-grades {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	align-items: start;
}

#viracoai-widget.is-max .viracoai-step--grade {
	padding: 26px 24px 28px;
}


/* -------------------------------------------------------------- step: grade */

#viracoai-widget .viracoai-step {
	flex: 1 1 auto;
	min-height: 0;
}

#viracoai-widget .viracoai-step[hidden] {
	display: none;
}

#viracoai-widget .viracoai-step--grade {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 18px 16px 20px;
	background:
		radial-gradient(80% 50% at 50% 0%, rgba(124, 58, 237, .18) 0%, transparent 70%),
		var(--vi-bg);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

/* Four rich cards cannot fit a widget panel, so the list scrolls; keep the
   scrollbar from looking like a stray light-mode artefact on the dark panel. */
#viracoai-widget .viracoai-step--grade::-webkit-scrollbar {
	width: 6px;
}

#viracoai-widget .viracoai-step--grade::-webkit-scrollbar-thumb {
	border-radius: 99px;
	background: rgba(255, 255, 255, .18);
}

#viracoai-widget .viracoai-step--grade::-webkit-scrollbar-track {
	background: transparent;
}

/* Sticky fade at the bottom edge, so it is obvious the list continues. */
#viracoai-widget .viracoai-step--grade::after {
	content: '';
	position: sticky;
	bottom: -20px;
	flex: 0 0 auto;
	height: 36px;
	margin-top: -36px;
	background: linear-gradient(to top, var(--vi-bg) 20%, transparent);
	pointer-events: none;
}

/* brand block — a compact echo of the landing page header */
#viracoai-widget .viracoai-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 16px;
}

#viracoai-widget .viracoai-brand__mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--vi-violet), var(--vi-pink));
	box-shadow: 0 8px 24px rgba(124, 58, 237, .45);
	color: #fff;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

#viracoai-widget .viracoai-brand__name {
	margin-top: 10px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .5px;
	background: linear-gradient(90deg, var(--vi-violet), var(--vi-pink));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

#viracoai-widget .viracoai-brand__sub {
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--vi-muted);
}

#viracoai-widget .viracoai-brand__rule {
	width: 54px;
	height: 3px;
	margin-top: 12px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--vi-violet), var(--vi-pink));
}

#viracoai-widget .viracoai-lead {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vi-muted);
	text-align: center;
}

#viracoai-widget .viracoai-grades {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#viracoai-widget .viracoai-grade {
	position: relative;
	display: grid !important;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon title"
		"desc desc"
		"cta  cta";
	gap: 3px 10px;
	width: 100%;
	padding: 12px 14px !important;
	border-radius: 18px !important;
	border: 1px solid var(--vi-line) !important;
	background: var(--vi-card) !important;
	color: var(--vi-text) !important;
	text-align: start;
	cursor: pointer;
	transition: border-color .35s cubic-bezier(.16,1,.3,1),
		transform .35s cubic-bezier(.16,1,.3,1),
		box-shadow .35s cubic-bezier(.16,1,.3,1) !important;
	/* Staggered entrance driven by the --i index set in PHP. */
	animation: viracoai-rise .42s cubic-bezier(.22,1,.36,1) backwards;
	animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}

@keyframes viracoai-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

#viracoai-widget .viracoai-grade:not(:disabled):hover {
	transform: translateY(-3px);
	border-color: var(--vi-accent) !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .45) !important;
}

#viracoai-widget .viracoai-grade:focus-visible {
	outline: 3px solid var(--vi-accent);
	outline-offset: 2px;
}

#viracoai-widget .viracoai-grade__icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	line-height: 1;
	color: var(--vi-accent);
	background: var(--vi-accent-soft);
	border: 1px solid var(--vi-accent-line);
}

#viracoai-widget .viracoai-grade__icon svg {
	width: 19px;
	height: 19px;
	display: block;
}

#viracoai-widget .viracoai-grade__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

#viracoai-widget .viracoai-grade__cta svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

#viracoai-widget .viracoai-grade__title {
	grid-area: title;
	align-self: center;
	font-size: 15px;
	font-weight: 800;
	color: var(--vi-text);
}

#viracoai-widget .viracoai-grade__desc {
	grid-area: desc;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--vi-muted);
}

#viracoai-widget .viracoai-grade__cta {
	grid-area: cta;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--vi-accent);
	transition: letter-spacing .3s ease;
}

#viracoai-widget .viracoai-grade:not(:disabled):hover .viracoai-grade__cta {
	letter-spacing: .3px;
}

/* per-level accents, lifted from the landing page */
#viracoai-widget .viracoai-grade--violet {
	--vi-accent: #a78bfa;
	--vi-accent-soft: linear-gradient(135deg, rgba(139,92,246,.3), rgba(139,92,246,.1));
	--vi-accent-line: rgba(139,92,246,.4);
}

#viracoai-widget .viracoai-grade--amber {
	--vi-accent: #fbbf24;
	--vi-accent-soft: linear-gradient(135deg, rgba(245,158,11,.3), rgba(245,158,11,.1));
	--vi-accent-line: rgba(245,158,11,.4);
}

#viracoai-widget .viracoai-grade--emerald {
	--vi-accent: #34d399;
	--vi-accent-soft: linear-gradient(135deg, rgba(16,185,129,.3), rgba(16,185,129,.1));
	--vi-accent-line: rgba(16,185,129,.4);
}

#viracoai-widget .viracoai-grade--rose {
	--vi-accent: #fb7185;
	--vi-accent-soft: linear-gradient(135deg, rgba(225,29,72,.3), rgba(225,29,72,.1));
	--vi-accent-line: rgba(225,29,72,.4);
}

/* alumni: present but not yet available, exactly as on the landing page */
#viracoai-widget .viracoai-grade--soon {
	cursor: default;
	opacity: .5;
}

#viracoai-widget .viracoai-grade__cta--soon {
	color: var(--vi-muted);
}


/* --------------------------------------------------------------- step: chat */

#viracoai-widget .viracoai-step--chat {
	position: relative;
	background: var(--vi-bg);
}

#viracoai-widget .viracoai-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
}

#viracoai-widget .viracoai-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--vi-bg);
}

#viracoai-widget .viracoai-loading[hidden] {
	display: none;
}

#viracoai-widget .viracoai-loading span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vi-pink);
	opacity: .3;
	animation: viracoai-bounce 1.2s ease-in-out infinite;
}

#viracoai-widget .viracoai-loading span:nth-child(2) { animation-delay: .15s; }
#viracoai-widget .viracoai-loading span:nth-child(3) { animation-delay: .3s; }

@keyframes viracoai-bounce {
	0%, 80%, 100% { transform: translateY(0);    opacity: .3; }
	40%           { transform: translateY(-7px); opacity: 1;  }
}


/* -------------------------------------------------------------- responsive */

@media (max-width: 480px) {
	#viracoai-widget {
		right: 16px;
		bottom: 16px;
		left: 16px;
	}

	#viracoai-widget .viracoai-panel {
		right: 0;
		left: 0;
		width: auto;
		height: min(80vh, calc(100vh - 110px));
	}

	/* The desktop maximise width (100vw - 48px) is *narrower* than the phone
	   layout's edge-to-edge panel, so here maximising only buys height. */
	/* 16px root offset + 84px panel offset = 100px consumed below the panel,
	   so anything taller than 100vh - 116px pushes off the top of the screen. */
	#viracoai-widget.is-max .viracoai-panel {
		width: auto;
		height: calc(100vh - 116px);
	}

	#viracoai-widget.is-max .viracoai-step--grade {
		padding: 18px 16px 20px;
	}

	#viracoai-widget .viracoai-launcher__label {
		font-size: 13px !important;
		padding: 10px 15px !important;
	}

	#viracoai-widget .viracoai-launcher__orb {
		width: 58px;
		height: 58px;
	}
}

/* Very short viewports: the label crowds the corner. */
@media (max-height: 420px) {
	#viracoai-widget .viracoai-launcher__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	#viracoai-widget *,
	#viracoai-widget *::before,
	#viracoai-widget *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}