/* ==========================================================================
 * Player & Media — audio player bar, video/audio controls
 * ========================================================================== */
.-foot-snap-hold,
.-play-snap-hold {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
}

.-story-youtube-player {
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

.-story-youtube-player iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.-story-youtube-play {
	left: 50%;
	top: 50%;
	z-index: 5;
	width: 18.75vw;
	height: 18.75vw;
	opacity: 0;
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	border-radius: 50%;
	color: #fff;
	background: rgb(0 0 0 / 58%);
	transform: translate(-50%,-50%);
	transition: opacity .2s;
}

.-story-media.---show-youtube-control .-story-youtube-play {
	opacity: 1;
}

.-story-youtube-play .material-symbols-rounded {
	font-size: 10vw;
}

.-story-media.---playing .-story-copy {
	opacity: 0;
	pointer-events: none;
}

.-play {
	--theme-before-position: sticky;
	width: 0;
	height: 0;
	left: 50%;
	opacity: 0;
	z-index: 700;
	bottom: 25vw;
	margin: auto;
	display: flex;
	overflow: hidden;
	position: absolute;
	pointer-events: none;
	scroll-behavior: smooth;
	backdrop-filter: blur(0);
	clip-path: var(--squircle);
	transform-origin: 50% 100%;
	transform: translateX(-50%);
	scroll-snap-type: x mandatory;
	background: var(--app-theme);
	transition: width 0.35s, height 0.35s, opacity 0.2s, backdrop-filter 0.3s;
}

.-play.---show-player {
	opacity: 1;
	height: 25vw;
	width: 93.75vw;
	pointer-events: auto;
	overflow: auto hidden;
}

.-play-snap-left,
.-play-snap-right {
	display: flex;
	min-width: 12.5vw;
	position: relative;
	height: -webkit-fill-available;
}

.-play-center-bar {
	display: flex;
	margin: 1.5625vw;
	position: relative;
	clip-path: inherit;
	align-items: center;
	justify-content: center;
	scroll-snap-align: center;
	height: -webkit-fill-available;
	background: var(--surface);
	min-width: -webkit-fill-available;
}

.-player-tool-runtime,
.-player-tool-shuffle,
.-player-tool-previous,
.-player-tool-play,
.-player-tool-next,
.-player-tool-loop,
.-player-tool-timer {
	display: flex;
	align-items: center;
	justify-content: center;
}

.-player-tool-previous,
.-player-tool-next {
	width: 11.25vw;
	height: 11.25vw;
	color: #78d9ff;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: var(--dimmer);
}

.-player-tool-previous .material-symbols-rounded,
.-player-tool-next .material-symbols-rounded {
	font-size: 7.5vw;
}

.-play-snap-left .-play-snap-hold {
	margin: 0 0 0 1.5625vw;
}

.-play-snap-right .-play-snap-hold {
	margin: 0 1.5625vw 0 0;
}

.-player-tool-play {
	width: 18.75vw;
	height: 18.75vw;
	aspect-ratio: 1/1;
	border-radius: 50%;
	margin: 0 1.5625vw;
	color: var(--app-accent);
	background: color-mix(in srgb,var(--app-accent) 12%,transparent);
	border: 1.5625vw solid #0000;
}

.-player-tool-play .material-symbols-rounded {
	width: 100%;
	display: flex;
	font-size: 12.5vw;
	margin: 1.5625vw;
	align-items: center;
	aspect-ratio: 1/1;
	justify-content: center;
	border-radius: inherit;
	background: var(--surface);
}

.-player-tool-shuffle,
.-player-tool-loop {
	height: 6.25vw;
	max-width: 6.25vw;
	aspect-ratio: 1/1;
	border-radius: 50%;
}

.-player-tool-shuffle .material-symbols-rounded,
.-player-tool-loop .material-symbols-rounded {
	font-size: 5vw;
}

.-player-tool-runtime,
.-player-tool-timer {
	min-width: 14.0625vw;
	font-size: 3.125vw;
	letter-spacing: 0.15625vw;
}

.-player-tool-timer {
	color: #A9573E;
}

.-player-tool-runtime {
	color: #78d9ff;
}

.-foot-go {
	width: 12.5vw;
	display: flex;
	height: 12.5vw;
	gap: 1.5625vw;
	min-width: 12.5vw;
	position: relative;
	flex-flow: column;
	margin: 0 0 0 auto;
	border-radius: 50%;
	overflow: hidden auto;
	scroll-behavior: smooth;
	background: var(--dimmer);
	scroll-snap-type: y mandatory;
	border: 1.25vw solid #0000;
	transition: min-width 0.3s, width 0.3s, opacity 0.3s, margin 0.3s, border 0.3s;
}

.-foot-go-snap {
	width: 100%;
	display: flex;
	margin: auto;
	position: relative;
	align-items: center;
	aspect-ratio: 1/1;
	justify-content: center;
	border-radius: inherit;
	background: var(--app-blue);
	text-shadow: none;
	color: #fff;
}

.-foot-go-circle {
	width: auto;
	display: flex;
	position: relative;
	flex-flow: column;
	aspect-ratio: 1/1;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: inherit;
	scroll-snap-align: center;
	text-shadow: none;
	color: var(--app-accent);
}

.-foot-go-circle .material-symbols-rounded {
	width: 100%;
	height: 100%;
	display: flex;
	font-size: 8.125vw;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
}

.-panel-foot .-foot-go-snap {
	background: var(--fellowship-coral);
}

.-panel-foot .-foot-go-circle {
	background: #fff;
	color: var(--app-accent);
}

.-foot-go-keys {
	inset: 0;
	z-index: 110;
	width: 100%;
	height: 100%;
	display: flex;
	position: fixed;
	flex-flow: column;
	pointer-events: none;
	background: var(--app-theme);
	transform: translateY(100%);
	transition: transform 0.35s;
}

.-foot-go-keys.---show-go {
	pointer-events: auto;
	transform: translateY(0);
}

.-play::before {
	left: 0;
	right: auto;
	top: 0;
	bottom: auto;
	min-width: 100%;
	height: 100%;
	flex: 0 0 100%;
	margin-right: -100%;
}

.-foot-go-circle.---voice-note-mode {
	background: #8b3e76;
}

.-foot-go-circle.---recording {
	background: #b63b3b;
}

.-foot-go-circle.---send-note-mode {
	background: #26658b;
}

/* Hiver identity ------------------------------------------------------------ */

.-foot-go-circle.---hiver-identity {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.-foot-go-circle.---hiver-identity > .material-symbols-rounded,
.-foot-go-circle.---hiver-identity > svg[data-hivergo-svg] {
	display: none;
}

.-foot-go-circle.---add-ons-mode {
	background: #155797;
}

.---immersive-mode .-foot-go {
	width: 0;
	opacity: 0;
	margin: 0;
	border: 0;
	min-width: 0;
}

.-foot-go-circle.---edit-tools-mode {
	background: #7b4fd6;
}

.-foot-go-snap.---edit-mode {
	color: #fff;
	background: #0d7111;
}

.-foot-go-snap.---edit-mode .material-symbols-rounded {
	font-size: 7.5vw;
}

.-foot-go-circle.---dictate-active .material-symbols-rounded {
	font-size: 6.875vw;
}

.-foot-go-circle.---dictate-active {
	background: #4f1a34;
}

.-foot-go-snap.---dictate-mode {
	color: #fff;
	background: #8b3e76;
}

.-player-up .-foot-go-circle {
	background: #fff;
	color: var(--app-accent);
}

.-dict-audio {
	width: 12.5vw;
	height: 12.5vw;
	flex: none;
	display: grid;
	place-items: center;
	clip-path: var(--squircle);
	color: var(--app-accent);
	background: var(--surface);
}

.-dict-audio .material-symbols-rounded {
	font-size: 6.25vw;
}