/* ============================================================
   profile-page.css -- Bluesky-style Profile page (.pf-*) and Settings
   page (.st-*). Uses the app's own theme variables (--bg, --surface,
   --border, --accent, --muted ...) so it follows the same palette as
   the rest of the dashboard. Post cards inside the profile are the
   normal .sp-* social cards from styles.css.
   ============================================================ */

/* ---------- Profile page ---------- */
.pf-page { width: 100%; padding-bottom: 0; }   /* .app already reserves the bottom-nav space; extra padding only made short tabs scroll */

.pf-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; color: var(--muted); font-size: 14px; }

/* Banner: a soft gradient tinted from the person's name (no banner
   image upload yet), with the round back button pinned top-left. */
.pf-banner {
	position: relative;
	/* Always the full width of the page column. A 3:1 aspect-ratio plus a max-height used to shrink the
	   *width* too (max-height x 3 = 960px), leaving the banner short on the right and off-centre. */
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	height: auto;
	aspect-ratio: 3 / 1;
	min-height: 150px;
	max-height: 320px;
	border-radius: 0 0 14px 14px;
	overflow: hidden;
	/* Mirror-symmetric fallback gradient: the same glow in both top corners, one centred glow, and a
	   left/right palindrome base so the left edge and the right edge always match. */
	background:
		radial-gradient(ellipse at 0% 0%, hsla(var(--pf-hue, 250), 85%, 70%, .30), transparent 50%),
		radial-gradient(ellipse at 100% 0%, hsla(var(--pf-hue, 250), 85%, 70%, .30), transparent 50%),
		radial-gradient(ellipse at 50% 100%, hsla(calc(var(--pf-hue, 250) + 50), 85%, 60%, .30), transparent 60%),
		linear-gradient(90deg, hsl(var(--pf-hue, 250), 55%, 30%) 0%, hsl(calc(var(--pf-hue, 250) + 35), 60%, 24%) 50%, hsl(var(--pf-hue, 250), 55%, 30%) 100%);
}
.pf-banner-loading { --pf-hue: 250; opacity: .5; }
/* Cover image: fills the banner; the gradient above stays underneath as the fallback while it loads. */
.pf-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-banner.uploading::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.pf-cover-btn {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background .15s;
	z-index: 2;
}
.pf-cover-btn:hover { background: rgba(0, 0, 0, .65); }
.pf-back { z-index: 2; }


.pf-back {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background .15s;
}
.pf-back:hover { background: rgba(0, 0, 0, .65); }

.pf-head { padding: 0 6px; }

.pf-head-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-top: -46px;   /* avatar overlaps the banner, like Bluesky */
}

.pf-avatar {
	position: relative;
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	padding: 4px;
	background: var(--bg);   /* the ring that separates the avatar from the banner */
}
.pf-avatar .msgr-avatar { border-radius: 50%; }
.pf-avatar.online::after { content: none; }
.pf-online-dot {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ok);
	border: 3px solid var(--bg);
}

.pf-actions { display: flex; align-items: center; gap: 8px; padding-top: 54px; flex-wrap: wrap; justify-content: flex-end; }

.pf-btn {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	background: var(--surf2);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 8px 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, border-color .15s, opacity .15s;
}
.pf-btn:hover { background: color-mix(in srgb, var(--surf2) 80%, var(--text) 8%); }
.pf-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff 15%); }
.pf-btn:disabled { opacity: .55; cursor: default; }
.pf-btn-icon { padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; }
.pf-btn-sm { padding: 6px 14px; font-size: 13px; }

.pf-name {
	margin: 10px 0 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.3px;
	overflow-wrap: anywhere;
}

.pf-handle-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pf-handle { font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
.pf-badge {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	background: var(--surf2);
	border-radius: 6px;
	padding: 2px 8px;
}
.pf-badge-friend { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pf-badge-warn { color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); }

.pf-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
.pf-stat {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--muted);
	cursor: pointer;
}
.pf-stat b { color: var(--text); font-weight: 800; }
button.pf-stat:hover span { text-decoration: underline; }
.pf-stat-static { cursor: default; }

.pf-bio { margin-top: 12px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.pf-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--accent-soft);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
	border-radius: 999px;
	padding: 4px 11px;
}
.pf-chip svg { flex-shrink: 0; }
.pf-chip span { overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .02em; }

.pf-lastseen { margin-top: 10px; font-size: 13px; color: var(--muted); }

.pf-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
}
.pf-notice-text { font-size: 14px; }
.pf-notice-btns { display: flex; gap: 8px; }

/* Tabs: pinned under the site header while the posts scroll, same as the
   Home feed's tabs (.sp-tabs). */
.pf-tabs {
	display: flex;
	margin-top: 16px;
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: var(--pf-tabs-top, calc(var(--header-h, 0px) - 1px));   /* set live by pfSyncTabsTop() in profile-page.js */
	padding-top: 1px;
	z-index: 110;
	background: var(--bg);
	/* Paints a few px ABOVE the tabs too (still under the header), so nothing scrolling past can peek through
	   a sub-pixel gap between the header and the tabs. */
	box-shadow: 0 -4px 0 var(--bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
body.alert-banner-open .pf-tabs { top: var(--pf-tabs-top, calc(var(--header-h, 0px) + var(--alert-banner-h, 0px) - 1px)); }
.pf-tab {
	flex: 1;
	position: relative;
	background: none;
	border: 0;
	padding: 13px 6px 12px;
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--muted);
	cursor: pointer;
	transition: color .15s;
}
.pf-tab:hover { color: var(--text); }
.pf-tab.active { color: var(--text); }
.pf-tab.active::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: min(56px, 60%);
	height: 3px;
	border-radius: 3px;
	background: var(--accent);
	transform: translateX(-50%);
}

.pf-feed {
	margin-top: 4px;
	/* No fixed min-height any more: it made every tab -- even an empty one -- a full screen tall, so the page
	   scrolled past its content (blank area, "so much bottom margin"). While a tab is still LOADING, pfSwitchTab()
	   holds the previous tab's height inline instead (see profile-page.js) and lets go once the tab has settled. */
	overflow-anchor: none;
}
.pf-feed .sp-post { cursor: pointer; }

/* Media tab: 3-up grid of thumbnails, like Bluesky's Media tab. */
.pf-feed-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 10px; align-content: start; }
.pf-feed-media .sp-empty { grid-column: 1 / -1; width: 100%; box-sizing: border-box; justify-self: stretch; }
.pf-media-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--surf2);
	cursor: pointer;
}
.pf-media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-media-blank { position: absolute; inset: 0; background: linear-gradient(135deg, var(--surf2), var(--surface)); }
.pf-media-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	background: rgba(0, 0, 0, .55);
}

/* Shorts tab: reuses .sh-card, three across. */
.pf-feed-shorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; align-content: start; }
.pf-feed-shorts .sh-card-meta { font-size: 11px; }
/* Duration moves to the top-right so the like count can sit bottom-left, bigger. */
.pf-feed-shorts .sh-card-dur { font-size: 10px; padding: 1px 5px; top: 6px; bottom: auto; right: 6px; z-index: 1; }
.pf-feed-shorts .sh-card-thumb::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48%;
	background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
	pointer-events: none;
}
.pf-feed-shorts .sh-card-like,
.pf-feed-shorts .sh-card-views {
	position: absolute;
	bottom: 7px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
.pf-feed-shorts .sh-card-like { right: 7px; }
.pf-feed-shorts .sh-card-views { left: 7px; }
.pf-feed-shorts .sh-card-views svg { width: 20px; height: 20px; flex: none; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.pf-feed-shorts .sh-card-like svg { width: 22px; height: 22px; flex: none; color: var(--accent-soft); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.pf-feed-shorts .sp-empty { grid-column: 1 / -1; }
/* Every short tile is the same, shorter 4:5 box (was the tall 9:16), so the grid rows stay compact and even. */
.pf-feed-shorts .sh-card-thumb { aspect-ratio: 4 / 5; }
.pf-feed-shorts .sh-card-thumb img { height: 100%; object-fit: cover; }

/* Followers / following sheet + blocked list rows */
.pf-list-body { padding: 0; }
.pf-list-body .pf-list-more { display: block; margin: 14px auto; }
.pf-person {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
}
.pf-person-av { flex-shrink: 0; cursor: pointer; }
.pf-person-main { flex: 1; min-width: 0; cursor: pointer; }
.pf-person-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-person-handle { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-person-bio {
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--text);
	opacity: .85;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 480px) {
	.pf-banner { width: 100%; aspect-ratio: 2 / 1; min-height: 150px; max-height: 240px; }
	.pf-head-row { margin-top: -40px; }
	.pf-avatar { width: 88px; height: 88px; }
	.pf-avatar .msgr-avatar { width: 80px !important; height: 80px !important; font-size: 40px !important; }
	.pf-actions { padding-top: 46px; gap: 6px; }
	.pf-btn { padding: 7px 13px; font-size: 13.5px; }
	.pf-name { font-size: 23px; }
}

/* ---------- Settings page ---------- */
.st-page { width: 100%; max-width: none; margin: 0; padding-bottom: 0; }   /* same width as the header: fills the page column */

.st-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0 14px;
}
.st-back {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.st-back:hover { background: var(--surf2); }
.st-title { font-size: 22px; font-weight: 800; letter-spacing: -.2px; }

.st-account {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	padding: 14px 104px 14px 16px;
	margin-bottom: 0;
	font-family: var(--sans);
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	cursor: pointer;
}
.st-account:hover { background: var(--surf2); }
.st-account-wrap { position: relative; margin-bottom: 14px; }
.st-account-actions { position: absolute; top: 0; bottom: 0; right: 8px; display: flex; align-items: center; gap: 2px; }
.st-account-more { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; padding: 0; }
/* The global button:active { transform: scale(.96) } must not move these icons; they are centred by flex, not by a transform. */
.st-account-more:active { transform: none; background: var(--surf2); color: var(--text); }
.st-account-more:hover { background: var(--surf2); color: var(--text); }
.st-acc-box { width: min(380px, 92vw); }
.st-acc-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; max-height: 50vh; overflow-y: auto; }
.st-acc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-family: var(--sans); text-align: left; cursor: pointer; }
.st-acc-row:hover { background: var(--surf2); }
.st-acc-row.on { border-color: var(--accent); }
.st-account-av { flex-shrink: 0; }
.st-account-av .msgr-avatar { border-radius: 50%; }
.st-account-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-account-name { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-account-handle { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-list {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 14px;
}
.st-row {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 15px 16px;
	font-family: var(--sans);
	font-size: 15.5px;
	font-weight: 600;
	text-align: left;
	color: var(--text);
	text-decoration: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
}
.st-row:last-child { border-bottom: 0; }
.st-row:hover { background: var(--surf2); }
.st-row-icon { display: flex; flex-shrink: 0; color: var(--muted); }
.st-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-row-label { overflow: hidden; text-overflow: ellipsis; }
.st-row-sub { font-size: 13px; font-weight: 500; color: var(--muted); }
.st-row-value { font-size: 14px; color: var(--muted); }
.st-row-chev { display: flex; flex-shrink: 0; color: var(--muted); }
.st-row.danger, .st-row.danger .st-row-icon { color: var(--err); }

.st-info {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
}
.st-info:last-child { border-bottom: 0; }
.st-info-label { font-size: 14px; color: var(--muted); flex-shrink: 0; }
.st-info-value { font-size: 15px; font-weight: 600; text-align: right; overflow-wrap: anywhere; white-space: pre-line; }
.st-info-value i { color: var(--muted); font-style: normal; font-weight: 500; }

.st-note { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin: 0 4px 14px; }
.st-version { text-align: center; margin-top: 4px; }
.st-loading, .st-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.st-list .pf-person:last-child { border-bottom: 0; }

/* Edit-profile dialog: the Bio textarea */
.profile-bio-input { resize: none; min-height: 84px; }
.st-row.danger .st-row-chev { display: none; }

/* Settings > Appearance / Language: selectable option rows */
.st-opt .st-radio {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; flex-shrink: 0; box-sizing: border-box;
	border: 2px solid var(--border); border-radius: 50%; color: #fff;
	transition: background .12s, border-color .12s;
}
.st-opt .st-radio svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .15s; }
.st-opt.on .st-radio { background: var(--accent); border-color: var(--accent); }
.st-opt.on .st-radio svg { opacity: 1; transform: none; }
.st-swatch {
	display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
	border-radius: 12px; border: 1px solid var(--border);
}
.st-swatch.light { background: #f4f4f8; color: #6c4fe0; }
.st-swatch.dark { background: #0d0d0f; color: #a79bfa; }
.st-group-title {
	margin: 18px 6px 8px; font-size: 11.5px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.st-lang-native { font-weight: 600; }


/* ---- Inline edit profile (replaces the old pop-up) ---- */
.pf-edit { padding-bottom: 28px; }
.pf-edit .pf-head-row { margin-bottom: 4px; }
.pf-edit-photo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 16px; }
.pf-edit .pf-avatar .msgr-avatar { width: 100%; height: 100%; font-size: 36px; }
.pf-edit .field { max-width: 560px; }
#pfPage.pf-editing #pfTabs,
#pfPage.pf-editing #pfFeed,
#pfPage.pf-editing #pfMore { display: none; }

/* ---------- Settings -> History ---------- */
.st-group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 18px 4px 8px; }
.st-group-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
/* A group title inside a head used to add its own 18px/8px on top of the head's 18px/8px (36px above, 16px below).
   The head's margin is enough: the gap is now the same as a bare .st-group-title. */
.st-group-head > .st-group-title { margin: 0 2px; }
/* First label on a page (Privacy and security -> "Sign-in security"): sit close under the title bar, the way the
   first list does on the other settings pages. The loading skeleton uses the same offset so nothing jumps. */
#stPrivacyBody > .st-group-head:first-child,
#stPrivacyBody > .sk-st-head:first-child { margin-top: 4px; }
.st-hist-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); touch-action: pan-y; }
.st-hist-row:last-child { border-bottom: 0; }
.st-hist-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 16px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.st-hist-main:hover { background: var(--surf2); }
.st-hist-thumb { width: 44px; height: 58px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--surf2); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.st-hist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-hist-ico { display: flex; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; color: var(--muted); }
.st-hist-av { flex-shrink: 0; display: flex; }
.st-hist-av .msgr-avatar { border-radius: 50%; }
.st-hist-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-hist-title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-hist-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-hist-slide { position: relative; display: flex; align-items: center; background: var(--surface); }
.st-hist-row:not(.st-hist-swiping) .st-hist-slide { transition: transform .18s ease; }
.st-hist-swiping .st-hist-slide { will-change: transform; user-select: none; -webkit-user-select: none; }
.st-hist-swiping .st-hist-main, .st-hist-swiping .st-notif-row { pointer-events: none; }
.st-notif-wrap .st-notif-row { border-bottom: 0; }
.st-hist-trash { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 22px; color: var(--muted); background: color-mix(in srgb, var(--err) 18%, transparent); opacity: 0; transition: background .12s ease, color .12s ease; }
.st-hist-swiping .st-hist-trash, .st-hist-leaving .st-hist-trash { opacity: 1; }
.st-hist-armed .st-hist-trash, .st-hist-leaving .st-hist-trash { background: var(--err); color: #fff; }
.st-hist-more { padding: 10px 16px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- Settings -> Notifications (old notifications) ---------- */
.st-notif-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--border); color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; }
.st-notif-row:last-child { border-bottom: 0; }
.st-notif-row:hover { background: var(--surf2); }
.st-notif-row.unseen::before { content: ''; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.st-notif-av { flex-shrink: 0; display: flex; }
.st-notif-av .msgr-avatar { border-radius: 50%; }
.st-notif-sys { width: 40px; height: 40px; border-radius: 50%; background: var(--surf2); align-items: center; justify-content: center; font-size: 18px; }
.st-notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-notif-line { font-size: 15px; line-height: 1.3; }
.st-notif-snip { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-notif-time { font-size: 12.5px; color: var(--muted); }
.st-notif-more { padding: 12px; text-align: center; border-top: 1px solid var(--border); }

/* ---------- Settings -> Appearance (theme cards with a live mini preview) ---------- */
.st-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 14px; }
@media (max-width: 380px) { .st-theme-grid { grid-template-columns: 1fr; } }
.st-theme-card {
	display: flex; flex-direction: column; gap: 10px; padding: 10px; text-align: left; cursor: pointer;
	font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
	transition: border-color .15s, box-shadow .15s, transform .12s;
}
.st-theme-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.st-theme-card:active { transform: scale(.985); }
.st-theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 28%, transparent); }

/* the mini home screen */
.st-theme-prev { --pv-bg: #0e0e12; --pv-card: #17171d; --pv-line: #2a2a34; --pv-mute: #3a3a48; --pv-acc: #7c6cf2;
	display: flex; flex-direction: column; gap: 5px; aspect-ratio: 4 / 4.2; padding: 7px 7px 0; border-radius: 12px; overflow: hidden; pointer-events: none; background: var(--pv-bg); border: 1px solid var(--pv-line); }
.st-theme-prev.light { --pv-bg: #f4f4f8; --pv-card: #ffffff; --pv-line: #e0e0ea; --pv-mute: #cfd0de; --pv-acc: #6c5ce7; }
.stp-hd { display: flex; align-items: center; gap: 4px; }
.stp-logo { width: 10px; height: 10px; border-radius: 50%; background: var(--pv-acc); flex: none; }
.stp-name { width: 20px; height: 4px; border-radius: 2px; background: var(--pv-mute); flex: none; }
.stp-search { flex: 1; height: 8px; border-radius: 4px; background: var(--pv-card); border: 1px solid var(--pv-line); }
.stp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pv-card); border: 1px solid var(--pv-line); flex: none; }
.stp-dot.av { background: var(--pv-mute); border: 0; width: 9px; height: 9px; }
.stp-hero { position: relative; flex: none; height: 30%; border-radius: 6px; overflow: hidden; border: 1px solid var(--pv-line);
	background: linear-gradient(90deg, rgba(20, 12, 50, .55), rgba(20, 12, 50, .05)), url("../img/home-banner.jpg") center / cover; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-left: 7px; }
.stp-hero b { width: 38%; height: 4px; border-radius: 2px; background: #b9aaff; }
.stp-hero b.s { width: 26%; height: 3px; background: rgba(255, 255, 255, .55); }
.stp-cap { width: 52%; height: 3px; border-radius: 2px; background: var(--pv-mute); }
.stp-tiles { display: flex; gap: 3px; }
.stp-tiles i { flex: 1; height: 15px; border-radius: 4px; background: var(--pv-card); border: 1px solid var(--pv-line); position: relative; }
.stp-tiles i::after { content: ''; position: absolute; left: 50%; top: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 2px; background: var(--pv-acc); opacity: .75; }
.stp-tabs { display: flex; justify-content: space-around; gap: 6px; padding-top: 2px; border-bottom: 1px solid var(--pv-line); }
.stp-tabs u { width: 22%; height: 3px; border-radius: 2px; background: var(--pv-mute); margin-bottom: 3px; }
.stp-tabs u.on { background: var(--pv-acc); }
.stp-nav { margin-top: auto; display: flex; justify-content: space-around; align-items: center; height: 17px; margin-left: -7px; margin-right: -7px; background: var(--pv-card); border-top: 1px solid var(--pv-line); }
.stp-nav i { width: 7px; height: 7px; border-radius: 2px; background: var(--pv-mute); }
.stp-nav i.on { background: var(--pv-acc); }

.st-theme-foot { display: flex; align-items: center; gap: 10px; padding: 2px 2px 2px 0; }
.st-theme-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--surf2); color: var(--muted); }
.st-theme-card.on .st-theme-ico { color: var(--accent-soft); }
.st-theme-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-theme-label { font-size: 15px; font-weight: 800; }
.st-theme-sub { font-size: 12.5px; color: var(--muted); line-height: 1.25; }
.st-theme-radio { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .15s, border-color .15s; }
.st-theme-radio svg { width: 13px; height: 13px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.st-theme-card.on .st-theme-radio { background: var(--accent); border-color: var(--accent); }
.st-theme-card.on .st-theme-radio svg { opacity: 1; transform: none; }

/* Replies tab: the message being replied to, in place of "Replying to @handle". */
.sp-replying-msg {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 2px 0 4px;
	padding: 5px 10px;
	border-left: 3px solid var(--accent);
	border-radius: 6px;
	background: var(--surf2);
	cursor: pointer;
	min-width: 0;
}
.sp-replying-h { flex: none; font-weight: 700; color: var(--accent-soft, var(--accent)); }
.sp-replying-t {
	min-width: 0;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* Jump-to-top button hides while the inline profile editor is open. */
#pfPage.pf-editing .pf-scroll-top { display: none; }


/* ============================================================
   About tab, audience picker, map card, multi-value editors
   ============================================================ */

/* ---- About tab: menu on the left (pills on narrow screens), details on the right ---- */
.pf-about-tab { display: block; padding: 4px 0 48px; }
.pf-ab-nav { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 4px; scrollbar-width: none; }
.pf-ab-nav::-webkit-scrollbar { display: none; }
.pf-ab-nav button {
	flex: none;
	white-space: nowrap;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	padding: 8px 14px;
	font: 700 13.5px var(--sans);
	cursor: pointer;
}
.pf-ab-nav button:hover { color: var(--text); }
.pf-ab-nav button.active {
	color: var(--accent-soft);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.pf-ab-pane { min-width: 0; }
.pf-ab-note { margin: 14px 4px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.pf-ab-title { margin: 0 4px 10px; font: 800 17px var(--sans); }
/* Each About group (Work and education / Contact info / Basic info / Live location / Places) is its own block:
   a divider and extra space where one group ends and the next begins. */
.pf-ab-sec { margin-top: 22px; }
.pf-ab-sec + .pf-ab-sec { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
/* Round site icon of a social link, shown in the row's circle */
.pf-ab-ico .pf-fav { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; display: block; }
.pf-ab-card, .pf-map { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }

.pf-ab-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.pf-ab-row:last-child { border-bottom: 0; }
.pf-ab-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surf2); color: var(--muted); }
.pf-ab-main { flex: 1; min-width: 0; }
.pf-ab-val { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.pf-ab-val a { color: var(--accent-soft); text-decoration: none; }
.pf-ab-val a:hover { text-decoration: underline; }
.pf-ab-lab { margin-top: 1px; font-size: 13px; color: var(--muted); }
.pf-ab-row.is-empty .pf-ab-ico { opacity: .6; }
.pf-ab-add { background: none; border: 0; padding: 0; font: 700 14px var(--sans); color: var(--accent-soft); cursor: pointer; }
.pf-ab-add:hover { text-decoration: underline; }

/* Audience chip (your own page only): icon + Public / Friends / Only me */
.pf-aud {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	padding: 5px 10px; border-radius: 999px;
	border: 1px solid var(--border); background: var(--surf2); color: var(--muted);
	font: 600 12px var(--sans); cursor: default; user-select: none;
}
.pf-aud svg { flex: none; }

/* Map card (OpenStreetMap embed). The overlay link makes the whole map one tap target, so scrolling the page
   on a phone never gets caught inside the map. */
.pf-map-frame { position: relative; aspect-ratio: 16 / 9; background: var(--surf2); }
.pf-map-frame { overflow: hidden; }
.pf-map-tiles { position: absolute; left: 50%; top: 50%; width: 1280px; height: 768px; pointer-events: none; }
.pf-map-tiles img { position: absolute; display: block; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; }
.pf-map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); pointer-events: none; }
.pf-map-area { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(229, 72, 77, .22); border: 2px solid rgba(229, 72, 77, .75); pointer-events: none; }
.pf-map-attr { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 1px 6px; font: 500 10px var(--sans); color: #333; background: rgba(255, 255, 255, .75); pointer-events: none; }
.pf-map-hit { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; cursor: default; -webkit-touch-callout: none; user-select: none; }
.pf-map-frame, .pf-map-frame * { cursor: default; -webkit-tap-highlight-color: transparent; }
.pf-ab-gap { height: 14px; }
.pf-ab-addr .pf-map { border: 0; border-radius: 0; border-top: 1px solid var(--border); }
.pf-ab-mapcap { padding: 8px 16px 11px; border-top: 1px solid var(--border); margin: 0; }
.pf-ab-bio { white-space: pre-line; font-weight: 500; }

@media (min-width: 760px) {
	.pf-about-tab { padding-top: 14px; }
	.pf-ab-note { margin-top: 0; }
	.pf-ab-pane > .pf-ab-sec:first-child { margin-top: 0; }
}

/* ---- Settings -> Account: audience picker under each filled row ---- */
.st-erow { border-bottom: 1px solid var(--border); }
.st-erow:last-child { border-bottom: 0; }
.st-erow > button.st-info-edit, .st-erow > .st-info { border-bottom: 0; }
.st-vis-line { display: flex; padding: 0 16px 12px; margin-top: -4px; }
.st-vis { position: relative; display: inline-flex; align-items: center; }
.st-vis-ico { position: absolute; left: 10px; display: flex; pointer-events: none; color: var(--muted); }
.st-vis-sel {
	appearance: none; -webkit-appearance: none;
	background-color: var(--surf2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center;
	color: var(--text);
	border: 1px solid var(--border); border-radius: 0;
	padding: 6px 28px 6px 31px;
	font: 600 12.5px var(--sans);
	cursor: pointer;
}
.st-vis-sel:hover, .st-vis-sel:focus-visible { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); outline: none; }

/* ---- editor dialogs: several links, language chips, live location ---- */
.st-edit-box { max-height: 90vh; overflow-y: auto; }
.st-multi { display: flex; flex-direction: column; gap: 8px; }
.st-multi-row { display: flex; align-items: center; gap: 8px; }
.st-multi-row .st-edit-input { flex: 1; min-width: 0; }
.st-multi-x { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surf2); color: var(--muted); font-size: 14px; cursor: pointer; }
.st-multi-x:hover { color: var(--err); border-color: var(--err); }
.st-multi-add { align-self: flex-start; }

.st-list + .st-list { margin-top: 14px; }
.st-ellip { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-info-edit .st-info-value:has(.st-ellip), .st-info-edit .st-info-value:has(.st-link-show) { overflow: hidden; }
.st-link-show { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.st-link-show .st-ellip { flex: 0 1 auto; }
.st-link-more { flex: none; color: var(--muted); font-weight: 700; }
.st-link-ico { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; color: var(--muted); }
.st-link-ico svg { width: 18px; height: 18px; }
.st-link-ico .pf-fav { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.st-link-input { text-overflow: ellipsis; }
.st-linkbtn { border: 0; background: none; padding: 0; color: var(--accent-soft); font: 700 inherit var(--sans); cursor: pointer; text-decoration: underline; }

/* bottom row of every editor dialog: audience picker left, buttons right */
.st-edit-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.st-edit-foot .st-edit-actions { margin-left: auto; }

/* address: "or" divider + map with overlay controls */
.st-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 700 12px var(--sans); text-transform: lowercase; }
.st-or::before, .st-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.st-live { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; }
.st-map-box { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surf2); min-height: 170px; }
.st-map-box .pf-map { border-radius: 0; margin: 0; }
.st-map-box .pf-map-hit { pointer-events: none; }
.st-map-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 13.5px; }
.st-map-btn { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 700 12.5px var(--sans); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.st-map-btn:hover { border-color: var(--accent-soft); }
.st-map-btn:disabled { opacity: .7; cursor: default; }
.st-map-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: 100%; box-sizing: border-box; padding: 22px 12px 9px; border: 0; outline: none; text-align: left; color: #fff; font: 700 14px var(--sans); background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent); text-overflow: ellipsis; }
.st-map-label::placeholder { color: rgba(255, 255, 255, .6); font-weight: 500; }
.st-map-note { margin: 0; }

/* email dialog */
.st-email-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surf2); }
.st-email-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-email-label { font-size: 12px; color: var(--muted); }
.st-email-val { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* languages: round pickers */
/* All languages sit in ONE bordered frame, fully visible: no inner scroll area, no scrollbar. */
.st-lang-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 4px; padding: 14px 8px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surf2) 40%, transparent); overflow: visible; }
.st-lang-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
.st-lang-c { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-family: var(--sans); }
.st-lang-dot { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; background: var(--surf2); border: 1.5px solid var(--border); color: var(--text); transition: border-color .15s, background .15s, transform .12s; }
.st-lang-c:active .st-lang-dot { transform: scale(.94); }
.st-lang-n { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.st-lang-c.on .st-lang-dot { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--accent-soft); }
.st-lang-c.on .st-lang-n { color: var(--text); }

/* profile preview */
.st-pv-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--surf2); }
.st-pv-tab { flex: 1; padding: 8px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 13.5px var(--sans); cursor: pointer; }
.st-pv-tab.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.st-pv-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 0 2px; }
.st-pv-av .msgr-avatar { border-radius: 50%; }
.st-pv-name { font-size: 18px; font-weight: 800; margin-top: 4px; }
.st-pv-handle { font-size: 13.5px; color: var(--muted); }
.st-pv-bio { margin: 6px 0 0; font-size: 14px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.st-pv-rows { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.st-pv-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.st-pv-row:last-child { border-bottom: 0; }
.st-pv-row span { color: var(--muted); flex: none; }
.st-pv-row b { text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* history timeline */
.st-day { margin: 16px 4px 8px; font: 800 13px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.st-hist-tag { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* devices */
.st-dev { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.st-dev:last-child { border-bottom: 0; }
.st-dev .st-row-label { font-weight: 700; font-size: 15px; }
.st-scan { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 1; }
.st-scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-scan-frame { position: absolute; inset: 18%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
	.pf-aud, .st-vis-sel, .pf-ab-nav button { transition: color .15s, border-color .15s, background-color .15s; }
}

/* ---- Settings -> Account editors ---- */
textarea.st-edit-input { resize: none; }
.st-dept-list { max-height: min(40vh, 300px); margin-bottom: 0; }
.st-phone { display: flex; align-items: stretch; gap: 8px; }
.st-phone-cc { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surf2); color: var(--text); font: 700 15px var(--sans); }
.st-flag { display: block; border-radius: 2px; }
.st-phone-input { flex: 1; min-width: 0; letter-spacing: .04em; }
.st-edit-box .chip-row { margin: 2px 0; }

/* ---- Settings: Appearance scene ---- */
.st-scene { display: block; width: 100%; max-width: none; padding: 0; margin: 4px auto 12px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 360 / 220; -webkit-tap-highlight-color: transparent; }
.st-scene:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-scene-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* wide screens: the sky and land stretch edge to edge; the scene keeps its size instead of zooming */
@media (min-width: 641px) { .st-scene { aspect-ratio: auto; height: clamp(260px, 34vw, 420px); } }
.st-scene-svg [class^="sc-"] { transition: opacity .6s ease, transform .6s ease, fill .6s ease, stroke .6s ease; }
.sc-sky-dark { opacity: 0; }
.sc-stars { opacity: 0; }
.sc-sun { opacity: 1; transform: translateY(0); }
.sc-moon { opacity: 0; transform: translateY(70px); }
.sc-crow { opacity: 1; transform: translateY(0); }
/* the birds are animated from JS (_stSceneFly), so no CSS transition may fight the animation */
.st-scene-svg .sc-crow { transition: none !important; }
.sc-crow .cr-fly { display: none; }
.sc-crow.flying .cr-fly { display: block; }
.sc-crow.flying .cr-perch { display: none; }
/* Flying crow: two wings (near + far), each an arm plus a hand of separate primaries. Every moving part pivots about its own local
   origin (shoulder / wrist / tail root), so transform-origin stays 0 0. One beat = var(--flap), set from JS (_stSceneFly). */
.cr-fly .cw, .cr-fly .ch, .cr-fly .cr-tail, .cr-fly .cr-head, .cr-fly .cf { transform-box: view-box; transform-origin: 0 0; }
.cr-fly .cw-near { animation: crWingNear var(--flap, 360ms) linear infinite; }
.cr-fly .cw-far { animation: crWingFar var(--flap, 360ms) linear infinite; animation-delay: calc(var(--flap, 360ms) * -0.07); }
.cr-fly .cw-near .ch { animation: crHand var(--flap, 360ms) linear infinite; }
.cr-fly .cw-far .ch { animation: crHand var(--flap, 360ms) linear infinite; animation-delay: calc(var(--flap, 360ms) * -0.07); }
/* the primaries are loose at the tips: each flutters a hair out of step with its neighbour */
.cr-fly .cf { animation: crFeather calc(var(--flap, 360ms) / 2) ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -34ms); }
.cr-fly .cr-tail { animation: crTail var(--flap, 360ms) linear infinite; }
.cr-fly .cr-head { animation: crHead var(--flap, 360ms) linear infinite; }
@keyframes crFeather { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes crWingNear {
  0.0% { transform: rotate(-25.0deg) scaleY(1.000); }
  5.56% { transform: rotate(-22.1deg) scaleY(0.973); }
  11.11% { transform: rotate(-13.7deg) scaleY(0.902); }
  16.67% { transform: rotate(-0.6deg) scaleY(0.814); }
  22.22% { transform: rotate(15.8deg) scaleY(0.745); }
  27.78% { transform: rotate(33.9deg) scaleY(0.720); }
  33.33% { transform: rotate(52.0deg) scaleY(0.750); }
  38.89% { transform: rotate(68.1deg) scaleY(0.823); }
  44.44% { transform: rotate(80.8deg) scaleY(0.910); }
  50.0% { transform: rotate(88.7deg) scaleY(0.978); }
  55.56% { transform: rotate(91.0deg) scaleY(0.996); }
  61.11% { transform: rotate(85.8deg) scaleY(0.913); }
  66.67% { transform: rotate(72.8deg) scaleY(0.790); }
  72.22% { transform: rotate(53.9deg) scaleY(0.686); }
  77.78% { transform: rotate(31.9deg) scaleY(0.648); }
  83.33% { transform: rotate(10.0deg) scaleY(0.694); }
  88.89% { transform: rotate(-8.4deg) scaleY(0.802); }
  94.44% { transform: rotate(-20.7deg) scaleY(0.924); }
  100.0% { transform: rotate(-25.0deg) scaleY(1.000); }
}
@keyframes crWingFar {
  0.0% { transform: rotate(-12.0deg) scaleY(1.000); }
  5.56% { transform: rotate(-9.6deg) scaleY(0.973); }
  11.11% { transform: rotate(-2.7deg) scaleY(0.902); }
  16.67% { transform: rotate(8.2deg) scaleY(0.814); }
  22.22% { transform: rotate(21.7deg) scaleY(0.745); }
  27.78% { transform: rotate(36.8deg) scaleY(0.720); }
  33.33% { transform: rotate(51.7deg) scaleY(0.750); }
  38.89% { transform: rotate(65.1deg) scaleY(0.823); }
  44.44% { transform: rotate(75.5deg) scaleY(0.910); }
  50.0% { transform: rotate(82.1deg) scaleY(0.978); }
  55.56% { transform: rotate(84.0deg) scaleY(0.996); }
  61.11% { transform: rotate(79.7deg) scaleY(0.913); }
  66.67% { transform: rotate(68.9deg) scaleY(0.790); }
  72.22% { transform: rotate(53.3deg) scaleY(0.686); }
  77.78% { transform: rotate(35.1deg) scaleY(0.648); }
  83.33% { transform: rotate(17.0deg) scaleY(0.694); }
  88.89% { transform: rotate(1.7deg) scaleY(0.802); }
  94.44% { transform: rotate(-8.4deg) scaleY(0.924); }
  100.0% { transform: rotate(-12.0deg) scaleY(1.000); }
}
@keyframes crHand {
  0.0% { transform: rotate(0.0deg) scaleY(1.000); }
  5.56% { transform: rotate(-8.1deg) scaleY(1.000); }
  11.11% { transform: rotate(-15.4deg) scaleY(1.000); }
  16.67% { transform: rotate(-21.2deg) scaleY(1.000); }
  22.22% { transform: rotate(-24.8deg) scaleY(1.000); }
  27.78% { transform: rotate(-26.0deg) scaleY(1.000); }
  33.33% { transform: rotate(-24.6deg) scaleY(1.000); }
  38.89% { transform: rotate(-20.7deg) scaleY(1.000); }
  44.44% { transform: rotate(-14.7deg) scaleY(1.000); }
  50.0% { transform: rotate(-7.3deg) scaleY(1.000); }
  55.56% { transform: rotate(1.5deg) scaleY(0.992); }
  61.11% { transform: rotate(15.7deg) scaleY(0.917); }
  66.67% { transform: rotate(27.6deg) scaleY(0.855); }
  72.22% { transform: rotate(35.4deg) scaleY(0.813); }
  77.78% { transform: rotate(38.0deg) scaleY(0.800); }
  83.33% { transform: rotate(34.9deg) scaleY(0.816); }
  88.89% { transform: rotate(26.6deg) scaleY(0.860); }
  94.44% { transform: rotate(14.4deg) scaleY(0.924); }
  100.0% { transform: rotate(0.0deg) scaleY(1.000); }
}
@keyframes crTail {
  0.0% { transform: rotate(3.71deg); }
  5.56% { transform: rotate(4.32deg); }
  11.11% { transform: rotate(4.50deg); }
  16.67% { transform: rotate(4.22deg); }
  22.22% { transform: rotate(3.53deg); }
  27.78% { transform: rotate(2.48deg); }
  33.33% { transform: rotate(1.19deg); }
  38.89% { transform: rotate(-0.23deg); }
  44.44% { transform: rotate(-1.62deg); }
  50.0% { transform: rotate(-2.85deg); }
  55.56% { transform: rotate(-3.81deg); }
  61.11% { transform: rotate(-4.43deg); }
  66.67% { transform: rotate(-4.40deg); }
  72.22% { transform: rotate(-3.71deg); }
  77.78% { transform: rotate(-2.47deg); }
  83.33% { transform: rotate(-0.86deg); }
  88.89% { transform: rotate(0.87deg); }
  94.44% { transform: rotate(2.48deg); }
  100.0% { transform: rotate(3.71deg); }
}
@keyframes crHead {
  0.0% { transform: translateY(-0.83px) rotate(0.00deg); }
  5.56% { transform: translateY(-0.90px) rotate(0.50deg); }
  11.11% { transform: translateY(-0.88px) rotate(0.95deg); }
  16.67% { transform: translateY(-0.77px) rotate(1.30deg); }
  22.22% { transform: translateY(-0.58px) rotate(1.53deg); }
  27.78% { transform: translateY(-0.34px) rotate(1.60deg); }
  33.33% { transform: translateY(-0.06px) rotate(1.51deg); }
  38.89% { transform: translateY(0.22px) rotate(1.27deg); }
  44.44% { transform: translateY(0.48px) rotate(0.91deg); }
  50.0% { transform: translateY(0.70px) rotate(0.45deg); }
  55.56% { transform: translateY(0.84px) rotate(-0.06deg); }
  61.11% { transform: translateY(0.90px) rotate(-0.66deg); }
  66.67% { transform: translateY(0.82px) rotate(-1.16deg); }
  72.22% { transform: translateY(0.63px) rotate(-1.49deg); }
  77.78% { transform: translateY(0.33px) rotate(-1.60deg); }
  83.33% { transform: translateY(-0.01px) rotate(-1.47deg); }
  88.89% { transform: translateY(-0.35px) rotate(-1.12deg); }
  94.44% { transform: translateY(-0.63px) rotate(-0.61deg); }
  100.0% { transform: translateY(-0.83px) rotate(-0.00deg); }
}
.sc-m1 { fill: #86a3c2; } .sc-m2 { fill: #5f82a6; } .sc-snow { fill: #fff; }
.sc-plain { fill: #8cc66b; } .sc-plain2 { fill: #6cab52; } .sc-tree { fill: #3f8a46; }
.sc-river { fill: #4aaae3; } .sc-river-hi { stroke: rgba(255, 255, 255, .6); stroke-width: 1.6; }
.sc-branch { stroke: #6b4a2e; }
.st-scene.dark .sc-sky-dark { opacity: 1; }
.st-scene.dark .sc-stars { opacity: 1; }
.st-scene.dark .sc-sun { opacity: 0; transform: translateY(70px); }
.st-scene.dark .sc-moon { opacity: 1; transform: translateY(0); }
.st-scene.dark .sc-crow { opacity: 0; transform: translateY(10px); }
.st-scene.dark .sc-m1 { fill: #2d3a66; } .st-scene.dark .sc-m2 { fill: #1e2a4f; } .st-scene.dark .sc-snow { fill: #c9d4ff; }
.st-scene.dark .sc-plain { fill: #1f4a3b; } .st-scene.dark .sc-plain2 { fill: #173a2e; } .st-scene.dark .sc-tree { fill: #112f24; }
.st-scene.dark .sc-river { fill: #2c6fab; } .st-scene.dark .sc-river-hi { stroke: rgba(200, 220, 255, .45); }
.st-scene.dark .sc-branch { stroke: #4a3622; }
.st-scene-cap { display: flex; justify-content: center; margin-bottom: 4px; }
.st-scene-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surf2); border: 1px solid var(--border); }
.st-scene-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 13.5px var(--sans); cursor: pointer; }
.st-scene-seg button svg { width: 17px; height: 17px; }
.st-scene-seg button.on { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) { .st-scene-svg [class^="sc-"] { transition: none; } }

/* ---- Settings: switches + static rows ---- */
.st-switch { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--surf3, var(--border)); border: 1px solid var(--border); transition: background .2s, border-color .2s; }
.st-switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s; }
.st-switch.on { background: var(--accent); border-color: var(--accent); }
.st-switch.on i { transform: translateX(18px); }
.st-row-static { cursor: default; }
.st-note-warn { color: var(--danger, #e5484d); }

/* ---- Settings: devices ---- */
.st-dev { align-items: flex-start; }
.st-os-ico { color: var(--text); }
.st-os-windows { color: #3b9cf0; } .st-os-android { color: #3ddc84; } .st-os-linux { color: #f0b429; }
.st-dev-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 5px; font-size: 12.5px; line-height: 1.45; }
.st-dev-k { color: var(--muted); }
.st-dev-v { color: var(--text); word-break: break-word; font-variant-numeric: tabular-nums; }

/* ---- Settings: link a device ---- */
.st-scan { max-width: 320px; margin: 4px auto 12px; }
.st-scan-msg { position: absolute; inset: auto 0 12px 0; text-align: center; color: #fff; font: 600 13px var(--sans); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.st-link-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surf2); padding: 4px 14px; margin: 6px 0 8px; }
.st-link-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.st-link-row:last-child { border-bottom: 0; }
.st-link-row span { color: var(--muted); flex: none; }
.st-link-row b { text-align: right; word-break: break-word; }

/* ---- Settings: jump to top (Notifications) ---- */

/* ======================================================================
   Fixes: press state, skeleton shapes, downward dropdown, history row, Urdu label
   ====================================================================== */

/* Full-width rows must not shrink when pressed. The global button:active { transform: scale(.96) } pulled them
   in from the left and right edges and left a visible gap; they now just darken instead. */
:is(.st-row, .st-info-edit, .st-account, .st-hist-main, .st-notif-row, .st-dd-btn, .st-dd-opt, .st-scene, .st-pv-tab):active {
	transform: none;
}
:is(.st-row, .st-info-edit, .st-account, .st-hist-main, .st-notif-row, .st-dd-opt):active {
	background: var(--surf2);
}

/* Loading placeholders in the profile's Media and Shorts tabs use the real card sizes. */
.pf-feed-media .pf-media-skel { border-radius: 10px; }
.pf-feed-shorts .sh-card .sh-card-thumb.skel { display: block; border-radius: 12px; }

/* Settings -> History: the note on the left, Clear history on the right. */
.st-note-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 14px; }
.st-note-row .st-note { margin: 0; flex: 1; min-width: 0; }
.st-note-row .pf-btn, .st-note-row .btn { flex: none; }

/* Languages: Urdu shows its whole name (a lone first letter looked like "I"). */
.st-lang-dot.st-lang-word { font-size: 17px; letter-spacing: 0; direction: rtl; }

/* Dropdown whose list always opens downward, in the dialog's own flow (used by Hometown). */
.st-dd { position: relative; }
.st-dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; font-family: var(--sans); }
.st-dd-btn:disabled { opacity: .55; cursor: default; }
.st-dd-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dd-text.is-ph { color: var(--muted); }
.st-dd-btn svg { flex: none; color: var(--muted); transition: transform .15s; }
.st-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.st-dd-list { margin-top: 6px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surf2); }
.st-dd-list[hidden] { display: none; }
.st-dd-opt { display: block; width: 100%; padding: 11px 14px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--text); font: 600 14.5px var(--sans); cursor: pointer; }
.st-dd-opt:last-child { border-bottom: 0; }
.st-dd-opt:hover { background: var(--surface); }
.st-dd-opt.on { color: var(--accent-soft); }

/* If every map server is unreachable, say so instead of showing a blank box. */
.pf-map-frame.pf-map-failed::before { content: 'Map preview unavailable. Tap to open the map.'; position: absolute; left: 0; right: 0; top: 12px; z-index: 2; text-align: center; padding: 0 12px; color: var(--muted); font: 600 12.5px var(--sans); }

/* Media tab: the grid is 3 columns, so the empty message must span all of them to sit centred like the other tabs. */

/* ============================================================
   SKIMMERS for Profile (all tabs + first load) and every Settings page.
   Built by skel.js (SKEL.profilePage / about / settings*). Each block copies the real element's size so
   nothing shifts when the data arrives. Colour + sweep come from the shared .skel rules in styles.css.
   ============================================================ */
.sk-w20 { width: 20%; } .sk-w25 { width: 25%; } .sk-w30 { width: 30%; } .sk-w35 { width: 35%; }
.sk-w40 { width: 40%; } .sk-w45 { width: 45%; } .sk-w50 { width: 50%; } .sk-w55 { width: 55%; }
.sk-w60 { width: 60%; } .sk-w65 { width: 65%; } .sk-w70 { width: 70%; } .sk-w75 { width: 75%; }
.sk-w80 { width: 80%; } .sk-w85 { width: 85%; }

/* ---- Profile: whole page ---- */
.sk-pf { pointer-events: none; }
.sk-pf-banner {
	position: relative;
	width: 100%; box-sizing: border-box;
	aspect-ratio: 3 / 1; min-height: 150px; max-height: 320px;
	border-radius: 0 0 14px 14px;
}
.sk-pf-banner .pf-back { pointer-events: auto; z-index: 2; }   /* keep Back usable while loading */
.sk-pf-head { padding: 0 6px; }
.sk-pf-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: -46px; position: relative; z-index: 1; }
.sk-pf-avatar { width: 100px; height: 100px; box-sizing: border-box; border: 4px solid var(--bg); background-clip: padding-box; }
.sk-pf-btn { width: 104px; height: 36px; margin-top: 54px; border-radius: 999px; }
.sk-pf-name { width: 46%; height: 24px; margin-top: 12px; border-radius: 7px; }
.sk-pf-handle { width: 28%; height: 13px; margin-top: 10px; }
.sk-pf-stats { display: flex; gap: 16px; margin-top: 14px; }
.sk-pf-stat { width: 76px; height: 13px; }
.sk-pf-bio { width: 70%; height: 13px; margin-top: 14px; }
.sk-pf-tabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--border); }
.sk-pf-tab { flex: 1; display: flex; justify-content: center; padding: 18px 6px 17px; }
.sk-pf-tablab { width: 46%; max-width: 64px; height: 11px; }
.sk-pf-body { margin-top: 4px; }
.sk-pf-body.pf-feed-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.sk-pf-body.pf-feed-shorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 480px) {
	.sk-pf-banner { aspect-ratio: 2 / 1; max-height: 240px; }
	.sk-pf-row { margin-top: -40px; }
	.sk-pf-avatar { width: 88px; height: 88px; }
	.sk-pf-btn { margin-top: 46px; }
	.sk-pf-name { height: 22px; }
}

/* ---- Profile -> About ---- */
.sk-ab { margin-top: 4px; }
.sk-ab-sec { margin-top: 22px; }
.sk-ab-sec + .sk-ab-sec { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.sk-ab-sec:first-child { margin-top: 18px; }
.sk-ab-title { width: 90px; height: 17px; margin: 0 4px 12px; border-radius: 6px; }
.sk-ab-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.sk-ab-row:last-child { border-bottom: 0; }
.sk-ab-ico { width: 36px; height: 36px; }
.sk-ab .skel-line { height: 13px; }
.sk-ab .skel-line-sm { height: 10px; margin-top: 2px; }

/* ---- Settings: cards and rows ---- */
.sk-st-list { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; pointer-events: none; }
.sk-st-row { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.sk-st-row:last-child { border-bottom: 0; }
.sk-st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-st-main .skel-line { height: 12px; }
.sk-st-main .skel-line-sm { height: 9px; }
.sk-st-ico { width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; }
.sk-st-ico-lg { width: 36px; height: 36px; border-radius: 10px; }
.sk-st-chev { width: 10px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.sk-st-switch { width: 42px; height: 24px; border-radius: 999px; flex-shrink: 0; }
.sk-st-radio { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.sk-st-av { width: 40px; height: 40px; flex-shrink: 0; }
.sk-st-btn { width: 76px; height: 30px; border-radius: 999px; flex-shrink: 0; }
.sk-st-thumb { width: 44px; height: 58px; border-radius: 8px; flex-shrink: 0; }
.sk-st-info { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sk-st-info:last-child { border-bottom: 0; }
.sk-st-info .skel-line { height: 12px; }
.sk-st-notif, .sk-st-dev, .sk-st-hist { align-items: flex-start; padding: 12px 16px; }
.sk-st-hist { align-items: center; padding: 10px 16px; }
.sk-st-dev { padding: 14px 16px; }
.sk-st-head { margin: 18px 4px 10px; }
.sk-st-head .skel-line { height: 14px; }
.sk-st-list + .sk-st-head, .st-note + .sk-st-head { margin-top: 18px; }
/* bare rows dropped straight into an existing .st-list card (Devices, Notifications, History, Blocked) */
.st-list > .sk-st-row { cursor: default; pointer-events: none; }

/* ---- Settings skimmers: sizes aligned to the REAL rows (so nothing jumps when the data lands) ----
   label+sub text block = 19px label + 2px + 16px sub = 37px; radio dot = 20px; group title = 11.5px caps text. */
.sk-st-main { gap: 11px; }
.sk-st-main .skel-line { height: 14px; }
.sk-st-main .skel-line-sm { height: 12px; }
.sk-st-radio { width: 20px; height: 20px; }
.sk-st-opt .sk-st-main { gap: 0; }
.sk-st-head { margin: 18px 6px 8px; height: 14px; display: flex; align-items: center; }
.sk-st-head .skel-line { height: 10px; }
/* Notifications / Devices / History / Blocked use gap 12 in the real rows */
.sk-st-notif, .sk-st-dev, .sk-st-hist, .sk-st-person { gap: 12px; }
.sk-st-notif .sk-st-main { gap: 7px; }
.sk-st-notif .sk-st-main .skel-line { height: 15px; }
.sk-st-notif .sk-st-main .skel-line-sm { height: 12px; }
.sk-st-dev { padding: 12px 16px; }
.sk-st-dev .sk-st-main { gap: 10px; }
.sk-st-hist .sk-st-main { gap: 6px; }
.sk-st-hist { padding: 10px 16px; }
/* Blocked accounts: same box as .pf-person (padding 12px 14px, 44px avatar) */
.sk-st-person { padding: 12px 14px; }
.sk-st-person .sk-st-av { width: 44px; height: 44px; }
.sk-st-person .sk-st-main { gap: 6px; }

/* Languages dialog + History while the account pull is in flight */
.st-lang-grid > .sk-lang-c { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
.sk-lang-dot { width: 44px; height: 44px; }
.sk-lang-c .skel-line { height: 9px; }

/* ---- Profile tab skimmers: fixes so they match the real tab content ---- */
/* Shorts: the real card paints a dark gradient on .sh-card-thumb::after (bottom 48%). On the placeholder that
   replaced the shimmer with a dark band sliding across half the tile -- restore the normal full-tile sweep. */
.pf-feed-shorts .sh-card-thumb.skel::after {
	left: 0; right: 0; top: 0; bottom: 0; height: auto;
	background: linear-gradient(100deg, transparent 20%, var(--skel-shine) 50%, transparent 80%);
}
/* Posts / Replies: same text column gap as the real post (10px) plus the action row, so the height matches. */
.skel-item-post { gap: 10px; }
.skel-item-post .skel-post-acts { display: flex; gap: 28px; margin-top: 4px; }
.skel-item-post .skel-post-acts .skel-line { width: 30px; height: 12px; border-radius: 6px; flex: none; }
/* About: card radius 16 and no extra bottom margin (the real .pf-ab-card has neither), title + row heights = real ones */
.sk-ab .sk-st-list { border-radius: 16px; margin-bottom: 0; }
.sk-ab-title { height: 16px; margin: 3px 4px 13px; }
.sk-ab .sk-st-main { gap: 6px; }
.sk-ab .sk-st-main .skel-line { height: 13px; }
.sk-ab .sk-st-main .skel-line-sm { height: 11px; margin-top: 0; }

/* Settings: .app already reserves room for the bottom nav, so the extra page padding + the last list's own bottom margin
   made the page a little taller than the screen even when every row fit (it still scrolled). Drop both; a long page
   still gets the nav-sized gap at its end from .app. */
.st-page > :last-child { margin-bottom: 0; }