/* =====================================================================
   Unjaan — modern.css (v1)  ·  Premium look + full mobile polish
   Loaded AFTER theme.css and pro.css. Pure CSS, no app logic touched.
   To undo everything: remove the <link> to this file from app.html.
   ===================================================================== */

:root{
  --m-r-lg:20px;
  --m-r-md:16px;
  --m-card:rgba(255,255,255,.72);
  --m-card-border:rgba(109,77,242,.10);
  --m-shadow:0 10px 30px -16px rgba(60,40,160,.35);
  --m-font:'Plus Jakarta Sans',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html.dark{
  --m-card:rgba(30,28,58,.55);
  --m-card-border:rgba(167,139,250,.12);
  --m-shadow:0 14px 34px -18px rgba(0,0,0,.8);
}

/* ---------- base: font, no sideways scroll, no tap flash, no iOS zoom ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body,button,input,textarea,select{font-family:var(--m-font)!important}
*{-webkit-tap-highlight-color:transparent}
button,[role="button"],.cursor-pointer{touch-action:manipulation}
img{max-width:100%}
::selection{background:rgba(109,77,242,.28)}
*{scrollbar-width:thin;scrollbar-color:rgba(139,107,255,.35) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(139,107,255,.3);border-radius:8px}

/* ---------- top bar: glass, soft, brand-first ---------- */
header{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  padding-top:env(safe-area-inset-top)!important;height:calc(var(--p-nav-h) + env(safe-area-inset-top))!important;
  position:sticky;top:0;z-index:40}
html.dark header{background:rgba(13,12,26,.80)!important}
header .max-w-7xl>div:last-child button{
  background:var(--m-card)!important;border:1px solid var(--m-card-border)!important;
  transition:transform .15s,background .2s,box-shadow .2s}
header .max-w-7xl>div:last-child button:active{transform:scale(.93)}
header .max-w-7xl>div:last-child button:hover{box-shadow:0 8px 20px -10px var(--u-glow)}

/* ---------- conversations screen: title block ---------- */
div[class*="md:w-80"]{background:var(--p-side-bg)!important}
html.dark div[class*="md:w-80"]{
  background:linear-gradient(180deg,#14122b 0%,#0f0e22 60%,#0d0c1a 100%)!important}
html:not(.dark) div[class*="md:w-80"]{background:linear-gradient(180deg,#ffffff,#f7f5ff)!important}
div[class*="md:w-80"]>div.p-4 h1{
  font-size:24px!important;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--p-text) 40%,#8a6bff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
div[class*="md:w-80"]>div.p-4 p{
  display:inline-flex;align-items:center;gap:6px;width:max-content;
  padding:3px 10px;border-radius:999px;font-size:11.5px!important;font-weight:600;
  background:var(--u-soft);color:var(--u-solid)!important;margin-top:6px}
html.dark div[class*="md:w-80"]>div.p-4 p{color:#c4b5fd!important}
div[class*="md:w-80"]>div.p-4 p::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
div[class*="md:w-80"]>div.p-4 button:not([title="Find user by handle"]){
  background:var(--m-card)!important;border:1px solid var(--m-card-border)!important;color:var(--u-solid)!important}
html.dark div[class*="md:w-80"]>div.p-4 button:not([title="Find user by handle"]){color:#c4b5fd!important}

/* ---------- stories ---------- */
div[class*="md:w-80"]>div.overflow-x-auto{
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:6px 16px 14px!important}
div[class*="md:w-80"]>div.overflow-x-auto>button{scroll-snap-align:start;transition:transform .15s}
div[class*="md:w-80"]>div.overflow-x-auto>button:active{transform:scale(.94)}
div[class*="md:w-80"]>div.overflow-x-auto span{font-weight:600;color:var(--p-muted)}
div[class*="md:w-80"]>div.overflow-x-auto .bg-gradient-to-tr{
  background:conic-gradient(from 210deg,#8a6bff,#5b8cff,#36d1dc,#8a6bff)!important;
  box-shadow:0 6px 16px -6px var(--u-glow)}
div[class*="md:w-80"]>div.overflow-x-auto .border-dashed{border-color:rgba(139,107,255,.55)!important}
div[class*="md:w-80"]>div.overflow-x-auto .bg-indigo-600{background:var(--u-grad)!important}

/* ---------- search ---------- */
div[class*="md:w-80"]>div.p-3 input{
  background:var(--m-card)!important;border:1px solid var(--m-card-border)!important;
  border-radius:16px!important;box-shadow:var(--m-shadow);font-size:14px!important;transition:box-shadow .2s,border-color .2s}
div[class*="md:w-80"]>div.p-3 input:focus{box-shadow:0 0 0 4px var(--u-soft),var(--m-shadow);border-color:var(--u-solid)!important}

/* ---------- chat rows: soft cards ---------- */
div[class*="md:w-80"] .divide-y{border-top:0;padding:4px 6px 16px}
.divide-y>div[class*="cursor-pointer"]{
  background:var(--m-card);border:1px solid var(--m-card-border)!important;border-radius:var(--m-r-lg)!important;
  margin:6px 8px!important;box-shadow:var(--m-shadow);
  transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.divide-y>div[class*="cursor-pointer"]:hover{border-color:rgba(139,107,255,.35)!important;transform:translateY(-1px)}
.divide-y>div[class*="cursor-pointer"]:active{transform:scale(.985)}
.divide-y>div[class*="border-l-4"]{
  background:linear-gradient(135deg,rgba(138,107,255,.20),rgba(91,61,240,.10))!important;
  border-color:rgba(139,107,255,.45)!important;box-shadow:0 12px 28px -14px var(--u-glow)!important}
/* avatars: gradient + soft ring + bolder online dot */
.divide-y>div[class*="cursor-pointer"] div.rounded-full.flex.items-center.justify-center:not(.w-2\.5):not(.w-3){
  background:var(--u-grad)!important;color:#fff!important;border:0!important;
  box-shadow:0 8px 18px -8px var(--u-glow),0 0 0 2px rgba(139,107,255,.25);font-weight:700}
.divide-y>div[class*="cursor-pointer"] img.rounded-full{box-shadow:0 0 0 2px rgba(139,107,255,.35);border:0!important}
.divide-y>div[class*="cursor-pointer"] span.rounded-full.absolute{box-shadow:0 0 0 2px var(--p-side-bg)}
.divide-y>div[class*="cursor-pointer"] span.font-bold:not([class*="uppercase"]){font-weight:700;letter-spacing:-.01em}
.divide-y>div[class*="cursor-pointer"] p{color:var(--p-muted)}

/* friendly hint under the list (shown only when there are chats) */
div[class*="md:w-80"] .divide-y:has(>div[class*="cursor-pointer"])::after{
  content:"Tap  +  to start a new private chat";display:block;margin:18px 14px 0;padding:16px;text-align:center;
  border:1.5px dashed rgba(139,107,255,.35);border-radius:var(--m-r-lg);
  font-size:12.5px;font-weight:600;color:var(--p-muted);background:rgba(139,107,255,.05)}
/* nicer empty / loading states */
div[class*="md:w-80"] .divide-y>div.p-8{margin:24px 16px;border-radius:24px;background:var(--m-card);border:1px dashed rgba(139,107,255,.35)}
div[class*="md:w-80"] .divide-y>div.p-8 button{border-radius:14px!important;min-height:42px;padding:0 18px!important;font-weight:700}

/* ---------- floating "+" button ---------- */
@media (max-width:767px){
  button[title="Find user by handle"].fixed,button[title="Find user by handle"][class*="fixed"]{
    width:60px!important;height:60px!important;border-radius:20px!important;
    background:var(--u-grad)!important;color:#fff!important;border:0!important;
    box-shadow:0 18px 34px -10px var(--u-glow),0 0 0 6px rgba(139,107,255,.14)!important;
    transition:transform .2s var(--u-spring,ease)}
  button[title="Find user by handle"][class*="fixed"]:active{transform:scale(.9) rotate(90deg)}
}

/* ---------- bottom navigation: floating dock ---------- */
@media (max-width:767px){
  body.unj-hasnav #unj-nav{
    left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));border-radius:26px;
    padding:6px 6px;border:1px solid var(--m-card-border);
    box-shadow:0 20px 44px -16px rgba(40,20,120,.55)}
  html.dark body.unj-hasnav #unj-nav{border-color:rgba(167,139,250,.18)}
  body.unj-hasnav #unj-nav button{min-height:54px}
  body.unj-hasnav #root{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  body.unj-hasnav button[title="Find user by handle"]{bottom:calc(98px + env(safe-area-inset-bottom))}
  #unj-toast{bottom:calc(104px + env(safe-area-inset-bottom))}
}

/* ---------- chat screen ---------- */
[class*="p-3.5"][class*="justify-between"]{
  background:var(--m-card)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding-top:env(safe-area-inset-top)}
div[class*="0B1120"][class*="flex-col"]>div.overflow-y-auto{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
[class*="rounded-2xl"][class*="bg-emerald-600"]{border-bottom-right-radius:6px!important}
html.dark [class*="bg-white"][class*="rounded-2xl"][class*="border"]{border-bottom-left-radius:6px!important}
div[class*="0B1120"] textarea{box-shadow:var(--m-shadow)}
div[class*="0B1120"]>div:last-child:has(textarea) div.flex.items-end button:not(:disabled){transition:transform .15s}
div[class*="0B1120"]>div:last-child:has(textarea) div.flex.items-end button:active{transform:scale(.9)}

/* ---------- modals: bottom sheets on phones ---------- */
.fixed.inset-0{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:640px){
  .fixed.inset-0.flex.items-center.justify-center:not([class*="bg-black"]){align-items:flex-end!important;padding:0!important}
  .fixed.inset-0.flex.items-center.justify-center:not([class*="bg-black"])>div{
    width:100%!important;max-width:100%!important;border-radius:26px 26px 0 0!important;
    max-height:92dvh;overflow-y:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom));
    animation:mSheet .28s cubic-bezier(.2,.9,.3,1)}
}
@keyframes mSheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ---------- phones: sizing & accessibility ---------- */
@media (max-width:767px){
  /* 16px inputs stop iOS Safari from zooming the page on focus */
  input,textarea,select{font-size:16px!important}
  div[class*="md:w-80"]>div.p-3 input{height:48px}
  div[class*="md:w-80"]>div.p-4 h1{font-size:26px!important}
  header .max-w-7xl>div:last-child button{height:42px;min-width:42px}
  .divide-y>div[class*="cursor-pointer"]{min-height:76px;padding:12px 14px!important}
}
@media (max-width:360px){
  div[class*="md:w-80"]>div.p-4 h1{font-size:22px!important}
  .divide-y>div[class*="cursor-pointer"]{margin:5px 4px!important}
}
/* landscape phones: keep bars slim */
@media (max-height:480px) and (orientation:landscape){
  :root{--p-nav-h:48px}
  body.unj-hasnav #unj-nav{display:none}
  body.unj-hasnav #root{padding-bottom:0}
}
/* big screens: keep content from stretching */
@media (min-width:1600px){:root{--p-thread-w:960px}}

@media (prefers-reduced-motion:reduce){
  .fixed.inset-0>div{animation:none!important}
}

/* ---------- v2: app header brand = mark image + "unjaan" wordmark ---------- */
header button.group>div:first-child{
  width:44px!important;min-width:44px!important;height:44px!important;
  background:transparent url('/images/logo.png?v=d') center/contain no-repeat!important}
header span.tracking-\[0\.2em\]{display:block!important}
header .max-w-7xl>div:first-child button{gap:8px}
@media (max-width:360px){header span.tracking-\[0\.2em\]{font-size:1.05rem!important}}

/* =====================================================================
   v3 — Stories strip redesign + notification bell
   ===================================================================== */
/* the strip becomes a clean rounded card */
div[class*="md:w-80"]>div.overflow-x-auto{
  margin:2px 14px 12px!important;padding:14px 14px 12px!important;gap:16px!important;
  border:1px solid var(--m-card-border)!important;border-radius:24px!important;
  background:var(--m-card)!important;box-shadow:var(--m-shadow);
  -ms-overflow-style:none;scrollbar-width:none}
div[class*="md:w-80"]>div.overflow-x-auto::-webkit-scrollbar{display:none}
div[class*="md:w-80"]>div.overflow-x-auto>button{gap:7px!important;min-width:66px}
div[class*="md:w-80"]>div.overflow-x-auto>div.w-px{height:44px!important;background:var(--p-line)!important;align-self:center}

/* the old "square box" came from ring-2 on a non-round wrapper -> make it a proper circle */
div[class*="md:w-80"]>div.overflow-x-auto .ring-2{
  border-radius:50%!important;box-shadow:0 0 0 3px var(--p-side-bg)!important;--tw-ring-shadow:0 0 #0000!important}
div[class*="md:w-80"]>div.overflow-x-auto .animate-pulse{animation:none!important}

/* ring */
div[class*="md:w-80"]>div.overflow-x-auto>button .p-0\.5{
  padding:3px!important;border-radius:50%!important;border-width:0;transition:transform .15s}
div[class*="md:w-80"]>div.overflow-x-auto>button:active .p-0\.5{transform:scale(.94)}
div[class*="md:w-80"]>div.overflow-x-auto>button .p-0\.5.bg-gradient-to-tr{
  background:conic-gradient(from 200deg,#8a6bff,#4f8cff,#22d3ee,#8a6bff)!important;box-shadow:0 8px 20px -8px var(--u-glow)}
div[class*="md:w-80"]>div.overflow-x-auto>button .p-0\.5.bg-slate-300,
div[class*="md:w-80"]>div.overflow-x-auto>button .p-0\.5.dark\:bg-slate-700{background:rgba(148,144,175,.45)!important}
/* "Your story" empty = dashed ring */
div[class*="md:w-80"]>div.overflow-x-auto>button .p-0\.5.border-dashed{
  border:2px dashed rgba(139,107,255,.7)!important;padding:2px!important;background:var(--u-soft)}

/* avatar inside ring */
div[class*="md:w-80"]>div.overflow-x-auto>button .p-0\.5 .w-10.h-10{
  width:56px!important;height:56px!important;font-size:18px!important}
div[class*="md:w-80"]>div.overflow-x-auto>button .p-0\.5 div.rounded-full.flex.items-center.justify-center{
  background:var(--u-grad)!important;color:#fff!important;border:0!important;font-weight:700}
div[class*="md:w-80"]>div.overflow-x-auto>button .p-0\.5 img{border:0!important;object-fit:cover}

/* "+" badge */
div[class*="md:w-80"]>div.overflow-x-auto .absolute.-bottom-1.-right-1{
  width:22px!important;height:22px!important;background:var(--u-grad)!important;
  border:2px solid var(--p-side-bg)!important;box-shadow:0 6px 14px -4px var(--u-glow)}

/* names */
div[class*="md:w-80"]>div.overflow-x-auto>button>span{
  font-size:12px!important;font-weight:600!important;max-width:68px!important;color:var(--p-text)!important}
div[class*="md:w-80"]>div.overflow-x-auto>button:first-child>span{color:var(--p-muted)!important}

/* ---------- notification bell (header) ---------- */
#unj-mute{
  position:relative;color:var(--u-solid)!important}
html.dark #unj-mute{color:#c4b5fd!important}
#unj-mute svg{width:20px;height:20px}
#unj-mute:not(.is-muted)::after{
  content:"";position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 2px var(--p-side-bg)}
#unj-mute.is-muted{
  color:#f87171!important;background:rgba(248,113,113,.14)!important;border-color:rgba(248,113,113,.4)!important}
#unj-toast{max-width:calc(100vw - 32px);white-space:normal;text-align:center;line-height:1.35}

/* =====================================================================
   v4 — Story viewer: true full-screen on phones, centred card on desktop
   ===================================================================== */
/* hide the app bars while a story is open (they sat on top of it) */
body:has(.fixed.inset-0[class*="bg-black/95"]) header,
body:has(.fixed.inset-0[class*="bg-black/95"]) #unj-nav,
body:has(.fixed.inset-0[class*="bg-black/95"]) #unj-toast,
body:has(.fixed.inset-0[class*="bg-black/95"]) button[title="Find user by handle"]{display:none!important}

.fixed.inset-0[class*="bg-black/95"]{
  align-items:center!important;justify-content:center!important;padding:0!important;
  background:#05040d!important;z-index:9999!important;overscroll-behavior:contain;touch-action:manipulation}
.fixed.inset-0[class*="bg-black/95"]>div{
  width:100%!important;max-width:460px!important;
  height:100dvh!important;max-height:100dvh!important;border-radius:0!important;
  justify-content:flex-start!important;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))!important;
  animation:none!important;box-shadow:none!important;background:#000}
/* soft shade top & bottom so bars / caption stay readable on any picture */
.fixed.inset-0[class*="bg-black/95"]>div::before{
  content:"";position:absolute;inset:0;z-index:15;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.65) 100%)}
@media (min-width:600px){
  .fixed.inset-0[class*="bg-black/95"]>div{
    height:min(94dvh,880px)!important;max-height:min(94dvh,880px)!important;border-radius:28px!important;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)!important;padding:18px 18px 20px!important}
}
/* progress bars */
.fixed.inset-0[class*="bg-black/95"]>div>div.flex.gap-1\.5{margin-bottom:0!important;position:relative;z-index:20}
.fixed.inset-0[class*="bg-black/95"]>div>div.flex.gap-1\.5>div{height:3px!important;background:rgba(255,255,255,.28)!important}
/* top row: author + actions */
.fixed.inset-0[class*="bg-black/95"]>div>div.justify-between{position:relative;z-index:20;gap:10px}
.fixed.inset-0[class*="bg-black/95"] div.justify-between .w-8.h-8{width:42px!important;height:42px!important;font-size:14px!important;
  background:var(--u-grad)!important;color:#fff!important;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.fixed.inset-0[class*="bg-black/95"] div.justify-between p.font-bold{font-size:15px!important;line-height:1.2!important;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.fixed.inset-0[class*="bg-black/95"] div.justify-between p.text-white\/70{font-size:12px!important;margin-top:2px!important}
.fixed.inset-0[class*="bg-black/95"] div.justify-between button{
  width:42px;height:42px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fixed.inset-0[class*="bg-black/95"] div.justify-between button svg{width:20px!important;height:20px!important}
/* content */
.fixed.inset-0[class*="bg-black/95"] .absolute.inset-0.z-10 img{object-fit:contain}
.fixed.inset-0[class*="bg-black/95"] .absolute.inset-0.z-10 p.font-extrabold{
  font-size:clamp(22px,6.2vw,32px)!important;line-height:1.4!important;max-width:100%!important}
.fixed.inset-0[class*="bg-black/95"] .absolute.inset-0.z-10 .p-8{padding:calc(90px + env(safe-area-inset-top)) 28px 90px!important}
.fixed.inset-0[class*="bg-black/95"] .absolute.bottom-12{
  bottom:calc(26px + env(safe-area-inset-bottom))!important;font-size:14px!important;line-height:1.5;padding:12px 16px!important;border-radius:18px!important}
/* previous / next */
.fixed.inset-0[class*="bg-black/95"]>div>button.absolute{
  width:44px;height:44px;padding:0!important;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (max-width:480px){
  .fixed.inset-0[class*="bg-black/95"]>div>button.absolute{width:38px;height:38px;opacity:.85}
}
@media (max-height:480px) and (orientation:landscape){
  .fixed.inset-0[class*="bg-black/95"]>div{max-width:none!important;width:min(100%,420px)!important}
}