/*** Module: Phreesia VoiceAI ***/

.module.voiceai {
	overflow-x: clip;
	padding-block: var(--module-spacing-xxlarge);
	position: relative;
}

/* The glow bleeds past the section top/bottom; sit above neighbouring modules so
   an adjacent background/video doesn't clip it. Stays under the sticky-menu (10)
   and header (100) — the global chrome. */
.module.voiceai.style-default {
	z-index: 9;
}

.module.voiceai::before {
	background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--orange) 50%, transparent) 0%, transparent 100%);
	content: "";
	height: 1012px;
	left: 50%;
	opacity: 0.8;
	pointer-events: none;
	position: absolute;
	top: 50%;
	translate: -50% -50%;
	width: 1012px;
}

@media (prefers-reduced-motion: no-preference) {

	.module.voiceai::before {
		animation: voiceai-glow-pulse 5s ease-in-out infinite;
	}

}

@keyframes voiceai-glow-pulse {
	0%, 100% {
		transform: scale(0.75);
	}
	50% {
		transform: scale(1.25);
	}
}

.module.voiceai .container.grid {
	justify-items: center;
	row-gap: var(--text-spacing-small);
	text-align: center;
}

/** Eyebrow row **/

.module.voiceai .eyebrow-row {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-medium);
	grid-column: 1 / -1;
}

/** Play button **/

.module.voiceai .play {
	background: var(--orange);
	border: 0;
	height: 120px;
	padding: 0;
	transition: background .25s ease, transform .25s ease;
	width: 120px;
}

.module.voiceai .play:hover {
	background: #e75307;
	transform: scale(1.05);
}

.module.voiceai .triangle {
	border-bottom: 18px solid transparent;
	border-left: 28px solid var(--black);
	border-top: 18px solid transparent;
	display: block;
	margin-left: 9px;
}

.module.voiceai .bars {
	display: none;
	gap: 6px;
	height: 36px;
}

.module.voiceai .bars span {
	background: var(--black);
	height: 100%;
	width: 8px;
}

.module.voiceai .play[data-state="playing"] .triangle {
	display: none;
}

.module.voiceai .play[data-state="playing"] .bars {
	display: flex;
}

/* Hidden source element, JS hook only — the play button is the entire UI, so an
   mp4 here plays as audio with the button + glow carrying the motion. */

.module.voiceai .media-source {
	display: none;
}

/** Content stack **/

.module.voiceai .text {
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
	justify-items: center;
}

.module.voiceai .text > * + * {
	margin-top: var(--text-spacing-large);
}

.module.voiceai .text > .large {
	margin-top: var(--text-spacing-small);
}

.module.voiceai .heading-1 {
	max-width: 990px;
}

.module.voiceai .large {
	max-width: 784px;
}

.module.voiceai .btn {
	align-self: center;
}

/** Style: live_demo **/

.module.voiceai.style-live-demo {
	isolation: isolate;
	margin: 0 0 var(--text-spacing-small);
	padding-block: var(--module-spacing-large);
}

/* Parchment band at the very back; the inherited orange glow floats above it,
   moved behind the play button on the left. */
.module.voiceai.style-live-demo .bg-field {
	background: var(--parchment);
	z-index: -2;
}

.module.voiceai.style-live-demo::before {
	height: 760px;
	left: 22%;
	opacity: 0.55;
	width: 760px;
	z-index: -1;
}

.module.voiceai.style-live-demo .container {
	align-items: center;
}

.module.voiceai.style-live-demo .demo {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-column: 1 / span 3;
}

.module.voiceai.style-live-demo .play-button {
	align-items: center;
	appearance: none;
	background: var(--orange);
	border: 0;
	border-radius: 50%;
	color: var(--black);
	cursor: pointer;
	display: flex;
	height: 240px;
	justify-content: center;
	max-width: 100%;
	padding: 0;
	transition: transform .2s ease;
	width: 240px;
}

.module.voiceai.style-live-demo .play-button .icon {
	font-size: calc(64rem / 16);
	line-height: 0;
}

/* Swap the rounded fa-play glyph for a hard-edged triangle, nudged right so it
   optically centres in the circle. */
.module.voiceai.style-live-demo .play-button .icon svg {
	display: none;
}

.module.voiceai.style-live-demo .play-button .icon::after {
	border-block: 32px solid transparent;
	border-left: 48px solid currentColor;
	content: "";
	display: block;
	margin-left: 10px;
}

.module.voiceai.style-live-demo a.play-button:hover,
.module.voiceai.style-live-demo button.play-button:hover {
	transform: scale(1.04);
}

.module.voiceai.style-live-demo .play-button:focus-visible {
	outline: 2px solid var(--black);
	outline-offset: 4px;
}

/* Inline playback — the triangle becomes pause bars, drawn with the same
   ::after box so the swap needs no extra markup. */
.module.voiceai.style-live-demo .play-button[data-state="playing"] .icon::after {
	border: 0;
	border-inline: 16px solid currentColor;
	height: 64px;
	margin-left: 0;
	width: 48px;
}

/* The module's orange glow sits behind this button — quicken its drift while
   playing so the demo reads as live rather than a static circle. */
@media (prefers-reduced-motion: no-preference) {

	.module.voiceai.style-live-demo:has(.play-button[data-state="playing"])::before {
		animation-duration: 2.4s;
	}

}

/* Audio-only keeps the button as the whole affordance; a single inline video
   sits under it at the demo column's width. */
.module.voiceai.style-live-demo .media-source {
	margin-top: var(--text-spacing-medium);
	max-width: 100%;
}

.module.voiceai.style-live-demo .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 6 / span 7;
	text-align: left;
}

.module.voiceai.style-live-demo .content > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.voiceai.style-live-demo .content > * + .btn {
	margin-top: var(--text-spacing-medium);
}

.module.voiceai.style-live-demo .btn {
	align-self: flex-start;
}

/* the_button trails the icon; flex order puts it first. */
.module.voiceai.style-live-demo .content .btn .icon {
	order: -1;
}

/* Small print footnoting the CTA's * — muted, and tucked closer to the button
   than the stack's default rhythm so it reads as attached to it. */
.module.voiceai.style-live-demo .content > .btn + .disclaimer {
	color: var(--gray-dark);
	margin-top: var(--text-spacing-xsmall);
}

/** Style: default — video tabs popup **/

.voiceai-modal {
	background: var(--white);
	color: var(--black);
	max-width: 960px;
	overflow-x: clip;
	padding: var(--text-spacing-medium) var(--text-spacing-large);
	width: 90vw;
}

.voiceai-modal .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
	margin-bottom: var(--text-spacing-medium);
	max-width: calc(100% - 64px);
}

.voiceai-modal .tab {
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--gray-dark);
	cursor: pointer;
	font: inherit;
	padding: 0 0 var(--text-spacing-xxsmall);
}

.voiceai-modal .tab[aria-selected="true"] {
	border-bottom-color: var(--orange);
	color: var(--black);
	font-weight: 600;
}

.voiceai-modal .tab:hover {
	color: var(--black);
}

.voiceai-modal .panel .video {
	aspect-ratio: 3 / 2;
	width: 100%;
}

.jazzy-dialog.voiceai-modal iframe {
	border: 0;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {

	.module.voiceai.style-live-demo .demo {
		grid-column: 2 / span 3;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Mobile Header / Nav */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1100rem / 16)) {

	.module.voiceai.style-live-demo .demo {
		grid-column: 1 / span 3;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.voiceai.style-live-demo {
		padding-block: var(--module-spacing-medium);
	}

	/* Stacked — recentre the glow behind the now-centred play button. */
	.module.voiceai.style-live-demo::before {
		left: 50%;
	}

	.module.voiceai.style-live-demo .container {
		display: block;
		text-align: center;
	}

	.module.voiceai.style-live-demo .demo {
		margin-bottom: var(--text-spacing-large);
	}

	.module.voiceai.style-live-demo .content {
		align-items: center;
		text-align: center;
	}

	.module.voiceai.style-live-demo .btn {
		align-self: center;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.voiceai .eyebrow-row {
		gap: var(--text-spacing-xsmall);
	}

	.module.voiceai .play {
		height: 100px;
		width: 100px;
	}

	.module.voiceai.style-live-demo .play-button {
		height: 160px;
		width: 160px;
	}

	/* Triangle scales with the circle — same 3:4 ratio and ~20%-of-diameter width. */
	.module.voiceai.style-live-demo .play-button .icon::after {
		border-block: 21px solid transparent;
		border-left: 32px solid currentColor;
		margin-left: 7px;
	}

	.voiceai-modal {
		padding: var(--text-spacing-xsmall) var(--text-spacing-xsmall) var(--text-spacing-xxsmall);
	}

	.voiceai-modal .tabs {
		gap: var(--text-spacing-xsmall);
	    max-width: calc(100% - 56px);
	}

	.module.voiceai .text > * + * {
		margin-top: var(--text-spacing-medium);
	}

}