/* Settings panel, folders, emoji picker, stickers, lock screen, forced themes. Loaded after theme.css. */
:root { --settings-bg:#f2f2f7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --settings-bg:#000; } }
:root[data-theme="dark"] {
  --bg:#000; --side:rgba(28,28,30,.72); --card:rgba(44,44,46,.94); --line:rgba(84,84,88,.45);
  --theirs:rgba(44,44,46,.95); --text:#f5f5f7; --muted:#98989f; --dot-border:#1c1c1e;
  --chatbg:linear-gradient(160deg,#0b1524 0%,#101b2e 50%,#15122a 100%);
  --hover:rgba(235,235,245,.1); --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --settings-bg:#000;
}
:root[data-theme="dark"] body { background:radial-gradient(900px 520px at 8% -8%, rgba(30,90,190,.4), transparent 60%), radial-gradient(800px 480px at 100% 0%, rgba(110,60,190,.3), transparent 55%), #000; }
:root[data-theme="dark"] #auth { background:linear-gradient(130deg,#1f2d1f 0%,#15261c 45%,#102020 75%,#202a1c 100%); }

html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation:none !important; transition:none !important; }
html.no-blur { --side:var(--card); }
html.no-blur * { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.msg { font-size:var(--msg-size, 15px); }

/* ---- settings panel ---- */
#settings { position:absolute; inset:0; z-index:6; background:var(--settings-bg); display:flex; flex-direction:column; overflow:hidden; }
#settings.closing { animation:sOut .22s ease-in forwards; }
.spage { height:100%; display:flex; flex-direction:column; }
.spage.fwd { animation:sIn .34s var(--smooth); }
.spage.back { animation:sBackIn .3s var(--smooth); }
@keyframes sIn { from { transform:translateX(-100%); } to { transform:none; } }
@keyframes sBackIn { from { transform:translateX(24%); opacity:.4; } to { transform:none; opacity:1; } }
@keyframes sOut { to { transform:translateX(-100%); } }
.shead { display:flex; align-items:center; gap:4px; padding:12px 10px 8px; }
.shead h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; }
.sbody { flex:1; overflow-y:auto; padding:4px 14px 32px; }
.sprofile { display:flex; align-items:center; gap:14px; width:100%; padding:14px; margin:4px 0 14px; border:0; border-radius:14px; background:var(--card); color:var(--text); text-align:left; transition:transform .2s var(--spring); }
.sprofile:active { transform:scale(.98); }
.sprofile .avatar { width:56px; height:56px; font-size:23px; }
.sprofile .schev { opacity:.45; }
/* main menu: tight, evenly spaced blocks with crisp hairlines */
.smain .sgroup { margin-bottom:14px; }
.smain .srow { min-height:50px; font-size:16px; }
.smain .srow .sic { width:29px; height:29px; border-radius:7px; }
.smain .srow .slabel { font-weight:500; }
.smain .srow + .srow::before { left:55px; height:.5px; }
.spinfo { flex:1; min-width:0; }
.spname { font-size:18px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spsub { color:var(--muted); font-size:14px; margin-top:2px; font-weight:600; overflow-wrap:anywhere; }
.sedit { color:var(--blue); font-weight:600; font-size:14px; flex-shrink:0; }
.sgt { font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin:20px 14px 7px; }
.sgroup { background:var(--card); border-radius:14px; overflow:hidden; margin-bottom:18px; }
.srow {
  display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:10px 14px; border:0; background:none;
  text-align:left; font-size:15.5px; color:var(--text); position:relative; cursor:pointer; transition:background .15s;
}
.srow + .srow::before { content:''; position:absolute; top:0; left:14px; right:0; height:1px; background:var(--line); }
.srow:hover { background:var(--hover); }
.sic { width:30px; height:30px; border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.slabel { flex:1; min-width:0; font-weight:600; }
.slabel small { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; line-height:1.35; font-weight:400; }
.sval { color:var(--muted); font-size:14.5px; white-space:nowrap; }
/* Data and storage: one bar split by kind of file (photos, videos, voice…) out of the 200 MB */
.srow.susage { flex-direction:column; align-items:stretch; gap:8px; cursor:default; }
.srow.susage:hover { background:none; }
.su-top { display:flex; align-items:baseline; gap:6px; }
.su-top b { font-size:20px; }
.su-top span { color:var(--muted); font-size:14px; }
.su-track { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--line); }
.su-track i { display:block; height:100%; }
.su-track i + i { margin-left:2px; }
.schev { color:var(--muted); opacity:.55; display:flex; }
.srow.danger, .srow.danger .slabel { color:#ff3b30; }
.stoggle input, .sradio input { position:absolute; opacity:0; pointer-events:none; }
.sw { width:51px; height:31px; border-radius:16px; background:rgba(120,120,128,.32); position:relative; flex:none; transition:background .25s; }
.sw::after { content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.18); transition:transform .3s var(--spring); }
.stoggle input:checked + .sw { background:#34c759; }
.stoggle input:checked + .sw::after { transform:translateX(20px); }
.stoggle input:focus-visible + .sw { outline:2px solid var(--blue); outline-offset:2px; }
.rcheck { color:var(--blue); display:flex; opacity:0; transform:scale(.4); transition:opacity .2s, transform .3s var(--spring); }
.sradio input:checked + .rcheck { opacity:1; transform:none; }
.scheck input { width:20px; height:20px; accent-color:var(--blue); flex:none; }
/* folder icon picker */
.ficons { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; padding:10px; }
.ficon { display:flex; justify-content:center; cursor:pointer; }
.ficon input { position:absolute; opacity:0; pointer-events:none; }
.ficon span { width:42px; height:42px; display:grid; place-items:center; font-size:22px; border-radius:12px; transition:background .15s, box-shadow .15s; }
.ficon:hover span { background:var(--hover); }
.ficon input:checked + span { background:rgba(47,139,240,.14); box-shadow:inset 0 0 0 2px var(--blue); }
.femoji { font-size:16px; line-height:1; }
.sslider input[type=range] { flex:1; accent-color:var(--blue); }
.spreview { padding:14px; background:var(--chatbg); display:flex; justify-content:flex-end; }
.spreview .msg { max-width:85%; }
.bggrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); gap:10px; padding:14px; }
.bgsw { aspect-ratio:3/4; border-radius:12px; border:2px solid transparent; color:#fff; display:flex; align-items:center; justify-content:center; transition:transform .2s var(--spring), border-color .2s; }
.bgsw:hover { transform:scale(1.05); }
.bgsw.on { border-color:var(--blue); box-shadow:0 0 0 2px var(--card) inset; }
.snote { font-size:13px; color:var(--muted); padding:8px 14px 2px; line-height:1.45; }
.snote.center { text-align:center; }
.sbtn {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:16px 0 0; padding:13px; border:0; border-radius:14px;
  background:var(--card); color:var(--blue); font-weight:600; font-size:15.5px; transition:transform .2s var(--spring), filter .2s;
}
.sbtn:active { transform:scale(.97); }
.sbtn.primary { background:linear-gradient(135deg,#3da2ff,#2f7ff0); color:#fff; }
.sbtn.danger { color:#ff3b30; }
.sbtn.mini { width:auto; flex:none; margin:0; padding:7px 12px; font-size:13px; background:rgba(47,139,240,.12); border-radius:10px; }
.sbtn.mini.danger { background:rgba(255,59,48,.12); color:#ff3b30; }
.sinput { cursor:text; }
.sinput input { flex:1; min-width:0; border:0; background:transparent; font-size:15.5px; color:var(--text); outline:none; padding:4px 0; }
.suser .avatar, .sdev .avatar { width:38px; height:38px; font-size:15px; }
.sempty { padding:18px 14px; color:var(--muted); text-align:center; font-size:14px; }
.sillus { display:flex; justify-content:center; padding:18px 0 6px; color:var(--blue); }
.sillus.ok { color:#34c759; }
.tsqr { display:flex; justify-content:center; padding:10px; }
.tsqr img { width:200px; height:200px; background:#fff; border-radius:16px; padding:10px; }
.tssecret { font-family:ui-monospace,Consolas,monospace; word-break:break-all; background:var(--hover); padding:2px 6px; border-radius:6px; user-select:all; color:var(--text); }

/* ---- folder tabs over the chat list ---- */
.folders { display:flex; gap:6px; padding:0 12px 8px; overflow-x:auto; scrollbar-width:none; }
.folders::-webkit-scrollbar { display:none; }
.ftab { flex:none; border:0; padding:7px 14px; border-radius:16px; background:var(--hover); color:var(--muted); font-weight:600; font-size:14px; display:flex; gap:6px; align-items:center; transition:background .2s, color .2s, transform .2s var(--spring); }
.ftab:active { transform:scale(.94); }
.ftab.on { background:linear-gradient(135deg,#3da2ff,#2f7ff0); color:#fff; }
.fbadge { background:var(--blue); color:#fff; border-radius:10px; padding:0 6px; font-size:11px; line-height:18px; }
.ftab.on .fbadge { background:#fff; color:var(--blue); }

/* ---- emoji / sticker picker ---- */
#picker {
  position:absolute; left:12px; bottom:72px; width:min(360px, calc(100% - 24px)); height:min(380px, 60vh); z-index:8;
  background:var(--card); border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden;
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); animation:sheetIn .3s var(--spring) both; transform-origin:bottom left;
}
.ptabs { display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--line); }
.ptab { flex:1; border:0; background:none; padding:8px; border-radius:10px; color:var(--muted); display:flex; gap:6px; align-items:center; justify-content:center; font-weight:600; }
.ptab.on { background:var(--hover); color:var(--blue); }
.pbody { flex:1; min-height:0; display:flex; flex-direction:column; }
.pcats { display:flex; gap:2px; padding:4px 8px; border-bottom:1px solid var(--line); }
.pcj { border:0; background:none; color:var(--muted); padding:6px; border-radius:8px; display:flex; }
.pcj:hover { background:var(--hover); color:var(--blue); }
.pscroll { flex:1; overflow-y:auto; padding:2px 8px 8px; }
.pcat-h { color:var(--muted); padding:8px 4px 4px; }
.egrid { display:grid; grid-template-columns:repeat(8, 1fr); }
.pem { border:0; background:none; font-size:24px; padding:4px; border-radius:8px; line-height:1.25; transition:transform .15s var(--spring), background .15s; }
.pem:hover { background:var(--hover); transform:scale(1.22); }
.sgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding:10px; overflow-y:auto; }
.pst { border:0; background:none; font-size:46px; padding:6px; border-radius:14px; text-align:center; line-height:1.15; transition:transform .25s var(--spring), background .15s; }
button.pst:hover { background:var(--hover); }

/* ---- message extras ---- */
.msg.sticker, .msg.jumbo { background:none !important; box-shadow:none !important; padding:0; }
.stk { font-size:112px; line-height:1.08; transform-origin:bottom center; }
html.no-sticker-anim .stk { animation:none !important; }
/* each sticker has its own strong motion (the kind comes from stickerAnim() in app.js). It plays once whenever the
   sticker scrolls into view (app.js adds .play then): no loop, nothing on hover */
.stk-svg { transform-origin:50% 60%; }
.stk-svg.play { animation:var(--stk-a) var(--stk-d, 1.4s) var(--stk-e, cubic-bezier(.3,.9,.4,1)) 1 both; }
.stk-svg[data-anim="beat"]   { --stk-a:stkBeat;   --stk-d:1.3s; }
.stk-svg[data-anim="laugh"]  { --stk-a:stkLaugh;  --stk-d:1.3s; transform-origin:50% 90%; }
.stk-svg[data-anim="party"]  { --stk-a:stkParty;  --stk-d:1.5s; transform-origin:50% 100%; }
.stk-svg[data-anim="flame"]  { --stk-a:stkFlame;  --stk-d:1.3s; transform-origin:50% 100%; }
.stk-svg[data-anim="wave"]   { --stk-a:stkWave;   --stk-d:1.4s; transform-origin:75% 95%; }
.stk-svg[data-anim="clap"]   { --stk-a:stkClap;   --stk-d:1.2s; }
.stk-svg[data-anim="float"]  { --stk-a:stkFloat;  --stk-d:1.8s; }
.stk-svg[data-anim="fly"]    { --stk-a:stkFly;    --stk-d:1.6s; --stk-e:ease-in-out; }
.stk-svg[data-anim="drive"]  { --stk-a:stkDrive;  --stk-d:1.6s; --stk-e:ease-in-out; transform-origin:50% 100%; }
.stk-svg[data-anim="spin"]   { --stk-a:stkSpin;   --stk-d:1.4s; transform-origin:50% 50%; }
.stk-svg[data-anim="glow"]   { --stk-a:stkGlow;   --stk-d:1.6s; transform-origin:50% 50%; }
.stk-svg[data-anim="shiver"] { --stk-a:stkShiver; --stk-d:1.2s; --stk-e:linear; }
.stk-svg[data-anim="angry"]  { --stk-a:stkAngry;  --stk-d:1.4s; --stk-e:linear; }
.stk-svg[data-anim="sleep"]  { --stk-a:stkSleep;  --stk-d:1.9s; --stk-e:ease-in-out; transform-origin:50% 100%; }
.stk-svg[data-anim="think"]  { --stk-a:stkThink;  --stk-d:1.6s; transform-origin:50% 100%; }
.stk-svg[data-anim="sway"]   { --stk-a:stkSway;   --stk-d:1.6s; --stk-e:ease-in-out; transform-origin:50% 0%; }
.stk-svg[data-anim="jelly"]  { --stk-a:stkJelly;  --stk-d:1.3s; --stk-e:ease-out; transform-origin:50% 100%; }
.stk-svg[data-anim="bob"]    { --stk-a:stkBob;    --stk-d:1.3s; --stk-e:ease-out; transform-origin:50% 100%; }
/* heart: two hard, big beats */
@keyframes stkBeat   { 0% { transform:scale(.4); opacity:0; } 14% { transform:scale(1.5); opacity:1; } 26% { transform:scale(.88); } 38% { transform:scale(1.38); } 52% { transform:scale(.92); } 66%, 100% { transform:scale(1); } }
/* laughing: rolls side to side while bouncing */
@keyframes stkLaugh  { 0% { transform:scale(.5) rotate(0); } 12% { transform:translateY(-22%) rotate(-28deg) scale(1.2); } 26% { transform:translateY(0) rotate(24deg) scale(.95, 1.08); } 40% { transform:translateY(-16%) rotate(-22deg) scale(1.12); } 54% { transform:translateY(0) rotate(18deg); } 68% { transform:translateY(-8%) rotate(-10deg); } 84% { transform:rotate(5deg); } 100% { transform:none; } }
/* party: crouch, jump high with a full flip, squash on landing */
@keyframes stkParty  { 0% { transform:scale(1.2, .7); } 18% { transform:translateY(-55%) rotate(-180deg) scale(1.25); } 36% { transform:translateY(-62%) rotate(-360deg) scale(1.3); } 56% { transform:translateY(0) rotate(-360deg) scale(1.3, .7); } 70% { transform:translateY(-12%) rotate(-360deg) scale(.9, 1.15); } 84%, 100% { transform:rotate(-360deg); } }
/* fire / lightning: flares up to almost twice the size, flickering bright */
@keyframes stkFlame  { 0% { transform:scale(.3, .2); filter:brightness(1); } 15% { transform:scale(1.35, 1.8) skewX(-8deg); filter:brightness(1.6) saturate(1.5); } 30% { transform:scale(.9, 1.2) skewX(9deg); } 45% { transform:scale(1.25, 1.55) skewX(-6deg); filter:brightness(1.45); } 60% { transform:scale(.95, 1.05) skewX(5deg); } 78% { transform:scale(1.1, 1.25) skewX(-3deg); filter:brightness(1.2); } 100% { transform:none; filter:none; } }
/* hands: big swings from the wrist */
@keyframes stkWave   { 0% { transform:scale(.6) rotate(-30deg); } 12% { transform:scale(1.2) rotate(42deg); } 26% { transform:rotate(-34deg); } 40% { transform:scale(1.1) rotate(38deg); } 54% { transform:rotate(-26deg); } 68% { transform:rotate(18deg); } 84% { transform:rotate(-6deg); } 100% { transform:none; } }
/* clapping: five hard squeezes */
@keyframes stkClap   { 0%, 20%, 40%, 60%, 80% { transform:scale(1.25); } 10%, 30%, 50%, 70% { transform:scale(.6, .85) rotate(-6deg); } 90% { transform:scale(.85); } 100% { transform:none; } }
/* ghosts, butterflies…: rise far up swirling, then drift back down */
@keyframes stkFloat  { 0% { transform:translateY(40%) scale(.5); opacity:0; } 30% { transform:translateY(-45%) rotate(-22deg) scale(1.2); opacity:1; } 55% { transform:translateY(-25%) translateX(-18%) rotate(18deg); } 78% { transform:translateY(-8%) translateX(12%) rotate(-8deg); } 100% { transform:none; } }
/* rocket / plane: shoots off the top-right corner and flies back in from the bottom-left */
@keyframes stkFly    { 0% { transform:none; } 12% { transform:translate(-10%, 12%) scale(.9); } 40% { transform:translate(130%, -130%) rotate(12deg) scale(.6); opacity:0; } 41% { transform:translate(-130%, 130%) scale(.6); opacity:0; } 70% { transform:translate(8%, -8%) scale(1.15); opacity:1; } 100% { transform:none; } }
/* car: revs, races off the right edge and comes back in from the left */
@keyframes stkDrive  { 0% { transform:none; } 10% { transform:translateX(-12%) rotate(4deg); } 18% { transform:translateX(-12%) rotate(-3deg); } 45% { transform:translateX(160%) skewX(-18deg); opacity:0; } 46% { transform:translateX(-160%) skewX(-18deg); opacity:0; } 78% { transform:translateX(10%) skewX(10deg); opacity:1; } 90% { transform:translateX(-4%); } 100% { transform:none; } }
/* stars, balls, pizza: two full turns while growing */
@keyframes stkSpin   { 0% { transform:rotate(0) scale(.4); } 50% { transform:rotate(540deg) scale(1.4); } 80% { transform:rotate(700deg) scale(.95); } 100% { transform:rotate(720deg) scale(1); } }
/* sun, diamonds, money: swells up with a big golden shine */
@keyframes stkGlow   { 0% { transform:scale(.4) rotate(-40deg); filter:drop-shadow(0 0 0 rgba(255,210,60,0)); } 35% { transform:scale(1.5) rotate(15deg); filter:drop-shadow(0 0 .3em rgba(255,210,60,1)) brightness(1.4); } 60% { transform:scale(1.15) rotate(-6deg); filter:drop-shadow(0 0 .2em rgba(255,210,60,.8)); } 100% { transform:none; filter:drop-shadow(0 0 0 rgba(255,210,60,0)); } }
/* cold / scared: violent shaking */
@keyframes stkShiver { 0%, 100% { transform:none; } 5%, 25%, 45%, 65% { transform:translate(-12%, 3%) rotate(-6deg) scale(1.08); } 15%, 35%, 55%, 75% { transform:translate(12%, -3%) rotate(6deg) scale(1.08); } 85% { transform:translate(-5%, 0); } 92% { transform:translate(4%, 0); } }
/* angry: swells red-hot and shakes hard */
@keyframes stkAngry  { 0% { transform:none; filter:none; } 15% { transform:scale(1.4); filter:hue-rotate(-25deg) saturate(2) brightness(1.1); } 22%, 38%, 54% { transform:scale(1.35) translateX(-11%) rotate(-8deg); filter:hue-rotate(-25deg) saturate(2); } 30%, 46%, 62% { transform:scale(1.35) translateX(11%) rotate(8deg); filter:hue-rotate(-25deg) saturate(2); } 78% { transform:scale(1.1); filter:saturate(1.3); } 100% { transform:none; filter:none; } }
/* sleepy / crying: deep heavy breaths, drooping to the side */
@keyframes stkSleep  { 0% { transform:none; } 25% { transform:scale(1.3, .75) rotate(-14deg); } 50% { transform:scale(.85, 1.25) rotate(8deg); } 75% { transform:scale(1.2, .85) rotate(-10deg); } 100% { transform:none; } }
/* thinking: leans far over, pauses, snaps back */
@keyframes stkThink  { 0% { transform:none; } 25% { transform:rotate(-32deg) translateX(-14%) scale(1.1); } 50% { transform:rotate(-32deg) translateX(-14%) scale(1.1); } 65% { transform:rotate(22deg) translateX(8%); } 82% { transform:rotate(-8deg); } 100% { transform:none; } }
/* animals and the rest: hangs from the top and swings like a pendulum */
@keyframes stkSway   { 0% { transform:rotate(0) scale(.6); } 15% { transform:rotate(40deg) scale(1.15); } 35% { transform:rotate(-34deg); } 55% { transform:rotate(24deg); } 72% { transform:rotate(-14deg); } 88% { transform:rotate(6deg); } 100% { transform:none; } }
/* food etc.: dropped from above, splats flat and wobbles like jelly */
@keyframes stkJelly  { 0% { transform:translateY(-80%) scale(.8); opacity:0; } 25% { transform:translateY(0) scale(1.5, .55); opacity:1; } 40% { transform:scale(.7, 1.35); } 55% { transform:scale(1.25, .8); } 70% { transform:scale(.9, 1.12); } 85% { transform:scale(1.05, .96); } 100% { transform:none; } }
/* anything else: a high bounce with squash */
@keyframes stkBob    { 0% { transform:scale(1.25, .7); } 25% { transform:translateY(-50%) scale(.85, 1.2); } 50% { transform:translateY(0) scale(1.3, .7); } 68% { transform:translateY(-18%) scale(.95, 1.08); } 84% { transform:scale(1.08, .93); } 100% { transform:none; } }
html.no-sticker-anim .stk-svg, html.no-anim .stk-svg { animation:none !important; }
@media (prefers-reduced-motion: reduce) { .stk-svg { animation:none !important; } }
.msg.jumbo { font-size:calc(var(--msg-size, 15px) * 3.2); line-height:1.15; }
.msg.sticker small, .msg.jumbo small { display:inline-block; float:right; font-size:11px; background:rgba(0,0,0,.35); color:#fff !important; padding:1px 7px; border-radius:9px; }
.msg-fwd { font-size:13px; color:var(--blue); margin-bottom:3px; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.msg.mine .msg-fwd { color:rgba(255,255,255,.92); }
.fwd-link { cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.exp { display:inline-flex; vertical-align:-2px; margin-right:3px; }
/* padding (not a gap) keeps the pointer inside the message while moving to the buttons */
.msg-acts { position:absolute; top:50%; left:100%; padding-left:8px; transform:translateY(-50%); display:flex; gap:4px; opacity:0; transition:opacity .15s; }
.msg.mine .msg-acts { left:auto; right:100%; padding:0 8px 0 0; flex-direction:row-reverse; }
.msg-act.del:hover { color:#ff3b30; }
.edited { font-style:italic; opacity:.8; margin-right:2px; }
/* a GIF stands on its own like a sticker: no coloured bubble around it, the time sits in a dark pill */
.msg.gif { padding:0; background:none !important; box-shadow:none !important; }
.msg.gif small { position:absolute; right:7px; bottom:7px; margin:0; font-size:11px; line-height:16px; background:rgba(0,0,0,.45); color:#fff !important; padding:1px 7px; border-radius:9px; pointer-events:none; }
.msg.gif small .tick { opacity:1; }
.msg.gif .reacts { font-size:15px; }
.gif-img { display:block; max-width:min(280px, 60vw); max-height:300px; border-radius:12px; cursor:zoom-in; }

/* editing bar above the composer */
.edit-bar { display:flex; align-items:center; gap:10px; padding:6px 10px 6px 16px; background:var(--side); border-top:1px solid var(--line); color:var(--blue); }
.eb-txt { flex:1; min-width:0; display:flex; flex-direction:column; border-left:2px solid var(--blue); padding-left:8px; line-height:1.3; }
.eb-txt b { font-size:13.5px; }
.eb-txt span { color:var(--text); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* drag-and-drop */
.drop-zone { position:absolute; inset:10px; z-index:15; border:2.5px dashed var(--blue); border-radius:20px; background:color-mix(in srgb, var(--side) 88%, transparent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--blue); font-size:18px; pointer-events:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fade .15s ease both; }

/* right-click menu: reactions on top, actions below */
.ctx-menu { position:absolute; z-index:25; min-width:220px; padding:6px; border-radius:16px; background:var(--card); box-shadow:0 18px 50px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); animation:sheetIn .22s var(--spring) both; transform-origin:top left; }
.ctx-reacts { display:flex; gap:2px; padding:2px 2px 6px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.ctx-reacts button { border:0; background:none; font-size:22px; width:30px; height:34px; border-radius:10px; padding:0; transition:transform .15s var(--spring), background .15s; }
.ctx-reacts button:hover { background:var(--hover); transform:scale(1.25); }
.ctx-item { display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; border:0; border-radius:10px; background:none; color:var(--text); font-size:14.5px; text-align:left; }
.ctx-item .ic { color:var(--muted); }
.ctx-item:hover { background:var(--hover); }
.ctx-item.danger, .ctx-item.danger .ic { color:#ff3b30; }

/* reply quote inside a message */
.msg-reply { display:flex; flex-direction:column; border-left:3px solid var(--blue); background:rgba(47,139,240,.1); border-radius:6px; padding:3px 8px; margin:2px 0 4px; font-size:13px; line-height:1.3; cursor:pointer; white-space:nowrap; }
.msg-reply b { color:var(--blue); font-weight:600; }
.msg-reply span { overflow:hidden; text-overflow:ellipsis; max-width:280px; opacity:.85; }
.msg.mine .msg-reply { border-left-color:currentColor; background:rgba(255,255,255,.18); }
.msg.mine .msg-reply b { color:inherit; }
.msg-reply.gone { cursor:default; font-style:italic; opacity:.7; }
.msg.flash { animation:msgFlash 1.2s ease; }
@keyframes msgFlash { 0%, 40% { outline:3px solid var(--blue); outline-offset:2px; } 100% { outline:3px solid transparent; outline-offset:2px; } }

/* pinned message bar under the chat header */
.pin-bar { display:flex; align-items:center; gap:10px; padding:5px 8px 5px 16px; background:var(--side); border-bottom:1px solid var(--line); color:var(--blue); cursor:pointer; }

/* select mode */
.sel-bar { display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--side); border-top:1px solid var(--line); }
.sel-bar b { flex:1; }
.sel-bar .icon.danger { color:#ff3b30; }
body.selecting .msg { cursor:pointer; }
body.selecting .msg-acts { display:none; }
.msg.selected { outline:2.5px solid var(--blue); outline-offset:2px; }

/* delete dialog */
.del-btns { display:flex; flex-direction:column; gap:8px; }

/* GIF picker */
.gif-ic { font-size:12px; font-weight:800; letter-spacing:.5px; border:1.8px solid currentColor; border-radius:5px; padding:0 4px; line-height:1.4; }
/* words over a GIF, meme style */
.gif-cap-wrap { position:relative; display:inline-block; max-width:100%; line-height:0; }
.pgif.gif-cap-wrap { display:block; }
.gif-cap { position:absolute; left:4%; right:4%; text-align:center; line-height:1.05; font:900 22px Impact, 'Arial Black', 'Segoe UI', sans-serif; text-transform:uppercase; color:#fff;
  letter-spacing:.5px; overflow-wrap:anywhere; pointer-events:none; -webkit-text-stroke:1.2px #000; paint-order:stroke fill;
  text-shadow:2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000; }
.gif-cap-wrap .gif-cap { display:block; } /* message bubbles make spans flex, which would left-align the words */
.gif-cap.top { top:6%; } .gif-cap.bottom { bottom:6%; }
.pgif .gif-cap { font-size:14px; text-shadow:1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; -webkit-text-stroke:.6px #000; }
.gif-new { display:flex; flex-direction:column; gap:8px; padding:8px; }
.gif-new-prev { align-self:center; border-radius:12px; overflow:hidden; background:#000; }
.gif-new-prev img { display:block; max-width:100%; max-height:200px; }
.gif-new input { box-sizing:border-box; width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--hover); color:var(--text); }
.gif-new .hint { font-size:12.5px; }
.gif-new-btns { display:flex; gap:8px; justify-content:flex-end; }
.gif-scope { margin:8px 8px 0; }
.gif-scope button { padding:6px; font-size:13px; }
.gif-top { display:flex; gap:6px; padding:8px 8px 4px; }
.gif-top input { flex:1; min-width:0; box-sizing:border-box; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--hover); color:var(--text); }
.gif-btn { flex:none; display:inline-flex; align-items:center; gap:4px; padding:0 10px; border:0; border-radius:10px; background:var(--blue); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
/* GIF maker */
.ggrid { columns:2; column-gap:6px; padding-top:4px; }
.pgif-wrap { position:relative; margin:0 0 6px; break-inside:avoid; }
.pgif { display:block; width:100%; padding:0; border:0; background:var(--hover); border-radius:10px; overflow:hidden; cursor:pointer; }
.pgif-del { position:absolute; top:5px; right:5px; width:24px; height:24px; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.85; }
.pgif-del:hover { background:#e53950; opacity:1; }
.pgif img { display:block; width:100%; transition:transform .2s; }
.pgif:hover img { transform:scale(1.04); }
.ggrid .sempty { column-span:all; }
.gif-by { font-size:10.5px; color:var(--muted); text-align:center; padding:4px; border-top:1px solid var(--line); }
.msg:hover .msg-acts { opacity:1; }
@media (hover:none) { .msg-acts { opacity:.75; } }
.msg-act {
  width:30px; height:30px; border-radius:50%; border:0; background:var(--card); color:var(--muted);
  display:flex; align-items:center; justify-content:center; transition:transform .2s var(--spring), color .15s; box-shadow:var(--shadow);
}
.msg-act:hover { color:var(--blue); transform:scale(1.12); }

/* reactions under a message */
.reacts { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; white-space:normal; }
.rp {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 6px; border-radius:14px; border:0;
  background:rgba(47,139,240,.12); color:var(--blue); font-size:13px; font-weight:600; line-height:20px;
  animation:pop .35s var(--spring); transition:transform .15s var(--spring), background .15s;
}
.rp .re { font-size:15px; }
.rp:hover { transform:scale(1.06); }
.rp.mine { background:var(--blue); color:#fff; }
.msg.mine .rp { background:rgba(255,255,255,.22); color:#fff; }
.msg.mine .rp.mine { background:#fff; color:#2f7ff0; }
.msg.sticker .reacts, .msg.jumbo .reacts { font-size:15px; }
/* no blue bubble behind stickers / GIFs / big emoji: reaction pills keep their normal blue look */
.msg.mine:is(.gif, .sticker, .jumbo) .rp { background:rgba(47,139,240,.12); color:var(--blue); }
.msg.mine:is(.gif, .sticker, .jumbo) .rp.mine { background:var(--blue); color:#fff; }
.react-bar {
  position:absolute; z-index:9; display:flex; gap:2px; padding:5px 6px; border-radius:24px; background:var(--card);
  box-shadow:0 10px 30px rgba(0,0,0,.22); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); animation:sheetIn .25s var(--spring) both;
}
.react-bar button { border:0; background:none; font-size:24px; width:38px; height:38px; border-radius:50%; transition:transform .18s var(--spring), background .15s; }
.react-bar button:hover { transform:scale(1.3) translateY(-3px); background:var(--hover); }

/* channels */
.msg.post { max-width:min(520px, 86%); }
.post-who { display:flex; align-items:center; gap:4px; color:var(--blue) !important; }
.chan-bar { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; background:var(--side); border-top:1px solid var(--line); color:var(--muted); font-size:14px; flex-wrap:wrap; }
.chan-bar .link { font-weight:600; font-size:14px; }
.list-h { padding:12px 18px 4px; font-size:12.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.join-pill { flex:none; padding:5px 12px; border-radius:14px; background:linear-gradient(135deg,#3da2ff,#2f7ff0); color:#fff; font-size:13px; font-weight:600; }
.mem-info { display:flex; flex-direction:column; gap:6px; }
.mi-count { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; }
.mi-about { white-space:pre-wrap; font-size:14.5px; }
.mi-link { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; border:0; background:rgba(47,139,240,.1); color:var(--blue); padding:6px 10px; border-radius:10px; font-weight:600; }
.member { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.role-badge { font-size:11px; font-weight:700; color:var(--blue); background:rgba(47,139,240,.12); padding:1px 7px; border-radius:8px; text-transform:uppercase; }
.seg { display:flex; padding:3px; border-radius:12px; background:var(--hover); }
.seg button { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border:0; border-radius:9px; background:none; color:var(--muted); font-weight:600; transition:background .2s, color .2s; }
.seg button.on { background:var(--card); color:var(--text); box-shadow:0 2px 6px rgba(0,0,0,.12); }
#groupForm .at input { padding:10px 0; }
.tap-load { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:220px; height:150px; border:0; border-radius:12px; background:rgba(120,120,128,.22); color:inherit; }
.note-load { width:200px; height:200px; border-radius:50%; }

/* ---- lock screen ---- */
.lock { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:var(--settings-bg); }
.lock-box { display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--text); text-align:center; padding:20px; }
.lock-box > span { color:var(--blue); }
.lock-box h3 { margin:0; font-weight:600; }
.dots { display:flex; gap:18px; margin:6px 0; }
.dots i { width:14px; height:14px; border-radius:50%; border:2px solid var(--blue); transition:background .15s, transform .2s var(--spring); }
.dots i.on { background:var(--blue); transform:scale(1.12); }
.dots.shake { animation:shake .45s; }
@keyframes shake { 20%, 60% { transform:translateX(-10px); } 40%, 80% { transform:translateX(10px); } }
.keypad { display:grid; grid-template-columns:repeat(3, 72px); gap:14px; }
.keypad button { width:72px; height:72px; border-radius:50%; border:0; background:var(--hover); font-size:28px; font-weight:500; color:var(--text); display:flex; align-items:center; justify-content:center; transition:transform .15s, background .15s; }
.keypad button:active { transform:scale(.9); background:rgba(47,139,240,.25); }
.code-input { font-size:28px !important; letter-spacing:10px; text-align:center; font-family:ui-monospace,Consolas,monospace; }

/* ---- peer profile / lists ---- */
.peer-card { align-items:center; text-align:center; }
.peer-rows { width:100%; background:var(--hover); border-radius:14px; overflow:hidden; text-align:left; }
.peer-row { display:flex; flex-direction:column; padding:10px 14px; color:var(--text); text-decoration:none; }
.peer-row + .peer-row { border-top:1px solid var(--line); }
.peer-row .k { font-size:12px; color:var(--muted); }
a.peer-row span:last-child { color:var(--blue); }
.peer-actions { display:flex; flex-direction:column; gap:8px; width:100%; }
/* ---- moderation: report, admin buttons, ban/lock screen, admin panel ---- */
.logout-btn.soft { background:transparent; border:1px solid rgba(229,57,80,.35); }
.peer-admin { width:100%; text-align:left; padding:10px; border-radius:14px; border:1px dashed rgba(229,57,80,.45); box-sizing:border-box; }
.peer-admin-btns { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.peer-admin-btns button { padding:9px; }
.report-reasons { display:flex; flex-direction:column; gap:6px; }
.report-reason { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:var(--hover); cursor:pointer; }
.report-reason input { margin-top:3px; accent-color:#e53950; }
.report-reason span { display:flex; flex-direction:column; }
.report-reason small { color:var(--muted); font-size:12.5px; }
.report-reason:has(input:checked) { outline:2px solid #e53950; }
#reportDetails { box-sizing:border-box; width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); resize:vertical; font:inherit; }
.mod-screen { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
  background:radial-gradient(circle at 50% 30%, #2a3550, #0d111a 70%); color:#fff; }
.mod-screen.ban { background:radial-gradient(circle at 50% 30%, #4a1d27, #12080b 70%); }
.mod-card { width:min(420px,100%); text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.mod-ic { font-size:64px; line-height:1; }
.mod-card h2 { margin:6px 0 0; }
.mod-card p { margin:0; opacity:.8; line-height:1.45; }
.mod-timer { font-size:54px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:2px; }
.mod-timer:empty { display:none; }
.areport { align-items:flex-start; }
.areport.done { opacity:.6; }
.ar-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; text-align:left; }
.ar-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ar-top small, .ar-meta { color:var(--muted); }
.ar-tag { font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:20px; background:rgba(229,57,80,.14); color:#e53950; }
.ar-count { font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:20px; background:rgba(255,159,10,.18); color:#c77800; }
.ar-details { font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.ar-banned { color:#e53950; }
.ar-btns { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.sbtn.mini.danger { background:#e53950; color:#fff; }
.ar-days { display:inline-flex; align-items:center; gap:4px; }
.ar-days-in { width:72px; box-sizing:border-box; padding:5px 8px; border-radius:8px; border:1px solid var(--line); background:var(--hover); color:var(--text); font-size:13.5px; }
/* full-page profile sliding in from the right */
.overlay.peer-page { justify-content:flex-end; align-items:stretch; }
.overlay.peer-page > .card { width:min(420px,100vw); height:100%; max-height:none; border-radius:0; padding:12px 18px 24px; box-sizing:border-box; animation:pageIn .35s var(--spring) both; }
@keyframes pageIn { from { transform:translateX(100%); } to { transform:none; } }
.peer-top { align-self:stretch; display:flex; align-items:center; gap:6px; margin:0 -8px 4px; font-size:17px; }
.peer-page #peerAvatar .avatar { width:110px; height:110px; font-size:44px; }
.peer-row .peer-seen-btn { align-self:flex-start; padding:4px 0 0; font-weight:600; cursor:pointer; }
.peer-section { width:100%; text-align:left; }
.peer-sec-title { font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin:0 4px 6px; }
.peer-stories { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.peer-story { position:relative; aspect-ratio:9/16; border:0; padding:0; border-radius:12px; overflow:hidden; background:#000; cursor:pointer; outline:2.5px solid #3da2ff; outline-offset:-2.5px; }
.peer-story.seen { outline-color:transparent; }
.peer-story img, .peer-story video { width:100%; height:100%; object-fit:cover; display:block; }
.peer-story small { position:absolute; left:6px; bottom:5px; color:#fff; font-size:11px; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.fwd-list { display:flex; flex-direction:column; }
.fwd-list .row, .member { width:100%; border:0; background:none; text-align:left; color:var(--text); border-radius:12px; }
.member { padding:9px 6px; cursor:pointer; }
.member:hover { background:var(--hover); }
.fwd-list .avatar { width:40px; height:40px; font-size:16px; }

/* ---- bottom-left corner: settings button ---- */
.side-foot {
  display:flex; align-items:center; justify-content:flex-start; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
}
.foot-gear { width:46px; height:46px; border-radius:14px; }
/* phones: bottom tab bar (chats · contacts · new · settings); settings pages open above it, a chat covers it */
.tabbar { display:none; }
.theme-top { display:none; }
@media (max-width:700px) {
  /* one settings button (in the tab bar); the light / dark switch moves up next to the logo */
  .side-foot { display:none !important; }
  .theme-top { display:flex; margin-left:auto; }
  .tabbar {
    display:grid; grid-template-columns:repeat(5, 1fr); position:relative; z-index:7; flex:none;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
    background:var(--side); -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%);
  }
  .tabbar button {
    display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0 4px; border:0; background:none;
    color:var(--muted); font:inherit; -webkit-tap-highlight-color:transparent;
  }
  .tabbar button small { font-size:11px; font-weight:600; white-space:nowrap; }
  .tabbar button.on { color:var(--blue); }
  .tabbar button:active { opacity:.6; }
  body.in-chat .tabbar { display:none; }
  #settings { bottom:calc(57px + env(safe-area-inset-bottom)); }
}
.foot-gear .ic { transition:transform .5s var(--spring); }
.foot-gear:hover .ic { transform:rotate(75deg); }

/* ---- group/channel photo + toggle in dialogs ---- */
.g-photo { display:flex; align-items:center; gap:12px; }
.g-photo .avatar { width:64px; height:64px; font-size:26px; }
.g-check { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--hover); cursor:pointer; position:relative; }
.g-check b { display:block; font-size:14.5px; font-weight:600; }
.g-check small { font-size:12.5px; color:var(--muted); }

/* ---- group/channel info panel ---- */
.info-card { width:min(420px,94vw); }
.info-card > .prof-head { margin-bottom:-38px; }
.info-top { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.info-top .avatar { width:92px; height:92px; font-size:38px; }
.info-top h3 { margin:8px 0 0; font-size:21px; }
.info-edit { display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:14px; background:var(--hover); }
#memList { display:flex; flex-direction:column; }
#memList .list-h { padding:12px 6px 4px; }
#memList .member { display:flex; align-items:center; justify-content:flex-start; gap:11px; }
#memList .member .avatar { width:40px; height:40px; font-size:16px; }
.m-info { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.m-info b { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-info small { font-size:13px; color:var(--muted); }
.m-acts { display:flex; gap:6px; flex:none; }
.m-acts .sbtn.mini { display:inline-flex; align-items:center; }
#memList .hint { padding:8px 6px; }

/* ---- stories strip ---- */
.stories { display:flex; gap:12px; padding:6px 14px 10px; overflow-x:auto; scrollbar-width:none; flex:none; }
.stories::-webkit-scrollbar { display:none; }
.st-item { flex:none; width:64px; display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:none; padding:0; color:var(--text); cursor:pointer; }
.st-item small { font-size:11.5px; max-width:64px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
/* every story avatar sits in a round ring: colour = new, grey = already watched, dashed blue = "add your story" */
.st-ring { position:relative; padding:3px; border-radius:50%; background:linear-gradient(135deg,#3da2ff,#7b5cff 50%,#ff5ca8); transition:transform .2s var(--spring); }
.st-ring.seen { background:color-mix(in srgb, var(--muted) 70%, transparent); }
.st-ring.add { background:none; outline:2px dashed color-mix(in srgb, var(--blue) 70%, transparent); outline-offset:-2px; }
.st-ring .avatar { width:52px; height:52px; font-size:20px; border:2.5px solid var(--side); box-sizing:content-box; }
.st-ring.add .avatar { border-color:transparent; }
.st-item:hover .st-ring { transform:scale(1.06); }
.st-plus { position:absolute; right:-1px; bottom:-1px; width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid var(--side); }
/* ---- story editor + text/sticker layers (shared with the viewer) ---- */
.story-editor { width:min(440px,94vw); }
.story-editor > * { flex:none; } /* the card scrolls instead of squeezing the stage or panels */
.se-pick { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:220px; border:2px dashed var(--line); border-radius:16px; color:var(--blue); cursor:pointer; transition:background .2s; }
.se-pick:hover { background:var(--hover); }
.se-stage { flex:none; display:flex; justify-content:center; background:#000; border-radius:16px; overflow:hidden; }
.se-frame, .sv-frame { position:relative; display:inline-block; line-height:0; }
#seMedia img, #seMedia video { display:block; max-width:100%; max-height:min(420px,50vh); }
.so-layer { position:absolute; inset:0; overflow:hidden; line-height:normal; }
.sv-frame .so-layer { pointer-events:none; }
.so { position:absolute; transform:translate(-50%,-50%); font-size:calc(var(--fw, 320px) * var(--s) / 100); white-space:pre; max-width:96%; user-select:none; -webkit-user-select:none; }
.so-text { font-weight:800; line-height:1.15; text-align:center; padding:.08em .3em; border-radius:.25em; text-shadow:0 0 .12em rgba(0,0,0,.85), 0 .04em .08em rgba(0,0,0,.6); }
.so-text.so-bg { text-shadow:none; }
.so-sticker { line-height:1; filter:drop-shadow(0 .04em .08em rgba(0,0,0,.4)); }
.se-frame .so { cursor:grab; touch-action:none; }
.se-frame .so:active { cursor:grabbing; }
.se-frame .so.sel { outline:2px dashed rgba(255,255,255,.9); outline-offset:3px; }
.se-tools { display:flex; gap:8px; }
.se-tools .dev-btn { flex:1; padding:10px; }
.se-tools .dev-btn:last-child { flex:none; width:46px; }
.se-stickers { display:grid; grid-template-columns:repeat(auto-fill, minmax(40px, 1fr)); gap:4px; max-height:170px; overflow-y:auto; padding:6px; border-radius:12px; background:var(--hover); }
.se-stickers button { font-size:26px; line-height:1; padding:6px 0; border:0; border-radius:8px; background:none; cursor:pointer; }
.se-stickers button:hover { background:var(--line); }
.se-edit { display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:12px; background:var(--hover); }
.se-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.se-colors { display:flex; gap:5px; flex-wrap:wrap; }
.se-color { width:22px; height:22px; border-radius:50%; border:2px solid var(--line); padding:0; cursor:pointer; }
.se-color.on { outline:2px solid var(--blue); outline-offset:1px; }
.se-bg { padding:4px 10px; border-radius:8px; border:1px solid var(--line); background:none; color:var(--text); font-weight:600; cursor:pointer; }
.se-bg.on { background:var(--blue); border-color:var(--blue); color:#fff; }
#seSize { flex:1; min-width:80px; padding:0; border:0; }
.icon.danger { color:#e53950; }

/* ---- story viewer ---- */
.story-view { position:fixed; inset:0; z-index:40; background:#000; display:flex; align-items:center; justify-content:center; animation:fade .2s ease both; }
.sv-media { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.sv-media img, .sv-media video { max-width:min(100vw, 540px); max-height:100vh; object-fit:contain; }
.sv-bars { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:min(94vw, 520px); display:flex; gap:4px; z-index:2; }
.sv-bars span { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.35); overflow:hidden; }
.sv-bars span.done i { width:100%; }
.sv-bars i { display:block; height:100%; width:0; background:#fff; }
.sv-bars i.run { animation:svRun 5s linear forwards; }
@keyframes svRun { to { width:100%; } }
.sv-head { position:absolute; top:22px; left:50%; transform:translateX(-50%); width:min(94vw, 520px); display:flex; align-items:center; gap:10px; z-index:3; color:#fff; }
.sv-head .avatar { width:38px; height:38px; font-size:15px; }
.sv-who { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.sv-who small { opacity:.75; font-size:12.5px; }
.sv-btn { width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sv-caption { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); width:min(90vw, 500px); text-align:center; color:#fff; font-size:15.5px; text-shadow:0 1px 4px rgba(0,0,0,.7); z-index:2; }
.sv-caption:empty { display:none; }
.sv-nav { position:absolute; top:80px; bottom:80px; width:35%; border:0; background:none; cursor:pointer; z-index:1; }
.sv-nav.prev { left:0; } .sv-nav.next { right:0; }

/* ---- settings in SF Pro / iOS style (SF Pro on Apple devices, Inter elsewhere) ---- */
#settings {
  --card:#fff;
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', 'Noto Color Emoji', sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.011em;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #settings { --card:#1c1c1e; } }
:root[data-theme="dark"] #settings { --card:#1c1c1e; }
.shead {
  position:relative; display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:6px 8px;
  border-bottom:.5px solid transparent; transition:border-color .2s, background .2s;
}
.spage.scrolled .shead { border-bottom-color:var(--line); background:color-mix(in srgb, var(--settings-bg) 85%, transparent); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
/* back / close: a small boxed button (tinted blue pill) */
.sback {
  display:flex; align-items:center; gap:2px; border:1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  background:color-mix(in srgb, var(--blue) 10%, transparent); color:var(--blue); font-size:17px; font-weight:600;
  padding:5px 12px 5px 6px; border-radius:10px; transition:background .15s;
}
.sback:hover { background:color-mix(in srgb, var(--blue) 18%, transparent); }
.sback:active { opacity:.6; }
.stheme { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:0; border-radius:50%; background:none; color:var(--blue); transition:background .2s, transform .3s var(--spring); }
.stheme:hover { background:var(--hover); }
.stheme:active { transform:rotate(25deg) scale(.9); }

/* empty chat area: design picker until the person has chosen light/dark, then the plain hint */
html:not(.theme-chosen) #empty { background:none; padding:0; color:var(--text); }
html:not(.theme-chosen) #empty .empty-hint, html.theme-chosen #empty .tpick { display:none; }
.tpick { display:flex; flex-direction:column; align-items:center; gap:18px; }
.tpick-h { font-size:20px; font-weight:600; letter-spacing:-.01em; }
.tpick-row { display:flex; gap:16px; }
.tcard { display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px; border:2px solid transparent; border-radius:18px; background:var(--card, var(--side)); color:var(--text); font-size:14.5px; box-shadow:0 6px 20px rgba(0,0,0,.14); transition:transform .25s var(--spring), border-color .2s; }
.tcard:hover { transform:translateY(-3px); border-color:var(--blue); }
.tcard:active { transform:scale(.97); }
.tprev { width:138px; height:92px; border-radius:11px; display:grid; grid-template-columns:34% 1fr; gap:6px; padding:8px; box-sizing:border-box; }
.tprev i { border-radius:6px; }
.tprev i:first-child { grid-row:1 / 3; }
.tprev.light { background:#e8eef7; } .tprev.light i { background:#fff; } .tprev.light i:last-child { background:#d7ecc8; }
.tprev.dark { background:#0e1621; } .tprev.dark i { background:#212121; } .tprev.dark i:last-child { background:#766ac8; }
.stitle-small { position:absolute; left:50%; transform:translateX(-50%); font-size:17px; font-weight:600; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; max-width:55%; overflow:hidden; text-overflow:ellipsis; }
.spage.scrolled .stitle-small { opacity:1; }
.slarge { margin:2px 4px 14px; font-size:34px; font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.sbody { padding:0 16px 36px; }
.sprofile { padding:12px 16px; border-radius:12px; margin:0 0 26px; gap:14px; }
.sprofile .avatar { width:60px; height:60px; font-size:24px; }
.spname { font-size:20px; font-weight:600; letter-spacing:-.02em; }
.spsub { font-size:15px; }
.sedit { font-size:17px; font-weight:400; }
.sgt { margin:26px 16px 7px; font-size:13px; letter-spacing:-.005em; font-weight:400; }
.sgroup { border-radius:12px; }
.srow { min-height:44px; padding:8px 16px; font-size:17px; gap:14px; }
.srow + .srow::before { left:16px; height:.5px; }
.srow + .srow:has(.sic)::before { left:59px; }
.sic { width:29px; height:29px; border-radius:7px; }
.slabel small { font-size:13px; }
.sval { font-size:17px; }
.snote { font-size:13px; padding:7px 16px 0; }
.sbtn { font-size:17px; font-weight:400; border-radius:12px; padding:12px; margin-top:22px; }
.sbtn.primary { font-weight:600; }
.sw { width:51px; height:31px; }
.sinput input { font-size:17px; }

/* ---- flat look: no shadows anywhere; focus shown with an outline instead ---- */
*, *::before, *::after { box-shadow:none !important; }
#search:focus, #text:focus { outline:2px solid var(--blue); outline-offset:-2px; }
/* chat list rows: smaller rounding */
.row { border-radius:8px; }
/* every icon white in the dark theme (in the light theme white would vanish on the white background) */
:root[data-theme="dark"] .ic, :root[data-theme="dark"] .icon, :root[data-theme="dark"] .gif-ic { color:#fff !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ic, :root:not([data-theme="light"]) .icon, :root:not([data-theme="light"]) .gif-ic { color:#fff !important; }
}
.msg.mine .vm-play .ic { color:#2f7ff0 !important; } /* white play button keeps a blue icon */
#list .row { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.ctx-menu.fixed { position:fixed; z-index:50; animation:menuPop .32s var(--spring) both; transform-origin:top left; }
.ctx-menu.fixed .ctx-item { animation:itemIn .32s var(--spring) both; animation-delay:calc(var(--i, 0) * 45ms); }
@keyframes menuPop { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }
@keyframes itemIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }

/* ---- desktop notifications bar ---- */
.notify-bar { display:flex; align-items:center; gap:8px; margin:0 12px 8px; padding:9px 10px 9px 12px; border-radius:12px; background:rgba(47,139,240,.12); font-size:13px; line-height:1.3; }
.nb-ic { font-size:18px; flex:none; }
.nb-text { flex:1; min-width:0; }
.nb-on { flex:none; border:0; border-radius:8px; padding:6px 12px; background:var(--blue); color:#fff; font-weight:600; font-size:13px; cursor:pointer; }
.nb-x { flex:none; border:0; background:none; color:var(--muted); padding:2px; display:flex; cursor:pointer; }

/* ---- buttons are plain: no motion on hover, press or appear (kept last so it wins) ---- */
button, button *, label.icon, label.gif-btn, .row, .row .avatar, .srow, .st-ring, .pgif img, .foot-gear .ic, .bgsw, .ctx-item {
  transition:none !important; animation:none !important;
}
button:hover, button:active, label.icon:active, .row:hover, .row:active, .row:hover .avatar, .st-item:hover .st-ring,
.pgif:hover img, .foot-gear:hover .ic, .bgsw:hover { transform:none !important; }

/* ---- group / channel info panel (right side, Telegram style) ---- */
.overlay.peer-page > .info-card { width:min(390px,100vw); padding:0 0 20px; gap:0; overflow-y:auto; }
.info-card > .prof-head { margin:0; }
.info-head { position:relative; padding:18px 16px 14px; background:var(--hover); display:flex; flex-direction:column; gap:14px; }
.info-head > .x { position:absolute; top:10px; right:10px; }
.info-top { display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.info-top .avatar { width:78px; height:78px; font-size:32px; }
.info-top h3 { margin:8px 0 0; font-size:17px; }
.info-acts { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.ia { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; border:0; border-radius:12px; background:var(--card); color:var(--text); cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.ia small { font-size:12px; }
.ia:hover { background:var(--side); }
.ia-dots { font-size:13px; letter-spacing:1px; line-height:20px; }
.ia-menu { display:flex; flex-direction:column; border-radius:12px; background:var(--card); overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.15); }
.ia-menu button { display:flex; align-items:center; gap:10px; padding:11px 14px; border:0; background:none; color:var(--text); text-align:left; cursor:pointer; font-size:14.5px; }
.ia-menu button:hover { background:var(--hover); }
.ia-menu button.danger { color:#e53950; }
.info-card .mem-info { padding:12px 16px 0; }
.info-media { display:flex; flex-direction:column; padding:6px 0; border-bottom:6px solid var(--hover); }
.im-row { display:flex; align-items:center; gap:22px; padding:11px 22px; border:0; background:none; color:var(--text); text-align:left; font-size:14.5px; cursor:pointer; }
.im-row .ic { color:var(--muted); }
.im-row:hover { background:var(--hover); }
.info-gallery { padding:6px 12px 10px; border-bottom:6px solid var(--hover); }
.ig-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.ig-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; }
.ig-grid a { aspect-ratio:1; overflow:hidden; border-radius:6px; background:var(--hover); }
.ig-grid img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-row { display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:10px; color:var(--text); text-decoration:none; }
.ig-row:hover { background:var(--hover); }
.ig-row span { display:flex; flex-direction:column; min-width:0; }
.ig-row b { font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-row small { color:var(--muted); font-size:12.5px; }
.mem-head { display:flex; align-items:center; gap:22px; padding:12px 12px 4px 22px; color:var(--muted); }
.mem-head b { flex:1; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:var(--text); }
.info-card #addForm { padding:0 16px; }
.info-card #addErr { padding:0 16px; }
.info-card #memList { padding:0 8px; }
#memList .member .avatar { width:44px; height:44px; font-size:17px; }
.m-info small.m-on { color:var(--blue); }
.role-badge { text-transform:none; font-size:12px; font-weight:600; padding:1px 9px; border-radius:10px; }
.role-badge.owner { color:#8e5bd9; background:rgba(142,91,217,.13); }
.role-badge.admin { color:var(--blue); background:rgba(47,139,240,.12); }
.info-card .info-edit { margin:12px 16px 0; }
/* member actions (make admin, remove, ban) appear on hover with a mouse, so names and statuses stay readable */
@media (hover:hover) {
  .info-card #memList .m-acts { display:none; }
  .info-card #memList .member:hover .m-acts { display:flex; }
  .info-card #memList .member:hover .role-badge { display:none; }
}

/* ---- service messages + date pills in the chat (Telegram style) ---- */
.svc { display:flex; justify-content:center; margin:8px 0; align-self:stretch; pointer-events:none; }
.svc span { max-width:80%; text-align:center; padding:4px 12px; border-radius:14px; background:rgba(0,0,0,.22); color:#fff; font-size:13.5px; font-weight:600; line-height:1.35;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.svc.svc-date { margin:12px 0 6px; }

/* ---- public / private choice ---- */
.access-pick { display:flex; flex-direction:column; gap:6px; }
.ap { display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border-radius:12px; background:var(--hover); cursor:pointer; }
.ap input { margin-top:3px; accent-color:var(--blue); }
.ap > span { display:flex; flex-direction:column; }
.ap small { color:var(--muted); font-size:12.5px; line-height:1.3; }
.ap:has(input:checked) { outline:2px solid var(--blue); }
.mi-invite { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:12px; background:var(--hover); }
.mi-invite small { font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.4px; }
.mi-invite code { font-size:13px; color:var(--blue); overflow-wrap:anywhere; font-family:inherit; }
.mi-inv-btns { display:flex; gap:6px; }
.svc.svc-date span { display:inline-block; }
.svc.svc-date span::first-letter { text-transform:uppercase; }

/* group / channel badge in the corner of a chat-list avatar */
.av-kind { position:absolute; right:-2px; bottom:-2px; width:19px; height:19px; border-radius:50%; background:#8e8e93; color:#fff;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--side); box-sizing:border-box; }
.av-kind .ic { stroke-width:2.6; }
.row.active .av-kind { border-color:#2f7ff0; }

/* ---- add members: pick people from your chats ---- */
.add-pick { display:flex; flex-direction:column; gap:4px; margin:4px 12px 8px; padding:8px 0; border-radius:14px; background:var(--hover); }
#addFilter { margin:0 8px 4px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); }
#addPickList { max-height:340px; overflow-y:auto; }
.ap-row { margin:0 4px; padding:8px 10px; border-radius:12px; }
.ap-row .avatar { width:46px; height:46px; font-size:18px; }
.ap-row.busy { opacity:.5; pointer-events:none; }
.ap-empty { padding:10px 14px; font-size:13px; }

/* ---- new group: tick members ---- */
.g-pick-head { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; }
.g-pick-head span { color:var(--blue); font-weight:600; }
.g-pick { margin:0; }
.g-pick #gPickList { max-height:260px; overflow-y:auto; }
#gFilter { margin:0 8px 4px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); }
.ap-row { position:relative; }
.ap-check { position:absolute; left:44px; top:40px; width:20px; height:20px; border-radius:50%; background:var(--card); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:transparent; box-sizing:border-box; }
.ap-row.picked { background:rgba(47,139,240,.12); }
.ap-row.picked .ap-check { background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---- ban length box: number + unit ---- */
.ar-unit { padding:5px 6px; border-radius:8px; border:1px solid var(--line); background:var(--hover); color:var(--text); font-size:13.5px; }
.peer-admin-dur { margin-top:8px; }
.peer-admin-dur .ar-days { display:flex; gap:6px; }
.peer-admin-dur .ar-days-in { flex:1; width:auto; }

/* ---- chat background: own picture by link or from a folder ---- */
.bg-url { gap:8px; }
.bg-file { gap:10px; color:var(--blue); cursor:pointer; }
.bg-file .slabel { color:var(--blue); font-weight:500; }
.msg-video { display:block; max-width:min(320px, 62vw); max-height:360px; border-radius:12px; background:#000; }

/* ---- change password (profile dialog) ---- */
.pw-box { display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:14px; background:var(--hover); }
.pw-box .lbl { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.4px; }

/* ---- stickers as SVG pictures (size follows the font-size of where they sit) ---- */
.stk-svg { display:inline-block; width:1.15em; height:1.15em; vertical-align:middle; user-select:none; -webkit-user-drag:none; }
.stk .stk-svg { width:1em; height:1em; display:block; }
.so-sticker .stk-svg { display:block; width:1em; height:1em; pointer-events:none; }
.se-stickers button .stk-svg { width:30px; height:30px; }

/* ---- read receipts ---- */
.msg small .tick { display:inline-flex; vertical-align:-3px; margin-left:3px; opacity:.75; }
.msg small .tick.read { opacity:1; color:#4fc3f7; }
.msg.mine small .tick.read { color:inherit; }
.ctx-seen { padding:0 0 4px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.seen-row { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:10px; background:none; color:var(--text); font-size:14.5px; text-align:left; cursor:pointer; }
button.seen-row:hover { background:var(--hover); }
.seen-row .ic { color:var(--blue); flex:none; }
.seen-row.none { cursor:default; color:var(--muted); }
.seen-row.none .ic { color:var(--muted); }
.seen-row > span:first-of-type { flex:1; }
.seen-faces { display:flex; flex-direction:row-reverse; }
.seen-faces .avatar { width:24px; height:24px; font-size:11px; margin-left:-7px; border:2px solid var(--card); box-sizing:content-box; }
.seen-list { max-height:220px; overflow-y:auto; padding:2px 0; }
.seen-item { display:flex; align-items:center; gap:10px; padding:6px 10px; }
.seen-item .avatar { width:32px; height:32px; font-size:13px; flex:none; }
.seen-item span { display:flex; flex-direction:column; min-width:0; }
.seen-item b { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seen-item small { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:12.5px; }
.seen-item small .ic { color:var(--blue); }

/* ---- pinned chats ---- */
.pin-mark { display:inline-flex; color:var(--muted); transform:rotate(45deg); flex:none; margin-left:6px; }
.row.active .pin-mark { color:inherit; }

/* ---- story views & likes ---- */
.sv-caption { bottom:84px; }
.sv-foot { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; display:flex; justify-content:center; }
.sv-stats { display:flex; align-items:center; gap:6px; padding:9px 16px; border:0; border-radius:22px; background:rgba(0,0,0,.45); color:#fff; font-size:15px; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sv-stats small { opacity:.75; margin-left:6px; font-size:12.5px; }
.sv-dot { opacity:.6; }
.sv-heart { color:#fff; font-size:18px; line-height:1; }
.sv-heart.on, .sv-like.on .sv-heart { color:#ff3b5c; }
.sv-like { width:52px; height:52px; border:0; border-radius:50%; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sv-like .sv-heart { font-size:26px; }
.sv-viewers { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(100vw, 520px); max-height:62vh; z-index:5; display:flex; flex-direction:column;
  border-radius:18px 18px 0 0; background:var(--card); color:var(--text); box-shadow:0 -10px 40px rgba(0,0,0,.4); }
.svv-head { display:flex; align-items:center; justify-content:space-between; padding:12px 12px 8px 18px; border-bottom:1px solid var(--line); }
.svv-head .sv-btn { background:var(--hover); color:var(--text); }
#svvList { overflow-y:auto; padding:6px 8px 14px; }
.svv-row { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:12px; }
.svv-row .avatar { width:42px; height:42px; font-size:16px; flex:none; }
.svv-row > span:not(.sv-heart) { flex:1; display:flex; flex-direction:column; min-width:0; }
.svv-row b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svv-row small { color:var(--muted); font-size:12.5px; }
.svv-empty { padding:18px; text-align:center; color:var(--muted); }
/* hearts are SVG: outline when not liked, filled red when liked; the viewers sheet is solid */
.sv-heart { display:inline-flex; }
.sv-heart .ic { fill:none; stroke:#fff; }
.sv-heart.on .ic, .sv-like.on .sv-heart .ic { fill:#ff3b5c; stroke:#ff3b5c; }
.sv-like { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); }
.sv-viewers { background:var(--side); -webkit-backdrop-filter:none; backdrop-filter:none; }
/* the theme's panel colours are see-through glass; the story sheet must be solid (dark, like the story viewer) */
.sv-viewers { background:#1c1c1e; color:#fff; }
.sv-viewers .svv-head { border-color:rgba(255,255,255,.1); }
.sv-viewers .svv-head .sv-btn { background:rgba(255,255,255,.1); color:#fff; }
.sv-viewers .svv-row small, .sv-viewers .svv-empty { color:rgba(255,255,255,.55); }
/* ban / lock: a big full-screen countdown, nothing else to press */
.mod-timer { font-size:clamp(56px, 13vw, 128px); line-height:1.05; margin-top:8px; }
.mod-screen { user-select:none; -webkit-user-select:none; }
.mod-end { display:inline-block; margin:6px 0 2px; font-size:17px; color:#fff; opacity:1; }

/* ---- story comments: box on the left, ❤ on the right ---- */
.sv-foot { width:min(94vw, 520px); }
.sv-reply { flex:1; display:flex; align-items:center; gap:6px; margin-right:10px; padding:4px 4px 4px 16px; border-radius:26px;
  border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sv-reply input { flex:1; min-width:0; border:0; background:none; color:#fff; font-size:15px; outline:none; padding:10px 0; }
.sv-reply input::placeholder { color:rgba(255,255,255,.7); }
.sv-send { width:38px; height:38px; flex:none; border:0; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sv-like { flex:none; }
.sv-stats .ic { flex:none; }
.svv-sec { display:flex; align-items:center; gap:6px; padding:10px 10px 4px; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.55); }
.svv-comment { align-items:flex-start; }
.svv-comment b small { font-weight:400; margin-left:6px; }
.svv-text { display:block; margin-top:2px; font-size:14.5px; white-space:pre-wrap; overflow-wrap:anywhere; color:#fff; }

/* ---- ⌄ jump to the latest message ---- */
.jump-wrap { position:relative; height:0; z-index:4; }
.jump-down { position:absolute; right:16px; bottom:12px; width:46px; height:46px; border:0; border-radius:50%; background:var(--card); color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.jump-down .ic { transform:rotate(90deg); }
.jump-down:hover { color:var(--blue); }
.jump-count { position:absolute; top:-6px; left:50%; transform:translateX(-50%); min-width:20px; height:20px; padding:0 6px; box-sizing:border-box; border-radius:10px;
  background:var(--blue); color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ---- Yopiq | Ochiq as a segmented switch, same as Guruh | Kanal (.seg) ---- */
.access-pick { flex-direction:row; gap:0; padding:3px; border-radius:12px; background:var(--hover); }
.access-pick .ap { flex:1; justify-content:center; align-items:center; padding:8px; border-radius:9px; background:none; color:var(--muted); font-weight:600; cursor:pointer; }
.access-pick .ap input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; margin:0; }
.access-pick .ap > span { align-items:center; }
.access-pick .ap b { font-weight:600; }
.access-pick .ap small { display:none; }
.access-pick .ap:has(input:checked) { outline:none; background:var(--card); color:var(--text); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.access-pick .ap:has(input:focus-visible) { outline:2px solid var(--blue); }
.ap-hint { font-size:12.5px; margin-top:-4px; }
.access-pick .ap b { display:inline-flex; align-items:center; gap:6px; }

/* "Rasm qo'yish" looks like the Guruh | Kanal switch: grey pill, bold text, icon in the text colour */
.pbtn.seg-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:0; border-radius:12px; background:var(--hover); color:var(--text);
  font-weight:600; font-size:14px; cursor:pointer; box-shadow:none; }
.pbtn.seg-btn .ic { color:currentColor; }
.pbtn.seg-btn:hover { background:var(--card); box-shadow:0 2px 6px rgba(0,0,0,.12); }

/* ---- phone numbers never break in the middle ---- */
.nowrap, #peerPhone { white-space:nowrap; }

/* ---- "Matn o'lchami" also sizes the chat list, the chat header and the composer, not only the bubbles ---- */
#list .row .name { font-size:calc(var(--msg-size, 15px) + 1px); }
#list .row .last { font-size:calc(var(--msg-size, 15px) - 1px); }
#cName { font-size:calc(var(--msg-size, 15px) + 1px); }
#text { font-size:var(--msg-size, 15px); }

/* ---- settings: smaller, calmer text ---- */
.slarge { font-size:26px; margin:2px 4px 10px; }
.spname { font-size:17px; }
.spsub { font-size:13.5px; }
.srow { font-size:15px; min-height:40px; padding:7px 14px; }
.sval { font-size:14.5px; }
.sgt { font-size:12px; margin:20px 14px 6px; }
.snote { font-size:12.5px; }
.stitle-small { font-size:15.5px; }

/* ---- someone's profile: the four buttons in two rows of two ---- */
.peer-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.peer-actions > button { padding:10px 8px; font-size:14px; min-width:0; }
.peer-actions > button span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.peer-actions > .peer-admin { grid-column:1 / -1; }
.sedit { font-size:14.5px; }
.sback { font-size:15.5px; }

/* ---- story bar for viewers: 👁 count · comment box · ❤ with count ---- */
.sv-views { flex:none; display:inline-flex; align-items:center; gap:5px; margin-right:8px; padding:0 12px; height:44px; border-radius:22px;
  background:rgba(0,0,0,.35); color:#fff; font-size:14px; font-weight:600; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sv-views .ic { color:#fff; }
.sv-like { width:auto; min-width:52px; padding:0 14px; gap:6px; border-radius:26px; }
.sv-like b { color:#fff; font-size:15px; }
.sv-like b:empty { display:none; }

/* ---- any story: 👁 · ❤ · Telegram plane stacked on the right, in the middle of the screen ---- */
/* the bar covers the viewer but lets taps through, so tap-to-skip still works around the buttons */
.sv-foot.side { inset:0; transform:none; width:auto; display:block; pointer-events:none; }
.sv-foot.side > * { pointer-events:auto; }
/* --sv-edge (set by placeStoryColumn) = gap between the picture/video's right edge and the screen's, so the column hugs the video */
.sv-side { position:absolute; top:50%; right:calc(var(--sv-edge, max(0px, calc(50% - 270px))) + 12px); transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:18px; }
/* the comment box opens to the left of the plane, on the same middle line */
.sv-write { position:relative; }
.sv-write .sv-reply { position:absolute; top:50%; right:calc(100% + 10px); transform:translateY(-50%); width:min(320px, calc(100vw - 100px)); box-sizing:border-box; margin:0; }
/* the line under the story sits low and narrow, so it never runs into the buttons on the right */
.sv-caption { bottom:24px; width:min(480px, calc(100vw - 150px)); max-height:calc(50vh - 170px); overflow-y:auto; overflow-wrap:anywhere; scrollbar-width:none; }
.sv-caption::-webkit-scrollbar { display:none; }
/* video stories: the top bar follows the video's time (not a fixed 5 s animation) */
.sv-bars i.run.manual { animation:none; }
/* rewind slider at the very top, where the story bars are (a video hides the bars, so there is one line, not two) */
.story-view.video .sv-bars { visibility:hidden; }
.sv-seek { position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:3; width:min(94vw, 520px); height:24px; margin:0; padding:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; touch-action:none; }
.sv-seek::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(#fff 0 0) 0 / var(--p, 0%) 100% no-repeat, rgba(255,255,255,.3); }
.sv-seek::-moz-range-track { height:4px; border-radius:2px; background:linear-gradient(#fff 0 0) 0 / var(--p, 0%) 100% no-repeat, rgba(255,255,255,.3); }
.sv-seek::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:#fff; border:0; }
.sv-seek::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#fff; border:0; }

/* who viewed / comments: a panel on the right, in the middle, instead of a sheet from the bottom */
/* right beside the 👁 ❤ ✈ column (left/width set by placeStoryPanel), in the middle; slides out of the column leftwards and back in */
.sv-viewers { right:auto; top:50%; bottom:auto; transform:translateY(-50%); max-height:78vh; border-radius:18px;
  animation:svvIn .4s cubic-bezier(.22,1,.36,1) both; }
.sv-viewers.closing { animation:svvOut .26s cubic-bezier(.55,0,.75,.2) both; pointer-events:none; }
@keyframes svvIn { from { clip-path:inset(0 0 0 100% round 18px); transform:translate(24px,-50%); } to { clip-path:inset(0 0 0 0 round 18px); transform:translate(0,-50%); } }
@keyframes svvOut { from { clip-path:inset(0 0 0 0 round 18px); transform:translate(0,-50%); } to { clip-path:inset(0 0 0 100% round 18px); transform:translate(24px,-50%); } }
.svv-head { padding:14px 18px 10px; }
.sv-side-btn.sv-like-side.on .sv-heart .ic { fill:#ff3b5c; stroke:#ff3b5c; }
.sv-side-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0; border:0; background:none; color:#fff; cursor:pointer; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.sv-side-btn > .ic, .sv-side-btn > .sv-heart { width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-sizing:border-box; }
.sv-side-btn > .ic { padding:11px; }
.sv-side-btn b { font-size:13px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
/* the Telegram mark: white plane on a round blue badge */
.sv-tg-ic { width:48px; height:48px; border-radius:50%; background:linear-gradient(180deg,#37aee2,#1e96c8); display:flex; align-items:center; justify-content:center; }
.sv-tg-ic .ic { color:#fff !important; margin-left:-2px; }
.svv-empty .ic { display:inline-block; opacity:.5; margin-bottom:6px; }

/* default chat background: picture per theme (a custom background picked in settings still overrides --chatbg) */
html:root { --chatbg:url("img/chat-bg-light.jpg") center / cover no-repeat; }
@media (prefers-color-scheme: dark) { html:root:not([data-theme="light"]) { --chatbg:url("img/chat-bg-dark.jpg") center / cover no-repeat; } }
html:root[data-theme="light"] { --chatbg:url("img/chat-bg-light.jpg") center / cover no-repeat; }
html:root[data-theme="dark"] { --chatbg:url("img/chat-bg-dark.jpg") center / cover no-repeat; }

/* admin entry: compact, sits just above the version line */
.sadmin-mini { transform: scale(.88); transform-origin: top center; opacity: .8; margin-top: 8px; }

/* chat-background swatches: show the doodle pattern at a readable size */
.bgsw { background-size: 300px auto, cover !important; background-repeat: repeat, no-repeat !important; }
.bgsw[data-bg="custom"] { background-size: cover !important; background-repeat: no-repeat !important; }

/* pasted picture(s) above the input */
.paste-bar { display:flex; gap:10px; padding:10px 14px 0; background:var(--side); border-top:1px solid var(--line); overflow-x:auto; }
.paste-bar.hidden { display:none; }
/* "Send an image" dialog (Ctrl+V, attach, drop): preview, caption, Add · Cancel · Send */
.send-card { width:min(420px,94vw); gap:14px; }
.send-card h3 { margin:0; font-size:18px; }
.send-prev { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-height:52vh; overflow-y:auto; padding:10px; border-radius:12px; background:rgba(128,128,128,.14); }
.send-prev .sp-item { position:relative; }
.send-prev img, .send-prev video { display:block; max-width:100%; max-height:46vh; border-radius:8px; object-fit:contain; }
.send-prev.many img, .send-prev.many video { width:120px; height:120px; object-fit:cover; }
.send-prev .sp-file { display:flex; align-items:center; gap:12px; width:100%; padding:6px 4px; font-size:14px; overflow-wrap:anywhere; }
.send-prev .sp-ext { flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#3da2ff,#2f7ff0); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em; }
.send-prev .sp-name { display:flex; flex-direction:column; gap:2px; min-width:0; }
.send-prev .sp-name b { font-weight:600; }
.send-prev .sp-name small { color:var(--muted); font-size:12.5px; }
.send-prev.many .sp-file { width:100%; }
.send-prev .sp-x { position:absolute; top:6px; right:6px; width:26px; height:26px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; padding:0; }
.send-prev .sp-file .sp-x { position:static; flex:none; margin-left:auto; background:rgba(128,128,128,.3); }
.send-doc { display:flex; align-items:center; gap:10px; font-size:15px; cursor:pointer; }
.send-doc input { width:20px; height:20px; margin:0; accent-color:var(--blue); }
.send-cap { display:flex; flex-direction:column; gap:2px; font-size:13px; font-weight:600; color:var(--blue); }
.send-cap input { padding:6px 0; border:0; border-bottom:2px solid var(--blue); background:none; color:var(--text); font-size:15px; font-weight:400; outline:none; }
.send-btns { display:flex; align-items:center; gap:18px; }
.send-btns .link { padding:4px 0; font-size:15px; font-weight:600; cursor:pointer; }
.pb-item { position:relative; flex:none; }
.pb-item img { display:block; max-height:180px; max-width:260px; border-radius:12px; }
.pb-file { display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; background:var(--line); max-width:240px; }
.pb-x { position:absolute; top:6px; right:6px; width:24px; height:24px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.img-cap { padding:6px 2px 0; white-space:pre-wrap; word-break:break-word; }

.side-foot { display:flex; align-items:center; justify-content:space-between; }

/* picker speed: no live blur behind a scrolling grid, off-screen categories aren't laid out, short open animation */
#picker { -webkit-backdrop-filter:none; backdrop-filter:none; animation-duration:.18s; will-change:transform; }
.pcat { content-visibility:auto; contain-intrinsic-size:auto 220px; }
.pscroll { contain:content; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.pem { transition:background .1s; }
.pem:hover { transform:none; }

/* ---- settings pages on narrow phones: nothing squeezed, cut off or sideways-scrolling ---- */
.sbody { overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(36px + env(safe-area-inset-bottom)); }
/* the label keeps its room; a long value on the right is cut with … instead of crushing the label */
.srow .slabel { overflow-wrap:anywhere; }
.srow .sval { flex:0 1 auto; min-width:0; max-width:48%; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.slabel small { overflow-wrap:anywhere; }
.sbtn.mini { white-space:nowrap; }
/* folder icons: as many columns as fit, never wider than the card */
.ficons { grid-template-columns:repeat(auto-fill, minmax(42px, 1fr)); }
/* the small title in the nav bar never runs under the back / theme buttons */
.stitle-small { max-width:calc(100% - 210px); }
/* hover colour only with a mouse (on a phone it would stay stuck after a tap); a tap gets a short press colour */
@media (hover:none) {
  .srow:hover { background:none; }
  .srow:active, .sprofile:active { background:var(--hover); }
}
@media (max-width:700px) {
  .shead { padding:6px 4px; }
  .sbody { padding-left:12px; padding-right:12px; }
  .slarge { font-size:24px; margin:2px 4px 8px; }
  .srow { min-height:44px; padding:8px 12px; gap:12px; }
  .srow + .srow:has(.sic)::before { left:53px; }
  .sgt { margin:18px 12px 6px; }
  .snote { padding:7px 12px 0; }
  .sprofile { padding:12px; margin-bottom:20px; }
  .sprofile .avatar { width:54px; height:54px; font-size:22px; }
  .stitle-small { max-width:calc(100% - 180px); }
  /* 16px+ in every box, otherwise iPhone zooms the page in on focus */
  #settings input:not([type=checkbox]):not([type=radio]):not([type=range]), #settings select { font-size:16px; }
  /* people / devices rows: buttons drop under the name instead of squashing it */
  .suser, .sdev { flex-wrap:wrap; row-gap:6px; }
  .suser .slabel, .sdev .slabel { flex:1 1 calc(100% - 64px); }
  .suser .sbtn.mini, .sdev .sbtn.mini { margin-left:50px; }
  .suser .sbtn.mini + .sbtn.mini { margin-left:0; }
  .sdev .sbtn.mini { margin-left:43px; }
  /* folder rows: name + count on the left, "delete" stays a small button */
  .srow .sbtn.mini { padding:6px 10px; }
  /* chat-background swatches a bit smaller so 4 fit in a row */
  .bggrid { grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:8px; padding:12px; }
  /* 2-step QR never wider than the screen */
  .tsqr img { width:min(200px, 60vw); height:auto; aspect-ratio:1; }
  /* admin: ban form controls wrap neatly, number box takes the free space */
  .ar-btns .ar-days { flex:1 1 100%; display:flex; }
  .ar-btns .ar-days-in { flex:1; width:auto; min-width:0; }
  .areport .ar-top b { overflow-wrap:anywhere; }
}
@media (max-width:360px) {
  .srow { font-size:14.5px; }
  .sval { font-size:13.5px; }
  .sic { width:27px; height:27px; }
  .srow + .srow:has(.sic)::before { left:51px; }
  .sbtn { font-size:16px; }
}
/* chat list: rows run edge to edge (no card corners or side gaps), with a thin line under each one
   that starts under the name, like Telegram */
#list .row { margin:0; border-radius:0; padding:10px 14px; }
#list .row:hover, #list .row:active { transform:none; }
#list .row::after { content:''; position:absolute; left:77px; right:0; bottom:0; height:1px; background:var(--line); pointer-events:none; }
#list .row.active::after, #list .row:has(+ .row.active)::after { opacity:0; }