/* Suffah — X-style profile (Phase 43) */
.basic-shell:has(.xprof) { max-width: none; padding: 0; }
.basic-shell:has(.xprof) > .basic-shell__back { display: none; }
.basic-shell:has(.xprof) > .alert { margin: 12px 16px; }

.xprof { background: var(--bg-primary); }
.xprof__banner { position: relative; width: 100%; aspect-ratio: 3 / 1; background: linear-gradient(135deg, var(--color-accent-subtle, #cfe9e4), var(--bg-tertiary, #e8e8e8)); overflow: hidden; }
.xprof__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xprof__round { position: absolute; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(15,20,25,.65); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.xprof__round--back { left: 10px; }
.xprof__round--more { right: 10px; }

.xprof__row { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px; margin-top: -38px; position: relative; }
.xprof__avatar.avatar { width: 80px; height: 80px; font-size: 2rem; border: 4px solid var(--bg-primary); box-sizing: content-box; flex: none; margin-left: -4px; }
.xprof__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xprof__row-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.xprof__circle, .xprof__pill { border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); cursor: pointer; text-decoration: none; font: inherit; font-weight: 700; }
.xprof__circle { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.xprof__pill { padding: 8px 18px; border-radius: 999px; }

.xprof__identity { padding: 10px 16px 0; }
.xprof__name { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.55rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.xprof__handle { color: var(--text-tertiary); font-size: 1.05rem; }
.xprof__follows-you { margin-left: 6px; font-size: .75rem; background: var(--bg-tertiary); padding: 2px 8px; border-radius: 6px; }
.xprof__bio { margin: 12px 16px 0; font-size: 1.05rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.xprof__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 16px 0; color: var(--text-tertiary); }
.xprof__meta span { display: inline-flex; align-items: center; gap: 5px; }
.xprof__meta a { color: var(--color-accent); }
.xprof__stats { display: flex; gap: 18px; padding: 10px 16px 0; color: var(--text-tertiary); }
.xprof__stats a { color: var(--text-tertiary); text-decoration: none; }
.xprof__stats strong { color: var(--text-primary); font-weight: 800; }

.xprof__followedby { display: flex; align-items: center; gap: 12px; padding: 12px 16px 0; color: var(--text-tertiary); text-decoration: none; }
.xprof__faces { display: inline-flex; flex: none; }
.xprof__faces .avatar { width: 32px; height: 32px; border: 2px solid var(--bg-primary); box-sizing: content-box; margin-left: -10px; }
.xprof__faces .avatar:first-child { margin-left: 0; }
.xprof__faces img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xprof__followedby-text { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }

.xprof__buttons { display: flex; gap: 10px; padding: 14px 16px 0; }
.xprof__buttons form { flex: 1; display: flex; margin: 0; }
.xprof__buttons > .xprof__btn { flex: 1; }
.xprof__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font: inherit; font-weight: 800; font-size: 1.05rem; text-decoration: none; cursor: pointer; }
.xprof__btn--primary { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); }

.xprof__tabs { display: flex; margin-top: 14px; border-bottom: 1px solid var(--border-color); }
.xprof__tab { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 6px; color: var(--text-tertiary); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.xprof__tab.is-active { color: var(--text-primary); flex: 1.6; font-weight: 800; }
.xprof__tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 4px; border-radius: 3px; background: var(--color-accent); }
.basic-shell:has(.xprof) .post-pinned-label { padding-left: 16px; }

/* ---- Phase 44 ---- */
.xprof__round--search { right: 54px; }
.xprof__circle.is-on { background: var(--bg-tertiary); }
.xprof__verify { margin: 16px 16px 0; padding: 16px; border-radius: 16px; background: var(--bg-tertiary, #f1f3f4); }
.xprof__verify-top { display: flex; gap: 14px; align-items: flex-start; }
.xprof__verify-avatar { position: relative; flex: none; }
.xprof__verify-avatar .avatar { width: 68px; height: 68px; }
.xprof__verify-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xprof__verify-badge { position: absolute; right: -4px; bottom: -2px; display: inline-flex; background: var(--bg-tertiary, #f1f3f4); border-radius: 50%; }
.xprof__verify-title { font-weight: 800; font-size: 1.2rem; line-height: 1.25; }
.xprof__verify-text { margin-top: 4px; color: var(--text-tertiary); line-height: 1.3; }
.xprof__verify-actions { display: flex; gap: 12px; margin-top: 16px; }
.xprof__vbtn { flex: 1; padding: 11px 10px; border-radius: 999px; border: 0; background: var(--bg-hover, #e3e6e8); color: var(--text-primary); font: inherit; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.xprof__vbtn--primary { background: var(--text-primary); color: var(--bg-primary); }
.xprof-search { padding: 0; }
.xprof-search__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--bg-primary); z-index: 5; }
.xprof-search__bar a { color: var(--text-primary); display: inline-flex; }
.xprof-search__bar form { flex: 1; display: flex; }
.xprof-search__bar input { flex: 1; min-width: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; }

/* ---- Phase 45 ---- */
.xpop { position: absolute; z-index: 1250; min-width: 270px; max-width: calc(100vw - 24px); padding: 8px 0; border-radius: 16px; background: var(--bg-primary); box-shadow: 0 6px 30px rgba(0,0,0,.22); border: 1px solid var(--border-color); }
.xpop__item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 18px; background: none; border: 0; color: var(--text-primary); font: inherit; font-size: 1.1rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.xpop__item:hover { background: var(--bg-hover); }
.xpop__item svg { flex: none; }

.xprof__sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 14px; padding: 10px 12px; height: 64px; box-sizing: border-box; color: var(--text-primary); background: var(--bg-primary); overflow: hidden; }
.xprof__sticky[hidden] { display: none; }
.xprof__sticky-bg { display: none; position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(14px) brightness(.9); opacity: .9; }
.xprof__sticky > * { position: relative; }
.xprof__round--static { position: relative; top: auto; left: auto; right: auto; flex: none; }
.xprof__sticky-title { flex: 1; min-width: 0; }
.xprof__sticky-name { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xprof__sticky-count { color: var(--text-tertiary); font-size: .95rem; }
.xprof__tabs { position: sticky; top: 0; z-index: 50; background: var(--bg-primary); }

.xwtf { padding: 16px 0 8px; border-bottom: 1px solid var(--border-color); border-top: 1px solid var(--border-color); }
.xwtf__title { margin: 0 16px 12px; font-size: 1.4rem; font-weight: 800; }
.xwtf__row { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 12px; scroll-snap-type: x proximity; scrollbar-width: none; }
.xwtf__row::-webkit-scrollbar { display: none; }
.xwtf__card { flex: none; width: 168px; padding: 14px 10px 12px; border: 1px solid var(--border-color); border-radius: 16px; text-align: center; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.xwtf__link { display: flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; text-decoration: none; min-width: 0; width: 100%; }
.xwtf__avatar.avatar { width: 64px; height: 64px; font-size: 1.6rem; margin-bottom: 6px; }
.xwtf__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xwtf__name { font-weight: 800; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwtf__handle { color: var(--text-tertiary); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwtf__btn { border: 0; border-radius: 999px; background: var(--text-primary); color: var(--bg-primary); font: inherit; font-weight: 800; padding: 8px 22px; cursor: pointer; }
.xwtf__btn.is-following { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }
.xwtf__more { display: block; padding: 8px 16px 4px; color: var(--color-accent); text-decoration: none; }

.xprof.is-compact .xprof__tabs { top: 64px; }

/* Phase 47 — tappable name + badge, and the "Verified account" sheet */
.xprof__name-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.xver { padding: 6px 0 8px; }
.xver__row { display: flex; align-items: center; gap: 18px; padding: 12px 4px; }
.xver__row p { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.xver__row a { color: var(--color-accent, #1d9bf0); text-decoration: none; }
.xver__icon { flex: none; width: 48px; display: inline-flex; justify-content: center; color: var(--text-primary); }
.xver__icon--seal { color: var(--color-verified, #1d9bf0); }
.xver__icon--seal svg { width: 40px; height: 40px; }
.xver__icon--seal.is-org { color: var(--color-verified-org, #e2b719); }

/* Phase 50 — profile label / automated tags */
.xprof__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.xprof__tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--bg-secondary); color: var(--text-tertiary); font-size: .95rem; }
.xprof__tag a { color: var(--color-accent); text-decoration: none; }
/* Phase 55: own profile — "You aren't verified yet" card + Get verified chip */
.xprof__youver { position: relative; margin: 16px; padding: 16px 16px 18px; border-radius: 16px; background: #dcf5e9; color: #0f1419; }
:root[data-theme="dark"] .xprof__youver { background: #12362a; color: #e7e9ea; }
.xprof__youver-x { position: absolute; top: 12px; right: 12px; border: 0; background: none; color: inherit; cursor: pointer; display: inline-flex; padding: 4px; }
.xprof__youver-title { display: flex; align-items: center; gap: 6px; font-size: 1.3rem; font-weight: 800; padding-right: 36px; }
.xprof__youver-badge { display: inline-flex; color: #0f1419; }
:root[data-theme="dark"] .xprof__youver-badge .badge-verified__seal { fill: #e7e9ea; }
.xprof__youver-text { margin: 6px 0 14px; font-size: 1.2rem; line-height: 1.35; opacity: .85; }
.xprof__youver-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #0f1419; color: #fff; font-weight: 800; font-size: 1.15rem; text-decoration: none; }
:root[data-theme="dark"] .xprof__youver-btn { background: #fff; color: #0f1419; }
.xprof__getver { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 4px 12px 4px 8px; border: 1px solid var(--border-color-strong, var(--border-color)); border-radius: 999px; font-size: 1.1rem; font-weight: 800; color: var(--text-primary); text-decoration: none; vertical-align: middle; }
.xprof__getver[hidden] { display: none; }
.xprof__youver[hidden] { display: none; }

/* Phase 55: collapsed header — always solid theme background, readable name + count, dark circle buttons */
.xprof__sticky { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
.xprof__sticky .xprof__sticky-name { color: var(--text-primary); font-size: 1.25rem; line-height: 1.2; }
.xprof__sticky .xprof__sticky-count { color: var(--text-tertiary) !important; font-size: 1rem; }
.xprof__sticky .xprof__round { background: rgba(15,20,25,.75); color: #fff; }
:root[data-theme="dark"] .xprof__sticky .xprof__round { background: #16181c; }
.xprof__tabs.is-pinned { position: fixed; z-index: 55; }
.xprof.is-compact .xprof__tabs.is-pinned { top: 64px; }
.xprof__tabs.is-pinned { margin-top: 0 !important; }

/* Phase 65: floating New post button on profiles (always shown, like X) */
.xprof__fab.compose-fab { display: inline-flex; right: 20px; bottom: 24px; width: 58px; height: 58px; z-index: 30; }
.xprof__fab.compose-fab .icon { width: 28px; height: 28px; }
@media (min-width: 900px) { .xprof__fab.compose-fab { right: calc(50% - 300px + 16px); } }
