/* ---------------------------------------------------------------
   Girnar Chat — mobile first
   --------------------------------------------------------------- */
:root{
  --bg:#f3ede1;
  --panel:#fffaf0;
  --ink:#22322d;
  --dim:#7d8a83;
  --line:#e2d8c5;
  --green:#1d3a34;
  --green2:#2f7d6e;
  --gold:#c79a3c;
  --mine:#d8f0dd;
  --theirs:#ffffff;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Noto Sans Devanagari",sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.45;
  overscroll-behavior-y:none;
}
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font-family:inherit; font-size:15px; }

/* ---------------- sirf photo wali splash ---------------- */
.photo-splash{
  position:fixed; inset:0; background:#000; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* swipe karke saari photo */
.gallery{
  position:absolute; inset:0; z-index:1;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.gallery::-webkit-scrollbar{ display:none; }
.slide{
  position:relative; flex:0 0 100%; width:100%; height:100%;
  scroll-snap-align:center; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.blurbg{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter:blur(26px) brightness(.45); transform:scale(1.1);
}
.mainphoto{
  position:relative; z-index:1;
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  display:block; user-select:none; -webkit-user-drag:none;
}
.dots{
  position:absolute; z-index:2; left:0; right:0; bottom:14px;
  display:flex; gap:6px; justify-content:center; pointer-events:none;
}
.dots i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.35); transition:background .2s, transform .2s;
}
.dots i.on{ background:rgba(255,255,255,.92); transform:scale(1.25); }
/* chhupa hua button — neeche dayein kona */
.hotspot{
  position:absolute; right:0; bottom:0; z-index:3;
  width:92px; height:92px;
  background:transparent; border:0; -webkit-tap-highlight-color:transparent;
}
.hotspot-all{ position:absolute; inset:0; z-index:3; }

/* khaali password dabba — koi likha hua nahi */
.lockscreen .blurbg{ filter:blur(30px) brightness(.3); }
.pin-form{
  position:relative; z-index:2; display:flex; gap:9px; align-items:center;
  padding:0 24px; width:100%; max-width:360px;
}
.pin-form input{
  flex:1; min-width:0; padding:15px 18px; border-radius:14px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12);
  color:#fff; outline:none; font-size:17px; letter-spacing:3px; text-align:center;
  backdrop-filter:blur(6px);
}
.pin-form input:focus{ border-color:rgba(199,154,60,.85); background:rgba(255,255,255,.18); }
.pin-form button{
  width:50px; height:50px; flex:none; border:0; border-radius:50%;
  background:linear-gradient(180deg,#f0d189,#c79a3c); color:#22322d;
  font-size:26px; line-height:1; padding:0 0 3px;
}
.pin-form button:active{ transform:scale(.94); }

/* ---------------- splash / lock ---------------- */
.splash-body{
  background:linear-gradient(170deg,#1d3a34 0%,#294f45 45%,#3d6355 100%);
  color:#f6ecd6;
}
.splash{
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:28px 20px calc(28px + env(safe-area-inset-bottom));
  gap:6px;
}
.splash-top{ margin-bottom:4px; }
.om{ font-size:44px; color:var(--gold); line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.om.small{ font-size:34px; }
.om.tiny{ font-size:22px; }
.mantra{ letter-spacing:3px; font-size:12px; opacity:.75; margin-top:6px; }

.frame{
  width:min(76vw,300px); aspect-ratio:1/1.08;
  border-radius:20px; overflow:hidden; margin:14px 0 16px;
  border:3px solid var(--gold);
  box-shadow:0 12px 40px rgba(0,0,0,.4), inset 0 0 0 6px rgba(255,255,255,.08);
  background:#0e2019; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.frame.small{ width:min(52vw,190px); margin:10px 0 14px; }
.dada{ width:100%; height:100%; object-fit:cover; display:block; }
.no-photo-tip{
  position:absolute; left:0; right:0; bottom:0; padding:8px 10px;
  font-size:11px; line-height:1.4; background:rgba(0,0,0,.55); color:#f0e3c4;
}
.splash-name{ font-size:23px; font-weight:700; letter-spacing:.3px; }
.splash-sub{ font-size:13px; opacity:.75; margin-top:2px; }

.enter-btn{
  margin-top:26px; padding:15px 34px; border-radius:40px;
  background:linear-gradient(180deg,#f0d189,#c79a3c);
  color:#22322d; font-weight:700; font-size:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  display:inline-block; border:0;
}
.enter-btn:active{ transform:translateY(1px); }
.splash-foot{ margin-top:22px; font-size:12px; opacity:.6; }

.lock-icon{ font-size:22px; margin-bottom:4px; }
.lock-form{ width:min(92vw,340px); margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.lock-form.wide label{ text-align:left; font-size:12px; opacity:.75; margin:6px 0 -4px; }
.lock-form input{
  padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1); color:#fff; outline:none;
}
.lock-form input::placeholder{ color:rgba(255,255,255,.5); }
.lock-form input:focus{ border-color:var(--gold); background:rgba(255,255,255,.16); }
.lock-form button{
  padding:14px; border:0; border-radius:12px; font-weight:700; font-size:16px;
  background:linear-gradient(180deg,#f0d189,#c79a3c); color:#22322d;
}
.err{ background:rgba(190,60,50,.25); border:1px solid rgba(255,140,130,.5);
      padding:9px 12px; border-radius:10px; font-size:13px; }

/* ---------------- app shell ---------------- */
.app{ min-height:100dvh; display:flex; flex-direction:column; max-width:820px; margin:0 auto; }
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  background:var(--green); color:#f6ecd6;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.brand{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.brand-t{ font-weight:700; font-size:16px; }
.brand-s{ font-size:11px; opacity:.8; }
.topact{ display:flex; gap:6px; align-items:center; }
.ghost{
  background:rgba(255,255,255,.12); border:0; color:#f6ecd6;
  padding:8px 12px; border-radius:20px; font-size:13px;
}
.ghost:active{ background:rgba(255,255,255,.25); }
.ghost.off{ background:rgba(255,255,255,.05); opacity:.55; }

/* ---------------- new contact ---------------- */
.newbox{ max-height:0; overflow:hidden; transition:max-height .25s ease; background:var(--panel); }
.newbox.open{ max-height:340px; border-bottom:1px solid var(--line); }
.newform{ padding:14px; display:flex; flex-direction:column; gap:9px; }
.nf-title{ font-size:12px; color:var(--dim); }
.newform input{ padding:12px 14px; border:1px solid var(--line); border-radius:10px;
                background:#fff; outline:none; }
.newform input:focus{ border-color:var(--green2); }
.newform button{ padding:13px; border:0; border-radius:10px; background:var(--green2);
                 color:#fff; font-weight:700; }

/* ---------------- chat list ---------------- */
.list{ flex:1; padding:10px 10px 0; display:flex; flex-direction:column; gap:10px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.row{ display:flex; gap:12px; padding:12px; align-items:center; }
.row:active{ background:#f6efe1; }
.ava{
  width:46px; height:46px; border-radius:50%; flex:none; position:relative;
  color:#fff; font-weight:700; font-size:19px;
  display:flex; align-items:center; justify-content:center;
}
.ava.small{ width:34px; height:34px; font-size:15px; }
.dot{ position:absolute; right:0; bottom:1px; width:11px; height:11px; border-radius:50%;
      background:#3ecf6d; border:2px solid var(--panel); }
.rowmid{ flex:1; min-width:0; }
.rowtop{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.when{ font-size:11px; color:var(--dim); flex:none; }
.rowbot{ display:flex; justify-content:space-between; gap:8px; align-items:center; }
.last{ color:var(--dim); font-size:13px; white-space:nowrap; overflow:hidden;
       text-overflow:ellipsis; display:block; }
.badge{ background:var(--green2); color:#fff; border-radius:20px; font-size:11px;
        padding:1px 8px; font-weight:700; flex:none; }

.linkrow{ display:flex; gap:6px; padding:0 10px 10px; align-items:center; flex-wrap:wrap; }
.linkinput{
  flex:1; min-width:130px; padding:8px 10px; font-size:11.5px; color:var(--dim);
  border:1px dashed var(--line); border-radius:8px; background:#fdf9f0; outline:none;
}
.mini{
  border:1px solid var(--line); background:#fff; color:var(--green);
  padding:8px 11px; border-radius:8px; font-size:12px; font-weight:600;
}
.mini:active{ background:#eee6d6; }
.mini.danger{ color:#a8452f; }
.menu{ display:none; gap:8px; padding:0 10px 12px; align-items:center; flex-wrap:wrap;
       border-top:1px dashed var(--line); margin-top:2px; padding-top:10px; }
.menu.open{ display:flex; }
.menu form{ margin:0; }
.tag{ font-size:11px; color:var(--dim); background:#f1e9d9; padding:5px 9px; border-radius:20px; }
.autoform{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; width:100%; }
.autoform select{
  border:1px solid var(--line); background:#fff; color:var(--green);
  padding:7px 9px; border-radius:8px; font-size:12px; font-weight:600;
}
.autotag{ font-size:10.5px; color:#a8452f; background:#f7e7e2; padding:2px 7px;
          border-radius:20px; flex:none; white-space:nowrap; }
.daystamp.warn{ color:#a8452f; background:rgba(255,240,236,.9); }

.empty{ text-align:center; padding:56px 20px; color:var(--dim); }
.empty .om{ color:var(--gold); }
.dim{ color:var(--dim); }
.small{ font-size:12px; }

.lanbar{
  position:sticky; bottom:0; background:var(--panel); border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  font-size:12px; color:var(--dim); display:flex; gap:7px; flex-direction:column;
  align-items:center; text-align:center;
}
.lb-title{ font-weight:700; color:var(--green); font-size:12px; }
.modes{ display:flex; gap:7px; width:100%; }
.modes form{ flex:1; margin:0; }
.modebtn{
  width:100%; padding:9px 4px; border-radius:11px; border:1px solid var(--line);
  background:#fff; color:var(--green); font-size:12.5px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.2;
}
.modebtn small{ font-weight:400; font-size:10px; color:var(--dim); }
.modebtn.on{ background:var(--green); border-color:var(--green); color:#f6ecd6; }
.modebtn.on small{ color:rgba(246,236,214,.8); }
.modebtn:disabled{ opacity:.42; }
.lb-now{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center; }
.lb-now b{ color:var(--green); word-break:break-all; }
.lb-note{ font-size:11px; }
.lb-more{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center; }
.lb-more form{ margin:0; }
.mini.on{ background:var(--green); color:#f6ecd6; border-color:var(--green); }
.flash{
  margin:10px 10px 0; padding:10px 12px; border-radius:11px; font-size:12.5px;
  background:#e6f0e2; border:1px solid #bcd4b6; color:#2c4a2a; word-break:break-word;
}
/* ---------------- photos page ---------------- */
.flash.bad{ background:#f7e7e2; border-color:#e0bdb2; color:#8c3a25; }
.upbox{ padding:12px 10px 0; }
.uplabel{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:20px 14px; border:2px dashed var(--line); border-radius:14px;
  background:var(--panel); color:var(--green); text-align:center;
}
.uplabel:active{ background:#f4ecdd; }
.uplabel input[type=file]{ display:none; }
.upicon{ font-size:26px; line-height:1; color:var(--gold); }
.uplabel small{ color:var(--dim); font-size:11.5px; }
.hidebtn{ display:none; }
.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px; padding:12px 10px;
}
.ph{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ph img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#111; }
.phbar{ display:flex; align-items:center; justify-content:space-between; gap:6px;
        padding:7px 8px; font-size:11px; color:var(--dim); }
.phbar form{ margin:0; }

.flashlink{
  display:inline-block; margin-top:7px; padding:7px 12px; border-radius:8px;
  background:var(--green); color:#f6ecd6; font-weight:700;
}

/* ---------------- QR ---------------- */
.qrwrap{ position:fixed; inset:0; background:rgba(20,30,26,.75); display:none;
         align-items:center; justify-content:center; z-index:50; padding:20px; }
.qrwrap.open{ display:flex; }
.qrbox{ background:#fff; border-radius:16px; padding:18px; text-align:center;
        display:flex; flex-direction:column; gap:10px; align-items:center; max-width:320px; }
.qrbox img{ width:230px; height:230px; }
.qrname{ font-weight:700; }

/* ---------------- chat screen ---------------- */
.chat-body{ background:#efe7d8; }
.chatapp{ height:100dvh; }
.chattop{ background:var(--green); }
.back{ font-size:28px; line-height:1; padding:0 6px 4px; }
.chatname{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chatname b{ font-size:16px; }
.status{ font-size:11px; opacity:.8; }

.msgs{
  flex:1; overflow-y:auto; padding:14px 12px 6px;
  display:flex; flex-direction:column; gap:7px;
  background-image:radial-gradient(rgba(199,154,60,.10) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-overflow-scrolling:touch;
}
.daystamp{ align-self:center; font-size:11px; color:#6f7d75; background:rgba(255,255,255,.75);
           padding:5px 12px; border-radius:20px; margin-bottom:6px; }
.bub{
  max-width:80%; padding:8px 11px 5px; border-radius:14px; position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.09); word-wrap:break-word; white-space:pre-wrap;
  animation:pop .16s ease-out;
}
@keyframes pop{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.bub.me{ align-self:flex-end; background:var(--mine); border-bottom-right-radius:4px; }
.bub.them{ align-self:flex-start; background:var(--theirs); border-bottom-left-radius:4px; }
.meta{ font-size:10px; color:#7d8a83; text-align:right; margin-top:2px; }
.meta .ticks{ margin-left:3px; font-weight:700; letter-spacing:-1px; }
.ticks{ color:#8b978f; }                      /* ✓  bhej diya */
.ticks.got{ color:#e03131; }                  /* ✓✓ pahunch gaya */
.ticks.read{ color:#12a150; }                 /* ✓✓ padh liya */
.bub .del{ position:absolute; top:-8px; right:-6px; background:#fff; border:1px solid var(--line);
           border-radius:50%; width:22px; height:22px; font-size:11px; display:none;
           align-items:center; justify-content:center; color:#a8452f; }
.bub.me.show .del{ display:flex; }
.typing{ align-self:flex-start; background:#fff; padding:9px 14px; border-radius:14px; }
.typing i{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#9aa8a1;
           margin:0 1px; animation:bl 1.1s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes bl{ 0%,60%,100%{ opacity:.3 } 30%{ opacity:1 } }

.composer{
  display:flex; gap:8px; align-items:flex-end; padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  background:var(--panel); border-top:1px solid var(--line);
}
.composer textarea{
  flex:1; resize:none; max-height:120px; padding:11px 14px;
  border:1px solid var(--line); border-radius:20px; outline:none; background:#fff;
}
.composer textarea:focus{ border-color:var(--green2); }
.composer button{
  width:46px; height:46px; border-radius:50%; border:0; color:#fff; font-size:19px; flex:none;
}
.composer button:active{ transform:scale(.94); }

/* guest ka options menu */
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--panel); border-top:1px solid var(--line);
  border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.22);
  padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(115%); transition:transform .22s ease;
  max-width:820px; margin:0 auto;
}
.sheet.open{ transform:none; }
.sheet form{ margin:0; }
.sheet-item{
  width:100%; text-align:left; border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:11px 13px; color:var(--ink); display:block;
}
.sheet-item b{ font-size:14.5px; font-weight:700; }
.sheet-item small{ display:block; color:var(--dim); font-size:11.5px; margin-top:1px; }
.sheet-item:active{ background:#f2ebdd; }
.sheet-item.close{ text-align:center; border:0; background:transparent; color:var(--dim);
                   font-weight:700; padding:9px; }

.okmsg{ background:rgba(90,180,120,.22); border:1px solid rgba(150,220,170,.5);
        padding:9px 12px; border-radius:10px; font-size:13px; }
.plain{ background:transparent !important; border:1px solid rgba(255,255,255,.3) !important;
        color:#f6ecd6 !important; }
.enter-btn.small-btn{ margin-top:16px; padding:11px 24px; font-size:14px; }

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:84px; z-index:60;
  background:rgba(29,58,52,.94); color:#f6ecd6; padding:9px 16px; border-radius:20px;
  font-size:13px; opacity:0; transition:opacity .25s;
}
.toast.on{ opacity:1; }

@media (min-width:700px){
  .frame{ width:300px; }
  .bub{ max-width:62%; }
}