/* Playlist page overrides.
   `public/css/style.css` forces full-height + translateY on `.app .audio-slider .swiper`,
   which pushes vertical coverflow slides down (large wrapper translate3d).
   This file is loaded after style.css, so it can safely override legacy rules. */

body {
	background: black;
}

.app button {
	color: inherit;
}

/* Select dropdown: legacy style.css sets overflow:hidden on options list */
.app .select__options {
	overflow: inherit;
}

/* Disable default iOS tap highlight and native button tinting. */

.app.playlist-page .audio-slider {
	height: auto !important;
	pointer-events: auto !important;
	/* In CSS grid, items stretch by default; prevent stretching so Swiper autoHeight works */
	align-self: start !important;
	min-height: 0;
}

.app.playlist-page .audio-slider .swiper {
	height: auto !important;
	transform: none !important;
}

.app.profile-page .audio-slider {
	height: auto !important;
	pointer-events: auto !important;
	align-self: start !important;
	min-height: 0;
}

.app.profile-page .audio-slider .swiper {
	height: auto !important;
	transform: none !important;
}

.app .audio-slider .swiper {
	transform: translateY(calc(-50% + 21vh)) !important;
	/* transform: translateY(calc(-50% + 11.8vh)) !important; */
}

.app .audio-slider {
	/* overflow: hidden; */
}

/*
 * Legacy style.css forces opacity only on `.swiper-slide-active ~ .swiper-slide`
 * (cards below). Cards above stay opacity:0 unless Swiper marks them "visible",
 * so the last slide looks alone. Mirror visibility for preceding slides.
 */
.app .audio-slider .swiper-wrapper > .swiper-slide:not(.swiper-slide-active ~ .swiper-slide) {
	opacity: 1;
	pointer-events: auto;
}

/* Comments recording: cancel button overlay (match design mock) */
.app .comments__record {
	position: relative;
}

.app .comments__record .record-cancel {
	width: 14rem;
	height: 14rem;
	gap: 6px;
	box-shadow: inset 0 0 0 5px #dadada;
	color: #ff0000 !important;
	background: #fff !important;
	border: none;
}

/* Set color on the button (.status-icon) so icon font inherits it */
.app .status-icon.record-cancel {
	color: #ff0000 !important;
}

.app .comments__record .record-cancel:before {
	content: none;
}

.app .comments__record .record-cancel i.icon-trash {
	font-size: 6rem;
	line-height: 1;
	filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.25));
}

.app .comments__record .record-cancel__text {
	letter-spacing: -0.2px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.app .comments__response {
	--comments-emoji-gap: 1.2rem;
}

.app .comments__smiles {
	gap: var(--comments-emoji-gap);
}

.app .comments__emoji-picker {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: var(--comments-emoji-gap);
	padding: 2rem 1.5rem;
	overflow-y: auto;
	background: #fff;
	min-height: 0;
}

.app .comments__bg._emoji-picker-open {
	grid-template-rows: auto 1fr auto;
}

.app .comments__bg._emoji-picker-open .comments__emoji-picker {
	align-content: start;
}

.app .comments__emoji-picker button,
.app .comments__emoji-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.app .comments__emoji-picker button {
	width: 4.4rem;
	height: 4.4rem;
	font-size: 3.2rem;
	line-height: 1;
}

.app .comments__emoji-toggle {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	line-height: 0;
	margin: auto;
}

.app .comments__emoji-toggle svg {
	display: block;
}

.app .context-menu__list {
	min-height: unset;
	padding: 3rem 15px 3rem 15px;
}

/* `audio-nav` in legacy HTML uses <a>. In Next/React we render <button>,
   so we restyle buttons to match the original look 1:1. */
.app .audio-nav button {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 5.2rem;
	height: 5.2rem;
	min-width: 5.2rem;
	border-radius: 100%;
	font-size: 2rem;
	position: relative;
	z-index: 1;
	transition: all 0.5s;
	color: #333332;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

.app .audio-nav button:after {
	content: "";
	position: absolute;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 100%;
	top: 5px;
	left: 5px;
	background: linear-gradient(
		348.79deg,
		#fff 11.08%,
		rgba(255, 255, 255, 0.5) 69.78%,
		rgba(115, 115, 115, 0.71) 104.24%
	);
	border: 0.2px solid #fff;
	z-index: -1;
	box-shadow: 3px 3px 4px 1px rgba(0, 0, 0, 0.3);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}

.app .audio-nav button._main {
	width: 6rem;
	height: 6rem;
	min-width: 6rem;
	border: 1px solid;
}

.app .audio-nav button i.icon-pause-fill {
	display: none;
}

.app .audio-nav button._active {
	background: linear-gradient(
		148.22deg,
		#fff 7.28%,
		rgba(0, 0, 0, 0.25) 82.69%,
		rgba(115, 115, 115, 0.42) 92.72%
	);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.app .audio-nav button._active:after {
	opacity: 1;
}

.app .audio-nav button._active._main {
	border: none;
}

.app .audio-nav button._active._main i.icon-pause-fill {
	display: block;
}

.app .audio-nav button._active._main i.icon-play-fill {
	display: none;
}

.app .audio-nav button:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
	box-shadow: none;
}

.app .header__link {
	align-items: center;
}

.app .header__logo {
	width: 53px;
	height: 60px;
	object-fit: contain;
	display: flex;
	align-items: center;
	justify-content: center;
}

.app .header__logo .icon-microphone {
	margin-left: -8px;
}

.app .audio-card.swiper-slide-active .audio-card__cover > img {
	max-height: 22vh;
}

/* Индикатор «нового» поста — отключён до следующих этапов */
.app .audio-card._new .audio-card__inner:before,
.app .audio-card__status:after {
	content: none;
	display: none;
}

.app button.link-icon {
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
	padding: 0;
}

/* Search accounts: play above profile link, playline only while playing */
.app .search-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6.4rem;
	height: 6.4rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.app .search-card__play i.icon {
	position: static;
	top: auto;
	left: auto;
	transform: none;
	font-size: 2.4rem;
	font-weight: 500;
	pointer-events: none;
}

.app .search-card__playline._visible {
	display: block;
	position: absolute;
	top: 56%;
	bottom: auto;
	left: 0;
	width: 100%;
	padding: 0 15px;
	transform: translateY(-50%);
	z-index: 1;
	pointer-events: none;
	height: 4rem;
	box-sizing: border-box;
}

.app .search-card__playline._visible svg {
	display: block;
	width: 100%;
	height: 4rem;
}

/* Main menu active: keep legacy glow positioning, but use a straight
   4.5px #BABABA line with a gap (no soft curved notch / white icon). */

.app .footer a._active:after {
	content: none;
	display: none;
}

.app .footer a._active i.icon:before {
	color: rgba(174, 174, 174, 0.5);
	filter: none;
}

/* Straight gap edges + thicker grey line (legacy was 1px #ddd + radius 15px) */
.app .footer a span:before,
.app .footer a span:after {
	border-radius: 0;
	border-top: 4.5px solid #bababa;
}

/* Blur layer must not cover "Комментировать" (legacy rule; keep without !important fights) */
.app .footer__title + .footer__menu a._active span:nth-of-type(2) {
	display: none;
}

/* Audio title marquee: disable ellipsis while auto-scrolling */
.app .audio__title[data-marquee] {
	text-overflow: clip;
}