/* ================================================================
   PiyariBook — saara CSS
   ================================================================ */


:root{
  --blue:#0d44c5; --blue-d:#0a3aa8; --green:#27ae60; --green-d:#1f9152; --brand-red:#e8174c; --brand-red-d:#c9103f; --brand-blue:#0435af;
  --bg:#f0f2f5; --card:#ffffff; --hover:#f2f2f2; --hover2:#e4e6eb;
  --text:#050505; --text2:#65676b; --line:#ced0d4; --line2:#e4e6eb;
  --shadow:0 1px 2px rgba(0,0,0,.1); --shadow2:0 8px 24px rgba(0,0,0,.18);
  --like:#1877f2; --love:#f33e58; --care:#f7b125; --haha:#f7b125; --wow:#f7b125; --sad:#f7b125; --angry:#e9710f;
  --radius:8px; --nav-h:56px; --accent:#e8174c;
}
/* (v41) overscroll-behavior-y:contain HATAYA — kuch Android phones par isse
   Home feed ka scroll atak jaata tha. Pull-to-refresh JS khud sambhal leta hai. */
#seeNewPostsBtn.has-new{background:#eef4ff;border:1px solid #b8ccff;box-shadow:0 2px 10px rgba(13,68,197,.12)}
html[data-theme="dark"] #seeNewPostsBtn.has-new,html[data-theme="midnight"] #seeNewPostsBtn.has-new{background:#1d3150;border-color:#355b94}
html[data-theme="dark"]{
  --bg:#18191a; --card:#242526; --hover:#3a3b3c; --hover2:#4e4f50;
  --text:#e4e6eb; --text2:#b0b3b8; --line:#3e4042; --line2:#3a3b3c;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow2:0 8px 24px rgba(0,0,0,.5);
}
html[data-theme="midnight"]{
  --bg:#0d1b2a; --card:#16263a; --hover:#1f3551; --hover2:#27425f;
  --text:#e6eefc; --text2:#9fb3cc; --line:#264058; --line2:#1f3450;
  --blue:#4d9fff; --blue-d:#3d86e0; --brand-blue:#4d9fff; --like:#4d9fff;
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow2:0 8px 24px rgba(0,0,0,.6);
}
html[data-theme="rose"]{ --blue:#e8174c; --blue-d:#c9103f; --brand-blue:#e8174c; --like:#e8174c }
html[data-theme="green"]{ --blue:#1f9152; --blue-d:#177a43; --brand-blue:#1f9152; --like:#1f9152 }
html[data-theme="purple"]{ --blue:#7c3aed; --blue-d:#6526c4; --brand-blue:#7c3aed; --like:#7c3aed }
html[data-theme="sunset"]{ --blue:#e9710f; --blue-d:#c95f0a; --brand-blue:#e9710f; --like:#e9710f }
/* google translate cleanup */
.goog-te-banner-frame,.goog-te-gadget-icon,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
body{top:0!important}
.goog-te-gadget{font-size:0!important}
.goog-tooltip,.goog-text-highlight{background:none!important;box-shadow:none!important}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* no native text-selection / callout menu on UI controls; keep it on real content */
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
.msg,input,textarea,select,[contenteditable=true]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-touch-callout:default}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.34}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:15px}
a{color:var(--blue);text-decoration:none}
.hidden{display:none!important}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::selection{background:var(--blue);color:#fff}

/* ===== AUTH ===== */
#auth{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:16px}
.auth-box{width:100%;max-width:980px;display:flex;gap:40px;align-items:center;flex-wrap:wrap;justify-content:center}
.auth-hero{flex:1;min-width:300px;max-width:480px}
.auth-hero .logo{color:var(--blue);font-size:60px;font-weight:800;letter-spacing:-3px;margin-bottom:8px}
.auth-hero p{font-size:26px;line-height:1.3}
.auth-card{background:var(--card);border-radius:12px;box-shadow:var(--shadow2);padding:20px;width:100%;max-width:396px}
.auth-card input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:6px;margin-bottom:12px;background:var(--card);color:var(--text)}
.auth-card input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px #e7f3ff}
.btn-primary{width:100%;padding:13px;background:var(--blue);color:#fff;border-radius:6px;font-size:19px;font-weight:700}
.btn-primary:hover{background:var(--blue-d)}
.btn-green{background:var(--green);color:#fff;padding:11px 16px;border-radius:6px;font-size:17px;font-weight:700}
.btn-green:hover{background:var(--green-d)}
.auth-card .forgot{display:block;text-align:center;color:var(--blue);font-size:14px;margin:14px 0}
.auth-divider{height:1px;background:var(--line2);margin:16px 0}
.auth-card .switch{display:flex;justify-content:center;margin-top:6px}
.auth-err{color:#f33e58;font-size:13px;margin-bottom:10px;text-align:center;min-height:16px}
.seed-hint{text-align:center;font-size:12px;color:var(--text2);margin-top:14px}

/* ===== TOP NAV ===== */
#app{display:none}
.nav{position:sticky;top:0;height:var(--nav-h);background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;padding:0 16px;z-index:100;gap:8px}
.nav-left{display:flex;align-items:center;gap:8px;flex:1}
.nav-logo{display:flex;align-items:baseline;flex-shrink:0;font-weight:800;letter-spacing:-.5px;line-height:1;white-space:nowrap;font-size:23px;background:none;box-shadow:none;width:auto;height:auto;overflow:visible;border-radius:0}
.nav-logo .pbr{color:var(--brand-red)}
.nav-logo .pbc{color:#1877f2;font-size:13px;font-weight:700;margin-left:1px}
.search{display:flex;align-items:center;background:var(--bg);border-radius:50px;padding:0 12px;height:40px;max-width:240px;flex:1}
.search input{background:none;border:none;outline:none;color:var(--text);width:100%;margin-left:6px}
.nav-center{display:flex;gap:4px;flex:2;justify-content:center;max-width:600px}
.nav-tab{width:56px;max-width:110px;flex:1;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text2);position:relative}
.nav-tab:hover{background:var(--hover)}
.nav-tab.active{color:var(--blue)}
.nav-tab.active::after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:3px;background:var(--blue);border-radius:2px}
.nav-right{display:flex;gap:8px;flex:1;justify-content:flex-end;align-items:center}
.nav-icon{width:40px;height:40px;border-radius:50%;background:var(--hover2);display:flex;align-items:center;justify-content:center;font-size:20px;position:relative}
.nav-icon:hover{background:var(--line)}
.nav-icon .avatar{width:40px;height:40px}
.grid9{display:grid;grid-template-columns:repeat(3,4px);grid-template-rows:repeat(3,4px);gap:3px}
.grid9 i{width:4px;height:4px;border-radius:1px;background:var(--text)}
.am-title{font-weight:800;font-size:15px;margin:6px 0 8px}
.am-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px}
.am-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:12px;background:var(--hover2);cursor:pointer;text-align:center;font-weight:600;font-size:13px}
.am-tile:hover{background:var(--line)}
.am-ic{font-size:26px;line-height:1}
.story-choose{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:6px 0}
.story-choice{width:168px;height:256px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;font-weight:700;text-align:center;cursor:pointer;padding:16px;transition:transform .15s}
.story-choice:hover{transform:translateY(-3px)}
.story-choice .sc-ic{width:54px;height:54px;border-radius:50%;background:#fff;color:#222;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}
.sv-cap{position:absolute;left:0;right:0;bottom:54px;text-align:center;color:#fff;font-size:18px;font-weight:600;padding:10px 16px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.reel-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--line);border-radius:12px;padding:36px 16px;cursor:pointer;margin-bottom:12px;text-align:center}
.reel-drop:hover{background:var(--hover2)}
.reel-drop .rd-ic{width:54px;height:54px;border-radius:50%;background:var(--hover2);display:flex;align-items:center;justify-content:center;font-size:24px}
.grp-wrap{display:flex;gap:18px}
.grp-form{flex:0 0 300px;display:flex;flex-direction:column;gap:10px}
.grp-form input,.grp-sel{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--hover2);color:var(--text);font-size:15px}
.grp-desc{font-size:12px;color:var(--text2);margin:-4px 0 4px}
.grp-admin{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.grp-prev{flex:1;min-width:0}
.grp-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.grp-cover{height:180px;background:linear-gradient(135deg,#c7c9cc,#e3e4e6);display:flex;align-items:center;justify-content:center;font-size:46px;letter-spacing:8px}
.grp-tabs{display:flex;gap:18px;margin:14px 0;color:var(--text2);font-weight:600;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.grp-fakecomposer{background:var(--hover2);border-radius:30px;padding:10px 16px;color:var(--text2)}
@media(max-width:720px){.grp-wrap{flex-direction:column}.grp-form{flex:none}}
.badge{position:absolute;top:-2px;right:-2px;background:#f02849;color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}

.avatar{border-radius:50%;object-fit:cover;background:var(--hover2);flex-shrink:0}
.avatar-txt{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;background:var(--blue)}

/* ===== LAYOUT ===== */
.layout{display:flex;max-width:1400px;margin:0 auto;gap:16px;padding:16px;align-items:flex-start}
.col-left,.col-right{width:300px;flex-shrink:0;position:sticky;top:calc(var(--nav-h) + 16px)}
.col-main{flex:1;max-width:620px;margin:0 auto;min-width:0}
.side-item{display:flex;align-items:center;gap:12px;padding:8px 8px;border-radius:8px;cursor:pointer;font-weight:600}
.side-item:hover{background:var(--hover)}
.side-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--hover2)}
.side-sep{height:1px;background:var(--line2);margin:8px 4px}
.side-title{color:var(--text2);font-weight:700;padding:8px;font-size:17px}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.pad{padding:12px 16px}

/* ===== STORIES ===== */
.stories{display:flex;gap:8px;overflow-x:auto;padding:0;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{width:112px;height:200px;flex-shrink:0;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;background:var(--hover2)}
.story img{width:100%;height:100%;object-fit:cover}
.story-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-align:center;padding:10px;font-size:15px}
.story .ring{position:absolute;top:10px;left:10px;width:40px;height:40px;border-radius:50%;border:3px solid var(--blue);overflow:hidden}
.story .nm{position:absolute;bottom:8px;left:8px;right:8px;color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.story.add{background:var(--card)}
.story.add .top-img{height:130px;width:100%;object-fit:cover;background:var(--hover2)}
.story.add .plus{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;border:4px solid var(--card);display:flex;align-items:center;justify-content:center;font-size:22px}
.story.add .lbl{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-weight:600;font-size:13px;color:var(--text)}

/* ===== COMPOSER ===== */
.composer-top{display:flex;gap:8px;align-items:center}
.composer-input{flex:1;background:var(--hover2);border-radius:50px;padding:9px 16px;color:var(--text2);cursor:pointer}
.composer-input:hover{background:var(--line)}
.composer-actions{display:flex;border-top:1px solid var(--line2);margin-top:12px;padding-top:8px}
.composer-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:8px;color:var(--text2);font-weight:600;font-size:14px}
.composer-actions button:hover{background:var(--hover)}

/* ===== POST ===== */
.post-head{display:flex;align-items:center;gap:8px}
.post-author{font-weight:600}
.post-meta{color:var(--text2);font-size:13px;display:flex;align-items:center;gap:4px}
.post-menu-btn{margin-left:auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text2)}
.post-menu-btn:hover{background:var(--hover)}
.post-text{padding:0 16px 8px;white-space:pre-wrap;word-wrap:break-word}
.post-text.big{font-size:24px;font-weight:600}
.post-bg{min-height:280px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:28px;font-weight:700;padding:24px;white-space:pre-wrap}
.post-img{width:100%;max-height:600px;object-fit:cover;background:#000}
.post-stats{display:flex;align-items:center;padding:10px 16px;color:var(--text2);font-size:14px}
.react-bubbles{display:flex;align-items:center}
.react-bubbles span{font-size:16px;margin-right:-3px}
.post-stats .right{margin-left:auto;display:flex;gap:12px}
.post-actions{display:flex;border-top:1px solid var(--line2);padding:4px 8px}
.post-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:6px;color:var(--text2);font-weight:600;position:relative}
.post-actions button:hover{background:var(--hover)}
.post-actions button.reacted-like{color:var(--like)}
.post-actions button.reacted-love{color:var(--love)}
.post-actions button.reacted-haha,.post-actions button.reacted-wow,.post-actions button.reacted-sad,.post-actions button.reacted-care{color:var(--haha)}
.post-actions button.reacted-angry{color:var(--angry)}
.react-picker{position:absolute;bottom:46px;left:0;background:var(--card);border-radius:50px;box-shadow:var(--shadow2);display:flex;gap:4px;padding:6px 10px;z-index:20}
.react-picker span{font-size:30px;cursor:pointer;transition:transform .12s}
.react-picker span:hover{transform:scale(1.35) translateY(-6px)}

/* comments */
.comments{padding:4px 16px 12px}
.comment{display:flex;gap:8px;margin-top:10px}
.comment .body{background:var(--hover2);border-radius:16px;padding:8px 12px;display:inline-block;max-width:100%}
.comment .nm{font-weight:600;font-size:13px}
.comment .actions{display:flex;gap:14px;font-size:12px;font-weight:600;color:var(--text2);padding:2px 12px;margin-top:2px}
.comment .actions span{cursor:pointer}
.comment .actions span:hover{text-decoration:underline}
.comment-box{display:flex;gap:8px;align-items:center;margin-top:12px}
.comment-box .field{flex:1;display:flex;align-items:center;background:var(--hover2);border-radius:50px;padding:6px 12px}
.comment-box input{flex:1;background:none;border:none;outline:none;color:var(--text)}
.comment-box .send{color:var(--blue);font-size:18px;padding:4px 8px}

/* ===== RIGHT contacts ===== */
.contact{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;cursor:pointer;font-weight:600;position:relative}
.inbox-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;cursor:pointer}
.inbox-row:hover{background:var(--hover)}
.contact:hover{background:var(--hover)}
.online-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#31a24c;border:2px solid var(--card);left:32px;bottom:8px}

/* ===== MODAL ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--card);border-radius:10px;width:100%;max-width:500px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow2)}
.modal-head{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--card)}
.modal-head h3{flex:1;text-align:center;font-size:20px}
.modal-x{width:40px;height:40px;border-radius:50%;background:var(--hover2);display:flex;align-items:center;justify-content:center;font-size:20px}
.modal-x:hover{background:var(--line)}
.modal-body{padding:16px}
.modal textarea{width:100%;border:none;outline:none;resize:none;background:none;color:var(--text);font-size:22px;min-height:120px}
.modal textarea.small{font-size:15px;min-height:60px}
.bg-picker{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.bg-swatch{width:36px;height:36px;border-radius:8px;cursor:pointer;border:2px solid transparent}
.bg-swatch.sel{border-color:var(--text)}
.opt-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;margin-top:12px}
.field-line{border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;background:var(--card);color:var(--text);margin-bottom:10px}
.field-line:focus{outline:none;border-color:var(--blue)}

/* ===== STORY VIEWER ===== */
.story-viewer{position:fixed;inset:0;background:#000;z-index:2000;display:flex;align-items:center;justify-content:center}
.sv-content{width:100%;max-width:420px;height:100%;max-height:92vh;border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.sv-content img{width:100%;height:100%;object-fit:cover}
.sv-bars{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:4px;z-index:3}
.sv-bar{flex:1;height:3px;background:rgba(255,255,255,.4);border-radius:2px;overflow:hidden}
.sv-bar i{display:block;height:100%;width:0;background:#fff}
.sv-top{position:absolute;top:20px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff}
.sv-close{position:absolute;top:18px;right:12px;color:#fff;font-size:26px;z-index:4}

/* ===== MESSENGER ===== */
.chat-window{position:fixed;bottom:0;right:80px;width:340px;height:480px;background:var(--card);border-radius:12px 12px 0 0;box-shadow:var(--shadow2);z-index:900;display:flex;flex-direction:column;overflow:hidden}
.call-ui{position:fixed;inset:0;z-index:5000;background:#0b0f14;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
.call-local{position:absolute;right:14px;top:14px;width:116px;height:158px;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.55);background:#000;z-index:3}
.call-center{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}
.call-center .avatar,.call-center .avatar-txt{width:110px!important;height:110px!important;box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.call-name{font-size:24px;font-weight:700}
.call-status{font-size:15px;opacity:.85}
.call-av.ring{animation:callPulse 1.2s ease-in-out infinite;border-radius:50%}
@keyframes callPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(46,204,113,.5)}50%{transform:scale(1.05);box-shadow:0 0 0 16px rgba(46,204,113,0)}}
.call-controls{position:absolute;bottom:42px;left:0;right:0;z-index:4;display:flex;gap:22px;justify-content:center}
.call-btn{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .15s}
.call-btn:hover{background:rgba(255,255,255,.32)}
.call-btn:active{transform:scale(.92)}
.call-btn.off{background:#fff;color:#111}
.call-btn.hang{background:#ec3b3b}
.call-btn.accept{background:#2ecc71}
.live-ui .live-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.live-badge{background:#ec3b3b;color:#fff;font-weight:800;font-size:12px;padding:4px 10px;border-radius:6px;letter-spacing:.5px}
.live-badge.sm{font-size:10px;padding:2px 6px;margin-left:4px}
.live-count{background:rgba(0,0,0,.45);color:#fff;font-weight:700;font-size:13px;padding:4px 10px;border-radius:14px}
.live-cmts{position:absolute;left:12px;bottom:74px;right:80px;z-index:5;max-height:42vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:none}
.live-cmts::-webkit-scrollbar{display:none}
.live-cmt{background:rgba(0,0,0,.42);color:#fff;font-size:14px;padding:6px 12px;border-radius:14px;align-self:flex-start;max-width:100%;backdrop-filter:blur(2px)}
.live-cmt b{color:#7fd0ff}
.live-input{position:absolute;left:12px;right:12px;bottom:16px;z-index:6;display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.12);border-radius:24px;padding:6px 8px;backdrop-filter:blur(6px)}
.live-input input{flex:1;background:none;border:none;outline:none;color:#fff;padding:8px 10px;font-size:15px}
.live-input input::placeholder{color:rgba(255,255,255,.7)}
/* trending */
.trend-chip{background:var(--hover);border:1px solid var(--line);border-radius:16px;padding:6px 13px;font-size:14px;font-weight:600;color:var(--blue);cursor:pointer}
.trend-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.trend-rank{background:linear-gradient(90deg,#ff6a00,#ff2d78);color:#fff;font-weight:700;font-size:13px;padding:6px 16px;border-radius:12px 12px 0 0}
/* live gifts */
.gift-btn{font-size:19px}
.gift-cmt{background:linear-gradient(90deg,rgba(255,106,0,.75),rgba(255,45,120,.75))}
.gift-sheet{position:absolute;left:12px;right:12px;bottom:72px;z-index:8;background:rgba(20,20,28,.92);border-radius:16px;padding:14px;backdrop-filter:blur(8px)}
.gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gift-item{text-align:center;padding:8px 4px;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.07)}
.gift-item:active{background:rgba(255,255,255,.2);transform:scale(.95)}
.gift-emo{font-size:26px}
.gift-name{font-size:11px;color:rgba(255,255,255,.85);margin-top:3px}
#giftFlyZone{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}
.gift-fly{position:absolute;bottom:80px;animation:giftFly 3s ease-out forwards;opacity:0}
@keyframes giftFly{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1;transform:translateY(-40px) scale(1.15)}70%{opacity:1}100%{transform:translateY(-64vh) scale(1) rotate(14deg);opacity:0}}
.live-input .send{color:#fff;font-size:20px;cursor:pointer;padding:0 8px}
.live-card{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-left:4px solid #ec3b3b;border-radius:12px;padding:10px 12px;margin-bottom:16px;cursor:pointer;box-shadow:var(--shadow)}
.live-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.live-setup-prev{position:relative;width:100%;aspect-ratio:16/10;background:#000;border-radius:12px;overflow:hidden;margin-bottom:4px}
.live-setup-prev video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.btn-live{width:100%;padding:13px;border-radius:10px;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(135deg,#ff4d6d,#e8174c);box-shadow:0 4px 14px -4px #e8174c;letter-spacing:.3px}
.btn-live:hover{filter:brightness(1.07)}
.btn-live:active{transform:scale(.97)}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line2);background:var(--card)}
.chat-head .nm{font-weight:700;line-height:1.15}
.chat-head .chat-sub{font-size:12px;color:var(--text2)}
.chat-head .chat-sub.on{color:#31a24c;font-weight:600}
.chat-body{flex:1;overflow-y:auto;padding:10px 10px 4px;display:flex;flex-direction:column;gap:2px;background:var(--bg)}
.chat-body::before{content:"";margin-top:auto}
.enc-banner{display:none;text-align:center;font-size:11.5px;color:var(--text2);background:var(--hover2);padding:7px 12px;line-height:1.4}
.enc-banner b{color:var(--text)}
.chat-date{align-self:center;background:var(--hover2);color:var(--text2);font-size:11px;font-weight:600;padding:3px 12px;border-radius:12px;margin:10px 0 6px}
.msg-wrap{display:flex;flex-direction:column;max-width:78%;margin-bottom:2px}
.msg-wrap.me{align-self:flex-end;align-items:flex-end}
.msg-wrap.them{align-self:flex-start;align-items:flex-start}
.msg{padding:8px 13px;border-radius:18px;word-wrap:break-word;white-space:pre-wrap;line-height:1.35}
.msg.them{background:var(--hover2);color:var(--text);border-bottom-left-radius:5px}
.msg.me{background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.msg-meta{font-size:10px;color:var(--text2);margin:1px 8px 0;display:flex;gap:4px;align-items:center}
.typing{display:flex;gap:4px;padding:10px 14px;background:var(--hover2);border-radius:16px;align-self:flex-start;margin-top:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--text2);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat-input{display:flex;gap:4px;padding:8px 8px;align-items:center;border-top:1px solid var(--line2);background:var(--card)}
.chat-input input{flex:1;min-width:60px;background:var(--hover2);border:none;border-radius:50px;padding:10px 14px;outline:none;color:var(--text)}
.chat-input .send{color:#fff;background:var(--blue);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.chat-input .send:hover{background:var(--blue-d)}
.chat-input .cmic{font-size:19px;cursor:pointer;flex-shrink:0;width:32px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.chat-input .cmic:hover{background:var(--hover)}
.chat-input .cmic.rec{color:#e8174c}
.vrec-bar{flex:1;display:flex;align-items:center;gap:8px;color:var(--text);font-size:14px;padding:9px 14px;background:var(--hover2);border-radius:50px}
.vrec-dot{width:10px;height:10px;border-radius:50%;background:#e8174c;animation:callPulse 1s infinite;flex-shrink:0}
.msg.voice{padding:6px 8px!important}
.msg.voice audio{display:block;width:210px;max-width:46vw;height:36px}
.msg.media{padding:3px!important;background:transparent!important;max-width:72%}
.msg.media img{max-width:200px;max-height:240px;border-radius:12px;display:block;cursor:pointer}
.msg.media .vid-embed{width:220px;max-width:60vw;margin:0}
.emoji-pop{position:fixed;z-index:950;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow2);padding:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;max-width:230px}
.emoji-pop span{font-size:22px;cursor:pointer;text-align:center;padding:5px;border-radius:8px}
.emoji-pop span:hover{background:var(--hover)}

/* ===== GRID PAGES ===== */
.page-wrap{max-width:1000px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.tile{background:var(--card);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer}
.tile img{width:100%;height:140px;object-fit:cover}
.tile .info{padding:8px 10px}
.tile .price{font-weight:700}
.tile .ttl{color:var(--text2);font-size:13px}
.people-card{background:var(--card);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;text-align:center}
.people-card .ph{height:160px;width:100%;object-fit:cover}
.people-card .pb{padding:10px}
.btn-blue{background:var(--blue);color:#fff;padding:8px;border-radius:6px;font-weight:600;width:100%}
.btn-blue:hover{background:var(--blue-d)}
.btn-grey{background:var(--hover2);color:var(--text);padding:8px;border-radius:6px;font-weight:600;width:100%}
.btn-grey:hover{background:var(--line)}

/* ===== PROFILE ===== */
.cover{height:340px;background:linear-gradient(135deg,#1877f2,#5f9bff);border-radius:0 0 12px 12px;position:relative;background-size:cover;background-position:center}
.profile-head{max-width:940px;margin:0 auto;padding:0 16px;display:flex;align-items:flex-end;gap:16px;margin-top:-90px;position:relative;flex-wrap:wrap}
.profile-avatar{width:168px;height:168px;border-radius:50%;border:4px solid var(--card);object-fit:cover;background:var(--hover2)}
.profile-name{font-size:32px;font-weight:800}
.profile-sub{color:var(--text2);font-weight:600}
.profile-tabs{display:flex;gap:4px;border-top:1px solid var(--line2);max-width:940px;margin:16px auto 0;padding:0 16px}
.profile-tabs button{padding:14px 16px;font-weight:600;color:var(--text2);border-bottom:3px solid transparent}
.profile-tabs button.active{color:var(--blue);border-color:var(--blue)}
.friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px}
.friend-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border-radius:12px;cursor:pointer;text-align:center;transition:background .15s,transform .15s}
.friend-cell:hover{background:var(--hover2);transform:translateY(-2px)}
.friend-cell .avatar,.friend-cell .avatar-txt{width:90px!important;height:90px!important}
.friend-cell .fc-name{font-weight:600;font-size:14px;word-break:break-word}
.lang-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;cursor:pointer}
.lang-row:hover{background:var(--hover2)}
.lang-row.on{background:color-mix(in srgb,var(--blue) 14%,transparent)}
.lr-native{font-weight:600}
.lr-en{color:var(--text2);font-size:13px}
.lr-check{margin-left:auto;color:var(--blue);font-weight:800}
@media(max-width:760px){
  .cover{height:190px;border-radius:0 0 10px 10px}
  .profile-head{flex-direction:column;align-items:flex-start;gap:6px;margin-top:-64px;padding:0 14px}
  .profile-avatar{width:120px;height:120px;border-width:4px}
  .profile-head>div{padding-bottom:0!important;width:100%}
  .profile-name{font-size:24px;line-height:1.18;word-break:break-word;margin-top:2px}
  .profile-sub{font-size:14px}
}

/* ===== TOAST ===== */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#222;color:#fff;padding:10px 18px;border-radius:8px;font-weight:600;box-shadow:var(--shadow2);animation:tin .25s}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1}}

/* dropdown menu */
.menu{position:absolute;background:var(--card);border-radius:8px;box-shadow:var(--shadow2);padding:6px;z-index:500;min-width:200px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.menu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;font-weight:600;cursor:pointer}
.menu-item:hover{background:var(--hover)}
.menu-sep{height:1px;background:var(--line2);margin:4px 0}

.empty{text-align:center;color:var(--text2);padding:40px 16px}
.sponsor-img{width:100%;height:140px;object-fit:cover;border-radius:8px}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){.col-right{display:none}}
@media(max-width:900px){
  .col-left{display:none}
  .nav-center{position:fixed;bottom:0;left:0;right:0;background:var(--card);height:52px;max-width:none;box-shadow:0 -1px 2px rgba(0,0,0,.1);z-index:100}
  .nav-tab.active::after{top:-4px;bottom:auto}
  .layout{padding:8px 0 60px}
  .col-main{padding:0 8px}
  body{padding-bottom:0}
}
@media(max-width:520px){
  .search{max-width:40px}.search input{display:none}
  .nav-center{gap:0}
  .chat-window{right:0;left:0;width:100%;height:100%;top:0;border-radius:0}
  .auth-hero{text-align:center}
  .auth-hero .logo{font-size:44px}.auth-hero p{font-size:18px}
}
/* ===== 📱 MOBILE-FRIENDLY POLISH ===== */
html,body{overflow-x:hidden;max-width:100%}
/* 🐞 BADA FIX (02-08): upar wala overflow-x:hidden hi Android Chrome par
   position:sticky ko TOD deta tha — isi wajah se scroll par upar ki
   PiyariBook patti (nav) gayab ho jaati thi. overflow-x:clip bilkul wahi
   kaam karta hai (side me kuch bahar na nikle) par sticky ZINDA rehta hai.
   Purane browser clip nahi samajhte to unme hidden hi lagega (pehle jaisa). */
@supports (overflow-x:clip){ html,body{overflow-x:clip} }
img,video{max-width:100%}
.modal{width:100%}
@media(max-width:640px){
  /* prevent iOS auto-zoom on input focus */
  input,textarea,select{font-size:16px!important}
  .overlay{padding:8px;align-items:flex-end}
  .modal{max-height:94vh;border-radius:14px 14px 0 0}
  .modal-body{padding-bottom:20px}
  /* profile tabs become swipeable */
  .profile-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:10px;padding:0 10px}
  .profile-tabs::-webkit-scrollbar{display:none}
  .profile-tabs button{white-space:nowrap;padding:12px 14px;flex:0 0 auto}
  /* tighter grids on phones */
  .am-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
  .friend-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .am-tile{padding:12px 4px;font-size:12px}
  .am-ic{font-size:22px}
  /* story chooser side-by-side fit */
  .story-choice{width:46%;height:200px;min-width:140px}
  .story-choose{gap:10px}
  /* big buttons easier to tap */
  .btn-blue,.btn-grey,.btn-primary,.btn-green{min-height:42px}
  .menu-item{padding:11px 12px}
  /* headings not too huge */
  h2{font-size:20px}
  .page-wrap{padding-left:12px;padding-right:12px}
}
@media(max-width:380px){
  .story-choice{width:100%;height:180px}
}
/* ===== 📱 MOBILE for new features: calls, live, chat media, creator ===== */
@media(max-width:640px){
  /* voice/video calls */
  .call-controls{bottom:calc(30px + env(safe-area-inset-bottom));gap:18px}
  .call-btn{width:58px;height:58px;font-size:22px}
  .call-local{width:96px;height:130px;right:10px;top:calc(10px + env(safe-area-inset-top))}
  .call-center .avatar,.call-center .avatar-txt{width:96px!important;height:96px!important}
  .call-name{font-size:21px}
  /* live video */
  .live-top{padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
  .live-cmts{right:58px;bottom:70px;max-height:36vh}
  .live-input{bottom:calc(12px + env(safe-area-inset-bottom))}
  .live-setup-prev{aspect-ratio:4/5}
  .live-card{padding:9px 10px}
  /* messenger input + media bubbles */
  .chat-input{padding-bottom:calc(8px + env(safe-area-inset-bottom));gap:3px}
  .chat-input .cmic{width:30px;height:32px;font-size:18px}
  .chat-input input{min-width:48px;padding:9px 12px}
  .msg.media img{max-width:62vw}
  .msg.media .vid-embed{width:60vw}
  .msg.voice audio{width:56vw}
  .emoji-pop{max-width:min(230px,92vw)}
  /* creator program rings */
  .cp-card svg{width:104px!important;height:104px!important}
  .cp-hero div[style*="font-size:21px"]{font-size:18px!important}
}

/* ---- firebase-version extras ---- */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border:1px solid var(--line);border-radius:6px;font-weight:600;background:var(--card);color:var(--text);margin-bottom:12px}
.gbtn:hover{background:var(--hover)}
.gbtn img{width:20px;height:20px}
.spinner{width:40px;height:40px;border:4px solid var(--line2);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.upbadge{font-size:11px;color:var(--text2)}
#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--bg);z-index:5000;transition:opacity .45s ease}
#boot .boot-center{display:flex;flex-direction:column;align-items:center;gap:14px}
#boot .boot-heart{animation:bootPulse 1.3s ease-in-out infinite;filter:drop-shadow(0 10px 26px rgba(232,23,76,.45));line-height:0}
@keyframes bootPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
#boot .boot-name{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1}
#boot .boot-tag{font-size:13px;color:var(--text2)}
#boot .boot-from{position:absolute;bottom:36px;left:0;right:0;text-align:center;color:var(--text2);font-size:13px}
#boot .boot-from b{color:var(--brand-blue);font-weight:700}
#boot .spinner{width:30px;height:30px;border-width:3px;margin-top:4px}

/* ============ ✨ PROFESSIONAL POLISH LAYER ✨ ============ */
/* smooth transitions on interactive elements */
.nav-icon,.nav-tab,.btn-blue,.btn-grey,.btn-primary,.btn-green,.chip,.menu-item,.tile,.am-tile,.story-choice,.reel-drop,.composer-actions button,.composer-input,.bg-swatch,.story,.avatar,.theme-btn,.share-opt,.card,.grp-card{transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,background .18s ease,filter .2s ease,border-color .18s ease}
/* tactile press feedback */
.btn-blue:active,.btn-grey:active,.btn-primary:active,.btn-green:active,.chip:active,.nav-icon:active,.menu-item:active,.am-tile:active,.tile:active,.composer-actions button:active,.share-opt:active,.story-choice:active,.theme-btn:active,.bg-swatch:active{transform:scale(.95)}
/* hover lifts */
.tile:hover,.am-tile:hover,.story-choice:hover,.share-opt:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.16)}
.nav-icon:hover{transform:translateY(-1px)}
.nav-icon:hover .avatar{filter:brightness(1.06)}
.card:hover{box-shadow:0 4px 20px rgba(0,0,0,.09)}
.menu-item:hover{background:var(--hover)}
/* premium gradient primary buttons */
.btn-blue,.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-d));box-shadow:0 3px 10px -3px var(--blue)}
.btn-blue:hover,.btn-primary:hover{background:linear-gradient(135deg,var(--blue),var(--blue-d));filter:brightness(1.07);box-shadow:0 6px 16px -4px var(--blue)}
.btn-green{background:linear-gradient(135deg,var(--green),var(--green-d))}
.btn-green:hover{background:linear-gradient(135deg,var(--green),var(--green-d));filter:brightness(1.07)}
.btn-blue:disabled,.btn-primary:disabled{filter:saturate(.4) brightness(1.1);box-shadow:none;cursor:not-allowed}
/* story cards: smooth zoom + glow */
.story:not(.add){box-shadow:0 2px 10px rgba(0,0,0,.12)}
.story:not(.add):hover{box-shadow:0 10px 26px rgba(0,0,0,.22)}
.story:not(.add) img,.story:not(.add) .story-bg{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.story:not(.add):hover img,.story:not(.add):hover .story-bg{transform:scale(1.07)}
.story.add:hover .plus{transform:translateX(-50%) scale(1.12)}
.story.add .plus{transition:transform .18s ease}
/* refined sticky nav */
.nav{box-shadow:0 1px 0 var(--line2),0 2px 14px rgba(0,0,0,.05)}
/* avatar subtle ring */
.avatar{box-shadow:0 0 0 1px rgba(0,0,0,.04)}
/* modal + overlay entrance */
.overlay{animation:pbFade .2s ease}
.modal{animation:pbPop .28s cubic-bezier(.2,.85,.25,1)}
@keyframes pbFade{from{opacity:0}to{opacity:1}}
@keyframes pbPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
/* dropdown menu entrance */
.menu{animation:pbMenu .16s ease}
@keyframes pbMenu{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
/* smooth view entrance */
.page-wrap{animation:pbUp .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes pbUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* toast smoother */
.toast{animation:pbToast .3s cubic-bezier(.2,.85,.25,1)}
@keyframes pbToast{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
/* focus rings */
.modal input:focus,.modal textarea:focus,.modal select:focus,.grp-form input:focus,.grp-sel:focus,.composer input:focus,textarea:focus,.chip:focus{outline:none;border-color:var(--blue)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 20%,transparent)}
/* reaction beat */
.reel-btn.on .ic{animation:pbBeat .45s ease}
@keyframes pbBeat{0%{transform:scale(1)}30%{transform:scale(1.4)}55%{transform:scale(.9)}100%{transform:scale(1)}}
/* prettier scrollbar */
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--text2);background-clip:content-box}
html{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* spinner glow */
.spinner{box-shadow:0 0 0 0 transparent;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--blue) 30%,transparent))}
/* chips & inputs nicer */
.chip:hover{border-color:var(--blue);color:var(--blue)}
/* respect reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ============ end polish layer ============ */

/* ========================================================================
   UI POLISH LAYER (appended, override-only — no structure/JS touched)
   Goal: smoother, more premium feel than stock Facebook, theme-aware.
   ======================================================================== */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
:root{ --shadow:0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06); --shadow2:0 14px 38px rgba(0,0,0,.24); }
html[data-theme="dark"],html[data-theme="midnight"]{ --shadow:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3); }

/* smooth interactions — scoped to controls only (never a global * transition) */
.btn-blue,.btn-grey,.btn-green,.btn-primary,.btn-live,.call-btn,.gbtn,
.nav-icon,.nav-tab,.menu-item,.chip,.mp-chip,.contact,.post-menu-btn,
.reel-btn,.field-line,.composer-input,.avatar{
  transition:background-color .18s ease,color .18s ease,box-shadow .2s ease,
             transform .13s cubic-bezier(.2,.8,.3,1),filter .18s ease,border-color .18s ease;
}

/* cards: softer elevation, rounder, gentle desktop hover lift */
.card{ border-radius:14px; box-shadow:var(--shadow); transition:box-shadow .22s ease; }
@media(hover:hover){ .card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.10); } }

/* primary buttons: subtle depth + tactile press */
.btn-blue{ background:linear-gradient(180deg,var(--blue),var(--blue-d)); box-shadow:0 1px 2px rgba(0,0,0,.14); }
.btn-blue:active,.btn-grey:active,.btn-green:active,.btn-primary:active,.btn-live:active,.gbtn:active{ transform:scale(.97); filter:brightness(.97); }
@media(hover:hover){ .btn-blue:hover,.btn-primary:hover{ filter:brightness(1.07); } .btn-grey:hover{ background:var(--line2); } }

/* top + bottom nav: responsive taps */
.nav-icon:active{ transform:scale(.9); }
.nav-tab:active{ transform:scale(.92); }
.nav-tab.active{ color:var(--blue); }
@media(hover:hover){ .nav-icon:hover{ filter:brightness(1.08); } .nav-tab:hover{ background:var(--hover); } }

/* inputs: clean focus ring */
.field-line:focus,.composer-input:focus{ outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%, transparent); }

/* menus + chips */
@media(hover:hover){ .menu-item:hover{ background:var(--hover); } }
.menu-item:active{ background:var(--hover2); }
.chip:active,.mp-chip:active{ transform:scale(.95); }

/* overlays/modals: gentle fade (modal already pops) */
.overlay{ animation:pbFade .2s ease; }

/* avatars: crisp edge */
.avatar{ box-shadow:0 0 0 1px rgba(0,0,0,.05); }

/* reaction picker pop */
.react-picker{ animation:pbPop .2s cubic-bezier(.2,.85,.25,1); }

/* refined scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--text2) 32%, transparent); }
@media(hover:hover){ ::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--text2) 52%, transparent); } }

/* feed posts ease in (feels alive, re-animates on refresh = fresh) */
@keyframes pbRise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
#feedList>.card{ animation:pbRise .3s ease both; }
@media(prefers-reduced-motion:reduce){ #feedList>.card{ animation:none; } }


/* ===== VIDEO FIT (direct-uploaded videos size to their real shape) =====
   Portrait phone videos no longer sit tiny inside a 16:9 box with big black
   bars; landscape stays normal. iframe embeds (YouTube/Vimeo/FB) keep 16:9.
   Uses :has() — if a very old browser lacks it, video simply stays 16:9 (no break).
   Native controls already provide Fullscreen + Picture-in-Picture. */
.vid-embed:has(video){ aspect-ratio:auto; }
.vid-embed:has(video) video{ position:relative; inset:auto; width:100%; height:auto; max-height:82vh; object-fit:contain; background:#000; }
.msg.media .vid-embed:has(video) video{ max-height:300px; }       /* keep chat bubbles small */
.reel-video .vid-embed:has(video){ aspect-ratio:auto; height:100%; }
.reel-video .vid-embed:has(video) video{ position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:contain; }


/* ===== STORY REACTIONS + REPLY (Instagram-style) ===== */
.sv-actions{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));display:flex;flex-direction:column;gap:12px}
.sv-reply{display:flex;gap:8px;align-items:center}
.sv-reply input{flex:1;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.35);color:#fff;
  border-radius:24px;padding:11px 18px;font-size:14px;outline:none}
.sv-reply input::placeholder{color:rgba(255,255,255,.75)}
.sv-reply .svsend{color:#fff;font-size:22px;background:none;border:none;cursor:pointer;padding:4px 6px}
.sv-reacts{display:flex;justify-content:space-around;gap:4px}
.sv-react{font-size:30px;background:none;border:none;cursor:pointer;line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));transition:transform .12s ease}
.sv-react:active{transform:scale(1.45)}
.sv-fly{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);font-size:48px;pointer-events:none;z-index:9;animation:svFly 1s ease forwards}
@keyframes svFly{0%{opacity:0;transform:translateX(-50%) scale(.4)}25%{opacity:1;transform:translateX(-50%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-130px) scale(.9)}}


/* clickable hashtags */
.hashtag{color:var(--blue);cursor:pointer;font-weight:600}
.hashtag:active{opacity:.7}

/* ===== VIDEO COVER (video keeps its OWN ratio/size; cover fills that box) ===== */
.vid-embed.has-cover{position:relative;aspect-ratio:auto;background:#000;overflow:hidden;border-radius:8px}
.vid-embed.has-cover video{position:relative;display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;background:#000;z-index:1}
.vid-embed.has-cover .vid-cover{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;line-height:0;transition:opacity .25s ease}
.vid-embed.has-cover .vid-cover img{width:100%;height:100%;object-fit:cover;display:block}
.vid-cover-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;z-index:4;pointer-events:none}
.vid-embed.has-cover .vid-cover:active{filter:brightness(.92)}


/* ===== FRIENDS (Facebook-style) ===== */
.fr-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;-ms-overflow-style:none;scrollbar-width:none}
.fr-chips::-webkit-scrollbar{display:none}
.fr-chip{flex:0 0 auto;background:var(--hover2);color:var(--text);border:none;border-radius:20px;padding:9px 16px;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,transform .12s}
.fr-chip.on{background:var(--blue);color:#fff}
.fr-chip:active{transform:scale(.95)}
.fr-count{font-size:17px;font-weight:700;margin:6px 0 12px}
.fr-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line2)}
.fr-av{position:relative;flex:0 0 auto;cursor:pointer}
.fr-online{position:absolute;right:1px;bottom:1px;width:14px;height:14px;border-radius:50%;background:#31a24c;border:2.5px solid var(--card)}
.fr-info{flex:1;min-width:0;cursor:pointer}
.fr-name{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-sub{font-size:12.5px;color:var(--text2);margin-top:1px}
.fr-acts{display:flex;gap:8px;margin-top:6px}
.fr-more{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--hover2);color:var(--text);font-size:20px;border:none;cursor:pointer;line-height:1}
.fr-more:active{transform:scale(.92)}


/* ===== REEL OPTIONS SHEET (Facebook-style) ===== */
.reel-sheet-ov{align-items:flex-end;z-index:4000;background:rgba(0,0,0,.45)}
.reel-sheet{width:100%;max-width:560px;margin:0 auto;background:var(--card);border-radius:18px 18px 0 0;
  max-height:86vh;overflow-y:auto;padding:8px 12px calc(16px + env(safe-area-inset-bottom,0px));animation:pbSheet .25s cubic-bezier(.2,.85,.25,1)}
@keyframes pbSheet{from{transform:translateY(100%)}to{transform:none}}
.rs-grip{width:42px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 10px}
.rs-card{background:var(--bg);border-radius:14px;margin-bottom:10px;overflow:hidden}
.rs-item{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;transition:background .15s}
.rs-item:active{background:var(--hover)}
.rs-ic{font-size:22px;width:26px;text-align:center;flex:0 0 auto}
.rs-t{font-weight:600;font-size:15.5px}
.rs-d{font-size:12.5px;color:var(--text2);margin-top:1px}
.rs-badge{font-size:12px;color:var(--blue);font-weight:700;margin-left:4px}
.rs-item.dis{opacity:.45;pointer-events:none}
/* clear mode hides overlays */
.reel-clear .reel-side,.reel-clear .reel-info,.reel-clear .reel-back{opacity:0;pointer-events:none;transition:opacity .2s}


/* ===== MESSENGER (active row + compose) ===== */
.msgr-compose{margin-left:auto;background:var(--hover2);color:var(--text);width:38px;height:38px;border-radius:50%;font-size:18px;border:none;cursor:pointer}
.msgr-compose:active{transform:scale(.92)}
.msgr-active{display:flex;gap:14px;overflow-x:auto;padding:12px 14px 6px;scrollbar-width:none}
.msgr-active::-webkit-scrollbar{display:none}
.msgr-act{flex:0 0 auto;text-align:center;cursor:pointer;width:64px}
.msgr-act-dot{position:absolute;right:1px;bottom:2px;width:14px;height:14px;border-radius:50%;background:#31a24c;border:2.5px solid var(--card)}
.msgr-act-n{font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .15s}
.inbox-row:active{background:var(--hover)}


/* ===== CREATE REEL button (in Reels view) ===== */
.reel-create{position:fixed;top:calc(var(--nav-h) + 10px);right:12px;z-index:95;background:var(--blue);color:#fff;border:none;border-radius:22px;
  padding:8px 15px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.reel-create:active{transform:scale(.94)}
.reel-clear .reel-create{opacity:0;pointer-events:none;transition:opacity .2s}
/* Mobile: neeche bottom-nav (52px) hai — reels usse upar rahein, bottom menu bhi dikhe */
@media(max-width:900px){
  .reels-wrap{bottom:52px}
  .reel{height:calc(100vh - var(--nav-h) - 52px)}
}


/* ===== FB-STYLE GROUP PAGE ===== */
.grp-tabs{display:flex;gap:4px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.grp-tabs::-webkit-scrollbar{display:none}
.grp-tab{flex:0 0 auto;background:none;border:none;padding:13px 16px;font-weight:600;font-size:15px;color:var(--text2);cursor:pointer;border-bottom:3px solid transparent}
.grp-tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.grp-ab{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.grp-ab-ic{flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text)}
.grp-media{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.grp-media img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.inv-row{display:flex;align-items:center;justify-content:space-between;padding:9px 8px;border-radius:10px;cursor:pointer}
.inv-row:active{background:var(--hover)}
.inv-row input{width:20px;height:20px}


/* ===== FB-STYLE CALL POLISH ===== */
.call-ui.voice{background:linear-gradient(160deg,#7a2840 0%,#c2415f 55%,#e0617f 100%)}
.call-ui.voice .call-status{font-weight:600;letter-spacing:.3px}
.call-controls{gap:18px}
.call-btn{box-shadow:0 2px 10px rgba(0,0,0,.25)}
.call-btn:active{transform:scale(.9)}
.call-btn.off{background:#fff;color:#222}
.call-btn.hang{background:#fa3e3e}
.call-ui.voice .call-btn{background:rgba(255,255,255,.22)}
.call-ui.voice .call-btn.hang{background:#fa3e3e}


/* ===== APK SMOOTHNESS LAYER (TWA/PWA) ===== */
/* Skip rendering off-screen feed cards -> smooth scroll on long feeds.
   'auto' intrinsic-size remembers real height = no scroll jump. */
#feedList>.card,#wFeed>.card,#gFeed>.card{content-visibility:auto;contain-intrinsic-size:auto 480px}
/* Snappier taps, no 300ms delay, no double-tap zoom on controls */
a,button,.btn-blue,.btn-grey,.nav-icon,.call-btn,.reel-btn,[onclick]{touch-action:manipulation}
/* Momentum scrolling + isolate scroll inside modals/sheets (no body scroll-chain jank) */
.modal-body,.reel-sheet,.mp-cats,.profile-tabs,#activeRow,.msgr-active{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* GPU-composite overlays so they slide smoothly */
.overlay,.modal,.reel-sheet,.call-ui{will-change:transform;transform:translateZ(0)}
/* Avoid layout thrash from images while scrolling */
img{-webkit-user-drag:none}


/* ===== FEELING / ACTIVITY ===== */
.feeling{font-weight:400;color:var(--text2)}
.feel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.feel-cell{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.feel-cell:active{background:var(--hover)}
.feel-prev{display:inline-flex;align-items:center;gap:8px;background:var(--hover2);border-radius:18px;padding:6px 12px;margin-top:10px;font-size:14px}
.feel-x{cursor:pointer;color:var(--text2);font-weight:700;padding:0 2px}


/* ===== COMMENT REACTION PICKER ===== */
.creact-bar{position:fixed;z-index:6000;display:flex;gap:4px;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:6px 10px;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.creact-bar span{font-size:24px;cursor:pointer;transition:transform .12s;line-height:1}
.creact-bar span:active{transform:scale(1.35)}
.clike.on{color:var(--blue);font-weight:700}


/* ===== BOOST / ADVERTISE ===== */
.boost-pkg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
.boost-pkg:active{background:var(--hover)}
.boost-pkg input{width:20px;height:20px;flex-shrink:0}
.boost-pay{background:var(--hover2);border-radius:10px;padding:11px 12px;margin-top:10px;font-size:14px}


/* ===== BOOST CTA (visible button on own posts) ===== */
.boost-cta{padding:0 12px 10px}
.boost-cta button{width:100%;padding:9px;border:none;border-radius:8px;background:color-mix(in srgb,var(--blue) 14%,transparent);
  color:var(--blue);font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.boost-cta button:active{transform:scale(.98)}


/* ===== MOBILE FIT / RESPONSIVE LAYER (safe, additive) ===== */
/* 1) Kill accidental horizontal scroll (things spilling off the right edge) */
html,body{max-width:100%;overflow-x:hidden}
/* 2) Long words, links & code wrap instead of overflowing */
.post-text,.post-author,.post-meta,.comment .body,.msg,.menu-item,.upbadge,.card,.chat-head .nm,.inbox-row,.grp-ab,.fr-row,.boost-pay,.feel-prev,a{overflow-wrap:break-word;word-break:break-word}
/* 3) Flex children with text must be allowed to shrink (stops layout overflow) */
.post-head>div,.inbox-row>div,.menu-item>div,.chat-head>div,.fr-row>div,.contact>div,.msgr-act,.rs-item>div,.grp-ab>div,.inv-row>div,.boost-pkg>div{min-width:0}
/* 4) Media never wider than its box */
img,video{max-width:100%}
/* 5) Inputs / textareas / selects stay inside their container */
input,textarea,select,.field-line,.composer-input{max-width:100%;box-sizing:border-box}
textarea{resize:vertical}
/* 6) Comfortable tap targets */
button,.chip,.menu-item,.nav-icon,.mp-chip{min-height:40px}
.chip{min-height:34px}
/* 7) Modals & sheets always fit the screen */
.modal{max-width:min(96vw,560px)}
.modal-body{max-height:78vh;overflow-y:auto}
/* 8) Rows of buttons/chips wrap instead of overflowing */
.opt-row,.composer-actions{flex-wrap:wrap}
/* 9) Tighter spacing on very small phones */
@media(max-width:380px){
  .page-wrap{padding:12px}
  .modal-body{padding:12px}
  .pad{padding:12px}
  body{font-size:14.5px}
}


/* ===== CREATE REEL: two options ===== */
.reel-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.reel-opt{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:18px 10px;
  border:1.5px solid var(--line);border-radius:14px;cursor:pointer;background:var(--card);transition:background .15s,border-color .15s}
.reel-opt:active{background:var(--hover);border-color:var(--blue)}
.reel-opt .ro-ic{font-size:32px}
.reel-opt .ro-t{font-weight:700;font-size:15px}


/* ===== PiyariChat (WhatsApp-style) header ===== */
.wa-head{border-left:4px solid #25d366}
.wa-head h2{color:#128c7e}


/* ===== PiyariChat — separate WhatsApp-style world ===== */
.nav-pchat .pc-logo{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px}
.nav-pchat .pc-logo svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(14,138,110,.55))}
.pc-biglogo{width:92px;height:92px;margin:0 auto;filter:drop-shadow(0 8px 18px rgba(14,138,110,.35));animation:pcLogoPop .5s cubic-bezier(.2,.9,.3,1.2)}
.pc-biglogo svg{width:100%;height:100%}
@keyframes pcLogoPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.nav-pchat.active::after{background:#25d366}

#pcWorld{position:fixed;inset:0;z-index:4000;background:#eae6df}
.pc-shell{display:flex;flex-direction:column;height:100%;max-width:680px;margin:0 auto;background:#f7f5f2;position:relative}
.pc-top{background:#075e54;color:#fff;padding:14px 14px;display:flex;align-items:center;gap:10px;padding-top:calc(14px + env(safe-area-inset-top))}
.pc-title{font-size:20px;font-weight:700;flex:1}
.pc-top-actions{display:flex;gap:6px}
.pc-ic{background:rgba(255,255,255,.15);border:none;color:#fff;width:38px;height:38px;border-radius:50%;font-size:17px;cursor:pointer}
.pc-ic:active{transform:scale(.9)}
.pc-back{background:none;border:none;color:#fff;font-size:30px;cursor:pointer;line-height:1;padding:0 4px}
.pc-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff}
.pc-row{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.pc-row:active{background:#f0f0f0}
.pc-row-main{flex:1;min-width:0}
.pc-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pc-nm{font-weight:600;color:#111;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-time{font-size:12px;color:#888;flex-shrink:0}
.pc-time.un{color:#25d366;font-weight:700}
.pc-row-bot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.pc-prev{color:#667;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.pc-badge{width:10px;height:10px;border-radius:50%;background:#25d366;flex-shrink:0}
.pc-nav{display:flex;background:#fff;border-top:1px solid #e5e5e5;padding-bottom:env(safe-area-inset-bottom)}
.pc-navtab{flex:1;background:none;border:none;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:2px;color:#667;font-size:12px;font-weight:600;cursor:pointer}
.pc-navic{font-size:20px}
.pc-navtab.on{color:#075e54}
.pc-navtab.on .pc-navic{background:#d9f5e3;border-radius:14px;padding:2px 14px}
.pc-fab{position:absolute;right:18px;bottom:78px;width:56px;height:56px;border-radius:18px;background:#25d366;color:#fff;
  border:none;font-size:22px;cursor:pointer;box-shadow:0 4px 12px rgba(37,211,102,.5)}
.pc-fab:active{transform:scale(.94)}
.pc-btn{width:100%;padding:12px;border:none;border-radius:10px;background:#25d366;color:#fff;font-weight:700;font-size:15px;cursor:pointer;margin-top:8px}
.pc-btn:active{transform:scale(.98)}
.pc-me{display:flex;align-items:center;gap:14px;padding:18px 16px;background:#fff;border-bottom:1px solid #eee}
.pc-set-row{padding:15px 18px;border-bottom:1px solid #f0f0f0;cursor:pointer;font-weight:600;color:#222;background:#fff}
.pc-set-row:active{background:#f0f0f0}
.pc-settings{background:#f7f5f2;min-height:100%}


/* ===== PiyariChat: nav badge + new-message banner ===== */
.nav-pchat{position:relative}
.pc-nav-badge{position:absolute;top:2px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:#f02849;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.pc-nav-badge.hidden{display:none}
#pcBanner{position:fixed;top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;z-index:6000;
  background:#128c7e;color:#fff;border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;animation:pcbDrop .28s cubic-bezier(.2,.85,.25,1)}
@keyframes pcbDrop{from{transform:translateY(-120%);opacity:0}to{transform:translateY(0);opacity:1}}
.pcb-ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.pcb-main{flex:1;min-width:0}
.pcb-t{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcb-s{font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcb-go{font-weight:700;font-size:13px;flex-shrink:0;background:rgba(255,255,255,.2);padding:5px 10px;border-radius:10px}


#pcWorld{will-change:transform}

/* ===== PiyariChat full features ===== */
/* chats header: search + filter chips */
.pc-chead{position:sticky;top:0;z-index:5;background:#fff;padding:8px 10px 6px;border-bottom:1px solid #eee}
.pc-csearch{width:100%;box-sizing:border-box;border:none;background:#f0f2f5;border-radius:20px;padding:9px 14px;font-size:14px;outline:none}
.pc-chips{display:flex;gap:6px;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pc-chip{flex:0 0 auto;border:none;background:#f0f2f5;color:#54656f;font-size:13px;font-weight:600;padding:5px 13px;border-radius:14px;cursor:pointer}
.pc-chip.on{background:#25d366;color:#fff}
.pc-row{position:relative}
.pc-row-ic{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.pc-row-menu{background:none;border:none;color:#8696a0;font-size:20px;line-height:1;padding:4px 6px;cursor:pointer;align-self:center;border-radius:50%}
.pc-row-menu:hover{background:#0000000d}
.pc-badge.mut{background:#8696a0}
/* bottom sheet */
.pc-sheet-ov{position:fixed;inset:0;z-index:6200;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;animation:pcFade .15s}
@keyframes pcFade{from{opacity:0}to{opacity:1}}
.pc-sheet{width:100%;max-width:680px;margin:0 auto;background:#fff;border-radius:16px 16px 0 0;padding:8px;animation:pcUp .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pcUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pc-sheet-t{font-weight:700;font-size:15px;padding:10px 14px 6px;color:#111}
.pc-sheet-b{display:block;width:100%;text-align:left;background:none;border:none;padding:14px 16px;font-size:15px;color:#111;cursor:pointer;border-radius:10px}
.pc-sheet-b:hover{background:#f4f4f4}
.pc-sheet-b.cancel{color:#e0245e;font-weight:600;border-top:1px solid #eee;margin-top:4px}
/* status */
.pc-status-wrap{padding-bottom:20px}
.pc-status-me{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-bottom:8px solid #f0f2f5}
.pc-st-head{padding:10px 14px 4px;font-size:13px;font-weight:700;color:#8696a0;letter-spacing:.3px}
.pc-st-av{position:relative;flex:0 0 auto}
.pc-st-av.ring{padding:2px;border-radius:50%;background:conic-gradient(#25d366,#128c7e,#25d366)}
.pc-st-av.ring.seen{background:#ccd0d5}
.pc-st-av.ring>*{border:2px solid #fff;border-radius:50%}
.pc-st-plus{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;background:#25d366;color:#fff;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.pc-st-prev{border-radius:12px;min-height:120px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:600;text-align:center;padding:16px;word-break:break-word}
.pc-st-colors{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pc-st-col{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.pc-st-col.on{border-color:#111}
/* status viewer */
.pc-stv{position:fixed;inset:0;z-index:6300;background:#000;display:flex;flex-direction:column}
.pc-stv-top{padding:10px 12px;background:linear-gradient(#0009,transparent)}
.pc-stv-bars{display:flex;gap:4px;margin-bottom:8px}
.pc-stv-bar{flex:1;height:3px;background:#ffffff55;border-radius:2px;overflow:hidden}
.pc-stv-bar span{display:block;height:100%;width:0;background:#fff}
.pc-stv-user{display:flex;align-items:center;gap:8px;color:#fff}
.pc-stv-user>span:nth-of-type(1){font-weight:600}
.pc-stv-time{font-size:12px;opacity:.8}
.pc-stv-x{margin-left:auto;background:none;border:none;color:#fff;font-size:22px;cursor:pointer}
.pc-stv-body{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pc-stv-img{max-width:100%;max-height:100%;object-fit:contain}
.pc-stv-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:600;text-align:center;padding:30px;box-sizing:border-box;word-break:break-word}
.pc-stv-views{text-align:center;color:#fff;padding:14px;font-size:14px;cursor:pointer;background:linear-gradient(transparent,#0009)}
/* calls */
.pc-call-btn{background:none;border:none;color:#25d366;font-size:20px;cursor:pointer;padding:6px 8px;align-self:center}
.pc-call-out{color:#25d366;font-weight:700}
.pc-call-in{color:#4a5cff;font-weight:700}
/* settings */
.pc-set-sec{padding:14px 16px 4px;font-size:12px;font-weight:700;color:#25d366;letter-spacing:.4px;text-transform:uppercase}
.pc-set-row.toggle{display:flex;align-items:center;justify-content:space-between}
.pc-sw{width:40px;height:23px;border-radius:12px;background:#ccd0d5;position:relative;flex:0 0 auto;transition:.2s}
.pc-sw::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px #0003}
.pc-sw.on{background:#25d366}
.pc-sw.on::after{left:19px}
.pc-top-sub{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#075e54;color:#fff;font-weight:600;position:sticky;top:0;z-index:5}
/* chat wallpaper */
.chat-body{background:var(--pc-wall,var(--bg))!important;background-size:cover!important;background-position:center!important}
/* dark theme */
#pcWorld.pc-dark .pc-shell{background:#0b141a}
#pcWorld.pc-dark .pc-body{background:#0b141a}
#pcWorld.pc-dark .pc-chead{background:#111b21;border-color:#222d34}
#pcWorld.pc-dark .pc-csearch{background:#202c33;color:#e9edef}
#pcWorld.pc-dark .pc-chip{background:#202c33;color:#8696a0}
#pcWorld.pc-dark .pc-chip.on{background:#25d366;color:#0b141a}
#pcWorld.pc-dark .pc-nm{color:#e9edef}
#pcWorld.pc-dark .pc-prev,#pcWorld.pc-dark .pc-time{color:#8696a0}
#pcWorld.pc-dark .pc-row{border-color:#222d34}
#pcWorld.pc-dark .pc-set-row,#pcWorld.pc-dark .pc-status-me{color:#e9edef;border-color:#222d34}
#pcWorld.pc-dark .pc-nav{background:#111b21;border-color:#222d34}
#pcWorld.pc-dark .pc-navtab{color:#8696a0}
#pcWorld.pc-dark .pc-status-me{border-bottom-color:#0b141a}


/* ===== PiyariChat mobile-friendly tuning ===== */
/* bigger touch targets */
.pc-row-menu{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;padding:0}
.pc-call-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.pc-sheet-b{min-height:50px}
.pc-chip{min-height:32px}
.pc-set-row{min-height:50px;display:flex;align-items:center}
.pc-set-row.toggle{padding-right:16px}
.pc-navtab{min-height:52px;padding:6px 0}
.pc-navic{font-size:20px}
/* FAB clears bottom nav + home indicator */
.pc-fab{bottom:calc(80px + env(safe-area-inset-bottom));right:16px}
/* status viewer: respect notch + home indicator, prevent overscroll */
.pc-stv{overscroll-behavior:contain;touch-action:none}
.pc-stv-top{padding-top:calc(10px + env(safe-area-inset-top))}
.pc-stv-views{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.pc-stv-user>span:nth-of-type(1){max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* bottom sheet clears home indicator */
.pc-sheet{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
/* wrap long content, no horizontal overflow */
#pcWorld img,#pcWorld video{max-width:100%;height:auto}
.pc-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-prev{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;min-width:0}
.pc-row-main{min-width:0;flex:1}
.pc-status-me{gap:12px}
/* new-call modal: two call buttons fit */
#pcCallList .pc-row{gap:8px}
/* small phones */
@media(max-width:400px){
  .pc-row{padding:10px 12px;gap:10px}
  .pc-chead{padding:7px 10px 5px}
  .pc-csearch{padding:8px 12px;font-size:13px}
  .pc-st-prev{font-size:18px;min-height:110px}
  .pc-stv-text{font-size:22px;padding:24px}
  .pc-set-row,.pc-me{padding-left:14px;padding-right:14px}
  .pc-me{gap:12px}
  .pc-me .pc-nm{font-size:16px!important}
}
@media(max-width:340px){
  .pc-chip{padding:5px 10px;font-size:12px}
  .pc-stv-text{font-size:20px}
}


/* ===== PiyariChat desktop / wide-screen layout ===== */
@media(min-width:700px){
  #pcWorld{background:#d9dbd5}
  #pcWorld.pc-dark{background:#0a0f13}
  .pc-shell{max-width:760px;box-shadow:0 0 40px rgba(0,0,0,.18)}
  .pc-fab{right:calc((100vw - 760px)/2 + 18px)}
}
@media(min-width:1100px){
  .pc-shell{max-width:900px}
  .pc-fab{right:calc((100vw - 900px)/2 + 18px)}
}
/* status viewer stays centered & phone-width on desktop */
@media(min-width:700px){
  .pc-stv-top,.pc-stv-body,.pc-stv-views{max-width:460px;margin-left:auto;margin-right:auto;width:100%}
  .pc-stv-body{border-radius:0}
}


/* ===== PiyariChat find-friends ===== */
.pc-find-cta,.pc-find-card{display:flex;align-items:center;gap:14px;padding:14px;cursor:pointer;background:#fff;border:1px solid #eee;border-radius:14px;margin-bottom:10px}
.pc-find-cta{border-radius:0;border:none;border-bottom:8px solid #f0f2f5;margin-bottom:0}
.pc-find-card:hover,.pc-find-cta:hover{background:#f7fbf9}
.pc-find-ic{width:46px;height:46px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.pc-find-card .pc-prev,.pc-find-cta .pc-prev{white-space:normal}
#pcWorld.pc-dark .pc-find-card{background:#111b21;border-color:#222d34}
#pcWorld.pc-dark .pc-find-cta{background:#111b21;border-bottom-color:#0b141a}


/* PiyariChat se khula chat window pcWorld(4000) ke UPAR aaye */
.chat-window.pc-chat{z-index:4600}


/* ===== PiyariChat chat = WhatsApp look (Messenger se alag) ===== */
/* green header */
.chat-window.pc-chat .chat-head{background:#075e54;border-bottom:none}
.chat-window.pc-chat .chat-head .nm{color:#fff;font-weight:600}
.chat-window.pc-chat .chat-head .chat-sub{color:#cfeee4}
.chat-window.pc-chat .chat-head .chat-sub.on{color:#a8f0c6}
.chat-window.pc-chat .chat-head span,
.chat-window.pc-chat .chat-head [onclick]{color:#fff}
/* wallpaper (WhatsApp beige doodle default; user wallpaper overrides) */
.chat-window.pc-chat .chat-body{
  background:var(--pc-wall,#e5ddd5)!important;
  background-image:var(--pc-wall,linear-gradient(0deg,rgba(0,0,0,.015),rgba(0,0,0,.015))),
    radial-gradient(circle at 20% 30%,rgba(0,0,0,.02) 0 2px,transparent 2px),
    radial-gradient(circle at 70% 60%,rgba(0,0,0,.02) 0 2px,transparent 2px)!important;
  background-size:auto,26px 26px,32px 32px!important;
}
/* WhatsApp bubbles: outgoing light-green, incoming white */
.chat-window.pc-chat .msg.me{background:#d9fdd3;color:#111b21;border-bottom-right-radius:4px}
.chat-window.pc-chat .msg.them{background:#fff;color:#111b21;border-bottom-left-radius:4px;box-shadow:0 1px .5px rgba(0,0,0,.08)}
.chat-window.pc-chat .msg-meta{color:#5b7083}
.chat-window.pc-chat .chat-date{background:#d8efff;color:#5b7083}
/* input bar WhatsApp style */
.chat-window.pc-chat .chat-input{background:#f0f2f5;border-top:none}
.chat-window.pc-chat .chat-input #chatInput{background:#fff;border-radius:20px;padding:9px 14px}
.chat-window.pc-chat .chat-input .send{background:#25d366;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.chat-window.pc-chat .enc-banner{background:#fef6d5;color:#7a6a2f}
.chat-window.pc-chat .enc-banner b{color:#5a4d1f}
/* dark mode PiyariChat chat */
#pcWorld.pc-dark ~ .chat-window.pc-chat .chat-body,
.chat-window.pc-chat.dark .chat-body{background:#0b141a!important}


/* ===== icons thoda bade ===== */
/* main app bottom nav */
.nav-tab{font-size:27px}
/* PiyariChat top icons (👥 ✏️ 🏠) */
.pc-ic{width:42px;height:42px;font-size:20px}
/* PiyariChat bottom tabs (Chats/Updates/Calls/Settings) */
.pc-navic{font-size:24px}
.pc-navtab{font-size:12.5px}
/* chat input icons (📷🎤😊) + send */
.chat-input .cmic{font-size:22px;width:36px;height:38px}
.chat-input .send{width:42px;height:42px;font-size:19px}
@media(max-width:400px){
  .chat-input .cmic{width:33px;height:36px;font-size:21px}
}


/* ===== PiyariChat WhatsApp-style contact info ===== */
.pc-cprof{position:fixed;inset:0;z-index:5200;background:#f0f2f5;overflow-y:auto;max-width:680px;margin:0 auto;left:0;right:0}
.pc-cprof-top{position:sticky;top:0;display:flex;align-items:center;gap:12px;background:#075e54;color:#fff;padding:14px;padding-top:calc(14px + env(safe-area-inset-top));font-weight:600;font-size:16px;z-index:2}
.pc-cprof-back{background:none;border:none;color:#fff;font-size:26px;cursor:pointer;line-height:1;padding:0 4px}
.pc-cprof-body{padding-bottom:30px}
.pc-cprof-av{background:#fff;display:flex;justify-content:center;padding:26px 0 16px}
.pc-cprof-av .avatar,.pc-cprof-av .avatar-txt{width:132px!important;height:132px!important;font-size:52px!important}
.pc-cprof-name{background:#fff;text-align:center;font-size:22px;font-weight:700;color:#111b21;padding-bottom:4px}
.pc-cprof-num{background:#fff;text-align:center;color:#25d366;font-weight:600;font-size:15px;padding-bottom:20px}
.pc-cprof-num.locked{color:#8696a0;font-weight:500;font-size:13px}
.pc-cprof-actions{background:#fff;display:flex;justify-content:center;gap:30px;padding:0 0 22px;border-bottom:8px solid #eef0f2}
.pc-cprof-actions button{background:none;border:none;color:#075e54;font-weight:600;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.pc-cprof-actions button span{font-size:24px;width:52px;height:52px;border-radius:50%;background:#e7f7ef;display:flex;align-items:center;justify-content:center}
.pc-cprof-card{background:#fff;margin-top:8px;padding:16px}
.pc-cprof-lbl{color:#25d366;font-size:12px;font-weight:700;margin-bottom:4px}
.pc-cprof-about{color:#111b21;font-size:15px;word-break:break-word}
.pc-cprof-card.danger{color:#e0245e;font-weight:600;cursor:pointer}
.pc-picview{position:fixed;inset:0;z-index:5400;background:#000;display:flex;align-items:center;justify-content:center}
.pc-picview img{max-width:100%;max-height:100%;object-fit:contain}


/* PiyariBook nav icons aur bade */
.nav-tab{font-size:30px}
@media(max-width:400px){.nav-tab{font-size:28px}}


/* sabhi PiyariBook icons thode bade */
.nav-icon{width:44px;height:44px;font-size:24px}
.nav-icon .avatar{width:44px;height:44px}
.nav-tab .pc-logo{font-size:26px}
@media(max-width:400px){
  .nav-icon{width:40px;height:40px;font-size:22px}
  .nav-icon .avatar{width:40px;height:40px}
}

/* ===== DESKTOP "FACEBOOK FEEL" POLISH PACK (added) ===== */
@media (min-width:1000px){
  /* smooth feel */
  .card,.story,.composer-input,.post-actions button,
  .composer-actions button,.side-item,.post-menu-btn{
    transition:box-shadow .18s ease, transform .15s ease, background .15s ease;
  }
  .card{box-shadow:0 1px 2px rgba(0,0,0,.08);}
  .card:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);}
  /* tall FB-style story cards */
  .story{box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:transform .18s ease, box-shadow .18s ease;}
  .story:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.22);}
  .story img{transition:transform .3s ease;}
  .story:hover img{transform:scale(1.06);}
  .story .nm{background:linear-gradient(transparent, rgba(0,0,0,.55));
    padding-top:24px;padding-bottom:2px;left:0;right:0;bottom:0;
    padding-left:8px;padding-right:8px;}
  .story.add .top-img{background:linear-gradient(135deg,#0435af,#e8174c)!important;}
  .story.add:hover{transform:translateY(-3px);}
  /* left menu item hover pill */
  .side-item{border-radius:8px;}
  .side-item:hover{background:var(--hover);}
  .composer-input:hover{background:var(--line);}
  .post-actions button:hover,.composer-actions button:hover{background:var(--hover);}
}
/* Facebook-style SPREAD on large desktop: sidebars go to the edges,
   feed stays centered. Sidebars stick and scroll independently. */
@media (min-width:1300px){
  .layout{max-width:1600px;gap:24px;}
  .col-left,.col-right{width:320px;}
  .col-main{max-width:680px;}
  .col-left,.col-right{
    position:sticky;top:calc(var(--nav-h) + 16px);
    align-self:flex-start;
    max-height:calc(100vh - var(--nav-h) - 24px);
    overflow-y:auto;scrollbar-width:none;
  }
  .col-left::-webkit-scrollbar,.col-right::-webkit-scrollbar{display:none;}
}
@media (min-width:1700px){
  .layout{max-width:1800px;}
  .col-left,.col-right{width:340px;}
}
/* ===== END POLISH PACK ===== */


/* ============ FACEBOOK-STYLE POLISH v2026-07-14 ============ */
.card{border-radius:12px !important;box-shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04) !important;border:none !important}
.col-main{max-width:590px}
/* Composer — cleaner FB look */
.composer-input{background:var(--hover) !important;border-radius:50px !important;padding:11px 16px !important;font-size:16px !important;transition:background .15s}
.composer-input:hover{background:var(--hover2) !important}
.composer-actions{gap:2px;padding-top:6px !important;margin-top:10px !important}
.composer-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:none;padding:8px 4px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--text2);cursor:pointer;transition:background .15s}
.composer-actions button:hover{background:var(--hover)}
/* Stories — FB rounded tall cards */
.stories{gap:8px !important;padding-bottom:2px}
.story{width:110px !important;height:196px !important;border-radius:12px !important;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.story>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.story::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 45%);pointer-events:none;z-index:1}
.story .ring{z-index:3 !important;border:3px solid var(--like) !important;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.story .nm{z-index:2 !important;bottom:10px !important;font-weight:700 !important;text-shadow:0 1px 3px rgba(0,0,0,.7) !important}
.story .story-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;color:#fff;font-weight:600}
.story.add{background:var(--card) !important}
.story.add::after{display:none}
.story.add .plus{background:var(--like) !important;border:4px solid var(--card) !important;box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:3}
.story.add .lbl,.story.add .nm{color:var(--text) !important;text-shadow:none !important}
/* Post header — bigger avatar, tighter meta like FB */
.post-head{gap:10px !important;padding:12px 16px 0 !important;align-items:center}
.post-author{font-weight:700 !important;font-size:15px !important;line-height:1.2}
.post-text{padding:4px 16px 10px !important;font-size:15px !important;line-height:1.45 !important}
/* Post action bar — FB style */
.post-actions,.pa-row{border-top:1px solid var(--line2)}
.post-actions button:hover{background:var(--hover)}
/* Nav top bar polish */
.topnav,.nav-top{box-shadow:0 1px 2px rgba(0,0,0,.1)}
.nav-icon{transition:background .15s;border-radius:8px}
/* subtle page bg */
body{background:var(--bg)}
@media(max-width:600px){.col-main{max-width:100%}.card{border-radius:0 !important}.story{width:104px !important;height:186px !important}}
/* ============ END POLISH ============ */
/* ╔══════════════════════════════════════════════════╗
   ║  PREMIUM UI PACK v2026-07-14 — customer-attractive ║
   ╚══════════════════════════════════════════════════╝ */

/* ---- Global feel: smoother, softer, faster ---- */
*{-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
::selection{background:rgba(13,68,197,.18)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(120,120,130,.35);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,120,130,.55)}
::-webkit-scrollbar-track{background:transparent}

/* ---- Cards: soft depth + entrance animation ---- */
.card{border-radius:14px !important;box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.04) !important;transition:box-shadow .2s}
#feedList>.card{animation:pbFadeUp .35s ease both}
@keyframes pbFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- Buttons: gradient brand + press feel ---- */
.btn-blue{background:linear-gradient(135deg,#0d44c5,#3f6ff0) !important;border-radius:10px !important;box-shadow:0 3px 10px rgba(13,68,197,.28);transition:transform .12s,box-shadow .2s,filter .15s;border:none}
.btn-blue:hover{filter:brightness(1.06);box-shadow:0 5px 16px rgba(13,68,197,.35)}
.btn-blue:active{transform:scale(.97)}
.btn-grey{border-radius:10px !important;transition:background .15s,transform .12s}
.btn-grey:active{transform:scale(.97)}

/* ---- Chips (admin tabs, filters): pill style ---- */
.mp-chip{border-radius:999px !important;padding:8px 16px !important;font-weight:600;border:1.5px solid var(--line2);background:var(--card);transition:all .15s;cursor:pointer}
.mp-chip:hover{background:var(--hover)}
.mp-chip.on{background:linear-gradient(135deg,#0d44c5,#3f6ff0) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 3px 10px rgba(13,68,197,.3)}

/* ---- Nav: frosted glass + glow badges ---- */
.nav-top{backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px)}
.nav-icon{transition:background .15s,transform .12s}
.nav-icon:hover{background:var(--hover)}
.nav-icon:active{transform:scale(.9)}
.badge{background:linear-gradient(135deg,#f02849,#ff5e78) !important;box-shadow:0 2px 6px rgba(240,40,73,.45);border:2px solid var(--card)}

/* ---- Composer: inviting ---- */
.composer-input{border:1.5px solid transparent !important}
.composer-input:hover{border-color:var(--line2) !important}
.composer-actions button{border-radius:10px}
.composer-actions button:active{transform:scale(.95)}

/* ---- Stories: hover lift + shine ---- */
.story{transition:transform .18s,box-shadow .18s}
.story:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.story .ring{transition:transform .15s}
.story:hover .ring{transform:scale(1.06)}

/* ---- Posts: pro header + smooth actions ---- */
.post-author:hover{text-decoration:underline}
.post-actions button,.pa-btn{border-radius:10px;transition:background .15s,transform .1s;font-weight:600}
.post-actions button:active,.pa-btn:active{transform:scale(.94)}
.post-text{letter-spacing:.1px}
.post-bg{border-radius:0 !important;font-weight:700;letter-spacing:.2px}

/* ---- Sidebar & menus ---- */
.side-item{transition:background .15s,transform .12s;border-radius:10px !important}
.side-item:hover{background:var(--hover)}
.side-item:active{transform:scale(.98)}
.menu-item{border-radius:10px !important;transition:background .13s}
.menu-item:hover{background:var(--hover)}

/* ---- Modals: rounded + slide-up ---- */
.modal{border-radius:18px !important;animation:pbModalIn .22s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pbModalIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.overlay{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:rgba(0,0,0,.5) !important}
.modal-head h3{font-weight:800;letter-spacing:-.2px}
.modal-x{border-radius:50%;transition:background .15s,transform .12s}
.modal-x:hover{background:var(--hover2)}
.modal-x:active{transform:scale(.88)}

/* ---- Toast: floating pill ---- */
.toast{border-radius:999px !important;padding:11px 22px !important;backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(0,0,0,.35) !important;font-size:14px}

/* ---- Inputs: focus glow ---- */
input,textarea,select{transition:border-color .15s,box-shadow .15s;outline:none}
input:focus,textarea:focus{border-color:#3f6ff0 !important;box-shadow:0 0 0 3px rgba(63,111,240,.15)}

/* ---- Avatars: subtle ring on hover ---- */
.avatar,.av{transition:transform .15s}
.avatar:hover,.av:hover{transform:scale(1.05)}

/* ---- Spinner: brand gradient ---- */
.spinner{border-top-color:#3f6ff0 !important}

/* ---- Empty states ---- */
.empty{color:var(--text2);padding:28px 16px;text-align:center;font-weight:500}

/* ---- Mobile refinements ---- */
@media(max-width:600px){
  .modal{border-radius:18px 18px 0 0 !important;align-self:flex-end;max-height:94vh !important}
  .card{border-radius:12px !important;margin-left:8px;margin-right:8px}
  #feedList>.card,.col-main>.card{margin-left:0;margin-right:0;border-radius:0 !important}
  .btn-blue,.btn-grey{padding:11px !important;font-size:15px}
}

/* AI Writer */
.ai-writer-bar{margin:0 0 8px}
.ai-writer-btn{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#7b2ff7,#3f6ff0);color:#fff;border:none;padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 3px 10px rgba(123,47,247,.28);transition:transform .12s,filter .15s}
.ai-writer-btn:hover{filter:brightness(1.07)}
.ai-writer-btn:active{transform:scale(.96)}
.aiw-idea{padding:12px;border:1.5px solid var(--line2);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:background .15s,border-color .15s;font-size:14px;line-height:1.5}
.aiw-idea:hover{background:var(--hover);border-color:#3f6ff0}

/* Go Live side rail */
.live-rail{position:absolute;top:12px;right:10px;display:flex;flex-direction:column;gap:8px;z-index:4;max-height:calc(100% - 24px);overflow-y:auto;scrollbar-width:none}
.live-rail::-webkit-scrollbar{display:none}
.lr-btn{background:none;border:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.6);transition:transform .12s}
.lr-btn:active{transform:scale(.9)}
.lr-btn.on .lr-ic{background:linear-gradient(135deg,#0d44c5,#3f6ff0);box-shadow:0 3px 10px rgba(13,68,197,.5)}
.lr-ic{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:19px}
#liveSetupPrev,#liveVid{transition:filter .2s}
/* ╔════════════ END PREMIUM UI PACK ════════════╗ */
/* ╔══════════════════════════════════════════════════════╗
   ║  PIYARI COLOR THEME v2 — pink·purple·gradient design  ║
   ║  (Raj ke reference screenshots jaisa colorful look)   ║
   ╚══════════════════════════════════════════════════════╝ */
:root{
  --pk:#e8174c; --pu:#7c3aed; --bl:#4f46e5;
  --g-main:linear-gradient(135deg,#4f46e5,#7c3aed);         /* primary buttons */
  --g-hot:linear-gradient(135deg,#ec4899 0%,#8b5cf6 100%);  /* stories/chips highlight */
  --g-story:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); /* insta ring */
}
/* page background — soft lavender jaisa screenshots */
body{background:#f0f2fa}
[data-theme="dark"] body{background:var(--bg)}

/* cards — extra rounded, floating */
.card{border-radius:16px !important;box-shadow:0 2px 8px rgba(99,102,241,.07),0 1px 3px rgba(0,0,0,.04) !important}

/* primary buttons — blue-purple gradient (Create a post / Post / Share Story) */
.btn-blue{background:var(--g-main) !important;box-shadow:0 4px 14px rgba(99,102,241,.35)}
.btn-live{background:linear-gradient(135deg,#f43f5e,#ec4899) !important;box-shadow:0 4px 14px rgba(244,63,94,.35);border-radius:12px !important}

/* top nav icons — light circular pills (screenshot jaisa) */
.nav-icon{background:var(--hover) !important;transition:background .15s,transform .12s}
.nav-icon:hover{background:var(--hover2) !important}

/* STORY RINGS — Instagram gradient ring */
.story .ring{border:none !important;padding:3px;background:var(--g-story) !important;box-shadow:0 2px 8px rgba(220,39,67,.3)}
.story .ring>*{border:2px solid var(--card);border-radius:50%}

/* ADD STORY — pink→purple gradient card with white + */
.story.add{background:linear-gradient(160deg,#ff2d78 0%,#a855f7 100%) !important;box-shadow:0 4px 14px rgba(236,72,153,.35) !important}
.story.add .lbl,.story.add .nm{color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.3) !important;font-weight:800 !important}
.story.add .plus{background:#fff !important;color:var(--pu) !important;border:none !important;box-shadow:0 3px 10px rgba(0,0,0,.25) !important;font-weight:900}

/* FILTER CHIPS — active gradient (All chip jaisa) */
.filter-chip{border-radius:999px !important;padding:7px 15px !important;background:var(--card) !important;border:1.5px solid var(--line2) !important;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.filter-chip.on{background:var(--g-hot) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 3px 12px rgba(236,72,153,.4) !important}
.mp-chip.on{background:var(--g-main) !important;box-shadow:0 3px 12px rgba(99,102,241,.4) !important}

/* BOTTOM/TOP NAV TABS — active pink-purple with soft pill */
.nav-tab{border-radius:12px;transition:background .15s,transform .12s}
.nav-tab:active{transform:scale(.9)}
.nav-tab.active{color:var(--pk) !important;background:rgba(232,23,76,.08)}

/* CREATE MENU TILES — colorful gradient icon squares (screenshot #3 jaisa) */
.am-tile{background:var(--card) !important;border-radius:16px !important;box-shadow:0 2px 10px rgba(99,102,241,.08);padding:16px 8px !important;font-weight:600;transition:transform .15s,box-shadow .15s}
.am-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(99,102,241,.15)}
.am-tile:active{transform:scale(.95)}
.am-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:25px !important;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.am-grid>.am-tile:nth-child(1) .am-ic{background:linear-gradient(135deg,#8b5cf6,#a855f7)}
.am-grid>.am-tile:nth-child(2) .am-ic{background:linear-gradient(135deg,#ec4899,#f43f5e)}
.am-grid>.am-tile:nth-child(3) .am-ic{background:linear-gradient(135deg,#4f46e5,#6366f1)}
.am-grid>.am-tile:nth-child(4) .am-ic{background:linear-gradient(135deg,#ef4444,#f97316)}
.am-grid>.am-tile:nth-child(5) .am-ic{background:linear-gradient(135deg,#10b981,#22c55e)}
.am-grid>.am-tile:nth-child(6) .am-ic{background:linear-gradient(135deg,#6366f1,#3b82f6)}
.am-grid>.am-tile:nth-child(7) .am-ic{background:linear-gradient(135deg,#f59e0b,#f97316)}
.am-grid>.am-tile:nth-child(8) .am-ic{background:linear-gradient(135deg,#06b6d4,#3b82f6)}

/* COMPOSER ACTION ROW — soft tinted icon chips (Create/Live/Photo/Story) */
.composer-actions button{border-radius:12px !important}
.composer-actions button:nth-child(1){background:rgba(232,23,76,.07)}
.composer-actions button:nth-child(2){background:rgba(244,63,94,.07)}
.composer-actions button:nth-child(3){background:rgba(16,185,129,.08)}
.composer-actions button:nth-child(4){background:rgba(79,70,229,.07)}

/* notification badge — hot pink */
.badge{background:linear-gradient(135deg,#f02849,#ec4899) !important}

/* progress bars & accents */
.streak-card,.quote-card{border-radius:16px !important}

/* AI writer & boost keep their gradients */

/* SVG icon sizing (emoji -> professional icons) */
.nav-tab svg{width:26px;height:26px}
.nav-icon svg{width:21px;height:21px}
.srch-ic{display:flex;align-items:center;margin-right:2px}
.srch-ic svg{width:18px;height:18px;color:var(--text2)}
.ff-chip svg{color:inherit}
.nav-tab.active::after{background:linear-gradient(90deg,#e8174c,#7c3aed) !important}

/* Menu item colored icon badges (UPI / PiyariChat etc) */
.mi-ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.menu-item{gap:11px !important}

/* Composer consolidated tools grid */
.add-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 6px}
.add-tool{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line2);border-radius:14px;padding:12px 4px;font-weight:600;font-size:12.5px;color:var(--text);cursor:pointer;transition:transform .12s,box-shadow .15s,border-color .15s}
.add-tool:hover{border-color:#a855f7;box-shadow:0 3px 10px rgba(124,58,237,.12)}
.add-tool:active{transform:scale(.95)}
.at-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.at-ic svg{width:21px;height:21px}
/* Photo/Video pick sheet */
.pick-opt{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--line2);border-radius:14px;margin-bottom:10px;cursor:pointer;transition:background .15s,border-color .15s}
.pick-opt:hover{background:var(--hover);border-color:#a855f7}
.po-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.po-ic svg{width:24px;height:24px}
@media(max-width:380px){.add-tools{grid-template-columns:repeat(2,1fr)}}

/* ===== Creator Rank badges & page ===== */
.rank-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;vertical-align:middle;box-shadow:0 1px 3px rgba(0,0,0,.25);line-height:1}
.rank-pill{display:inline-flex;align-items:center;gap:6px;background:var(--hover);border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px;cursor:pointer;margin:4px 0 2px;transition:background .15s}
.rank-pill:hover{background:var(--hover2)}
.rank-pill.dim{opacity:.85;font-weight:600}
.rp-em{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.rank-hero{border-radius:16px;padding:20px;text-align:center;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.rh-em{font-size:44px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.rh-name{font-size:20px;font-weight:800;margin-top:6px;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.rh-fol{font-size:13px;opacity:.95;margin-top:2px}
.rank-prog-wrap{margin:14px 0}
.rank-prog{height:12px;border-radius:999px;background:var(--hover2);overflow:hidden}
.rank-prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#ec4899);transition:width .5s}
.rank-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line2)}
.rank-row.cur{background:rgba(124,58,237,.06);border-radius:12px;padding:11px 10px;border-bottom:none}
.rank-row.locked{opacity:.55}
.rr-badge{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.rr-now{font-size:11px;background:#7c3aed;color:#fff;padding:2px 8px;border-radius:999px;font-weight:700;margin-left:4px}
.rank-cele{animation:pbModalIn .3s cubic-bezier(.2,.9,.3,1.3) both}
.rc-burst{width:110px;height:110px;border-radius:50%;margin:8px auto 0;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.25);animation:rcPulse 1.2s ease-in-out infinite}
.rc-em{font-size:56px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
@keyframes rcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ===== 3D SVG rank badges ===== */
.rank-badge3d{display:inline-flex;align-items:center;vertical-align:middle;margin:0 1px}
.rank-svg{display:inline-block}
.rank-pill .rank-svg,.rr-badge .rank-svg{flex:none}
.rr-badge{background:none !important;width:auto !important;height:auto !important;box-shadow:none !important}
.rh-em .rank-svg{filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
/* ===== Full-screen game-style rank unlock ===== */
.rank-cele-full{position:fixed;inset:0;z-index:99999;background:radial-gradient(circle at 50% 40%,rgba(20,10,40,.92),rgba(5,5,15,.97));display:flex;align-items:center;justify-content:center;overflow:hidden;animation:rcfIn .4s ease both}
@keyframes rcfIn{from{opacity:0}to{opacity:1}}
.rcf-inner{position:relative;text-align:center;padding:20px;max-width:400px;z-index:2}
.rcf-rays{position:absolute;top:50%;left:50%;width:600px;height:600px;transform:translate(-50%,-58%);border-radius:50%;animation:rcfSpin 8s linear infinite;opacity:.6;z-index:-1}
@keyframes rcfSpin{to{transform:translate(-50%,-58%) rotate(360deg)}}
.rcf-badge{animation:rcfPop .7s cubic-bezier(.2,1.4,.4,1) both;filter:drop-shadow(0 8px 30px rgba(0,0,0,.5))}
@keyframes rcfPop{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.15) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.rcf-un{color:#ffd23f;font-weight:900;letter-spacing:3px;font-size:14px;margin-top:14px;animation:rcfFade .5s .4s both}
.rcf-name{font-size:34px;font-weight:900;margin:4px 0 2px;text-shadow:0 2px 12px rgba(0,0,0,.5);animation:rcfFade .5s .55s both}
.rcf-sub{color:#fff;font-size:15px;font-weight:600;opacity:.95;animation:rcfFade .5s .7s both}
.rcf-note{color:#cbd5e1;font-size:13px;margin:12px 0 20px;animation:rcfFade .5s .85s both}
.rcf-btn{padding:14px 40px !important;font-size:16px !important;border-radius:14px !important;animation:rcfFade .5s 1s both}
@keyframes rcfFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rcf-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rc-conf{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;opacity:.9;animation:rcConf 2.6s linear infinite}
@keyframes rcConf{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(720deg);opacity:.3}}

/* Rank badge attached to avatar corner */
.av-wrap{position:relative;display:inline-block;vertical-align:middle;line-height:0}
.av-rank{position:absolute;right:-3px;bottom:-3px;display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));z-index:2;opacity:.82;transition:opacity .2s}
.av-rank .rank-img,.av-rank .rank-svg{opacity:.9;filter:blur(.3px) saturate(1.05)}
.av-wrap:hover .av-rank{opacity:1}
.av-wrap:hover .av-rank .rank-img{filter:none}
.av-rank .rank-svg{display:block}

/* ===== PiyariBook Premium ===== */
.btn-line{background:transparent;border:1.5px solid var(--line);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;transition:.15s}.btn-line:hover{background:var(--hover2)}
.coin-guide{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:12px;overflow:hidden}
.coin-guide .cg{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--bg);font-size:14px}
.coin-guide .cg span{color:var(--text)}.coin-guide .cg b{color:#d97706;font-weight:800}
.coin-guide .cg-big{background:#fff7ed}.coin-guide .cg-big b{color:#16a34a}
body.dark .coin-guide .cg-big{background:rgba(217,119,6,.12)}
.prem-hero{background:linear-gradient(135deg,#1877f2,#0a5dc9);border-radius:16px;padding:22px;text-align:center;color:#fff;margin-bottom:14px;box-shadow:0 6px 20px rgba(24,119,242,.3)}
.prem-tick{width:60px;height:60px;border-radius:50%;background:#fff;color:#1877f2;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-weight:900;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.prem-h1{font-size:20px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.prem-h2{font-size:13px;opacity:.95;margin-top:2px}
.prem-feat{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.pf{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px}
.pf:hover{background:var(--hover)}
.pf-i{font-size:22px;flex:none;width:30px;text-align:center}
.prem-plans{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.prem-plan{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--line2);border-radius:14px;padding:14px;cursor:pointer;transition:border-color .15s,background .15s}
.prem-plan.sel{border-color:#1877f2;background:rgba(24,119,242,.06)}
.pp-price{font-size:22px;font-weight:900;color:#1877f2}
.pp-price span{font-size:12px;font-weight:600;color:var(--text2)}
.pp-save{background:#22c55e;color:#fff;font-size:11px;padding:2px 8px;border-radius:999px;font-weight:700}
.prem-active{background:rgba(34,197,94,.12);color:#16a34a;padding:14px;border-radius:12px;text-align:center;font-weight:700}
/* Blue verified tick (Premium) */
.vbadge{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;background:#1877f2;color:#fff;border-radius:50%;font-size:11px;vertical-align:middle;margin-left:3px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
/* ╔════════════ END PIYARI COLOR THEME ════════════╗ */



/* ---------- INSTALL APP BANNER ---------- */
#pbInstallBar{
  position:fixed; left:12px; right:12px; bottom:14px; z-index:9500;
  background:linear-gradient(135deg,#1877f2,#6d28d9);
  color:#fff; border-radius:18px; padding:14px 14px 14px 12px;
  box-shadow:0 12px 40px rgba(0,0,0,.32);
  display:flex; align-items:center; gap:12px;
  transform:translateY(160%); transition:transform .45s cubic-bezier(.2,.9,.3,1);
  max-width:520px; margin:0 auto;
}
#pbInstallBar.on{ transform:translateY(0); }
#pbInstallBar .pbi-ic{
  width:52px; height:52px; border-radius:14px; flex:0 0 52px;
  background:#fff; padding:5px; object-fit:contain;
}
#pbInstallBar .pbi-txt{ flex:1; min-width:0; }
#pbInstallBar .pbi-t{ font-weight:800; font-size:15px; line-height:1.25; }
#pbInstallBar .pbi-s{ font-size:12.5px; opacity:.92; margin-top:2px; line-height:1.35; }
#pbInstallBar .pbi-go{
  background:#fff; color:#1877f2; border:0; border-radius:999px;
  padding:9px 16px; font-weight:800; font-size:14px; cursor:pointer; white-space:nowrap;
}
#pbInstallBar .pbi-go:active{ transform:scale(.96); }
#pbInstallBar .pbi-x{
  position:absolute; top:-9px; right:-4px; width:26px; height:26px; border-radius:50%;
  background:#111; color:#fff; border:2px solid #fff; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
@media(max-width:380px){
  #pbInstallBar .pbi-s{ display:none; }
  #pbInstallBar .pbi-go{ padding:9px 13px; font-size:13px; }
}
/* iOS instructions sheet */
#pbIosSheet{
  position:fixed; inset:0; z-index:9600; background:rgba(0,0,0,.6);
  display:flex; align-items:flex-end; justify-content:center;
}
#pbIosSheet .pbios-card{
  background:var(--card,#fff); color:var(--text,#111);
  width:100%; max-width:480px; border-radius:20px 20px 0 0; padding:22px 20px 30px;
}


/* ---------------------------------------- */


.vbadge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;background:var(--brand-blue);color:#fff;border-radius:50%;font-size:9px;vertical-align:middle}
.mention{color:var(--blue);font-weight:600}
.chip{width:auto;padding:6px 12px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);font-weight:600;font-size:13px}
.chip:hover{background:var(--hover)}
.poll{margin:0 16px 12px;border:1px solid var(--line2);border-radius:10px;padding:10px}
.poll-q{font-weight:600;margin-bottom:8px}
.poll-opt{position:relative;border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin-bottom:7px;cursor:pointer;overflow:hidden;display:flex;justify-content:space-between;align-items:center}
.poll-opt:hover{background:var(--hover)}
.poll-opt.mine{border-color:var(--blue);font-weight:600}
.poll-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(13,68,197,.13);width:0;transition:width .4s}
.poll-t,.poll-n{position:relative;z-index:1}
.poll-n{font-size:13px;color:var(--text2)}
.poll-total{font-size:12px;color:var(--text2);margin-top:2px}
.poll-edit{margin:8px 0}
.quiz-badge{background:linear-gradient(90deg,#7b2ff7,#ff2d78);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:8px;vertical-align:middle;margin-left:4px}
.poll-opt.correct{border-color:#1db954;background:rgba(29,185,84,.12)}
.poll-opt.correct .poll-t::after{content:' ✅'}
.poll-opt.wrong{border-color:#e8174c;background:rgba(232,23,76,.10)}
.poll-opt.wrong .poll-t::after{content:' ❌'}
/* voice posts */
.voice-post{display:flex;align-items:center;gap:10px;margin:0 16px 12px;border:1px solid var(--line2);border-radius:12px;padding:10px;background:var(--hover)}
.vp-ic{font-size:22px}
/* photo filters */
.filter-strip{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;-webkit-overflow-scrolling:touch}
.filter-chip{flex:0 0 auto;border:1px solid var(--line);border-radius:14px;padding:5px 11px;font-size:13px;font-weight:600;cursor:pointer;background:var(--hover)}
.filter-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
/* greeting cards */
.card-tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.card-tpl{border-radius:12px;padding:10px 4px;text-align:center;color:#fff;cursor:pointer;border:2px solid transparent}
.card-tpl.on{border-color:var(--blue);transform:scale(1.04)}
/* profile meter */
.pm-bar{height:8px;background:var(--hover2);border-radius:6px;margin:8px 0 6px;overflow:hidden}
.pm-fill{height:100%;background:linear-gradient(90deg,var(--blue),#7b2ff7);border-radius:6px;transition:width .4s}
/* confetti */
@keyframes cfFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(105vh) rotate(540deg);opacity:.8}}
/* scroll to top */
#scrollTopBtn{position:fixed;right:16px;bottom:150px;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
#scrollTopBtn.show{opacity:1;pointer-events:auto}
/* comment emoji quick bar */
.emoji-quick{display:flex;gap:4px;padding:6px 12px 0;overflow-x:auto}
.emoji-quick span{font-size:21px;cursor:pointer;padding:2px 5px;border-radius:8px}
.emoji-quick span:active{background:var(--hover);transform:scale(1.2)}
/* data saver */
.ds-img{margin:0 16px 12px;border:1px dashed var(--line);border-radius:10px;padding:26px 12px;text-align:center;color:var(--text2);cursor:pointer;background:var(--hover)}
.ds-img:active{background:var(--hover2)}
/* multi-photo carousel */
.pcar{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:4px;margin:0 0 4px;-webkit-overflow-scrolling:touch}
.pcar-img{flex:0 0 100%;scroll-snap-align:center;max-height:420px;object-fit:cover;width:100%}
.pcar-n{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px}
/* lightbox */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:99990;display:flex;align-items:center;justify-content:center;overflow:auto}
#lightbox img{max-width:96vw;max-height:92vh;border-radius:6px;transition:transform .25s;cursor:zoom-in}
#lightbox img.zoomed{transform:scale(2);cursor:zoom-out}
.lb-x{position:fixed;top:14px;right:18px;color:#fff;font-size:26px;cursor:pointer;z-index:2}
.lb-hint{position:fixed;bottom:14px;left:0;right:0;text-align:center;color:rgba(255,255,255,.65);font-size:12px}
/* see more */
.pt-clamp{max-height:130px;overflow:hidden;position:relative}
.see-more{display:block;padding:2px 16px 8px;color:var(--blue);font-weight:600;cursor:pointer;font-size:14px}
/* feed filter chips */
.ff-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.ff-chip{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.ff-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
/* doodle */
.dood-col{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid var(--line);display:inline-block}
.dood-col.on{border-color:var(--blue);transform:scale(1.12)}
/* offline bar */
#offlineBar{position:fixed;top:0;left:0;right:0;background:#e8174c;color:#fff;text-align:center;font-size:13px;font-weight:600;padding:7px;z-index:99995}
/* reactors modal chips */
.rx-chip{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;background:var(--card)}
.rx-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
/* chat search */
.chat-search-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.chat-search-bar input{flex:1;border:1px solid var(--line);border-radius:18px;padding:7px 13px;background:var(--hover);color:var(--text);outline:none;min-width:0}
.cs-count{font-size:12px;color:var(--text2);white-space:nowrap}
.cs-btn{cursor:pointer;padding:5px 8px;border-radius:8px;background:var(--hover);font-size:13px;user-select:none}
.cs-hit .msg{outline:2px solid rgba(255,196,0,.55)}
.cs-cur .msg{outline:2px solid #ffb300;box-shadow:0 0 0 4px rgba(255,179,0,.25)}
.clike{cursor:pointer}.clike.on{color:var(--blue);font-weight:600}
.replies{margin:6px 0 0 10px;border-left:2px solid var(--line2);padding-left:8px}
.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;max-height:50vh;overflow-y:auto}
.gif-grid img{width:100%;height:90px;object-fit:cover;border-radius:6px;cursor:pointer}
.gif-grid img:hover{opacity:.85}


/* ---------------------------------------- */


.adj-frame{position:relative;margin:0 auto;overflow:hidden;border-radius:10px;background:#000;touch-action:none}
.adj-frame.round{border-radius:50%}
.adj-frame canvas{display:block;cursor:grab}
.adj-frame canvas:active{cursor:grabbing}
#adjZoom{accent-color:var(--blue)}


/* ---------------------------------------- */


.ep-section{margin-bottom:18px}
.ep-sec-title{font-weight:700;font-size:13px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.ep-cover-wrap{position:relative;margin-bottom:50px}
.ep-cover{height:140px;border-radius:10px;overflow:hidden;background:var(--hover2);display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:13px}
.ep-cover img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.ep-avatar-wrap{position:absolute;left:16px;bottom:-38px}
.ep-avatar{width:90px;height:90px;border-radius:50%;overflow:hidden;border:4px solid var(--card);background:var(--hover2);display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--text2)}
.ep-avatar img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.ep-cam{position:absolute;width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;box-shadow:0 1px 5px rgba(0,0,0,.25)}
.ep-cam:hover{background:var(--hover)}
.ep-cam-cover{right:8px;top:8px}
.ep-cam-avatar{right:-2px;bottom:0}
.ep-hint{font-size:12px;color:var(--text2);margin-top:6px}
.ep-field-label{font-weight:600;font-size:13px;margin:10px 0 4px;display:block}
.ep-vrow{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.ep-vrow .field-line{margin-bottom:0;flex:1}
.vis-sel{border:1px solid var(--line);border-radius:8px;padding:9px 6px;background:var(--card);color:var(--text);font-size:12px;flex-shrink:0;max-width:118px}
.vis-sel:focus{outline:none;border-color:var(--blue)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.theme-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-weight:600;font-size:13px}
.theme-btn:hover{background:var(--hover)}
.theme-btn.on{border-color:var(--blue);color:var(--blue)}


/* ---------------------------------------- */


#pbBanners{max-width:680px;margin:0 auto;padding:0 8px}
.pb-banner{margin:8px 0;padding:10px 14px;border-radius:8px;font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-banner.warn{background:#fff4e5;color:#8a5a00;border:1px solid #ffd9a0}
.pb-banner.danger{background:#fdecef;color:#a11433;border:1px solid #f5b6c4}
.pb-banner button{width:auto;padding:5px 12px;border-radius:6px;background:var(--card);border:1px solid var(--line);font-weight:600;cursor:pointer;color:inherit}
html[data-theme="dark"] .pb-banner.warn{background:#3a2e16;color:#ffce8a;border-color:#5a4520}
html[data-theme="dark"] .pb-banner.danger{background:#3a1620;color:#ff9bb0;border-color:#5a2233}


/* ---------------------------------------- */


.side-foot{margin-top:14px;padding:12px 8px;font-size:12px;color:var(--text2);line-height:1.9;border-top:1px solid var(--line2)}
.side-foot a{color:var(--text2);text-decoration:none}
.side-foot a:hover{color:var(--blue);text-decoration:underline}


/* ---------------------------------------- */


.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.dash-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center}
.cp-hero{background:linear-gradient(135deg,rgba(232,23,76,.13),rgba(255,77,109,.05));border:1px solid var(--line)}
.cp-hero.elig{background:linear-gradient(135deg,rgba(46,204,113,.18),rgba(46,204,113,.05))}
.cp-status{font-size:12px;font-weight:700;padding:4px 12px;border-radius:50px;margin-left:auto}
.cp-status.ok{background:#2ecc71;color:#fff}
.cp-status.pending{background:var(--hover2);color:var(--text2)}
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.cp-card{text-align:center;position:relative}
.cp-card .cp-ic{font-size:22px;margin-top:4px}
.cp-card .cp-title{font-weight:700;margin-top:2px;font-size:14px}
.cp-card .cp-nums{font-size:15px;margin-top:4px}
.cp-card .cp-nums b{color:var(--brand-red)}
.cp-card .cp-left{font-size:12px;color:var(--text2);margin-top:4px}
.cp-rule{padding:8px 0;font-size:14px;border-bottom:1px solid var(--line2)}
.cp-rule:last-child{border-bottom:none}
.cp-rule.done{color:#2ecc71;font-weight:600}
@media(max-width:640px){.cp-grid{grid-template-columns:1fr}}
.dc-ic{font-size:20px}.dc-num{font-size:24px;font-weight:800;color:var(--blue);line-height:1.2}.dc-lbl{font-size:12px;color:var(--text2)}
.dash-post{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2)}
.dash-post:last-child{border-bottom:none}
.dp-thumb{width:46px;height:46px;border-radius:8px;object-fit:cover;flex-shrink:0}
.dp-noimg{display:flex;align-items:center;justify-content:center;background:var(--hover2);font-size:20px}
.dp-txt{font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-stat{font-size:12.5px;color:var(--text2)}


/* ---------------------------------------- */


.mp-cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.mp-chip{flex-shrink:0;padding:6px 14px;border-radius:18px;background:var(--hover);border:1px solid var(--line);font-weight:600;font-size:13px;cursor:pointer;color:var(--text);white-space:nowrap}
.mp-chip.on{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}
.tile-img{height:150px;display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden}
.tile-img img{height:150px;width:100%;object-fit:cover}
.tile .loc{font-size:12px;color:var(--text2);margin-top:2px}


/* ---------------------------------------- */


#statusGate{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:99999;padding:20px}
.gate-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 26px;max-width:430px;width:100%;text-align:center;box-shadow:0 12px 44px rgba(0,0,0,.18)}
.gate-card h2{margin:8px 0;color:var(--brand-blue)}
.gate-card p{color:var(--text2);margin-bottom:18px;line-height:1.6}
.gate-ic{font-size:46px}
.gate-acts{display:flex;flex-direction:column;gap:8px}
.gate-acts button{width:100%}


/* ---------------------------------------- */


.vid-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;margin-top:2px}
.vid-embed iframe,.vid-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ===== Monetized Video Player (ad-supported) ===== */
.mvp{position:relative;width:100%;aspect-ratio:16/9;background:#000;margin-top:2px;overflow:hidden;border-radius:8px}
.mvp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.mvp-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.32));cursor:pointer}
.mvp-play{width:68px;height:68px;border-radius:50%;border:none;background:rgba(0,0,0,.62);color:#fff;font-size:26px;padding-left:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.mvp-play:hover{transform:scale(1.08);background:#ff0033}
.mvp-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:3px 8px;border-radius:6px}
.mvp-ima{position:absolute;inset:0;display:none;z-index:3}
.mvp-ad{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:3}
.mvp-ad[hidden]{display:none!important}   /* 🔑 FIX: hidden hone par sach me chhupe (pehle display:flex isse dikha raha tha = kaali screen) */
.mvp-advideo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mvp-adimg-link{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mvp-adimg-link[hidden]{display:none!important}
.mvp-adimg{max-width:100%;max-height:100%;object-fit:contain}
.mvp-adlabel{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.72);color:#fff;font-weight:600;font-size:11px;letter-spacing:.4px;padding:4px 9px;border-radius:4px;z-index:4;display:flex;align-items:center;gap:5px}
.mvp-adlabel::before{content:'';width:5px;height:5px;border-radius:50%;background:#f5c518;display:inline-block}
.mvp-adskip{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.68);color:#fff;font-size:13px;font-weight:500;padding:9px 15px;border-radius:6px;z-index:4;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15)}
.mvp-skipbtn{background:rgba(255,255,255,.95);border:none;color:#0f0f0f;font-weight:600;font-size:13.5px;cursor:pointer;padding:9px 18px;border-radius:6px;display:flex;align-items:center;gap:6px;transition:background .15s}
.mvp-skipbtn:hover{background:#fff}
.vid-link{display:flex;align-items:center;gap:12px;margin:8px 16px;padding:12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);background:var(--hover)}
.vid-link-ic{width:44px;height:44px;border-radius:50%;background:var(--brand-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}


/* ---------------------------------------- */


.share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:12px}
.share-opt{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--text);cursor:pointer;font-size:12px;text-align:center}
.so-ic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}


/* ---------------------------------------- */


/* Reels ab TOP nav ke NEECHE se shuru — main menu reels me bhi dikhega (dusre sections jaisa) */
.reels-wrap{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:#000;overflow-y:scroll;scroll-snap-type:y mandatory;z-index:90;scrollbar-width:none}
.reels-wrap::-webkit-scrollbar{display:none}
.reel{position:relative;height:calc(100vh - var(--nav-h));scroll-snap-align:start;display:flex;align-items:center;justify-content:center;background:#000}
.reel-video{width:100%;max-width:480px;height:100%;display:flex;align-items:center;justify-content:center}
.reel-video .vid-embed{width:100%;height:100%;aspect-ratio:auto}
.reel-video video{object-fit:contain}
.reel-back{position:fixed;top:calc(var(--nav-h) + 10px);left:12px;z-index:95;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:24px;line-height:1;cursor:pointer;border:none}
/* Reels-format ad slide */
.reel-ad-badge{position:absolute;top:calc(var(--nav-h) + 12px);right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:800;letter-spacing:.6px;padding:4px 11px;border-radius:6px;z-index:6}
.reel-ad-cta{display:inline-block;margin-top:12px;background:var(--blue,#1877f2);color:#fff;padding:10px 22px;border-radius:24px;font-weight:800;text-decoration:none;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.reel-ad .reel-info{right:14px}
.reel-side{position:absolute;right:10px;bottom:96px;display:flex;flex-direction:column;gap:18px;align-items:center;z-index:5}
.reel-av img,.reel-av .avatar-txt{border:2px solid #fff;border-radius:50%}
.reel-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:#fff;font-size:11px;cursor:pointer}
.reel-btn .ic{font-size:30px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.reel-btn.on .ic{transform:scale(1.15)}
/* 🔊 Tap-for-sound prompt (jab browser unmuted autoplay roke) */
.reel-unmute{position:absolute;left:50%;bottom:140px;transform:translateX(-50%);z-index:8;background:rgba(0,0,0,.72);color:#fff;border:none;padding:11px 20px;border-radius:24px;font-size:14px;font-weight:700;cursor:pointer;backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.5);animation:pbBeat .6s ease}
.reel-info{position:absolute;left:14px;bottom:86px;right:80px;color:#fff;z-index:5;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.reel-name{font-weight:700;font-size:16px;margin-bottom:4px}
.reel-cap{font-size:14px;line-height:1.45}
/* ===== TEXT LOGO — keep "PiyariBook.com" fully visible on every phone ===== */
@media(max-width:640px){ .nav-logo{font-size:22px} }
@media(max-width:520px){ .nav-logo{font-size:21px} .nav{padding:0 8px} .nav-right{gap:4px} .nav-icon{width:38px;height:38px} }
@media(max-width:400px){ .nav-logo{font-size:19px} .nav-icon{width:35px;height:35px} }
@media(max-width:345px){ .nav-logo{font-size:17px} .nav-logo .pbc{font-size:11px} .search{display:none} }
/* ===== Chat message actions: long-press menu, reactions, reply ===== */
.msg-wrap{position:relative}
.msg-reply{max-width:78%;background:rgba(0,0,0,.06);border-left:3px solid var(--blue);border-radius:8px;padding:4px 8px;font-size:12.5px;color:var(--text2);margin-bottom:2px}
.msg-wrap.me .msg-reply{align-self:flex-end}
.msg-reacts{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:0 6px;font-size:13px;line-height:20px;margin-top:-6px;box-shadow:0 1px 3px rgba(0,0,0,.12);width:fit-content}
.msg-reacts.me{align-self:flex-end}
.msg-reacts .mr-n{font-size:11px;color:var(--text2);margin-left:2px}
.msg-menu-ov{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:6000;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .12s}
.msg-menu{background:var(--card);width:100%;max-width:440px;border-radius:16px 16px 0 0;padding:8px;box-shadow:0 -4px 24px rgba(0,0,0,.25)}
.msg-menu-react{display:flex;justify-content:space-around;padding:8px 4px 10px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.msg-menu-react span{font-size:28px;cursor:pointer;transition:transform .12s;padding:2px 4px}
.msg-menu-react span:active{transform:scale(1.35)}
.msg-menu-b{display:block;width:100%;text-align:left;padding:13px 16px;font-size:15px;font-weight:600;border-radius:10px;color:var(--text)}
.msg-menu-b:active{background:var(--hover)}
.msg-menu-b.danger{color:#e8174c}
.reply-prev{display:flex;align-items:center;gap:8px;background:var(--hover2);border-left:3px solid var(--blue);padding:8px 12px;margin:0 8px}
.reply-prev-txt{flex:1;font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-prev-x{cursor:pointer;color:var(--text2);font-size:15px;padding:2px 6px}
/* ===== Text size (Settings › Display) ===== */
html[data-fs="sm"] body{font-size:13px}
html[data-fs="lg"] body{font-size:16.5px}
html[data-fs="xl"] body{font-size:18.5px}
html[data-fs="sm"] .post-text{font-size:14px}
html[data-fs="lg"] .post-text{font-size:18px}
html[data-fs="xl"] .post-text{font-size:20.5px}
html[data-fs="sm"] .msg{font-size:13px}
html[data-fs="lg"] .msg{font-size:16.5px}
html[data-fs="xl"] .msg{font-size:18.5px}
html[data-fs="sm"] .composer-input,html[data-fs="sm"] #chatInput,html[data-fs="sm"] .comment .body{font-size:13px}
html[data-fs="lg"] .composer-input,html[data-fs="lg"] #chatInput,html[data-fs="lg"] .comment .body{font-size:16.5px}
html[data-fs="xl"] .composer-input,html[data-fs="xl"] #chatInput,html[data-fs="xl"] .comment .body{font-size:18.5px}
/* ===== Font family ===== */
html[data-font="serif"] body{font-family:Georgia,'Times New Roman',serif}
html[data-font="rounded"] body{font-family:'Segoe UI',Nunito,'Trebuchet MS',system-ui,-apple-system,sans-serif}
html[data-font="mono"] body{font-family:'Courier New',ui-monospace,monospace}
.theme-btn.f-serif{font-family:Georgia,serif}
.theme-btn.f-rounded{font-family:'Segoe UI','Trebuchet MS',system-ui,sans-serif}
.theme-btn.f-mono{font-family:'Courier New',monospace}
/* ===== Attach sheet (➕) ===== */
.attach-ov{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:6000;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .12s}
.attach-sheet{background:var(--card);width:100%;max-width:440px;border-radius:18px 18px 0 0;padding:8px 14px 26px;box-shadow:0 -4px 24px rgba(0,0,0,.25)}
.attach-grip{width:38px;height:4px;border-radius:3px;background:var(--line2);margin:6px auto 16px}
.attach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.attach-it{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;padding:6px 2px}
.attach-it:active{transform:scale(.94)}
.attach-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}
.attach-lb{font-size:12px;color:var(--text2);font-weight:600;text-align:center}
/* ===== Location message ===== */
.msg.loc-msg{padding:0!important;overflow:hidden;max-width:230px}
.msg.loc-msg a{text-decoration:none;color:inherit;display:block}
.loc-map{height:110px;background:linear-gradient(135deg,#dcefe0,#bfe0c6);display:flex;align-items:center;justify-content:center;position:relative;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 12px,transparent 12px 24px)}
.loc-pin{font-size:38px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.loc-foot{padding:8px 12px;font-size:13px;font-weight:600}
.loc-foot span{color:var(--blue);font-weight:500}
/* ===== Document message ===== */
.msg.doc-msg{padding:0!important;max-width:250px}
.msg.doc-msg a{display:flex;align-items:center;gap:10px;padding:12px 12px;text-decoration:none;color:inherit}
.doc-ic{font-size:28px;flex-shrink:0}
.doc-info{flex:1;min-width:0;display:flex;flex-direction:column}
.doc-nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-sz{font-size:11.5px;color:var(--text2)}
.doc-dl{font-size:18px;flex-shrink:0}
/* ===== Contact message ===== */
.msg.contact-msg{padding:10px 12px!important;max-width:250px}
.ct-top{display:flex;align-items:center;gap:10px}
.ct-av{width:40px;height:40px;border-radius:50%;background:#3b9dff22;color:#3b9dff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ct-info{display:flex;flex-direction:column;min-width:0}
.ct-nm{font-weight:600;font-size:14px}
.ct-ph{font-size:12px;color:var(--text2)}
.ct-btn{margin-top:10px;width:100%;border:none;border-radius:8px;padding:8px;background:var(--blue);color:#fff;font-weight:600;cursor:pointer;font-size:13px}
/* ===== UPI message ===== */
.msg.upi-msg{padding:12px!important;max-width:230px;text-align:center}
.upi-head{font-size:13px;font-weight:600;margin-bottom:8px}
.upi-qr{width:150px;height:150px;border-radius:8px;background:#fff;padding:6px;display:block;margin:0 auto}
.upi-id{font-size:12.5px;color:var(--text2);margin-top:8px;word-break:break-all}
.upi-pay{display:inline-block;margin-top:10px;background:#f59e0b;color:#fff;font-weight:700;padding:8px 18px;border-radius:20px;text-decoration:none;font-size:13px}
/* ===== Events ===== */
.ev-tabs{display:flex;gap:8px;margin-bottom:14px}
.ev-tab{padding:7px 16px;border-radius:20px;background:var(--hover2);color:var(--text2);font-weight:600;font-size:13px;cursor:pointer}
.ev-tab.active{background:var(--blue);color:#fff}
.ev-card{display:flex;gap:14px;padding:14px;margin-bottom:12px;align-items:flex-start}
.ev-date{flex-shrink:0;width:52px;text-align:center;background:var(--hover2);border-radius:10px;padding:8px 0;overflow:hidden}
.ev-mon{display:block;font-size:12px;font-weight:700;color:#e8174c;text-transform:uppercase}
.ev-day{display:block;font-size:22px;font-weight:800;line-height:1.1}
.ev-main{flex:1;min-width:0}
.ev-title{font-size:16px;font-weight:700;margin-bottom:5px}
.ev-soon{background:#22c55e;color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;vertical-align:middle}
.ev-meta{font-size:12.5px;color:var(--text2);margin-bottom:2px}
.ev-desc{font-size:13.5px;margin:8px 0;white-space:pre-wrap}
.ev-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ev-btn{border:1px solid var(--line2);background:var(--card);color:var(--text);border-radius:8px;padding:7px 14px;font-weight:600;font-size:13px;cursor:pointer}
.ev-btn.on{background:#22c55e;color:#fff;border-color:#22c55e}
.ev-btn.on-int{background:#f59e0b;color:#fff;border-color:#f59e0b}
.ev-btn.del{padding:7px 11px}
/* ===== Forward label + Starred list ===== */
.fwd-lbl{font-size:11.5px;color:var(--text2);font-style:italic;margin-bottom:2px}
.star-row{padding:11px 4px;border-bottom:1px solid var(--line2)}
.star-tx{font-size:14px;margin-bottom:5px;white-space:pre-wrap;word-break:break-word}
.star-meta{font-size:12.5px;color:var(--blue)}
.star-meta span{cursor:pointer}
/* ===== Piyari UPI world ===== */
.upi-world{position:fixed;inset:0;z-index:5000;background:var(--bg);display:none;animation:upiIn .25s cubic-bezier(.2,.8,.2,1)}
@keyframes upiIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.upi-shell{height:100%;display:flex;flex-direction:column;max-width:520px;margin:0 auto;background:var(--bg)}
.upi-scroll{flex:1;overflow-y:auto;padding-bottom:12px}
.upi-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.upi-logo{font-size:20px;font-weight:800;color:#e8174c;display:flex;align-items:center;gap:6px}
.upi-logo b{color:#4f2fd0}.upi-logo .ul-p{background:linear-gradient(135deg,#e8174c,#7c3aed);color:#fff;width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.upi-head-r{display:flex;align-items:center;gap:12px}
.upi-bal{margin:4px 14px 0;border-radius:18px;padding:18px;color:#fff;background:linear-gradient(120deg,#3b1fb3,#7c3aed 60%,#9d4edd)}
.upi-dev{margin:10px 14px 0;background:#fff7ed;border:1px solid #fed7aa;color:#b45309;border-radius:12px;padding:11px 14px;font-size:13px;font-weight:600;text-align:center}
html[data-theme="dark"] .upi-dev,html[data-theme="midnight"] .upi-dev{background:#3a2a12;border-color:#5c3d17;color:#fbbf24}
.ub-top{font-size:13px;opacity:.85}
.ub-amt{font-size:32px;font-weight:800;margin:2px 0 4px}
.ub-id{font-size:13px;opacity:.9}
.ub-actions{display:flex;gap:10px;margin-top:14px}
.ub-actions button{flex:0 0 auto;background:#fff;color:#4f2fd0;border:none;border-radius:22px;padding:9px 18px;font-weight:700;font-size:13px;cursor:pointer}
.ub-actions .ghost{background:rgba(255,255,255,.18);color:#fff}
.upi-sec-t{font-weight:700;margin:18px 16px 10px;font-size:15px}
.upi-qa{display:flex;gap:6px;overflow-x:auto;padding:0 12px}
.upi-qai{flex:0 0 auto;width:76px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;font-size:11.5px;color:var(--text2);font-weight:600}
.qa-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.upi-addm{margin:14px;background:linear-gradient(90deg,#efeafc,#f6f0ff);color:#5b2bd6;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer;text-align:center;font-size:14px}
.upi-addm span{font-weight:500;opacity:.7;font-size:12px}
html[data-theme="dark"] .upi-addm,html[data-theme="midnight"] .upi-addm{background:#2a2350;color:#c9b8ff}
.upi-sec-t2{display:flex;align-items:center;justify-content:space-between;margin:8px 16px 8px;font-weight:700;font-size:15px}
.upi-sec-t2 .see{color:var(--blue);font-size:13px;font-weight:600;cursor:pointer}
.upi-tx{margin:0 12px}
.upi-txr{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border:1px solid var(--line2);border-radius:12px;margin-bottom:8px}
.tr-ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.tr-main{flex:1;min-width:0}.tr-nm{font-weight:600;font-size:14px}.tr-when{font-size:12px;color:var(--text2)}
.tr-amt{font-weight:800;font-size:14px;color:#e8174c;white-space:nowrap}.tr-amt.in{color:#16a34a}
.upi-empty{text-align:center;color:var(--text2);padding:24px;font-size:13px}
.upi-nav{display:flex;border-top:1px solid var(--line2);background:var(--card)}
.upi-navi{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;font-size:10.5px;color:var(--text2);cursor:pointer;font-weight:600}
.upi-navi .ui-ic{font-size:19px}
.upi-navi.on{color:#7c3aed}
.upi-card-box{padding:14px}
.upi-acc{background:linear-gradient(120deg,#3b1fb3,#7c3aed);color:#fff;border-radius:16px;padding:18px;margin-bottom:12px}
.acc-bank{font-size:13px;opacity:.85}.acc-no{font-size:15px;margin:4px 0}.acc-bal{font-size:26px;font-weight:800}
.upi-supp{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:15px;margin-bottom:10px;font-weight:600;cursor:pointer}

/* ============================================================
   UI POLISH FIXES
   ============================================================ */

/* --- 1. Composer buttons: "Photo/Video" tootna band --- */
.composer-actions{
  gap:4px !important;
  flex-wrap:nowrap !important;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.composer-actions::-webkit-scrollbar{display:none}
.composer-actions button{
  flex:1 1 0 !important;
  min-width:0 !important;
  white-space:nowrap !important;      /* line break band */
  overflow:hidden;
  text-overflow:ellipsis;
  padding:9px 6px !important;
  font-size:13px !important;
  gap:5px !important;
}
.composer-actions button svg,
.composer-actions button .at-ic{ flex:0 0 auto }
/* chhoti screen par aur compact */
@media(max-width:420px){
  .composer-actions button{ font-size:11.5px !important; padding:9px 3px !important; gap:3px !important }
}
@media(max-width:340px){
  .composer-actions button{ font-size:10.5px !important }
}

/* --- 2. Filter chips row: right edge par kata hua nahi lagega --- */
.ff-row{
  padding-right:16px !important;
  scroll-padding-right:16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ff-row::-webkit-scrollbar{display:none}
.ff-row::after{
  content:'';
  flex:0 0 8px;
}

/* --- 3. Story tray: "Add Story" card ka size story cards jaisa --- */
.stories{ padding-left:12px !important; padding-right:12px !important }
.story-add,.story.add{
  width:110px !important;
  height:196px !important;
  border-radius:12px !important;
  flex:0 0 110px !important;
}
.story{ flex:0 0 110px !important }

/* --- 4. Bottom nav: 7 items crowded the, ab balanced --- */
.bottom-nav{ padding:0 2px !important }
.bottom-nav .nav-tab{
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:8px 2px !important;
}
.bottom-nav .nav-tab svg{ width:23px !important; height:23px !important }

/* --- 5. Lambe button text kahin bhi na toote --- */
.chip,.btn-blue,.btn-grey,.btn-line,.tile span,.am-tile span{
  white-space:nowrap;
}

/* --- 6. Card ke andar text overflow safe --- */
.card .upbadge,.dash-post,.contact span{
  overflow-wrap:anywhere;
}

/* --- 7. Accessibility: pinch-zoom band tha, ab allow (a11y + Play Store) --- */
/* (viewport meta neeche JS se update hota hai) */

/* --- 8. Bottom nav ke peeche content na chhupe --- */
@media(max-width:900px){
  .col-main{ padding-bottom:76px !important }
}

/* --- 9. Safe area (iPhone notch / Android gesture bar) --- */
.bottom-nav{
  padding-bottom:calc(4px + env(safe-area-inset-bottom,0px)) !important;
}

/* --- 10. Top bar: logo aur icons ke beech kabhi overlap na ho --- */
.topbar{ gap:6px }
.topbar .logo{ flex:0 1 auto; min-width:0; overflow:hidden }
.topbar .nav-right{ flex:0 0 auto }

/* --- 11. Long naam / email ellipsis --- */
.side-item span,.contact span,.msg-name,.post-author{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}

/* --- 12. Modal chhoti screen par edge tak na jaye --- */
@media(max-width:400px){
  .modal{ width:calc(100vw - 16px) !important; max-width:calc(100vw - 16px) !important }
}

/* ============ LIVE BROADCASTER CONTROLS ============ */
.live-ctrls{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  z-index:6; display:flex; flex-direction:column; gap:11px;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.lc-btn{
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.48); backdrop-filter:blur(8px);
  color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.3); transition:transform .12s, background .15s;
  position:relative;
}
.lc-btn:active{ transform:scale(.9) }
.lc-btn.on{ background:rgba(24,119,242,.92) }
.lc-btn.rec{ background:rgba(220,38,38,.92) }
.lc-btn.off{ background:rgba(220,38,38,.75) }
.lc-btn .lc-lbl{
  position:absolute; right:56px; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.7); color:#fff; font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:99px; white-space:nowrap; opacity:0;
  pointer-events:none; transition:opacity .15s;
}
.lc-btn:hover .lc-lbl{ opacity:1 }
/* REC pulsing dot */
.rec-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:#ef4444; margin-right:5px; animation:recPulse 1.1s infinite;
}
@keyframes recPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.live-count.recording{ background:rgba(220,38,38,.85) !important; }
@media(max-width:400px){
  .live-ctrls{ right:8px; gap:9px }
  .lc-btn{ width:44px; height:44px; font-size:18px }
}

/* ===== LIVE CONTROLS — v2 (mobile friendly) ===== */
.live-ctrls{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  z-index:6; display:flex; flex-direction:column; gap:14px;
}
.lc-wrap{ display:flex; flex-direction:column; align-items:center; gap:3px }
.lc-btn{
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  color:#fff; font-size:21px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.35); transition:transform .1s, background .15s;
}
.lc-btn:active{ transform:scale(.86); background:rgba(255,255,255,.25) }
.lc-btn.on { background:rgba(24,119,242,.95) }
.lc-btn.rec{ background:rgba(220,38,38,.95) }
.lc-btn.off{ background:rgba(220,38,38,.9) }
/* label ab HAMESHA dikhega, chipakne wala tooltip nahi */
.lc-cap{
  font-size:10px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9);
  letter-spacing:.2px; text-align:center; line-height:1;
}
.lc-lbl{ display:none !important }   /* purana hover tooltip band */

/* camera band hone par saaf message */
#liveCamOff{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:#111; color:#fff; text-align:center; padding:20px;
}
#liveCamOff .cof-ic{ font-size:54px }
#liveCamOff .cof-t{ font-weight:800; font-size:18px }
#liveCamOff .cof-s{ font-size:13.5px; opacity:.75; max-width:280px; line-height:1.5 }

@media(max-width:400px){
  .live-ctrls{ right:7px; gap:11px }
  .lc-btn{ width:46px; height:46px; font-size:19px }
  .lc-cap{ font-size:9px }
}

/* live UI ke upar modal/sheet dikhe */
.call-ui ~ .overlay, #modalRoot .overlay{ z-index:9000 !important }
#modalRoot{ position:relative; z-index:9000 }

/* STOP button — live khatam karne ke liye */
.lc-btn.stop{
  background:#dc2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.28), 0 3px 14px rgba(0,0,0,.4) !important;
  animation:stopPulse 2s infinite;
}
.lc-btn.stop:active{ transform:scale(.86); background:#b91c1c !important }

/* Live viewer connection/autoplay recovery. Timer and comments can continue even
   when a MediaStream was not attached, so the player always exposes its state. */
.live-connect-state{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;min-width:190px;
  max-width:82vw;padding:16px 20px;border-radius:16px;background:rgba(0,0,0,.62);
  color:#fff;text-align:center;font-size:13px;font-weight:700;backdrop-filter:blur(8px);
}
.live-connect-state.failed{background:rgba(127,29,29,.88);cursor:pointer;z-index:8}
.live-connect-spinner{width:30px;height:30px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:liveSpin .8s linear infinite}
.live-connect-state.failed .live-connect-spinner{animation:none;border:none;width:34px;height:34px}
.live-connect-state.failed .live-connect-spinner::after{content:'↻';font-size:34px;line-height:34px}
@keyframes liveSpin{to{transform:rotate(360deg)}}
.live-play-gate{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:9;
  display:none;align-items:center;gap:10px;max-width:86vw;padding:13px 18px;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,0,0,.76);
  color:#fff;box-shadow:0 6px 22px rgba(0,0,0,.35);cursor:pointer;
}
.live-play-gate span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;color:#111;padding-left:2px}
.live-play-gate b{font-size:13px;line-height:1.25;text-align:left}
.live-remote-cam-off{
  position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:24px;background:#101116;color:#fff;text-align:center;
}
.live-remote-cam-off>div{font-size:54px}.live-remote-cam-off>b{font-size:18px}.live-remote-cam-off>span{font-size:13px;opacity:.72;max-width:280px;line-height:1.45}

@media(max-height:720px){
  .live-ctrls{gap:6px!important;right:6px!important}
  .live-ctrls .lc-btn{width:42px;height:42px;font-size:18px}
  .live-ctrls .lc-cap{font-size:8px}
  .live-rail{gap:5px;top:8px;right:8px}
  .live-rail .lr-ic{width:38px;height:38px;font-size:17px}
  .live-rail .lr-btn{font-size:9px}
}
@keyframes stopPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(220,38,38,.28), 0 3px 14px rgba(0,0,0,.4) }
  50%    { box-shadow:0 0 0 7px rgba(220,38,38,.12), 0 3px 14px rgba(0,0,0,.4) }
}

/* ===== PiyariChat: WhatsApp-style polish (back button, jump, unread, responsive) ===== */
.chat-back{background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--text);padding:2px 8px 4px 4px;border-radius:50%;flex-shrink:0}
.chat-back:active{background:var(--hover)}
.chat-window.pc-chat .chat-back{color:#fff}
@media(hover:hover){.chat-back:hover{background:var(--hover)}.chat-window.pc-chat .chat-back:hover{background:rgba(255,255,255,.14)}}

.chat-jump{position:absolute;right:14px;bottom:74px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--text);font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.22);z-index:5}
.chat-window{position:fixed}  /* ensure .chat-jump absolute anchor */
.chat-jump-n{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#25d366;color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
@media(hover:hover){.chat-jump:hover{filter:brightness(1.06)}}

.unread-div{background:#e1f3fb;color:#0b6e8f;font-weight:600;border-radius:12px;padding:6px 12px}
#pcWorld.pc-dark .unread-div,.chat-window.pc-chat .unread-div{background:#182229;color:#8fd3ef}

/* message swipe-to-reply feel */
#chatBody .msg-wrap{will-change:transform}

/* ===== Desktop: bade screen par badi chat ===== */
@media(min-width:521px){
  .chat-window{width:400px;height:min(600px,86vh)}
  .chat-window.pc-chat{left:50%;right:auto;transform:translateX(-50%);width:min(760px,96vw);height:min(92vh,820px);top:auto;bottom:0;border-radius:16px 16px 0 0}
  .chat-window.pc-chat .chat-body{padding:14px 8%}
  .chat-head [onclick]{padding:4px;border-radius:8px}
}
@media(hover:hover){
  .pc-row:hover{background:var(--hover,#f5f6f6)}
  #pcWorld.pc-dark .pc-row:hover{background:#202c33}
  .pc-navtab:hover{background:var(--hover,#f0f2f5)}
  .pc-ic:hover{background:rgba(255,255,255,.14);border-radius:8px}
  .chat-head [onclick]:hover{background:var(--hover)}
  .chat-window.pc-chat .chat-head [onclick]:hover{background:rgba(255,255,255,.14)}
  .msg-menu-b:hover{background:var(--hover,#f0f2f5)}
  .pc-sheet-b:hover{background:var(--hover,#f0f2f5)}
}

/* ===== Mobile polish: bade touch targets, no iOS zoom, safe areas ===== */
@media(max-width:520px){
  .chat-input input{font-size:16px}          /* iOS auto-zoom rokta hai */
  .pc-csearch{font-size:16px}
  .chat-input .cmic{width:38px;height:40px;font-size:20px}
  .chat-head{gap:8px}
  .chat-head>div[style*="gap:13px"]{gap:10px!important}
  .chat-jump{bottom:calc(78px + env(safe-area-inset-bottom))}
  .msg-menu-b,.pc-sheet-b{min-height:46px}
  .pc-navtab{min-height:52px}
  .pc-row{min-height:64px}
}

/* ===== 📢 Advertise CTA — naya premium design ===== */
.advert-cta{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:14px 16px;border-radius:16px;cursor:pointer;color:#fff;overflow:hidden;background:linear-gradient(135deg,#7c2ae8 0%,#c81f6e 55%,#e8174c 100%);box-shadow:0 6px 20px rgba(200,31,110,.28);transition:transform .18s,box-shadow .18s}
.advert-cta .ac-ic{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(255,255,255,.18);border-radius:14px;backdrop-filter:blur(2px)}
.advert-cta .ac-main{flex:1;min-width:0}
.advert-cta .ac-main b{font-size:15.5px;letter-spacing:.2px;display:block}
.advert-cta .ac-sub{font-size:12.5px;opacity:.92;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.advert-cta .ac-btn{flex-shrink:0;background:#fff;color:#c81f6e;font-weight:800;font-size:13px;padding:8px 14px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.18);white-space:nowrap}
.advert-cta .ac-shine{position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:acShine 4.2s ease-in-out infinite;pointer-events:none}
@keyframes acShine{0%,60%{left:-70%}85%,100%{left:130%}}
@media(hover:hover){.advert-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(200,31,110,.36)}}
.advert-cta:active{transform:scale(.985)}
@media(max-width:400px){.advert-cta{padding:12px}.advert-cta .ac-ic{width:40px;height:40px;font-size:20px}.advert-cta .ac-main b{font-size:14px}.advert-cta .ac-btn{padding:7px 11px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.advert-cta .ac-shine{animation:none}}

/* ===== Piyari UPI polish ===== */
.upi-chips{display:flex;gap:8px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.upi-chip{border:1.5px solid #7c3aed;background:transparent;color:#7c3aed;font-weight:700;font-size:13.5px;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.upi-chip:active,.upi-chip:focus{background:#7c3aed;color:#fff}
@media(hover:hover){.upi-chip:hover{background:#7c3aed;color:#fff}}
.upi-qa{padding-bottom:6px;scrollbar-width:none}
.upi-qa::-webkit-scrollbar{display:none}
@media(hover:hover){.upi-qai:hover .qa-ic{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.18)}}
.upi-qai .qa-ic{transition:transform .15s,box-shadow .15s}

/* ===== Ad forms (.inp) ===== */
.inp{display:block;width:100%;box-sizing:border-box;padding:12px 13px;border:1.5px solid var(--line2,#dde1e6);border-radius:12px;background:var(--card,#fff);color:var(--text,#111);font-size:15px;outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.inp::placeholder{color:var(--text2,#8a8f98)}
select.inp{appearance:auto;cursor:pointer}
@media(max-width:520px){.inp{font-size:16px}}

/* Pre-roll unmute button */
.mvp-unmute{position:absolute;top:10px;right:10px;z-index:5;width:38px;height:38px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.2);font-size:15px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s;padding:0}
.mvp-unmute:hover{background:rgba(0,0,0,.8)}

/* ===== YouTube-jaisa ad progress bar ===== */
.mvp-adbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:4}
.mvp-adbar i{display:block;height:100%;width:0;background:#f5c518;transition:width .25s linear}

/* ===================== PAGE PRO (Facebook-style Page) ===================== */
.pgpro{max-width:940px;margin:0 auto}
.pg-cover{position:relative;height:220px;border-radius:0 0 14px 14px;background-size:cover;background-position:center}
@media(max-width:600px){.pg-cover{height:150px}}
.pg-cover-edit{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-weight:600;cursor:pointer;font-size:13px}
.pg-head{display:flex;align-items:flex-end;gap:16px;padding:0 20px;margin-top:-46px;flex-wrap:wrap}
.pg-logo{flex:0 0 auto}
.pg-logo-img{width:120px!important;height:120px!important;border-radius:50%!important;border:4px solid var(--card,#fff);object-fit:cover;background:var(--hover2);font-size:44px!important;display:flex;align-items:center;justify-content:center}
.pg-title-wrap{flex:1;min-width:200px;padding-bottom:6px}
.pg-title{font-size:26px;font-weight:800;display:flex;align-items:center;gap:8px;line-height:1.15}
.pg-meta{color:var(--muted);font-size:14px;margin-top:3px;font-weight:600}
.pg-about-short{color:var(--muted);font-size:13.5px;margin-top:4px}
.pg-actions{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--border,#e4e6eb)}
.pg-btn{background:var(--hover2,#e4e6eb);color:var(--text,#111);border:none;border-radius:8px;padding:9px 16px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pg-btn:hover{filter:brightness(.96)}
.pg-btn-primary{background:var(--brand-blue,#1877f2);color:#fff}
.pg-btn-cta{background:#00a400;color:#fff}
.pg-tabs{display:flex;gap:2px;overflow-x:auto;padding:2px 12px;border-bottom:1px solid var(--border,#e4e6eb);position:sticky;top:0;background:var(--card,#fff);z-index:5;-webkit-overflow-scrolling:touch}
.pg-tab{background:none;border:none;padding:12px 14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;font-size:14px}
.pg-tab.on{color:var(--brand-blue,#1877f2);border-bottom-color:var(--brand-blue,#1877f2)}
.pg-body{padding:16px 12px}
.pg-home{display:flex;gap:16px;align-items:flex-start}
.pg-home-left{flex:0 0 340px;max-width:340px;position:sticky;top:56px}
.pg-home-right{flex:1;min-width:0}
@media(max-width:820px){.pg-home{flex-direction:column}.pg-home-left{flex:1;max-width:100%;width:100%;position:static}}
.pg-card{margin-bottom:14px}
.pg-card-h{font-weight:700;font-size:17px;margin-bottom:8px}
.pg-chips{display:flex;flex-direction:column;gap:6px}
.pg-chip{font-size:14px}
.pg-photo-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pg-photo-mini img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer}
.pg-single{max-width:640px;margin:0 auto}
.pg-pin-label{font-weight:700;color:var(--muted);margin:4px 0 8px;font-size:13px}
.pg-about-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border,#eee)}
.pg-about-ic{font-size:20px;width:26px;text-align:center}
.pg-about-k{font-size:12px;color:var(--muted);font-weight:600}
.pg-about-v{font-weight:600}
.pg-map{width:100%;height:220px;border:0;border-radius:10px;margin-top:8px}
.pg-grid-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pg-grid-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer}
.pg-lb{background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.pg-lb img{max-width:94vw;max-height:90vh;border-radius:8px}
.pg-grid-vid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.pg-grid-vid{grid-template-columns:1fr}}
.pg-vid-cap{font-size:13px;margin-top:4px;color:var(--muted)}
.pg-grid-reels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pg-reel-item{aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:#000}
.pg-rating-sum{display:flex;align-items:center;gap:16px}
.pg-rating-big{font-size:40px;font-weight:800;line-height:1}
.pg-star-pick{font-size:30px;color:#f5a623;cursor:pointer;letter-spacing:3px}
.pg-review-top{display:flex;gap:10px;align-items:center}
.pg-review-stars{color:#f5a623}
.pg-review{margin-bottom:10px}
.pg-review-reply{margin-top:8px;padding:8px 10px;background:var(--hover2,#f0f2f5);border-radius:8px;font-size:14px}
.pg-event{margin-bottom:10px}
.pg-event-date{font-weight:700;color:var(--brand-red,#e8174c);font-size:13px}
.pg-grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pg-product{border:1px solid var(--border,#e4e6eb);border-radius:12px;overflow:hidden;background:var(--card,#fff)}
.pg-product-img{height:130px;display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--hover2)}
.pg-product-b{padding:10px}
.pg-product-price{font-weight:700;color:var(--brand-blue,#1877f2);margin-top:2px}
.pg-service{margin-bottom:10px}
.pg-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.pg-stat{background:var(--card,#fff);border:1px solid var(--border,#e4e6eb);border-radius:12px;padding:14px;text-align:center}
.pg-stat-ic{font-size:22px}
.pg-stat-v{font-size:22px;font-weight:800;margin-top:4px}
.pg-stat-l{font-size:12px;color:var(--muted);font-weight:600}
.pg-more-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:10px;cursor:pointer;font-weight:600}
.pg-more-item:hover{background:var(--hover2,#f0f2f5)}
.pg-more-item span:first-child{font-size:20px;width:24px;text-align:center}
.pg-create-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pg-create-tile{border:1px solid var(--border,#e4e6eb);border-radius:12px;padding:16px 8px;text-align:center;cursor:pointer;font-weight:600;font-size:13px}
.pg-create-tile:hover{background:var(--hover2,#f0f2f5)}
.pg-create-ic{font-size:26px;margin-bottom:6px}
.pg-edit-sec{font-weight:700;margin:16px 0 4px;padding-top:12px;border-top:1px solid var(--border,#eee)}

/* ===== PAGE SHOP 2.0 + REVIEWS 2.0 ===== */
.pg-cat-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px}
.pg-cat{background:var(--hover2,#e4e6eb);border:none;border-radius:16px;padding:6px 14px;font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer;color:var(--text)}
.pg-cat.on{background:var(--brand-blue,#1877f2);color:#fff}
.pg-cart-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border,#eee)}
.pg-qbtn{background:var(--hover2,#e4e6eb);border:none;border-radius:6px;width:30px;height:30px;font-weight:800;cursor:pointer;font-size:15px}
.pg-rating-sum2{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.pg-bd{flex:1;min-width:180px}
.pg-bd-row{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:13px}
.pg-bd-bar{flex:1;height:8px;background:var(--hover2,#e4e6eb);border-radius:6px;overflow:hidden}
.pg-bd-bar i{display:block;height:100%;background:#f5a623}
.pg-rec-pick{display:flex;gap:6px}
.pg-rec-btn{background:var(--hover2,#e4e6eb);border:none;border-radius:16px;padding:6px 12px;font-weight:600;font-size:13px;cursor:pointer;color:var(--text)}
.pg-rec-btn.on{background:#22c55e;color:#fff}

/* ===== PROFILE PRO: tabs scroll (7 tabs) ===== */
.profile-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
.profile-tabs button{white-space:nowrap;flex:0 0 auto}
.pf-intro a{color:var(--blue)}

/* ===== PAGE INBOX quick replies ===== */
.pg-quickbar{display:flex;gap:6px;overflow-x:auto;padding:6px 10px;border-top:1px solid var(--border,#eee)}
.pg-quickbar:empty{display:none}
.pg-quick{background:var(--hover2,#e4e6eb);border:none;border-radius:14px;padding:6px 12px;font-size:12.5px;white-space:nowrap;cursor:pointer;color:var(--text)}

/* ===== Chat GIF button ===== */
.chat-input .cmic-gif{font-weight:800;font-size:11px;letter-spacing:.5px;border:1.6px solid currentColor;border-radius:7px;width:auto;min-width:30px;padding:0 6px;height:26px;line-height:1;opacity:.9}
.chat-input .cmic-gif:active{transform:scale(.9)}

/* ===== WhatsApp-style Chat Picker (Emoji | GIF | Sticker) — mobile-first ===== */
.chat-picker{position:fixed;left:0;right:0;bottom:56px;height:min(46vh,380px);background:var(--card);border-top:1px solid var(--line);z-index:9600;display:flex;flex-direction:column;box-shadow:0 -4px 18px rgba(0,0,0,.18)}
.cp-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cp-tabs{display:flex;gap:4px;padding:6px 8px;border-top:1px solid var(--line);background:var(--hover2)}
.cp-tab{flex:1;background:none;border:none;font-size:17px;font-weight:800;padding:8px;border-radius:8px;cursor:pointer;color:var(--text)}
.cp-tab.on{background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.cp-tab.cp-close{flex:0 0 42px;color:var(--muted)}
.cp-catrow{display:flex;gap:2px;overflow-x:auto;padding:6px 8px;border-bottom:1px solid var(--line);flex-shrink:0;-webkit-overflow-scrolling:touch}
.cp-cat{background:none;border:none;font-size:20px;padding:4px 6px;cursor:pointer;border-radius:8px;flex-shrink:0}
.cp-cat:active{background:var(--hover2)}
.cp-search{padding:6px 10px;flex-shrink:0;display:flex;gap:6px}
.cp-search input{flex:1;border:1px solid var(--line);border-radius:20px;padding:8px 14px;font-size:14px;background:var(--hover2);color:var(--text)}
.cp-search button{background:var(--blue);color:#fff;border:none;border-radius:20px;padding:0 16px;font-weight:700;cursor:pointer}
.cp-escroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:8px}
.cp-esec-h{font-size:12px;font-weight:700;color:var(--muted);padding:8px 12px 2px}
.cp-egrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:0 8px}
.cp-emoji{font-size:26px;text-align:center;padding:5px 0;cursor:pointer;border-radius:8px;line-height:1}
.cp-emoji:active{background:var(--hover2)}
.cp-grid{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;align-content:start}
.cp-grid img{width:100%;height:100px;object-fit:cover;border-radius:8px;cursor:pointer;background:var(--hover2)}
.cp-grid-st img{object-fit:contain;background:transparent;height:96px}
@media(min-width:900px){.chat-picker{max-width:420px;left:auto;right:20px;border-radius:14px 14px 0 0;border:1px solid var(--line)}}
@media(max-width:400px){.cp-egrid{grid-template-columns:repeat(7,1fr)}.cp-emoji{font-size:24px}}
/* Sticker message — no bubble, transparent */
.sticker-msg{background:none!important;padding:0!important;box-shadow:none!important}
.sticker-msg img{width:128px;height:128px;object-fit:contain}
.gif-msg img{max-width:210px;border-radius:10px}

/* ===== Chat ⋮ more menu + Media/Links/Docs + Poll + Event ===== */
.chat-more-menu{position:fixed;top:50px;right:10px;min-width:216px;max-height:80vh;overflow-y:auto;z-index:9701}
.ml-tab{flex:1;background:none;border:none;padding:11px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer}
.ml-tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.ml-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ml-grid img,.ml-cell{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;background:var(--hover2)}
.ml-cell{display:flex;align-items:center;justify-content:center;font-size:30px}
.ml-link,.ml-doc{display:block;padding:11px;border-bottom:1px solid var(--line);color:var(--blue);text-decoration:none;word-break:break-all;font-size:14px}
.ml-doc{color:var(--text)}
/* Poll message */
.poll-msg{max-width:min(80%,320px);background:var(--card);border:1px solid var(--line)}
.poll-q{font-weight:700;margin-bottom:8px}
.poll-opt{position:relative;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:5px 0;cursor:pointer;overflow:hidden}
.poll-opt-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(24,119,242,.16);width:0;transition:width .3s;z-index:0}
.poll-opt-t{position:relative;z-index:1;display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.poll-opt.voted{border-color:var(--blue)}
.poll-total{font-size:12px;color:var(--muted);margin-top:6px}
/* Event message */
.event-msg{display:flex;gap:10px;max-width:min(82%,340px);background:var(--card);border:1px solid var(--line)}
.event-cal{font-size:28px}
.event-t{font-weight:700;font-size:15px}
.event-d{font-size:13px;color:var(--muted);margin-top:2px}
.event-go{margin-top:8px;background:var(--blue);color:#fff;border:none;border-radius:18px;padding:6px 16px;font-weight:700;cursor:pointer;font-size:13px}
.event-go.on{background:#16a34a}

/* ===== Watch — YouTube-style ===== */
.yt-wrap{max-width:1100px;margin:0 auto;padding:12px}
.yt-head{font-size:22px;font-weight:800;margin:4px 6px 14px}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px 16px}
.yt-card{cursor:pointer}
.yt-thumb{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.yt-thumb img{width:100%;height:100%;object-fit:cover}
.yt-noimg{font-size:40px}
.yt-play{position:absolute;color:#fff;font-size:30px;opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,.6);pointer-events:none}
.yt-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);color:#fff;font-size:12px;font-weight:700;padding:1px 6px;border-radius:5px}
.yt-meta{display:flex;gap:10px;margin-top:10px}
.yt-info{min-width:0;flex:1}
.yt-title{font-weight:700;font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-sub{font-size:13px;color:var(--muted);margin-top:2px}
@media(max-width:600px){.yt-grid{grid-template-columns:1fr;gap:16px}.yt-thumb{border-radius:0}.yt-card{margin:0 -12px}.yt-meta{padding:0 12px}.yt-wrap{padding:8px 0}.yt-head{padding:0 14px}}

/* ===== Watch — YouTube search + category chips + sponsored ===== */
.yt-searchbar{display:flex;align-items:center;gap:8px;max-width:560px;margin:2px auto 12px;background:var(--hover2);border:1px solid var(--line);border-radius:24px;padding:8px 16px}
.yt-searchbar input{flex:1;border:none;background:none;font-size:15px;color:var(--text);outline:none}
.yt-chips{display:flex;gap:9px;overflow-x:auto;padding:2px 6px 14px;scrollbar-width:none;position:sticky;top:0;background:var(--bg,var(--card));z-index:5}
.yt-chips::-webkit-scrollbar{display:none}
.yt-chip{flex:0 0 auto;background:var(--hover2);border:none;border-radius:9px;padding:8px 13px;font-weight:600;font-size:13.5px;white-space:nowrap;cursor:pointer;color:var(--text)}
.yt-chip.on{background:var(--text);color:var(--card)}
.yt-sponsored{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.75);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px}
.yt-thumb video{width:100%;height:100%;object-fit:cover}
.yt-adav{width:36px;height:36px;border-radius:50%;background:var(--hover2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
@media(max-width:600px){.yt-searchbar{margin:2px 12px 10px}.yt-chips{padding-left:12px}}

/* ===== Watch page — YouTube desktop (video + up-next sidebar) ===== */
/* ===== YouTube-style WATCH PAGE — sticky video (mobile + desktop) ===== */
.ytw-page{max-width:1000px;margin:0 auto;padding-bottom:24px}
/* 📌 SIRF video sticky — top pe chipka rahega; neeche comments + up-next scroll honge */
.ytw-vidbox{position:sticky;top:var(--nav-h,56px);z-index:20;background:#000;width:100%}
.ytw-vidbox .vid-embed,.ytw-vidbox .mvp{border-radius:0;max-width:100%}
.ytw-vidbox .vid-embed{aspect-ratio:16/9;height:auto}
.ytw-vidbox video,.ytw-vidbox iframe{width:100%;height:100%;background:#000}
.ytw-below{padding:0 12px}
.ytw-backbtn{margin:10px 0}
/* post card ka apna video hide (sticky wala upar dikh raha hai) — double video na ho */
#ytwMain .vid-embed,#ytwMain .mvp{display:none!important}
#ytwMain .card{border-radius:12px;box-shadow:none;border:1px solid var(--line)}
.ytw-side-h{font-weight:700;font-size:16px}
.ytw-side-list{display:grid;grid-template-columns:1fr;gap:12px}
.ytw-side-card{display:flex;gap:9px;cursor:pointer}
.ytw-side-thumb{position:relative;width:160px;height:90px;flex-shrink:0;border-radius:10px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;font-size:26px}
.ytw-side-thumb img{width:100%;height:100%;object-fit:cover}
.ytw-side-info{min-width:0;flex:1}
.ytw-side-title{font-weight:600;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:3px}
@media(min-width:900px){.ytw-side-list{grid-template-columns:1fr 1fr;gap:16px}}

/* ===================================================================
   PREMIUM WATCH — two-column desktop / pinned mobile + custom player
   =================================================================== */
.pbw{max-width:1300px;margin:0 auto;padding:0 0 40px}
.pbw-main{min-width:0;position:relative}
/* back button ab video par floating corner me — video aur details ke beech gap nahi banata */
.pbw-back{position:absolute;top:8px;left:8px;z-index:41;width:38px;height:38px;padding:0;border-radius:50%;background:rgba(15,15,20,.55);color:#fff;border:none;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);transition:background .15s}
.pbw-back:hover{background:rgba(15,15,20,.8)}
/* video + details ek unit: koi gap/border nahi, card seedha video se chipka */
.pbw-below{padding:0}
.pbw-below .vid-embed,.pbw-below .mvp{display:none!important}
.pbw-below .card{border:none;border-radius:0;box-shadow:none;margin:0;border-bottom:1px solid var(--line)}
.pbw-side{padding:0 12px}
.pbw-side-h{font-weight:700;font-size:16px;margin:12px 0 10px}
#pbwRecs{display:grid;grid-template-columns:1fr;gap:12px}
#pbwMore{min-height:24px}
/* mobile: player pinned to top, everything scrolls below */
.pbw-stage{position:sticky;top:var(--nav-h,56px);z-index:30;background:#000;width:100%}
@media(min-width:600px){#pbwRecs{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){
  .pbw{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start;padding:16px}
  .pbw-stage{position:sticky;top:calc(var(--nav-h,56px) + 12px);border-radius:14px 14px 0 0;overflow:hidden}
  .pbw-back{top:10px;left:10px}
  .pbw-below{padding:0}
  .pbw-below .card{border-radius:0 0 14px 14px}
  .pbw-side{padding:0}
  #pbwRecs{grid-template-columns:1fr;gap:14px}
  /* theater mode: player spans full width, recs drop below */
  .pbw.pbw-theater{grid-template-columns:1fr}
  .pbw.pbw-theater .pbw-stage{position:static;max-height:82vh}
  .pbw.pbw-theater .pbw-side{margin-top:16px}
}

/* ---------- YouTube-style video info (title / channel / actions / description) ---------- */
.wv{padding:14px 14px 10px}
.wv-title{font-size:19px;font-weight:700;line-height:1.32;margin:0 0 10px;word-break:break-word}
.wv-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 8px;margin-bottom:12px}
.wv-chan{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.wv-chan-i{min-width:0}
.wv-cname{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:3px}
.wv-csub{font-size:12.5px;color:var(--text2)}
.wv-sub{background:var(--text);color:var(--card);border:none;border-radius:22px;padding:9px 18px;font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:opacity .15s}
.wv-sub:hover{opacity:.85}
.wv-sub.following{background:var(--hover2);color:var(--text)}
.wv-sub.wv-own{background:var(--hover2);color:var(--text2);cursor:default}
.wv-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.wv-actions button{background:var(--hover2);border:none;color:var(--text);border-radius:22px;padding:9px 15px;font-weight:600;font-size:13.5px;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:background .15s}
.wv-actions button:hover{background:var(--line)}
.wv-actions button[class*="reacted-"]{background:var(--accent);color:#fff}
.wv-rx{font-size:13px;color:var(--text2);display:flex;align-items:center;margin-left:-2px}
.wv-desc{background:var(--hover2);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;margin-bottom:16px}
.wv-desc-h{font-weight:500}
.wv-cat{color:var(--blue);cursor:pointer;font-weight:600}
.wv-desc-b{margin-top:6px;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wv-desc.open .wv-desc-b{-webkit-line-clamp:unset;overflow:visible}
.wv-more{display:inline-block;margin-top:5px;font-weight:600;color:var(--text2);cursor:pointer}
.wv-desc.open .wv-more{display:none}
.wv-comm-h{font-weight:700;font-size:15px;margin:2px 0 8px}
.wv .comments{margin-top:2px}
@media(max-width:600px){
  .wv-title{font-size:17px}
  .wv-actions{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
  .wv-actions::-webkit-scrollbar{display:none}
}

/* ---------- GIFTS / SUPPORT sheet (posts + video) ---------- */
.pbg-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;animation:pbgFade .18s ease}
@keyframes pbgFade{from{opacity:0}to{opacity:1}}
.pbg-sheet{background:var(--card);width:100%;max-width:460px;border-radius:18px 18px 0 0;padding:16px 16px 22px;box-shadow:0 -6px 30px rgba(0,0,0,.35);animation:pbgUp .22s ease}
@media(min-width:600px){.pbg-overlay{align-items:center}.pbg-sheet{border-radius:18px}}
@keyframes pbgUp{from{transform:translateY(40px)}to{transform:none}}
.pbg-head{display:flex;align-items:center;justify-content:space-between;font-size:16px;margin-bottom:8px}
.pbg-x{cursor:pointer;font-size:18px;color:var(--text2);padding:2px 8px}
.pbg-bal{font-size:13px;color:var(--text2);margin-bottom:12px}
.pbg-get{color:var(--blue);font-weight:600;cursor:pointer;margin-left:6px}
.pbg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:380px){.pbg-grid{grid-template-columns:repeat(3,1fr)}}
.pbg-item{background:var(--hover2);border-radius:14px;padding:12px 4px 8px;text-align:center;cursor:pointer;transition:transform .12s,background .12s}
.pbg-item:hover{background:var(--line);transform:translateY(-2px)}
.pbg-item:active{transform:scale(.94)}
.pbg-emo{font-size:30px;line-height:1}
.pbg-nm{font-size:11.5px;font-weight:600;margin-top:3px}
.pbg-price{font-size:11.5px;color:var(--text2);margin-top:2px}
.pbg-note{font-size:12px;color:var(--text2);text-align:center;margin-top:14px;line-height:1.5}
.pbg-fly{position:fixed;left:50%;bottom:22%;transform:translateX(-50%);font-size:54px;z-index:1400;pointer-events:none;animation:pbgFly 1.5s ease forwards}
@keyframes pbgFly{0%{opacity:0;transform:translateX(-50%) scale(.5)}20%{opacity:1;transform:translateX(-50%) scale(1.1)}60%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-120px) scale(1)}}
.pb-giftcount{color:#e8174c;font-weight:600;font-size:13px}

/* ---------- FEED: long-video slot (tap -> Watch-jaisa premium player inline) ---------- */
.pbp-slot{position:relative;width:100%;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden;margin-top:2px}
.pbp-slot.playing{aspect-ratio:auto;cursor:default}
.pbp-slot>.pbp-slot-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pbp-slot>.pbp-slot-noimg{display:flex;align-items:center;justify-content:center;font-size:34px}
.pbp-slot>.pbp-slot-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:none;background:rgba(15,15,20,.6);color:#fff;font-size:26px;padding-left:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);box-shadow:0 3px 14px rgba(0,0,0,.4);transition:transform .15s,background .15s}
.pbp-slot>.pbp-slot-play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--accent,#e8174c)}
.pbp-slot>.pbp-slot-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);color:#fff;font-size:12px;font-weight:600;padding:2px 7px;border-radius:5px}
.pbp-slot.pbp-slot-loading>.pbp-slot-play{opacity:.4}
.pbp-slot>.pbp-slot-exp{position:absolute;top:8px;right:8px;z-index:45;width:34px;height:34px;border-radius:50%;border:none;background:rgba(15,15,20,.55);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);transition:background .15s}
.pbp-slot>.pbp-slot-exp:hover{background:rgba(15,15,20,.85)}
.pbp-slot.playing>.pbp-slot-thumb,.pbp-slot.playing>.pbp-slot-play,.pbp-slot.playing>.pbp-slot-dur{display:none!important}
/* feed me video par vertical drag = page scroll (minimize sirf ⌄ button se) */
.pbp-infeed .pbp-gest{touch-action:pan-y}

/* ---------- the player itself ---------- */
.pbp{position:relative;width:100%;background:#000;user-select:none;-webkit-user-select:none;outline:none;transition:transform .18s ease,opacity .18s ease}
.pbp-screen{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.pbp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.pbp-frame{position:absolute;inset:0}
.pbp-frame .vid-embed,.pbp-frame .mvp{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;border-radius:0}
.pbp-frame-mode .pbp-ctrl,.pbp-frame-mode .pbp-gest,.pbp-frame-mode .pbp-center,.pbp-frame-mode .pbp-minibar{display:none!important}
.pbp-bright{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:2;transition:opacity .1s linear}
.pbp-gest{position:absolute;inset:0;z-index:3;touch-action:none}
.pbp-load{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:4;pointer-events:none}
.pbp-load.on{display:flex}
.pbp-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:4;pointer-events:none}
.pbp.pbp-paused .pbp-center{display:flex}
.pbp-big{width:70px;height:70px;border-radius:50%;border:none;background:rgba(15,15,20,.62);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;padding-left:5px;backdrop-filter:blur(3px);box-shadow:0 4px 18px rgba(0,0,0,.4);pointer-events:auto;cursor:pointer}
.pbp-rip{position:absolute;top:50%;transform:translateY(-50%);z-index:4;color:#fff;font-weight:700;font-size:15px;background:rgba(15,15,20,.55);padding:16px 20px;border-radius:50%;opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;min-width:64px;text-align:center}
.pbp-rip-l{left:8%}.pbp-rip-r{right:8%}
.pbp-rip.on{animation:pbpRip .5s ease}
@keyframes pbpRip{0%{opacity:0;transform:translateY(-50%) scale(.7)}30%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(1.1)}}
.pbp-toast{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(15,15,20,.72);color:#fff;font-weight:600;font-size:13px;padding:7px 14px;border-radius:8px;opacity:0;transition:opacity .15s;pointer-events:none;backdrop-filter:blur(4px)}
.pbp-toast.on{opacity:1}
/* controls */
.pbp-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:1;transition:opacity .2s ease;transform:translateZ(0)}
.pbp.pbp-hide .pbp-ctrl,.pbp.pbp-hide .pbp-gest~.pbp-center{opacity:0;pointer-events:none}
.pbp.pbp-hide{cursor:none}
.pbp-seek{position:relative;height:16px;margin:0 4px;cursor:pointer;display:flex;align-items:center}
.pbp-seek::before{content:'';position:absolute;left:0;right:0;height:4px;background:rgba(255,255,255,.28);border-radius:3px}
.pbp-buf{position:absolute;left:0;height:4px;width:0;background:rgba(255,255,255,.45);border-radius:3px}
.pbp-hover{position:absolute;left:0;height:4px;width:0;background:rgba(255,255,255,.35);border-radius:3px}
.pbp-play-bar{position:absolute;left:0;height:4px;width:0;background:var(--accent,#e8174c);border-radius:3px;z-index:1}
.pbp-knob{position:absolute;left:0;top:50%;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--accent,#e8174c);transform:translateY(-50%) scale(0);transition:transform .12s;z-index:2}
.pbp-seek:hover .pbp-knob{transform:translateY(-50%) scale(1)}
.pbp-tip{position:absolute;bottom:16px;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;pointer-events:none;opacity:0}
.pbp-seek:hover .pbp-tip{opacity:1}
.pbp-row{display:flex;align-items:center;gap:2px;padding-top:3px;color:#fff}
.pbp-b{background:none;border:none;color:#fff;font-size:16px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;padding:0;transition:background .12s,transform .12s}
.pbp-b:hover{background:rgba(255,255,255,.16)}
.pbp-b:active{transform:scale(.9)}
.pbp-cc.on{background:var(--accent,#e8174c)}
.pbp-vol{display:flex;align-items:center}
.pbp-volr{width:0;opacity:0;transition:width .18s,opacity .18s;height:4px;accent-color:#fff;cursor:pointer;margin:0}
.pbp-vol:hover .pbp-volr{width:70px;opacity:1;margin:0 4px}
.pbp-time{font-size:12.5px;font-variant-numeric:tabular-nums;padding:0 8px;white-space:nowrap}
.pbp-sp{flex:1}
@media(max-width:600px){.pbp-b{width:34px;height:34px;font-size:15px}.pbp-theater{display:none}.pbp-vol:hover .pbp-volr{width:0;opacity:0;margin:0}.pbp-time{padding:0 4px;font-size:11.5px}}
/* settings menu */
.pbp-menu{position:absolute;right:10px;bottom:52px;z-index:7;background:rgba(20,20,26,.96);color:#fff;border-radius:12px;padding:10px;min-width:190px;max-height:70%;overflow:auto;box-shadow:0 8px 30px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
.pbp-mgrp{margin-bottom:8px}
.pbp-mh{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin:4px 4px 6px}
.pbp-mopts{display:flex;flex-wrap:wrap;gap:6px}
.pbp-mopts button{background:rgba(255,255,255,.12);border:none;color:#fff;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer}
.pbp-mopts button.on{background:var(--accent,#e8174c)}
/* preroll ad */
.pbp-ad{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:8}
.pbp-ad[hidden]{display:none!important}
.pbp-adv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.pbp-adimg-l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pbp-adimg-l[hidden]{display:none!important}
.pbp-adimg{max-width:100%;max-height:100%}
.pbp-adlabel{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.72);color:#fff;font-weight:600;font-size:11px;padding:4px 9px;border-radius:4px;z-index:2;display:flex;align-items:center;gap:5px}
.pbp-adlabel::before{content:'';width:5px;height:5px;border-radius:50%;background:#f5c518}
.pbp-adskip{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.68);color:#fff;font-size:13px;padding:9px 15px;border-radius:6px;z-index:2;border:1px solid rgba(255,255,255,.15)}
.pbp-skipb{background:rgba(255,255,255,.95);border:none;color:#0f0f0f;font-weight:600;font-size:13px;cursor:pointer;padding:9px 16px;border-radius:6px}
.pbp-adbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:2}
.pbp-adbar i{display:block;height:100%;width:0;background:#f5c518;transition:width .25s linear}
/* mini bar hidden until mini mode */
.pbp-minibar{display:none}

/* ---------- MINI PLAYER ---------- */
#pbMiniHost{position:fixed;inset:0;pointer-events:none;z-index:1200}
.pbp.pbp-mini{position:fixed;right:14px;bottom:14px;width:340px;max-width:74vw;border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5);pointer-events:auto;background:#000;animation:pbpMiniIn .22s ease}
@keyframes pbpMiniIn{from{transform:translateY(30px) scale(.9);opacity:.4}to{transform:none;opacity:1}}
.pbp.pbp-mini .pbp-ctrl,.pbp.pbp-mini .pbp-center,.pbp.pbp-mini .pbp-toast,.pbp.pbp-mini .pbp-rip{display:none!important}
.pbp.pbp-mini .pbp-screen{cursor:pointer}
.pbp.pbp-mini .pbp-minibar{display:flex;align-items:center;gap:4px;background:var(--card,#181818);padding:4px 6px}
.pbp.pbp-mini .pbp-mtitle{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--text,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbp.pbp-mini .pbp-minibar .pbp-b{color:var(--text,#fff);width:32px;height:32px;font-size:14px}
.pbp.pbp-mini .pbp-minibar .pbp-b:hover{background:var(--hover2,rgba(255,255,255,.12))}
.pbp.pbp-mini.pbp-dragging{transition:none;cursor:grabbing}
.pbp.pbp-mini .pbp-minibar{cursor:grab}
@media(max-width:600px){.pbp.pbp-mini{width:230px;right:8px;bottom:60px}}

/* 🎬 Pre-roll ad: jab "Skip Ad ▶" button aa jaata hai to bahar wala kaala
   dabba hata do — warna dabbe ke andar dabba dikhta hai. YouTube par ek hi
   saaf button hota hai, ab yahan bhi waisa hi. */
.mvp-adskip.skip-ready,.pbp-adskip.skip-ready{padding:0;background:transparent;border:0;backdrop-filter:none}

/* ═══════════════ OWNER / ADMIN PEHCHAAN (v9) ═══════════════
   Owner ka tick SONE ka hai — ek nazar me alag dikhta hai. Admin ka neela
   rehta hai (jaise pehle), aur normal premium ka bhi neela. Ye rules file ke
   sabse neeche hain isliye upar wali purani .vbadge line ko apne aap jeet
   lete hain (CSS me baad wala jeet-ta hai) — kisi purani line ko chhedna
   nahi pada. */
.vbadge.vb-admin{ background:#1877f2;color:#fff; }

/* 👑 OWNER ka SONE ka TAAJ — tick ki jagah. Naam jitna bada, taaj utna bada
   (em par chalta hai), isliye feed me sundar aur profile par shandar. */
.pbcrown{
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:-0.14em;margin-left:5px;line-height:0;
}
.pbcrown svg{
  width:1.42em;height:1.42em;min-width:22px;min-height:22px;
  display:block;
  filter:drop-shadow(0 1px 2px rgba(110,72,0,.5));
  animation:pbCrownGlow 3.4s ease-in-out infinite;
}
/* sone par halki chamak — dhyan khiche par aankh na chubhe */
@keyframes pbCrownGlow{
  0%,100%{filter:drop-shadow(0 1px 2px rgba(110,72,0,.5))}
  50%    {filter:drop-shadow(0 1px 2px rgba(110,72,0,.5)) drop-shadow(0 0 8px rgba(247,195,58,.85))}
}
/* nagino ke taare — teeno alag-alag samay par jhilmilate hain, isliye
   asli heere jaisa lagta hai, machine jaisa nahi */
@keyframes pbSparkTw{
  0%,100%{opacity:.15;transform:scale(.55) rotate(0deg)}
  45%    {opacity:1;  transform:scale(1.15) rotate(22deg)}
  70%    {opacity:.35;transform:scale(.8)  rotate(8deg)}
}
.pbcrown .pbspark{transform-box:fill-box;transform-origin:center;
  animation:pbSparkTw 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .pbcrown svg,.pbcrown .pbspark{animation:none}
  .pbcrown .pbspark{opacity:.9}
}

/* 🎯 BEECH KA PLAY/PAUSE BUTTON (YouTube jaisa) — controls ke saath
   dikhta hai, unke saath hi chhupta hai. Mini-player me nahi (wahan
   apna chhota button hai). */
.pbp-hide .pbp-center{opacity:0;pointer-events:none}
.pbp-center{transition:opacity .2s}
.pbp.pbp-mini .pbp-center{display:none!important}

/* 🐞 YOUTUBE-PIN FIX (Watch section, mobile) — Raj ne pakda, 02-08-2026.
   Player pin (sticky) to tha, par sticky sirf apne DABBE (.pbw-main) ke
   andar tak chipakta hai — aur "Up next" wali video-list us dabbe ke
   BAHAR (.pbw-side me) thi. Isliye list scroll karte hi dabba khatam,
   aur player upar khisak jaata tha. display:contents se .pbw-main ki
   deewar hat jaati hai (saaman wahi rehta hai), ab player ka sticky
   POORE page par chalta hai — list uske NEECHE se scroll hoti hai,
   bilkul YouTube jaisa. Desktop (1000px+) par layout grid wala hi hai,
   wahan ye rule lagta hi nahi. */
@media (max-width:999.98px){
  .pbw-main{display:contents}
}

/* 📢 PHOTO-VIEWER AD BAR — lightbox me neeche chhota Sponsored bar.
   Photo ke upar nahi chadhta (fixed neeche), aur #lightbox img wale
   zoom-rules is ad ki chhoti photo par na lagen isliye yahan override. */
#lightbox .lb-ad{
  position:fixed;left:50%;bottom:40px;transform:translateX(-50%);
  z-index:3;max-width:92vw;
}
#lightbox .lb-ad a{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  background:rgba(22,22,29,.92);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:8px 12px;box-shadow:0 6px 24px rgba(0,0,0,.5);
}
#lightbox .lb-ad img.lb-ad-img{
  width:52px;height:52px;max-width:52px;max-height:52px;
  object-fit:cover;border-radius:10px;cursor:pointer;transition:none;
}
#lightbox .lb-ad img.lb-ad-img.zoomed{transform:none}
#lightbox .lb-ad .lb-ad-t{
  display:flex;flex-direction:column;gap:2px;font-size:13.5px;font-weight:700;
  max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#lightbox .lb-ad .lb-ad-s{
  font-size:10.5px;font-weight:600;color:rgba(255,255,255,.6);
  text-transform:uppercase;letter-spacing:.4px;
}
#lightbox .lb-ad .lb-ad-b{
  background:#1877f2;color:#fff;font-size:13px;font-weight:800;
  padding:7px 14px;border-radius:9px;white-space:nowrap;
}

/* Profile par NAAM + TAAJ ek saath, saaf-saaf.
   Pehle taaj naam se toot kar agli line me chala jata tha aur neeche wali
   patti par chadh jata tha. Ab naam aur taaj ek hi kataar (flex row) me hain,
   beech me theek jagah, aur taaj profile par thoda naapa hua rakha hai taaki
   naam ke saath sundar lage — chhota nahi, bas santulit. */
.profile-name{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:2px 7px;line-height:1.2;
}
.profile-name .pbcrown{ margin-left:0; }
.profile-name .pbcrown svg{
  width:1.15em;height:1.15em;min-width:28px;min-height:28px;
}

/* Profile par naam ke neeche wali patti */
.staffchip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 11px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.2px;
  vertical-align:middle;margin:6px 6px 0 0;white-space:nowrap;
}
.staffchip.sc-owner{
  background:linear-gradient(135deg,#fff5da 0%,#ffe6a3 100%);
  color:#7a5200;border:1px solid #f0cf8a;
}
.staffchip.sc-admin{ background:rgba(24,119,242,.12);color:#1877f2;border:1px solid rgba(24,119,242,.35); }

/* 🎛️ WATCH: filter chips (YouTube jaisa — chuna hua kaala) */
#pbwChips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
#pbwChips .ff-chip.on{background:var(--text);color:var(--card);border-color:var(--text)}

/* 📢 WATCH: Up-next list ka Sponsored card */
.ytw-side-card.ytw-ad{cursor:pointer;border:1px solid var(--line2,#e5e7eb);border-radius:12px;padding:8px;background:var(--card)}
.ytw-ad .ytw-ad-tag{color:#b98c00;font-weight:700}
.ytw-ad .ytw-ad-cta{display:inline-block;width:auto;padding:4px 14px;margin-top:4px;font-size:13px;border-radius:8px}

/* 🛡️ PIN WATCHDOG ka fixed-mode (JS isse tabhi lagata hai jab sticky toote) */
.pbw-stage.pbw-fixed{position:fixed!important;left:0;right:0;width:100%;z-index:60}

/* 🛡️ NAV CHOWKIDAR ka fixed-mode (JS tabhi lagata hai jab sticky toote) */
.nav.nav-fixed{position:fixed!important;top:0;left:0;right:0;z-index:100}

/* 🔊 "Awaaz chalu karo" — browser ne bina-awaaz chalaya ho tab dikhta hai */
.pbp-unmute{
  position:absolute;left:12px;bottom:64px;z-index:6;
  background:rgba(15,15,20,.78);color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:9px 16px;font-size:14px;font-weight:800;cursor:pointer;
  backdrop-filter:blur(3px);
}

/* ▶ CONTINUE WATCHING (Watch tab ki "Aage dekho" patti) */
.cw-row{margin:4px 0 14px}
.cw-h{font-weight:800;font-size:15px;margin:2px 0 8px;display:flex;align-items:center;gap:8px}
.cw-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cw-card{flex:0 0 172px;cursor:pointer}
.cw-thumb{position:relative;width:172px;height:97px;background:#000;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cw-thumb img{width:100%;height:100%;object-fit:cover}
.cw-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35)}
.cw-bar i{display:block;height:100%;background:#f00}
.cw-t{font-size:12.5px;font-weight:600;margin-top:5px;line-height:1.3;max-height:33px;overflow:hidden}

/* 📱 MOBILE KA BADA FIX (02-08, Raj ki shikayat par):
   Koi bhi LAMBI bina-space wali cheez — jaise post/description me chipkaya
   hua lamba link, ya judas hashtag — poore page ko apni chaudai jitna
   KHEENCH deti thi. Page 360px ke phone par 490px ka ho jaata tha, aur
   overflow-x chhupa hone se dikhta ye tha ki "sab kuch kata hua hai":
   title kata, ad card kata, coin pack aadha, buttons bahar.
   Ye teen line har text ko bata deti hai: jagah khatam ho to TOOT kar
   agli line me aa jao. Page ab kabhi phone se bahar nahi jayega.
   (white-space:nowrap wale chips/buttons par iska koi asar nahi hota.) */
#views,#modalRoot,.modal,.pbg-sheet,.menu{overflow-wrap:anywhere}
#views img,#views video{max-width:100%}

/* 📱 chhote phone par Up-next ad/video thumb thoda chhota — text ko saans mile */
@media(max-width:400px){
  .ytw-side-thumb{width:128px;height:72px}
}

/* ===== v44: apna-apna video ratio ===== */
.pb-portrait{max-height:78vh;margin-left:auto;margin-right:auto;background:#000}
.pb-portrait video{max-height:78vh}
.pbp-slot.pbp-portrait .pbp-slot-thumb{object-fit:contain;background:#000}
.vid-embed video{background:#000}