/* --------------------------------------------------------------------------- Palette — Telegram's own, so a doira screen reads as part of the client it opens inside. Values are lifted from Telegram Desktop's shipped themes (Telegram/Resources/{day-blue,night}.tdesktop-theme) and from the themeParams a Mini App is handed; the tdesktop palette key each one comes from is named in the comment beside it. Note these are doira's own tokens, set here and never rebound at runtime to Telegram.WebApp.themeParams -- a custom Telegram theme shifts the client, not the app inside it. app.js only reads --paper back out to tint the client's header/background so the seam disappears. --------------------------------------------------------------------------- */ :root{ --paper:#FFFFFF; /* windowBg */ --card:#FFFFFF; /* raised surface; separated from --paper by --line, as Telegram's lists are */ --soft:#F1F1F1; /* windowBgOver — filled groups, segmented tracks */ --line:#E0E1E3; /* hairline, a touch lighter than windowBgRipple #E5E5E5 */ --line-2:#EDEEEF; --glow:#E8F3FB; /* the halo at the top of #app — a tint of --accent */ --txt:#000000; /* windowFg */ --dim:#707579; /* secondary text, as Telegram Web sets it */ --dim-2:#999999; /* windowSubTextFg */ --ph:rgba(0,0,0,.26); --accent:#40A7E3; /* windowBgActive — filled buttons, progress, active states */ --accent-d:#2E8FC9; /* the pressed/3d edge under --accent */ --accent-text:#168ACD; /* windowActiveTextFg — accent as *text*, dark enough to read on --card */ --on-accent:#FFFFFF; /* windowFgActive */ --danger:#D14E4E; /* attentionButtonFg */ --danger-d:#B23E3E; --ok:#4AB44A; /* boxTextFgGood */ --sel-bg:#DEF1FD; /* msgOutBg — also doira's "this group is filled in" wash */ --chip-bg:#E8F3FB; --vis-on-bg:#E9F5E9; /* Chat. Telegram's msgInBg is plain windowBg because it sits on a wallpaper; doira has none, so --chat-bg stands in for the wallpaper and the incoming bubble keeps Telegram's white. */ --chat-bg:#E7EBF0; --bub-in:#FFFFFF; --bub-out:#DEF1FD; --bub-out-fg:#000000; --vn-bg:#D7DEE5; /* the circle behind a video that hasn't loaded */ /* bare r,g,b triplets so hairlines/scrims/shadows can carry their own alpha via rgba(var(...),a) and still flip base color between themes */ --ink-rgb:0,0,0; --paper-rgb:255,255,255; --shadow-rgb:0,0,0; --accent-rgb:64,167,227; --danger-rgb:209,78,78; --ok-rgb:74,180,74; --vn:300px; /* Safe area insets kept in sync by app.js (Telegram.WebApp.safeAreaInset / contentSafeAreaInset) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* kept in sync with Telegram.WebApp.viewportStableHeight by app.js; falls back to 100dvh outside Telegram (plain browser testing) or before the first viewportChanged event */ --app-h:100dvh; /* Telegram theme fallbacks — exposed for interop only. */ --tg-link-color:#2481CC; --tg-button-color:var(--accent); --tg-button-text-color:var(--on-accent); } /* Telegram "Night". [data-theme] on is set by app.js from the user's own Kun/Tun/Avtomatik choice (see resolveTheme); the prefers-color-scheme block below only covers the first paint and out-of-Telegram testing. */ :root[data-theme="dark"]{ --paper:#17212B; /* windowBg */ --card:#26313F; /* a step above windowBgOver, so a raised panel -- and the selected pill in a .seg/.switch2 track -- reads as lifted */ --soft:#232E3C; /* windowBgOver */ --line:#303D4D; --line-2:#232E3C; --glow:#1B2C3E; --txt:#F5F5F5; /* windowFg */ --dim:#8FA0B3; --dim-2:#708499; /* windowSubTextFg */ --ph:rgba(245,245,245,.30); --accent:#5288C1; /* windowBgActive */ --accent-d:#3F6E9E; --accent-text:#6AB3F3; /* windowActiveTextFg */ --on-accent:#FFFFFF; --danger:#EC3942; /* attentionButtonFg */ --danger-d:#B92C33; --ok:#46BA43; /* historyPeer2UserpicBg2 — Telegram's green at night */ --sel-bg:#22364B; --chip-bg:#1E2E40; --vis-on-bg:#1B3020; --chat-bg:#0E1621; /* sideBarBg — Telegram's darkest night surface */ --bub-in:#182533; /* msgInBg */ --bub-out:#2B5278; /* msgOutBg */ --bub-out-fg:#FFFFFF; --vn-bg:#2A3644; --ink-rgb:245,245,245; --paper-rgb:23,33,43; --shadow-rgb:0,0,0; --accent-rgb:82,136,193; --danger-rgb:236,57,66; --ok-rgb:70,186,67; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#17212B; --card:#26313F; --soft:#232E3C; --line:#303D4D; --line-2:#232E3C; --glow:#1B2C3E; --txt:#F5F5F5; --dim:#8FA0B3; --dim-2:#708499; --ph:rgba(245,245,245,.30); --accent:#5288C1; --accent-d:#3F6E9E; --accent-text:#6AB3F3; --on-accent:#FFFFFF; --danger:#EC3942; --danger-d:#B92C33; --ok:#46BA43; --sel-bg:#22364B; --chip-bg:#1E2E40; --vis-on-bg:#1B3020; --chat-bg:#0E1621; --bub-in:#182533; --bub-out:#2B5278; --bub-out-fg:#FFFFFF; --vn-bg:#2A3644; --ink-rgb:245,245,245; --paper-rgb:23,33,43; --shadow-rgb:0,0,0; --accent-rgb:82,136,193; --danger-rgb:236,57,66; --ok-rgb:70,186,67; } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{height:100%;overflow:hidden;overscroll-behavior-y:none} body{margin:0;color:var(--txt);background:var(--paper); font-family:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:17px;line-height:1.45;overscroll-behavior:none;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased; -webkit-user-select:none;-webkit-touch-callout:none} input,textarea{-webkit-user-select:text;-webkit-touch-callout:default} button,a,[onclick]{touch-action:manipulation} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} input{font:inherit} /* height (not min-height): pins the shell to exactly Telegram's reported viewport so oversized content scrolls inside a region below (.page, .regbody, .stagewrap, .overlay, ...) instead of growing #app past the visible area and forcing the whole page to scroll. */ #app{max-width:460px;margin:0 auto;height:var(--app-h,100dvh);display:flex;flex-direction:column; position:relative;overflow:hidden;overscroll-behavior-y:none; background:radial-gradient(96% 46% at 50% 0%,var(--glow) 0%,transparent 64%),var(--paper)} .screens-wrap{position:relative;flex:1 1 0;min-height:0;width:100%;overflow:hidden} .screen{position:absolute;inset:0;display:none;flex-direction:column;width:100%;height:100%; overflow:hidden;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden} .screen.on{display:flex;z-index:2} /* Oynalar almashinuvi — silliq slayd animatsiyasi */ .slide-in-from-right{ display:flex!important;z-index:3; animation:scrSlideInRight .32s cubic-bezier(.25,1,.5,1) forwards; pointer-events:none; } .slide-out-to-left{ display:flex!important;z-index:1; animation:scrSlideOutLeft .32s cubic-bezier(.25,1,.5,1) forwards; pointer-events:none; } .slide-in-from-left{ display:flex!important;z-index:3; animation:scrSlideInLeft .32s cubic-bezier(.25,1,.5,1) forwards; pointer-events:none; } .slide-out-to-right{ display:flex!important;z-index:1; animation:scrSlideOutRight .32s cubic-bezier(.25,1,.5,1) forwards; pointer-events:none; } @keyframes scrSlideInRight{ from{transform:translate3d(100%,0,0)} to{transform:translate3d(0,0,0)} } @keyframes scrSlideOutLeft{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-100%,0,0)} } @keyframes scrSlideInLeft{ from{transform:translate3d(-100%,0,0)} to{transform:translate3d(0,0,0)} } @keyframes scrSlideOutRight{ from{transform:translate3d(0,0,0)} to{transform:translate3d(100%,0,0)} } /* doira */ .vnwrap{position:relative;width:var(--vn);height:var(--vn);margin:0 auto;flex:none} .vnwrap.md{--vn:200px} .vnwrap.sm{--vn:120px} .vnwrap.xs{--vn:66px} .vn{position:absolute;inset:6px;border-radius:50%;overflow:hidden;background:var(--vn-bg); display:grid;place-items:center} .vn video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)} #live{transform:scaleX(-1)} .vn .glyph{font-size:calc(var(--vn)/2.5);font-weight:700;letter-spacing:-.04em; color:rgba(255,255,255,.96);position:relative;z-index:2} .blobs{position:absolute;inset:-28%;filter:blur(26px)} .blob{position:absolute;width:72%;height:72%;border-radius:50%; animation:drift 9s ease-in-out infinite alternate} .blob:nth-child(2){right:0;bottom:0;animation-duration:11s;animation-direction:alternate-reverse} @keyframes drift{from{transform:translate(-8%,-6%) scale(1)}to{transform:translate(14%,10%) scale(1.18)}} .ring{position:absolute;inset:0;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:3.5;stroke-linecap:round} .ring .track{stroke:rgba(var(--ink-rgb),.10)} .ring .prog{stroke:var(--accent);stroke-dasharray:0 1000} .vnwrap.rec .ring .prog{stroke:var(--danger);stroke-dasharray:none} .vn-badge{position:absolute;bottom:0;left:50%;transform:translateX(-50%); background:var(--card);border:1px solid var(--line);border-radius:99px;padding:7px 16px; font-size:14px;font-weight:600;color:var(--dim);white-space:nowrap; box-shadow:0 2px 10px rgba(var(--shadow-rgb),.07)} .vn-badge.live{color:var(--danger);border-color:rgba(var(--danger-rgb),.32)} .vn-badge.live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--danger);margin-right:7px;vertical-align:1px;animation:pulse 1.1s infinite} @keyframes pulse{50%{opacity:.25}} .vn-sound{position:absolute;bottom:6px;right:6px;width:38px;height:38px;border-radius:50%; background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center; cursor:pointer;z-index:15;box-shadow:0 4px 14px rgba(0,0,0,.28); transition:transform .18s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,border-color .2s ease} .vn-sound:hover{transform:scale(1.08);background:rgba(0,0,0,.8)} .vn-sound:active{transform:scale(.88)} .vn-sound svg{width:19px;height:19px;display:block;pointer-events:none} .vn-sound.muted{background:rgba(var(--danger-rgb),.82);border-color:rgba(255,255,255,.35);animation:soundPulse 2.4s ease-in-out infinite} @keyframes soundPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} .vnwrap.xs .vn-sound, .vnwrap.xs2 .vn-sound, .vnwrap.sm .vn-sound{display:none} /* welcome */ #sc-welcome{align-items:center; padding:calc(36px + var(--safe-top)) 26px calc(44px + var(--safe-bottom)); text-align:center} .hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center; width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain} .aura{position:relative;display:grid;place-items:center} .aura::before,.aura::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%; border:1.5px solid rgba(var(--accent-rgb),.42);animation:halo 3.6s ease-out infinite} .aura::after{animation-delay:1.8s} @keyframes halo{from{transform:scale(.92);opacity:.8}to{transform:scale(1.4);opacity:0}} h1.brand{font-size:42px;font-weight:800;letter-spacing:-.045em;margin:8px 0 0;line-height:1;flex:none} .lede{color:var(--dim);max-width:30ch;margin:24px auto 0;font-size:17px} .kicker{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.25; margin:16px auto 0;max-width:20ch} /* tugmalar */ .btn{display:block;width:100%;padding:19px;border-radius:20px;background:var(--accent); color:var(--on-accent);font-weight:700;font-size:18px;transition:transform .12s ease; box-shadow:0 3px 0 var(--accent-d)} .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-d)} .btn.ghost{background:transparent;color:var(--dim);border:1.5px solid var(--line); font-weight:600;box-shadow:none} .btn.ghost:active{transform:scale(.98)} .btn.danger{background:transparent;color:var(--danger);border:1.5px solid rgba(var(--danger-rgb),.3);box-shadow:none} .btn.danger:active{transform:scale(.97)} .btn.danger.solid{background:var(--danger);border-color:var(--danger);color:#fff; box-shadow:0 3px 0 var(--danger-d)} .btn.danger.solid:active{transform:translateY(2px);box-shadow:0 1px 0 var(--danger-d)} .btn[disabled]{opacity:.5;pointer-events:none} .stack{display:flex;flex-direction:column;gap:11px;width:100%} .stack.two{flex-direction:row;gap:10px} .stack.two .btn{flex:1;white-space:nowrap;padding-left:8px;padding-right:8px} .stack.two .btn.ghost{flex:1} .stack.two .btn.narrow{flex:.62} .btn{display:flex;align-items:center;justify-content:center;gap:9px} .ar{width:9px;height:9px;flex:none;border-top:2.5px solid currentColor; border-right:2.5px solid currentColor;transition:transform .2s ease} .ar.next{transform:rotate(45deg)} .ar.back{transform:rotate(-135deg)} .spacer{flex:1;min-height:26px} /* anketa */ #sc-reg{padding:calc(22px + var(--safe-top)) 26px calc(38px + var(--safe-bottom))} .steps{display:flex;gap:6px;padding:8px 0 20px;flex:none} .steps i{flex:1;height:4px;border-radius:3px;background:var(--line); position:relative;overflow:hidden} .steps i::after{content:"";position:absolute;inset:0;background:var(--accent); transform:scaleX(0);transform-origin:left center; transition:transform .38s cubic-bezier(.25,1,.5,1)} .steps i.done::after{transform:scaleX(1)} .steps i.avail{cursor:pointer} .steps i.avail:hover{opacity:.8} .stepin{animation:stepin .32s cubic-bezier(.2,.9,.3,1)} .stepin-forward{animation:stepSlideFwd .32s cubic-bezier(.25,1,.5,1)} .stepin-backward{animation:stepSlideBwd .32s cubic-bezier(.25,1,.5,1)} @keyframes stepin{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes stepSlideFwd{from{opacity:0;transform:translate3d(36px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes stepSlideBwd{from{opacity:0;transform:translate3d(-36px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} .q{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.26; margin:0 auto 20px;text-align:center;max-width:19ch} .q-sub{color:var(--dim);font-size:16px;margin:-12px auto 24px;max-width:30ch; text-align:center} .regbody::-webkit-scrollbar,.rlist::-webkit-scrollbar,.clist::-webkit-scrollbar, .page::-webkit-scrollbar,.hero::-webkit-scrollbar,.stagewrap::-webkit-scrollbar, .overlay::-webkit-scrollbar{width:0;height:0} .regbody,.rlist,.clist,.page,.hero,.stagewrap,.overlay{scrollbar-width:none;-ms-overflow-style:none} .regbody{flex:1 1 0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden; min-height:0;height:0;overscroll-behavior:contain;padding:4px 6px 16px;margin:0 -6px; -webkit-mask-image:linear-gradient(#000 94%,transparent); mask-image:linear-gradient(#000 94%,transparent)} .regfoot{flex:none;padding-top:16px;padding-bottom:10px;background:var(--paper);position:relative;z-index:2} .fl{display:inline-block;width:26px;height:19px;border-radius:3px;flex:none; box-shadow:0 0 0 1px rgba(var(--ink-rgb),.14);vertical-align:-3px;background-size:cover} .grp{background:var(--soft);border-radius:18px;padding:10px 16px;margin:0 0 9px; transition:background .25s ease,box-shadow .25s ease,transform .16s ease} #placebox{margin:0} .grp:focus-within{box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.55),0 2px 8px rgba(var(--shadow-rgb),.06)} .grp.done{background:var(--sel-bg);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.5)} .grp .k{font-size:12.5px;font-weight:600;color:var(--dim-2);line-height:1.3} .grp .field,.grp .sel-btn,.grp .gsel{width:100%;background:transparent;border:0; padding:0;margin:1px 0 0;font-size:22px;font-weight:700;color:var(--txt); letter-spacing:-.02em;line-height:1.32;text-align:left;outline:none;appearance:none} .grp .field::placeholder{color:var(--ph);font-weight:700} .grp .sel-btn{display:flex;align-items:center;gap:12px;transition:transform .15s ease,opacity .15s ease} .grp .sel-btn:active{transform:scale(.98)} .grp .sel-btn.ph{color:var(--ph)} .grp .sel-btn .chev{margin-left:auto;width:9px;height:9px;flex:none; border-right:2.5px solid var(--dim);border-bottom:2.5px solid var(--dim); transform:translateY(-3px) rotate(45deg);transition:transform .25s cubic-bezier(.25,1,.5,1)} .grp .gsel{display:flex;align-items:center;gap:18px} .grp .gsel button{padding:0;font-size:22px;font-weight:700;line-height:1.32; letter-spacing:-.02em;color:var(--ph);transition:color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1)} .grp .gsel button:hover{color:var(--dim)} .grp .gsel button:active{transform:scale(.92)} .grp .gsel button[aria-pressed="true"]{color:var(--txt);transform:scale(1.04)} .grp .gsel .sep{width:5px;height:5px;border-radius:50%;background:rgba(var(--ink-rgb),.18);flex:none} .grp.open{background:var(--sel-bg);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.5)} .grp.open .sel-btn .chev{transform:translateY(2px) rotate(225deg)} .rlist{max-height:min(200px,30vh);overflow-y:auto;overscroll-behavior:contain; margin:10px -16px -4px;padding:0 16px; border-top:1px solid rgba(var(--ink-rgb),.09);animation:rlistSlideIn .25s cubic-bezier(.2,.9,.3,1)} @keyframes rlistSlideIn{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .rlist button{display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:12px 0;font-size:17.5px;font-weight:600;color:var(--dim); border-bottom:1px solid rgba(var(--ink-rgb),.07); transition:color .15s ease,transform .15s ease,background-color .15s ease} .rlist button:active{transform:scale(.98)} .rlist button:last-child{border-bottom:0} .rlist.plain{margin:10px 0 0;padding:0;border-top:1px solid var(--line-2)} .editrow{display:flex;align-items:center;gap:8px;margin-top:1px} .okbtn{width:28px;height:28px;border-radius:9px;background:var(--card); border:1px solid var(--line);color:var(--txt);display:grid;place-items:center;flex:none; transition:transform .18s cubic-bezier(.34,1.56,.64,1),background-color .18s ease,border-color .18s ease} .okbtn:hover{transform:scale(1.1);border-color:var(--accent)} .okbtn:active{transform:scale(.88);background:var(--sel-bg)} .okbtn svg{width:14px;height:14px} .rlist button[aria-selected="true"]{color:var(--accent-text);font-weight:700} .catgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .catlist,.intentlist{display:flex;flex-direction:column;gap:9px} .cat{display:flex;align-items:center;justify-content:center;background:var(--soft); border-radius:16px;min-height:56px;padding:14px 10px;font-size:16.5px;font-weight:700; letter-spacing:-.02em;line-height:1.2;color:var(--dim);text-align:center; transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .2s ease,color .2s ease} .catlist .cat,.intent{justify-content:flex-start;text-align:left;padding:16px 18px} .intent{display:flex;align-items:center;background:var(--soft); border-radius:16px;min-height:56px;font-size:16.5px;font-weight:700; letter-spacing:-.02em;line-height:1.2;color:var(--dim); transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .2s ease,color .2s ease} .cat:hover,.intent:hover{transform:translateY(-1px)} .cat:active,.intent:active{transform:scale(.93)} .cat[aria-pressed="true"],.intent[aria-pressed="true"]{background:var(--sel-bg);color:var(--accent-text); box-shadow:inset 0 0 0 2px var(--accent),0 2px 8px rgba(var(--shadow-rgb),.08);transform:none} .bio{width:100%;background:transparent;border:0;outline:none;resize:none; font-size:17px;font-weight:600;line-height:1.45;color:var(--txt);margin-top:3px; min-height:70px;font-family:inherit} .bio:focus,.bio:focus-visible{outline:none;box-shadow:none} .bio::placeholder{color:var(--ph);font-weight:600} .recwrap{position:relative;display:flex;justify-content:center;align-items:center} /* The recorder's own circle, larger than the .md default it shares with the welcome hero: this is the one you frame your face in, so it is worth the room. Stepped down on short screens so the Retake/Save buttons under it stay above the fold -- .regbody scrolls, and a control you have to scroll to find is worse than a smaller preview. */ .recwrap .vnwrap{--vn:280px} .recbar{display:flex;gap:10px;justify-content:center;margin-top:18px} .recbar button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px; padding:15px 18px;border-radius:18px;font-size:16.5px;font-weight:700; border:1.5px solid var(--line);background:var(--card);color:var(--dim); transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,filter .18s ease} .recbar button:hover{transform:translateY(-1px)} .recbar button:active{transform:translateY(2px) scale(.97)} .recbar button[disabled],.recbar button:disabled{opacity:.5;pointer-events:none;cursor:default;transform:none;box-shadow:none} .recbar button.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent); box-shadow:0 3px 0 var(--accent-d),0 4px 12px rgba(var(--shadow-rgb),.12)} .recbar button.go:hover{filter:brightness(1.04);transform:translateY(-1px); box-shadow:0 4px 0 var(--accent-d),0 6px 16px rgba(var(--shadow-rgb),.16)} .recbar button.go:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 var(--accent-d)} .recbar button.stop{background:var(--danger);border-color:var(--danger);color:#fff; box-shadow:0 3px 0 var(--danger-d),0 4px 12px rgba(var(--danger-rgb),.25)} .recbar button.stop:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 var(--danger-d)} .camico{position:relative;width:20px;height:20px;border-radius:50%; border:2px solid currentColor;flex:none} .camico::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px; border-radius:50%;background:currentColor;transform:translate(-50%,-50%)} .stopico{width:12px;height:12px;border-radius:3px;background:currentColor;flex:none; animation:recpulse 1.1s infinite} @keyframes recpulse{50%{opacity:.3}} .biocount{text-align:right;font-size:12px;font-weight:600;color:var(--dim-2);margin-top:2px} .chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:12px} .chip{padding:15px 26px;border-radius:99px;border:2px solid var(--line); font-weight:600;font-size:18px;background:var(--card); transition:transform .2s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease} .chip:hover{transform:translateY(-1px)} .chip:active{transform:scale(.93)} .chip.sm{padding:11px 18px;font-size:16px} .chip[aria-pressed="true"]{border-color:var(--accent);background:var(--chip-bg);color:var(--accent-text); box-shadow:0 3px 10px rgba(var(--accent-rgb),.2);transform:scale(1.03)} .hintlist{color:var(--dim);font-size:15px;margin:22px 0 0;padding-left:20px} .hintlist li{margin:6px 0} .err{color:var(--danger);font-size:15px;font-weight:600;min-height:22px;margin-top:10px} /* tanlash oynasi — pastdan chiquvchi silliq drawer */ .sheet{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--paper); transform:translate3d(0,100%,0);visibility:hidden; transition:transform .35s cubic-bezier(.25,1,.5,1),visibility .35s ease; will-change:transform} .sheet.on{visibility:visible;transform:translate3d(0,0,0)} .sheet-head{display:flex;align-items:center;gap:14px;padding:calc(26px + var(--safe-top)) 22px 12px} .sheet-head h3{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0} .sheet-head .x{margin-left:auto;font-size:26px;color:var(--dim);line-height:1; transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .15s ease} .sheet-head .x:hover{color:var(--txt);transform:scale(1.15)} .sheet-head .x:active{transform:scale(.85) rotate(90deg)} .searchwrap{position:relative;margin:4px 22px 8px} .searchwrap::before{content:"";position:absolute;left:16px;top:50%; width:13px;height:13px;border:2px solid var(--dim-2);border-radius:50%; transform:translateY(-60%);pointer-events:none} .searchwrap::after{content:"";position:absolute;left:27px;top:50%; width:7px;height:2px;background:var(--dim-2);border-radius:2px; transform:translateY(4px) rotate(45deg);transform-origin:left center;pointer-events:none} .csearch{width:100%;background:var(--card);border:2px solid var(--line); border-radius:16px;padding:13px 16px 13px 44px;font-size:17px;font-weight:600; color:var(--txt);outline:none;transition:border-color .2s ease,box-shadow .2s ease} .csearch:focus{border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(var(--accent-rgb),.22)} .clist{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 22px calc(38px + var(--safe-bottom))} .citem{display:flex;align-items:center;gap:14px;width:100%;padding:15px 2px; border-bottom:1px solid var(--line-2);font-size:18px;font-weight:600;text-align:left; transition:transform .18s cubic-bezier(.25,1,.5,1),color .15s ease,background-color .15s ease} .citem:active{transform:scale(.98);background:rgba(var(--ink-rgb),.03)} .citem .fl{width:32px;height:23px} .citem[aria-selected="true"]{color:var(--accent-text)} .citem[aria-selected="true"]::after{content:"✓";margin-left:auto;font-weight:800} /* koʻrish */ .topbar{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:calc(20px + var(--safe-top)) 20px 10px} .topbar .name{font-weight:800;font-size:22px;letter-spacing:-.03em} .mengamos-tab{border:none;background:var(--soft);color:var(--dim);padding:8px 16px;font-size:13.5px;font-weight:700;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s ease,color .2s ease,box-shadow .2s ease} .mengamos-tab.on{background:var(--accent-text);color:#fff;box-shadow:0 2px 8px rgba(var(--accent-rgb),.3)} .browse-tabs{display:flex;gap:8px;align-items:center} /* Uchta yorliq + filtr tugmasi tor ekranda bir qatorga sigʻishi uchun. */ @media (max-width:380px){.browse-tabs{gap:6px}.mengamos-tab{padding:8px 12px;font-size:13px}} .mengamos-bar{position:relative;flex:none;z-index:40;padding:0} /* Jins segmenti va filtr tugmasi bitta qatorda */ #topbar-filter{margin-left:auto;display:flex;align-items:center} .fbtn{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--card); border:1px solid var(--line);border-radius:99px;padding:8px 12px;color:var(--dim); transition:border-color .18s,color .18s,background-color .18s} .fbtn.on{border-color:var(--accent);color:var(--accent-text);background:var(--chip-bg)} .fbtn:active{transform:scale(.94)} .fbtn .n{background:var(--accent-text);color:#fff;border-radius:99px;min-width:18px;height:18px; padding:0 5px;font-size:11px;font-weight:800;display:grid;place-items:center} /* Kategoriyalar roʻyxati — kartaning ustiga tushadi, uni siqmaydi. */ .fscrim{position:fixed;inset:0;z-index:55} .fsheet{position:absolute;top:100%;left:16px;right:16px;z-index:60; background:var(--card);border:1px solid var(--line);border-radius:18px; padding:8px 4px;max-height:min(62vh,420px);overflow-y:auto;overscroll-behavior:contain; box-shadow:0 14px 34px rgba(var(--shadow-rgb),.22); transform-origin:top center; animation:fsheetIn .18s ease-out} /* Siljish emas — joyida ochiladi, shunda titrab koʻrinmaydi. */ @keyframes fsheetIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}} .fsec.line{border-top:1px solid var(--line-2);margin-top:5px;padding-top:9px} .fsec-k{font-size:10px;font-weight:700;color:var(--dim-2);padding:0 12px 6px} .fchips{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 6px} /* Panel ichidagi yorliqlar — ixchamroq, koʻproq qatorga sigʻadi. */ .fchips .explore-chip{padding:5px 10px;font-size:12px;border-radius:12px} /* Oyna matni — barcha o'lchovlar Fibonachchi qatoriga qo'yilgan: 8 · 13 · 21 · 34 · 55 · 89 · 144. Sarlavha/matn nisbati ≈ 1.618. */ .ovc{width:100%;max-width:377px;margin:0 auto} .ovc .match-circles{height:144px;margin-bottom:21px} .ovc .match-circles .vnwrap{--vn:144px} .overlay .ovc h2{font-size:34px;line-height:1.06;letter-spacing:-.035em; margin:0 auto 13px;max-width:13ch} .overlay .ovc p{font-size:21px;line-height:1.38;margin:0 auto 34px;max-width:21ch} .ovc .stack{gap:13px} .ovc .btn{padding:21px;border-radius:21px;font-size:17px} /* Obuna oynasi — bu yerda matn uzunroq, shuning uchun o'lchovlar ixchamroq. */ .pw{width:100%;max-width:330px;margin:0 auto} .overlay .pw h2{font-size:25px;line-height:1.18;letter-spacing:-.02em; margin:14px auto 7px;max-width:15ch} .overlay .pw p{font-size:15px;line-height:1.45;margin:0 auto;max-width:27ch} .pw-plan{margin:18px 0;text-align:left; background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 15px} .pw-plan-k{font-size:12px;font-weight:800;color:var(--accent-text);letter-spacing:-.01em} .pw-price{display:flex;align-items:baseline;gap:5px;margin:3px 0 11px} .pw-price b{font-size:22px;font-weight:800;color:var(--txt);letter-spacing:-.02em} .pw-price span{font-size:13px;color:var(--dim)} .pw-feat{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none} .pw-feat li{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.3;color:var(--dim)} .pw-feat li svg{flex:none;width:15px;height:15px;color:var(--ok)} .pw .stack{gap:9px} .pw .btn{padding:15px;font-size:16px;border-radius:16px} /* Tasdiq galochkasi — "Jins" qatorining oʻng chetida, panelning oʻz uslubida. */ .fdone{display:flex;align-items:center;justify-content:center;flex:none; margin-left:auto;width:30px;height:30px;border-radius:50%; background:var(--accent-text);color:#fff; box-shadow:0 2px 8px rgba(var(--accent-rgb),.35);transition:transform .15s} .fdone:active{transform:scale(.9)} .fdone svg{flex:none;width:17px;height:17px} /* Kategoriyalar — ikkitadan, teng kenglikda. */ .fchips.grid2{display:grid;grid-template-columns:1fr 1fr} .fchips.grid2 .explore-chip{width:100%;justify-content:center;padding:7px 8px; white-space:normal;text-align:center;line-height:1.25} .explore-sep{flex:none;width:1px;height:20px;background:var(--line)} .mengamos-chips{display:flex;gap:7px;align-items:center;padding:4px 20px 8px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch} .mengamos-chips::-webkit-scrollbar{display:none} .explore-chip{border:1px solid var(--line);background:var(--card);color:var(--dim);border-radius:99px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .18s ease;display:inline-flex;align-items:center;gap:4px;flex:none;-webkit-tap-highlight-color:transparent} .explore-chip:active{transform:scale(.95)} .explore-chip.on{background:var(--accent-text);border-color:var(--accent-text);color:#fff;box-shadow:0 2px 8px rgba(var(--accent-rgb),.3)} .stagewrap{flex:1 1 0;min-height:0;display:flex;flex-direction:column; justify-content:center;padding:4px 22px 0;overflow-y:auto;overscroll-behavior:contain} .card{position:relative;display:flex;flex-direction:column;align-items:center; animation:cardEnter .35s cubic-bezier(.2,.9,.3,1)} .card-report{position:absolute;top:0;right:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);color:var(--dim);cursor:pointer;z-index:10;transition:all .15s ease} .card-report:active{transform:scale(.92);color:var(--danger)} .overlay-report{position:absolute;top:calc(14px + var(--safe-top));right:16px;z-index:70} @keyframes cardEnter{from{opacity:0;transform:scale(.9) translate3d(0,16px,0)}to{opacity:1;transform:scale(1) translate3d(0,0,0)}} .card.leave{animation:leave .22s ease forwards} .card.leave-like{animation:leaveLike .28s cubic-bezier(.25,1,.5,1) forwards} .card.leave-pass{animation:leavePass .28s cubic-bezier(.25,1,.5,1) forwards} @keyframes leave{to{opacity:0;transform:scale(.94) translateY(-10px)}} @keyframes leaveLike{to{opacity:0;transform:translate3d(120%,0,0) rotate(16deg) scale(.94)}} @keyframes leavePass{to{opacity:0;transform:translate3d(-120%,0,0) rotate(-16deg) scale(.94)}} .who{margin-top:22px;text-align:center} .who h2{font-size:30px;font-weight:800;letter-spacing:-.04em;margin:0;line-height:1.05} .who .meta{color:var(--dim);font-size:17px;margin-top:4px} .tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px} .tag{background:var(--card);border:1px solid var(--line);border-radius:99px; padding:5px 12px;font-size:13.5px;font-weight:600;color:var(--dim);white-space:nowrap} .about-txt{color:var(--dim);font-size:16px;margin:10px auto 0;max-width:29ch;line-height:1.45} .prof-bio{color:var(--dim);font-size:16px;line-height:1.5;margin:10px auto 0; max-width:30ch;text-align:center} .likedme svg{width:17px;height:17px} .likedme{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--danger); font-size:15px;font-weight:700;background:rgba(var(--danger-rgb),.09);border-radius:99px;padding:8px 16px} .actions{display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 0 12px} .actions.two{gap:14px} /* Ikki tugma orasidagi belgi — "Moslik!" oynasidagi uchqunning kichik ko'rinishi. Bosilmaydi, shunchaki ikkala tugmani bitta boshqaruvga bogʻlaydi. */ .act-mark{flex:none;display:grid;place-items:center;color:var(--accent);pointer-events:none} .act-mark svg{display:block} .act{width:72px;height:72px;border-radius:50%;display:grid;place-items:center; background:var(--card);border:1.5px solid var(--line);font-size:28px; box-shadow:0 4px 14px rgba(var(--shadow-rgb),.1); transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,border-color .2s ease,color .2s ease} .act:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 8px 22px rgba(var(--shadow-rgb),.16)} .act:active{transform:scale(.88);box-shadow:0 2px 6px rgba(var(--shadow-rgb),.08)} .act.video{width:68px;height:68px;color:var(--accent-text);border-color:var(--accent);background:var(--card); box-shadow:0 4px 14px rgba(var(--shadow-rgb),.1)} .act.video:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 8px 22px rgba(var(--accent-rgb),.3);border-color:var(--accent)} .act.video:active{transform:scale(.88);box-shadow:0 2px 6px rgba(var(--accent-rgb),.15)} /* Ikkala tugma ham to'ldirilgan va teng o'lchamda. */ .act.love{width:72px;height:72px;background:var(--ok);border-color:var(--ok); color:#fff;box-shadow:0 5px 18px rgba(var(--ok-rgb),.32)} .act.love:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 9px 26px rgba(var(--ok-rgb),.44)} .act.love:active{transform:scale(.88);box-shadow:0 3px 10px rgba(var(--ok-rgb),.2)} #b-pass{background:var(--danger);border-color:var(--danger);color:#fff; box-shadow:0 5px 18px rgba(var(--danger-rgb),.32)} #b-pass:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 9px 26px rgba(var(--danger-rgb),.44)} #b-pass:active{transform:scale(.88);box-shadow:0 3px 10px rgba(var(--danger-rgb),.2)} .act.small{width:56px;height:56px;font-size:21px} .rejnote{background:rgba(var(--danger-rgb),.08);border:1px solid rgba(var(--danger-rgb),.25);border-radius:16px; padding:14px 16px;margin:0 0 22px;font-size:15px;line-height:1.45;text-align:left} .rejnote b{display:block;color:var(--danger);font-size:16px;margin-bottom:6px} .rejnote p{margin:0 0 6px;white-space:pre-line} .rejnote p:last-child{margin:0;color:var(--dim)} #sc-banned{justify-content:center} .empty{text-align:center;padding:40px 26px;color:var(--dim)} .empty h2{color:var(--txt);font-size:28px;font-weight:800;margin:0 0 10px;letter-spacing:-.03em} /* Moderatsiyani kutish ekrani — lenta oʻrnida chiziladi. */ .pendwrap{display:flex;flex-direction:column;align-items:center;justify-content:center; min-height:100%;padding:32px 26px} .pendwrap .vnwrap{opacity:.85} .pendwrap p{max-width:320px;margin:0 auto;font-size:15px;line-height:1.5} .pendwrap .pendnote{margin-top:12px;font-size:13px;color:var(--dim-2)} .pendwrap .stack{width:100%;max-width:320px} nav{display:flex;border-top:1px solid var(--line);background:rgba(var(--paper-rgb),.92); backdrop-filter:blur(10px);padding:12px 14px calc(18px + var(--safe-bottom))} nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0; color:var(--dim-2);font-size:12.5px;font-weight:600;position:relative;transition:color .2s ease} nav button:active{transform:scale(.94)} nav button .ic{display:block;line-height:0} nav button .ic svg{width:24px;height:24px} nav button.on{color:var(--accent-text)} nav button .dot{position:absolute;top:2px;left:calc(50% + 13px);width:9px;height:9px; border-radius:50%;background:var(--accent)} /* Son bilan: kutayotgan soʻrovlar + oʻqilmagan xabarlar. */ nav button .dot.n{width:auto;height:auto;min-width:18px;padding:1px 5px;top:-2px;left:calc(50% + 8px); border-radius:99px;color:#fff;font-size:11px;font-weight:800;line-height:16px;text-align:center; box-shadow:0 0 0 2px var(--paper)} /* ---------- ilova ichidagi yozishma ---------- */ .chat-top{display:flex;align-items:center;gap:12px;flex:none; padding:calc(10px + var(--safe-top)) 14px 10px; border-bottom:1px solid var(--line);background:rgba(var(--paper-rgb),.94); backdrop-filter:blur(10px)} .chat-back{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center; color:var(--dim);transition:background .15s,color .15s} .chat-back:hover{background:var(--soft);color:var(--txt)} .chat-back:active{transform:scale(.92)} .chat-back svg{width:22px;height:22px;display:block} .chat-who{display:flex;align-items:center;gap:12px;flex:1;min-width:0; padding:4px 8px 4px 4px;margin-left:-4px;border-radius:99px;text-align:left; transition:background-color .15s} .chat-who:hover{background:var(--soft)} .chat-who:active{transform:scale(.985)} .chat-top .who-mini{min-width:0;flex:1} .chat-top .who-mini b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chat-top .who-mini span{display:block;font-size:13px;color:var(--dim-2);margin-top:1px} .chat-top .vnwrap{flex:none} .chat-log{flex:1 1 0;min-height:0;height:0;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;gap:8px;background:var(--chat-bg); padding:18px 14px calc(14px + var(--safe-bottom))} .chat-empty{margin:auto;text-align:center;color:var(--dim);font-size:15px; line-height:1.55;max-width:26ch;padding:20px 0} .chat-empty .big{font-size:40px;margin-bottom:10px} .msg{max-width:78%;padding:10px 14px;border-radius:20px;font-size:15.5px;line-height:1.42; word-wrap:break-word;overflow-wrap:anywhere;animation:msgIn .22s ease both} @keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .msg.them{align-self:flex-start;background:var(--bub-in);border:1px solid var(--bub-in); border-bottom-left-radius:7px;color:var(--txt);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.09)} .msg.me{align-self:flex-end;background:var(--bub-out);border:1px solid var(--bub-out); border-bottom-right-radius:7px;color:var(--bub-out-fg);font-weight:500; box-shadow:0 1px 2px rgba(var(--shadow-rgb),.09)} .msg .at{display:block;font-size:11px;margin-top:4px;opacity:.6;text-align:right} .msg.typing{align-self:flex-start;display:flex;gap:4px;padding:14px} .msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--dim-2); animation:blip 1.1s infinite} .msg.typing i:nth-child(2){animation-delay:.18s} .msg.typing i:nth-child(3){animation-delay:.36s} @keyframes blip{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}} .chat-day{align-self:center;font-size:12px;font-weight:700;color:var(--dim-2); background:var(--soft);border-radius:99px;padding:4px 12px;margin:6px 0} /* Yozish maydoni ustida: javob chizigʻi va "Telegram ulashish". */ .chat-extra{flex:none;display:flex;flex-direction:column;align-items:center;padding:0 12px 2px} .tgshare{display:inline-flex;align-items:center;gap:7px; background:var(--card);border:1px solid var(--line);border-radius:99px; padding:7px 15px;font-size:13px;font-weight:700;color:var(--dim); transition:color .16s,border-color .16s,background-color .16s} .tgshare:hover{color:var(--accent-text);border-color:var(--accent)} .tgshare:active{transform:scale(.96)} .tgshare svg{flex:none} .btn.tgcontact{display:flex;align-items:center;justify-content:center;gap:8px} .chat-bar{flex:none;display:flex;align-items:flex-end;gap:9px; padding:10px 12px calc(12px + var(--safe-bottom)); border-top:1px solid var(--line);background:rgba(var(--paper-rgb),.94); backdrop-filter:blur(10px)} .chat-input{flex:1 1 0;min-width:0;resize:none;max-height:132px; background:var(--card);border:1.5px solid var(--line); border-radius:22px;padding:12px 16px;font:inherit;font-size:16px;line-height:1.35;color:var(--txt); outline:none;transition:border-color .15s} .chat-input::placeholder{color:var(--ph)} .chat-input:focus{border-color:var(--accent)} .chat-send{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--accent);color:var(--on-accent);box-shadow:0 3px 0 var(--accent-d); transition:transform .15s,opacity .15s} .chat-send:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-d)} .chat-send:disabled{opacity:.42;box-shadow:none} .chat-send svg{width:21px;height:21px;display:block} .chat-more{align-self:center;color:var(--dim-2);font-weight:800;letter-spacing:.2em;padding:2px 0} .msg.pending{opacity:.6} /* ---- Javob berish (reply) ---- The quote inside a bubble, and the strip above the input that shows what the message being typed answers. */ .msg{position:relative;transition:transform .18s cubic-bezier(.2,.8,.3,1)} .msg .qt{display:block;width:100%;text-align:left;margin:-2px 0 6px;padding:6px 9px; border-radius:11px;border-left:3px solid currentColor;background:rgba(var(--shadow-rgb),.07); font:inherit;line-height:1.3;overflow:hidden} .msg.me .qt{background:rgba(255,255,255,.17)} .msg .qt:active{transform:scale(.985)} .msg .qw{display:block;font-size:12px;font-weight:800;opacity:.85} .msg .qx{display:block;font-size:13px;opacity:.72;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .msg.flash{animation:msgFlash 1s ease} @keyframes msgFlash{0%,100%{box-shadow:0 1px 2px rgba(var(--shadow-rgb),.09)} 30%{box-shadow:0 0 0 3px var(--accent)}} .chat-reply{display:none;align-items:center;gap:9px;width:100%;margin-bottom:8px; padding:8px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line); animation:msgIn .18s ease both} .chat-reply.on{display:flex} .chat-reply .ra{flex:none;width:18px;height:18px;color:var(--accent-text)} .chat-reply .ra svg{width:18px;height:18px;display:block} .chat-reply .rb{flex:1;min-width:0;border-left:3px solid var(--accent);padding-left:9px} .chat-reply .qw{display:block;font-size:12px;font-weight:800;color:var(--accent-text)} .chat-reply .qx{display:block;font-size:13.5px;color:var(--dim);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .chat-reply .rx{flex:none;width:28px;height:28px;border-radius:50%;display:grid; place-items:center;color:var(--dim-2);background:var(--soft)} .chat-reply .rx svg{width:15px;height:15px;display:block} .chat-reply .rx:active{transform:scale(.92)} .chat-closed{flex:1;text-align:center;color:var(--dim);font-size:15px;padding:12px 8px} .page{flex:1 1 0;min-height:0;height:0;overflow-y:auto;overscroll-behavior:contain; padding:calc(26px + var(--safe-top)) 24px calc(36px + var(--safe-bottom))} .page h2.title{font-size:32px;font-weight:800;letter-spacing:-.04em;margin:0 0 6px} .page .sub{color:var(--dim);font-size:16px;margin:0 0 24px} .seg{display:flex;background:var(--soft);border-radius:99px;padding:4px;margin-bottom:18px;position:relative} .seg button{flex:1;min-width:0;padding:10px 4px;border-radius:99px;font-size:13.5px;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:var(--dim-2);position:relative;z-index:2;transition:color .25s ease,transform .15s ease} @media (max-width:380px){.seg button{font-size:12.5px}} .seg button:active{transform:scale(.96)} .seg button.on{color:var(--txt);font-weight:700} /* Kengligi JS'da o'lchanadi — tablar endi turli kenglikda. */ .seg-pill{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:99px; background:var(--card);box-shadow:0 2px 6px rgba(var(--shadow-rgb),.12); transition:left .3s cubic-bezier(.25,1,.5,1),width .3s cubic-bezier(.25,1,.5,1);z-index:1} .seg button.narrow{flex:0 0 auto;padding-left:13px;padding-right:13px} .seg button.narrow svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px} .seg-content{animation:segFadeIn .28s cubic-bezier(.25,1,.5,1)} @keyframes segFadeIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .seg .n{font-size:12px;opacity:.65;margin-left:3px} .mini{display:flex;gap:8px;flex:none} .mini button{width:40px;height:40px;border-radius:50%; border:1.5px solid rgba(var(--danger-rgb),.38);background:rgba(var(--danger-rgb),.07); font-size:17px;color:var(--danger);display:grid;place-items:center; transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease, border-color .18s ease,background-color .18s ease} .mini button:hover{border-color:var(--danger);background:rgba(var(--danger-rgb),.14)} .mini button:hover{transform:scale(1.12);box-shadow:0 3px 10px rgba(var(--shadow-rgb),.12)} .mini button:active{transform:scale(.88)} .mini button svg{width:19px;height:19px} .halo2{position:relative} .halo2::after{content:"";position:absolute;inset:-6px;border-radius:50%; border:2px solid currentColor;animation:halo2 2s ease-out infinite;pointer-events:none} .mini button.love{color:#fff} .mini button.love.halo2::after{border-color:var(--ok)} .mini button.sent.halo2::after{border-color:var(--ok)} @keyframes halo2{0%,100%{opacity:.22;transform:scale(.92)}50%{opacity:.8;transform:scale(1.14)}} .mini button.love{background:var(--ok);border-color:var(--ok);color:#fff} .mini button.sent{background:var(--ok);border-color:var(--ok);color:#fff} /* Oʻqilmagan xabar — qatordagi raqam va qalinroq yozuv. */ .unread{flex:none;display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px; border-radius:99px;background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:800} .row.has-unread .rname{font-weight:800} .msgline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bdg{font-size:12px;font-weight:700;border-radius:99px;padding:4px 10px;flex:none} .bdg.m{display:inline-flex;align-items:center;gap:5px;background:var(--ok);color:#fff; box-shadow:0 2px 6px rgba(var(--ok-rgb),.32)} .bdg.m svg{width:11px;height:11px} .bdg.w{background:var(--soft);color:var(--dim-2)} .bdg.x{background:rgba(var(--danger-rgb),.12);color:var(--danger)} .seg .nw{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px; border-radius:99px;background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:800; margin-left:5px;vertical-align:1px} .msgprev{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msgprev .q{color:var(--accent-text);font-weight:800;flex:none} .switch2{display:flex;gap:6px;background:var(--soft);border-radius:99px;padding:3px; margin:22px auto 0;width:fit-content} .switch2{width:100%;max-width:300px} .switch2 button{flex:1;padding:9px 8px;border-radius:99px;font-size:13.5px;font-weight:600; color:var(--dim-2);white-space:nowrap;transition:transform .15s ease,color .2s ease,background-color .2s ease} .switch2 button:active{transform:scale(.96)} .switch2 button.on{background:var(--card);color:var(--txt);font-weight:700; box-shadow:0 1px 4px rgba(var(--shadow-rgb),.12)} .row{display:flex;align-items:center;gap:14px;background:var(--card); border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:9px; transition:transform .2s cubic-bezier(.25,1,.5,1),box-shadow .2s ease,border-color .2s ease; animation:rowEnter .3s cubic-bezier(.2,.9,.3,1) backwards} @keyframes rowEnter{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .row:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(var(--shadow-rgb),.07)} .row .rname{font-weight:700;font-size:19px;letter-spacing:-.02em} .row .rmeta{color:var(--dim);font-size:15px} .row .grow{flex:1;min-width:0} .pill{background:var(--accent);color:var(--on-accent);font-weight:700;font-size:15px;padding:11px 20px; border-radius:99px;box-shadow:0 2px 0 var(--accent-d),0 3px 8px rgba(var(--shadow-rgb),.1); transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,filter .18s ease} .pill:hover{filter:brightness(1.04);transform:translateY(-1px) scale(1.02); box-shadow:0 3px 0 var(--accent-d),0 6px 14px rgba(var(--shadow-rgb),.15)} .pill:active{transform:translateY(2px) scale(.96);box-shadow:0 0 0 var(--accent-d)} .me-head{display:flex;flex-direction:column;align-items:center;padding:8px 0 22px} .me-head h2{font-size:32px;font-weight:800;letter-spacing:-.04em;margin:22px 0 2px} .me-head .meta{color:var(--dim);font-size:18px} .dl{border-top:1px solid var(--line-2)} .dl .item{display:flex;justify-content:space-between;gap:16px;padding:16px 0; border-bottom:1px solid var(--line-2);align-items:center} .dl .k{color:var(--dim);font-size:16px;flex:none} .dl .v{font-weight:700;text-align:right;overflow-wrap:anywhere;font-size:17px} .dl .v.edit{color:var(--accent-text);cursor:pointer} .vids{display:flex;gap:10px;justify-content:center;margin:4px 0 2px} .vids>div{position:relative;text-align:center;flex:1;min-width:0;max-width:106px; transition:transform .2s cubic-bezier(.34,1.56,.64,1);cursor:pointer} .vids>div:active{transform:scale(.95)} .vnwrap.xs2{--vn:92px;cursor:pointer;margin:0 auto} .vids .pick-on .vn{box-shadow:0 0 0 3px var(--ok)} .tick{position:absolute;right:0;bottom:30px;width:26px;height:26px;border-radius:50%; background:var(--ok);color:#fff;display:grid;place-items:center;z-index:3; border:2px solid var(--paper);box-shadow:0 2px 8px rgba(var(--ok-rgb),.35); animation:tickPop .35s cubic-bezier(.34,1.56,.64,1) forwards} @keyframes tickPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}} .tick svg{width:13px;height:13px} .vids .cap2{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--dim-2)} .vidnote{margin:14px auto 0;max-width:300px;text-align:center;font-size:12px; line-height:1.45;color:var(--dim-2)} /* Obunasiz yopiq slot: bosilsa paywall chiqadi, shuning uchun soʻnik. */ .vids>div.vlocked .vnwrap{opacity:.55} .vids>div.vlocked .cap2{color:var(--dim-2);opacity:.7} .editdot{position:absolute;top:0;right:0;width:28px;height:28px;border-radius:50%; background:var(--card);border:1px solid var(--line);display:grid;place-items:center; box-shadow:0 2px 8px rgba(var(--shadow-rgb),.12);z-index:3; transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease} .editdot:hover{transform:scale(1.12);box-shadow:0 3px 12px rgba(var(--shadow-rgb),.18)} .editdot:active{transform:scale(.9)} .editdot .pen{width:14px;height:14px;opacity:.7} .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;align-items:start} .mcell{position:relative;background:var(--soft);border-radius:16px;padding:10px 14px;min-width:0; transition:transform .2s cubic-bezier(.25,1,.5,1),background-color .2s ease,box-shadow .2s ease;cursor:pointer} .mcell:hover{background:var(--line-2)} .mcell.dd{z-index:20;border-radius:16px 16px 0 0} .mcell.wide.dd{border-radius:16px} .ddown{position:absolute;left:0;right:0;top:100%;background:var(--soft); border-radius:0 0 16px 16px;padding:0 14px 10px;z-index:20; box-shadow:0 16px 32px rgba(var(--shadow-rgb),.18); animation:ddownIn .25s cubic-bezier(.2,.9,.3,1) forwards;transform-origin:top center} @keyframes ddownIn{from{opacity:0;transform:scaleY(.9) translateY(-6px)}to{opacity:1;transform:scaleY(1) translateY(0)}} .mcell.wide.dd .ddown{position:static;left:auto;right:auto;top:auto;background:transparent; box-shadow:none;padding:12px 0 2px;border-radius:0;animation:none} .ddown .rlist.plain{margin:0;max-height:230px} .mcell.wide.dd .ddown .rlist.plain{max-height:220px} #mepage{padding-bottom:calc(110px + var(--safe-bottom))} .mcell-head{min-width:0} .mtext{width:100%;border:0;border-bottom:2px solid var(--accent);background:transparent; font:inherit;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--txt); line-height:1.45;padding:2px 0 6px;margin-top:2px;outline:none;resize:none; font-family:inherit;min-height:64px;box-shadow:none;-webkit-appearance:none;appearance:none; -webkit-tap-highlight-color:transparent;overflow-y:auto} .mtext:focus,.mtext:focus-visible{outline:none!important;box-shadow:none!important;border:0!important;border-bottom:2px solid var(--accent)!important} .mcell.wide,.mcell.open{grid-column:1/-1} .mcell.open{background:var(--card);box-shadow:0 4px 16px rgba(var(--shadow-rgb),.1)} .mcell .ck{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600; color:var(--dim-2);line-height:1.3} .mcell .ck .pen{width:13px;height:13px;margin-left:auto} .gopt{font-size:17.5px;font-weight:700;letter-spacing:-.02em;color:var(--ph);padding:0} .gopt.on{color:var(--txt)} .gdot{display:inline-block;width:4px;height:4px;border-radius:50%; background:rgba(var(--ink-rgb),.2);margin:0 9px;vertical-align:3px} .csearch2{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:12px; padding:9px 12px;font:inherit;font-size:15px;font-weight:600;color:var(--txt); outline:none;margin-top:8px} .tagok{display:flex;justify-content:flex-end;margin-top:10px} .mcell .cv{font-size:17.5px;font-weight:700;letter-spacing:-.02em;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mcell.open .cv{white-space:normal} .mrow{border-bottom:1px solid var(--line-2);padding:13px 0} .mrow .top{display:flex;align-items:center;gap:12px} .mrow .lbl{color:var(--dim);font-size:15px} .mrow .val{margin-left:auto;font-weight:700;font-size:16px;text-align:right; overflow-wrap:anywhere} .mrow .val.acc{color:var(--accent-text)} .minp{flex:1;min-width:0;border:0;border-bottom:2px solid var(--accent);background:transparent; font:inherit;font-size:17.5px;font-weight:700;letter-spacing:-.02em;color:var(--txt); padding:0 0 2px;font-family:inherit;resize:none} .minp:focus,.minp:focus-visible{outline:none;box-shadow:none} .pen{width:16px;height:16px;flex:none;color:var(--dim-2);opacity:.6} .mchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .mchip{padding:9px 15px;border-radius:99px;border:1.5px solid var(--line);background:var(--card); font-size:15px;font-weight:600;color:var(--dim); transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,background-color .2s ease,color .2s ease} .mchip:active{transform:scale(.93)} .mchip[aria-pressed="true"]{border-color:var(--accent);background:var(--chip-bg);color:var(--accent-text);transform:scale(1.03)} .sw{display:inline-block;width:48px;height:28px;border-radius:99px; background:var(--line);position:relative;flex:none;vertical-align:middle; transition:background-color .25s cubic-bezier(.25,1,.5,1);cursor:pointer} .sw[aria-pressed="true"]{background:var(--ok)} .sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%; background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform .28s cubic-bezier(.34,1.56,.64,1)} .sw[aria-pressed="true"]::after{transform:translateX(20px)} .vis{display:flex;align-items:center;gap:12px;border-radius:16px;padding:13px 15px; margin-top:12px;background:var(--vis-on-bg); transition:background .25s ease,transform .2s cubic-bezier(.34,1.56,.64,1);cursor:pointer} .vis:active{transform:scale(.98)} .vis.off{background:var(--soft)} .vis .ic{width:36px;height:36px;border-radius:50%;background:var(--ok);color:#fff; display:grid;place-items:center;flex:none} .vis.off .ic{background:var(--dim-2)} .vis .ic svg{width:17px;height:17px} .vis .tx{flex:1;min-width:0} .vis .t1{font-size:15.5px;font-weight:700;letter-spacing:-.01em} .vis .t2{font-size:13px;color:var(--dim)} .note{color:var(--dim-2);font-size:13.5px;line-height:1.5;margin-top:22px} /* Mavzu — Kun / Tun / Avtomatik. Same filled block as an .mcell, with the segmented pill from .switch2 riding inside it; the track goes transparent so the block's own fill shows through and only the chosen pill lifts. */ .themebox{display:block;border-radius:16px;padding:11px 15px 12px;margin-top:12px;background:var(--soft)} .themebox .ck{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600; color:var(--dim-2);line-height:1.3;margin-bottom:9px} .themebox .ck svg{width:13px;height:13px;flex:none} .themebox .switch2{width:100%;max-width:none;margin:0;padding:0;gap:6px;background:transparent} .themebox .switch2 button{padding:9px 6px;color:var(--dim)} .themebox .switch2 button.on{background:var(--card);color:var(--txt); box-shadow:0 1px 4px rgba(var(--shadow-rgb),.12)} /* Profildagi obuna bo'limi — "Ko'rinyapti" kartasi bilan bir uslubda. */ .subrow{display:flex;align-items:center;gap:12px;border-radius:16px;padding:13px 15px; margin-top:18px;background:var(--chip-bg)} .subrow .ic{width:36px;height:36px;border-radius:50%;color:#fff; background:linear-gradient(140deg,var(--accent),var(--accent-d)); box-shadow:0 2px 8px rgba(var(--accent-rgb),.38); display:grid;place-items:center;flex:none} .subrow .ic svg{width:17px;height:17px} .subrow .tx{flex:1;min-width:0} .subrow .t1{font-size:15.5px;font-weight:700;letter-spacing:-.01em} .subrow .t2{display:block;font-size:13px;color:var(--dim)} .subbtn{flex:none;padding:9px 14px;border-radius:12px;font-size:13.5px;font-weight:700; background:var(--accent-text);color:#fff;transition:transform .15s} .subbtn.off{background:transparent;color:var(--danger);border:1.5px solid var(--danger)} .subbtn:active{transform:scale(.95)} .subrow.tap{cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1)} .subrow.tap:active{transform:scale(.98)} .subrow .chev{flex:none;color:var(--accent-text);display:grid;place-items:center} .overlay{position:absolute;inset:0;background:rgba(var(--paper-rgb),.96);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);display:grid;place-items:safe center;overflow-y:auto;overscroll-behavior:contain; z-index:60;padding:calc(38px + var(--safe-top)) 30px calc(46px + var(--safe-bottom)); text-align:center;opacity:0;visibility:hidden;transform:scale(1.02); transition:opacity .28s ease,transform .28s cubic-bezier(.25,1,.5,1),visibility .28s ease} .overlay.on{opacity:1;visibility:visible;transform:scale(1)} .overlay.on > div{animation:overlayContentIn .38s cubic-bezier(.2,.9,.3,1) forwards} @keyframes overlayContentIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}} .match-circles{display:flex;justify-content:center;align-items:center;height:170px;position:relative;width:100%} .match-circles .vnwrap{--vn:140px;position:absolute;left:50%;top:50%;margin:0} .match-circles .a{animation:slideA .7s cubic-bezier(.3,1.4,.5,1) forwards} .match-circles .b{animation:slideB .7s cubic-bezier(.3,1.4,.5,1) forwards} .match-circles .single{animation:slideSingle .7s cubic-bezier(.3,1.4,.5,1) forwards} @keyframes slideA{from{transform:translate(-50%,-50%) translateX(-150px);opacity:0}to{transform:translate(-50%,-50%) translateX(-50px);opacity:1}} @keyframes slideB{from{transform:translate(-50%,-50%) translateX(150px);opacity:0}to{transform:translate(-50%,-50%) translateX(50px);opacity:1}} @keyframes slideSingle{from{transform:translate(-50%,-50%) scale(.7);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}} .match-heart{position:absolute;left:50%;top:50%;z-index:5;width:46px;height:46px;opacity:0; border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center; box-shadow:0 3px 14px rgba(0,0,0,.3); animation:pop .5s cubic-bezier(.2,1.6,.4,1) .55s forwards} @keyframes pop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1);opacity:1}} .overlay h2{font-size:38px;font-weight:800;letter-spacing:-.04em;margin:28px 0 8px} .overlay p{color:var(--dim);margin:0 0 30px;max-width:26ch;font-size:17px} .bioclip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;cursor:pointer} .biomodal{position:absolute;inset:0;display:grid;place-items:safe center;overflow-y:auto; overscroll-behavior:contain;padding:calc(28px + var(--safe-top)) 24px calc(32px + var(--safe-bottom));z-index:75; background:rgba(0,0,0,.44);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease} .biomodal.on{opacity:1;visibility:visible} .biobox{background:var(--card);border-radius:24px;padding:22px 20px 18px;width:100%; max-width:320px;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.3); transform:scale(.88) translateY(18px);transition:transform .3s cubic-bezier(.34,1.4,.64,1)} .biomodal.on .biobox{transform:scale(1) translateY(0)} .biobox .bt2{font-size:12.5px;font-weight:700;color:var(--dim-2);margin-bottom:8px} .biobox .bx{font-size:16.5px;line-height:1.5;color:var(--txt);max-height:46vh;overflow-y:auto} .biobox .bc{margin-top:18px;width:100%;padding:13px;border-radius:15px;background:var(--soft); font-weight:700;font-size:15px;color:var(--dim);transition:transform .16s ease,background-color .16s ease} .biobox .bc:active{transform:scale(.96);background:var(--sel-bg)} /* "Profilni koʻrish" havolasi (karta va doʻstlik oynasi) va toʻliq profil oynasi */ .proflink{border:none;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent-text);cursor:pointer} .prof-meta{margin-top:4px;color:var(--dim);font-size:15px} .fullprof .fp-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .fullprof .fp-head .vnwrap{margin:0} .fullprof .fp-name{font-size:20px;font-weight:800;letter-spacing:-.02em} .fullprof .fp-sub{font-size:14px;color:var(--dim)} .fullprof .fp-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .fullprof .fp-row{display:flex;justify-content:space-between;gap:12px;font-size:15px; padding-bottom:8px;border-bottom:1px solid var(--line)} .fullprof .fp-k{color:var(--dim-2);font-weight:600} .fullprof .fp-v{font-weight:700;text-align:right} .fullprof .tags{margin:0 0 4px} .fullprof .bx{max-height:30vh} .fullprof .fp-acts{display:flex;gap:10px} .fullprof .fp-acts .bc{flex:1} .fullprof .fp-report{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--danger,#d9534f)} .confirm .biobox{text-align:center;padding:26px 20px 20px} .confirm .cmsg{font-size:17px;font-weight:700;line-height:1.45;color:var(--txt);letter-spacing:-.01em} .confirm .crow{display:flex;gap:10px;margin-top:22px} .confirm .crow button{flex:1;padding:14px;border-radius:15px;font-weight:700;font-size:15.5px; transition:transform .16s ease,background-color .16s ease} .confirm .crow button:active{transform:scale(.96)} .confirm .cno{background:var(--soft);color:var(--dim)} .confirm .cyes{background:var(--danger);color:#fff} /* Shikoyat oynasi — izoh yozish uchun. */ .report .biobox{text-align:left;padding:22px 20px 18px} .report .rt{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--txt)} .report .rs{margin:8px 0 14px;font-size:14px;line-height:1.45;color:var(--dim)} .report .rnote{width:100%;resize:none;background:var(--soft);border:1.5px solid var(--line); border-radius:15px;padding:12px 14px;font:inherit;font-size:15.5px;line-height:1.4; color:var(--txt);outline:none;transition:border-color .15s} .report .rnote::placeholder{color:var(--ph)} .report .rnote:focus{border-color:var(--accent)} .report .crow{margin-top:16px} .report .cyes{background:var(--accent);color:var(--on-accent)} .toast{position:absolute;left:50%;bottom:calc(112px + var(--safe-bottom));transform:translate3d(-50%,20px,0) scale(.92); background:var(--txt);color:var(--paper);border-radius:18px;padding:14px 22px; font-size:15.5px;font-weight:600;opacity:0;pointer-events:none; transition:opacity .28s cubic-bezier(.25,1,.5,1),transform .28s cubic-bezier(.34,1.56,.64,1); z-index:95;max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(var(--shadow-rgb),.24)} .toast.on{opacity:1;transform:translate3d(-50%,0,0) scale(1)} /* Jonli xabar: "Aziz sizga doʻstlik soʻrovi yubordi" — tepada, bosiladigan. */ .livenote{position:fixed;left:50%;top:calc(12px + var(--safe-top));transform:translate3d(-50%,-16px,0) scale(.96); background:var(--card);color:var(--txt);border-radius:16px;padding:13px 18px; font-size:15px;font-weight:700;opacity:0;pointer-events:none;cursor:pointer; transition:opacity .25s cubic-bezier(.25,1,.5,1),transform .3s cubic-bezier(.34,1.56,.64,1); z-index:96;width:max-content;max-width:calc(100vw - 32px);text-align:center; box-shadow:0 10px 28px rgba(var(--shadow-rgb),.22);border:1px solid var(--line)} .livenote.on{opacity:1;pointer-events:auto;transform:translate3d(-50%,0,0) scale(1)} /* Doira PRO: profile card and pay sheet (pay.js) */ .procard{display:flex;align-items:center;gap:12px;border-radius:16px;padding:13px 15px;margin-top:12px; background:var(--chip-bg);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.45);cursor:pointer; transition:transform .2s cubic-bezier(.34,1.56,.64,1)} .procard:active{transform:scale(.98)} .procard.static{cursor:default;margin-top:0} .procard.static:active{transform:none} .procard .pc-ic{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent); display:grid;place-items:center;flex:none;font-size:18px;font-weight:800} .procard .tx{flex:1;min-width:0} .procard .t1{font-size:15.5px;font-weight:700;letter-spacing:-.01em} .procard .t2{display:block;font-size:13px;color:var(--dim)} .procard .pc-cta{flex:none;font-size:13.5px;font-weight:700;color:var(--accent-text)} .paybody{flex:1 1 0;overflow-y:auto;overscroll-behavior:contain; padding:4px 22px calc(28px + var(--safe-bottom));scrollbar-width:none} .paybody::-webkit-scrollbar{width:0;height:0} .pay-lede{color:var(--dim);font-size:15.5px;margin:0 0 16px} .pay-note{color:var(--dim);font-size:13.5px;line-height:1.5;margin:4px 2px 14px} .pay-test{font-size:13px;font-weight:700;color:var(--accent-text);margin:-8px 0 14px} .pay-h{font-size:12.5px;font-weight:700;color:var(--dim-2);margin:18px 2px 8px} .pay-h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:4px 0 8px} .plans{display:flex;flex-direction:column;gap:9px} .plan{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-radius:16px; padding:13px 15px;background:var(--soft);transition:background .2s ease,box-shadow .2s ease,transform .15s ease} .plan:active{transform:scale(.98)} .plan.on{background:var(--sel-bg);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.55)} .plan .pl-radio{width:20px;height:20px;border-radius:50%;flex:none;border:2px solid var(--dim-2); transition:border-color .2s ease,box-shadow .2s ease} .plan.on .pl-radio{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--sel-bg),inset 0 0 0 10px var(--accent)} .plan .tx{flex:1;min-width:0} .plan .t1{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em} .plan .t2{display:block;font-size:12.5px;color:var(--dim)} .plan .pl-price{flex:none;font-size:16px;font-weight:800;letter-spacing:-.02em} .plan .pl-price small{font-size:12px;font-weight:600;color:var(--dim)} .paysection{margin-top:16px} .paysection .grp .field,.paybody .grp .field.otp{font-variant-numeric:tabular-nums} .paybody .grp .field.otp{text-align:center;letter-spacing:.3em;font-size:26px} .paybody > .btn + .btn,.paybody > .btn + .pay-note + .btn{margin-top:11px} .provs{display:flex;flex-direction:column;gap:9px} .prov{display:flex;align-items:center;gap:12px;width:100%;border-radius:16px;padding:12px 15px; background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);text-align:left; transition:transform .15s ease,background .2s ease} .prov:active{transform:scale(.98);background:var(--soft)} .prov img{width:32px;height:32px;border-radius:9px;object-fit:contain;flex:none;background:#fff} .prov .pv-n{flex:1;font-size:16px;font-weight:700} .prov .pv-p{font-size:14px;font-weight:700;color:var(--dim)} .prov .ar{color:var(--dim-2)} /* A provider whose gateway isn't answering: still recognisable, visibly not ready. Dimmed rather than hidden, and inert rather than tappable. */ .prov.off{opacity:.45;box-shadow:inset 0 0 0 1.5px var(--line-2);cursor:default} .prov.off:active{transform:none;background:var(--card)} .prov.off img{filter:grayscale(1)} .pay-box{border-radius:16px;padding:13px 15px;background:var(--soft)} .pay-box .t1{font-size:15px;font-weight:700} .pay-box .t2{font-size:13.5px;color:var(--dim);margin-top:2px} .pay-wait{text-align:center;padding:28px 0 18px} .pay-wait .pay-lede{max-width:30ch;margin:0 auto} .spin{display:inline-block;width:34px;height:34px;border-radius:50%; border:3px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media (max-width:400px){:root{--vn:min(300px, calc(100vw - 60px))}} /* Past ekranlarda doira endi 230/190px'ga zinapoya boʻlib tushmaydi — ilova balandligiga qarab silliq kichrayadi va 240px'dan kichik boʻlmaydi ("doira kichkina boʻlib qolgan"). Joyni atrofdagi boʻshliqlar beradi. */ @media (max-height:740px){ :root{--vn:clamp(250px, calc(var(--app-h, 100dvh) * .42), 290px)} .recwrap .vnwrap{--vn:240px} .topbar{padding-top:calc(14px + var(--safe-top));padding-bottom:6px} .who{margin-top:14px} .who h2{font-size:26px} .tags{margin-top:8px;gap:5px} .tag{padding:4px 10px;font-size:12.5px} .actions{padding:14px 0 8px;gap:14px} .actions.two{gap:12px} .act-mark svg{width:17px;height:17px} .act{width:62px;height:62px;font-size:24px} .act.video{width:62px;height:62px} .act.love{width:62px;height:62px} } @media (max-height:650px){ :root{--vn:clamp(240px, calc(var(--app-h, 100dvh) * .42), 262px)} .recwrap .vnwrap{--vn:210px} .topbar{padding:calc(10px + var(--safe-top)) 16px 6px} .who{margin-top:8px} .who h2{font-size:22px} .who .meta{font-size:14px} .about-txt{margin-top:4px;font-size:13px} .tags{margin-top:6px;gap:4px} .tag{padding:3px 9px;font-size:11.5px} .actions{padding:10px 0 6px;gap:10px} .actions.two{gap:10px} .act-mark svg{width:15px;height:15px} .act{width:54px;height:54px;font-size:20px} .act.video{width:54px;height:54px} .act.love{width:54px;height:54px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} :focus-visible{outline:2px solid var(--accent-text);outline-offset:3px} .field:focus,.field:focus-visible, .chat-input:focus,.chat-input:focus-visible, .csearch:focus,.csearch:focus-visible{outline:none} /* ===================================================================== YOZISHMA — qayta ishlangan (chat.js) Appended last on purpose: everything here refines the chat rules further up rather than replacing them, so the two can be read in order. ===================================================================== */ /* The log and the "jump to the newest" button share a positioned box, so the button can float over the conversation without the screen itself needing a position (which would break the slide transitions). */ .chat-logwrap{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column} .chat-log{position:relative;gap:0;padding:14px 12px calc(10px + var(--safe-bottom)); -webkit-overflow-scrolling:touch} /* Spacing is per-bubble now, not a flex gap: a run of messages from the same person within a few minutes closes up into one block. */ .msg{margin-top:8px;max-width:80%;display:flex;flex-direction:column;align-items:stretch} .msg.typing{flex-direction:row} .msg.grouped{margin-top:2px} .msg.them{border-bottom-left-radius:20px} .msg.them.tail{border-bottom-left-radius:7px} .msg.me{border-bottom-right-radius:20px} .msg.me.tail{border-bottom-right-radius:7px} /* Rows painted in one go when a chat opens do not animate in -- otherwise the whole history flutters every time the screen is entered. */ .msg.noanim{animation:none} .msg .tx{display:inline} /* The time and its ticks live on their own row along the bottom of the bubble, hard right, and inside the bubble's padding on every side. They used to float into the last line of text: on a one-line message that left them stranded halfway up, and on a full last line they ended up jammed against the edge. Reactions share the row, on the left, and the auto margin keeps the time pinned right whether they are there or not. */ .msg .tx{display:block} .msg .mt{display:flex;align-items:center;gap:8px;margin-top:5px} .msg .at{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:1px; font-size:11px;line-height:1;opacity:.6} .msg .tkw{display:inline-flex;margin-left:3px} .msg .tkw svg{width:17px;height:11px;display:block} .msg .tkw.sent{opacity:.9} /* Two ticks read at a glance only if they are a different colour from one. */ .msg .tkw.seen{color:var(--ok);opacity:1} .msg .tkw.failed{color:var(--danger);opacity:1} .msg .tkw.sending{opacity:.75} .msg.pending{opacity:.62} .msg.failed{opacity:.9;cursor:pointer; box-shadow:inset 0 0 0 1.5px rgba(var(--danger-rgb),.5)} .msg.failed .at{opacity:1;color:var(--danger)} /* Links inside a bubble. Escaped first, then matched, so the underline can never be the thing that smuggles markup in. */ .msg a.lk{color:inherit;text-decoration:underline;text-underline-offset:2px; text-decoration-thickness:1.4px;cursor:pointer} .msg.them a.lk{color:var(--accent-text)} /* Emoji on their own arrive without a bubble, big. */ .msg.emoji{background:none;border-color:transparent;box-shadow:none;padding:2px 2px 0} .msg.emoji .tx.big{display:block;font-size:42px;line-height:1.16} .msg.emoji .at{color:var(--dim-2);opacity:.85} /* Reactions sit at the left of that same bottom row. */ .msg .rx{display:flex;align-items:center;min-width:0;line-height:1} .msg .rx b{display:inline-flex;align-items:center;justify-content:center; min-width:28px;height:23px;padding:0 7px;margin-right:4px;border-radius:99px; background:rgba(var(--shadow-rgb),.09);font-size:14px;font-weight:400} .msg .rx b.mine{background:rgba(var(--accent-rgb),.2); box-shadow:inset 0 0 0 1.2px rgba(var(--accent-rgb),.45)} .msg.me .rx b{background:rgba(255,255,255,.2)} .msg.me .rx b.mine{background:rgba(255,255,255,.34); box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.5)} /* Where the unread ones start, decided when the chat is opened and gone the moment the reader reaches the bottom. */ .chat-unread{align-self:stretch;text-align:center;margin:12px 0 2px;padding:5px 12px; border-radius:9px;font-size:12px;font-weight:700;letter-spacing:.01em; color:var(--accent-text);background:rgba(var(--accent-rgb),.12)} .chat-notice{align-self:center;max-width:30ch;text-align:center;margin:12px 0 2px; padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:600; color:var(--dim-2);background:var(--soft)} .chat-more{cursor:pointer} /* "Down to the newest", with the count of what arrived while the reader was up in the history. Only shown when they are not already at the bottom. */ .chat-jump{position:absolute;right:12px;bottom:14px;width:44px;height:44px; border-radius:50%;display:grid;place-items:center; background:var(--card);color:var(--dim);border:1px solid var(--line); box-shadow:0 4px 16px rgba(var(--shadow-rgb),.2); opacity:0;transform:translateY(10px) scale(.92);pointer-events:none; transition:opacity .18s ease,transform .18s cubic-bezier(.2,1,.4,1)} .chat-jump.on{opacity:1;transform:none;pointer-events:auto} .chat-jump:active{transform:scale(.9)} .chat-jump svg{width:20px;height:20px;display:block} .chat-jump .n{position:absolute;top:-5px;right:-3px;min-width:20px;height:20px; padding:0 6px;border-radius:99px;background:var(--accent);color:var(--on-accent); font-size:11.5px;font-weight:800;display:grid;place-items:center; box-shadow:0 2px 6px rgba(var(--accent-rgb),.35)} /* The line under the name: typing, in this chat now, or trying to reconnect. */ .chat-top .who-mini span.live{color:var(--accent-text);font-weight:600} .chat-top .who-mini span.warn{color:var(--danger)} /* The composer's height is JS's to decide (autosizeChatInput): it follows what has been typed, all of it, and the conversation above yields the room. The old flat ceiling here capped it at about five lines and then let the box scroll. */ .chat-input{max-height:none;overflow-y:hidden} /* Composer: the counter only appears near the limit, so it is never noise. */ .chat-count{flex:none;align-self:flex-end;margin-bottom:15px;font-size:11.5px; font-weight:700;color:var(--dim-2);min-width:0} .chat-count.low{color:var(--danger)} /* ---- Xabar menyusi: reaksiya, javob, nusxa ---- */ .chat-menu{position:fixed;inset:0;z-index:70;display:none} .chat-menu.on{display:block} .cm-back{position:absolute;inset:0;background:rgba(var(--shadow-rgb),.34); animation:cmFade .16s ease both} @keyframes cmFade{from{opacity:0}to{opacity:1}} .cm-card{position:absolute;min-width:200px;padding:6px;border-radius:17px; background:var(--card);border:1px solid var(--line); box-shadow:0 14px 38px rgba(var(--shadow-rgb),.28); animation:cmPop .18s cubic-bezier(.2,1.1,.4,1) both} @keyframes cmPop{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}} .cm-emoji{display:flex;gap:2px;padding:2px 2px 7px;margin-bottom:4px; border-bottom:1px solid var(--line)} .cm-emoji button{flex:1;height:38px;border-radius:50%;font-size:21px;line-height:1; display:grid;place-items:center;transition:transform .15s,background-color .15s} .cm-emoji button:hover{background:var(--soft)} .cm-emoji button:active{transform:scale(.84)} .cm-emoji button.on{background:rgba(var(--accent-rgb),.18); box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.45)} .cm-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px; border-radius:12px;font-size:15px;font-weight:600;color:var(--txt);text-align:left; transition:background-color .15s} .cm-row:hover{background:var(--soft)} .cm-row:active{background:var(--soft);transform:scale(.985)} .cm-row svg{width:19px;height:19px;flex:none;color:var(--dim)} /* ---- Doʻstlar roʻyxatidagi suhbat qatori ---- */ .row.chatrow{cursor:pointer} .chatrow .rtop{display:flex;align-items:baseline;gap:8px} .chatrow .rtop .rname{flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .chatrow .rbot{display:flex;align-items:center;gap:8px;margin-top:2px} .chatrow .rbot .rmeta{flex:1;min-width:0} .rowstamp{flex:none;display:inline-flex;align-items:center;gap:2px; font-size:12px;font-weight:600;color:var(--dim-2)} .rowstamp .tkw{display:inline-flex} .rowstamp .tkw svg{width:16px;height:10px;display:block} .rowstamp .tkw.sent{opacity:.65} .rowstamp .tkw.seen{color:var(--ok);opacity:1} @media (max-width:360px){ .msg{max-width:86%} .cm-card{min-width:180px} }