/* =====================================================================
PiyariBook — TIRANGA UI (C2 · madhyam) 15 Aug 2026
---------------------------------------------------------------------
NIYAM: TIRANGA = KAGAZ (background, surface, kinare, patti)
BRAND = SYAHI (logo, button, active tab, link)
Yaani kesari/hara PEECHE rehte hain, PiyariBook ka laal-neela UNKE
UPAR chamakta hai. Isi liye button aur logo ke rang NAHI badle.
Ye file style.css ke BAAD load hoti hai aur sirf upar se rang
badalti hai. Kuch bhi todti nahi — hatana ho to bas nikaal do.
Rang andaze se nahi chune — WCAG contrast naap kar chune gaye:
kaala text on #FFE8CC ....... 14.05:1 ✅
neela logo/button on #FFE8CC .. 8.28:1 ✅
laal logo (bada bold) ......... 3.79:1 ✅ (bade text ki hadd 3:1)
laal chhota text #d3123f ...... 4.50:1 ✅
[purana plan: safed text on #FF9933 = 2.13:1 ❌ — isi liye tint]
⛔ Asli jhanda, Ashok Chakra, "Make in India" sher — kahin nahi.
Sirf RANG use hue hain, jo poori tarah kanooni hai.
===================================================================== */
:root{
--pb-tri-nav: #FFE8CC; /* top nav / toolbar */
--pb-tri-bar: #FFF3E3; /* tab bar, doosri pattiyan */
--pb-tri-page: #FFFBF5; /* poore page ka background */
--pb-tri-green: #E1F1E1; /* footer / neeche ki patti */
--pb-edge-sa: #FF9933;
--pb-edge-gr: #138808;
--pb-red-sm: #d3123f; /* CHHOTE laal text ke liye */
/* page background warm ho jata hai. dark/midnight theme apna
--bg khud set karte hain aur unki specificity zyada hai,
isliye unpar iska asar nahi padta. */
--bg: var(--pb-tri-page);
}
/* ---------- 1. sabse upar 4px ki tirangi patti ---------- */
body::before{
content:'';
position:fixed; top:0; left:0; right:0; height:4px; z-index:9999;
pointer-events:none;
background:linear-gradient(to right,
#FF9933 0 33.333%, #FFFFFF 33.333% 66.666%, #138808 66.666% 100%);
}
/* ---------- 2. nav / toolbar ---------- */
.nav{ background: var(--pb-tri-nav) !important; }
/* ---------- 3. card ka POORA kinara — kesari se hara ----------
18 Aug 2026 · Raj: "post ke poori border ko hi tiranga colour mein
samet do, achha lagta hai dekhne mein. One side mein hoga tu feeka
feeka lagega."
🔴 `border-image` se ye NAHI ho sakta — wo gol kone (border-radius)
ke saath kaam hi nahi karta, kone kat kar chaukor ho jate hain.
Isliye do-background wala tarika:
• pehla background = card ka apna rang, PADDING-BOX tak
• doosra background = tiranga gradient, BORDER-BOX tak
Border ko transparent rakhte hain, to neeche wala gradient sirf
border ki patti me jhaankta hai. Gol kone bilkul saaf rehte hain.
Gradient 135deg par hai (upar-baayein se neeche-daayein) taaki
chaaron taraf rang badalta dikhe — seedha upar-neeche karne par
daayein-baayein ek jaisa rang aata hai aur wo phika lagta hai. */
.card{
border: 2px solid transparent;
/* border-radius yahan JAAN-BOOJH KAR nahi diya — style.css me kai jagah
12/14/16px !important se laga hai. Zabardasti 8px karta to card ka
roop badal jata. Do-background wala tarika har radius ke saath
apne aap sahi kaam karta hai. */
background:
linear-gradient(var(--card), var(--card)) padding-box,
linear-gradient(135deg,
var(--pb-edge-sa) 0%,
#FFF3E3 42%,
var(--pb-edge-gr) 100%) border-box;
}
/* ---------- 4. footer patti (sidebar ke neeche wale link) ---------- */
.side-foot{
background: var(--pb-tri-green);
border-radius: 10px;
padding: 12px 10px;
}
/* ---------- 5. login se pehle wala public footer ---------- */
.pb-pubfoot{
background: var(--pb-tri-green);
border-radius: 12px;
padding-bottom: 14px;
}
/* ---------- 6. chhota laal text saaf padhne ke liye ---------- */
/* logo ka #e8174c bilkul waisa hi rehta hai — wo bada aur bold hai */
a.pb-red, .pb-red{ color: var(--pb-red-sm); }
/* =====================================================================
🌙 DARK — wahi tiranga, andhere me.
Halka kesari raat me aankh chubhta hai, isliye gehra warm tint.
===================================================================== */
html[data-theme="dark"]{
--pb-tri-nav: #241C12;
--pb-tri-bar: #1D1A16;
--pb-tri-page: #171512;
--pb-tri-green: #16211A;
--pb-red-sm: #ff5c7f;
--bg: var(--pb-tri-page);
}
html[data-theme="dark"] .nav{ background: var(--pb-tri-nav) !important; }
html[data-theme="dark"] .side-foot,
html[data-theme="dark"] .pb-pubfoot{ background: var(--pb-tri-green); }
/* midnight theme — uska apna neela tone hai, use warm nahi karna.
Wahan sirf patti aur kinare rehte hain. */
html[data-theme="midnight"] .nav{ background: var(--card) !important; }
html[data-theme="midnight"] .side-foot,
html[data-theme="midnight"] .pb-pubfoot{ background: transparent; }
/* =====================================================================
⚠️ FESTIVAL ENGINE (app-183-festival.js) ke saath takrao nahi.
Tyohaar ke dinon me wo apni gehri patti aur banner UPAR se lagata
hai. Ye file uske NEECHE ki parat hai — dono saath chalte hain.
===================================================================== */
/* =====================================================================
NAV LOGO — "Piyari" laal + "Book" neela (15 Aug 2026)
Pehle poora "PiyariBook" ek hi rang me tha aur peeche ".com" laga tha.
".com" hata diya (99-boot.js). Ab "Book" ke liye ye rang chahiye.
Splash aur login screen ke logo pehle se aise hi the — ab teeno match.
===================================================================== */
.pbb{ color: var(--brand-blue); }
html[data-theme="dark"] .pbr{ color:#ff5c7f; }
html[data-theme="dark"] .pbb{ color:#7aa2ff; }
/* =====================================================================
🎨 WATERCOLOR TIRANGA — 15 Aug 2026
Raj ne paint-splash wala tiranga background maanga.
🔴 KOI TASVEER NAHI. Sab CSS se bana hai:
• koi doosre ka copyright nahi (jo tasveer net par milti hain,
unka maalik koi aur hota hai)
• file ka size 0 KB — app/website bhaari nahi hoti
• har screen size par saaf, kabhi dhundhla nahi
• dark mode alag bana sakte hain
DO PARAT:
splash (#boot) -> rang khul kar (1.5 sec ka screen, padhna nahi)
poora UI -> wahi rang 30% (yahan log PADHTE hain)
⚠️ Jaan-boojh kar SVG filter (feTurbulence) use NAHI kiya poore UI par —
wo purane Android phone par app ko atka deta hai. Sirf radial
gradient se bhi wahi bahaav aa jaata hai, aur wo bilkul muft hai.
===================================================================== */
.pb-wc{
position:fixed; inset:0; z-index:0; pointer-events:none;
overflow:hidden; opacity:.30; /* UI par halka */
}
.pb-wc i{ position:absolute; display:block; border-radius:50%; }
/* kesari — upar baayen se behta hua */
.pb-wc .o1{ width:150%; height:110%; top:-58%; left:-62%; filter:blur(26px);
background:radial-gradient(circle at 62% 62%,
rgba(255,106,0,.95) 0%, rgba(255,140,26,.80) 26%,
rgba(255,169,77,.48) 46%, rgba(255,196,133,.20) 62%, rgba(255,255,255,0) 76%); }
.pb-wc .o2{ width:78%; height:62%; top:-24%; left:-20%; filter:blur(18px);
background:radial-gradient(circle at 60% 60%,
rgba(255,88,0,.55) 0%, rgba(255,140,26,.28) 44%, rgba(255,255,255,0) 70%); }
/* hara — neeche daayen se behta hua */
.pb-wc .g1{ width:150%; height:112%; bottom:-60%; right:-62%; filter:blur(26px);
background:radial-gradient(circle at 38% 38%,
rgba(11,132,0,.92) 0%, rgba(35,152,24,.76) 26%,
rgba(96,183,84,.44) 47%, rgba(160,210,153,.18) 63%, rgba(255,255,255,0) 77%); }
.pb-wc .g2{ width:76%; height:60%; bottom:-22%; right:-18%; filter:blur(18px);
background:radial-gradient(circle at 40% 40%,
rgba(8,110,0,.50) 0%, rgba(35,152,24,.26) 44%, rgba(255,255,255,0) 70%); }
/* beech ki safed roshni — isi se logo aur text khul kar dikhta hai */
.pb-wc .w1{ width:86%; height:70%; top:14%; left:7%; filter:blur(30px); opacity:.55;
background:radial-gradient(ellipse at center,
rgba(255,255,255,.96) 0%, rgba(255,255,255,.80) 34%,
rgba(255,255,255,.34) 60%, rgba(255,255,255,0) 78%); }
/* saara content rang ke UPAR rahe */
/* 🔴 16 Aug 2026 (v98) — BUG FIX
Pehle yahan ".nav" bhi likha tha: position:relative.
style.css me .nav ka asli niyam "position:sticky;top:0" hai, aur
ye line uske BAAD aati hai — isliye ye jeet jaati thi aur upar wali
nav bar scroll par chipakna BAND kar deti thi. Poori site me top bar
scroll hote hi gayab ho jata tha.
.bottom-nav ka bhi koi apna position tha hi nahi, isliye use bhi
chhod diya. Rang ke UPAR rehne ke liye sirf #app / #auth ka
z-index kaafi hai — nav unke andar hi hai. */
#app, #auth{ position:relative; z-index:1; }
/* ---------- SPLASH par rang khul kar ----------
🔴 15 Aug — pehli koshish me ye kaam nahi kiya tha. Wajah:
#boot position:fixed; inset:0; z-index:5000; background:var(--bg)
yaani ek POORI SCREEN ka opaque parda hai, jo bahar wali
.pb-wc parat (z-index 0) ko poori tarah dhak deta hai.
Aur `#boot .pb-wc` selector bhi kabhi match nahi hota tha,
kyunki .pb-wc #boot ke ANDAR nahi, uske BAHAR thi.
✅ Ilaaj: #boot ke ANDAR apni alag parat (.pb-wc.pb-full),
poore rang me. index.html me daal di gayi hai.
-------------------------------------------------------------- */
#boot{ background:#fff; }
.pb-wc.pb-full{ position:absolute; inset:0; opacity:1; z-index:0; }
.pb-wc.pb-full .w1{ opacity:1; }
#boot .boot-center{ position:relative; z-index:5; }
html[data-theme="dark"] .pb-wc.pb-full{ opacity:.48; }
/* ---------- 🌙 DARK ----------
🔴 Raj ka niyam (15 Aug): "itna bhi black mat kar dena ki logo aur
icon pehchan me na aayein."
Contrast maapa gaya — sab pass hai, kesari/hare glow ke andar bhi:
Piyari #ff5c7f on #1A1715 ....... 6.02:1 ✅
Book #7aa2ff on #1A1715 ....... 7.17:1 ✅
Icon #e8e9ea on #1A1715 ...... 14.67:1 ✅
kesari kone ke andar (#3A2A18) ... 4.65:1 ✅
hare kone ke andar (#1B2A1E) .... 5.08:1 ✅
Phir bhi teen suraksha lagayi hain:
1. background #141210 -> #1A1715 (kam kaala, garam sa)
2. beech me ek shaant "clear zone" — logo ke peeche rang halka
3. logo par halka halo — chahe peeche kuch bhi ho, alag dikhega
---------------------------------------------------------------- */
html[data-theme="dark"] .pb-wc{ opacity:.30; mix-blend-mode:screen; }
/* safed roshni raat me nahi — uski jagah shaant gehra clear zone,
taaki logo/icon ke peeche rang shaant rahe */
html[data-theme="dark"] .pb-wc .w1{
mix-blend-mode:normal; opacity:.72; filter:blur(34px);
background:radial-gradient(ellipse at center,
rgba(26,23,21,.92) 0%, rgba(26,23,21,.70) 36%,
rgba(26,23,21,.30) 62%, rgba(26,23,21,0) 80%);
}
html[data-theme="dark"] #boot{ background:#1A1715; }
html[data-theme="dark"] #boot .pb-wc{ opacity:.48; }
/* logo par halka halo — ye pakki guarantee hai ki logo kabhi na khoye */
html[data-theme="dark"] #boot .boot-name,
html[data-theme="dark"] .nav .pbr,
html[data-theme="dark"] .nav .pbb{
text-shadow:0 1px 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.40);
}
html[data-theme="dark"] #boot .boot-heart svg{
filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
/* light mode me bhi wahi suraksha — kesari kone me logo par */
.nav .pbr, .nav .pbb{ text-shadow:0 1px 6px rgba(255,255,255,.55); }
/* midnight theme apna neela tone rakhta hai — wahan watercolor nahi */
html[data-theme="midnight"] .pb-wc{ display:none; }
/* bahut chhote/purane phone: blur mehnga padta hai to kam kar do */
@media (max-width:360px){
.pb-wc i{ filter:blur(16px) !important; }
}
/* =====================================================================
🔴 16 Aug 2026 (v98) — WEBSITE ↔ APP PARITY KE 5 FIX
ChatGPT ki Code-84 report (section 11) me bataye gaye website defects.
Sab yahan theek kiye gaye hain — style.css ko chheda nahi gaya.
===================================================================== */
/* ---- 1. Page ka background cream hona chahiye, neela nahi ----
style.css ki line 1342 par "body{background:#f0f2fa}" likha hai —
ek pakka (hard-coded) neela-safed rang. Wo line var(--bg) wale
asli niyam ke BAAD aati hai, isliye tiranga ka cream #FFFBF5 kabhi
pahunchta hi nahi tha. Har theme ka apna --bg wapas laga do. */
body{ background: var(--bg) !important; }
/* ---- 2. Card ka kesari→hara baayan kinara ----
style.css line 1183 me ".card{ ... border:none !important }" hai.
!important hone se tiranga ka 3px wala kinara kabhi dikha hi nahi.
Isliye ab yahan bhi !important lagana pada. */
.card{
border: 2px solid transparent !important;
background:
linear-gradient(var(--card), var(--card)) padding-box,
linear-gradient(135deg,
var(--pb-edge-sa) 0%,
#FFF3E3 42%,
var(--pb-edge-gr) 100%) border-box !important;
}
/* ---- 3. Login screen par bhi watercolor dikhe ----
#auth ka background var(--bg) hai — ek poora opaque parda. Uske
peeche body wali .pb-wc parat chhup jaati thi, isliye login screen
sapaat dikhti thi jabki feed rangeen. Ab paardarshi. */
#auth{ background: transparent !important; }
/* ---- 4. Splash ka naam dark mode me padhna chahiye ----
index.html me pehle inline style laga tha (style="color:var(--brand-red)").
Inline style ko koi bhi stylesheet haraa nahi sakti — isliye dark mode
me "Piyari" #e8174c hi rehta tha, jo #1A1715 kaali splash par doob
jaata tha. Ab index.html me class hai, aur rang yahan se aata hai. */
#boot .boot-name .pbr{ color: var(--brand-red); }
#boot .boot-name .pbb{ color: var(--brand-blue); }
html[data-theme="dark"] #boot .boot-name .pbr{ color:#ff5c7f; }
html[data-theme="dark"] #boot .boot-name .pbb{ color:#7aa2ff; }
/* ---- 5. Splash ke chhote akshar — app ke doc 51 wale exact rang ---- */
html[data-theme="dark"] #boot .boot-t1{ color:#e8e9ea; }
html[data-theme="dark"] #boot .boot-t2{ color:#9aa0a6; }
/* ---- 6. Splash ki timing app jaisi (1.3s) ----
App: taiyar hote hi 1.3s, hard max 1.5s.
Website pehle 1.8s rokti thi — 0.5s zyada, aur app se alag.
Animation ki dooriyan bhi utni hi kam kar di hain taaki
"Dil se Indian" 1.3s se pehle poora dikh jaye. */
#boot .boot-name{ animation: bootUp .45s .18s both; }
#boot .boot-tri{ animation: bootGrow .58s .40s cubic-bezier(.3,1,.3,1) forwards; }
#boot .boot-t1{ animation: bootUp .42s .66s both; }
#boot .boot-t2{ animation: bootUp .42s .82s both; }
#boot .boot-t2 .bh{ animation: bootBeat .40s .95s ease-in-out 2; }
#boot .spinner{ animation: bootSpin 0s 1.6s forwards; }
/* ---- 7. 🔴 v98 me NAYA MILA BUG — Midnight theme ka splash
Midnight (neela) theme me #boot ka background SAFED reh jaata tha,
jabki uske akshar halke neele-safed the. Naapa to:
"Made in India" #e6eefc on #ffffff = 1.17 : 1 (गायब)
"Dil se Indian" #9fb3cc on #ffffff = 2.14 : 1
"Book" #4d9fff on #ffffff = 2.72 : 1
Yani Midnight wale user ko splash par sirf khaali safed screen aur
dhundhla sa "Piyari" dikhta tha. Ab splash Midnight ke apne neele
rang par hai:
14.91 : 1 · 8.11 : 1 · 5.87 : 1 · 6.99 : 1 — sab साफ़. */
html[data-theme="midnight"] #boot{ background:#0d1b2a; }
html[data-theme="midnight"] #boot .boot-name .pbr{ color:#ff5c7f; }
html[data-theme="midnight"] #boot .boot-name .pbb{ color:#7aa2ff; }
html[data-theme="midnight"] #boot .boot-heart svg{
filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
/* =====================================================================
🔴 16 Aug 2026 — LIVE KA INTEZAAR WALA PARDA (kaala NAHI)
Raj: "live click karne par black aata hai ... yeh black screen
dikhna nahi chahiye."
Isliye background hamesha page ka apna rang (--bg) hai — light me
cream, dark me warm kaala, midnight me neela — kabhi #000 nahi.
Upar tiranga watercolor, beech me dil wala logo aur saaf likhawat.
===================================================================== */
#pbLiveWait{
position:fixed; inset:0; z-index:6000;
display:flex; align-items:center; justify-content:center;
background:var(--bg);
animation:plwIn .18s ease both;
}
@keyframes plwIn{ from{opacity:0} to{opacity:1} }
#pbLiveWait .plw-center{
position:relative; z-index:5;
display:flex; flex-direction:column; align-items:center; gap:12px;
text-align:center; padding:20px;
}
#pbLiveWait .plw-heart{
line-height:0;
animation:plwBeat 1.25s ease-in-out infinite;
filter:drop-shadow(0 8px 22px rgba(232,23,76,.40));
}
@keyframes plwBeat{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
#pbLiveWait .plw-tri{
width:120px; height:4px; border-radius:4px; display:flex; overflow:hidden;
box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
#pbLiveWait .plw-tri i:nth-child(1){ flex:1; background:#FF9933 }
#pbLiveWait .plw-tri i:nth-child(2){ flex:1; background:#F2F2F2 }
#pbLiveWait .plw-tri i:nth-child(3){ flex:1; background:#138808 }
#pbLiveWait .plw-msg{ font-size:16.5px; font-weight:700; color:var(--text) }
#pbLiveWait .plw-sub{ font-size:13px; color:var(--text2) }
/* midnight me watercolor nahi chalta — wahan sirf saada background */
html[data-theme="midnight"] #pbLiveWait .pb-wc{ display:none }
@media (prefers-reduced-motion:reduce){
#pbLiveWait{animation:none}
#pbLiveWait .plw-heart{animation:none}
}
/* ---- 🔍 Zoom ka chhota pill (1.0x / 2.4x) ---- */
#pbZoomPill{
position:fixed; left:50%; top:16%; transform:translateX(-50%) scale(.92);
z-index:6100; pointer-events:none;
background:rgba(0,0,0,.62); color:#fff;
font-size:15px; font-weight:800; letter-spacing:.3px;
padding:7px 15px; border-radius:999px;
box-shadow:0 4px 14px rgba(0,0,0,.35);
opacity:0; transition:opacity .18s ease, transform .18s ease;
}
#pbZoomPill.on{ opacity:1; transform:translateX(-50%) scale(1); }
/* pinch ke waqt browser khud page zoom na kare */
#liveSetupPrev, #liveVid{ touch-action:none; }
/* ═══════════════════════════════════════════════════════════════
18 Aug 2026 — TICK KE TEEN ALAG NISHAAN
Pehle sab kuch ek hi `.vbadge` (neela) tha, isliye Premium
khareedne wale ko bhi neela tick lag jaata tha. Ab teen alag:
.vbadge → neela (blue tick — sirf invite, bikta nahi)
.vbadge.vb-kyc → grey (KYC — muft, kamai ka gate)
.vb-prem → 💎 (Premium — paid, verified NAHI)
.vb-kyc ko `.vbadge` ke BAAD likha hai taaki rang jeet jaye.
💎 ke liye gol background nahi chahiye — emoji khud hi nishaan hai.
═══════════════════════════════════════════════════════════════ */
/* 🔴 18 Aug — Raj: "Neela ✓ tick hona chahiye, na ki round".
Sahi baat. Purana `.vbadge` ek BHARA HUA neela gola tha jiske andar
safed ✓ tha. App aur app-177-badges.js dono me tick aisa nahi hai —
wahan sirf RANGEEN NISHAAN hai, koi gola nahi (`.pb-tick`).
Ab website bhi wahi karti hai, aur rang bhi bilkul wahi:
blue #1d9bf0 (app-177 ka TICKS.blue)
grey #8899a6 (app-177 ka TICKS.kyc)
Gola hatane ke liye style.css ki purani `.vbadge` line ko poora
ulatna padta hai — width/height/background/border-radius, chaaron. */
.vbadge, .vbadge.vb-kyc{
width:auto !important; height:auto !important;
background:none !important; box-shadow:none !important;
border-radius:0 !important;
display:inline-block !important; vertical-align:middle;
margin-left:3px; font-weight:900; line-height:1;
/* 🔴 18 Aug — pehle yahan `15px` tha, aur wahi galti thi.
Profile ka naam 32px ka hota hai, feed ka 14px ka. Fix 15px lagane
se profile par nishaan naam ke saamne bauna dikhta tha — Raj ne
kaha "diamond profile pe show nahi ho raha", jabki tha wahin,
bas itna chhota ki nazar hi nahi aata tha.
Ab `em` hai, yaani naam ke saath khud hi bada-chhota ho jayega:
32px naam par ~26px, 14px naam par ~11px. Ek hi line, har jagah. */
font-size:0.82em !important;
}
.vbadge{ color:#1d9bf0 !important; } /* 🔵 blue tick */
.vbadge.vb-kyc{ color:#8899a6 !important; } /* ⚪ KYC */
/* 🛡️ Admin ka nishaan gol hi rahega — wo "verified" nahi, staff ka
nishaan hai. Alag dikhna hi chahiye, warna log use blue tick samajh
lenge. Isliye use yahan se wapas gol kar rahe hain. */
.vbadge.vb-admin{
width:17px !important; height:17px !important;
background:#0435af !important; color:#fff !important;
border-radius:50% !important; font-size:11px !important;
display:inline-flex !important; align-items:center; justify-content:center;
}
.vb-prem{
display:inline-block; vertical-align:middle;
margin-left:4px; line-height:1;
font-size:0.78em; /* heera bhi naam ke saath bada-chhota ho */
}
/* ═══════════════════════════════════════════════════════════════════
👤 PROFILE KA UPARI HISSA — naam cover ki tasveer par chadh jata tha
18 August 2026
───────────────────────────────────────────────────────────────────
DIKKAT KYA THI:
`.profile-head` par `align-items:flex-end` tha. Matlab naam wale
poore khambe ka NEECHE ka kinara DP ke neeche wale kinare se milta
tha. Us khambe me chaar cheezein hain — naam, rank ki goli,
friends/followers wali line, aur bio. Jitni cheezein zyada, khamba
utna lamba, aur lamba khamba UPAR ki taraf badhta hai — kyunki
neeche wala kinara to bandha hua hai.
Natija: naam sabse upar hone ki wajah se cover ki tasveer par ja
chadhta tha. Aur cover ek asli photo hai — kabhi halki, kabhi
gehri — isliye kaala naam uspar padha hi nahi jata tha.
Jiski bio lambi hai, uska naam aur upar chala jata. Yaani dikkat
har banda alag-alag dekhta.
AB KYA KIYA:
Sab kuch cover ke NEECHE se shuru hota hai (`padding-top`), aur
sirf DP ko upar kheencha hai (`margin-top`) taaki wo pehle jaisi
hi aadhi cover par dikhe. Naam ab kabhi tasveer par nahi chadhega,
chahe bio kitni bhi lambi ho.
Button daayein neeche hi rahenge — `align-self` se.
📱 Mobile par ye lagta hi nahi. Wahan `.profile-head` ek seedhi
kataar (column) ban jata hai — DP upar, naam neeche — isliye
wahan ye dikkat kabhi thi hi nahi. Media query se alag rakha hai.
═══════════════════════════════════════════════════════════════════ */
@media(min-width:701px){
.profile-head{
align-items:flex-start !important;
padding-top:90px; /* .cover ke -90px ko barabar karta hai */
}
/* 🔴 18 Aug, doosri koshish — pehli baar Rising Star ka nishaan
apni jagah se hat gaya tha. Wajah:
DP asal me akeli nahi hoti. Jab banda ka koi rank hota hai to
03-helpers.js ka avatarHTML() use ek dabbe me lapet deta hai:
⭐
Aur `.av-rank` apni jagah us DABBE se naapta hai (position:absolute),
tasveer se nahi. Maine pehle sirf `img` ko 90px upar khींch diya —
dabba wahin ka wahin raha, isliye taara neeche chhoot gaya.
Ab dabbe ko hi upar kheenchte hain, isliye tasveer aur taara dono
ek saath jaate hain aur taara DP ke kone par hi chipka rehta hai.
Owner par rank ka nishaan nahi lagta — tab dabba banta hi nahi aur
`img` seedhi beti hoti hai. Isliye doosri line uske liye hai.
`>` (seedhi beti) likhna zaroori hai, warna dabbe ke andar wali
tasveer par bhi ye lag jayega aur wo 180px upar chali jayegi. */
.profile-head > .av-wrap,
.profile-head > .pb-frame,
.profile-head > .profile-avatar{
margin-top:-90px; /* sirf DP upar — aadhi cover par */
flex:0 0 auto;
}
/* Naam wala khamba theek cover ke neeche se shuru ho — DP ke bagal me.
Yahan alag se padding-top NAHI dena: upar `.profile-head` par jo
90px hai wahi kaafi hai. Dobara dene se naam DP ke neeche gir
jata tha aur DP ke daayein ek badi khali jagah bach jati thi. */
.profile-head>div{ padding-bottom:0 !important; }
/* Edit Profile / Share wale button daayein taraf, alag kataar me —
warna wo bio ke upar chadh kar use dhak dete the. */
.profile-head>div:last-child{
margin-left:auto; align-self:flex-start;
padding-bottom:0 !important;
}
/* naam ko saans lene ki jagah */
.profile-name{ margin-bottom:2px; }
}
/* ===== v144 (21 Aug 2026) — PiyariChat feel: desi doodle wallpaper (diya/paisley/kamal/baans/dhol/dil/sitar-note) + bubble tails + send morph.
Purana --pc-wall user-wallpaper system waisa hi kaam karta hai — user gradient chune to doodle uske neeche, thos rang chune to sirf rang (invalid-image fallback). Sab apne rang, kisi app ki nakal nahi. ===== */
html{--pb-doodle:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%20viewBox%3D'0%200%20180%20180'%3E%3Cg%20fill%3D'none'%20stroke%3D'%230435af'%20stroke-opacity%3D'.07'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%2034q8%208%2016%200'%2F%3E%3Cpath%20d%3D'M14%2034h16'%2F%3E%3Cpath%20d%3D'M22%2030q-3-4%200-7q3%203%200%207'%2F%3E%3Cpath%20d%3D'M126%2016q10%204%206%2014q-3%208-12%206q-7-2-5-9q2-6%208-5'%2F%3E%3Cpath%20d%3D'M60%2096q-8-2-8-10q6%202%208%208q2-6%208-8q0%208-8%2010z'%2F%3E%3Cpath%20d%3D'M50%2098h20'%2F%3E%3Cpath%20d%3D'M150%2074v12M144%2080h12'%2F%3E%3Cpath%20d%3D'M30%20122v26M30%20130l8-6M30%20138l-8-6M30%20146l8-6'%2F%3E%3Crect%20x%3D'100'%20y%3D'132'%20width%3D'26'%20height%3D'16'%20rx%3D'7'%2F%3E%3Cpath%20d%3D'M104%20132l18%2016M122%20132l-18%2016'%2F%3E%3Cpath%20d%3D'M85%2046q-8-6-4-11q3-3%204%200q1-3%204%200q4%205-4%2011z'%2F%3E%3Cpath%20d%3D'M158%20158v-12l10-3v12'%2F%3E%3Ccircle%20cx%3D'155'%20cy%3D'158'%20r%3D'2.5'%2F%3E%3Ccircle%20cx%3D'165'%20cy%3D'155'%20r%3D'2.5'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
html[data-theme="dark"],html[data-theme="midnight"]{--pb-doodle:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%20viewBox%3D'0%200%20180%20180'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-opacity%3D'.05'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%2034q8%208%2016%200'%2F%3E%3Cpath%20d%3D'M14%2034h16'%2F%3E%3Cpath%20d%3D'M22%2030q-3-4%200-7q3%203%200%207'%2F%3E%3Cpath%20d%3D'M126%2016q10%204%206%2014q-3%208-12%206q-7-2-5-9q2-6%208-5'%2F%3E%3Cpath%20d%3D'M60%2096q-8-2-8-10q6%202%208%208q2-6%208-8q0%208-8%2010z'%2F%3E%3Cpath%20d%3D'M50%2098h20'%2F%3E%3Cpath%20d%3D'M150%2074v12M144%2080h12'%2F%3E%3Cpath%20d%3D'M30%20122v26M30%20130l8-6M30%20138l-8-6M30%20146l8-6'%2F%3E%3Crect%20x%3D'100'%20y%3D'132'%20width%3D'26'%20height%3D'16'%20rx%3D'7'%2F%3E%3Cpath%20d%3D'M104%20132l18%2016M122%20132l-18%2016'%2F%3E%3Cpath%20d%3D'M85%2046q-8-6-4-11q3-3%204%200q1-3%204%200q4%205-4%2011z'%2F%3E%3Cpath%20d%3D'M158%20158v-12l10-3v12'%2F%3E%3Ccircle%20cx%3D'155'%20cy%3D'158'%20r%3D'2.5'%2F%3E%3Ccircle%20cx%3D'165'%20cy%3D'155'%20r%3D'2.5'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.chat-window .chat-body{background-image:var(--pb-doodle),var(--pc-wall,linear-gradient(0deg,var(--bg),var(--bg)))!important;background-size:180px 180px,cover!important;background-repeat:repeat!important;background-position:top left,center!important}
.chat-window.pc-chat .chat-body{background-image:var(--pc-wall,linear-gradient(0deg,rgba(0,0,0,.012),rgba(0,0,0,.012))),var(--pb-doodle)!important;background-size:auto,180px 180px!important;background-repeat:repeat!important}
#pcWorld.pc-dark ~ .chat-window.pc-chat .chat-body,.chat-window.pc-chat.dark .chat-body{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%20viewBox%3D'0%200%20180%20180'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-opacity%3D'.05'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%2034q8%208%2016%200'%2F%3E%3Cpath%20d%3D'M14%2034h16'%2F%3E%3Cpath%20d%3D'M22%2030q-3-4%200-7q3%203%200%207'%2F%3E%3Cpath%20d%3D'M126%2016q10%204%206%2014q-3%208-12%206q-7-2-5-9q2-6%208-5'%2F%3E%3Cpath%20d%3D'M60%2096q-8-2-8-10q6%202%208%208q2-6%208-8q0%208-8%2010z'%2F%3E%3Cpath%20d%3D'M50%2098h20'%2F%3E%3Cpath%20d%3D'M150%2074v12M144%2080h12'%2F%3E%3Cpath%20d%3D'M30%20122v26M30%20130l8-6M30%20138l-8-6M30%20146l8-6'%2F%3E%3Crect%20x%3D'100'%20y%3D'132'%20width%3D'26'%20height%3D'16'%20rx%3D'7'%2F%3E%3Cpath%20d%3D'M104%20132l18%2016M122%20132l-18%2016'%2F%3E%3Cpath%20d%3D'M85%2046q-8-6-4-11q3-3%204%200q1-3%204%200q4%205-4%2011z'%2F%3E%3Cpath%20d%3D'M158%20158v-12l10-3v12'%2F%3E%3Ccircle%20cx%3D'155'%20cy%3D'158'%20r%3D'2.5'%2F%3E%3Ccircle%20cx%3D'165'%20cy%3D'155'%20r%3D'2.5'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")!important;background-size:180px 180px!important;background-repeat:repeat!important}
.msg{position:relative}
.msg-wrap.me .msg:not(.media):not(.sticker-msg)::after{content:"";position:absolute;right:-6px;bottom:0;width:0;height:0;border:6px solid transparent;border-left-color:var(--blue);border-bottom-width:0;border-right-width:0}
.msg-wrap.them .msg:not(.media):not(.sticker-msg)::after{content:"";position:absolute;left:-6px;bottom:0;width:0;height:0;border:6px solid transparent;border-right-color:var(--hover2);border-bottom-width:0;border-left-width:0}
.chat-window.pc-chat .msg-wrap.me .msg:not(.media):not(.sticker-msg)::after{border-left-color:#d9fdd3}
.chat-window.pc-chat .msg-wrap.them .msg:not(.media):not(.sticker-msg)::after{border-right-color:#fff}
.chat-input .send{opacity:.45;transform:scale(.92);transition:opacity .15s,transform .15s}
.chat-input.has-text .send{opacity:1;transform:scale(1)}