/* BeVisible A: everything vertical on the site reads as a phone screen (owner 10.10.2026).
   One frame for Reels and chats: dark bezel, thin metal rim, Dynamic Island, and on the big ones the status bar.
   The bezel width is --ph-b; the island and the status bar are sized in % of the phone, so small and big frames match.
   A <video> cannot carry ::before, so js/a-phone.js puts bare videos into <span class="bva-phone"> for the island;
   without the script (standalone pages) the video still gets the bezel. */

:root {
	--ph-body: #0b0b0c;
	/* black titanium band around the bezel, as on iPhone 16 Pro (owner 17.10.2026: «более похожим на iPhone») */
	--ph-rim: 0 0 0 1px #000, 0 0 0 3px #3a3a3e, 0 0 0 3.5px #8a8a90;
	--ph-drop: 0 30px 60px -30px rgba(0, 0, 0, 0.42);
	--ph-btn: #4a4a4f;
}

/* ---------- Bezel ---------- */

.bva .pane-reel .reel,
.bva .card .reel,
.bva .chat,
.bv-case-msg,
.bv-case .bv-case-card video,
.bv-case-trio video,
.bv-case-shorts video,
.lp-example video,
body.bv-watch video,
.wrap > video,
.grid video,
.player video,
.player iframe {
	--ph-b: 10px;
	border: var(--ph-b) solid var(--ph-body);
	border-radius: calc(var(--ph-b) * 4.4);
	box-shadow: var(--ph-rim), var(--ph-drop);
	background-color: #000;
}

.bva .card .reel,
.bv-case-trio video,
.lp-example video,
.grid video {
	--ph-b: 8px;
}

.bv-case-shorts video {
	--ph-b: 6px;
}

.player video,
.player iframe {
	--ph-b: 9px;
}

/* an iPhone corner is ~15% of the phone's width; a vertical video (9:16) gets it in % so it scales with the size */
.bv-case .bv-case-card video,
.bv-case-trio video,
.bv-case-shorts video,
.lp-example video,
body.bv-watch video,
.wrap > video,
.grid video,
.player video,
.player iframe {
	border-radius: 15.5% / 8.7%;
}

video:fullscreen {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- Front camera: a small round lens, not the Dynamic Island (owner 17.10.2026: the island covered too much of the video) ---------- */

.bva .pane-reel .reel::before,
.bva .card .reel::before,
.bv-case-msg::before,
.bva-phone::before,
.player:not([hidden])::before,
.bv-pf-phone::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 2.6%;
	left: 50%;
	width: 3.6%;
	min-width: 7px;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #3a3a52 0, #15151c 45%, #000 70%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

/* the wrapper's box includes the video's bezel, so the island starts below it */
.bva-phone {
	position: relative;
	display: block;
	--ph-b: 10px;
}

.bva-phone::before {
	top: calc(var(--ph-b) + 2.6%);
}

.bv-case-trio .bva-phone,
.lp-example .bva-phone {
	--ph-b: 8px;
}

.bv-case-shorts .bva-phone {
	--ph-b: 6px;
}

.player {
	position: relative;
	--ph-b: 9px;
}

.player:not([hidden])::before {
	top: calc(var(--ph-b) + 2.9%);
}

/* the cabinet player is a whole iPhone: side buttons stick out of the band (action, volume up/down on the left,
   power on the right) and the status bar sits beside the island. The buttons are the player's own background,
   so the player gets 6px on each side for them. */
.player:not(.wide) {
	padding: 0 6px;
	background:
		linear-gradient(90deg, #8a8a90, var(--ph-btn)) left 0.5px top 18.75% / 3px 4% no-repeat,
		linear-gradient(90deg, #8a8a90, var(--ph-btn)) left 0.5px top 27.8% / 3px 6.5% no-repeat,
		linear-gradient(90deg, #8a8a90, var(--ph-btn)) left 0.5px top 36.9% / 3px 6.5% no-repeat,
		linear-gradient(270deg, #8a8a90, var(--ph-btn)) right 0.5px top 30% / 3px 10% no-repeat;
}

.player:not(.wide):not([hidden])::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: calc(var(--ph-b) + 1.3%);
	left: calc(6px + var(--ph-b));
	right: calc(6px + var(--ph-b));
	aspect-ratio: 10 / 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 33'%3E%3Ctext x='42' y='22' text-anchor='middle' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif' font-size='15' font-weight='600' fill='white'%3E9:41%3C/text%3E%3Cg transform='translate(222 9.3) scale(1.2)'%3E%3Cg fill='white'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29 11.6l-2.4-2.7a3.6 3.6 0 0 1 4.8 0z'/%3E%3Crect x='44.5' y='2.5' width='17' height='7' rx='1.6'/%3E%3Crect x='64' y='4.2' width='1.8' height='3.6' rx='.8' opacity='.45'/%3E%3C/g%3E%3Cg fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M24.6 6.4a6.4 6.4 0 0 1 8.8 0'/%3E%3Cpath d='M22 3.6a10.2 10.2 0 0 1 14 0'/%3E%3Crect x='42.5' y='.8' width='21' height='10.4' rx='3' stroke-width='1' opacity='.45'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
	pointer-events: none;
}

.bv-pf-phone::after {
	top: 10px;
}

/* ---------- Status bar (signal, Wi-Fi, battery) on the big frames ---------- */

.bva .pane-reel .reel::after,
.bv-case-msg::after,
.bv-case-card > .bva-phone::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 2.2%;
	right: 8%;
	width: 19%;
	aspect-ratio: 68 / 12;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='white'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29 11.6l-2.4-2.7a3.6 3.6 0 0 1 4.8 0z'/%3E%3Crect x='44.5' y='2.5' width='17' height='7' rx='1.6'/%3E%3Crect x='64' y='4.2' width='1.8' height='3.6' rx='.8' opacity='.45'/%3E%3C/g%3E%3Cg fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M24.6 6.4a6.4 6.4 0 0 1 8.8 0'/%3E%3Cpath d='M22 3.6a10.2 10.2 0 0 1 14 0'/%3E%3Crect x='42.5' y='.8' width='21' height='10.4' rx='3' stroke-width='1' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

.bv-case-card > .bva-phone::after {
	top: calc(10px + 2.2%);
	right: calc(10px + 8%);
}

/* ---------- Case pages: the «було» chat and the videos in the cards ---------- */

.bv-case-msg {
	position: relative;
	max-width: 320px;
	padding-top: 15%;
}

.bv-case-msg.is-wa {
	padding-top: 0;
}

.bv-case-msg.is-wa .bv-case-msg-head {
	padding-top: 15%;
}

.bv-case-card > .bva-phone {
	max-width: 320px;
	margin: 0 auto 26px;
}

.bv-case-card > .bva-phone video {
	max-width: none;
	margin: 0;
}

/* ---------- Home: the chat in «how it works» is a phone with a time in the status bar ---------- */

.bva .chat {
	position: relative;
	max-width: 360px;
	border-radius: 50px;
	background-color: #fff;
	box-shadow: var(--ph-rim), 0 40px 70px -36px rgba(0, 0, 0, 0.45);
}

.bva .chat::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: 18px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #3a3a52 0, #15151c 45%, #000 70%);
}

.bva .chat::after {
	content: "11:06";
	position: absolute;
	z-index: 2;
	top: 15px;
	left: 30px;
	right: 24px;
	height: 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0;
	color: var(--ph-body);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12'%3E%3Cg fill='%23121214'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29 11.6l-2.4-2.7a3.6 3.6 0 0 1 4.8 0z'/%3E%3Crect x='44.5' y='2.5' width='17' height='7' rx='1.6'/%3E%3Crect x='64' y='4.2' width='1.8' height='3.6' rx='.8' opacity='.45'/%3E%3C/g%3E%3Cg fill='none' stroke='%23121214' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M24.6 6.4a6.4 6.4 0 0 1 8.8 0'/%3E%3Cpath d='M22 3.6a10.2 10.2 0 0 1 14 0'/%3E%3Crect x='42.5' y='.8' width='21' height='10.4' rx='3' stroke-width='1' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") right center / 64px 12px no-repeat;
	pointer-events: none;
}

.bva .chat .chat-h {
	padding-top: 52px;
}

/* home indicator at the bottom of the screen */
.bva .chat .chat-b::after {
	content: "";
	align-self: center;
	width: 120px;
	height: 5px;
	margin-top: 10px;
	border-radius: 5px;
	background: var(--ph-body);
}

@media (max-width: 560px) {
	.bva .pane-reel .reel,
	.bva .chat,
	.bv-case-msg,
	.bv-case .bv-case-card video,
	.bva-phone {
		--ph-b: 8px;
	}

	.bva .card .reel,
	.bv-case-trio video,
	.bv-case-trio .bva-phone {
		--ph-b: 7px;
	}

	.bv-case-card > .bva-phone::after {
		top: calc(8px + 2.2%);
		right: calc(8px + 8%);
	}

	.bva .chat {
		border-radius: 44px;
	}
}

/* ---------- A horizontal video = a tablet (owner 11.10.2026); js/a-cabinet.js puts «wide» on the Reel and its player ---------- */

.player.wide {
	max-width: 640px;
}

.player.wide video,
.player.wide iframe {
	--ph-b: 14px;
	aspect-ratio: var(--ratio, 16 / 9);
	border-radius: 26px;
}

/* a tablet has no island: the camera is a dot in the middle of the long edge */
.player.wide:not([hidden])::before {
	top: 4px;
	width: 6px;
	aspect-ratio: 1;
	background: #3d3d44;
}

/* the picture of the first screen lies on its side too */
.reel.has-th.wide {
	padding-left: 126px;
	min-height: 92px;
}

.reel.wide .th {
	width: 112px;
	height: 63px;
}

/* the forwarded video (/watch/): the same tablet; functions.php puts «tablet» on the body when the video is horizontal */
body.bv-watch.tablet .wrap {
	max-width: 760px;
}

body.bv-watch.tablet video {
	--ph-b: 14px;
	aspect-ratio: var(--ratio, 16 / 9);
	border-radius: 26px;
}

/* ---------- «Open in a new tab» of the cabinet player: a round button outside the phone's top right corner,
   slightly over the frame (owner 17.10.2026); inc/cabinet.php of the parent adds it ---------- */

.player .pl-open {
	position: absolute;
	z-index: 4;
	top: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #121214;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 16px -4px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.player .pl-open:hover,
.player .pl-open:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 20px -4px rgba(0, 0, 0, 0.4);
}