/* ==========================================================================
 * AMA — seek/host composer and answers-in-tray
 * ========================================================================== */
/* AMA Seek / Host composer */

.-ama-dual-tabs {
	width: 100%;
	height: 12.5vw;
	display: flex;
	padding: 1.5625vw;
	position: relative;
	clip-path: var(--squircle-small);
	background: var(--dimmer);
	margin: 0 0 1.5625vw;
}

.-ama-dual-tab {
	flex: 1;
	display: flex;
	color: #b5b5b5;
	align-items: center;
	justify-content: center;
	font-size: 3.4375vw;
	clip-path: var(--squircle-small);
}

.-ama-dual-tab.---active {
	color: #121212;
	background: #ffda66;
}

.-ama-prime-note,
.-ama-seek-host {
	gap: 1.5625vw;
	display: flex;
	color: #d6d6d6;
	line-height: 4.6875vw;
	align-items: center;
	padding: 3.125vw;
	font-size: 3.125vw;
	clip-path: var(--squircle-small);
	background: rgb(255 218 102 / 10%);
}

.-ama-prime-note .material-symbols-rounded {
	width: 7.8125vw;
	min-width: 7.8125vw;
	color: #ffda66;
	font-size: 6.25vw;
}

.-ama-seek-host-face {
	width: 9.375vw;
	height: 9.375vw;
	display: flex;
	min-width: 9.375vw;
	overflow: hidden;
	position: relative;
	border-radius: 50%;
	background: var(--dimmer);
	border: .9375vw solid #0000;
}

.-ama-seek-host-face .material-symbols-rounded {
	color: #0000;
	background-size: cover;
	border-radius: inherit;
	background-color: #1b1b1b;
	background-repeat: no-repeat;
	background-position: center;
}

.-ama-field {
	gap: 1.5625vw;
	display: flex;
	color: #e5e5e5;
	flex-flow: column;
	font-size: 3.4375vw;
	margin: 1.5625vw 0;
}

.-ama-field > span {
	padding: 0 1.5625vw;
}

.-ama-field small {
	color: #999;
	line-height: 4.375vw;
	font-size: 3.125vw;
}

.-ama-input,
.-ama-select,
.-ama-textarea,
.-ama-readonly {
	border: 0;
	outline: 0;
	color: #fff;
	width: 100%;
	min-height: 12.5vw;
	font: inherit;
	clip-path: var(--squircle-small);
	background: var(--dimmer);
}

.-ama-input,
.-ama-select,
.-ama-readonly {
	padding: 0 3.125vw;
}

.-ama-textarea {
	resize: none;
	height: 31.25vw;
	line-height: 5vw;
	padding: 3.125vw;
}

.-ama-readonly {
	display: flex;
	align-items: center;
}

.-ama-range {
	--slider-tail: #78d9ff;
}

/* AMA answers in Tray */

.-answer-deck {
	width: 100%;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
}

.-answer-ghosts {
	z-index: 4;
	color: #e5e5e5;
	line-height: 6.25vw;
	font-size: 4.0625vw;
	position: absolute;
	pointer-events: none;
	white-space: pre-wrap;
}

.-answer-ghosts span {
	opacity: 0;
	filter: blur(2.5vw);
	display: inline-block;
	transform: translate(var(--ghost-x),var(--ghost-y));
	transition: transform 1.05s cubic-bezier(.2,.8,.2,1) var(--ghost-delay), opacity .7s ease var(--ghost-delay), filter .9s ease var(--ghost-delay);
}

.-answer-ghosts.---settle-answer span {
	opacity: 1;
	filter: blur(0);
	transform: translate(0,0);
}

.-ama-earn-note {
	gap: 1.5625vw;
	display: flex;
	color: #d6d6d6;
	line-height: 4.6875vw;
	align-items: center;
	padding: 3.125vw;
	font-size: 3.125vw;
	clip-path: var(--squircle-small);
	background: rgb(131 215 154 / 10%);
}

.-ama-earn-note .material-symbols-rounded {
	width: 7.8125vw;
	min-width: 7.8125vw;
	color: #83d79a;
	font-size: 6.25vw;
}

.-answer-feed {
	width: 100%;
	display: flex;
	gap: 3.125vw;
	flex-flow: column;
	align-items: center;
}

.-answer-note {
	width: 93.75vw;
	padding: 3.125vw 4.6875vw;
	clip-path: var(--squircle);
	background: #fff;
}

.-answer-note .-leader-row {
	width: 100%;
	min-height: 12.5vw;
	padding: 0;
	background: #0000;
}

.-answer-note p {
	margin: 2.5vw 0 0;
	color: var(--app-muted);
	font-size: 3.125vw;
	line-height: 1.55;
}

/* Small utility components. */

.-context-note {
	width: 93.75vw;
	padding: 3.125vw;
	color: var(--app-muted);
	font-size: 3.125vw;
	font-weight: 650;
	line-height: 1.5;
	clip-path: var(--squircle);
	background: var(--dimmer);
}
