/* =====================================================================
   🇮🇳 TIRANGA KINARA  —  v383 · 9 Aktoobar 2026 (v382 + chat ke message bubble)
   Raj: "website ke all border ko tri-colour se rangdho"
   (app me ChatGPT se yahi karwaya — Code151 ke tiranga kinare; website ab wahi)

   KYA: website ka har dikhne wala kinara (border) ab tiranga —
        card (pehle se, tiranga.css) · lakeer / divider · chip · outline button ·
        input / select / textarea · tab ki lakeer · modal ka sir · Vani ke dabbe ·
        profile ki photo ka gola · live card · Watch ki khoj-patti · composer ke
        tool · theme/font ke dabbe · Boost ke chunav · KYC ke dastavez ke dabbe.
   KAISE (3 tareeke — gol kone kabhi nahi kat-te):
     A) sirf ek taraf wali lakeer      → border-image (gradient 90°)
     B) gol dabba jiska apna rang hai   → ::after ki "ring" (mask) — dabbe ka
        rang / tasveer jaisa tha waisa, sirf kinara tiranga
     C) input/select/textarea (inpar ::after nahi lagta) → do-background
        wala wahi tarika jo card par hai (padding-box + border-box)
   NAHI CHHUA: aapke ads (.pbna-*), logo, ghanti ke laal badge ka safed gola,
        focus wali neeli lakeer (likhte waqt neela hi), live-card ki LAAL patti,
        chetavni wali rangeen pattiyan, badge ke rang-chunav (wahan border = rang),
        KYC / Blue Tick ke nishaan, dark/midnight ke apne rang.
   JAANCH: scan-kinara (33 screen × light/dark) — koi grey kinara nahi bacha.
   HATANA HO: index.html se is file ki <link> line hata do.
   ===================================================================== */
:root{
  --pb-tk:   linear-gradient(135deg, #FF9933 0%, #FFF3E3 42%, #138808 100%);   /* card jaisa — tirchha */
  --pb-tk-h: linear-gradient(90deg,  #FF9933 0%, #FFF3E3 50%, #138808 100%);   /* lakeer — baayein se daayein */
}
html[data-theme="dark"], html[data-theme="midnight"]{
  --pb-tk:   linear-gradient(135deg, #E68A2E 0%, #D9CDBB 42%, #1B8F18 100%);   /* raat me cream thoda dheema */
  --pb-tk-h: linear-gradient(90deg,  #E68A2E 0%, #D9CDBB 50%, #1B8F18 100%);
}

/* ---------- A. LAKEER (ek taraf ka border) — jahan border hai hi nahi, border-image kuch nahi karta ---------- */
.composer-actions, .post-actions, .pbd-row, .pv-mini, .modal-head, .pv-tabs, .profile-tabs,
.pc-nav, .pc-chead, .pc-navtabs, .pc-row:not(.pbna-chat), .chat-head, .chat-input, div[style*="border-top:2px solid #e5e7eb"]{
  border-image: var(--pb-tk-h) 1 !important;
}
/* chuna hua tab — 3px neeli lakeer → tiranga */
.profile-tabs button.active{ border-image: var(--pb-tk-h) 1 !important; }

/* ---------- B. GOL DABBA — ::after ki ring (rang waisa hi, kinara tiranga) ---------- */
.ff-chip, .mp-chip, .btn-line, .add-tool, .pbd-mini, .theme-btn, .pv-note, .pva-line, .pv-imgs, .yt-searchbar,
.bg-swatch.sel, .avatar-txt, .profile-avatar, .chat-input .cmic-gif, [data-baud], [data-bpkg], #bstPrev, [id^="kd_doc"], .live-card, .dash-card, .pv-tr > button{
  position: relative;
}
.ff-chip, .mp-chip, .btn-line, .add-tool, .pbd-mini, .theme-btn, .pv-note, .pva-line, .pv-imgs, .yt-searchbar,
.bg-swatch.sel, .avatar-txt, .profile-avatar, .chat-input .cmic-gif, [data-baud], [data-bpkg], #bstPrev, [id^="kd_doc"], .dash-card, .pv-tr > button{
  border-color: transparent !important;
}
/* live card: upar/daayein/neeche tiranga, baayein wali LAAL "live" patti waisi hi */
.live-card{ border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; }

.ff-chip::after, .mp-chip::after, .btn-line::after, .add-tool::after, .pbd-mini::after, .theme-btn::after, .pv-note::after, .pva-line::after,
.pv-imgs::after, .yt-searchbar::after, .bg-swatch.sel::after, .avatar-txt::after, .profile-avatar::after, .chat-input .cmic-gif::after,
[data-baud]::after, [data-bpkg]::after, #bstPrev::after, [id^="kd_doc"]::after, .live-card::after, .dash-card::after, .pv-tr > button::after{
  content: "";
  position: absolute;
  inset: -1px;                   /* theek border ki jagah (1px) */
  padding: 1px;
  border-radius: inherit;
  background: var(--pb-tk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
/* 2px / 4px wale */
.theme-btn::after, .bg-swatch.sel::after, .avatar-txt::after, [data-baud]::after, [data-bpkg]::after{ inset: -2px; padding: 2px; }
.chat-input .cmic-gif::after{ inset: -1.6px; padding: 1.6px; }
.profile-avatar::after{ inset: -4px; padding: 4px; }
/* profile ki DP: akshar wali (div) par app-311 ne overflow:hidden rakha hai — ring kat jaati; ring sirf border me hai, isliye visible surakshit.
   Asli photo (img) par ::after nahi lagta → do-background (photo content-box me hai, ring border me) */
div.profile-avatar{ overflow: visible !important; }
img.profile-avatar{
  border-color: transparent !important;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--pb-tk) border-box !important;
}
/* overflow:hidden wale (tasveeron ka grid) — ring andar ki taraf, warna kat jaati */
.pv-imgs::after{ inset: 0; }
/* live card: ring sirf 3 taraf dikhe — baayein ki laal patti ke upar nahi */
.live-card::after{ inset: -1px -1px -1px 3px; }
/* ring ke upar likhai / icon aage rahe */
.ff-chip > *, .mp-chip > *, .btn-line > *, .add-tool > *, .pbd-mini > *, .theme-btn > *, .pv-note > *, .pva-line > *, [data-baud] > *, [data-bpkg] > *, .dash-card > *{ position: relative; z-index: 1; }

/* coins: "Cash earning abhi chalu nahi" ka dashed grey dabba · badge: rang-chunav ke bina-chune button (chuna hua = kaala, waisa hi) */
div[style*="2px dashed var(--line)"], button[style*="border:2px solid #e6e6e6"]{ position: relative; border-color: transparent !important; }
div[style*="2px dashed var(--line)"]::after, button[style*="border:2px solid #e6e6e6"]::after{
  content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: inherit; background: var(--pb-tk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0;
}
button[style*="border:2px solid #e6e6e6"] > *{ position: relative; z-index: 1; }

/* ---------- B2. CHAT KE MESSAGE (Raj, 9 Akt raat: "message ke chat text ke border bhi tri-colour") ----------
   Messenger + PiyariChat ke bubble (bheje aur aaye dono) — bubble ka apna rang (neela / grey / hara / safed) waisa hi,
   upar 1px ki tiranga ring. ::after pehle se "tail" (poonchh) ke liye hai (tiranga.css v144), isliye yahan ::before.
   Tasveer / sticker / location wale bubble nahi (unka apna gol kinara hai, bubble paardarshi). */
.msg-wrap .msg:not(.media):not(.sticker-msg):not(.loc-msg){ position: relative; }
.msg-wrap .msg:not(.media):not(.sticker-msg):not(.loc-msg)::before{
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--pb-tk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0;
}
/* tareekh ki goli ("Today / Yesterday / 11 Sept"), jawab-quote ka dabba (baayein neeli patti waisi hi) */
.chat-date, .msg-reply{ position: relative; }
.chat-date::after, .msg-reply::after{
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--pb-tk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0;
}
.msg-reply::after{ inset: -1px -1px -1px 0; }
/* chat ka "Message…" wala pill (Messenger: grey · PiyariChat: safed) + PiyariChat ki "Search chats" + uski chips (All / Unread …)
   (in dono ka apna koi focus-rang tha hi nahi — isliye likhte waqt bhi tiranga rehta hai, pill uchhalta nahi) */
.chat-input #chatInput{
  border: 1px solid transparent !important;
  background: linear-gradient(var(--hover2), var(--hover2)) padding-box, var(--pb-tk) border-box !important;
}
.chat-window.pc-chat .chat-input #chatInput{
  background: linear-gradient(#fff, #fff) padding-box, var(--pb-tk) border-box !important;
}
.pc-csearch{
  border: 1px solid transparent !important;
  background: linear-gradient(#f0f2f5, #f0f2f5) padding-box, var(--pb-tk) border-box !important;
}
#pcWorld.pc-dark .pc-csearch{ background: linear-gradient(#202c33, #202c33) padding-box, var(--pb-tk) border-box !important; }
.pc-chip{ position: relative; }
.pc-chip::after{
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--pb-tk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0;
}
/* nav ki khoj-pill ("Search PiyariBook") — pill par ring, andar ka input waisa hi */
.nav .search{ position: relative; }
.nav .search::after{
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--pb-tk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0;
}
/* comment likhne wala pill (post ke neeche) */
.comment-box .field{ position: relative; }
.comment-box .field::after{
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--pb-tk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0;
}
/* reaction ki chhoti goli (1px grey) bhi */
.msg-reacts{ position: relative; border-color: transparent !important; }
.msg-reacts::after{
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--pb-tk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0;
}

/* ---------- C. INPUT / SELECT / TEXTAREA — do-background (card jaisa); focus par neela hi ---------- */
input.field-line:not(:focus), select.field-line:not(:focus), textarea.field-line:not(:focus),
select#bnSt:not(:focus), select#bnDi:not(:focus){
  border-color: transparent !important;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--pb-tk) border-box !important;
}
/* 📝 BAAKI SAB TEXT-BOX (Raj: "all text ke border bhi tri-colour") — jo .field-line nahi hain: composer ka bada textarea,
   Vani ka likhne ka dabba, story / reel / market / event / page / group ke form, login ke dabbe, Settings ke dabbe.
   Likhte waqt (focus) neeli lakeer waisi hi. PiyariChat (#pcWorld) ke apne rang hain — uske dabbe upar alag se. */
textarea:not(:focus):not(.field-line):not(#pcWorld textarea),
select:not(:focus):not(.field-line):not(#bnSt):not(#bnDi):not(#pcWorld select),
input:not(:focus):not(.field-line):not(#chatInput):not(.pc-csearch):not(.comment-box input):not(.search input):not(#pcWorld input):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]){
  border: 1px solid transparent !important;
  color: var(--text) !important;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--pb-tk) border-box !important;
}
/* feed ka composer pill ("aaj kya kehna hai?") — apna halka grey rang waisa hi, sirf kinara tiranga */
.composer-input:not(:focus){
  border-color: transparent !important;
  background:
    linear-gradient(var(--hover2), var(--hover2)) padding-box,
    var(--pb-tk) border-box !important;
}
/* Boost ke do select (inline style, apna rang nahi tha): dabba ab card ke rang ka hai, to likhai bhi theme ki — raat me kaala-par-kaala na ho */
select#bnSt, select#bnDi{ color: var(--text) !important; }

/* ---------- D. NAHI CHHUNA ---------- */
[class*="pbna-"]{ border-image: none !important; }
[class*="pbna-"]::after{ content: none !important; }
#notifBadge{ border-image: none !important; }

/* 🖨️ forced-colours (high contrast) — sab wapas saada */
@media (forced-colors: active){
  .ff-chip::after, .mp-chip::after, .btn-line::after, .add-tool::after, .pbd-mini::after, .theme-btn::after, .pv-note::after, .pva-line::after,
  .pv-imgs::after, .yt-searchbar::after, .bg-swatch.sel::after, .avatar-txt::after, .profile-avatar::after, .chat-input .cmic-gif::after,
  [data-baud]::after, [data-bpkg]::after, #bstPrev::after, [id^="kd_doc"]::after, .live-card::after, .dash-card::after, .pv-tr > button::after, div[style*="2px dashed var(--line)"]::after, button[style*="border:2px solid #e6e6e6"]::after, .msg-wrap .msg::before, .msg-reacts::after, .chat-date::after, .msg-reply::after, .pc-chip::after, .comment-box .field::after, .nav .search::after{ content: none !important; }
  .ff-chip, .mp-chip, .btn-line, .add-tool, .pbd-mini, .theme-btn, .pv-note, .pva-line, .pv-imgs, .yt-searchbar, .bg-swatch.sel, .avatar-txt, .profile-avatar,
  [data-baud], [data-bpkg], #bstPrev, [id^="kd_doc"], .live-card, .dash-card, .pv-tr > button, div[style*="2px dashed var(--line)"], button[style*="border:2px solid #e6e6e6"], input.field-line, select.field-line, textarea.field-line, .composer-input{ border-color: CanvasText !important; }
  input.field-line, select.field-line, textarea.field-line, .composer-input, select#bnSt, select#bnDi{ background: Canvas !important; }
}