/* Profile redesign (profile.js) + home circle row + People suggestions, after the approved
   TikTok-style reference: white surfaces, dark text, deep-pink accents, compact rounded controls.
   Small controls keep a 40px+ touch area through padding or an invisible hit area. */
:root{--pf-pink:#c26d18;--pf-hot:#f0a638;--pf-ink:#1f1720;--pf-muted:#7a6873;--pf-line:#f3eee7;--pf-soft:#fffbf5}

/* ---------- profile page ---------- */
#detailView .pd.pc.pf{max-width:560px;gap:0;padding:0 0 18px;background:#fff}
.pf>*{min-width:0}
.pf [hidden],.mr-rail [hidden]{display:none!important}
.pf-cover{height:clamp(96px,26vw,150px);background:linear-gradient(135deg,#7a4f24,#c26d18 55%,#f6d4a2);overflow:hidden;border-radius:0 0 18px 18px}
.pf-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.9);display:block}
.pf .pf-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;justify-items:start;text-align:left;gap:12px;padding:0 14px;margin-top:-46px}
.pf .pf-avatar{width:96px;height:96px;margin:0;padding:3px;background:linear-gradient(135deg,#f7c76b,#c26d18);box-shadow:0 4px 14px #5b34172e}
.pf .pf-avatar img,.pf .pf-avatar span{border-width:3px;font-size:36px}
.pf .pf-avatar.on::after{right:6px;bottom:6px;width:16px;height:16px}
.pf-id{display:grid;gap:1px;padding-top:52px;min-width:0}
.pf .pf-id h3{margin:0;font-size:clamp(19px,5.4vw,23px);font-weight:900;color:var(--pf-ink);line-height:1.15;overflow-wrap:anywhere;min-width:0}
.pf .pf-id .pf-handle{margin:0;font-size:13.5px;font-weight:600;color:var(--pf-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-presence{justify-self:start;font-size:12px;font-weight:800;color:#8a8a8a;display:inline-flex;align-items:center;gap:5px}
.pf-presence::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.pf-presence.on{color:#e17f1d;animation:pf-blink 1.4s ease-in-out infinite}
@keyframes pf-blink{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.pf-presence.on,.mr-st.on{animation:none}}
.pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 10px 4px}
.pf-stat{display:grid;justify-items:center;gap:0;border:0;background:none;padding:4px 2px;font:inherit;color:inherit;position:relative}
.pf-stat+.pf-stat::before{content:'';position:absolute;left:0;top:22%;height:56%;border-left:1px solid var(--pf-line)}
.pf-stat b{font-size:17px;font-weight:900;color:var(--pf-ink);line-height:1.2}
.pf-stat span{font-size:12px;color:var(--pf-muted);font-weight:600}
button.pf-stat{cursor:pointer;border-radius:10px}button.pf-stat:hover{background:var(--pf-soft)}
.pf-bio{padding:4px 16px 0;display:grid;gap:3px}
.pf-bio.has-add{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}
.pf-bio-text{display:grid;gap:3px;min-width:0}
.pf-add{position:relative;width:44px;height:44px;margin:-6px -6px -6px 0;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.pf-add span{width:30px;height:30px;border-radius:50%;background:var(--pf-pink);color:#fff;font-size:22px;font-weight:900;line-height:30px;text-align:center;box-shadow:0 3px 8px #c26d1855;transition:transform .15s}
.pf-add:hover span,.pf-add:focus-visible span{transform:scale(1.08)}
.pf-add:focus-visible{outline:none}.pf-add:focus-visible span{outline:3px solid #f4dcb7;outline-offset:2px}
.pf .pf-bio .pd-bio{font-size:14.5px;line-height:1.4;color:#33262f;white-space:pre-line}
.pf-loc{margin:0;font-size:13.5px;color:#4b3b45;font-weight:600}
.pf .pd-note{margin:8px 14px 0}
.pf .pf-acts{display:flex;gap:8px;align-items:center;justify-content:stretch;padding:12px 14px 0}
.pf-btn{flex:1;min-width:0;height:36px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:800;padding:0 14px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-primary{background:var(--pf-hot);color:#fff;border:0;box-shadow:0 3px 10px #f0a63840}
.pf-primary:hover{background:#e0852a}
.pf-outline{background:#fff;color:var(--pf-pink);border:1.5px solid var(--pf-pink)}
.pf-act.pf-connect{padding:0;gap:0;overflow:hidden;border-color:var(--pf-pink)}
.pf-connect[hidden]{display:none}
.pf-connect .pf-follow{height:100%;padding:0 12px;border:0;background:#fff;color:var(--pf-pink);font:inherit;font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap}
.pf-connect .pf-follow.is-on{color:var(--pf-ink)}
.pf-connect .pf-friend{position:relative;height:100%;width:32px;border:0;border-left:1px solid #f2e8da;background:#fff;color:var(--pf-ink);font-size:12px;cursor:pointer;display:grid;place-items:center;padding:0}
.pf-connect .pf-friend small{position:absolute;right:4px;bottom:6px;font-size:9px;font-weight:900;color:var(--pf-pink)}
.pf-connect .pf-friend.is-on{color:var(--pf-pink)}
.pf-connect:has(.pf-follow.is-on){border-color:#d9c6d0}
.pf-live-badge{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:2px solid #fff;border-radius:6px;background:#e17f1d;color:#fff;font:inherit;font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:2px 7px;cursor:pointer;z-index:1}
.pf-live-badge::after{content:'';position:absolute;inset:-10px -6px}
.pf .pf-owner-acts{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;gap:8px;padding:12px 14px 0}
.pf-golive{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid #e2cfd9;background:#fff;color:var(--pf-ink);font:inherit;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.pf-golive:hover{border-color:#e17f1d}
.pf-nb{white-space:nowrap}
.pf-tick{display:inline-block;width:18px;height:18px;vertical-align:-2px;margin-left:5px}
#detailView .pf-share{width:44px;height:44px;display:grid;place-items:center;color:var(--pf-ink);background:none;border:0;box-shadow:none}
#detailView .pf-share[hidden]{display:none}
@media(max-width:340px){.pf .pf-owner-acts{grid-template-columns:1fr 1fr}.pf .pf-owner-acts>*{padding:0 8px;justify-content:center}}
.pf .pf-visitor-acts{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:6px;padding:12px 14px 0;container-type:inline-size}
.pf-act{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;min-width:0;padding:0 10px;border-radius:999px;border:1px solid #e2cfd9;background:#fff;color:var(--pf-ink);font:inherit;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.pf-act svg{flex:none;width:15px;height:15px}
.pf-act.pf-msg{background:var(--pf-hot);border-color:var(--pf-hot);color:#fff;padding:0 14px}
.pf-act.pf-wa svg path{fill:#25d366}
/* The WhatsApp label follows the row's width so it is never cut off (full name for screen readers). */
.pf-wa-mid,.pf-wa-short,.pf-wa-tiny{display:none}
@container (max-width:399px){.pf-wa-long{display:none}.pf-wa-mid{display:inline}}
@container (max-width:355px){.pf-wa-mid{display:none}.pf-wa-short{display:inline}}
@container (max-width:299px){.pf-wa-short{display:none}.pf-wa-tiny{display:inline}.pf-act{padding:0 8px;gap:4px}.pf-act.pf-msg{padding:0 10px}.pf-connect .pf-follow{padding:0 8px}.pf-connect .pf-friend{width:28px}}
.pf-live{color:#e17f1d}
.pf-live.on-air{background:#e17f1d;color:#fff;border-color:#e17f1d;animation:pf-blink 1.6s ease-in-out infinite}
.pf-about{margin:10px 14px 0;border:1px solid var(--pf-line);border-radius:14px;background:#fff}
.pf-about summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font-size:13.5px;font-weight:800;color:var(--pf-ink);cursor:pointer;min-height:40px}
.pf-about summary::-webkit-details-marker{display:none}
.pf-about summary span{color:var(--pf-muted);font-size:18px;transition:transform .2s}
.pf-about[open] summary span{transform:rotate(90deg)}
.pf-about .pc-rows{padding:0 12px 6px}
.pf-about .pc-rows li{padding:7px 0;font-size:13.5px;grid-template-columns:24px 100px minmax(0,1fr)}
.pf-content{margin-top:10px;border-top:1px solid var(--pf-line)}
.pf-tabs{display:flex;justify-content:space-around;padding:0 8px}
.pf-tabs button{flex:1;height:40px;border:0;background:none;font-size:18px;color:#a3949c;cursor:pointer;position:relative}
.pf-tabs button[aria-selected="true"]{color:var(--pf-ink)}
.pf-tabs button[aria-selected="true"]::after{content:'';position:absolute;left:30%;right:30%;bottom:0;height:2.5px;border-radius:2px;background:var(--pf-ink)}
.pf .pf-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:6px 6px 2px 2px}
.pf .pf-grid .pc-pic{aspect-ratio:1;border-radius:2px;position:relative;cursor:pointer;overflow:visible}
.pf .pf-grid .pc-pic>img{border-radius:2px}
.pf .pf-grid .pc-pic-video img{opacity:1}
.pf .pf-grid .pc-pic-video>span[aria-hidden]{inset:auto 3px auto auto;top:3px;place-content:start;font-size:9px;background:#0007;border-radius:4px;padding:1px 3px;gap:0}
.pf-grid[data-pf-show="video"] [data-pf-kind="photo"],.pf-grid[data-pf-show="photo"] [data-pf-kind="video"]{display:none}
.pf .pf-grid .eng-media-views{position:absolute;left:3px;bottom:2px;right:auto;top:auto;display:inline-flex;align-items:center;gap:3px;background:none;padding:0;color:#fff;font-size:10.5px;font-weight:800;text-shadow:0 1px 3px #000c;box-shadow:none;border:0}
.pf .pf-grid .eng-media-views .eng-icon{font-size:9px}
/* Album: the cover with two pictures stacked behind it (layered-paper look) and a count. */
.pf .pf-grid .pf-album{background:none;isolation:isolate}
.pf .pf-grid .pf-album::before,.pf .pf-grid .pf-album::after{content:'';position:absolute;inset:0;border-radius:3px;background:#fff;border:1px solid #e3d3dc;box-shadow:0 1px 3px #3b281a33;z-index:-1}
.pf .pf-grid .pf-album::before{transform:translate(3px,-3px) rotate(4deg)}
.pf .pf-grid .pf-album::after{transform:translate(1.5px,-1.5px) rotate(2deg)}
.pf .pf-grid .pf-album>img{position:relative;box-shadow:0 1px 4px #0004}
.pf-album-count{position:absolute;top:3px;right:3px;display:inline-flex;align-items:center;gap:2px;background:#000a;color:#fff;font-size:9.5px;font-weight:800;line-height:1;border-radius:4px;padding:2px 4px}
.pf-album-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:#ffffffd9;color:#3b281a;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 2px 8px #0005}
.pf-album-nav.prev{left:10px}.pf-album-nav.next{right:10px}
.pf-album-nav:disabled{opacity:0;pointer-events:none}
@media(hover:none){.pf-album-nav{display:none}}
.pc-lightbox-stage{position:relative}
.pf-empty{margin:14px;text-align:center;color:var(--pf-muted);font-size:14px;display:grid;gap:10px;justify-items:center}
.pf-empty .pf-btn{flex:none}
.pf .eng-comment-preview{margin:10px 14px 0}
#ownerMenu .danger{color:#b91c1c}
@media(min-width:781px){#detailView .pd.pc.pf{border:1px solid var(--pf-line);border-radius:18px;overflow:hidden;margin-top:8px}.pf-cover{border-radius:0}}

/* ---------- home: circle row ---------- */
#homeView.has-rail{--rail-h:92px}
#homeView.has-rail>.feed-prompt{top:calc(var(--tabs-h) + var(--rail-h) + 8px)}
#homeView.has-rail .home-grid{height:calc(var(--feed-h) - var(--tabs-h) - var(--rail-h));grid-auto-rows:calc((var(--feed-h) - var(--tabs-h) - var(--rail-h) - 3px) / 2)}
#homeView.full .mr-rail{display:none}
.mr-rail{height:var(--rail-h,92px);display:flex;gap:4px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:6px 8px 0;background:#fff;border-bottom:1px solid #f2ece3;scrollbar-width:none;scroll-snap-type:x proximity}
.mr-rail::-webkit-scrollbar{display:none}
.mr-rail[hidden]{display:none}
.mr-circle{flex:none;width:66px;display:grid;justify-items:center;position:relative;scroll-snap-align:start}
.mr-ring{width:56px;height:56px;border-radius:50%;padding:2px;border:2px solid #e9e1d6;background:#fff;cursor:pointer;display:block}
.mr-circle.live .mr-ring{border-color:var(--pf-pink);box-shadow:0 0 0 2px #fff inset}
.mr-ring img,.mr-ring span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#fffaf3;color:var(--pf-pink);font-weight:900;font-size:20px}
.mr-plus{position:absolute;top:38px;right:5px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#ef233c;color:#fff;font-size:16px;font-weight:900;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 2px 5px #0003}
.mr-plus::after{content:'';position:absolute;inset:-9px}
.mr-plus.is-on{background:#fff;color:var(--pf-pink);border-color:#f1dfc3;font-size:12px;cursor:default}
.mr-name{margin-top:2px;max-width:64px;font-size:11.5px;font-weight:700;color:var(--pf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.mr-st{font-size:10px;font-weight:800;color:#9a9a9a;line-height:1.2}
.mr-st.on{color:#e17f1d;animation:pf-blink 1.4s ease-in-out infinite}
.mr-live-tag{position:absolute;top:47px;left:50%;transform:translateX(-50%);background:#e17f1d;color:#fff;font-size:9.5px;font-weight:900;letter-spacing:.04em;padding:1px 6px;border-radius:5px;border:1.5px solid #fff}
.mr-circle.live .mr-name{margin-top:6px}
.mr-circle.live .mr-plus{top:0;right:3px}

/* ---------- People: compact tabs and suggestion rows ---------- */
#peopleTabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#peopleTabs::-webkit-scrollbar{display:none}
#peopleView #peopleTabs .sl-tab{flex:none;height:32px;padding:0 12px;border-radius:999px;font-size:13px;background:#fff;color:#5d4a55;border:1px solid #eadbe3;box-shadow:none}
#peopleView #peopleTabs .sl-tab.active{background:#ffd76a;color:#3b2a00;border-color:#f3c64a}
#peopleList .sg-row{gap:10px;align-items:center}
#peopleList .sg-row .sl-ava{width:52px;height:52px;min-width:52px;flex:none;border-radius:50%;overflow:hidden}
#peopleList .sg-row .sl-ava img{width:100%;height:100%;object-fit:cover}
#peopleList .sg-row .sl-who{display:grid;gap:0;text-align:left;min-width:0;flex:1}
#peopleList .sg-row .sl-who strong{font-size:15px;color:var(--pf-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#peopleList .sg-row .sg-handle{color:var(--pf-muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#peopleList .sg-row .sl-acts{display:flex;align-items:center;gap:2px;flex:none}
#peopleList .sg-row .sg-follow{height:30px;min-height:30px;padding:0 16px;border-radius:999px;background:var(--pf-hot);color:#fff;border:0;font-weight:800;font-size:13.5px;box-shadow:0 2px 8px #f0a63833}
#peopleList .sg-row .sg-follow.is-on{background:#fff;color:var(--pf-ink);border:1px solid #dccbd4;box-shadow:none}
#peopleList .sg-icon,#peopleList .sg-x{width:32px;height:32px;border-radius:50%;border:0;background:none;color:#7d6d76;font-size:12px;cursor:pointer;position:relative;white-space:nowrap;padding:0;display:grid;place-items:center}
#peopleList .sg-x{font-size:20px}
#peopleList .sg-icon:hover,#peopleList .sg-x:hover{background:var(--pf-soft)}
#peopleList .sg-icon::after,#peopleList .sg-x::after{content:'';position:absolute;inset:-4px}

/* ---------- bottom navigation: Live in the centre ---------- */
.bottom-nav .nav-live b{color:#e17f1d}
.bottom-nav .nav-live.active b{color:#fff}