:root{
  --app-font:"Cairo",Tahoma,Arial,sans-serif;
  --accent:#7568e8;--bg:#f7f6fb;--card:#fff;--text:#17171c;--muted:#827c8b;--line:#e8e5ee;
  --topbar:#fff;--online:#fff;--matches:#fff;--scope:#fff;--scope-active:#efedff;
  --bottom:#fff;--notification:#fff;--icon:#efedff;--chat:#7568e8;--history:#f1efff;--preview:#fff;
  --radius:16px
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--app-font);background:var(--bg);color:var(--text)}
body{padding-bottom:72px}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:999;background:#17161c;color:#fff;padding:8px 13px;border-radius:999px;opacity:0;transition:.2s}
.toast.show{opacity:1}
.auth{min-height:100vh;display:grid;place-items:center;padding:18px}
.auth-card{width:min(100%,520px);background:var(--card);border:1px solid var(--line);border-radius:26px;padding:20px}
.brand{font-weight:900;font-size:24px;display:flex;align-items:center}
.brand img{height:var(--site-logo-height,38px);max-height:none;max-width:240px;width:auto;object-fit:contain}
.auth-brand{justify-content:center;margin-bottom:16px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:13px;padding:4px;margin-bottom:12px}
.auth-tab{border:0;background:transparent;border-radius:10px;padding:8px;color:var(--text)}
.auth-tab.active{background:var(--card);box-shadow:0 3px 12px #0001}
.form{display:grid;gap:8px}
.form label,.account-card label{display:grid;gap:5px}
.form label>span,.account-card label>span{font-size:10px;color:var(--muted);font-weight:800}
.form input,.form select,.account-card select,.composer input,.comment-composer input{
  width:100%;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:10px;outline:none
}
.dob{display:grid;grid-template-columns:1fr 1.4fr 1.2fr;gap:6px}
.dob select{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:9px}
.gender{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gender label{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;padding:10px}
.avatar-picker{display:grid;place-items:center;gap:5px}
.avatar-picker button{width:100px;height:100px;border-radius:50%;border:2px dashed var(--line);overflow:hidden;padding:0;background:var(--bg)}
.avatar-picker img{width:100%;height:100%;object-fit:cover}
.avatar-picker small{font-size:10px;color:var(--muted)}
.country-preview{display:flex;align-items:center;gap:7px;padding:6px 8px;background:var(--icon);border-radius:10px;font-size:11px}
.country-preview b{font-size:21px}
.primary,.secondary,.danger,.send-button{border:0;border-radius:12px;padding:10px 12px;font-weight:900}
.primary,.send-button{background:var(--accent);color:#fff}
.secondary{background:var(--icon);color:var(--text);border:1px solid var(--line)}
.danger{background:#ffe8ed;color:#ae334b}
.full{width:100%;margin-top:8px}
.error{font-size:10px;color:#bc3550}
.topbar{height:62px;position:sticky;top:0;z-index:100;background:var(--topbar);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.top-actions{display:flex;gap:8px}
.icon-btn,.avatar-button{position:relative;width:40px;height:40px;border:0;border-radius:13px;background:var(--icon);display:grid;place-items:center;padding:0}
.avatar-button img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;border-radius:999px;background:#ff3157;color:#fff;font-size:9px;display:grid;place-items:center;border:2px solid var(--card)}
.main{width:min(100%,860px);margin:auto;padding:12px;display:grid;gap:10px}
.card,.online-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:11px}
.online-panel{background:var(--online)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.section-title b{font-size:12px}
.section-title span{font-size:10px;color:var(--muted)}
.online-list{display:flex;gap:8px;overflow:auto}
.online-person{position:relative;flex:0 0 56px;border:0;background:transparent;color:var(--text);padding:0;text-align:center}
.online-person img{width:47px;height:47px;border-radius:50%;object-fit:cover}
.online-person small{display:block;font-size:8px}
.scope-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.scope{border:1px solid var(--line);background:var(--scope);color:var(--text);border-radius:12px;min-height:46px}
.scope.active{background:var(--scope-active);color:var(--accent);border-color:var(--accent);font-weight:900}
.matches-panel{background:var(--matches)}
.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:7px}
.person{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:13px;padding:8px;display:flex;align-items:center;gap:8px;text-align:start}
.person img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.person b{display:block;font-size:11px}
.person small{display:block;font-size:9px;color:var(--muted)}
.chat-entry{width:100%;min-height:48px;border:0;border-radius:14px;background:var(--chat);color:#fff;font-weight:900;position:relative}
.history-box{background:var(--history);border-radius:13px;padding:10px;font-size:12px}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:300;width:min(100%,860px);height:66px;background:var(--bottom);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
.nav-item{border:0;background:transparent;color:var(--text);display:grid;place-items:center;align-content:center;gap:2px;font-size:9px}
.nav-item.active{color:var(--accent)}
.nav-icon{font-size:18px;min-height:22px}
.nav-icon img,#bellIcon img{width:22px;height:22px;object-fit:contain}
.nav-preview{position:fixed;z-index:350;left:50%;bottom:74px;width:min(450px,calc(100vw - 20px));transform:translate(-50%,22px);opacity:0;transition:.22s}
.nav-preview.show{opacity:1;transform:translate(-50%,0)}
.nav-preview button{width:100%;border:1px solid var(--line);background:var(--preview);color:var(--text);border-radius:19px;box-shadow:0 18px 50px #201a3a22;padding:10px;display:grid;grid-template-columns:48px 1fr auto;gap:9px;align-items:center;text-align:start}
.preview-icon{width:46px;height:46px;border-radius:13px;background:var(--icon);display:grid;place-items:center;font-size:20px}
.preview-icon img{width:26px;height:26px;object-fit:contain}
.nav-preview small{display:block;color:var(--muted);font-size:9px}
.modal{position:fixed;inset:0;z-index:500;background:#12101888;display:grid;place-items:center;padding:12px}
.modal-card{width:min(100%,600px);max-height:90dvh;overflow:auto;background:var(--card);border-radius:22px;padding:13px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.modal-head h3{margin:0;font-size:15px}
.close-button{width:34px;height:34px;border:0;border-radius:10px;background:var(--icon);color:var(--text);font-size:20px}
.account-card{text-align:center}
.large-avatar{width:90px;height:90px;border-radius:50%;object-fit:cover}
.account-details{text-align:start;background:var(--bg);border-radius:13px;padding:9px;margin:9px 0;display:grid;gap:4px;font-size:11px}
.chat-card{height:min(90dvh,720px);display:flex;flex-direction:column;overflow:hidden}
.messages{flex:1;overflow:auto;background:var(--bg);border-radius:13px;padding:9px;display:flex;flex-direction:column;gap:6px}
.message{display:flex}
.message.mine{justify-content:flex-end}
.message-bubble{max-width:80%;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:8px;font-size:12px}
.message.mine .message-bubble{background:var(--scope-active)}
.message-bubble img{max-width:230px;border-radius:10px}
.message-bubble audio{max-width:100%}
.message-bubble small{display:block;color:var(--muted);font-size:8px}
.composer{display:grid;grid-template-columns:auto auto auto 1fr auto;gap:5px;padding-top:7px}
.tool-button{width:38px;height:38px;border:0;border-radius:10px;background:var(--icon);color:var(--text)}
.emoji-panel{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px}
.emoji-panel button{border:0;background:transparent;font-size:20px;height:34px}
.profile-page{position:fixed;inset:0;z-index:450;background:var(--bg);overflow:auto}
.profile-inner{width:min(100%,760px);margin:auto;padding:12px 12px 86px}
.profile-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:13px}
.profile-user{display:flex;align-items:center;gap:11px}
.profile-user img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.profile-user h2{margin:0 0 4px}
.profile-meta{font-size:10px;color:var(--muted)}
.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.profile-stats button{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:12px;padding:8px}
.profile-stats span{display:block;font-size:9px}
.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.owner-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.owner-tools #profilePrivacyButton{grid-column:1/-1}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:9px}
.post-thumb{aspect-ratio:1;border:0;padding:0;overflow:hidden;background:#ddd}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.photo-card{width:min(100%,850px);max-height:92dvh;background:var(--card);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1.3fr .7fr}
.photo-image{background:#000;display:grid;place-items:center;min-height:360px}
.photo-image img{max-width:100%;max-height:80dvh}
.photo-side{padding:10px;display:flex;flex-direction:column;min-height:0}
.reactions{display:flex;gap:5px;flex-wrap:wrap}
.reaction{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:6px 8px}
.reaction.active{background:var(--scope-active)}
.comments{flex:1;overflow:auto;display:grid;gap:5px;margin:7px 0}
.comment{display:flex;gap:6px;font-size:10px}
.comment img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.comment-composer{display:grid;grid-template-columns:auto 1fr auto;gap:5px}
.live-notification{position:fixed;top:68px;right:12px;z-index:900;width:min(320px,calc(100vw - 24px));background:var(--notification);border:1px solid var(--line);border-radius:17px;padding:9px;box-shadow:0 16px 50px #201a3a22;opacity:0;transform:translateY(-10px);transition:.2s;text-align:start}
.live-notification.show{opacity:1;transform:translateY(0)}
.notifications-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.notification-chip{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:7px;text-align:center}
.notification-row{width:100%;border:0;background:transparent;color:var(--text);display:flex;gap:8px;align-items:center;text-align:start;padding:8px;border-radius:12px}
.notification-row.unread{background:var(--scope-active)}
.notification-row img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.crop-stage{aspect-ratio:1;background:#111;border-radius:15px;overflow:hidden;touch-action:none}
.crop-stage canvas{width:100%;height:100%}
@media(max-width:700px){
  .main{padding:8px}
  .modal{padding:0;align-items:stretch}
  .modal-card{width:100%;max-height:100dvh;border-radius:0;padding-top:calc(10px + env(safe-area-inset-top))}
  .chat-card{height:100dvh}
  .photo-card{width:100%;height:100dvh;max-height:100dvh;border-radius:0;grid-template-columns:1fr}
  .photo-image{min-height:42dvh}
  .profile-inner{padding:9px 9px 84px}
  .composer{grid-template-columns:auto auto auto 1fr auto}
  .tool-button{width:34px}
  .notifications-summary{grid-template-columns:1fr 1fr}
}

/* VISUAL RESTORE V2 */
body.dark{
  --bg:#111116;--card:#1a1a21;--text:#f5f3fb;--muted:#aaa4b7;--line:#2d2b36;
  --topbar:#17171d;--online:#17171d;--matches:#1a1a21;--scope:#1a1a21;--scope-active:#2b2750;
  --bottom:#17171d;--notification:#202028;--icon:#26242f;--chat:#7568e8;--history:#22202b;--preview:#1d1c24
}
body.dark input,body.dark select,body.dark .form input,body.dark .form select,body.dark .account-card select,body.dark .composer input,body.dark .comment-composer input{background:#202028;color:#f5f3fb;border-color:#33313d}
body.dark .auth-tab.active,body.dark .scope.active,body.dark .notification-row.unread,body.dark .message.mine .message-bubble,body.dark .reaction.active{background:#2b2750}
body.dark .danger{background:#40232b;color:#ffb9c8}body.dark .secondary{background:#26242f;color:#f5f3fb;border-color:#35323f}

.main{width:min(100%,900px);padding:14px 92px 14px 14px}html[dir="ltr"] .main{padding:14px 14px 14px 92px}
.topbar{height:60px;padding:0 16px;backdrop-filter:blur(14px)}.brand{font-size:22px;letter-spacing:-.3px}
.card,.online-panel{border-radius:18px}.matches-panel{padding:12px}.scope-tabs{gap:8px}.scope{min-height:44px;border-radius:14px}
.people-grid{gap:8px}.person{border-radius:15px;padding:9px;transition:.15s}.person:hover{transform:translateY(-1px);box-shadow:0 8px 22px #241d4d0d}
.chat-entry{min-height:50px;border-radius:15px}.history-box{border-radius:14px}

#home-online{position:fixed;z-index:220;top:72px;right:10px;width:68px;max-height:calc(100dvh - 154px);padding:8px 6px;border-radius:18px;box-shadow:0 12px 36px #201a3a12;overflow:hidden}
html[dir="ltr"] #home-online{right:auto;left:10px}
#home-online .section-title{margin:0 0 7px;display:grid;place-items:center;gap:2px}#home-online .section-title b{font-size:8px;white-space:nowrap}
#home-online .section-title span{min-width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:var(--icon);color:var(--text);font-size:9px;font-weight:800}
#onlineList{display:flex;flex-direction:column;align-items:center;gap:9px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 212px);scrollbar-width:none}#onlineList::-webkit-scrollbar{display:none}
.online-person{flex:0 0 auto;width:54px;display:grid;place-items:center;gap:1px}.online-person img{width:46px;height:46px;border:2px solid var(--card);outline:2px solid #51c47a}.online-person small{font-size:8px;line-height:1.15}.online-person .badge{top:-3px;right:-1px}
.bottom-nav{height:64px;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px #241d4d0b}.nav-item{font-size:8.5px}.modal{backdrop-filter:blur(5px)}.modal-card{border:1px solid var(--line);box-shadow:0 20px 70px #17121f25}.account-card .large-avatar{outline:4px solid var(--icon)}.account-details{border:1px solid var(--line)}
@media(max-width:700px){.main{padding:9px 72px 9px 9px}html[dir="ltr"] .main{padding:9px 9px 9px 72px}#home-online{top:68px;right:6px;width:58px;max-height:calc(100dvh - 142px);padding:7px 4px;border-radius:16px}html[dir="ltr"] #home-online{right:auto;left:6px}#home-online .section-title b{font-size:7px}#onlineList{max-height:calc(100dvh - 195px);gap:8px}.online-person{width:48px}.online-person img{width:42px;height:42px}.online-person small{font-size:7px}}


/* ===== FRIEND/ONLINE/NAV V3 ===== */
#home-online{
  width:92px !important;
  padding:8px 5px !important;
}
#onlineList{
  gap:5px !important;
}
.online-person{
  width:80px !important;
  min-height:39px;
  display:grid !important;
  grid-template-columns:36px 1fr;
  align-items:center;
  gap:5px;
  padding:2px 3px !important;
  border-radius:11px;
  text-align:start !important;
}
.online-person:hover{background:var(--icon)}
.online-avatar-wrap{width:34px;height:34px;display:block}
.online-person .online-avatar-wrap img,
.online-person img{
  width:34px !important;
  height:34px !important;
  border-radius:50%;
  object-fit:cover;
  outline:1.5px solid #51c47a !important;
  border:1.5px solid var(--card) !important;
}
.online-meta{min-width:0;display:flex;align-items:center;gap:4px}
.online-flag{font-size:17px;line-height:1;font-weight:400}
.online-gender{font-size:9px !important;line-height:1.1;font-weight:800;color:var(--text);white-space:nowrap}
.online-person>.badge{top:-1px !important;right:auto !important;left:25px;z-index:3}
html[dir="ltr"] .online-person>.badge{left:auto;right:42px !important}

/* Floating 4-box bottom navigation */
body{padding-bottom:88px}
.bottom-nav{
  bottom:10px !important;
  left:50% !important;
  width:min(390px,calc(100vw - 26px)) !important;
  height:auto !important;
  padding:0 !important;
  gap:7px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible;
  pointer-events:none;
}
.bottom-nav .nav-item{
  pointer-events:auto;
  min-width:0;
  min-height:54px;
  padding:5px 4px;
  background:var(--bottom) !important;
  border:1px solid var(--line) !important;
  border-radius:15px;
  box-shadow:0 9px 26px #211a4018;
  opacity:0;
  transform:translateY(78px) scale(.88);
  animation:navBoxRise .62s cubic-bezier(.18,1.42,.35,1) forwards;
}
.bottom-nav .nav-item:nth-child(1){animation-delay:.03s}
.bottom-nav .nav-item:nth-child(2){animation-delay:.09s}
.bottom-nav .nav-item:nth-child(3){animation-delay:.15s}
.bottom-nav .nav-item:nth-child(4){animation-delay:.21s}
.bottom-nav .nav-item.active{
  color:var(--accent);
  border-color:var(--accent) !important;
  box-shadow:0 10px 28px #7568e822;
}
.bottom-nav .nav-item .nav-icon{font-size:18px;line-height:1}
.bottom-nav .nav-item .nav-label{
  font-size:8.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%
}
.bottom-nav .nav-item.nav-tap{
  animation:navTapBounce .5s cubic-bezier(.2,1.5,.35,1) both !important;
}
@keyframes navBoxRise{
  0%{opacity:0;transform:translateY(78px) scale(.88)}
  68%{opacity:1;transform:translateY(-7px) scale(1.025)}
  84%{transform:translateY(3px) scale(.99)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes navTapBounce{
  0%{transform:translateY(0) scale(1)}
  28%{transform:translateY(-12px) scale(1.06) rotate(-1deg)}
  52%{transform:translateY(4px) scale(.98) rotate(1deg)}
  75%{transform:translateY(-3px) scale(1.015)}
  100%{transform:translateY(0) scale(1)}
}
.nav-preview{bottom:78px !important}

@media(max-width:700px){
  .main{padding-right:102px !important}
  html[dir="ltr"] .main{padding-right:9px !important;padding-left:102px !important}
  #home-online{width:88px !important;right:6px !important}
  html[dir="ltr"] #home-online{right:auto !important;left:6px !important}
  .online-person{width:76px !important;grid-template-columns:34px 1fr;min-height:38px}
  .online-avatar-wrap{width:32px;height:32px}
  .online-person .online-avatar-wrap img,.online-person img{width:32px !important;height:32px !important}
  .online-flag{font-size:16px}
  .online-gender{font-size:8.5px !important}
  .bottom-nav{width:calc(100vw - 18px) !important;gap:5px !important;bottom:7px !important}
  .bottom-nav .nav-item{min-height:52px;border-radius:14px}
}


/* ==========================================================
   V4 FIXED BOTTOM NAV + SAME-SIZE SLIDE-UP PREVIEW
   ========================================================== */
body{padding-bottom:76px !important}

.bottom-nav{
  position:fixed !important;
  bottom:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(100%,860px) !important;
  height:66px !important;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:6px !important;
  background:var(--bottom) !important;
  border-top:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:0 -8px 26px #211a400d !important;
  pointer-events:auto !important;
  overflow:visible !important;
}

.bottom-nav .nav-item{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  min-width:0 !important;
  min-height:52px !important;
  padding:4px !important;
  border:1px solid transparent !important;
  border-radius:13px !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:auto !important;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.bottom-nav .nav-item.active{
  color:var(--accent) !important;
  background:var(--scope-active) !important;
  border-color:color-mix(in srgb,var(--accent) 22%,transparent) !important;
  box-shadow:none !important;
}
.bottom-nav .nav-item:active{
  transform:none !important;
}
.bottom-nav .nav-item.nav-tap{
  animation:none !important;
}

.bottom-nav .nav-icon{
  font-size:18px !important;
  line-height:1;
}
.bottom-nav .nav-label{
  font-size:8.5px !important;
  font-weight:800;
}

/* Compact preview: exactly above the pressed nav cell */
.nav-preview{
  position:fixed !important;
  z-index:360 !important;
  bottom:72px !important;
  width:auto;
  transform:translate(-50%,28px) scale(.92) !important;
  opacity:0 !important;
  transition:none !important;
  pointer-events:none;
}
.nav-preview.show{
  opacity:1 !important;
  transform:translate(-50%,0) scale(1) !important;
  animation:previewSlideBounce .46s cubic-bezier(.2,1.45,.35,1) both;
  pointer-events:auto;
}
.nav-preview button{
  width:100% !important;
  height:58px !important;
  min-width:0 !important;
  padding:5px 6px !important;
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) !important;
  align-items:center !important;
  gap:5px !important;
  border:1px solid var(--line) !important;
  border-radius:13px !important;
  background:var(--preview) !important;
  box-shadow:0 11px 28px #211a4020 !important;
  text-align:center !important;
  overflow:hidden;
}
.nav-preview button>strong{
  display:none !important;
}
.preview-icon{
  width:29px !important;
  height:29px !important;
  border-radius:9px !important;
  font-size:16px !important;
}
.preview-icon img{
  width:20px !important;
  height:20px !important;
}
.nav-preview b{
  display:block;
  font-size:8.5px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-preview small{
  display:block;
  font-size:6.8px !important;
  line-height:1.15;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@keyframes previewSlideBounce{
  0%{opacity:0;transform:translate(-50%,34px) scale(.88)}
  62%{opacity:1;transform:translate(-50%,-7px) scale(1.04)}
  82%{transform:translate(-50%,3px) scale(.985)}
  100%{opacity:1;transform:translate(-50%,0) scale(1)}
}

@media(max-width:700px){
  .bottom-nav{
    width:100% !important;
    bottom:0 !important;
    gap:5px !important;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom)) !important;
  }
  .bottom-nav .nav-item{
    min-height:50px !important;
    border-radius:12px !important;
  }
  .nav-preview{
    bottom:69px !important;
  }
  .nav-preview button{
    height:55px !important;
  }
}


/* ===== V6 ONLINE: FIXED LONG STRIP ===== */
#home-online{
  top:72px !important;
  bottom:76px !important;
  height:auto !important;
  max-height:none !important;
  width:94px !important;
  overflow:hidden !important;
}
#home-online .section-title{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:4px !important;
  margin-bottom:7px !important;
  white-space:nowrap;
}
#home-online .section-title b{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:8.5px !important;
}
#home-online .section-title b::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#38c96b;
  box-shadow:0 0 0 0 rgba(56,201,107,.45);
  animation:onlinePulse 1.35s infinite;
  flex:0 0 7px;
}
#home-online .section-title #onlineCount{
  font-size:9px !important;
  font-weight:900;
  color:#38a95c !important;
  background:transparent !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
}
#onlineList{
  max-height:none !important;
  height:calc(100% - 28px) !important;
  overflow-y:auto !important;
}
@keyframes onlinePulse{
  0%{box-shadow:0 0 0 0 rgba(56,201,107,.5);opacity:1}
  65%{box-shadow:0 0 0 6px rgba(56,201,107,0);opacity:.75}
  100%{box-shadow:0 0 0 0 rgba(56,201,107,0);opacity:1}
}

/* ===== V6 NAV MINI PAGE PREVIEW ===== */
.nav-preview button{
  height:64px !important;
  padding:5px !important;
  grid-template-columns:1fr !important;
}
.nav-mini{
  width:100%;
  height:100%;
  border-radius:9px;
  background:var(--card);
  overflow:hidden;
  padding:5px;
  position:relative;
}
.mini-home,.mini-chat,.mini-settings,.mini-account{width:100%;height:100%;position:relative}
.mini-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.mini-tabs i{height:8px;border-radius:3px;background:var(--icon)}
.mini-tabs i.on{background:var(--accent)}
.mini-users{display:flex;gap:3px;margin-top:6px}
.mini-users span{width:14px;height:14px;border-radius:50%;background:var(--scope-active);border:1px solid var(--line)}
.mini-line{height:5px;border-radius:3px;background:var(--icon);margin-top:6px}
.mini-line.wide{width:86%}

.mini-chat{display:flex;flex-direction:column;gap:3px}
.mini-bubble{height:9px;width:64%;border-radius:6px;background:var(--icon)}
.mini-bubble.right{align-self:flex-end;background:var(--scope-active)}
.mini-bubble.short{width:45%}
.mini-composer{margin-top:auto;height:10px;border:1px solid var(--line);border-radius:6px;display:grid;grid-template-columns:1fr 13px;gap:3px;padding:2px}
.mini-composer i{background:var(--icon);border-radius:3px}
.mini-composer b{background:var(--accent);border-radius:3px}

.mini-settings{display:grid;gap:3px}
.mini-field{height:9px;border:1px solid var(--line);border-radius:4px;display:grid;grid-template-columns:30% 1fr;gap:3px;padding:2px}
.mini-field span{background:var(--icon);border-radius:2px}
.mini-field i{background:var(--scope-active);border-radius:2px}
.mini-save{height:8px;border-radius:4px;background:var(--accent);margin-top:auto}

.mini-account{display:grid;grid-template-columns:26px 1fr;gap:5px;align-items:center}
.mini-avatar{width:25px;height:25px;border-radius:50%;overflow:hidden;border:1px solid var(--line)}
.mini-avatar img{width:100%;height:100%;object-fit:cover}
.mini-account-lines{display:grid;gap:3px}
.mini-account-lines i{height:5px;background:var(--icon);border-radius:3px}
.mini-account-lines i:nth-child(2){width:78%}
.mini-account-lines i:nth-child(3){width:56%}
.mini-account-action{position:absolute;bottom:1px;left:31px;right:1px;height:7px;border-radius:4px;background:var(--scope-active)}

/* Bottom chat badge */
.bottom-nav .nav-item{position:relative}
#bottomChatBadge{top:1px !important;right:7px !important}

/* mobile long online strip */
@media(max-width:700px){
  #home-online{
    top:68px !important;
    bottom:70px !important;
    width:90px !important;
  }
}

/* ===== V7 FORCE LANGUAGE FONT EVERYWHERE ===== */
html,body,button,input,select,textarea,
.topbar,.bottom-nav,.modal,.profile-page,.nav-preview,.online-panel{
  font-family:var(--app-font) !important;
}

/* ===== V7 REAL MINIATURE PAGE PREVIEWS ===== */
.nav-preview{
  bottom:72px !important;
}
.nav-preview button{
  height:108px !important;
  padding:3px !important;
  overflow:hidden !important;
}
.nav-mini{
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  border-radius:10px !important;
  background:var(--bg) !important;
}
.mini-page-shell{
  width:210px;
  height:270px;
  transform:scale(.31);
  transform-origin:top left;
  background:var(--bg);
  color:var(--text);
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
}
html[dir="rtl"] .mini-page-shell{
  transform-origin:top right;
  position:absolute;
  right:0;
}
.nav-mini{position:relative}

.mini-page-top{
  height:42px;
  background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 13px;
  font-size:15px;
}
.mini-page-body{padding:10px;font-size:12px}
.mini-home-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mini-home-tabs span{
  height:28px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  display:grid;place-items:center;font-size:9px
}
.mini-home-tabs span.active{background:var(--scope-active);border-color:var(--accent);color:var(--accent)}
.mini-home-title{font-size:10px;font-weight:800;margin:10px 0 7px}
.mini-home-person{height:42px;background:var(--card);border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:7px;padding:5px}
.mini-home-person i{width:30px;height:30px;border-radius:50%;background:var(--icon)}
.mini-home-person b{font-size:9px;display:block}.mini-home-person small{font-size:7px;color:var(--muted)}
.mini-home-chat{margin-top:9px;height:30px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800}

.mini-chat-real{height:218px;display:flex;flex-direction:column;gap:7px}
.mini-msg{max-width:70%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px;font-size:9px}
.mini-msg.mine{align-self:flex-end;background:var(--scope-active)}
.mini-msg.short{max-width:48%}
.mini-real-composer{margin-top:auto;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--card);display:grid;grid-template-columns:25px 1fr 25px;align-items:center;gap:3px;padding:3px}
.mini-real-composer i{font-style:normal;color:var(--muted);font-size:7px;overflow:hidden;white-space:nowrap}
.mini-real-composer b{height:24px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:9px}

.mini-settings-real{display:grid;gap:7px}
.mini-avatar-real{display:grid;place-items:center}
.mini-avatar-real img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.mini-settings-real label{display:grid;gap:2px}
.mini-settings-real label small{font-size:7px;color:var(--muted)}
.mini-settings-real label span,.mini-two-fields span{height:25px;border:1px solid var(--line);background:var(--card);border-radius:7px;padding:5px;font-size:8px;overflow:hidden;white-space:nowrap}
.mini-two-fields{display:grid;grid-template-columns:1.4fr .6fr;gap:5px}
.mini-save-real{height:28px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800}

.mini-account-real{text-align:center;display:grid;place-items:center;gap:5px}
.mini-account-real>img{width:50px;height:50px;border-radius:50%;object-fit:cover}
.mini-account-real>b{font-size:11px}
.mini-account-real>small{font-size:8px;color:var(--muted)}
.mini-account-buttons{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px}
.mini-account-buttons span{height:25px;border:1px solid var(--line);background:var(--card);border-radius:7px;display:grid;place-items:center;font-size:7px}

/* online unread badge must be unmistakable */
.online-unread-badge{
  min-width:18px !important;
  height:18px !important;
  font-size:8px !important;
  background:#ff3157 !important;
  color:#fff !important;
  z-index:8 !important;
  border:2px solid var(--card) !important;
}


/* ===== V8 PREVIEW EMERGES FROM BEHIND BOTTOM NAV ===== */
.bottom-nav{
  z-index:400 !important;
}
.nav-preview{
  z-index:390 !important;
  bottom:54px !important;
  opacity:0 !important;
  transform:translate(-50%,62px) scale(.94) !important;
  pointer-events:none !important;
  will-change:transform,opacity;
}
.nav-preview.show{
  pointer-events:auto !important;
  animation:navPreviewFromBehind .62s cubic-bezier(.16,1.28,.3,1) both !important;
}
@keyframes navPreviewFromBehind{
  0%{
    opacity:0;
    transform:translate(-50%,64px) scale(.92);
  }
  46%{
    opacity:1;
    transform:translate(-50%,-13px) scale(1.025);
  }
  68%{
    transform:translate(-50%,5px) scale(.99);
  }
  84%{
    transform:translate(-50%,-3px) scale(1.008);
  }
  100%{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
}
.nav-preview button{
  box-shadow:0 14px 34px #211a4028 !important;
}
@media(max-width:700px){
  .nav-preview{
    bottom:52px !important;
  }
}


/* ===== V9 TRUE SLIDE FROM BEHIND BOTTOM HEADER ===== */

/* Header stays above the preview, so preview is literally hidden behind it */
.bottom-nav{
  z-index:500 !important;
  isolation:isolate;
}
.nav-preview{
  z-index:490 !important;
  bottom:70px !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translate(-50%,125px) scale(.96) !important;
  transition:none !important;
  visibility:visible !important;
}
.nav-preview.show{
  pointer-events:auto !important;
  animation:navRiseFromUnderHeader .72s cubic-bezier(.14,1.2,.26,1) both !important;
}
@keyframes navRiseFromUnderHeader{
  0%{
    opacity:0;
    transform:translate(-50%,125px) scale(.94);
  }
  18%{
    opacity:.2;
  }
  58%{
    opacity:1;
    transform:translate(-50%,-11px) scale(1.025);
  }
  76%{
    transform:translate(-50%,5px) scale(.992);
  }
  88%{
    transform:translate(-50%,-3px) scale(1.007);
  }
  100%{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
}

/* Online title/count: only pulse dot is green */
#home-online .section-title #onlineCount{
  color:var(--text) !important;
  font-weight:900 !important;
}

/* Same day/month/year: smaller and better balanced */
.scope{
  min-height:44px !important;
  padding:5px 6px !important;
  font-size:10px !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.scope span{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px !important;
}

/* Real On This Day feed */
#home-history{
  overflow:hidden;
}
.history-box{
  margin-bottom:8px;
}
.history-events{
  display:grid;
  gap:7px;
}
.history-event{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
}
.history-event img{
  width:48px;
  height:48px;
  border-radius:9px;
  object-fit:cover;
}
.history-event b{
  display:inline-block;
  min-width:40px;
  color:var(--accent);
  font-size:10px;
  margin-bottom:2px;
}
.history-event p{
  margin:0;
  font-size:10px;
  line-height:1.55;
  color:var(--text);
}
.history-source{
  margin-top:7px;
  text-align:end;
  color:var(--muted);
  font-size:8px;
}
#historyDate{
  color:var(--text) !important;
  font-size:9px !important;
  font-weight:700;
}
@media(max-width:700px){
  .scope{font-size:9px !important;padding:4px !important}
  .scope span{font-size:9px !important}
  .nav-preview{bottom:68px !important}
  .history-event p{font-size:9.5px}
}


/* =========================================================
   V10 NAV PREVIEW - ISOLATED CLASS, REAL SLIDE FROM BEHIND
   ========================================================= */
.nav-preview-v10{
  position:fixed;
  z-index:490;
  bottom:58px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,120px) scale(.94);
  visibility:hidden;
  will-change:transform,opacity;
}
.nav-preview-v10.show{
  visibility:visible;
  pointer-events:auto;
  animation:v10SlideFromBehind .72s cubic-bezier(.16,1.22,.28,1) both;
}
.nav-preview-v10.hidden{
  display:none !important;
}
.nav-preview-v10 button{
  width:100%;
  height:108px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--preview);
  box-shadow:0 15px 36px #211a402b;
  overflow:hidden;
  display:block;
}
.nav-preview-v10 .nav-mini{
  width:100%;
  height:100%;
  padding:0;
  border-radius:10px;
  background:var(--bg);
  overflow:hidden;
  position:relative;
}
@keyframes v10SlideFromBehind{
  0%{
    opacity:0;
    transform:translate(-50%,120px) scale(.94);
  }
  22%{
    opacity:.2;
  }
  58%{
    opacity:1;
    transform:translate(-50%,-12px) scale(1.025);
  }
  76%{
    transform:translate(-50%,5px) scale(.992);
  }
  88%{
    transform:translate(-50%,-3px) scale(1.007);
  }
  100%{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
}

/* Bottom nav stays physically above the sliding preview */
.bottom-nav{
  z-index:500 !important;
}

/* =========================================================
   V10 TOP HEADER PROFILE + BELL
   ========================================================= */
.top-actions{
  gap:10px !important;
  align-items:center;
}

/* Profile image: larger, pure circle, absolutely no ring/border */
.avatar-button{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:50% !important;
  overflow:hidden !important;
  padding:0 !important;
}
.avatar-button img,
#headerAvatar{
  width:46px !important;
  height:46px !important;
  display:block !important;
  border-radius:50% !important;
  object-fit:cover !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  margin:0 !important;
}

/* Bell: transparent, no box */
#bellButton.icon-btn,
#bellButton{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
}
#bellIcon{
  display:grid;
  place-items:center;
  font-size:22px !important;
  line-height:1;
  transform-origin:50% 8%;
}
#bellIcon img{
  width:24px !important;
  height:24px !important;
  object-fit:contain;
}

/* Ring only when there are unread notifications */
#bellButton.has-unread #bellIcon{
  animation:v10BellRing 1.45s ease-in-out infinite;
}
@keyframes v10BellRing{
  0%,45%,100%{transform:rotate(0deg)}
  5%{transform:rotate(18deg)}
  10%{transform:rotate(-15deg)}
  15%{transform:rotate(13deg)}
  20%{transform:rotate(-10deg)}
  25%{transform:rotate(7deg)}
  30%{transform:rotate(-4deg)}
  35%{transform:rotate(2deg)}
  40%{transform:rotate(0deg)}
}

@media(max-width:700px){
  .nav-preview-v10{
    bottom:56px;
  }
  .avatar-button,
  .avatar-button img,
  #headerAvatar{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
  }
}


/* =========================================================
   V11 - ONLY TWO POLISH CHANGES
   ========================================================= */

/* Raise the small nav preview a little higher above the bottom header */
.nav-preview-v10{
  bottom:70px !important;
}
@media(max-width:700px){
  .nav-preview-v10{
    bottom:68px !important;
  }
}

/* Header profile: slightly larger and absolutely no visible ring/border */
#profileButton,
.avatar-button,
#profileButton.avatar-button,
#profileButton button,
#profileButton span,
.header-avatar-wrap{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

#profileButton,
.avatar-button,
#profileButton.avatar-button{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  padding:0 !important;
  border-radius:50% !important;
  overflow:hidden !important;
}

#headerAvatar,
#profileButton img,
.avatar-button img{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:50% !important;
  padding:0 !important;
  margin:0 !important;
}

/* Kill any pseudo-element ring that may have been creating the dark edge */
#profileButton::before,
#profileButton::after,
.avatar-button::before,
.avatar-button::after,
.header-avatar-wrap::before,
.header-avatar-wrap::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  box-shadow:none !important;
}

@media(max-width:700px){
  #profileButton,
  .avatar-button,
  #profileButton.avatar-button,
  #headerAvatar,
  #profileButton img,
  .avatar-button img{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }
}


/* ===== V12 MY PAGE MINI PREVIEW ===== */
.mini-profile-real{
  text-align:center;
  display:grid;
  justify-items:center;
  gap:5px;
}
.mini-profile-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
}
.mini-profile-real>b{
  font-size:11px;
}
.mini-profile-real>small{
  font-size:7.5px;
  color:var(--muted);
}
.mini-profile-stats{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:3px;
}
.mini-profile-stats span{
  min-height:30px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  display:grid;
  place-items:center;
}
.mini-profile-stats b{
  font-size:9px;
}
.mini-profile-stats small{
  font-size:6.5px;
  color:var(--muted);
}
.mini-profile-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  margin-top:2px;
}
.mini-profile-grid i{
  height:36px;
  border-radius:6px;
  background:var(--scope-active);
  border:1px solid var(--line);
}


/* ===== V13 BIRTHDAY HISTORY ===== */
#home-birthday-history{
  overflow:hidden;
}
#birthdayHistoryDate{
  color:var(--text) !important;
  font-size:9px !important;
  font-weight:700;
}
.birthday-event-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:3px;
}
.birthday-event-meta b{
  margin:0 !important;
}
.birthday-event-meta span{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:2px 6px;
  border-radius:999px;
  background:var(--scope-active);
  color:var(--accent);
  font-size:7.5px;
  font-weight:800;
}


/* ===== V14 HISTORY TOGGLE INSIDE SAME CARD ===== */
.history-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:2px 0 10px;
  padding:3px;
  background:var(--scope-active);
  border:1px solid var(--line);
  border-radius:12px;
}
.history-mode{
  min-height:32px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  padding:5px 8px;
}
.history-mode.active{
  background:var(--card);
  color:var(--text);
  box-shadow:0 3px 10px #211a4010;
}


/* =========================================================
   V15 HEADER PROFILE - ACTUAL #accountButton
   No ring, no focus edge, slightly larger.
   Image itself is square and clipped by the button so there is
   no circular image-border edge.
   ========================================================= */
#accountButton,
#accountButton.avatar-button,
#accountButton:hover,
#accountButton:active,
#accountButton:focus,
#accountButton:focus-visible{
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  min-height:54px !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:none !important;
  background-color:transparent !important;
  border-radius:50% !important;
  overflow:hidden !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

#accountButton::before,
#accountButton::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

#accountButton #headerAvatar{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  max-width:none !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:-2px !important;
  transform:none !important;
  filter:none !important;
}

@media(max-width:700px){
  #accountButton,
  #accountButton.avatar-button,
  #accountButton:hover,
  #accountButton:active,
  #accountButton:focus,
  #accountButton:focus-visible{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
  }

  #accountButton #headerAvatar{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
  }
}


/* =========================================================
   V15 HISTORY EVENT DETAIL
   ========================================================= */
.history-event-button{
  width:100%;
  color:var(--text);
  font-family:var(--app-font);
  text-align:inherit;
  cursor:pointer;
}
.history-event-button.is-clickable{
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.history-event-button.is-clickable:active{
  transform:scale(.985);
}
.history-event-button.is-static{
  cursor:default;
}
.history-more{
  display:block;
  margin-top:5px;
  color:var(--accent);
  font-size:8px;
  font-weight:800;
}
.history-detail-page{
  position:fixed;
  inset:0;
  z-index:900;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}
.history-detail-page.detail-in{
  animation:historyDetailIn .22s ease-out both;
}
@keyframes historyDetailIn{
  from{opacity:0;transform:translateX(12px)}
  to{opacity:1;transform:translateX(0)}
}
.history-detail-page.swipe-out-right{
  animation:historySwipeRight .21s ease-in both;
}
.history-detail-page.swipe-out-left{
  animation:historySwipeLeft .21s ease-in both;
}
@keyframes historySwipeRight{
  to{opacity:0;transform:translateX(100%)}
}
@keyframes historySwipeLeft{
  to{opacity:0;transform:translateX(-100%)}
}
.history-detail-inner{
  width:min(100%,860px);
  height:100dvh;
  margin:auto;
  background:var(--bg);
  display:grid;
  grid-template-rows:58px 1fr;
}
.history-detail-top{
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:0 8px;
  position:relative;
  z-index:2;
}
.history-detail-top>b{
  text-align:center;
  font-size:13px;
}
.history-detail-back{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:30px;
  line-height:1;
  border-radius:50%;
}
.history-detail-scroll{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.history-detail-hero{
  width:100%;
  max-height:390px;
  background:var(--card);
  overflow:hidden;
}
.history-detail-hero img{
  width:100%;
  max-height:390px;
  display:block;
  object-fit:cover;
}
.history-detail-content{
  padding:18px 16px 22px;
}
.history-detail-meta{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
}
.history-detail-meta span{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  background:var(--scope-active);
  color:var(--accent);
  font-size:9px;
  font-weight:800;
}
.history-detail-content h1{
  margin:0 0 14px;
  font-size:23px;
  line-height:1.55;
}
.history-detail-loading{
  color:var(--muted);
  font-size:11px;
  margin-bottom:8px;
}
.history-detail-text{
  white-space:pre-line;
  font-size:13px;
  line-height:2;
  color:var(--text);
}
.history-detail-source{
  display:inline-flex;
  margin-top:18px;
  padding:9px 12px;
  border-radius:10px;
  background:var(--scope-active);
  color:var(--accent);
  text-decoration:none;
  font-size:10px;
  font-weight:800;
}
.history-swipe-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 12px 20px;
  color:var(--muted);
}
.history-swipe-hint span{
  font-size:18px;
}
.history-swipe-hint small{
  font-size:8px;
}
body.history-detail-open{
  overflow:hidden;
}

@media(max-width:700px){
  .history-detail-content{
    padding:15px 13px 20px;
  }
  .history-detail-content h1{
    font-size:19px;
  }
  .history-detail-text{
    font-size:12px;
    line-height:1.9;
  }
  .history-detail-hero,
  .history-detail-hero img{
    max-height:320px;
  }
}


/* =========================================================
   V16 HEADER AVATAR - REMOVE EMBEDDED BLACK JPEG RING
   Old avatars were saved with a black exterior outside 43%.
   clip-path at 41.5% safely cuts INSIDE the old black edge.
   New avatars also display correctly because circular display is CSS-only.
   ========================================================= */
#accountButton,
#accountButton.avatar-button,
#accountButton:hover,
#accountButton:active,
#accountButton:focus,
#accountButton:focus-visible{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

#accountButton::before,
#accountButton::after{
  content:none !important;
  display:none !important;
}

#accountButton #headerAvatar{
  width:66px !important;
  height:66px !important;
  min-width:66px !important;
  min-height:66px !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
  clip-path:circle(41.5% at 50% 50%) !important;
  -webkit-clip-path:circle(41.5% at 50% 50%) !important;
  margin:-4px !important;
  padding:0 !important;
}

@media(max-width:700px){
  #accountButton,
  #accountButton.avatar-button,
  #accountButton:hover,
  #accountButton:active,
  #accountButton:focus,
  #accountButton:focus-visible{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
  }

  #accountButton #headerAvatar{
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
    min-height:64px !important;
  }
}


/* =========================================================
   V17 NO AUTH/REGISTER FLASH ON REFRESH
   ========================================================= */
.boot-hidden{
  visibility:hidden !important;
}

.boot-screen{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  align-content:center;
  gap:14px;
  background:var(--bg,#f7f6fb);
  color:var(--text,#17171c);
  opacity:1;
  transition:opacity .16s ease;
}

.boot-screen.boot-done{
  opacity:0;
  pointer-events:none;
}

.boot-logo{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:var(--accent,#7568e8);
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 10px 28px rgba(70,55,160,.16);
}

.boot-spinner{
  width:22px;
  height:22px;
  border:2px solid rgba(117,104,232,.18);
  border-top-color:var(--accent,#7568e8);
  border-radius:50%;
  animation:bootSpin .72s linear infinite;
}

@keyframes bootSpin{
  to{transform:rotate(360deg)}
}


/* =========================================================
   V18 PROFILE PRIVACY
   ========================================================= */
.profile-privacy-box{
  display:grid;
  gap:7px;
  margin:4px 0 12px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card);
}

.profile-privacy-head{
  display:grid;
  gap:2px;
  margin-bottom:2px;
}
.profile-privacy-head b{
  font-size:11px;
}
.profile-privacy-head small{
  font-size:8px;
  color:var(--muted);
}

.privacy-toggle-row{
  min-height:48px;
  display:grid;
  grid-template-columns:1fr 38px;
  gap:10px;
  align-items:center;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  cursor:pointer;
  position:relative;
}
.privacy-toggle-row>span{
  display:grid;
  gap:2px;
}
.privacy-toggle-row>span b{
  font-size:9.5px;
}
.privacy-toggle-row>span small{
  font-size:7.5px;
  color:var(--muted);
}
.privacy-toggle-row input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.privacy-toggle-row i{
  width:36px;
  height:20px;
  border-radius:999px;
  background:var(--line);
  position:relative;
  transition:.18s ease;
}
.privacy-toggle-row i::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  top:2px;
  left:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 7px #0002;
  transition:.18s ease;
}
html[dir="rtl"] .privacy-toggle-row i::after{
  left:auto;
  right:2px;
}
.privacy-toggle-row input:checked+i{
  background:var(--accent);
}
.privacy-toggle-row input:checked+i::after{
  transform:translateX(16px);
}
html[dir="rtl"] .privacy-toggle-row input:checked+i::after{
  transform:translateX(-16px);
}

.profile-private-details{
  display:flex;
  flex-wrap:wrap;
  gap:5px 8px;
  margin-top:5px;
}
.profile-private-details span{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border-radius:8px;
  background:var(--scope-active);
  color:var(--text);
  font-size:8px;
}


/* =========================================================
   V19 VOICE RECORDING FEEDBACK
   ========================================================= */
.voice-recording-bar{
  margin-top:7px;
  padding:10px 11px 9px;
  border:1px solid rgba(235,67,86,.22);
  border-radius:14px;
  background:rgba(235,67,86,.07);
  display:grid;
  gap:7px;
  overflow:hidden;
  animation:voiceBarIn .2s ease-out both;
}
@keyframes voiceBarIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.voice-recording-status{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.voice-recording-status b{
  font-size:10px;
  font-weight:900;
  color:var(--text);
}
.voice-recording-status strong{
  margin-inline-start:auto;
  min-width:42px;
  font-family:var(--app-font);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:#e53e55;
}

.voice-live-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#eb4356;
  box-shadow:0 0 0 0 rgba(235,67,86,.48);
  animation:voiceDotPulse 1.05s infinite;
}
@keyframes voiceDotPulse{
  0%{box-shadow:0 0 0 0 rgba(235,67,86,.5);opacity:1}
  70%{box-shadow:0 0 0 7px rgba(235,67,86,0);opacity:.72}
  100%{box-shadow:0 0 0 0 rgba(235,67,86,0);opacity:1}
}

.voice-wave{
  height:22px;
  display:flex;
  align-items:center;
  gap:3px;
  overflow:hidden;
}
.voice-wave i{
  width:3px;
  height:7px;
  flex:1 1 3px;
  max-width:5px;
  border-radius:999px;
  background:#eb4356;
  opacity:.75;
  transform-origin:center;
  animation:voiceWave .76s ease-in-out infinite alternate;
}
.voice-wave i:nth-child(2n){animation-delay:-.18s}
.voice-wave i:nth-child(3n){animation-delay:-.36s}
.voice-wave i:nth-child(4n){animation-delay:-.54s}
.voice-wave i:nth-child(5n){animation-delay:-.09s}
@keyframes voiceWave{
  from{height:5px;opacity:.45}
  to{height:21px;opacity:.95}
}

.voice-progress-track{
  height:4px;
  border-radius:999px;
  background:rgba(235,67,86,.14);
  overflow:hidden;
}
.voice-progress-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#eb4356;
  transition:width .1s linear;
}

.voice-recording-bar>small{
  color:var(--muted);
  font-size:7.5px;
}

#chatVoiceButton.voice-button{
  position:relative;
  transition:transform .15s ease,background .15s ease,color .15s ease;
}
#chatVoiceButton.is-recording{
  background:#eb4356 !important;
  color:#fff !important;
  border-radius:50% !important;
  animation:voiceMicPulse .95s ease-in-out infinite;
}
#chatVoiceButton.is-recording::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(235,67,86,.25);
  animation:voiceMicRing .95s ease-out infinite;
}
@keyframes voiceMicPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(.93)}
}
@keyframes voiceMicRing{
  from{transform:scale(.84);opacity:.85}
  to{transform:scale(1.18);opacity:0}
}

.voice-recording-bar.is-sending{
  border-color:rgba(117,104,232,.22);
  background:rgba(117,104,232,.07);
}
.voice-recording-bar.is-sending .voice-live-dot,
.voice-recording-bar.is-sending .voice-wave i,
.voice-recording-bar.is-sending .voice-progress-track span{
  background:var(--accent);
}
.voice-recording-bar.is-sending .voice-live-dot{
  animation:none;
  box-shadow:none;
}
.voice-recording-bar.is-sending .voice-wave i{
  animation-duration:.4s;
}
.voice-recording-bar.is-sending .voice-recording-status strong{
  color:var(--accent);
}

@media(max-width:700px){
  .voice-recording-bar{
    margin-top:5px;
    padding:9px 9px 8px;
  }
  .voice-wave{
    height:18px;
  }
  @keyframes voiceWave{
    from{height:4px;opacity:.45}
    to{height:17px;opacity:.95}
  }
}


/* =========================================================
   V20 INSTAGRAM-LIKE PHOTO POSTS
   ========================================================= */
.post-viewer-owner{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:8px;
  align-items:center;
  padding:2px 0 9px;
  border-bottom:1px solid var(--line);
}
.post-viewer-owner>img{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
}
.post-viewer-owner>div{
  min-width:0;
}
.post-viewer-owner b{
  display:block;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.post-viewer-owner small{
  display:block;
  margin-top:1px;
  color:var(--muted);
  font-size:7px;
}
.post-edit-button{
  min-height:30px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--card);
  color:var(--accent);
  font-size:8px;
  font-weight:900;
}

.post-caption{
  padding:10px 2px 11px;
  border-bottom:1px solid var(--line);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:10px;
  line-height:1.75;
}

.post-editor-card{
  width:min(94vw,520px);
}
.post-editor-preview-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:15px;
  overflow:hidden;
  background:var(--scope-active);
  border:1px solid var(--line);
}
.post-editor-preview-wrap>img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.post-change-image{
  position:absolute;
  inset-inline-end:9px;
  bottom:9px;
  min-height:32px;
  padding:6px 10px;
  border:0;
  border-radius:10px;
  background:rgba(20,20,26,.74);
  color:#fff;
  backdrop-filter:blur(8px);
  font-size:8px;
  font-weight:900;
}
.post-caption-field{
  display:grid;
  gap:6px;
  margin-top:12px;
}
.post-caption-field>span{
  font-size:9px;
  font-weight:900;
}
.post-caption-field textarea{
  width:100%;
  min-height:92px;
  resize:vertical;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  font-family:var(--app-font);
  font-size:10px;
  line-height:1.65;
  outline:0;
}
.post-caption-field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
.post-caption-field>small{
  justify-self:end;
  color:var(--muted);
  font-size:7px;
}
.post-editor-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

@media(max-width:700px){
  .post-editor-card{
    width:min(96vw,520px);
  }
  .post-caption{
    font-size:9.5px;
  }
}


/* ===== V21 POST VIEWER FIT + COMMENTS ===== */
.photo-card{
  width:min(96vw,980px) !important;
  max-height:min(90dvh,760px) !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr) !important;
  border-radius:18px !important;
}
.photo-image{
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:min(78dvh,720px) !important;
  overflow:hidden !important;
  background:#0f0f12 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.photo-image img,#photoImage{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.photo-side{
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:min(78dvh,720px) !important;
  padding:10px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  background:var(--card) !important;
}
#commentsList{
  flex:1 1 auto !important;
  min-height:80px !important;
  overflow-y:auto !important;
  margin:7px 0 !important;
}
.comment-composer{
  flex:0 0 auto !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) auto !important;
  gap:7px !important;
  align-items:center !important;
  padding:8px 0 0 !important;
  margin-top:auto !important;
  border-top:1px solid var(--line) !important;
  background:var(--card) !important;
}
#commentInput{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  padding:0 11px !important;
  border:1px solid var(--line) !important;
  border-radius:11px !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--app-font) !important;
  outline:none !important;
}
#commentEmojiButton{width:38px !important;height:38px !important}
#commentSendButton{min-width:58px !important;height:38px !important;padding:0 11px !important}

@media(max-width:760px){
  .photo-card{
    width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    grid-template-columns:1fr !important;
    grid-template-rows:45dvh minmax(0,55dvh) !important;
  }
  .photo-image{height:45dvh !important;min-height:0 !important}
  .photo-side{height:55dvh !important;min-height:0 !important}
}


/* ===== V21 PUBLIC / PRIVATE SIDE-BY-SIDE ===== */
.profile-privacy-segment{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--scope-active);
}
.profile-privacy-segment button{
  min-height:39px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 8px;
  font-family:var(--app-font);
  font-size:9px;
  font-weight:900;
  transition:.16s ease;
}
.profile-privacy-segment button:active{transform:scale(.98)}
.profile-privacy-segment button.active{
  background:var(--card);
  color:var(--text);
  box-shadow:0 4px 13px #211a4011;
}
.profile-privacy-segment button[data-privacy="private"].active{color:var(--accent)}


/* =========================================================
   V22 POST RATIO PICKER
   ========================================================= */
.post-editor-preview-wrap{
  height:auto !important;
  max-height:none !important;
  transition:aspect-ratio .18s ease;
}
.post-editor-preview-wrap.aspect-square{aspect-ratio:1/1 !important}
.post-editor-preview-wrap.aspect-portrait{aspect-ratio:4/5 !important}
.post-editor-preview-wrap.aspect-landscape{aspect-ratio:1.91/1 !important}
.post-editor-preview-wrap>img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.post-aspect-picker{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:9px;
}
.post-aspect-picker button{
  min-height:48px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--muted);
  display:grid;
  grid-template-columns:24px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:5px;
  padding:7px 8px;
  text-align:start;
}
.post-aspect-picker button>span{grid-row:1/3;font-size:21px;line-height:1;color:var(--text)}
.post-aspect-picker button>b{font-size:9px;color:var(--text)}
.post-aspect-picker button>small{font-size:7px;color:var(--muted)}
.post-aspect-picker button.active{
  border-color:var(--accent);
  background:var(--scope-active);
}
.post-aspect-picker button.active>span,
.post-aspect-picker button.active>b{color:var(--accent)}

/* Selected post ratio controls viewer, no black side bars */
.photo-image.aspect-square{aspect-ratio:1/1 !important}
.photo-image.aspect-portrait{aspect-ratio:4/5 !important}
.photo-image.aspect-landscape{aspect-ratio:1.91/1 !important}
.photo-image.aspect-square,
.photo-image.aspect-portrait,
.photo-image.aspect-landscape{
  height:auto !important;
  max-height:78dvh !important;
  background:var(--card) !important;
}
.photo-image.aspect-square img,
.photo-image.aspect-portrait img,
.photo-image.aspect-landscape img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* =========================================================
   V22 PRIVACY BOXES FULL-WIDTH / LARGE
   ========================================================= */
.profile-privacy-segment{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  margin-top:6px !important;
}
.profile-privacy-segment button{
  min-height:64px !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:var(--card) !important;
  display:grid !important;
  grid-template-columns:34px 1fr !important;
  align-items:center !important;
  justify-content:stretch !important;
  text-align:start !important;
  padding:10px 12px !important;
  box-shadow:none !important;
}
.profile-privacy-segment button>span{font-size:25px !important}
.profile-privacy-segment button>b{font-size:10px !important}
.profile-privacy-segment button.active{
  border-color:var(--accent) !important;
  background:var(--scope-active) !important;
  color:var(--accent) !important;
}

/* =========================================================
   V22 RICH COMMENTS: EMOJI + IMAGE + VOICE
   ========================================================= */
.rich-comment-composer{
  grid-template-columns:36px 36px 36px minmax(0,1fr) auto !important;
  gap:6px !important;
}
#commentImageButton,#commentVoiceButton{
  width:36px !important;
  height:36px !important;
}
.comment-voice-bar{
  margin:7px 0 0 !important;
}
.comment-image-media{
  display:block;
  width:min(100%,260px);
  max-height:260px;
  object-fit:contain;
  margin-top:6px;
  border-radius:10px;
  background:var(--scope-active);
}
.comment-audio-media{
  width:min(100%,260px);
  height:36px;
  margin-top:6px;
}
.comment>span>p{
  margin:4px 0 0;
  white-space:pre-wrap;
  line-height:1.55;
}

@media(max-width:700px){
  .post-aspect-picker button{
    min-height:44px;
    padding:6px;
  }
  .rich-comment-composer{
    grid-template-columns:34px 34px 34px minmax(0,1fr) auto !important;
    gap:4px !important;
  }
}


/* =========================================================
   V23 INSTAGRAM-STYLE REAL CROP
   ========================================================= */
.post-editor-preview-wrap{
  position:relative !important;
  overflow:hidden !important;
  background:#111 !important;
}
.post-crop-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  touch-action:none;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.post-crop-stage.dragging{cursor:grabbing}
.post-crop-stage #postEditorPreview{
  position:absolute !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:fill !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}
.post-crop-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
}
.post-crop-grid i{position:absolute;background:rgba(255,255,255,.55)}
.post-crop-grid i:nth-child(1),.post-crop-grid i:nth-child(2){top:0;bottom:0;width:1px}
.post-crop-grid i:nth-child(1){left:33.333%}.post-crop-grid i:nth-child(2){left:66.666%}
.post-crop-grid i:nth-child(3),.post-crop-grid i:nth-child(4){left:0;right:0;height:1px}
.post-crop-grid i:nth-child(3){top:33.333%}.post-crop-grid i:nth-child(4){top:66.666%}
.post-crop-controls{
  display:grid;
  gap:5px;
  margin-top:8px;
}
.post-zoom-control{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 48px;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
}
.post-zoom-control input{width:100%;accent-color:var(--accent)}
.post-zoom-control b{font-size:8px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.post-crop-controls>small{text-align:center;color:var(--muted);font-size:7.5px}

/* Cropped file already has exact aspect, so viewer fills without black side bars */
.photo-image.aspect-square img,
.photo-image.aspect-portrait img,
.photo-image.aspect-landscape img{
  object-fit:cover !important;
  background:var(--card) !important;
}

/* =========================================================
   V23 PRIVACY = SAME BOXES AS PHOTOS / FRIENDS
   ========================================================= */
.owner-tools .profile-privacy-segment.profile-stats{
  grid-column:1/-1 !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;
  margin-top:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.owner-tools .profile-privacy-segment.profile-stats button{
  min-height:0 !important;
  display:block !important;
  border:1px solid var(--line) !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  border-radius:12px !important;
  padding:8px !important;
  text-align:center !important;
  box-shadow:none !important;
}
.owner-tools .profile-privacy-segment.profile-stats button b{
  display:block !important;
  font-size:14px !important;
  line-height:1.2 !important;
  margin-bottom:2px !important;
}
.owner-tools .profile-privacy-segment.profile-stats button span{
  display:block !important;
  font-size:9px !important;
}
.owner-tools .profile-privacy-segment.profile-stats button.active{
  border-color:var(--accent) !important;
  background:var(--scope-active) !important;
  color:var(--accent) !important;
}

/* =========================================================
   V23 POST DELETE + FRIEND ACTIONS
   ========================================================= */
.post-delete-button{
  grid-column:1/-1;
  min-height:40px;
  border:1px solid rgba(220,50,70,.25);
  border-radius:11px;
  background:rgba(220,50,70,.08);
  color:#d83249;
  font-family:var(--app-font);
  font-size:9px;
  font-weight:900;
}
.danger-soft{color:#cf3348 !important;border-color:rgba(207,51,72,.2) !important}
.profile-message-action{grid-column:1/-1}

/* Voice comment should never disappear behind composer */
.comment-voice-bar{position:relative;z-index:5}
.comment-audio-media{display:block !important;min-width:220px;max-width:100%}


/* =========================================================
   V24 POST VIEWER - USE THE ACTUAL CROPPED IMAGE RATIO
   The uploaded file itself already has the selected ratio.
   ========================================================= */
#photoModal .photo-card{
  align-items:start !important;
  overflow:auto !important;
}

#photoModal .photo-image,
#photoModal .photo-image.aspect-square,
#photoModal .photo-image.aspect-portrait,
#photoModal .photo-image.aspect-landscape{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  display:block !important;
  background:var(--card) !important;
}

#photoModal #photoImage,
#photoModal .photo-image.aspect-square #photoImage,
#photoModal .photo-image.aspect-portrait #photoImage,
#photoModal .photo-image.aspect-landscape #photoImage{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

@media(max-width:760px){
  #photoModal .photo-card{
    width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    display:block !important;
    overflow-y:auto !important;
    border-radius:0 !important;
  }

  #photoModal .photo-image,
  #photoModal .photo-image.aspect-square,
  #photoModal .photo-image.aspect-portrait,
  #photoModal .photo-image.aspect-landscape{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
  }

  #photoModal #photoImage{
    width:100% !important;
    height:auto !important;
  }

  #photoModal .photo-side{
    width:100% !important;
    height:auto !important;
    min-height:48dvh !important;
    overflow:visible !important;
  }
}


/* V24 smoother live message appearance */
#messages .message{
  animation:v24MessageIn .18s ease-out both;
}
@keyframes v24MessageIn{
  from{opacity:.55;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}


/* =========================================================
   V25 LIVE POST COMMENTS + NEW-ONLY NOTIFICATIONS
   ========================================================= */
#commentsList .comment{
  animation:v25CommentIn .18s ease-out both;
}
@keyframes v25CommentIn{
  from{opacity:.55;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}

#liveNotification{
  cursor:pointer;
}
.notification-row.unread{
  cursor:pointer;
}


/* =========================================================
   V26 FIFTH BOTTOM NAV + GENERATION SEARCH
   ========================================================= */
.bottom-nav{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.bottom-nav .nav-item{
  min-width:0 !important;
}
.bottom-nav .nav-label{
  font-size:8px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.generation-search-page{
  position:fixed;
  inset:0;
  z-index:440;
  background:var(--bg);
  overflow-y:auto;
  padding:12px 12px 92px;
}
.generation-search-inner{
  width:min(100%,760px);
  margin:auto;
  display:grid;
  gap:12px;
}
.generation-search-top{
  display:grid;
  grid-template-columns:38px 1fr 34px;
  gap:9px;
  align-items:center;
}
.generation-search-top h2{
  margin:0;
  font-size:16px;
}
.generation-search-top p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:8.5px;
}
.generation-search-top>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--icon);
}
.generation-pills{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.generation-pills button{
  min-height:68px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card);
  color:var(--text);
  display:grid;
  align-content:center;
  place-items:center;
  gap:2px;
  padding:8px;
  font-family:var(--app-font);
  transition:.16s ease;
}
.generation-pills button b{
  font-size:17px;
  line-height:1;
  color:var(--accent);
}
.generation-pills button span{
  font-size:8px;
  color:var(--muted);
}
.generation-pills button.active{
  border-color:var(--accent);
  background:var(--scope-active);
  transform:translateY(-1px);
}
.generation-name-search{
  min-height:48px;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:6px;
  align-items:center;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
}
.generation-name-search>span{
  font-size:20px;
  color:var(--accent);
}
.generation-name-search input{
  width:100%;
  height:36px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-family:var(--app-font);
  font-size:10px;
}
.generation-results-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:2px;
}
.generation-results-title b{font-size:11px}
.generation-results-title span{font-size:9px;color:var(--muted)}
.generation-results{
  display:grid;
  gap:7px;
}
.generation-person{
  width:100%;
  min-height:64px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 20px;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  color:var(--text);
  text-align:start;
  font-family:var(--app-font);
}
.generation-person img{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}
.generation-person>span{min-width:0}
.generation-person>span>b{
  display:block;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.generation-person>span>small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.generation-person>i{
  font-style:normal;
  color:var(--muted);
  font-size:20px;
}
.generation-empty,.generation-loading{
  min-height:160px;
  display:grid;
  place-items:center;
  padding:20px;
  border:1px dashed var(--line);
  border-radius:15px;
  color:var(--muted);
  font-size:9px;
  text-align:center;
}

.mini-generation-real{
  display:grid;
  gap:5px;
}
.mini-generation-real>small{
  font-size:6.5px;
  color:var(--muted);
}
.mini-generation-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
}
.mini-generation-grid i{
  min-height:22px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:var(--scope-active);
  color:var(--accent);
  font-style:normal;
  font-size:6.5px;
  font-weight:900;
}
.mini-generation-person{
  min-height:24px;
  display:grid;
  grid-template-columns:18px 1fr;
  gap:4px;
  align-items:center;
}
.mini-generation-person span{
  width:18px;height:18px;border-radius:50%;background:var(--icon);
}
.mini-generation-person b{
  font-size:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:520px){
  .generation-search-page{padding:9px 9px 88px}
  .generation-pills button{min-height:61px}
  .bottom-nav{gap:3px !important;padding-inline:4px !important}
  .bottom-nav .nav-item{padding-inline:2px !important}
  .bottom-nav .nav-label{font-size:7px !important}
  .bottom-nav .nav-icon{font-size:17px !important}
}


/* =========================================================
   V27 BOTTOM NAV
   صفحتي | الدردشة | + | بحث | اكتشف
   ========================================================= */
.bottom-nav{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  overflow:visible !important;
}

.bottom-nav .nav-create{
  position:relative !important;
  overflow:visible !important;
  z-index:6 !important;
}

.nav-create-circle{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  margin:-24px auto 2px;
  border-radius:18px;
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 26px rgba(83,66,200,.28),0 0 0 5px var(--bg);
  transition:transform .15s ease,box-shadow .15s ease;
}

.nav-create-circle>span{
  display:block;
  font-size:32px;
  line-height:1;
  font-weight:400;
  transform:translateY(-1px);
}

.nav-create:active .nav-create-circle{
  transform:scale(.92);
  box-shadow:0 5px 16px rgba(83,66,200,.22),0 0 0 5px var(--bg);
}

.nav-create-label{
  font-size:7px !important;
  color:var(--text) !important;
}

@media(max-width:520px){
  .nav-create-circle{
    width:52px;
    height:52px;
    margin-top:-22px;
    border-radius:17px;
  }
  .nav-create-circle>span{
    font-size:30px;
  }
}

/* =========================================================
   QUICK CREATE POST
   ========================================================= */
.quick-create-card{
  width:min(92vw,430px);
  padding-top:8px;
}

.quick-create-handle{
  width:42px;
  height:4px;
  border-radius:999px;
  background:var(--line);
  margin:0 auto 9px;
}

.quick-create-card .modal-head h3{
  margin:0;
}

.quick-create-card .modal-head small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
}

.quick-create-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:11px;
}

.quick-create-options button{
  min-height:124px;
  padding:13px 9px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--card);
  color:var(--text);
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  font-family:var(--app-font);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}

.quick-create-options button:first-child{
  background:var(--scope-active);
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
}

.quick-create-options button:active{
  transform:scale(.97);
}

.quick-create-options button>span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--bg);
  font-size:25px;
}

.quick-create-options button>b{
  font-size:10px;
}

.quick-create-options button>small{
  max-width:125px;
  color:var(--muted);
  font-size:7.3px;
  line-height:1.45;
}

/* miniature page for the same existing Slide-Up behavior */
.mini-create-preview .mini-create-photo{
  min-height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--scope-active);
  font-size:18px;
}

.mini-create-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin-top:4px;
}

.mini-create-actions i{
  min-height:21px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:var(--icon);
  font-style:normal;
  font-size:9px;
}

.mini-create-preview small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:6.5px;
}


/* =========================================================
   V28 ANIMATED GIF AVATARS
   GIF files are never flattened through canvas/JPEG.
   Browser-native <img> playback keeps the animation running.
   ========================================================= */
#registerAvatarPreview,
#settingsAvatarPreview,
#headerAvatar,
#profileAvatar,
.avatar-button img,
.profile-avatar,
.online-user img,
.generation-person img,
.comment img,
.post-viewer-owner img{
  image-rendering:auto;
}


/* =========================================================
   V29 COMMUNITY EXPLORE
   Bottom nav: My Page | Community | + | Search | Discover
   ========================================================= */
.bottom-chat-compat{display:none !important}

.community-explore-page{
  position:fixed;
  inset:0;
  z-index:440;
  background:var(--bg);
  overflow-y:auto;
  padding:18px 12px 94px;
}
.community-explore-inner{
  width:min(100%,820px);
  margin:0 auto;
  display:grid;
  gap:17px;
}
.community-explore-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.community-explore-head>div{min-width:0}
.community-kicker{
  display:inline-grid;
  place-items:center;
  width:27px;height:27px;
  border-radius:9px;
  background:var(--scope-active);
  color:var(--accent);
  margin-bottom:6px;
}
.community-explore-head h2{margin:0;font-size:20px}
.community-explore-head p{margin:3px 0 0;color:var(--muted);font-size:9px}
.community-shuffle{
  min-width:72px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--card);
  color:var(--text);
  font-family:var(--app-font);
}
.community-shuffle span{font-size:18px;color:var(--accent)}
.community-shuffle b{font-size:8px}
.community-section-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.community-section-head b{font-size:11px}.community-section-head span{font-size:9px;color:var(--muted)}

.community-featured-section,.community-grid-section{display:grid;gap:8px}
.community-featured{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:2px 1px 7px;
  scrollbar-width:none;
}
.community-featured::-webkit-scrollbar{display:none}
.community-featured-person{
  flex:0 0 78px;
  border:0;
  background:transparent;
  color:var(--text);
  display:grid;
  justify-items:center;
  gap:4px;
  font-family:var(--app-font);
  padding:0;
}
.community-featured-ring{
  width:61px;height:61px;
  padding:3px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--accent),#d6b7ff,var(--accent));
}
.community-featured-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid var(--bg)}
.community-featured-person>b{width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8.5px}
.community-featured-person>small{width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:6.5px}

.community-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:7px;
}
.community-tile{
  position:relative;
  min-height:215px;
  overflow:hidden;
  border:0;
  border-radius:17px;
  background:var(--card);
  padding:0;
  color:#fff;
  text-align:start;
  font-family:var(--app-font);
}
.community-tile.tall{min-height:292px;grid-row:span 2}
.community-tile-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--scope-active)}
.community-tile-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,10,24,.78) 0%,rgba(12,10,24,.12) 55%,rgba(12,10,24,.02) 100%)}
.community-tile-user{position:absolute;inset-inline:10px;bottom:10px;display:grid;grid-template-columns:35px minmax(0,1fr);gap:7px;align-items:center}
.community-tile-user>img{width:35px;height:35px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.8)}
.community-tile-user>i{min-width:0;font-style:normal}
.community-tile-user b,.community-tile-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.community-tile-user b{font-size:9px}.community-tile-user small{margin-top:1px;color:rgba(255,255,255,.78);font-size:6.8px}
.community-tile>em{position:absolute;top:9px;inset-inline-end:9px;padding:4px 6px;border-radius:8px;background:rgba(18,14,36,.56);backdrop-filter:blur(7px);font-style:normal;font-size:7px}
.community-loading,.community-empty{grid-column:1/-1;min-height:160px;display:grid;place-items:center;align-content:center;gap:6px;border:1px dashed var(--line);border-radius:15px;color:var(--muted);font-size:9px;text-align:center}
.community-loading span{font-size:22px;color:var(--accent);animation:communitySpin 1.2s linear infinite}
@keyframes communitySpin{to{transform:rotate(360deg)}}

.mini-community-real{display:grid;gap:5px}
.mini-community-stories{display:flex;gap:4px}
.mini-community-stories i{width:18px;height:18px;border-radius:50%;background:var(--scope-active);border:1px solid var(--accent)}
.mini-community-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;height:48px}
.mini-community-grid span{display:block;border-radius:5px;background:var(--icon)}
.mini-community-grid span.tall{grid-row:span 2;background:var(--scope-active)}
.mini-community-real small{font-size:6.3px;color:var(--muted)}

@media(min-width:760px){
  .community-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .community-tile{min-height:240px}.community-tile.tall{min-height:320px}
}
@media(max-width:480px){
  .community-explore-page{padding:13px 8px 90px}
  .community-grid{gap:5px}
  .community-tile{min-height:190px;border-radius:14px}
  .community-tile.tall{min-height:260px}
}


/* =========================================================
   V30 EXPLORER: RANDOM PUBLIC POSTS ONLY
   ========================================================= */
.community-explore-page{
  padding:18px 8px 92px !important;
}
.community-explore-inner{
  width:min(100%,980px) !important;
  gap:12px !important;
}
.community-explore-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  text-align:center;
}
.community-explore-title>span{
  color:var(--accent);
  font-size:14px;
}
.community-explore-title h2{
  margin:0;
  font-size:21px;
  letter-spacing:.2px;
}

.community-refresh-center{
  width:42px;
  height:42px;
  margin:0 auto 2px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--card);
  color:var(--accent);
  box-shadow:0 5px 16px rgba(55,45,110,.08);
}
.community-refresh-center span{
  font-size:22px;
  line-height:1;
}
.community-refresh-center.spinning span{
  animation:communitySpin .45s linear infinite;
}

.community-post-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-flow:dense;
  gap:3px !important;
}
.community-post-tile{
  min-height:0 !important;
  aspect-ratio:1/1;
  border-radius:5px !important;
  border:0 !important;
}
.community-post-tile.tall{
  aspect-ratio:4/5 !important;
  min-height:0 !important;
}
.community-post-tile.wide{
  grid-column:span 2;
  aspect-ratio:1.91/1 !important;
}
.community-post-tile .community-tile-user{
  opacity:0;
  transform:translateY(5px);
  transition:.16s ease;
}
.community-post-tile:hover .community-tile-user,
.community-post-tile:focus .community-tile-user{
  opacity:1;
  transform:none;
}
.community-post-tile .community-tile-shade{
  opacity:.32;
}

@media(max-width:650px){
  .community-explore-page{
    padding:12px 3px 88px !important;
  }
  .community-post-grid{
    gap:2px !important;
  }
  .community-post-tile{
    border-radius:3px !important;
  }
  .community-post-tile .community-tile-user{
    display:none;
  }
}

/* =========================================================
   V30 SWIPE DOWN TO DISMISS
   ========================================================= */
#photoModal,
#profilePage{
  will-change:transform,opacity;
}
#photoModal.swipe-dragging,
#profilePage.swipe-dragging{
  transition:none !important;
}
#photoModal.swipe-return,
#profilePage.swipe-return{
  transition:transform .18s ease-out,opacity .18s ease-out !important;
}
#photoModal.swipe-dismiss,
#profilePage.swipe-dismiss{
  transition:transform .18s ease-in,opacity .18s ease-in !important;
}


/* =========================================================
   V31 GLOBAL SWIPE-DOWN
   Same gesture for Profile, Explorer and Search.
   ========================================================= */
#communityExplorePage,
#generationSearchPage{
  will-change:transform,opacity;
}

#communityExplorePage.swipe-dragging,
#generationSearchPage.swipe-dragging{
  transition:none !important;
}

#communityExplorePage.swipe-return,
#generationSearchPage.swipe-return{
  transition:transform .18s ease-out,opacity .18s ease-out !important;
}

#communityExplorePage.swipe-dismiss,
#generationSearchPage.swipe-dismiss{
  transition:transform .18s ease-in,opacity .18s ease-in !important;
}


/* =========================================================
   V32 BOTTOM NAV DIRECT MODE
   Preview disabled => button reacts, page opens immediately.
   ========================================================= */
.bottom-nav .nav-item.nav-direct-feedback{
  animation:v32DirectNav .30s cubic-bezier(.18,.9,.22,1);
}

@keyframes v32DirectNav{
  0%{transform:translateY(0) scale(1)}
  34%{transform:translateY(-5px) scale(.92)}
  68%{transform:translateY(2px) scale(1.04)}
  100%{transform:translateY(0) scale(1)}
}


/* =========================================================
   V33 BOTTOM NAV WIGGLE FEEDBACK
   Visual motion on every tap, not only device vibration.
   ========================================================= */

.bottom-nav .nav-item.nav-tap-wiggle{
  animation:v33NavCellWiggle .34s cubic-bezier(.22,.75,.22,1);
  transform-origin:50% 85%;
}

.bottom-nav .nav-item .nav-icon.nav-icon-wiggle,
.bottom-nav .nav-item .nav-create-circle.nav-icon-wiggle{
  animation:v33NavIconWiggle .34s cubic-bezier(.22,.75,.22,1);
  transform-origin:50% 70%;
}

@keyframes v33NavCellWiggle{
  0%   {transform:translateX(0) translateY(0) rotate(0deg) scale(1)}
  16%  {transform:translateX(-3px) translateY(-1px) rotate(-2deg) scale(.97)}
  32%  {transform:translateX(3px) translateY(-2px) rotate(2deg) scale(1.02)}
  48%  {transform:translateX(-2px) translateY(-1px) rotate(-1.5deg) scale(.99)}
  64%  {transform:translateX(2px) translateY(0) rotate(1deg) scale(1.01)}
  82%  {transform:translateX(-1px) rotate(-.5deg)}
  100% {transform:translateX(0) translateY(0) rotate(0deg) scale(1)}
}

@keyframes v33NavIconWiggle{
  0%   {transform:rotate(0deg) scale(1)}
  18%  {transform:rotate(-10deg) scale(.9)}
  34%  {transform:rotate(9deg) scale(1.08)}
  50%  {transform:rotate(-6deg) scale(.96)}
  66%  {transform:rotate(5deg) scale(1.04)}
  82%  {transform:rotate(-2deg) scale(.99)}
  100% {transform:rotate(0deg) scale(1)}
}

/* V32's direct-only animation is intentionally overridden by V33. */
.bottom-nav .nav-item.nav-direct-feedback{
  animation:none !important;
}


/* =========================================================
   V34 STRONGER NAV TAP FEEDBACK
   Wiggle + visible upscale + settle.
   ========================================================= */
.bottom-nav .nav-item.nav-tap-wiggle{
  animation:v34NavCellPulse .42s cubic-bezier(.2,.9,.25,1) !important;
  transform-origin:50% 80%;
}

.bottom-nav .nav-item .nav-icon.nav-icon-wiggle,
.bottom-nav .nav-item .nav-create-circle.nav-icon-wiggle{
  animation:v34NavIconPulse .42s cubic-bezier(.18,.9,.22,1) !important;
  transform-origin:50% 55%;
}

@keyframes v34NavCellPulse{
  0%   {transform:translateX(0) translateY(0) scale(1)}
  16%  {transform:translateX(-2px) translateY(-1px) scale(.96)}
  32%  {transform:translateX(2px) translateY(-3px) scale(1.08)}
  48%  {transform:translateX(-1px) translateY(-1px) scale(1.03)}
  66%  {transform:translateX(1px) translateY(0) scale(1.05)}
  82%  {transform:translateX(0) translateY(0) scale(.99)}
  100% {transform:translateX(0) translateY(0) scale(1)}
}

@keyframes v34NavIconPulse{
  0%   {transform:rotate(0deg) scale(1)}
  15%  {transform:rotate(-8deg) scale(.92)}
  31%  {transform:rotate(7deg) scale(1.22)}
  47%  {transform:rotate(-5deg) scale(1.10)}
  63%  {transform:rotate(4deg) scale(1.16)}
  80%  {transform:rotate(-1deg) scale(.98)}
  100% {transform:rotate(0deg) scale(1)}
}

/* Outline icon language */
.nav-outline-icon{
  color:var(--text) !important;
  background:transparent !important;
}
.nav-outline-icon svg{
  width:23px;
  height:23px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bottom-nav .nav-item.active .nav-outline-icon{
  color:var(--accent) !important;
}
.nav-create-circle.nav-outline-icon{
  background:var(--accent) !important;
  color:#fff !important;
}
.nav-create-circle.nav-outline-icon svg{
  width:29px;
  height:29px;
  stroke-width:1.9;
}


#quickCreateModal{
  will-change:transform,opacity;
}
#quickCreateModal.swipe-dragging{
  transition:none !important;
}
#quickCreateModal.swipe-return{
  transition:transform .18s ease-out,opacity .18s ease-out !important;
}
#quickCreateModal.swipe-dismiss{
  transition:transform .18s ease-in,opacity .18s ease-in !important;
}

.close-button{
  background:transparent !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}
.close-button svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}


/* =========================================================
   V35 BOOM / POP TAP FEEDBACK
   Fast expansion -> tiny overshoot -> settle.
   ========================================================= */
.bottom-nav .nav-item.nav-tap-wiggle{
  animation:v35NavCellBoom .46s cubic-bezier(.18,.95,.22,1) !important;
  transform-origin:50% 78%;
}

.bottom-nav .nav-item .nav-icon.nav-icon-wiggle,
.bottom-nav .nav-item .nav-create-circle.nav-icon-wiggle{
  animation:v35NavIconBoom .46s cubic-bezier(.16,1.05,.22,1) !important;
  transform-origin:50% 50%;
}

@keyframes v35NavCellBoom{
  0%   {transform:translateY(0) scale(1)}
  10%  {transform:translateY(1px) scale(.95)}
  28%  {transform:translateY(-5px) scale(1.12)}
  44%  {transform:translateY(-2px) scale(1.06)}
  62%  {transform:translateY(0) scale(1.03)}
  78%  {transform:translateY(1px) scale(.99)}
  100% {transform:translateY(0) scale(1)}
}

@keyframes v35NavIconBoom{
  0%   {transform:rotate(0deg) scale(1)}
  10%  {transform:rotate(-3deg) scale(.88)}
  27%  {transform:rotate(4deg) scale(1.48)}
  41%  {transform:rotate(-2deg) scale(1.25)}
  58%  {transform:rotate(1deg) scale(1.10)}
  74%  {transform:rotate(0deg) scale(.97)}
  88%  {transform:rotate(0deg) scale(1.03)}
  100% {transform:rotate(0deg) scale(1)}
}

/* Small radial burst behind the icon for a subtle "boom" feel */
.bottom-nav .nav-item .nav-icon,
.bottom-nav .nav-item .nav-create-circle{
  position:relative;
}

.bottom-nav .nav-item.nav-tap-wiggle .nav-icon::after,
.bottom-nav .nav-item.nav-tap-wiggle .nav-create-circle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  border:1.5px solid currentColor;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  opacity:.55;
  pointer-events:none;
  animation:v35BoomRing .42s ease-out forwards;
}

@keyframes v35BoomRing{
  0%{
    transform:translate(-50%,-50%) scale(.25);
    opacity:.55;
  }
  65%{
    transform:translate(-50%,-50%) scale(2.15);
    opacity:.14;
  }
  100%{
    transform:translate(-50%,-50%) scale(2.55);
    opacity:0;
  }
}


/* =========================================================
   V35 OUTLINE NOTIFICATION BELL
   ========================================================= */
#bellButton{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.bell-outline-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  color:var(--text);
  position:relative;
}

.bell-outline-icon svg{
  width:23px;
  height:23px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#bellButton.has-unread .bell-outline-icon{
  color:var(--accent);
}

/* Existing unread ringing now acts on the clean outline icon too */
#bellButton.has-unread .bell-outline-icon{
  transform-origin:50% 14%;
}


/* =========================================================
   V36 REFINED POP
   Clear balloon-like swell: 100% -> 135% -> settle.
   ========================================================= */
.bottom-nav .nav-item.nav-tap-wiggle{
  animation:v36NavCellPop .44s cubic-bezier(.18,.95,.22,1) !important;
  transform-origin:50% 78%;
}

.bottom-nav .nav-item .nav-icon.nav-icon-wiggle,
.bottom-nav .nav-item .nav-create-circle.nav-icon-wiggle{
  animation:v36NavIconPop .44s cubic-bezier(.16,1.03,.22,1) !important;
  transform-origin:50% 50%;
}

@keyframes v36NavCellPop{
  0%   {transform:translateY(0) scale(1)}
  12%  {transform:translateY(1px) scale(.96)}
  30%  {transform:translateY(-4px) scale(1.09)}
  48%  {transform:translateY(-2px) scale(1.04)}
  68%  {transform:translateY(0) scale(1.02)}
  84%  {transform:translateY(0) scale(.995)}
  100% {transform:translateY(0) scale(1)}
}

@keyframes v36NavIconPop{
  0%   {transform:rotate(0deg) scale(1)}
  12%  {transform:rotate(-4deg) scale(.92)}
  30%  {transform:rotate(5deg) scale(1.35)}
  46%  {transform:rotate(-3deg) scale(1.18)}
  62%  {transform:rotate(2deg) scale(1.08)}
  78%  {transform:rotate(-1deg) scale(.985)}
  90%  {transform:rotate(0deg) scale(1.025)}
  100% {transform:rotate(0deg) scale(1)}
}


/* =========================================================
   V36 TOP HEADER ICON SIZE
   ========================================================= */
#bellButton{
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
}

.bell-outline-icon{
  width:28px !important;
  height:28px !important;
}

.bell-outline-icon svg{
  width:27px !important;
  height:27px !important;
}

/* Other icon-only controls in the top header, if present */
.topbar button:not(#accountButton):not(#bellButton) svg,
.app-header button:not(#accountButton):not(#bellButton) svg,
.header-actions button:not(#accountButton):not(#bellButton) svg{
  width:24px;
  height:24px;
}


/* =========================================================
   V36 UNREAD BELL ATTENTION
   A short shake every ~2.6 seconds while unread exists.
   ========================================================= */
#bellButton.has-unread .bell-outline-icon{
  animation:v36BellAttention 2.6s ease-in-out infinite !important;
  transform-origin:50% 12%;
}

@keyframes v36BellAttention{
  0%,72%,100%{
    transform:rotate(0deg) scale(1);
  }
  76%{
    transform:rotate(-13deg) scale(1.08);
  }
  80%{
    transform:rotate(11deg) scale(1.11);
  }
  84%{
    transform:rotate(-9deg) scale(1.08);
  }
  88%{
    transform:rotate(7deg) scale(1.06);
  }
  92%{
    transform:rotate(-4deg) scale(1.03);
  }
  96%{
    transform:rotate(2deg) scale(1.01);
  }
}

/* Tiny unread dot breath, if badge/dot exists */
#bellButton.has-unread #bellBadge:not(.hidden),
#bellButton.has-unread .bell-badge:not(.hidden){
  animation:v36BellBadgeBreath 1.3s ease-in-out infinite;
}

@keyframes v36BellBadgeBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.18)}
}


/* =========================================================
   V37 REAL POP FALLBACK + BURST
   Main scaling is driven directly by Web Animations API.
   ========================================================= */
.bottom-nav .nav-item.nav-boom-ring .nav-icon::after,
.bottom-nav .nav-item.nav-boom-ring .nav-create-circle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  border:1.4px solid currentColor;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);
  opacity:.48;
  pointer-events:none;
  animation:v37TapBurst .48s ease-out forwards;
}

@keyframes v37TapBurst{
  0%{transform:translate(-50%,-50%) scale(.35);opacity:.48}
  60%{transform:translate(-50%,-50%) scale(2.15);opacity:.15}
  100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}
}

/* Notification bell: unmistakable short ring every 2.5 s while unread. */
#bellButton.has-unread .bell-outline-icon{
  animation:v37BellRing 2.5s ease-in-out infinite !important;
  transform-origin:50% 8%;
  color:var(--accent) !important;
}

@keyframes v37BellRing{
  0%,68%,100%{transform:rotate(0deg) scale(1)}
  72%{transform:rotate(-15deg) scale(1.07)}
  76%{transform:rotate(13deg) scale(1.12)}
  80%{transform:rotate(-11deg) scale(1.09)}
  84%{transform:rotate(9deg) scale(1.08)}
  88%{transform:rotate(-6deg) scale(1.05)}
  92%{transform:rotate(4deg) scale(1.03)}
  96%{transform:rotate(-2deg) scale(1.01)}
}

/* Make unread badge clearly visible above the outline bell. */
#bellButton{
  position:relative !important;
}
#bellBadge:not(.hidden){
  display:grid !important;
  place-items:center !important;
  position:absolute !important;
  top:1px !important;
  inset-inline-end:0 !important;
  min-width:16px !important;
  height:16px !important;
  padding:0 4px !important;
  border-radius:999px !important;
  z-index:4 !important;
  font-size:8px !important;
  font-weight:800 !important;
}


/* =========================================================
   V38 PURE RED CIRCLE BADGES
   Applies to bell, chat and avatar/unread badges.
   ========================================================= */
.badge,
#bellBadge,
#chatUnreadBadge,
#bottomChatBadge,
.online-unread-badge,
.online-person>.badge,
.bell-badge{
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  padding:0 !important;

  border-radius:50% !important;
  background:#ff2d55 !important;
  color:#fff !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;

  display:grid;
  place-items:center;
  text-align:center;
  line-height:18px !important;
  font-size:7.5px !important;
  font-weight:800 !important;

  box-sizing:border-box !important;
}

/* Bell badge remains a true circle in its top corner */
#bellBadge:not(.hidden){
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:18px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#ff2d55 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Remove any inherited card/white rim around online unread bubbles */
.online-unread-badge,
.online-person>.badge{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Keep two-digit counts inside the circle rather than turning into a pill */
.badge,
#bellBadge,
#chatUnreadBadge,
#bottomChatBadge,
.online-unread-badge{
  overflow:hidden !important;
  white-space:nowrap !important;
}


/* =========================================================
   V39 PROFILE AVATAR - REMOVE LEGACY BLACK OUTER RING
   Same idea as the already-accepted header-avatar fix.
   ========================================================= */
#profileAvatar{
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  min-height:96px !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
  clip-path:circle(42.5% at 50% 50%) !important;
  -webkit-clip-path:circle(42.5% at 50% 50%) !important;
  margin:-6px !important;
  padding:0 !important;
}


/* =========================================================
   V39 PRIVACY STATUS
   Public has no icon. Private uses a line character only.
   ========================================================= */
#profilePublicButton{
  display:grid !important;
  place-items:center !important;
  grid-template-columns:1fr !important;
}

#profilePublicButton>b,
#profilePublicButton img,
#profilePublicButton svg{
  display:none !important;
}

#profilePublicButton>span{
  display:block !important;
  font-size:9px !important;
  line-height:1.2 !important;
}

#profilePrivateButton{
  display:grid !important;
  grid-template-columns:1fr !important;
  place-items:center !important;
  gap:2px !important;
}

#profilePrivateButton .privacy-line-symbol{
  display:block !important;
  margin:0 0 2px !important;
  font-family:Arial,sans-serif !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:400 !important;
  color:currentColor !important;
}

#profilePrivateButton>span{
  display:block !important;
  font-size:9px !important;
  line-height:1.2 !important;
}

#profilePrivateNotice .privacy-line-symbol{
  display:inline-block;
  font-family:Arial,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1;
  margin-inline-end:4px;
  color:currentColor;
}


/* =========================================================
   V40 SQUARE AVATARS
   Slightly rounded, borderless, GIF-safe.
   ========================================================= */

/* Top header avatar */
#accountButton{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}

#headerAvatar{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  border-radius:8px !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  display:block !important;
}

/* Flush the profile avatar to the extreme edge of the top header */
.topbar,
.app-header,
.main-header,
.header{
  overflow:visible;
}

.topbar #accountButton,
.app-header #accountButton,
.main-header #accountButton,
.header #accountButton{
  margin-inline-end:-12px !important;
}

/* Registration avatar */
#registerAvatarButton{
  border-radius:10px !important;
  overflow:hidden !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

#registerAvatarPreview{
  width:100% !important;
  height:100% !important;
  border-radius:10px !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  object-fit:cover !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Account/settings avatar */
#settingsAvatarButton{
  border-radius:10px !important;
  overflow:hidden !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

#settingsAvatarPreview{
  border-radius:10px !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  object-fit:cover !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Own profile / other profile main avatar */
#profileAvatar{
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  min-height:96px !important;
  border-radius:12px !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
}

/* Account modal/profile card avatar variants */
.account-avatar,
.account-avatar img,
.profile-avatar,
.profile-avatar img{
  border-radius:10px !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Cropper frame itself should also communicate square result */
#cropFrame,
.crop-frame,
.avatar-crop-frame{
  border-radius:10px !important;
}

/* Mobile: keep header avatar touching the edge */
@media(max-width:520px){
  #headerAvatar{
    width:40px !important;
    height:40px !important;
    border-radius:7px !important;
  }

  .topbar #accountButton,
  .app-header #accountButton,
  .main-header #accountButton,
  .header #accountButton{
    margin-inline-end:-9px !important;
  }
}


/* Keep non-avatar circular UI circular */
.badge,
#bellBadge,
#chatUnreadBadge,
#bottomChatBadge,
.online-unread-badge,
.bell-badge{
  border-radius:50% !important;
}
.online-dot,
.status-dot{
  border-radius:50% !important;
}


/* =========================================================
   V41 DISCOVER HEADER AVATAR FINAL OVERRIDE
   Force the top profile photo on the main Discover page square.
   ========================================================= */
#app:not(.hidden) #accountButton,
#app:not(.hidden) .topbar #accountButton,
#app:not(.hidden) .app-header #accountButton,
#app:not(.hidden) .main-header #accountButton,
#app:not(.hidden) .header #accountButton{
  border-radius:0 !important;
  overflow:visible !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
}

#app:not(.hidden) #accountButton #headerAvatar,
#app:not(.hidden) #accountButton img,
#app:not(.hidden) .topbar #headerAvatar,
#app:not(.hidden) .app-header #headerAvatar,
#app:not(.hidden) .main-header #headerAvatar,
#app:not(.hidden) .header #headerAvatar{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;

  border-radius:8px !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;

  object-fit:cover !important;
  object-position:center !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}

/* Neutralize any legacy circle rules attached to the header avatar wrapper */
#app:not(.hidden) #accountButton::before,
#app:not(.hidden) #accountButton::after,
#app:not(.hidden) #headerAvatar::before,
#app:not(.hidden) #headerAvatar::after{
  content:none !important;
  display:none !important;
}

@media(max-width:520px){
  #app:not(.hidden) #accountButton #headerAvatar,
  #app:not(.hidden) #accountButton img,
  #app:not(.hidden) .topbar #headerAvatar,
  #app:not(.hidden) .app-header #headerAvatar,
  #app:not(.hidden) .main-header #headerAvatar,
  #app:not(.hidden) .header #headerAvatar{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    border-radius:7px !important;
  }
}


/* =========================================================
   V42 REAL FIX: DISCOVER HEADER AVATAR
   Actual app root is #appView, not #app.
   ========================================================= */
#appView:not(.hidden) #accountButton,
#appView:not(.hidden) #accountButton.avatar-button,
#appView:not(.hidden) .topbar #accountButton{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;

  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;

  border-radius:8px !important;
  overflow:hidden !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}

#appView:not(.hidden) #accountButton #headerAvatar,
#appView:not(.hidden) #accountButton.avatar-button #headerAvatar,
#appView:not(.hidden) .topbar #accountButton #headerAvatar{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;

  display:block !important;
  object-fit:cover !important;
  object-position:center !important;

  border-radius:8px !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;

  margin:0 !important;
  padding:0 !important;
}

/* Remove every old circular pseudo/ring effect on this exact header avatar */
#appView:not(.hidden) #accountButton::before,
#appView:not(.hidden) #accountButton::after,
#appView:not(.hidden) #headerAvatar::before,
#appView:not(.hidden) #headerAvatar::after{
  content:none !important;
  display:none !important;
}

/* Keep it close to the page edge */
#appView:not(.hidden) .topbar #accountButton{
  margin-inline-end:-10px !important;
}

@media(max-width:520px){
  #appView:not(.hidden) #accountButton,
  #appView:not(.hidden) #accountButton.avatar-button,
  #appView:not(.hidden) .topbar #accountButton,
  #appView:not(.hidden) #accountButton #headerAvatar,
  #appView:not(.hidden) #accountButton.avatar-button #headerAvatar,
  #appView:not(.hidden) .topbar #accountButton #headerAvatar{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    border-radius:7px !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
  }

  #appView:not(.hidden) .topbar #accountButton{
    margin-inline-end:-7px !important;
  }
}


/* =========================================================
   V43 HEADER AVATAR - LARGER & EDGE-FIT
   ========================================================= */
#appView:not(.hidden) .topbar{
  overflow:visible !important;
}

#appView:not(.hidden) .topbar #accountButton,
#appView:not(.hidden) #accountButton.avatar-button{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  max-width:50px !important;
  max-height:50px !important;

  padding:0 !important;
  margin-top:-2px !important;
  margin-bottom:-2px !important;
  margin-inline-end:-14px !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:9px !important;
  overflow:hidden !important;
}

#appView:not(.hidden) .topbar #accountButton #headerAvatar,
#appView:not(.hidden) #accountButton.avatar-button #headerAvatar{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  max-width:50px !important;
  max-height:50px !important;

  border-radius:9px !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;

  object-fit:cover !important;
  object-position:center !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;

  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

@media(max-width:520px){
  #appView:not(.hidden) .topbar #accountButton,
  #appView:not(.hidden) #accountButton.avatar-button,
  #appView:not(.hidden) .topbar #accountButton #headerAvatar,
  #appView:not(.hidden) #accountButton.avatar-button #headerAvatar{
    width:47px !important;
    height:47px !important;
    min-width:47px !important;
    min-height:47px !important;
    max-width:47px !important;
    max-height:47px !important;
    border-radius:8px !important;
  }

  #appView:not(.hidden) .topbar #accountButton{
    margin-top:-1px !important;
    margin-bottom:-1px !important;
    margin-inline-end:-11px !important;
  }
}


/* =========================================================
   V44 ADMIN-CONTROLLED TOP HEADER / AVATAR SIZE
   Defaults preserve V43 exactly until admin changes them.
   ========================================================= */
:root{
  --top-header-height:54px;
  --top-avatar-size:50px;
  --top-avatar-radius:9px;
}

#appView:not(.hidden) .topbar{
  min-height:var(--top-header-height) !important;
  height:var(--top-header-height) !important;
}

#appView:not(.hidden) .topbar #accountButton,
#appView:not(.hidden) #accountButton.avatar-button{
  width:var(--top-avatar-size) !important;
  height:var(--top-avatar-size) !important;
  min-width:var(--top-avatar-size) !important;
  min-height:var(--top-avatar-size) !important;
  max-width:var(--top-avatar-size) !important;
  max-height:var(--top-avatar-size) !important;
  border-radius:var(--top-avatar-radius) !important;
}

#appView:not(.hidden) .topbar #accountButton #headerAvatar,
#appView:not(.hidden) #accountButton.avatar-button #headerAvatar{
  width:var(--top-avatar-size) !important;
  height:var(--top-avatar-size) !important;
  min-width:var(--top-avatar-size) !important;
  min-height:var(--top-avatar-size) !important;
  max-width:var(--top-avatar-size) !important;
  max-height:var(--top-avatar-size) !important;
  border-radius:var(--top-avatar-radius) !important;
}


/* =========================================================
   V47 PROFILE LINKS + COMPACT CREATE + ADMIN LOGO SIZE
   ========================================================= */
:root{--site-logo-height:38px}

#brandImage,#authBrandImage{
  height:var(--site-logo-height,38px) !important;
  max-height:none !important;
  width:auto !important;
  object-fit:contain !important;
}
.auth-brand #authBrandImage{max-width:min(78vw,320px) !important}
.topbar #brandImage{max-width:min(52vw,240px) !important}

.community-tile-user[data-community-owner]{
  cursor:pointer;
  pointer-events:auto;
}
.community-tile-user[data-community-owner]:active{transform:scale(.98)}

#postViewerOwner.is-clickable{
  cursor:pointer;
  border-radius:12px;
}
#postViewerOwner.is-clickable:hover{
  background:color-mix(in srgb,var(--icon) 50%,transparent);
}

/* The generic mobile modal rule makes every modal full-screen. Keep the quick
   camera/gallery chooser as a small centered card instead. */
@media(max-width:700px){
  #quickCreateModal{
    padding:16px !important;
    place-items:center !important;
    align-items:center !important;
  }
  #quickCreateModal .quick-create-card{
    width:min(88vw,360px) !important;
    max-height:min(82dvh,430px) !important;
    border-radius:22px !important;
    padding:9px 12px 13px !important;
    overflow:auto !important;
  }
  #quickCreateModal .quick-create-options{
    gap:8px !important;
    margin-top:8px !important;
  }
  #quickCreateModal .quick-create-options button{
    min-height:92px !important;
    border-radius:15px !important;
    padding:9px 7px !important;
  }
  #quickCreateModal .quick-create-options button>span{
    width:42px !important;
    height:42px !important;
    border-radius:13px !important;
    font-size:21px !important;
  }
  #quickCreateModal .quick-create-options button>b{font-size:9px !important}
  #quickCreateModal .quick-create-options button>small{font-size:6.8px !important;line-height:1.35 !important}
  #quickCreateModal .modal-head{margin-bottom:4px !important}
  #quickCreateModal .close-button{width:31px !important;height:31px !important}
}


/* ===== V49 PROFILE LIVE PRESENCE ===== */
.profile-presence{
  margin-top:5px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:20px;
  font-size:11px;
  font-weight:900;
  color:var(--muted);
}
.profile-presence-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex:0 0 9px;
}
.profile-presence.is-online{color:#259c53}
.profile-presence.is-online .profile-presence-dot{
  background:#35c96b;
  box-shadow:0 0 0 0 rgba(53,201,107,.5);
  animation:profilePresenceOnline 1.35s infinite;
}
.profile-presence.is-offline{color:#d64a4a}
.profile-presence.is-offline .profile-presence-dot{
  background:#ef4b4b;
  box-shadow:0 0 0 0 rgba(239,75,75,.5);
  animation:profilePresenceOffline 1.35s infinite;
}
@keyframes profilePresenceOnline{
  0%{box-shadow:0 0 0 0 rgba(53,201,107,.48);opacity:1}
  65%{box-shadow:0 0 0 7px rgba(53,201,107,0);opacity:.76}
  100%{box-shadow:0 0 0 0 rgba(53,201,107,0);opacity:1}
}
@keyframes profilePresenceOffline{
  0%{box-shadow:0 0 0 0 rgba(239,75,75,.48);opacity:1}
  65%{box-shadow:0 0 0 7px rgba(239,75,75,0);opacity:.76}
  100%{box-shadow:0 0 0 0 rgba(239,75,75,0);opacity:1}
}

/* ===== V49 BIRTHDAY MATCH AREA: ONE VISUAL ZONE ===== */
.birthday-match-zone{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:11px;
  display:grid;
  gap:9px;
  box-shadow:0 8px 24px rgba(34,28,62,.045);
}
.birthday-match-zone>#home-scope,
.birthday-match-zone>#home-matches,
.birthday-match-zone>#home-chat{
  margin:0 !important;
}
.birthday-match-zone>#home-scope.card,
.birthday-match-zone>#home-matches.card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}
.birthday-match-zone>#home-scope{
  padding-bottom:9px !important;
  border-bottom:1px solid var(--line) !important;
}
.birthday-match-zone>#home-matches{
  padding:1px 0 2px !important;
}
.birthday-match-zone>#home-chat{
  padding-top:2px;
}
.birthday-match-zone .chat-entry{
  min-height:46px;
  border-radius:13px;
}
@media(max-width:700px){
  .birthday-match-zone{border-radius:18px;padding:9px;gap:8px}
}


/* ===== V50 COMPACT POST + COMMENT REACTIONS ===== */
#reactionsBar.reactions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:8px 0 6px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2px 0;
}
#reactionsBar .reaction{
  min-height:38px;border:0;border-radius:0;background:transparent;padding:5px 8px;
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:18px;
}
#reactionsBar .reaction + .reaction{border-inline-start:1px solid var(--line)}
#reactionsBar .reaction b{font-size:11px;color:var(--muted);font-weight:800}
#reactionsBar .reaction.active{background:var(--scope-active);border-radius:10px}

.comments{display:flex;flex-direction:column;gap:9px}
.comment{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:start}
.comment.is-reply{margin-inline-start:26px}
.comment-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.comment-content{min-width:0;background:var(--icon);border-radius:14px;padding:8px 9px}
.comment-content>b{display:block;font-size:12px;margin-bottom:2px}
.comment-content p{margin:2px 0 5px;white-space:pre-wrap;word-break:break-word}
.comment-reply-context{padding:5px 7px;margin-bottom:5px;border-inline-start:3px solid var(--accent);background:color-mix(in srgb,var(--card) 76%,transparent);border-radius:7px}
.comment-reply-context small{display:block;font-size:9px;color:var(--muted)}
.comment-reply-context span{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}
.comment-actions{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:5px;padding-top:4px;border-top:1px solid var(--line)}
.comment-actions button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:800;padding:4px 6px;border-radius:8px;cursor:pointer}
.comment-actions button:hover,.comment-actions button.active{background:var(--scope-active);color:var(--text)}
.comment-actions .comment-react span{font-size:9px}
.comment-reply-button{margin-inline-start:auto}

.comment-replying-to{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 6px;padding:7px 9px;border-radius:10px;background:var(--scope-active);font-size:11px;font-weight:800}
.comment-replying-to button{border:0;background:transparent;color:var(--accent);font:inherit;font-size:10px;cursor:pointer}

.emoji-menu-button{width:auto !important;min-width:68px !important;padding:0 8px !important;display:flex !important;align-items:center;justify-content:center;gap:4px}
.emoji-menu-button small{font-size:9px;font-weight:800}
.comment-emoji-popover{grid-template-columns:repeat(6,minmax(34px,1fr));margin:4px 0 6px;box-shadow:0 10px 28px #0001}
.comment-emoji-popover button{font-size:21px}
@media(max-width:600px){
  .comment.is-reply{margin-inline-start:16px}
  .comment-actions{gap:1px}
  .comment-actions button{padding:4px 5px;font-size:10px}
  .emoji-menu-button{min-width:58px !important;padding:0 5px !important}
  .emoji-menu-button small{font-size:8px}
}

/* ===== V51 SINGLE POST REACTION + THREADED REPLIES ===== */
#reactionsBar .reaction:disabled{opacity:.72;cursor:wait}
#reactionsBar .reaction.active{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent);
}

#commentsList.comments{gap:10px}
.comment-thread{display:block;min-width:0}
.comment-thread>.comment{margin:0}
.comment-children{
  margin-top:6px;
  margin-inline-start:28px;
  padding-inline-start:10px;
  border-inline-start:2px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  display:flex;
  flex-direction:column;
  gap:7px;
}
.comment-children .comment-children{margin-inline-start:18px;padding-inline-start:8px}
.comment-avatar-button{
  width:36px;height:36px;padding:0;margin:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;overflow:hidden;display:block;
}
.comment-avatar-button:disabled{cursor:default}
.comment-avatar-button .comment-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.comment-author{
  display:block;width:max-content;max-width:100%;padding:0;margin:0 0 2px;border:0;
  background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:800;
  text-align:start;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.comment-author:disabled{cursor:default}
.comment-author:not(:disabled):hover{text-decoration:underline}
.comment-reply-label{
  display:block;margin-bottom:3px;color:var(--muted);font-size:9px;font-weight:700;
}
.comment-actions{
  display:flex;justify-content:flex-end;align-items:center;margin-top:4px;padding-top:3px;
  border-top:1px solid var(--line);
}
.comment-actions .comment-reply-button{
  margin-inline-start:auto;border:0;background:transparent;color:var(--muted);
  font:inherit;font-size:10px;font-weight:800;padding:3px 5px;border-radius:7px;cursor:pointer;
}
.comment-actions .comment-reply-button:hover{background:var(--scope-active);color:var(--text)}

@media(max-width:600px){
  .comment-children{margin-inline-start:17px;padding-inline-start:8px}
  .comment-children .comment-children{margin-inline-start:10px;padding-inline-start:6px}
}
#commentsList .comment-image-media{
  width:min(100%,260px) !important;height:auto !important;max-height:260px !important;
  border-radius:10px !important;object-fit:contain !important;
}
#commentsList .comment-audio-media{width:min(100%,260px) !important;max-width:100% !important}


/* ===== V52 TOP POST ZONE + TRUE INLINE THREADED REPLIES ===== */
#photoModal .post-top-zone{
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:16px;
  padding:9px 10px 7px;
  background:color-mix(in srgb,var(--card) 94%,var(--scope-active));
  box-shadow:0 6px 18px rgba(20,20,30,.035);
  overflow:hidden;
}
#photoModal .post-top-zone .modal-head{margin-bottom:6px}
#photoModal .post-top-zone .post-viewer-owner{padding-bottom:6px}
#photoModal .post-top-zone .post-caption{
  padding:7px 0 8px;
  border-bottom:1px solid var(--line);
}
#photoModal .post-top-zone #reactionsBar.reactions{
  margin:5px 0 0 !important;
  padding:4px 0 0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  background:transparent;
}
#photoModal .post-top-zone #reactionsBar .reaction{
  min-height:34px;
  border-radius:9px;
}
#photoModal .post-top-zone #reactionsBar .reaction + .reaction{
  border-inline-start:1px solid var(--line);
}
#photoModal .post-top-zone #reactionsBar .reaction.active{
  background:var(--scope-active);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent);
}

/* Root comment is one box. Every reply lives inside that same box. */
#commentsList.comments{gap:9px !important}
#commentsList.comments > .comment-thread{
  background:var(--icon);
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:14px;
  padding:8px 9px;
  overflow:hidden;
}
#commentsList .comment-thread.is-thread-reply{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
#commentsList .comment-content{
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
}
#commentsList .comment-children{
  margin-top:7px;
  margin-inline-start:18px;
  padding:7px 0 0 9px;
  border-inline-start:2px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  gap:7px;
}
#commentsList .comment-children .comment-children{
  margin-inline-start:13px;
  padding-inline-start:8px;
  border-top:0;
}
#commentsList .comment-thread.is-thread-reply > .comment{
  grid-template-columns:30px minmax(0,1fr);
  gap:7px;
}
#commentsList .comment-thread.is-thread-reply .comment-avatar-button,
#commentsList .comment-thread.is-thread-reply .comment-avatar{
  width:30px;height:30px;
}

/* Reply action is deliberately on the physical left, even in Arabic RTL. */
#commentsList .comment-actions{
  direction:ltr !important;
  justify-content:flex-start !important;
  border-top:0 !important;
  margin-top:3px !important;
  padding-top:0 !important;
}
#commentsList .comment-actions .comment-reply-button{
  margin:0 !important;
  direction:rtl;
  padding:3px 5px;
}

.inline-reply-composer{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--line);
}
.inline-reply-title{
  margin-bottom:5px;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}
.inline-reply-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 27px;
  gap:5px;
  align-items:center;
}
.inline-reply-input{
  width:100%;min-width:0;height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 9px;
  background:var(--card);
  color:var(--text);
  font:inherit;
  font-size:10px;
  outline:0;
}
.inline-reply-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent);
}
.inline-reply-send{
  height:34px;border:0;border-radius:10px;padding:0 10px;
  background:var(--accent);color:#fff;font:inherit;font-size:9px;font-weight:900;cursor:pointer;
}
.inline-reply-cancel{
  width:27px;height:27px;border:0;border-radius:50%;
  background:var(--scope-active);color:var(--muted);font-size:17px;line-height:1;cursor:pointer;
}
#commentReplyingTo{display:none !important}

@media(max-width:760px){
  #photoModal .post-top-zone{margin:0 0 7px;border-radius:14px;padding:8px}
  #commentsList.comments > .comment-thread{padding:7px 8px}
  #commentsList .comment-children{margin-inline-start:12px;padding-inline-start:7px}
  .inline-reply-row{grid-template-columns:minmax(0,1fr) auto 25px}
}


/* =========================================================
   V53 GLOBAL PRESENCE + RICH POP NOTIFICATIONS
   ========================================================= */
.global-presence{
  display:inline-flex;align-items:center;gap:4px;min-width:0;
  font-size:8px;font-weight:900;line-height:1.15;color:var(--muted);
  white-space:nowrap;
}
.global-presence>i{
  width:6px;height:6px;flex:0 0 6px;border-radius:50%;display:block;
}
.global-presence.is-online{color:#259c53}
.global-presence.is-online>i{
  background:#35c96b;box-shadow:0 0 0 0 rgba(53,201,107,.5);
  animation:v53PresenceGreen 1.35s infinite;
}
.global-presence.is-offline{color:#d64a4a}
.global-presence.is-offline>i{
  background:#ef4b4b;box-shadow:0 0 0 0 rgba(239,75,75,.5);
  animation:v53PresenceRed 1.35s infinite;
}
@keyframes v53PresenceGreen{
  0%{box-shadow:0 0 0 0 rgba(53,201,107,.45)}
  70%{box-shadow:0 0 0 5px rgba(53,201,107,0)}
  100%{box-shadow:0 0 0 0 rgba(53,201,107,0)}
}
@keyframes v53PresenceRed{
  0%{box-shadow:0 0 0 0 rgba(239,75,75,.45)}
  70%{box-shadow:0 0 0 5px rgba(239,75,75,0)}
  100%{box-shadow:0 0 0 0 rgba(239,75,75,0)}
}
.person-avatar-presence,.generation-avatar-presence,.notification-avatar-wrap,.live-notification-avatar-wrap{position:relative;display:block;flex:0 0 auto}
.person .presence-on-card{
  position:absolute;inset-inline-start:31px;bottom:-3px;padding:2px 4px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);z-index:2;
}
.generation-avatar-presence{width:48px;height:48px}
.generation-avatar-presence>img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.generation-avatar-presence .presence-on-generation{
  position:absolute;inset-inline-start:28px;bottom:-4px;padding:2px 4px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;z-index:2;
}
.comment-author-line{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.comment-author-line .comment-author{margin-bottom:0}
.presence-in-comment{font-size:7.5px}
.post-viewer-presence{margin-top:3px;font-size:8px}
.community-tile-user .presence-in-community{margin-top:2px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.community-tile-user .presence-in-community>i{box-shadow:0 0 0 1px rgba(255,255,255,.55)}

/* Notification rows carry message/comment content, not only a generic label. */
.notification-avatar-wrap{width:42px;height:42px;align-self:flex-start}
.notification-avatar-wrap>img{width:42px!important;height:42px!important;border-radius:50%;object-fit:cover}
.notification-avatar-wrap .presence-in-notification{
  position:absolute;inset-inline-start:28px;bottom:-3px;width:max-content;padding:2px 4px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;z-index:2;
}
.notification-row-copy{min-width:0;display:grid;gap:2px;flex:1}
.notification-actor{font-size:11px;line-height:1.2;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notification-preview{font-size:10px;line-height:1.35;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.notification-row-copy small{font-size:8px;color:var(--muted)}

/* Balloon-like pop for the live notification. */
.live-notification{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:9px;align-items:center;
  opacity:0;transform:translateY(-8px) scale(.58);transform-origin:88% 0%;
  transition:opacity .14s ease;overflow:visible;
}
.live-notification.show{
  opacity:1;transform:none;
  animation:v53NotificationBubblePop .48s cubic-bezier(.18,1.35,.28,1) both;
}
.live-notification::after{
  content:"";position:absolute;top:-5px;inset-inline-end:26px;width:12px;height:12px;
  background:var(--notification);border-inline-start:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);border-radius:2px 0 0 0;
}
.live-notification-avatar-wrap{width:44px;height:44px;z-index:1}
.live-notification-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;border:2px solid color-mix(in srgb,var(--accent) 24%,var(--card))}
.live-notification-avatar-wrap .presence-live-notification{
  position:absolute;inset-inline-start:28px;bottom:-5px;width:max-content;padding:2px 4px;
  background:var(--notification);border:1px solid var(--line);border-radius:999px;z-index:2;
}
.live-notification-copy{min-width:0;display:grid;gap:2px;z-index:1}
.live-notification-copy .live-notification-type{font-size:7.5px;font-weight:900;color:var(--muted)}
.live-notification-copy .notification-actor{font-size:11px}
.live-notification-copy .notification-preview{font-size:10px;font-weight:700}
.live-notification-copy small{font-size:7.5px;color:var(--muted)}
@keyframes v53NotificationBubblePop{
  0%{opacity:0;transform:translateY(-9px) scale(.52)}
  45%{opacity:1;transform:translateY(2px) scale(1.09)}
  68%{transform:translateY(-1px) scale(.96)}
  84%{transform:translateY(0) scale(1.025)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:600px){
  .person .presence-on-card,.generation-avatar-presence .presence-on-generation{font-size:6.8px}
  .global-presence>i{width:5px;height:5px;flex-basis:5px}
  .live-notification{top:calc(58px + env(safe-area-inset-top));width:calc(100vw - 20px);right:10px}
}

/* V54 — notification details are the hero, not the generic label. */
.notification-row-copy,.live-notification-copy{min-width:0;display:grid;gap:3px;align-content:center}
.notification-actor{font-size:12px!important;font-weight:900;line-height:1.2;color:var(--text)}
.notification-action{display:block;font-size:9.5px;line-height:1.25;font-weight:800;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notification-preview{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:11.5px!important;line-height:1.4!important;font-weight:800!important;color:var(--text)!important;white-space:pre-line;word-break:break-word}
.notification-extra{font-size:8px;font-weight:900;color:var(--accent)}
.live-notification{width:min(365px,calc(100vw - 24px));padding:11px 12px;grid-template-columns:48px minmax(0,1fr);gap:10px}
.live-notification-copy .notification-actor{font-size:13px!important}
.live-notification-copy .notification-action{font-size:10px}
.live-notification-copy .notification-preview{font-size:12px!important;line-height:1.42!important}
.notification-row{align-items:flex-start!important}
@media(max-width:600px){
  .live-notification{width:calc(100vw - 20px);padding:10px 11px}
  .live-notification-copy .notification-preview{font-size:11.5px!important}
}

/* ===== V55 SEPARATE GROUP CHAT BADGES + MATCH ZONE COLOR ===== */
.birthday-match-zone{
  background:var(--birthday-zone,var(--card)) !important;
}
.scope{position:relative}
.scope-unread-badge{
  position:absolute;
  top:4px;
  inset-inline-end:5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  line-height:1;
  background:#ef3f5d;
  color:#fff;
  box-shadow:0 3px 10px rgba(239,63,93,.28);
}
.scope-unread-badge.hidden{display:none!important}

/* ===== V56 CHAT GROUP TITLES + FULLY VISIBLE UNREAD BADGES ===== */
#home-birthday-zone,
#home-scope,
#home-scope.card,
.scope-tabs,
.scope{
  overflow:visible !important;
}
#home-scope .scope-tabs{
  padding-top:8px;
  padding-inline:4px;
}
#home-scope .scope{
  position:relative !important;
  z-index:1;
}
#home-scope .scope-unread-badge{
  top:-9px !important;
  inset-inline-end:-6px !important;
  right:auto;
  left:auto;
  z-index:30 !important;
  min-width:21px;
  height:21px;
  padding:0 6px;
  border:2px solid var(--birthday-zone,var(--card));
  box-shadow:0 4px 12px rgba(239,63,93,.34);
  overflow:visible !important;
}
html[dir="rtl"] #home-scope .scope-unread-badge{
  right:auto !important;
  left:-6px !important;
}
html[dir="ltr"] #home-scope .scope-unread-badge{
  left:auto !important;
  right:-6px !important;
}
#chatTitle{
  max-width:calc(100% - 48px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}




/* ===== V62 EXACT V56 PEOPLE-AREA LIVE PREVIEW =====
   Only the old #matchesGrid height is frozen. The old title is removed, so the
   surrounding zone becomes tighter while the original white people area stays
   exactly the same height it had in V56. */
#home-matches.v62-fixed-live-preview{
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#home-matches.v62-fixed-live-preview>.section-title{
  display:none!important;
}
#home-matches.v62-fixed-live-preview #matchesGrid{
  display:block!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  width:100%!important;
}
.v62-live-box{
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  overflow:hidden;
  box-sizing:border-box;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:15px;
  padding:4px 6px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
.v62-preview-line{
  flex:1 1 0;
  min-height:0;
  max-height:20px;
  display:flex;
  align-items:center;
  gap:5px;
  overflow:hidden;
  border-radius:8px;
  padding:1px 3px;
  box-sizing:border-box;
  background:color-mix(in srgb,var(--scope-active) 46%,var(--card) 54%);
}
.v62-preview-line img{
  flex:0 0 16px;
  width:16px!important;
  height:16px!important;
  border-radius:50%;
  object-fit:cover;
}
.v62-preview-copy{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:4px;
  overflow:hidden;
  white-space:nowrap;
  line-height:1;
}
.v62-preview-copy b{
  flex:0 0 auto;
  max-width:34%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.5px;
}
.v62-preview-copy span{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.5px;
  opacity:.82;
}
.v62-preview-empty{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:9px;
  color:var(--muted);
}

/* Full background of the entire On This Day card, controlled from Admin. */
:root{--history-zone:var(--card)}
#home-history.card{
  background:var(--history-zone,var(--card)) !important;
}


/* =========================================================
   V63 STABLE V56-SIZE LIVE CHAT + COMPACT PROFILE
   ========================================================= */
/* Keep the original V56 people-area dimensions. Only its content changes. */
#home-matches.v63-fixed-live-preview{
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#home-matches.v63-fixed-live-preview>.section-title{
  display:none!important;
}
#home-matches.v63-fixed-live-preview #matchesGrid.v63-live-preview-grid{
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  width:100%!important;
}
.v63-live-box{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:1px solid var(--line)!important;
  border-radius:15px!important;
  background:color-mix(in srgb,var(--scope-active) 25%,var(--card) 75%)!important;
  padding:4px 7px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:2px!important;
}
.v63-preview-line{
  flex:0 0 auto!important;
  height:17px!important;
  min-height:17px!important;
  max-height:17px!important;
  display:grid!important;
  grid-template-columns:minmax(38px,28%) 1fr!important;
  align-items:center!important;
  gap:5px!important;
  overflow:hidden!important;
  border-radius:7px!important;
  padding:0 4px!important;
  box-sizing:border-box!important;
  background:color-mix(in srgb,var(--scope-active) 50%,var(--card) 50%)!important;
  white-space:nowrap!important;
}
.v63-preview-line b,
.v63-preview-line span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  line-height:1!important;
}
.v63-preview-line b{font-size:8px!important;}
.v63-preview-line span{font-size:8px!important;color:var(--text)!important;}
.v63-preview-empty{
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  font-size:9px!important;
  color:var(--muted)!important;
}

/* Profile: remove the redundant BirthDay header and let the user identity lead. */
#profilePage .profile-inner{position:relative!important;padding-top:7px!important;}
#profilePage .profile-top{
  position:absolute!important;
  z-index:5!important;
  top:8px!important;
  inset-inline-start:8px!important;
  width:34px!important;
  height:34px!important;
  margin:0!important;
  display:block!important;
}
#profilePage .profile-top>b,
#profilePage .profile-top>span{display:none!important;}
#profilePage #profileBackButton{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  padding:0!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  font-size:21px!important;
}
#profilePage .profile-card{
  padding:10px!important;
  border-radius:18px!important;
}
#profilePage .profile-user{
  min-height:86px!important;
  padding-inline-start:42px!important;
  gap:9px!important;
  align-items:center!important;
}
html[dir="ltr"] #profilePage .profile-user{padding-inline-start:42px!important;}
#profilePage #profileAvatar{
  width:82px!important;
  height:82px!important;
  min-width:82px!important;
  min-height:82px!important;
  margin:-4px!important;
}
#profilePage .profile-user h2{font-size:18px!important;margin:0 0 2px!important;line-height:1.2!important;}
#profilePage .profile-meta{font-size:9px!important;line-height:1.35!important;}
#profilePage .profile-presence{margin-top:3px!important;min-height:17px!important;font-size:9px!important;gap:5px!important;}
#profilePage .profile-presence-dot{width:7px!important;height:7px!important;flex-basis:7px!important;}

/* Photos/Friends become a small single dock instead of two large cards. */
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment){
  margin-top:6px!important;
  gap:4px!important;
  padding:4px!important;
  border-radius:12px!important;
  background:var(--bg)!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button{
  min-height:34px!important;
  padding:4px 6px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button:hover{background:var(--icon)!important;}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button b{font-size:12px!important;line-height:1.1!important;}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button span{font-size:8px!important;line-height:1.1!important;margin-top:1px!important;}

/* Own-profile controls: four compact controls in one unified strip. */
#profilePage #profileOwnerTools{
  margin-top:5px!important;
  padding:4px!important;
  gap:4px!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  background:var(--bg)!important;
  border-radius:12px!important;
}
#profilePage #profileOwnerTools>#profileAddPhotoButton,
#profilePage #profileOwnerTools>#profileEditSettingsButton{
  min-width:0!important;
  min-height:34px!important;
  padding:4px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--text)!important;
  font-size:8px!important;
  line-height:1.15!important;
  box-shadow:none!important;
}
#profilePage #profileOwnerTools>#profileAddPhotoButton:hover,
#profilePage #profileOwnerTools>#profileEditSettingsButton:hover{background:var(--icon)!important;}
#profilePage #profileOwnerTools .profile-privacy-segment.profile-stats{
  grid-column:span 2!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
}
#profilePage #profileOwnerTools .profile-privacy-segment.profile-stats button{
  min-height:34px!important;
  padding:3px 2px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  font-size:8px!important;
}
#profilePage #profileOwnerTools .profile-privacy-segment.profile-stats button.active{
  background:var(--scope-active)!important;
  color:var(--accent)!important;
}
#profilePage #profilePublicButton>span,
#profilePage #profilePrivateButton>span{font-size:8px!important;}
#profilePage #profilePrivateButton .privacy-line-symbol{font-size:13px!important;margin:0!important;}

@media(max-width:430px){
  #profilePage .profile-user{padding-inline-start:38px!important;gap:7px!important;}
  #profilePage #profileAvatar{width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;}
  #profilePage .profile-user h2{font-size:16px!important;}
  #profilePage #profileOwnerTools{gap:3px!important;}
  #profilePage #profileOwnerTools>#profileAddPhotoButton,
  #profilePage #profileOwnerTools>#profileEditSettingsButton,
  #profilePage #profileOwnerTools .profile-privacy-segment.profile-stats button{font-size:7.5px!important;}
}


/* =========================================================
   V64 SMALL PROFILE DOCK + COMPACT THREADED REPLIES
   ========================================================= */
/* Photos/Friends: preserve layout, reduce vertical bulk only. */
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment){
  margin-top:4px!important;
  gap:3px!important;
  padding:2px 3px!important;
  border-radius:10px!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button{
  min-height:26px!important;
  height:26px!important;
  padding:1px 5px!important;
  border-radius:7px!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button b{
  font-size:10px!important;
  line-height:1!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button span{
  font-size:7px!important;
  line-height:1!important;
  margin-top:0!important;
}

/* Replies are visually subordinate to the main comment. */
#commentsList .comment-children{
  margin-top:4px!important;
  margin-inline-start:15px!important;
  padding:4px 0 0 7px!important;
  gap:4px!important;
}
#commentsList .comment-children .comment-children{
  margin-inline-start:9px!important;
  padding-inline-start:6px!important;
}
#commentsList .comment-thread.is-thread-reply > .comment{
  grid-template-columns:23px minmax(0,1fr)!important;
  gap:5px!important;
  font-size:8.5px!important;
  line-height:1.22!important;
}
#commentsList .comment-thread.is-thread-reply .comment-avatar-button,
#commentsList .comment-thread.is-thread-reply .comment-avatar{
  width:23px!important;
  height:23px!important;
}
#commentsList .comment-thread.is-thread-reply .comment-author{
  font-size:8.5px!important;
  line-height:1.1!important;
}
#commentsList .comment-thread.is-thread-reply .global-presence{
  transform:scale(.82)!important;
  transform-origin:center!important;
}
#commentsList .comment-thread.is-thread-reply .comment-actions{
  margin-top:2px!important;
  min-height:18px!important;
}
#commentsList .comment-thread.is-thread-reply .comment-reply-button{
  min-height:18px!important;
  padding:1px 4px!important;
  font-size:7.5px!important;
  border-radius:6px!important;
}
#commentsList .comment-thread.is-thread-reply .inline-reply-composer{
  margin-top:4px!important;
  padding-top:4px!important;
}
#commentsList .comment-thread.is-thread-reply .inline-reply-title{
  font-size:7.5px!important;
  margin-bottom:3px!important;
}
#commentsList .comment-thread.is-thread-reply .inline-reply-input{
  height:27px!important;
  padding:3px 6px!important;
  font-size:8px!important;
}
#commentsList .comment-thread.is-thread-reply .inline-reply-send{
  height:27px!important;
  padding:0 7px!important;
  font-size:7.5px!important;
}
#commentsList .comment-thread.is-thread-reply .inline-reply-cancel{
  width:22px!important;
  height:22px!important;
  font-size:14px!important;
}
@media(max-width:430px){
  #profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button{
    min-height:24px!important;height:24px!important;
  }
  #commentsList .comment-children{margin-inline-start:10px!important;padding-inline-start:5px!important;}
}

/* =========================================================
   V65 PROFILE PHOTOS / FRIENDS: TWO SMALL SEPARATE BOXES
   ========================================================= */
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment){
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
  margin-top:4px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  height:30px!important;
  padding:3px 5px!important;
  margin:0!important;
  border:1px solid var(--line)!important;
  border-radius:9px!important;
  background:var(--bg)!important;
  color:var(--text)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button:hover{
  background:var(--icon)!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button b,
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button span{
  display:inline-block!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  vertical-align:middle!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button b{
  font-size:10px!important;
  flex:0 0 auto!important;
}
#profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button span{
  font-size:8px!important;
  flex:0 1 auto!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:430px){
  #profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment){gap:4px!important;}
  #profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button{
    min-height:29px!important;
    height:29px!important;
    padding:3px 4px!important;
    gap:4px!important;
  }
  #profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button b{font-size:9.5px!important;}
  #profilePage>.profile-inner .profile-stats:not(.profile-privacy-segment)>button span{font-size:7.5px!important;}
}

/* V66 - optional native browser notifications */
.browser-notification-setting{
  display:grid;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(127,127,127,.16);
}
.browser-notification-setting button{
  min-height:42px;
  margin:0;
}
.browser-notification-setting small{
  opacity:.72;
  line-height:1.45;
  padding-inline:2px;
}


/* V71 - Chat box scale is measured from the real original card size in JS. */
#chatModal .chat-card{transition:width .18s ease,height .18s ease,max-height .18s ease}
html.chat-box-custom-size #chatModal{align-items:center;justify-items:center}
html.chat-box-custom-size #chatModal .chat-card{border-radius:20px}


/* V72: separate, explicit home live-preview sizing. */
#home-matches{transition:width .18s ease}
#home-matches #matchesGrid{transition:height .18s ease,min-height .18s ease,max-height .18s ease}


/* V73: restore the original responsive full/private chat sizing. */
html #chatModal{overflow:hidden!important;}
html #chatModal .chat-card{
  transform:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
@media(max-width:700px){
  html #chatModal{padding:0!important;align-items:stretch!important;justify-items:stretch!important;}
  html #chatModal .chat-card{
    width:100%!important;max-width:100%!important;
    height:100dvh!important;max-height:100dvh!important;
    min-height:0!important;border-radius:0!important;
  }
}
@media(min-width:701px){
  html #chatModal .chat-card{
    width:min(100%,600px)!important;max-width:600px!important;
    height:min(90dvh,720px)!important;max-height:90dvh!important;
  }
}
/* V76 safety, chat preferences and legal links */
.chat-head-actions{display:flex;align-items:center;gap:7px;margin-inline-start:auto}
.chat-head-tool{width:38px;height:38px;border:1px solid rgba(127,127,127,.18);border-radius:12px;background:var(--card,#fff);font-size:18px;display:grid;place-items:center;cursor:pointer}
.chat-head-tool.danger{color:#c84b56}
.birtwin-info-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 6px}
.birtwin-info-links button{min-height:42px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px}
#profileActions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#profileActions button{min-height:40px;font-size:12px;padding:8px 10px}
.profile-presence b{font-weight:700}
@media(max-width:480px){.birtwin-info-links{grid-template-columns:1fr 1fr}.chat-head-tool{width:34px;height:34px;border-radius:10px}}
.post-viewer-owner{grid-template-columns:36px 1fr auto auto}
.post-report-button{color:#b64b58}
.blocked-user-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:8px}
.blocked-user-row img{width:44px;height:44px;border-radius:12px;object-fit:cover;background:#eee}
.blocked-user-row b,.blocked-user-row small{display:block}.blocked-user-row small{color:var(--muted);font-size:11px;margin-top:2px}


/* V77 CLEAN SAFETY / CHAT MENUS */
.chat-head-actions{position:relative;display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.chat-more-wrap,.profile-more-wrap{position:relative}
.chat-more-button,.profile-more-button{width:34px;height:34px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--text);font-size:23px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.chat-more-menu,.profile-more-menu{position:absolute;top:calc(100% + 7px);inset-inline-end:0;width:218px;background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:0 14px 38px rgba(20,18,30,.16);padding:6px;z-index:200}
.chat-more-menu button,.profile-more-menu button{width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:9px;text-align:start;padding:10px 11px;border-radius:10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.chat-more-menu button:hover,.profile-more-menu button:hover{background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.chat-more-menu button.danger,.profile-more-menu button.danger{color:#c94b57}
.chat-more-menu .menu-icon{width:22px;text-align:center;font-size:16px}
.compact-confirm-card{max-width:360px!important;text-align:center;padding:22px!important}
.compact-confirm-icon{width:52px;height:52px;border-radius:16px;margin:0 auto 10px;display:grid;place-items:center;background:color-mix(in srgb,#d74f5b 12%,var(--card));font-size:24px}
.compact-confirm-card h3{margin:0 0 6px;font-size:16px}.compact-confirm-card p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.7}
.compact-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.danger-confirm{background:#cf4f5a!important;border-color:#cf4f5a!important}

.birtwin-info-links{display:block!important;margin:14px 0 6px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--card)}
.birtwin-info-links button{width:100%;min-height:43px!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;justify-content:flex-start!important;padding:9px 12px!important;font-size:12px!important}
.birtwin-info-links button:last-child{border-bottom:0!important}.birtwin-info-links button span{flex:1;text-align:start}.birtwin-info-links button::after{content:'›';font-size:18px;color:var(--muted);margin-inline-start:auto}
.blocked-user-row{grid-template-columns:40px 1fr auto!important;padding:8px 9px!important;border-radius:12px!important;margin-bottom:6px!important}.blocked-user-row img{width:40px!important;height:40px!important;border-radius:10px!important}.blocked-user-row button{min-height:32px!important;padding:5px 9px!important;font-size:10px!important}
#profilePage .profile-top{position:relative!important}#profilePage .profile-more-wrap{display:block!important}#profilePage .profile-top>span{display:none!important}
@media(max-width:560px){.chat-more-menu,.profile-more-menu{width:min(220px,76vw)}}

/* V78: keep profile safety menu fully inside mobile viewport */
#profilePage .profile-top{position:relative!important;}
#profilePage .profile-more-wrap{position:absolute!important;left:0!important;right:auto!important;top:0!important;z-index:220!important;}
#profilePage .profile-more-menu{left:0;right:auto;inset-inline-start:auto!important;inset-inline-end:auto!important;max-width:calc(100vw - 20px);}
@media(max-width:560px){#profilePage .profile-more-menu{width:min(210px,calc(100vw - 20px))!important;}}

/* V79: profile safety menu sits on the opposite side of the avatar. */
#profilePage .profile-card{position:relative!important;}
#profilePage .profile-card>.profile-more-wrap{
  position:absolute!important;
  left:10px!important;
  right:auto!important;
  top:10px!important;
  z-index:260!important;
  display:block!important;
}
#profilePage .profile-card>.profile-more-wrap .profile-more-menu{
  left:0!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  max-width:calc(100vw - 24px)!important;
}
@media(max-width:560px){
  #profilePage .profile-card>.profile-more-wrap{left:8px!important;top:8px!important;}
  #profilePage .profile-card>.profile-more-wrap .profile-more-menu{width:min(210px,calc(100vw - 24px))!important;}
}

/* V79 final alignment: use logical end so ⋮ stays opposite the avatar in both RTL/LTR. */
#profilePage .profile-card>.profile-more-wrap{
  left:auto!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:10px!important;
}
#profilePage .profile-card>.profile-more-wrap .profile-more-menu{
  left:auto!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:0!important;
}
@media(max-width:560px){
  #profilePage .profile-card>.profile-more-wrap{inset-inline-end:8px!important;}
}

/* V80: own profile has no safety menu; other profiles keep the menu higher so it never covers metadata. */
#profilePage .profile-card>.profile-more-wrap{
  top:-8px!important;
}
@media(max-width:560px){
  #profilePage .profile-card>.profile-more-wrap{top:-6px!important;}
}
/* V81 administration warning */
.admin-warning-card{max-width:440px}
.admin-warning-body{padding:18px 16px;margin:8px 0 16px;border:1px solid rgba(245,158,11,.28);background:rgba(245,158,11,.08);border-radius:16px;white-space:pre-wrap;line-height:1.8;font-weight:700;color:var(--text)}