:root{--bg:#0f1715;--panel:#17211e;--ink:#e6efec;--mute:#8da39d;--line:#26332f;--accent:#2fa592;--on-accent:#06201b;--in:#223029;--danger:#f2b8b5;--online:#4cd388;--read:#0a3a9c;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:16px/1.45 Manrope,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}

#auth{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:24px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.card{width:100%;max-width:380px;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px}
.card h1{margin:0 0 4px;font-size:1.6rem}
.card p{margin:0 0 20px;color:var(--mute)}
.card label{display:block;margin:12px 0 4px;font-size:.9rem;color:var(--mute)}
.card input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.btn{width:100%;margin-top:18px;padding:11px;border:0;border-radius:8px;background:var(--accent);color:var(--on-accent);font-weight:700}
.link{background:none;border:0;color:var(--accent);padding:0;margin-top:14px;text-decoration:underline}
.err{min-height:1.4em;margin-top:12px;color:var(--danger);font-size:.9rem}

.card .agree{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:.88rem;line-height:1.4}
.card .agree input{width:auto;flex:none;margin:3px 0 0;padding:0}
.card .agree a,.foot a{color:var(--accent)}
.foot{padding-top:20px;text-align:center;font-size:.82rem;line-height:1.5;color:var(--mute)}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:20px 22px;width:min(92vw,420px);max-height:85vh;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog h3{margin:18px 0 8px;font-size:.95rem;color:var(--mute);font-weight:500}
.sh{display:flex;justify-content:space-between;align-items:center}
.sh b{font-size:1.1rem}
.sh button{background:none;border:0;font-size:1.1rem;color:var(--mute)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{flex:1;padding:8px;background:none;border:0}
.seg button.on{background:var(--accent);color:var(--on-accent)}
.chk{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.chk input{margin-top:4px}
.hint{margin:6px 0 0;font-size:.82rem;color:var(--mute)}
.bl{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.bl button,.danger{border:1px solid var(--line);background:none;border-radius:8px;padding:6px 12px}
.danger{color:var(--danger);border-color:var(--danger)}
.head{position:relative}
.menu{position:absolute;right:12px;top:100%;z-index:6;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:210px}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 14px}
.menu button:hover{background:var(--bg)}
.sbar{display:flex;gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.sbar input{flex:1;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.sbar button{background:none;border:0;color:var(--mute)}
.day{align-self:center;margin:10px 0 4px;padding:3px 12px;border-radius:99px;background:var(--in);color:var(--mute);font-size:.8rem}
.note{padding:14px;text-align:center;color:var(--mute);background:var(--panel);border-top:1px solid var(--line)}
#app{height:100%;display:grid;grid-template-columns:320px 1fr}
aside{display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);min-height:0}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.top-user{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0;flex:1}
.top-user:hover{opacity:.8}
.top-user b{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top span{display:flex;align-items:center;gap:10px;flex:none}
.top button{background:none;border:0;color:var(--mute);font-size:.9rem}
.top .gear{font-size:1.3rem;line-height:1;padding:0}

/* Аватарки и статусы */
.avatar-wrap{position:relative;flex:none;display:inline-flex}
.mini-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem}
.big-avatar{width:96px;height:96px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:700;border:2px solid var(--line)}

.dot{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--online);border:2px solid var(--panel);flex:none}
.dot-big{position:absolute;bottom:2px;right:2px;width:18px;height:18px;border-radius:50%;background:var(--online);border:3px solid var(--panel);flex:none}

.search{position:relative;padding:10px 12px;border-bottom:1px solid var(--line)}
.search input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.found{position:absolute;left:12px;right:12px;top:100%;z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.found button,.contact{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 14px}
.found button:hover,.contact:hover,.contact.on{background:var(--bg)}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;padding:10px;background:none;border:0;border-bottom:2px solid transparent;color:var(--mute);font-weight:500}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.list{flex:1;overflow-y:auto}
.contact{border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.contact .t{flex:1;min-width:0}
.contact b{display:flex;align-items:center;gap:6px}
.contact span.s{display:block;color:var(--mute);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:var(--accent);color:var(--on-accent);border-radius:99px;min-width:22px;padding:1px 7px;font-size:.8rem;text-align:center}
.empty{padding:20px 16px;color:var(--mute)}

main{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}

.profile-screen{position:absolute;inset:0;background:var(--bg);z-index:15;display:flex;flex-direction:column;overflow-y:auto}
.profile-screen.hidden{display:none!important}
.logout-btn{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--mute);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:color .2s,border-color .2s}
.logout-btn:hover{color:var(--danger);border-color:var(--danger)}
.profile-card-wrap{position:relative;max-width:440px;width:100%;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.08)}

.chat-header-wrap{display:flex;flex-direction:column;background:var(--panel);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
.who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;cursor:pointer}
.who span{font-weight:700}
.who small{color:var(--mute);font-size:.82rem}
.who small.on{color:var(--online)}
.add{flex:none;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:none;font-size:.85rem}
.add.in{border-color:var(--accent);color:var(--accent)}
.back{display:none;background:none;border:0;font-size:1.4rem;padding:0 6px}

.pinned-banner{display:flex;align-items:center;gap:10px;padding:8px 16px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));border-top:1px solid var(--line);cursor:pointer;transition:background .2s}
.pinned-banner:hover{background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
.pinned-icon{color:var(--accent);font-size:1.1rem;flex:none;display:flex;align-items:center}
.pinned-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.pinned-title{font-size:.78rem;font-weight:700;color:var(--accent)}
.pinned-text{font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinned-actions{display:flex;gap:6px;align-items:center;flex:none}
.pinned-actions button{background:none;border:0;color:var(--mute);font-size:1rem;padding:4px;border-radius:4px}
.pinned-actions button:hover{color:var(--ink);background:color-mix(in srgb,currentColor 10%,transparent)}

.msg-area-wrap{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px}

.scroll-bottom{position:absolute;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.2rem;cursor:pointer;z-index:10;transition:transform .2s,opacity .2s}
.scroll-bottom:hover{transform:scale(1.08)}
.scroll-bottom.hidden{display:none!important}
.newsep{align-self:stretch;display:flex;align-items:center;gap:12px;margin:12px 0 6px;color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.01em;user-select:none;-webkit-user-select:none;animation:fade .3s}
.newsep::before,.newsep::after{content:'';flex:1;height:1px;background:color-mix(in srgb,var(--accent) 38%,transparent)}
.scroll-bottom .badge{position:absolute;top:-4px;right:-4px;font-size:.7rem;padding:2px 6px;min-width:18px}

.m{max-width:min(75%,520px);padding:8px 12px;border-radius:14px;background:var(--in);word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;position:relative;user-select:text}
.m.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.m:not(.me){border-bottom-left-radius:4px}
.m small{display:block;opacity:.7;font-size:.72rem;text-align:right;margin-top:2px}
.none{margin:auto;color:var(--mute);text-align:center;padding:20px}
.m.del,.m.me.del{background:transparent;border:1px dashed var(--line);color:var(--mute);font-style:italic;cursor:default}

.m a{color:inherit;text-decoration:underline;word-break:break-all}
.m.me a{color:#fff}

.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.reaction-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,currentColor 12%,transparent);border:1px solid color-mix(in srgb,currentColor 20%,transparent);font-size:.8rem;cursor:pointer;transition:transform .1s}
.reaction-badge:active{transform:scale(.92)}
.reaction-badge.active{background:color-mix(in srgb,var(--accent) 25%,transparent);border-color:var(--accent)}

.m{cursor:pointer}
.m.flash{animation:flash 1s}
@keyframes flash{0%,60%{filter:brightness(1.35)}100%{filter:none}}

.msg-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90;animation:fade .2s}
.msg-context-menu{position:fixed;z-index:95;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);min-width:220px;overflow:hidden;animation:popIn .2s cubic-bezier(.2,.8,.2,1)}
.context-reactions{display:flex;justify-content:space-around;padding:10px 12px;background:var(--bg);border-bottom:1px solid var(--line);font-size:1.4rem}
.context-reactions span{cursor:pointer;padding:4px;border-radius:50%;transition:transform .15s}
.context-reactions span:hover{transform:scale(1.3)}
.context-actions button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:12px 16px;font-size:.95rem;color:var(--ink)}
.context-actions button:hover{background:var(--bg)}
.context-actions button.danger{color:var(--danger)}

.quote{display:block;margin-bottom:4px;padding:4px 8px;border-left:3px solid currentColor;border-radius:4px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:.85rem;cursor:pointer;overflow:hidden}
.quote b{display:block;font-size:.78rem;opacity:.8}
.quote span{display:block;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.replybar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-top:1px solid var(--line)}
.replybar.hidden{display:none}
.replybar .rq{flex:1;min-width:0;padding-left:8px;border-left:3px solid var(--accent);font-size:.88rem}
.replybar .rq b{display:block;color:var(--accent);font-size:.8rem}
.replybar .rq span{display:block;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replybar button{background:none;border:0;color:var(--mute);font-size:1.1rem}
.tk{margin-left:5px;font-weight:700;opacity:.5}
.tk.rd{opacity:1;color:var(--read)}
form.send{display:flex;gap:8px;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line)}
form.send input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:22px;background:var(--bg)}
form.send button{padding:0 18px;border:0;border-radius:22px;background:var(--accent);color:var(--on-accent);font-weight:700}

@media(max-width:700px){
  #app{grid-template-columns:1fr}
  #app.chat aside,#app.profile aside{display:none}
  #app:not(.chat):not(.profile) main{display:none}
  .back{display:block}
}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes popL{from{opacity:0;transform:translateX(-14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes popR{from{opacity:0;transform:translateX(14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes tickPop{0%{transform:scale(.4)}60%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--online) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

body,aside,main,.head,.top,.search,.tabs,.msgs,.sbar,.note,.card,dialog,form.send,.m,.contact,.day,.menu,input{transition:background-color .3s,color .3s,border-color .3s}
button{transition:transform .12s,background-color .2s,color .2s,border-color .2s,opacity .2s,filter .2s}
.btn:hover,form.send button:hover{filter:brightness(1.1)}
.btn:active,form.send button:active,.add:active,.seg button:active{transform:scale(.96)}
.add:hover{border-color:var(--accent)}
.contact:active{transform:scale(.99)}
.tabs button:hover{color:var(--ink)}
.card input:focus,.search input:focus,form.send input:focus,.sbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
input{transition:border-color .2s,box-shadow .2s,background-color .3s}

#auth:not(.hidden) .card{animation:rise .45s cubic-bezier(.2,.8,.2,1)}
#auth:not(.hidden) .foot{animation:fade .8s}
#app:not(.hidden){animation:fade .35s}
#unameWrap:not(.hidden),#agreeWrap:not(.hidden),#forgotBtn:not(.hidden){animation:drop .25s}
.swap{animation:fade .25s}
.m.pop-l{animation:popL .28s cubic-bezier(.2,.8,.2,1);transform-origin:left bottom}
.m.pop-r{animation:popR .28s cubic-bezier(.2,.8,.2,1);transform-origin:right bottom}
.tk.pop{display:inline-block;animation:tickPop .4s cubic-bezier(.2,.8,.2,1)}
.day{animation:fade .3s}
.menu:not(.hidden),.found:not(.hidden),.sbar:not(.hidden){animation:drop .18s cubic-bezier(.2,.8,.2,1)}
dialog[open]{animation:popIn .22s cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{animation:fade .22s}
.dot,.dot-big{animation:pulse 2.4s infinite}
@media(max-width:700px){
  #app.chat main{animation:slideIn .28s cubic-bezier(.2,.8,.2,1)}
  #app:not(.chat) aside{animation:slideBack .28s cubic-bezier(.2,.8,.2,1)}
}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.m{width:fit-content}
.m:not(.me){align-self:flex-start}
.tdots{display:inline-flex;gap:2px;margin-left:3px;vertical-align:middle}
.tdots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:blink 1.2s infinite}
.tdots i:nth-child(2){animation-delay:.2s}
.tdots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes vanish{
  0%{opacity:1;transform:scale(1);height:var(--h)}
  55%{opacity:0;transform:scale(.8);height:var(--h);margin-bottom:0}
  100%{opacity:0;transform:scale(.8);height:0;padding-top:0;padding-bottom:0;margin-bottom:-6px}
}
.m.gone{animation:vanish .38s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none;overflow:hidden}
#dlg p{margin:0 0 14px;line-height:1.45}
#dlg input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);margin-bottom:14px}
#dlg input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.dlgBtns{display:flex;gap:10px;justify-content:flex-end}
.dlgBtns button{padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:none}
#dlgYes{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
#dlgYes.danger{background:none;color:var(--danger);border-color:var(--danger)}
.toast{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;max-width:min(90vw,420px);bottom:calc(24px + env(safe-area-inset-bottom,0px));padding:10px 16px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:.9rem;z-index:100;animation:rise .25s cubic-bezier(.2,.8,.2,1)}

/* ===== Netu · новый дизайн: «ночное стекло» ===== */
:root{
  --bg:#061317;--panel:#0C1D22;--panel-2:#12282E;--in:#14282E;
  --ink:#EAF4F2;--mute:#86A5A6;--line:rgba(var(--t),.075);
  --accent:#E4F25B;--on-accent:#17200A;--danger:#FF9494;--online:#5BE49B;--read:#E4F25B;
  --me-a:#0A8377;--me-b:#0A6E88;--r-lg:26px;
  --font-display:'Unbounded','Manrope',system-ui,sans-serif;
  color-scheme:dark}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--t),.18) transparent}
html{background:#040E11}
body{font:15.5px/1.45 Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 620px at 6% -8%,rgba(18,180,160,.22),transparent 62%),radial-gradient(760px 560px at 100% 4%,rgba(92,100,240,.16),transparent 60%),radial-gradient(800px 600px at 78% 112%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),#040E11;
  background-attachment:fixed}
input::placeholder{color:var(--mute);opacity:1}
input[type=checkbox]{accent-color:var(--accent)}

/* вход */
#auth{background:transparent}
.card{max-width:410px;padding:38px 34px;background:rgba(12,29,34,.8);border:1px solid var(--line);border-radius:32px;box-shadow:0 40px 90px -30px rgba(0,0,0,.75);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px;font:600 1.7rem/1 var(--font-display);letter-spacing:-.02em}
.brand i{position:relative;display:block;width:34px;height:34px;border-radius:12px 12px 12px 4px;background:var(--accent)}
.brand i::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#0C1D22}
.card h1{font:600 1.3rem/1.2 var(--font-display);letter-spacing:-.01em}
.card p{color:var(--mute)}
.card label{font-weight:600;font-size:.86rem}
.card input{padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(var(--t),.05)}
.card input:focus,#dlg input:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.btn{padding:14px;border-radius:16px;margin-top:22px;font-weight:800;background:var(--accent);color:var(--on-accent);box-shadow:0 12px 28px -12px color-mix(in srgb,var(--accent) 60%,transparent)}
.link{color:var(--accent);text-underline-offset:3px}
.foot,.foot a{color:var(--mute)}
.foot a{text-decoration-color:rgba(var(--t),.25)}

/* каркас: две плавающие панели */
@media(min-width:701px){
  #app{padding:14px;gap:14px;grid-template-columns:minmax(300px,380px) 1fr}
  aside,main{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 70px -24px rgba(0,0,0,.65);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
}
aside{background:rgba(10,26,31,.82);border-right:0}
main{background:rgba(9,22,27,.7)}

/* боковая панель */
.top{padding:20px 20px 12px;padding-top:calc(20px + env(safe-area-inset-top,0px));border-bottom:0;gap:12px}
.top::after{content:"netu";font:600 .95rem/1 var(--font-display);letter-spacing:.01em;color:var(--accent)}
.top-user b{font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
.mini-avatar{width:50px;height:50px;font-size:1.15rem;font-weight:700}
.top .mini-avatar{width:44px;height:44px}
.dot{width:13px;height:13px;border:3px solid var(--panel);right:-1px;bottom:-1px}
.search{padding:4px 18px 12px;border-bottom:0}
.search input{padding:12px 16px 12px 44px;border:1px solid transparent;border-radius:16px;background:rgba(var(--t),.055) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2386A5A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px 50%}
.search input:focus{background-color:rgba(var(--t),.08);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.found{left:18px;right:18px;background:var(--panel-2);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px rgba(0,0,0,.5)}
.found button{padding:12px 16px}
.found button:hover{background:rgba(var(--t),.06)}
.tabs{margin:0 18px 10px;padding:4px;gap:4px;border:0;background:rgba(var(--t),.05);border-radius:16px}
.tabs button{padding:9px;border:0;border-radius:12px;font-weight:600;color:var(--mute)}
.tabs button.on{background:var(--panel-2);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.35),inset 0 0 0 1px var(--line)}
.list{padding:4px 10px 18px}
.contact{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:10px 12px;margin:0 0 2px;border:0;border-radius:20px}
.contact:hover{background:rgba(var(--t),.05)}
.contact.on{background:linear-gradient(135deg,rgba(18,160,150,.32),rgba(10,110,136,.28));box-shadow:inset 0 0 0 1px rgba(var(--t),.08)}
.contact b{font-weight:700;font-size:1rem}
.contact span.s{font-size:.9rem;margin-top:1px}
.contact.on span.s{color:rgba(255,255,255,.75)}
.cmeta{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;align-self:stretch}
.ctime{font-size:.74rem;color:var(--mute);font-variant-numeric:tabular-nums}
.badge{display:flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.74rem}
.empty{color:var(--mute)}

/* шапка чата */
.chat-header-wrap{background:rgba(var(--t),.025);border-bottom:1px solid var(--line)}
.head{padding:14px 22px;padding-top:calc(14px + env(safe-area-inset-top,0px));gap:14px}
.who span{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.who small{font-size:.84rem}
.who small.on{color:var(--online)}
.add{padding:8px 14px;border:0;border-radius:14px;background:rgba(var(--t),.06);font-weight:600}
.add:hover{background:rgba(var(--t),.1)}
.add.in{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.back{width:40px;height:40px;padding:0;border-radius:50%;background:rgba(var(--t),.06);font-size:1.6rem;line-height:1}
.pinned-banner{padding:9px 22px;background:color-mix(in srgb,var(--accent) 7%,transparent);border-top:1px solid var(--line)}
.sbar{padding:10px 22px;background:transparent;border-bottom:1px solid var(--line)}
.sbar input{border:0;border-radius:14px;background:rgba(var(--t),.06);padding:10px 14px}

/* переписка */
.msg-area-wrap{background:radial-gradient(700px 460px at 92% 6%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 62%),radial-gradient(760px 520px at 4% 96%,rgba(20,184,166,.12),transparent 62%)}
.msgs{padding:22px 26px 14px;gap:3px}
.m{max-width:min(76%,540px);padding:9px 14px 7px;background:var(--in);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.25);line-height:1.42;font-size:1rem}
.m:not(.me){border-radius:20px 20px 20px 6px}
.m.me{border:0;border-radius:20px 20px 6px 20px;background:linear-gradient(135deg,var(--me-a),var(--me-b));color:#fff;box-shadow:0 8px 20px -8px rgba(10,110,136,.7)}
.m.del,.m.me.del{background:transparent;border:1px dashed var(--line);box-shadow:none;color:var(--mute)}
.m small{margin-top:3px;font-size:.72rem;opacity:.6;font-variant-numeric:tabular-nums}
.m.me small{color:rgba(255,255,255,.78);opacity:1}
.m.me .tk{opacity:1;color:rgba(255,255,255,.35);font-weight:500;transition:color .3s,text-shadow .3s}
.m.me .tk.rd{color:var(--accent);font-weight:900;text-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}
.m a{color:#9FE7DC;text-decoration-color:rgba(var(--t),.3);text-underline-offset:3px}
.m.me a{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.quote{border-left-width:3px;border-radius:8px;background:rgba(var(--t),.09)}
.m:not(.me) .quote{border-left-color:var(--accent)}
.reaction-badge{background:rgba(var(--t),.1);border-color:transparent}
.reaction-badge.active{background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:var(--accent)}
.day{margin:14px 0 6px;padding:5px 14px;border:0;background:rgba(var(--t),.07);color:var(--ink);opacity:.9;font-weight:600;font-size:.78rem;backdrop-filter:blur(10px)}
.none{color:var(--mute)}
.scroll-bottom{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.45)}

/* ввод сообщения */
.replybar{margin:8px 18px 0;padding:10px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:18px}
.note{margin:10px 18px 18px;border:1px solid var(--line);border-radius:18px;background:var(--panel-2)}
form.send{margin:10px 18px 18px;padding:7px 7px 7px 10px;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:30px;box-shadow:0 14px 34px -12px rgba(0,0,0,.6);transition:border-color .2s,box-shadow .2s}
form.send:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 14px 34px -12px rgba(0,0,0,.6),0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
form.send input,form.send input:focus{padding:11px 8px;border:0;border-radius:24px;background:transparent;box-shadow:none;font-size:1rem}
form.send button{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:50%;background:var(--accent);color:var(--on-accent);transition:opacity .2s,transform .12s,filter .2s}
form.send button svg{width:21px;height:21px}
form.send:has(input:placeholder-shown) button{opacity:.5}

/* профиль, настройки */
.profile-screen{background:rgba(7,18,22,.82);backdrop-filter:blur(34px) saturate(150%);-webkit-backdrop-filter:blur(34px) saturate(150%)}
.profile-screen .head{border-bottom:1px solid var(--line)}
#profBack{display:flex;align-items:center;justify-content:center;flex:none}
.profile-card-wrap{max-width:470px;padding:44px 32px 32px;background:rgba(var(--t),.035);border:1px solid var(--line);border-radius:32px;box-shadow:none}
.big-avatar{width:112px;height:112px;font-size:2.6rem;font-weight:700;border:0;box-shadow:0 0 0 4px var(--panel),0 0 0 6px rgba(var(--t),.09),0 20px 40px -10px rgba(0,0,0,.55)}
.dot-big{border-color:var(--panel)}
#profUsername{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.logout-btn{background:rgba(var(--t),.05);border:0}
.logout-btn:hover{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.seg{padding:4px;gap:4px;border:0;border-radius:14px;background:rgba(var(--t),.05)}
.seg button{padding:9px;border-radius:10px;font-weight:600;color:var(--mute)}
.seg button.on{background:var(--accent);color:var(--on-accent)}
.bl button,.danger{border-radius:14px}
.danger{border-color:transparent;background:color-mix(in srgb,var(--danger) 15%,transparent)}

/* кнопки профиля: все залиты, один размер */
.pbtn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;padding:0 16px;border:0;border-radius:16px;background:rgba(var(--t),.08);color:var(--ink);font-weight:700;font-size:1rem}
.pbtn:hover{background:rgba(var(--t),.13)}
.pbtn.in{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.pbtn-main,.pbtn-main:hover{background:var(--accent);color:var(--on-accent);box-shadow:0 12px 28px -12px color-mix(in srgb,var(--accent) 60%,transparent)}
.pbtn-main:hover{filter:brightness(1.08)}
.pbtn-danger{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
.pbtn-danger:hover{background:color-mix(in srgb,var(--danger) 24%,transparent)}
.pbtn-sm{width:auto;height:38px;padding:0 16px;border-radius:12px;font-size:.92rem;font-weight:600}
.bl button{border:0;background:rgba(var(--t),.08);border-radius:12px;padding:7px 14px;font-weight:600}
.dlgBtns button{border:0;background:rgba(var(--t),.08);font-weight:600}
#dlgYes,#dlgYes.danger{border:0}
#dlgYes.danger{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}

/* пересылка и «Переслано от» */
.fwd{margin-bottom:4px;font-size:.8rem;font-weight:700;color:var(--accent)}
.m.me .fwd{color:rgba(255,255,255,.88)}
dialog.fwd-dlg{padding:0;width:min(420px,92vw)}
.fwd-in{padding:22px}
.fwd-in h3{margin:0 0 14px;font:600 1.1rem var(--font-display);letter-spacing:-.01em}
#fwdQ{width:100%;padding:11px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:rgba(var(--t),.05);color:var(--ink)}
#fwdQ:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
#fwdList{max-height:min(50vh,380px);overflow-y:auto;margin:0 -6px 12px;padding:0 6px}
#fwdList .contact{width:100%;text-align:left}

#delDlg h3{margin-bottom:8px}
.dhint{margin:0 0 16px;color:var(--mute);font-size:.9rem}
.del-btns{display:flex;flex-direction:column;gap:8px}

/* закреплённые чаты */
.cpin{display:flex;align-items:center;color:var(--mute)}
.contact.pinned:not(.on){background:rgba(var(--t),.03)}

/* контекстное меню сообщения: все реакции помещаются, меню не вылезает за экран */
.msg-context-menu{width:max-content;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow-y:auto}
.context-reactions{gap:2px;justify-content:space-between;padding:10px 12px;font-size:1.35rem}
.context-reactions span{flex:none;line-height:1}

/* плашка «нет в ваших контактах» */
.stranger{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:12px 18px 0;padding:14px 16px;border:1px solid var(--line);border-radius:20px;background:rgba(var(--t),.045)}
.st-text{display:flex;flex-direction:column;min-width:0}
.st-text b{font-weight:700}
.st-text span{font-size:.85rem;color:var(--mute);overflow-wrap:anywhere}
.st-actions{display:flex;gap:8px;flex-wrap:wrap}
.st-actions .pbtn-sm{height:40px}
@media(max-width:700px){.stranger{margin:8px 10px 0}}

/* окна и меню */
dialog{padding:26px;background:var(--panel-2);border:1px solid var(--line);border-radius:28px;box-shadow:0 40px 100px rgba(0,0,0,.65)}
dialog::backdrop{background:rgba(2,8,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#dlg input{padding:12px 14px;border-radius:14px;background:rgba(var(--t),.05)}
.dlgBtns button{padding:10px 18px;border-radius:14px}
#dlgYes{border-radius:14px}
.menu,.msg-context-menu{background:rgba(18,40,46,.94);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.menu button:hover,.context-actions button:hover{background:rgba(var(--t),.06)}
.context-reactions{background:rgba(var(--t),.04);border-bottom:1px solid var(--line)}
.msg-backdrop{background:rgba(2,8,10,.5);backdrop-filter:blur(3px)}
.toast{background:var(--ink);color:#0A1A1E;border-radius:16px;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.5)}

/* сенсорные экраны: без синего выделения текста и вспышки при нажатии */
*{-webkit-tap-highlight-color:transparent}
@media(hover:none) and (pointer:coarse){
  *,.m,.m *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea{-webkit-user-select:text;user-select:text}
}

/* телефон: на весь экран */
@media(max-width:700px){
  @supports(height:100dvh){#app{height:100dvh}}
  aside{background:linear-gradient(180deg,#0E2227,#0A181C)}
  main{background:#071519}
  .head{padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .msgs{padding:16px 12px 8px}
  .m{max-width:84%}
  form.send{margin:8px 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .replybar{margin:8px 10px 0}
  .note{margin:8px 10px calc(10px + env(safe-area-inset-bottom,0px))}
}

/* вложения, упоминания, сессии */
form.send button.attach{background:transparent;color:var(--mute);opacity:1!important;width:40px;box-shadow:none}
form.send button.attach:hover{color:var(--ink);filter:none}
form.send.has-files button:not(.attach){opacity:1!important}
form.send.busy{opacity:.6;pointer-events:none}
.attbar{display:flex;gap:8px;overflow-x:auto;margin:8px 18px 0;padding:8px;background:var(--panel-2,var(--panel));border:1px solid var(--line);border-radius:18px}
.attbar.hidden{display:none}
.chip{flex:none;display:flex;align-items:center;gap:8px;max-width:210px;height:56px;padding:0 8px 0 6px;background:var(--bg);border:1px solid var(--line);border-radius:12px;font-size:.82rem}
.chip img{width:44px;height:44px;object-fit:cover;border-radius:8px}
.chip .ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip button{background:none;border:0;color:var(--mute);font-size:1rem;padding:0 2px}
.att-img{display:block;width:min(320px,62vw);max-width:100%;min-height:80px;border-radius:12px;margin:0 0 4px;cursor:zoom-in;background:rgba(var(--t),.08);object-fit:cover}
.att-file{display:flex;align-items:center;gap:10px;padding:4px 2px 6px;cursor:pointer;white-space:normal}
.att-file .ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(var(--t),.14);display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.att-file b{display:block;font-size:.92rem;word-break:break-all}
.att-file span{display:block;font-size:.78rem;opacity:.75}
a.mention{font-weight:700;text-decoration:none!important;cursor:pointer}
a.mention:hover{text-decoration:underline!important}
#lightbox{position:fixed;inset:0;z-index:200;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out;overflow:hidden}
.lb-jump{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;border:0;border-radius:18px;padding:9px 16px;background:rgba(255,255,255,.18);color:#fff;font-weight:700;cursor:pointer}
#lightbox img{max-width:100%;max-height:100%;border-radius:8px}
main.dragging{outline:2px dashed var(--accent);outline-offset:-8px}
.sess{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0}
.sess div{min-width:0}.sess small{display:block;color:var(--mute);font-size:.78rem}
.sess button{flex:none;border:0;background:rgba(var(--t),.08);border-radius:12px;padding:7px 14px;font-weight:600}
.sg{margin-bottom:10px;border:1px solid var(--line);border-radius:16px;background:rgba(var(--t),.03);overflow:hidden}
.sg summary{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;cursor:pointer;list-style:none}
.sg summary::-webkit-details-marker{display:none}
.sg summary::after{content:'›';font-size:1.3rem;color:var(--mute);transition:transform .2s}
.sg[open] summary::after{transform:rotate(90deg)}
.sg>div{padding:0 16px 16px}

:root{--t:255,255,255}
html[data-theme=light]{--bg:#EDF3F3;--panel:#fff;--panel-2:#F5F9F9;--in:#E6EEEE;--ink:#10242A;--mute:#587479;--line:rgba(10,40,48,.13);--danger:#C2362F;--online:#1FA56A;--t:12,38,46;color-scheme:light}
html[data-theme=light],html[data-theme=light] body{background:#E9F0F0}
html[data-theme=light] body{background:radial-gradient(900px 620px at 6% -8%,rgba(18,180,160,.16),transparent 62%),radial-gradient(760px 560px at 100% 4%,rgba(92,100,240,.10),transparent 60%),#E9F0F0}
html[data-theme=light] .card{background:rgba(255,255,255,.88)}
html[data-theme=light] .brand i::after{background:#fff}
html[data-theme=light] aside{background:rgba(255,255,255,.85)}
html[data-theme=light] main{background:rgba(247,251,251,.78)}
html[data-theme=light] .profile-screen{background:rgba(240,246,246,.92)}
html[data-theme=light] .menu,html[data-theme=light] .msg-context-menu{background:rgba(255,255,255,.97)}
html[data-theme=light] .toast{color:#fff}
html[data-theme=light] .m{box-shadow:0 1px 2px rgba(0,0,0,.08)}
html[data-theme=light] .m a{color:var(--accent)}
html[data-theme=light] .m.me a{color:#fff}
html[data-theme=light] .m.me .tk{color:rgba(255,255,255,.4)}
html[data-theme=light] .m.me .tk.rd{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.7)}
html[data-theme=light] .contact.on span.s{color:var(--mute)}
html[data-theme=light] dialog::backdrop,html[data-theme=light] .msg-backdrop{background:rgba(20,40,46,.35)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:0;box-shadow:0 0 0 2px var(--line)}
.sw.on{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--ink)}
.badge.muted{background:var(--mute)!important;color:var(--bg)!important}
.arch-row{justify-content:flex-start;color:var(--mute);font-weight:600}
.m a.lp{display:block;width:min(320px,62vw);white-space:normal;word-break:normal;text-decoration:none!important;margin:6px 0 2px;border-radius:12px;overflow:hidden;background:rgba(var(--t),.1);border-left:3px solid var(--accent);color:inherit!important}
.lp img{display:block;width:100%;height:150px;object-fit:cover}
.lp-t{padding:8px 10px}.lp-t b{display:block;font-size:.92rem;line-height:1.3}
.lp-s{display:block;font-size:.72rem;opacity:.7}
.lp-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem;opacity:.8;margin-top:2px}

.selbar{display:none;align-items:center;gap:8px;margin:10px 18px 18px;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:30px}
#app.selecting .selbar{display:flex}
#app.selecting #sendForm,#app.selecting #attBar,#app.selecting #replyBar,#app.selecting #blockNote{display:none!important}
.selbar b{flex:1;min-width:0;padding-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selbar button{border:0;border-radius:18px;padding:9px 14px;font-weight:700;background:rgba(var(--t),.08);white-space:nowrap}
.selbar button:hover{background:rgba(var(--t),.14)}
.selbar #selX{width:38px;padding:9px 0;border-radius:50%}
.selbar .sdel{color:var(--danger)}
.ctx-sep{height:1px;margin:4px 0;background:var(--line)}
#app.selecting .msgs{container-type:inline-size;padding-left:60px}
#app.selecting .m{cursor:pointer;user-select:none;-webkit-user-select:none}
#app.selecting .m::before{content:'';position:absolute;top:50%;margin-top:-11px;left:-41px;width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:2px solid rgba(var(--t),.4);transition:background .15s,border-color .15s}
#app.selecting .m.sel::before{content:'✓';background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-size:13px;font-weight:800;line-height:18px;text-align:center;animation:selpop .2s cubic-bezier(.2,.8,.2,1)}
#app.selecting .m.sel{outline:0;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent)}
.selbar.none button:not(#selX){opacity:.4;pointer-events:none}
#app.selecting .m.me::before{left:calc(100% - 100cqw - 40px)}
@keyframes selpop{from{transform:scale(.4)}to{transform:scale(1)}}
@media(max-width:560px){#app.selecting .msgs{padding-left:48px}#app.selecting .m::before{left:-37px}#app.selecting .m.me::before{left:calc(100% - 100cqw - 36px)}}
@media(max-width:560px){.selbar{margin:8px 10px 12px}.selbar .lbl{display:none}}
.found{max-height:60vh;overflow-y:auto}
.found-h{padding:8px 14px 4px;font-size:.74rem;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.found .hit b{display:block;font-size:.9rem}
.found .hit span{display:block;color:var(--mute);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.found .hit mark{background:none;color:var(--accent);font-weight:700}

.ico{display:inline-flex;width:1.15em;height:1.15em;margin-right:.3em;vertical-align:-.2em;flex:none}
.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
img.emoji{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;margin:0 .04em;-webkit-user-drag:none;user-select:text}
.sg summary{justify-content:flex-start;gap:.5em}
.sg summary::after{margin-left:auto}
.selbar .ico{margin-right:0}
.selbar .lbl{margin-left:.15em}

.m{touch-action:pan-y}
.msgs{overflow-x:hidden}
.m.swiping::before,.m.swiping::after{content:'';position:absolute;top:50%;right:calc(100% + 10px);width:30px;height:30px;margin-top:-15px;opacity:var(--sp,0)}
.m.swiping::before{border-radius:50%;background:rgba(var(--t),.16);transform:scale(var(--ss,.6))}
.m.swiping::after{background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='9%2017%204%2012%209%207'/%3E%3Cpath%20d='M20%2018v-2a4%204%200%200%200-4-4H4'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='9%2017%204%2012%209%207'/%3E%3Cpath%20d='M20%2018v-2a4%204%200%200%200-4-4H4'/%3E%3C/svg%3E") center/16px no-repeat}
dialog#mediaDlg{padding:0;width:min(560px,94vw);height:min(660px,84vh);max-height:none;overflow:hidden;flex-direction:column}
dialog#mediaDlg[open]{display:flex}
.mhd{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.mhd b{flex:1;min-width:0;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhd button{flex:none;border:0;width:34px;height:34px;border-radius:50%;background:rgba(var(--t),.08);color:var(--ink)}
#mediaTabs{margin:0 18px 6px}
.mbx{flex:1;overflow-y:auto;padding:2px 14px 16px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mh{grid-column:1/-1;margin:14px 4px 6px;font-size:.76rem;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.mth{aspect-ratio:1;border:0;padding:0;border-radius:10px;overflow:hidden;background:rgba(var(--t),.08);cursor:zoom-in}
.mth img{width:100%;height:100%;object-fit:cover;display:block}
.mrow{display:flex;align-items:center;gap:6px;border-radius:12px}
.mrow:hover{background:rgba(var(--t),.06)}
.mrow .mmain{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;color:var(--ink);text-align:left;padding:9px 6px}
.mrow .ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(var(--t),.1);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.mrow b{display:block;font-size:.92rem;word-break:break-all}
.mrow small{display:block;color:var(--mute);font-size:.78rem}
.mrow .mgo{flex:none;border:0;border-radius:14px;padding:7px 12px;margin-right:6px;background:rgba(var(--t),.08);color:var(--ink);font-weight:600;font-size:.82rem}
.mempty{padding:44px 10px;text-align:center;color:var(--mute)}

.emoji-panel{position:fixed;z-index:60;width:min(380px,calc(100vw - 20px));height:min(340px,50vh);display:flex;flex-direction:column;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px -12px rgba(0,0,0,.6)}
.emoji-panel.hidden{display:none}
.et{display:flex;gap:2px;padding:6px 8px;overflow-x:auto;border-bottom:1px solid var(--line);flex:none}
.et button{flex:none;width:36px;height:34px;border:0;border-radius:10px;background:none;color:var(--mute);font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.et button.on{background:rgba(var(--t),.12)}
.et button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eg{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));align-content:start;padding:8px}
.eg button{height:40px;border:0;border-radius:10px;background:none;font-size:1.6rem;display:flex;align-items:center;justify-content:center;padding:0}
.eg button:hover{background:rgba(var(--t),.1)}
.eg button img.emoji{width:30px;height:30px;margin:0;vertical-align:0}
.eg .eh{grid-column:1/-1;padding:20px 8px;text-align:center;color:var(--mute);font-size:.9rem}

#profActions.row{flex-direction:row!important;justify-content:center;gap:14px!important}
.pic{width:58px;height:58px;border:0;border-radius:20px;background:rgba(var(--t),.08);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s}
.pic:hover{background:rgba(var(--t),.14)}
.pic:active{transform:scale(.94)}
.pic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pic.main,.pic.main:hover{background:var(--accent);color:var(--on-accent)}
.pic.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.pic.danger{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
.pic.danger.on{background:var(--danger);color:#fff}
#profMoreBtn:hover{color:var(--ink);background:rgba(var(--t),.12)}
#profMoreBtn svg{fill:currentColor;stroke:none}
.pmenu{position:fixed;z-index:70;min-width:230px;padding:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px -10px rgba(0,0,0,.6)}
.pmenu button{display:block;width:100%;text-align:left;padding:11px 14px;border:0;border-radius:10px;background:none;color:var(--ink);font-weight:600}
.pmenu button:hover{background:rgba(var(--t),.08)}
.pmenu button.danger{color:var(--danger)}

/* ---- реакции «+» ---- */
.context-reactions .rx-more{display:flex;align-items:center;justify-content:center;width:1.55em;height:1.55em;padding:0;border-radius:50%;background:rgba(var(--t),.12);color:var(--mute)}
.context-reactions .rx-more svg{width:.62em;height:.62em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
/* ---- форматирование текста ---- */
.mbody code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;padding:1px 6px;border-radius:6px;background:rgba(128,128,128,.24);cursor:pointer;overflow-wrap:anywhere}
.spoiler{border-radius:5px;padding:0 2px;cursor:pointer;transition:background .2s}
.spoiler:not(.open){color:transparent!important;text-shadow:none;-webkit-user-select:none;user-select:none;background:repeating-linear-gradient(45deg,rgba(128,128,128,.55) 0 3px,rgba(128,128,128,.28) 3px 6px);background-size:12px 12px;animation:spShift 1s linear infinite}
.spoiler:not(.open) *{visibility:hidden}
.spoiler:not(.open) a{pointer-events:none}
.spoiler.open{background:rgba(128,128,128,.18)}
@keyframes spShift{to{background-position:12px 0}}
html[data-motion=off] .spoiler{animation:none}
.fmt-bar{position:fixed;z-index:61;display:flex;gap:2px;padding:5px;background:var(--panel-2);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px -10px rgba(0,0,0,.6)}
.fmt-bar.hidden{display:none}
.fmt-bar button{width:40px;height:36px;padding:0;border:0;border-radius:11px;background:none;color:var(--ink);font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.fmt-bar button:hover{background:rgba(var(--t),.12)}
.fmt-bar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---- вкладка «Ссылки» ---- */
#profTabs button,#mediaTabs button{padding:9px 4px;font-size:.88rem;white-space:nowrap}
.mrow a.mmain{text-decoration:none}
.mrow .lk-ic{overflow:hidden;font-weight:800;font-size:1.1rem}
.mrow .lk-ic img{width:100%;height:100%;object-fit:cover;display:block}
.mrow .lk-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink);opacity:.8}
.mrow .lk-u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow.lrow .mmain>div:last-child{min-width:0}
.mrow.lrow b{word-break:normal;overflow-wrap:anywhere}
/* ---- аватарки ---- */
.av-btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:3px solid var(--panel);border-radius:50%;background:var(--accent);color:var(--on-accent)}
.av-btn.hidden{display:none!important}
.av-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.av-add{right:-4px;bottom:-4px}
.av-del{right:-4px;top:-4px;width:30px;height:30px;background:var(--danger);color:#fff}
.av-del svg{width:14px;height:14px}
#avCanvas{display:block;width:min(280px,72vw);height:min(280px,72vw);margin:6px auto 16px;border-radius:50%;background:#000;touch-action:none;cursor:grab}
#avZoom{width:min(280px,72vw);display:block;margin:0 auto 14px}
.mini-avatar,.big-avatar{overflow:hidden}

/* ---------- голосовые сообщения ---------- */
.att-voice{display:flex;align-items:center;gap:10px;width:min(290px,66vw);padding:2px 0 4px;white-space:normal;user-select:none;-webkit-user-select:none}
.att-voice .vplay{flex:none;width:42px;height:42px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 18%,transparent);color:inherit;cursor:pointer;transition:transform .12s}
.att-voice .vplay:active{transform:scale(.92)}
.att-voice .vplay svg{width:18px;height:18px;fill:currentColor}
.att-voice .vplay .i-pause{display:none}
.att-voice.playing .vplay .i-play{display:none}
.att-voice.playing .vplay .i-pause{display:block}
.att-voice .vmid{flex:1;min-width:0}
.att-voice .vw{position:relative;height:28px;cursor:pointer;touch-action:pan-y}
.att-voice .vw .b{display:flex;align-items:center;gap:2px;height:100%}
.att-voice .vw .b i{flex:1;min-width:2px;max-width:5px;border-radius:2px;background:currentColor;opacity:.38}
.att-voice .vw .b.f{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.att-voice .vw .b.f i{opacity:1}
.att-voice .vt{display:block;font-size:.76rem;opacity:.8;font-variant-numeric:tabular-nums;margin-top:1px;text-align:left}
.att-voice .vrate{flex:none;min-width:40px;height:26px;padding:0 8px;border:0;border-radius:13px;background:color-mix(in srgb,currentColor 18%,transparent);color:inherit;font-family:inherit;font-weight:700;font-size:.74rem;line-height:1;cursor:pointer;font-variant-numeric:tabular-nums}
#recBar{display:none;flex:1;min-width:0;align-items:center;gap:10px}
form.send.rec #recBar{display:flex}
form.send{position:relative}
form.send.rec > :not(#recBar):not(#micBtn):not(#recLock){display:none!important}
form.send.rec.locked #micBtn{display:none}
form.send.holding #recCancel,form.send.holding #recSend{display:none}
#recHint{display:none;flex:none;font-size:.85rem;color:var(--mute);white-space:nowrap}
form.send.holding #recHint{display:block}
#micBtn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .15s,background .15s,color .15s,box-shadow .15s}
form.send.holding button#micBtn{background:var(--accent);color:var(--on-accent);transform:scale(1.3);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 28%,transparent)}
#recLock{display:none;position:absolute;right:6px;bottom:calc(100% + 14px);width:40px;height:68px;border-radius:20px;background:var(--panel-2,var(--panel));border:1px solid var(--line);box-shadow:0 8px 24px -8px rgba(0,0,0,.5);flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mute);pointer-events:none;animation:lockup 1.2s ease-in-out infinite}
@keyframes lockup{50%{transform:translateY(-5px)}}
form.send.holding #recLock{display:flex}
.att-voice .vw{overflow:hidden}
.att-voice .vw .b{gap:1px;overflow:hidden}
.att-voice .vw .b i{min-width:0}
.chat-header-wrap{position:relative;z-index:6}
.vbar{display:flex;align-items:center;gap:10px;position:absolute;left:0;right:0;top:100%;z-index:6;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 10px 18px -12px rgba(0,0,0,.55)}
.vbar.hidden{display:none}
.vbar button{border:0;background:none;color:var(--ink);cursor:pointer;padding:0}
#vbPlay{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent)!important;color:var(--on-accent)!important;display:flex;align-items:center;justify-content:center}
#vbPlay svg{width:16px;height:16px;fill:currentColor}
.vbar .i-pause{display:none}
.vbar.playing .i-play{display:none}
.vbar.playing .i-pause{display:block}
.vbi{flex:1;min-width:0;line-height:1.25;cursor:pointer}
.vbi b{display:block;font-size:.85rem;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbi span{display:block;font-size:.78rem;color:var(--mute);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vbRate{flex:none;min-width:40px;height:26px;padding:0 8px;border-radius:13px;background:rgba(var(--t),.1)!important;font-weight:700;font-size:.74rem}
#vbClose{flex:none;width:30px;height:30px;color:var(--mute);font-size:1rem}
.vbar .vbp{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent)}
.att-voice .vmeta{display:flex;align-items:center;gap:6px;margin-top:1px}
.att-voice .vt{margin-top:0}
.att-voice .vdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
#recBar .rdot{flex:none;width:10px;height:10px;border-radius:50%;background:#ff5a5f;animation:recp 1.1s ease-in-out infinite}
@keyframes recp{50%{opacity:.25}}
#recPause,#recPrev{flex:none}
#recPause .i-rec{display:none;color:#ff5a5f}
#recPause svg,#recPrev svg{width:20px;height:20px}
form.send.paused #recPause .i-pause{display:none}
form.send.paused #recPause .i-rec{display:block}
form.send.holding #recPause{display:none}
form.send button#recPrev{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
form.send button#recPrev svg{width:16px;height:16px}
form.send button#recPrev .i-pause{display:none}
form.send.paused button#recPrev{display:flex}
form.send.prev button#recPrev .i-play{display:none}
form.send.prev button#recPrev .i-pause{display:block}
form.send.paused #recBar .rdot{display:none}
#recTime{flex:none;min-width:40px;font-weight:600;font-variant-numeric:tabular-nums}
#recWave{flex:1;min-width:0;height:34px;color:var(--accent)}

/* форма ввода: узкие экраны, микрофон ⇄ отправка */
form.send input#text{flex:1;width:0;min-width:0}
form.send #recSend{opacity:1!important;animation:recglow 1.6s ease-out infinite}
@keyframes recglow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 11px transparent}}
.mrow.vrow{padding:4px 2px 4px 8px}
.mrow.vrow .vbox{flex:1;min-width:0}
.mrow.vrow .att-voice{width:100%}
.mrow.vrow .vd{display:block;color:var(--mute);font-size:.74rem;margin-bottom:2px}
@media(max-width:560px){#mediaTabs{margin:0 10px 6px}#mediaTabs button{font-size:.8rem}}
form.send:has(#text:placeholder-shown):not(.has-files):not(.rec) > button[aria-label="Отправить"]{display:none}
form.send:has(#text:not(:placeholder-shown)) #micBtn,form.send.has-files #micBtn{display:none}
@media(max-width:700px){
  form.send{gap:2px;padding-left:6px}
  form.send button.attach{width:36px}
  #recBar{gap:8px}
}
/* ---------- как в Telegram: группировка, часики, плавающая дата, меню сообщения ---------- */
.m{transition:background-color .3s,color .3s,border-color .3s,border-radius .22s}
.m:not(.me){border-radius:20px 20px 20px 4px}
.m.me{border-radius:20px 20px 4px 20px}
.m:not(.me).gt{border-top-left-radius:12px}
.m:not(.me).gb{border-bottom-left-radius:12px}
.m.me.gt{border-top-right-radius:12px}
.m.me.gb{border-bottom-right-radius:12px}
.m.gt{margin-top:-2px}
.tk.pend{display:inline-block;vertical-align:-2px;opacity:.8;font-weight:400}
.tk.pend svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}
.tk.pend .mh{transform-origin:12px 12px;animation:clk 2.4s linear infinite}
@keyframes clk{to{transform:rotate(360deg)}}
.float-day{position:absolute;left:50%;top:10px;z-index:9;transform:translate(-50%,-6px);padding:5px 14px;border-radius:99px;background:color-mix(in srgb,var(--panel) 78%,transparent);border:1px solid var(--line);color:var(--ink);font-size:.78rem;font-weight:600;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 22px -10px rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap}
.float-day.show{opacity:1;transform:translate(-50%,0)}
.msg-backdrop{backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}
.msg-ghost{position:fixed;z-index:92;pointer-events:none;transform-origin:center;transition:transform .24s cubic-bezier(.2,.9,.3,1.25)}
.msg-ghost.lift{transform:scale(1.035)}
.msg-ghost .m{box-shadow:0 24px 50px -14px rgba(0,0,0,.7)}
.msg-ghost.cut{overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 34px),transparent);mask-image:linear-gradient(#000 calc(100% - 34px),transparent)}
.msg-react-bar.context-reactions{position:fixed;z-index:96;display:flex;align-items:center;gap:0;justify-content:flex-start;padding:5px 8px;border:1px solid var(--line);border-radius:99px;background:rgba(18,40,46,.94);box-shadow:0 18px 44px rgba(0,0,0,.5);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none;font-size:1.4rem;animation:rxIn .26s cubic-bezier(.2,.9,.3,1.15)}
.msg-react-bar.context-reactions::-webkit-scrollbar{display:none}
.msg-react-bar.context-reactions span:not(.rx-more){flex:none;padding:5px;line-height:1}
.msg-react-bar.context-reactions .rx-more{flex:none;margin-left:2px}
html[data-theme=light] .msg-react-bar.context-reactions{background:rgba(255,255,255,.97)}
.msg-context-menu{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
@keyframes rxIn{from{opacity:0;transform:translateY(8px) scale(.7)}to{opacity:1;transform:none}}
/* ещё штрихи: время в строке, подсветка, плавное закрытие меню */
.m.inl{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;column-gap:10px}
.m.inl > .quote,.m.inl > .fwd,.m.inl > .reactions{flex:0 0 100%}
.m.inl > .mbody{min-width:0}
.m.inl > small{flex:none;margin:0 0 1px;white-space:nowrap;line-height:1.3}
.msg-ghost{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.msg-ghost .m{transition:filter .3s}
.msg-ghost.lift .m{filter:brightness(1.15)}
#app.selecting .m.sel{filter:brightness(1.12)}
.msg-backdrop.out{animation:ctxFade .22s forwards;pointer-events:none}
.msg-context-menu.out,.msg-react-bar.out{animation:ctxOut .2s forwards;pointer-events:none}
@keyframes ctxFade{to{opacity:0}}
@keyframes ctxOut{to{opacity:0;transform:scale(.9)}}


/* ===== стекло, пружины, переходы, обои ===== */
main{isolation:isolate;--spring:cubic-bezier(.22,.9,.28,1)}
main::before,main::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
main::before{background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent 40%,rgba(20,170,170,.05))}
main::after{background:rgba(var(--t),.075);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27224%27%20height%3D%27224%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2814%2014%29%20rotate%28-10%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M12%2021s-8-5-8-11a4.5%204.5%200%200%201%208-2.7A4.5%204.5%200%200%201%2020%2010c0%206-8%2011-8%2011z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2884%2010%29%20rotate%2812%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M3%2011%2021%203l-6%2018-3-8zM12%2013l9-10%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28154%2016%29%20rotate%28-6%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M4%205h16v11h-9l-5%204v-4H4z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2812%2084%29%20rotate%288%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M20%2014A8%208%200%201%201%2010%204a6%206%200%200%200%2010%2010z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2882%2080%29%20rotate%28-12%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M9%2018V6l10-2v12M9%2018a3%203%200%201%201-3-3M19%2016a3%203%200%201%201-3-3%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28152%2086%29%20rotate%286%2012%2012%29%20scale%281.1%29%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M8%2014a5%205%200%200%200%208%200M9%209.5v.5M15%209.5v.5%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2814%20154%29%20rotate%28-8%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M7%2018a4%204%200%200%201%200-8%205%205%200%200%201%209.500-1A4.500%204.500%200%200%201%2017%2018z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2888%20152%29%20rotate%2810%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M13%202%204%2014h7l-1%208%209-12h-7z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28154%20156%29%20rotate%28-14%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27m12%203%202.700%205.500%206%20.9-4.400%204.200%201%206-5.300-2.800L6.700%2019.600l1-6L3.300%209.400l6-.9z%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2754%27%20cy%3D%2756%27%20r%3D%272.500%27%2F%3E%3Cpath%20d%3D%27M124%2048v10M119%2053h10%27%2F%3E%3Ccircle%20cx%3D%27198%27%20cy%3D%2762%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%27128%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M126%20124v10M121%20129h10%27%2F%3E%3Ccircle%20cx%3D%27214%27%20cy%3D%27134%27%20r%3D%272.500%27%2F%3E%3Cpath%20d%3D%27M54%20200v10M49%20205h10%27%2F%3E%3Ccircle%20cx%3D%27126%27%20cy%3D%27210%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27206%27%20cy%3D%27206%27%20r%3D%272.500%27%2F%3E%3C%2Fsvg%3E") 0 0/224px;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27224%27%20height%3D%27224%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2814%2014%29%20rotate%28-10%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M12%2021s-8-5-8-11a4.5%204.5%200%200%201%208-2.7A4.5%204.5%200%200%201%2020%2010c0%206-8%2011-8%2011z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2884%2010%29%20rotate%2812%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M3%2011%2021%203l-6%2018-3-8zM12%2013l9-10%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28154%2016%29%20rotate%28-6%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M4%205h16v11h-9l-5%204v-4H4z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2812%2084%29%20rotate%288%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M20%2014A8%208%200%201%201%2010%204a6%206%200%200%200%2010%2010z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2882%2080%29%20rotate%28-12%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M9%2018V6l10-2v12M9%2018a3%203%200%201%201-3-3M19%2016a3%203%200%201%201-3-3%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28152%2086%29%20rotate%286%2012%2012%29%20scale%281.1%29%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M8%2014a5%205%200%200%200%208%200M9%209.5v.5M15%209.5v.5%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2814%20154%29%20rotate%28-8%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M7%2018a4%204%200%200%201%200-8%205%205%200%200%201%209.500-1A4.500%204.500%200%200%201%2017%2018z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2888%20152%29%20rotate%2810%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27M13%202%204%2014h7l-1%208%209-12h-7z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28154%20156%29%20rotate%28-14%2012%2012%29%20scale%281.1%29%27%3E%3Cpath%20d%3D%27m12%203%202.700%205.500%206%20.9-4.400%204.200%201%206-5.300-2.800L6.700%2019.600l1-6L3.300%209.400l6-.9z%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2754%27%20cy%3D%2756%27%20r%3D%272.500%27%2F%3E%3Cpath%20d%3D%27M124%2048v10M119%2053h10%27%2F%3E%3Ccircle%20cx%3D%27198%27%20cy%3D%2762%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%27128%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M126%20124v10M121%20129h10%27%2F%3E%3Ccircle%20cx%3D%27214%27%20cy%3D%27134%27%20r%3D%272.500%27%2F%3E%3Cpath%20d%3D%27M54%20200v10M49%20205h10%27%2F%3E%3Ccircle%20cx%3D%27126%27%20cy%3D%27210%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27206%27%20cy%3D%27206%27%20r%3D%272.500%27%2F%3E%3C%2Fsvg%3E") 0 0/224px}
/* стеклянная шапка */
main>.chat-header-wrap{position:absolute;top:0;left:0;right:0;z-index:6;background:color-mix(in srgb,var(--bg) 58%,transparent);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
/* стеклянная нижняя панель */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none}
.dock>*{pointer-events:auto}
.dock form.send,.dock .replybar,.dock .attbar,.dock .note,.dock .selbar{background:color-mix(in srgb,var(--panel-2) 66%,transparent);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
.msgs{position:relative;padding-top:calc(var(--hh,64px) + 10px);padding-bottom:calc(var(--dh,84px) + 10px)}
.float-day{top:calc(var(--hh,64px) + 8px)}
.scroll-bottom{bottom:calc(var(--dh,84px) + 14px)}
/* пружинные пузыри и кнопки */
@keyframes springR{0%{opacity:0;transform:translate(26px,38px) scale(.6)}45%{opacity:1;transform:translate(-3px,-5px) scale(1.05)}70%{transform:translate(1px,2px) scale(.985)}100%{transform:none}}
@keyframes springL{0%{opacity:0;transform:translate(-18px,22px) scale(.8)}50%{opacity:1;transform:translate(2px,-3px) scale(1.03)}100%{transform:none}}
.m.pop-r{animation:springR .55s cubic-bezier(.25,.8,.35,1)}
.m.pop-l{animation:springL .45s cubic-bezier(.25,.8,.35,1)}
form.send button{transition:opacity .2s,filter .2s,transform .45s cubic-bezier(.34,1.7,.5,1)}
form.send button:active{transform:scale(.86)}
.contact{transition:background-color .2s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.contact:active{transform:scale(.975)}
.back,.add{transition:transform .4s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.back:active,.add:active{transform:scale(.88)}
/* телефон: экраны едут друг за другом, список уходит с параллаксом */
@media(max-width:700px){
  #app{position:relative;overflow:hidden}
  #app aside,#app main{grid-area:1/1;display:flex!important;animation:none!important}
  #app main{transform:translateX(100%);visibility:hidden;box-shadow:-24px 0 48px rgba(0,0,0,.4);transition:transform .42s var(--spring),visibility 0s .42s}
  #app.chat main,#app.profile main{transform:none;visibility:visible;transition:transform .42s var(--spring),visibility 0s}
  #app aside{transform:none;opacity:1;visibility:visible;transition:transform .42s var(--spring),opacity .42s,visibility 0s}
  #app.chat aside,#app.profile aside{transform:translateX(-26%);opacity:.5;visibility:hidden;pointer-events:none;transition:transform .42s var(--spring),opacity .42s,visibility 0s .42s}
}

/* реакции: текст сверху, ниже реакции слева и время справа */
.m.inl{justify-content:flex-start}
.m.inl > small{margin-left:auto}
.m.inl.hasrx{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:end}
.m.inl.hasrx > *{grid-column:1/-1}
.m.inl.hasrx > .reactions{grid-column:1;order:1;min-width:0}
.m.inl.hasrx > small{grid-column:2;order:2;margin:0 0 1px}
/* реакции: раскладка не зависит от JS-класса (:has), плюс анимации */
.m.inl:has(> .reactions){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:end}
.m.inl:has(> .reactions) > *{grid-column:1/-1}
.m.inl:has(> .reactions) > .reactions{grid-column:1;order:1;min-width:0}
.m.inl:has(> .reactions) > small{grid-column:2;order:2;margin:0 0 1px}
@keyframes rxPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.1);opacity:1}80%{transform:scale(.97)}100%{transform:none}}
@keyframes rxBump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes rxRow{from{max-height:0;opacity:0;margin-top:0;transform:translateY(4px)}to{max-height:90px;opacity:1;margin-top:6px;transform:none}}
.reaction-badge.rx-new{transform-origin:center;animation:rxPop .28s cubic-bezier(.3,.7,.4,1)}
.reaction-badge.rx-bump{transform-origin:center;animation:rxBump .2s cubic-bezier(.3,.7,.4,1)}
.reactions.rx-open{overflow:visible;animation:rxRow .24s cubic-bezier(.2,.8,.2,1)}
/* подъём сообщения быстрее */
.msg-ghost{transition:transform .22s cubic-bezier(.2,.85,.25,1)}

/* ===== обои: без угловых свечений, плавный диагональный градиент + разноцветный узор ===== */
body{background:linear-gradient(160deg,#051317,#071b20 50%,#07151f)}
html[data-theme=light] body{background:linear-gradient(160deg,#E4F0EE,#EAF0F6 55%,#E6F1EC)}
.msg-area-wrap{background:none}
main::before{background:linear-gradient(155deg,#0a2b2f 0%,#0b2431 50%,#141f3d 100%)}
html[data-theme=light] main::before{background:linear-gradient(155deg,#DDEEEA 0%,#E4EDF4 50%,#E8E6F4 100%)}
main::after{background:linear-gradient(155deg,rgba(120,232,214,.14),rgba(132,164,255,.11) 55%,rgba(194,152,255,.10))}
html[data-theme=light] main::after{background:linear-gradient(155deg,rgba(14,122,122,.15),rgba(60,92,205,.11) 55%,rgba(122,72,194,.10))}

/* реакции: пузырь по размеру содержимого, без пустоты справа у коротких сообщений.
   Текст и время в одной строке, реакции отдельной строкой ниже */
.m.inl.hasrx{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:end;justify-content:stretch}
.m.inl.hasrx > *{grid-column:1/-1}
.m.inl.hasrx > .mbody{grid-column:1;order:0}
.m.inl.hasrx > small{grid-column:2;order:0;margin:0 0 1px}
.m.inl.hasrx > .reactions{grid-column:1/-1;order:0;min-width:0}

/* ===== обои: крупный разнобойный узор (40 значков разного размера и наклона + мелочь) ===== */
main::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22480%22 height=%22480%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(394.0 271.7) rotate(2) scale(1.11) translate(-12 -12)%22%3E%3Cpath d=%22M5 19C5 10 10 5 20 4c0 10-5 15-14 15zM5 19l8-8%22/%3E%3C/g%3E%3Cg transform=%22translate(202.3 49.8) rotate(-11) scale(1.00) translate(-12 -12)%22%3E%3Cpath d=%22M13 2 4 14h7l-1 8 9-12h-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(116.6 288.6) rotate(2) scale(1.14) translate(-12 -12)%22%3E%3Cpath d=%22M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.7.6 1 1.3 1 2.1h5c0-.8.3-1.5 1-2.1A6 6 0 0 0 12 3z%22/%3E%3C/g%3E%3Cg transform=%22translate(0.3 100.7) rotate(-28) scale(1.14) translate(-12 -12)%22%3E%3Cpath d=%22M6 16v-5a6 6 0 0 1 12 0v5l2 2H4zM10 21h4%22/%3E%3C/g%3E%3Cg transform=%22translate(480.3 100.7) rotate(-28) scale(1.14) translate(-12 -12)%22%3E%3Cpath d=%22M6 16v-5a6 6 0 0 1 12 0v5l2 2H4zM10 21h4%22/%3E%3C/g%3E%3Cg transform=%22translate(-1.1 -2.1) rotate(-18) scale(1.35) translate(-12 -12)%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h13%22/%3E%3C/g%3E%3Cg transform=%22translate(-1.1 477.9) rotate(-18) scale(1.35) translate(-12 -12)%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h13%22/%3E%3C/g%3E%3Cg transform=%22translate(478.9 -2.1) rotate(-18) scale(1.35) translate(-12 -12)%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h13%22/%3E%3C/g%3E%3Cg transform=%22translate(478.9 477.9) rotate(-18) scale(1.35) translate(-12 -12)%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h13%22/%3E%3C/g%3E%3Cg transform=%22translate(35.1 302.1) rotate(-27) scale(1.06) translate(-12 -12)%22%3E%3Cpath d=%22M7 8h10a5 5 0 0 1 5 5v2a3 3 0 0 1-5.2 2L15.5 15h-7l-1.3 2A3 3 0 0 1 2 15v-2a5 5 0 0 1 5-5zM8 10.5v3M6.5 12h3M16 11.5v.01M18 13v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(515.1 302.1) rotate(-27) scale(1.06) translate(-12 -12)%22%3E%3Cpath d=%22M7 8h10a5 5 0 0 1 5 5v2a3 3 0 0 1-5.2 2L15.5 15h-7l-1.3 2A3 3 0 0 1 2 15v-2a5 5 0 0 1 5-5zM8 10.5v3M6.5 12h3M16 11.5v.01M18 13v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(54.4 23.7) rotate(23) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.5-1A4.5 4.5 0 0 1 17 18z%22/%3E%3C/g%3E%3Cg transform=%22translate(54.4 503.7) rotate(23) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.5-1A4.5 4.5 0 0 1 17 18z%22/%3E%3C/g%3E%3Cg transform=%22translate(436.9 225.6) rotate(-11) scale(1.20) translate(-12 -12)%22%3E%3Cpath d=%22M4 11h16v9H4zM3 7h18v4H3zM12 7v13M12 7C10 3 6 4 7.5 7M12 7c2-4 6-3 4.5 0%22/%3E%3C/g%3E%3Cg transform=%22translate(-5.3 347.7) rotate(-10) scale(1.18) translate(-12 -12)%22%3E%3Cpath d=%22M4 20h16v-6H4zM4 14c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2M12 12V8M12 5v1%22/%3E%3C/g%3E%3Cg transform=%22translate(474.7 347.7) rotate(-10) scale(1.18) translate(-12 -12)%22%3E%3Cpath d=%22M4 20h16v-6H4zM4 14c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2M12 12V8M12 5v1%22/%3E%3C/g%3E%3Cg transform=%22translate(331.7 31.6) rotate(4) scale(1.31) translate(-12 -12)%22%3E%3Cpath d=%22M3 8l4 4 5-7 5 7 4-4-2 11H5z%22/%3E%3C/g%3E%3Cg transform=%22translate(331.7 511.6) rotate(4) scale(1.31) translate(-12 -12)%22%3E%3Cpath d=%22M3 8l4 4 5-7 5 7 4-4-2 11H5z%22/%3E%3C/g%3E%3Cg transform=%22translate(168.9 328.9) rotate(8) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M7 11a5 5 0 0 1 10 0zM7 11l5 11 5-11%22/%3E%3C/g%3E%3Cg transform=%22translate(355.6 389.0) rotate(-11) scale(1.30) translate(-12 -12)%22%3E%3Ccircle cx=%228%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22M11 12l9-9M16 7l3 3M14 9l2 2%22/%3E%3C/g%3E%3Cg transform=%22translate(403.3 339.7) rotate(-25) scale(1.27) translate(-12 -12)%22%3E%3Cpath d=%22M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z%22/%3E%3C/g%3E%3Cg transform=%22translate(354.9 -28.6) rotate(18) scale(1.45) translate(-12 -12)%22%3E%3Cpath d=%22m12 3 2.7 5.5 6 .9-4.4 4.2 1 6-5.3-2.8L6.7 19.6l1-6L3.3 9.4l6-.9z%22/%3E%3C/g%3E%3Cg transform=%22translate(354.9 451.4) rotate(18) scale(1.45) translate(-12 -12)%22%3E%3Cpath d=%22m12 3 2.7 5.5 6 .9-4.4 4.2 1 6-5.3-2.8L6.7 19.6l1-6L3.3 9.4l6-.9z%22/%3E%3C/g%3E%3Cg transform=%22translate(146.0 424.7) rotate(-18) scale(1.08) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%226.5%22 r=%223.5%22/%3E%3Ccircle cx=%2212%22 cy=%2217.5%22 r=%223.5%22/%3E%3Ccircle cx=%226.5%22 cy=%2212%22 r=%223.5%22/%3E%3Ccircle cx=%2217.5%22 cy=%2212%22 r=%223.5%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.2%22/%3E%3C/g%3E%3Cg transform=%22translate(-21.4 281.6) rotate(-0) scale(1.03) translate(-12 -12)%22%3E%3Cpath d=%22M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z%22/%3E%3C/g%3E%3Cg transform=%22translate(458.6 281.6) rotate(-0) scale(1.03) translate(-12 -12)%22%3E%3Cpath d=%22M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z%22/%3E%3C/g%3E%3Cg transform=%22translate(187.2 -9.2) rotate(-2) scale(1.23) translate(-12 -12)%22%3E%3Cpath d=%22M5 21V11a7 7 0 0 1 14 0v10l-3-2-2 2-2-2-2 2-2-2zM9.5 11v.01M14.5 11v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(187.2 470.8) rotate(-2) scale(1.23) translate(-12 -12)%22%3E%3Cpath d=%22M5 21V11a7 7 0 0 1 14 0v10l-3-2-2 2-2-2-2 2-2-2zM9.5 11v.01M14.5 11v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(274.6 63.2) rotate(-23) scale(1.42) translate(-12 -12)%22%3E%3Cpath d=%22M6 3h12l4 6-10 12L2 9zM2 9h20M9 3l-2 6 5 12 5-12-2-6%22/%3E%3C/g%3E%3Cg transform=%22translate(94.4 -23.9) rotate(-28) scale(1.27) translate(-12 -12)%22%3E%3Cpath d=%22M3 12c3-5 9-6 13-2l5-3v10l-5-3c-4 4-10 3-13-2zM8 11.5v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(94.4 456.1) rotate(-28) scale(1.27) translate(-12 -12)%22%3E%3Cpath d=%22M3 12c3-5 9-6 13-2l5-3v10l-5-3c-4 4-10 3-13-2zM8 11.5v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(419.3 86.3) rotate(-12) scale(0.98) translate(-12 -12)%22%3E%3Cpath d=%22M3 11 21 3l-6 18-3-8zM12 13l9-10%22/%3E%3C/g%3E%3Cg transform=%22translate(-20.1 406.7) rotate(1) scale(1.40) translate(-12 -12)%22%3E%3Cpath d=%22M3 6h18v12H3zM3 7l9 7 9-7%22/%3E%3C/g%3E%3Cg transform=%22translate(459.9 406.7) rotate(1) scale(1.40) translate(-12 -12)%22%3E%3Cpath d=%22M3 6h18v12H3zM3 7l9 7 9-7%22/%3E%3C/g%3E%3Cg transform=%22translate(286.3 140.8) rotate(-3) scale(1.27) translate(-12 -12)%22%3E%3Cpath d=%22M12 3c4 2 6 6 5 11l-3 3h-4l-3-3C6 9 8 5 12 3zM9 17l-3 4 4-1M15 17l3 4-4-1%22/%3E%3Ccircle cx=%2212%22 cy=%2210.5%22 r=%221.6%22/%3E%3C/g%3E%3Cg transform=%22translate(101.1 189.3) rotate(-21) scale(1.30) translate(-12 -12)%22%3E%3Cpath d=%22M4 5h16v11h-9l-5 4v-4H4z%22/%3E%3C/g%3E%3Cg transform=%22translate(211.5 402.4) rotate(12) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M9 18V6l10-2v12M9 18a3 3 0 1 1-3-3M19 16a3 3 0 1 1-3-3%22/%3E%3C/g%3E%3Cg transform=%22translate(275.8 415.9) rotate(10) scale(1.21) translate(-12 -12)%22%3E%3Cpath d=%22M4 8h3l2-3h6l2 3h3v11H4z%22/%3E%3Ccircle cx=%2212%22 cy=%2213.5%22 r=%223.5%22/%3E%3C/g%3E%3Cg transform=%22translate(151.3 110.2) rotate(1) scale(1.16) translate(-12 -12)%22%3E%3Cpath d=%22M12 3a6 6 0 0 1 6 6c0 4-3 7-6 8-3-1-6-4-6-8a6 6 0 0 1 6-6zM12 17l-1.5 2.5h3zM12 19.5c0 1.5 2 1.5 2 3%22/%3E%3C/g%3E%3Cg transform=%22translate(373.7 129.5) rotate(-12) scale(1.45) translate(-12 -12)%22%3E%3Cpath d=%22M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z%22/%3E%3C/g%3E%3Cg transform=%22translate(138.7 33.7) rotate(18) scale(1.34) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M8 14a5 5 0 0 0 8 0M9 9.5v.5M15 9.5v.5%22/%3E%3C/g%3E%3Cg transform=%22translate(138.7 513.7) rotate(18) scale(1.34) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M8 14a5 5 0 0 0 8 0M9 9.5v.5M15 9.5v.5%22/%3E%3C/g%3E%3Cg transform=%22translate(249.2 307.3) rotate(-14) scale(1.14) translate(-12 -12)%22%3E%3Cpath d=%22M4 20l1-5L16 4l4 4L9 19zM14 6l4 4%22/%3E%3C/g%3E%3Cg transform=%22translate(219.5 133.5) rotate(8) scale(1.31) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2%22/%3E%3C/g%3E%3Cg transform=%22translate(41.8 159.6) rotate(9) scale(1.24) translate(-12 -12)%22%3E%3Cpath d=%22M4 15v-3a8 8 0 0 1 16 0v3M4 15h3v5H5a1 1 0 0 1-1-1zM20 15h-3v5h2a1 1 0 0 0 1-1z%22/%3E%3C/g%3E%3Cg transform=%22translate(198.4 275.1) rotate(-15) scale(1.42) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/g%3E%3Cg transform=%22translate(308.0 344.5) rotate(18) scale(1.29) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M15.5 8.5l-2 5-5 2 2-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(87.8 74.0) rotate(15) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M5 9h11v6a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 10h2a2.5 2.5 0 0 1 0 5h-2M8 3v3M12 3v3%22/%3E%3C/g%3E%3Cg transform=%22translate(331.8 280.5) rotate(14) scale(1.32) translate(-12 -12)%22%3E%3Cpath d=%22M3 12a9 9 0 0 1 18 0zM12 12v6a2 2 0 0 0 4 0%22/%3E%3C/g%3E%3Cg transform=%22translate(268.5 214.8) rotate(-11) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M7 3h10a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM11 18h2%22/%3E%3C/g%3E%3Cg transform=%22translate(65.4 238.3) rotate(6) scale(1.08) translate(-12 -12)%22%3E%3Cpath d=%22M5 20V7l4 3h6l4-3v13zM9.5 14v.01M14.5 14v.01M11 16.5l1 .8 1-.8%22/%3E%3C/g%3E%3Cg transform=%22translate(433.3 151.6) rotate(-10) scale(1.31) translate(-12 -12)%22%3E%3Cpath d=%22M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.5%22/%3E%3C/g%3E%3Cg transform=%22translate(178.4 217.5) rotate(1) scale(1.03) translate(-12 -12)%22%3E%3Cpath d=%22M12 20c-3 0-5-2-5-4 0-3 3-5 5-5s5 2 5 4c0 2-2 5-5 5z%22/%3E%3Ccircle cx=%225.5%22 cy=%2210%22 r=%221.7%22/%3E%3Ccircle cx=%229%22 cy=%226%22 r=%221.7%22/%3E%3Ccircle cx=%2215%22 cy=%226%22 r=%221.7%22/%3E%3Ccircle cx=%2218.5%22 cy=%2210%22 r=%221.7%22/%3E%3C/g%3E%3Cg transform=%22translate(91.5 351.3) rotate(-17) scale(1.31) translate(-12 -12)%22%3E%3Cpath d=%22M12 2v20M3.5 7l17 10M20.5 7l-17 10%22/%3E%3C/g%3E%3Cg transform=%22translate(419.0 19.9) rotate(-28) scale(0.85) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.4%22/%3E%3C/g%3E%3Cg transform=%22translate(419.0 499.9) rotate(-28) scale(0.85) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.4%22/%3E%3C/g%3E%3Cg transform=%22translate(42.5 393.9) rotate(-10) scale(0.76) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(367.8 192.2) rotate(14) scale(0.57) translate(-12 -12)%22%3E%3Cpath d=%22M3 12q4.5-6 9 0t9 0%22/%3E%3C/g%3E%3Cg transform=%22translate(246.0 7.4) rotate(-10) scale(0.54) translate(-12 -12)%22%3E%3Cpath d=%22M12 7v10M7 12h10%22/%3E%3C/g%3E%3Cg transform=%22translate(246.0 487.4) rotate(-10) scale(0.54) translate(-12 -12)%22%3E%3Cpath d=%22M12 7v10M7 12h10%22/%3E%3C/g%3E%3C/svg%3E") 0 0/480px;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22480%22 height=%22480%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(394.0 271.7) rotate(2) scale(1.11) translate(-12 -12)%22%3E%3Cpath d=%22M5 19C5 10 10 5 20 4c0 10-5 15-14 15zM5 19l8-8%22/%3E%3C/g%3E%3Cg transform=%22translate(202.3 49.8) rotate(-11) scale(1.00) translate(-12 -12)%22%3E%3Cpath d=%22M13 2 4 14h7l-1 8 9-12h-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(116.6 288.6) rotate(2) scale(1.14) translate(-12 -12)%22%3E%3Cpath d=%22M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.7.6 1 1.3 1 2.1h5c0-.8.3-1.5 1-2.1A6 6 0 0 0 12 3z%22/%3E%3C/g%3E%3Cg transform=%22translate(0.3 100.7) rotate(-28) scale(1.14) translate(-12 -12)%22%3E%3Cpath d=%22M6 16v-5a6 6 0 0 1 12 0v5l2 2H4zM10 21h4%22/%3E%3C/g%3E%3Cg transform=%22translate(480.3 100.7) rotate(-28) scale(1.14) translate(-12 -12)%22%3E%3Cpath d=%22M6 16v-5a6 6 0 0 1 12 0v5l2 2H4zM10 21h4%22/%3E%3C/g%3E%3Cg transform=%22translate(-1.1 -2.1) rotate(-18) scale(1.35) translate(-12 -12)%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h13%22/%3E%3C/g%3E%3Cg transform=%22translate(-1.1 477.9) rotate(-18) scale(1.35) translate(-12 -12)%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h13%22/%3E%3C/g%3E%3Cg transform=%22translate(478.9 -2.1) rotate(-18) scale(1.35) translate(-12 -12)%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h13%22/%3E%3C/g%3E%3Cg transform=%22translate(478.9 477.9) rotate(-18) scale(1.35) translate(-12 -12)%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h13%22/%3E%3C/g%3E%3Cg transform=%22translate(35.1 302.1) rotate(-27) scale(1.06) translate(-12 -12)%22%3E%3Cpath d=%22M7 8h10a5 5 0 0 1 5 5v2a3 3 0 0 1-5.2 2L15.5 15h-7l-1.3 2A3 3 0 0 1 2 15v-2a5 5 0 0 1 5-5zM8 10.5v3M6.5 12h3M16 11.5v.01M18 13v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(515.1 302.1) rotate(-27) scale(1.06) translate(-12 -12)%22%3E%3Cpath d=%22M7 8h10a5 5 0 0 1 5 5v2a3 3 0 0 1-5.2 2L15.5 15h-7l-1.3 2A3 3 0 0 1 2 15v-2a5 5 0 0 1 5-5zM8 10.5v3M6.5 12h3M16 11.5v.01M18 13v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(54.4 23.7) rotate(23) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.5-1A4.5 4.5 0 0 1 17 18z%22/%3E%3C/g%3E%3Cg transform=%22translate(54.4 503.7) rotate(23) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.5-1A4.5 4.5 0 0 1 17 18z%22/%3E%3C/g%3E%3Cg transform=%22translate(436.9 225.6) rotate(-11) scale(1.20) translate(-12 -12)%22%3E%3Cpath d=%22M4 11h16v9H4zM3 7h18v4H3zM12 7v13M12 7C10 3 6 4 7.5 7M12 7c2-4 6-3 4.5 0%22/%3E%3C/g%3E%3Cg transform=%22translate(-5.3 347.7) rotate(-10) scale(1.18) translate(-12 -12)%22%3E%3Cpath d=%22M4 20h16v-6H4zM4 14c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2M12 12V8M12 5v1%22/%3E%3C/g%3E%3Cg transform=%22translate(474.7 347.7) rotate(-10) scale(1.18) translate(-12 -12)%22%3E%3Cpath d=%22M4 20h16v-6H4zM4 14c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2M12 12V8M12 5v1%22/%3E%3C/g%3E%3Cg transform=%22translate(331.7 31.6) rotate(4) scale(1.31) translate(-12 -12)%22%3E%3Cpath d=%22M3 8l4 4 5-7 5 7 4-4-2 11H5z%22/%3E%3C/g%3E%3Cg transform=%22translate(331.7 511.6) rotate(4) scale(1.31) translate(-12 -12)%22%3E%3Cpath d=%22M3 8l4 4 5-7 5 7 4-4-2 11H5z%22/%3E%3C/g%3E%3Cg transform=%22translate(168.9 328.9) rotate(8) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M7 11a5 5 0 0 1 10 0zM7 11l5 11 5-11%22/%3E%3C/g%3E%3Cg transform=%22translate(355.6 389.0) rotate(-11) scale(1.30) translate(-12 -12)%22%3E%3Ccircle cx=%228%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22M11 12l9-9M16 7l3 3M14 9l2 2%22/%3E%3C/g%3E%3Cg transform=%22translate(403.3 339.7) rotate(-25) scale(1.27) translate(-12 -12)%22%3E%3Cpath d=%22M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z%22/%3E%3C/g%3E%3Cg transform=%22translate(354.9 -28.6) rotate(18) scale(1.45) translate(-12 -12)%22%3E%3Cpath d=%22m12 3 2.7 5.5 6 .9-4.4 4.2 1 6-5.3-2.8L6.7 19.6l1-6L3.3 9.4l6-.9z%22/%3E%3C/g%3E%3Cg transform=%22translate(354.9 451.4) rotate(18) scale(1.45) translate(-12 -12)%22%3E%3Cpath d=%22m12 3 2.7 5.5 6 .9-4.4 4.2 1 6-5.3-2.8L6.7 19.6l1-6L3.3 9.4l6-.9z%22/%3E%3C/g%3E%3Cg transform=%22translate(146.0 424.7) rotate(-18) scale(1.08) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%226.5%22 r=%223.5%22/%3E%3Ccircle cx=%2212%22 cy=%2217.5%22 r=%223.5%22/%3E%3Ccircle cx=%226.5%22 cy=%2212%22 r=%223.5%22/%3E%3Ccircle cx=%2217.5%22 cy=%2212%22 r=%223.5%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.2%22/%3E%3C/g%3E%3Cg transform=%22translate(-21.4 281.6) rotate(-0) scale(1.03) translate(-12 -12)%22%3E%3Cpath d=%22M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z%22/%3E%3C/g%3E%3Cg transform=%22translate(458.6 281.6) rotate(-0) scale(1.03) translate(-12 -12)%22%3E%3Cpath d=%22M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z%22/%3E%3C/g%3E%3Cg transform=%22translate(187.2 -9.2) rotate(-2) scale(1.23) translate(-12 -12)%22%3E%3Cpath d=%22M5 21V11a7 7 0 0 1 14 0v10l-3-2-2 2-2-2-2 2-2-2zM9.5 11v.01M14.5 11v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(187.2 470.8) rotate(-2) scale(1.23) translate(-12 -12)%22%3E%3Cpath d=%22M5 21V11a7 7 0 0 1 14 0v10l-3-2-2 2-2-2-2 2-2-2zM9.5 11v.01M14.5 11v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(274.6 63.2) rotate(-23) scale(1.42) translate(-12 -12)%22%3E%3Cpath d=%22M6 3h12l4 6-10 12L2 9zM2 9h20M9 3l-2 6 5 12 5-12-2-6%22/%3E%3C/g%3E%3Cg transform=%22translate(94.4 -23.9) rotate(-28) scale(1.27) translate(-12 -12)%22%3E%3Cpath d=%22M3 12c3-5 9-6 13-2l5-3v10l-5-3c-4 4-10 3-13-2zM8 11.5v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(94.4 456.1) rotate(-28) scale(1.27) translate(-12 -12)%22%3E%3Cpath d=%22M3 12c3-5 9-6 13-2l5-3v10l-5-3c-4 4-10 3-13-2zM8 11.5v.01%22/%3E%3C/g%3E%3Cg transform=%22translate(419.3 86.3) rotate(-12) scale(0.98) translate(-12 -12)%22%3E%3Cpath d=%22M3 11 21 3l-6 18-3-8zM12 13l9-10%22/%3E%3C/g%3E%3Cg transform=%22translate(-20.1 406.7) rotate(1) scale(1.40) translate(-12 -12)%22%3E%3Cpath d=%22M3 6h18v12H3zM3 7l9 7 9-7%22/%3E%3C/g%3E%3Cg transform=%22translate(459.9 406.7) rotate(1) scale(1.40) translate(-12 -12)%22%3E%3Cpath d=%22M3 6h18v12H3zM3 7l9 7 9-7%22/%3E%3C/g%3E%3Cg transform=%22translate(286.3 140.8) rotate(-3) scale(1.27) translate(-12 -12)%22%3E%3Cpath d=%22M12 3c4 2 6 6 5 11l-3 3h-4l-3-3C6 9 8 5 12 3zM9 17l-3 4 4-1M15 17l3 4-4-1%22/%3E%3Ccircle cx=%2212%22 cy=%2210.5%22 r=%221.6%22/%3E%3C/g%3E%3Cg transform=%22translate(101.1 189.3) rotate(-21) scale(1.30) translate(-12 -12)%22%3E%3Cpath d=%22M4 5h16v11h-9l-5 4v-4H4z%22/%3E%3C/g%3E%3Cg transform=%22translate(211.5 402.4) rotate(12) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M9 18V6l10-2v12M9 18a3 3 0 1 1-3-3M19 16a3 3 0 1 1-3-3%22/%3E%3C/g%3E%3Cg transform=%22translate(275.8 415.9) rotate(10) scale(1.21) translate(-12 -12)%22%3E%3Cpath d=%22M4 8h3l2-3h6l2 3h3v11H4z%22/%3E%3Ccircle cx=%2212%22 cy=%2213.5%22 r=%223.5%22/%3E%3C/g%3E%3Cg transform=%22translate(151.3 110.2) rotate(1) scale(1.16) translate(-12 -12)%22%3E%3Cpath d=%22M12 3a6 6 0 0 1 6 6c0 4-3 7-6 8-3-1-6-4-6-8a6 6 0 0 1 6-6zM12 17l-1.5 2.5h3zM12 19.5c0 1.5 2 1.5 2 3%22/%3E%3C/g%3E%3Cg transform=%22translate(373.7 129.5) rotate(-12) scale(1.45) translate(-12 -12)%22%3E%3Cpath d=%22M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z%22/%3E%3C/g%3E%3Cg transform=%22translate(138.7 33.7) rotate(18) scale(1.34) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M8 14a5 5 0 0 0 8 0M9 9.5v.5M15 9.5v.5%22/%3E%3C/g%3E%3Cg transform=%22translate(138.7 513.7) rotate(18) scale(1.34) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M8 14a5 5 0 0 0 8 0M9 9.5v.5M15 9.5v.5%22/%3E%3C/g%3E%3Cg transform=%22translate(249.2 307.3) rotate(-14) scale(1.14) translate(-12 -12)%22%3E%3Cpath d=%22M4 20l1-5L16 4l4 4L9 19zM14 6l4 4%22/%3E%3C/g%3E%3Cg transform=%22translate(219.5 133.5) rotate(8) scale(1.31) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2%22/%3E%3C/g%3E%3Cg transform=%22translate(41.8 159.6) rotate(9) scale(1.24) translate(-12 -12)%22%3E%3Cpath d=%22M4 15v-3a8 8 0 0 1 16 0v3M4 15h3v5H5a1 1 0 0 1-1-1zM20 15h-3v5h2a1 1 0 0 0 1-1z%22/%3E%3C/g%3E%3Cg transform=%22translate(198.4 275.1) rotate(-15) scale(1.42) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/g%3E%3Cg transform=%22translate(308.0 344.5) rotate(18) scale(1.29) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M15.5 8.5l-2 5-5 2 2-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(87.8 74.0) rotate(15) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M5 9h11v6a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 10h2a2.5 2.5 0 0 1 0 5h-2M8 3v3M12 3v3%22/%3E%3C/g%3E%3Cg transform=%22translate(331.8 280.5) rotate(14) scale(1.32) translate(-12 -12)%22%3E%3Cpath d=%22M3 12a9 9 0 0 1 18 0zM12 12v6a2 2 0 0 0 4 0%22/%3E%3C/g%3E%3Cg transform=%22translate(268.5 214.8) rotate(-11) scale(0.97) translate(-12 -12)%22%3E%3Cpath d=%22M7 3h10a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM11 18h2%22/%3E%3C/g%3E%3Cg transform=%22translate(65.4 238.3) rotate(6) scale(1.08) translate(-12 -12)%22%3E%3Cpath d=%22M5 20V7l4 3h6l4-3v13zM9.5 14v.01M14.5 14v.01M11 16.5l1 .8 1-.8%22/%3E%3C/g%3E%3Cg transform=%22translate(433.3 151.6) rotate(-10) scale(1.31) translate(-12 -12)%22%3E%3Cpath d=%22M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.5%22/%3E%3C/g%3E%3Cg transform=%22translate(178.4 217.5) rotate(1) scale(1.03) translate(-12 -12)%22%3E%3Cpath d=%22M12 20c-3 0-5-2-5-4 0-3 3-5 5-5s5 2 5 4c0 2-2 5-5 5z%22/%3E%3Ccircle cx=%225.5%22 cy=%2210%22 r=%221.7%22/%3E%3Ccircle cx=%229%22 cy=%226%22 r=%221.7%22/%3E%3Ccircle cx=%2215%22 cy=%226%22 r=%221.7%22/%3E%3Ccircle cx=%2218.5%22 cy=%2210%22 r=%221.7%22/%3E%3C/g%3E%3Cg transform=%22translate(91.5 351.3) rotate(-17) scale(1.31) translate(-12 -12)%22%3E%3Cpath d=%22M12 2v20M3.5 7l17 10M20.5 7l-17 10%22/%3E%3C/g%3E%3Cg transform=%22translate(419.0 19.9) rotate(-28) scale(0.85) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.4%22/%3E%3C/g%3E%3Cg transform=%22translate(419.0 499.9) rotate(-28) scale(0.85) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.4%22/%3E%3C/g%3E%3Cg transform=%22translate(42.5 393.9) rotate(-10) scale(0.76) translate(-12 -12)%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(367.8 192.2) rotate(14) scale(0.57) translate(-12 -12)%22%3E%3Cpath d=%22M3 12q4.5-6 9 0t9 0%22/%3E%3C/g%3E%3Cg transform=%22translate(246.0 7.4) rotate(-10) scale(0.54) translate(-12 -12)%22%3E%3Cpath d=%22M12 7v10M7 12h10%22/%3E%3C/g%3E%3Cg transform=%22translate(246.0 487.4) rotate(-10) scale(0.54) translate(-12 -12)%22%3E%3Cpath d=%22M12 7v10M7 12h10%22/%3E%3C/g%3E%3C/svg%3E") 0 0/480px}

/* ===== скелетоны загрузки переписки ===== */
.skel{margin-top:auto;display:flex;flex-direction:column;gap:8px;pointer-events:none;animation:skelIn .25s .12s both}
.skel i{display:block;height:var(--h,40px);width:var(--w,50%);border-radius:18px;background:rgba(var(--t),.07);position:relative;overflow:hidden}
.skel i.l{align-self:flex-start;border-bottom-left-radius:5px}
.skel i.r{align-self:flex-end;border-bottom-right-radius:5px;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.skel i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(var(--t),.10) 50%,transparent 80%);transform:translateX(-100%);animation:skelSh 1.5s ease-in-out infinite}
@keyframes skelIn{from{opacity:0}to{opacity:1}}
@keyframes skelSh{to{transform:translateX(100%)}}

/* ===== эффект нажатия: лёгкое уменьшение у всего интерактивного (нулевая специфичность, свои :active-правила сильнее) ===== */
:where(button,.contact,.att-file,.att-img,.att-voice .vplay,.quote,.top-user,.hit,.pbtn,.sg summary,.logout-btn,.vbi,.lb-jump,.attach,.link,.pic){transition:transform .16s cubic-bezier(.2,.8,.2,1)}
:where(button,.contact,.att-file,.att-img,.att-voice .vplay,.quote,.top-user,.hit,.pbtn,.sg summary,.logout-btn,.vbi,.lb-jump,.attach,.link,.pic):where(:active):where(:not(:disabled):not(.scroll-bottom)){transform:scale(.97)}

/* большие области (закреп под шапкой, имя в шапке) не уменьшаем: у них подсветка фоном, а аватарка в шапке слегка «вжимается» */
.pinned-banner{transition:background-color .15s}
.pinned-banner:active{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
.who{-webkit-tap-highlight-color:transparent}
.who:active #peerName{opacity:.7}
#headerAvatarBox{cursor:pointer;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
#headerAvatarBox:active{transform:scale(.94)}

/* ===== реакция «в полёте» и крупные эмодзи ===== */
.rx-fly{will-change:transform,opacity;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.reaction-badge.rx-hold{opacity:0}
.m.emo{background:none!important;border:0!important;box-shadow:none!important;padding:2px 2px 0!important}
.m.emo .mbody{font-size:3.4rem;line-height:1.1}
.m.emo[data-emo="2"] .mbody{font-size:2.8rem}
.m.emo[data-emo="3"] .mbody{font-size:2.3rem}
.m.emo small{opacity:1;color:#fff;background:rgba(0,0,0,.32);border-radius:99px;padding:1px 8px;margin-bottom:4px}
.m.emo small .tk,.m.emo small .tk.rd{color:#fff}
.m.emo.me{transform-origin:100% 100%}
.m.emo:not(.me){transform-origin:0 100%}
.m.emo.pop-r,.m.emo.pop-l{animation:emoPop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes emoPop{from{opacity:0;transform:scale(.3) translateY(16px)}to{opacity:1;transform:none}}
.msg-ghost .m.emo{box-shadow:none!important}

/* крестик в правом верхнем углу списка закреплённых */
.dlg-x{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(var(--t),.08);color:var(--mute);cursor:pointer;transition:background-color .2s,color .2s,transform .16s cubic-bezier(.2,.8,.2,1)}
.dlg-x:hover{background:rgba(var(--t),.16);color:var(--ink)}
.dlg-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* ===== правки анимаций ===== */
/* подсветка (прыжок к ответу, поиск, закреп) перебивалась pop-анимацией у сообщений, пришедших вживую */
.m.flash:not(.gone){animation:flash 1s}
/* кнопка «вниз» появлялась рывком (display:none -> flex), теперь с анимацией */
.scroll-bottom:not(.hidden){animation:popIn .22s cubic-bezier(.2,.8,.2,1)}

/* ===== выбор обоев ===== */
.wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.wp-card{position:relative;aspect-ratio:3/4;padding:0;border:0;border-radius:16px;overflow:hidden;isolation:isolate;cursor:pointer;background:#000;box-shadow:0 0 0 2px var(--line);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.wp-card:active{transform:scale(.96)}
.wp-card .bg,.wp-card .pat{position:absolute;inset:0;display:block}
.wp-card s{position:absolute;display:block;height:14px;border-radius:9px;text-decoration:none}
.wp-card .b1{left:8px;top:22%;width:46%;background:rgba(255,255,255,.2);border-bottom-left-radius:3px}
.wp-card .b2{right:8px;top:calc(22% + 22px);width:38%;background:var(--accent);border-bottom-right-radius:3px;opacity:.95}
.wp-card b{position:absolute;left:0;right:0;bottom:0;padding:18px 4px 7px;font-size:.7rem;font-weight:700;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.wp-card.on{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--accent)}
.wp-card.on::after{content:'✓';position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:800;line-height:20px;text-align:center;animation:tickPop .3s cubic-bezier(.2,.8,.2,1)}
.wp-int{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:.88rem;color:var(--mute)}
.wp-int input{flex:1;min-width:0;accent-color:var(--accent)}
.wp-int b{min-width:44px;text-align:right;color:var(--ink);font-weight:600}

/* снятие реакции: бейдж сжимается и исчезает, пустая строка реакций сворачивается */
@keyframes rxOut{to{transform:scale(.3);opacity:0}}
@keyframes rxRowOut{from{max-height:90px;opacity:1}to{max-height:0;opacity:0;margin-top:0}}
.reaction-badge.rx-out{transform-origin:center;animation:rxOut .17s cubic-bezier(.4,0,.8,.4) forwards;pointer-events:none}
.reactions.rx-close{overflow:hidden;animation:rxRowOut .18s cubic-bezier(.4,0,.6,1) .02s forwards}


/* ===== профиль: шапка с кнопкой «назад» не уезжает при прокрутке ===== */
.profile-screen{overscroll-behavior:contain}
.profile-screen .head{position:sticky;top:0;z-index:20;flex:none;background:rgba(7,18,22,.96)}
html[data-theme=light] .profile-screen .head{background:rgba(240,246,246,.96)}

/* ===== телефон: плавность ===== */
button,a,.contact,.back,.add,.seg button,summary,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.msgs{overscroll-behavior:contain}
@media(max-width:700px){
  /* главное: размытие фона на целых экранах (aside, main, профиль) пересчитывается каждый кадр при переходе и прокрутке */
  aside,main{-webkit-backdrop-filter:none;backdrop-filter:none}
  .profile-screen{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(7,18,22,.95)}
  html[data-theme=light] .profile-screen{background:rgba(240,246,246,.97)}
  .msg-backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(0,0,0,.4)}
  main>.chat-header-wrap,.dock form.send,.dock .replybar,.dock .attbar,.dock .note,.dock .selbar{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
  /* переход между списком и чатом: быстрее, лёгкая тень, слои заранее на GPU */
  #app aside,#app main{will-change:transform}
  #app main{box-shadow:-8px 0 24px rgba(0,0,0,.3);transition:transform .3s var(--spring),visibility 0s .3s}
  #app.chat main,#app.profile main{transition:transform .3s var(--spring),visibility 0s}
  #app aside{transition:transform .3s var(--spring),opacity .3s,visibility 0s}
  #app.chat aside,#app.profile aside{transition:transform .3s var(--spring),opacity .3s,visibility 0s .3s}
  .m.pop-r{animation-duration:.4s}
  .m.pop-l{animation-duration:.34s}
}

/* ===== моё сообщение вылетает слева снизу (из поля ввода), как в Telegram ===== */
@keyframes springR{0%{opacity:0;transform:translate(-110px,46px) scale(.65)}30%{opacity:1}100%{opacity:1;transform:none}}
.m.me.pop-r{transform-origin:0 100%;animation-timing-function:cubic-bezier(.2,.8,.25,1)}


/* ===== свайп вправо = «назад»: горизонтальный жест в чате отдаём нам, а не браузеру ===== */
.msgs{touch-action:pan-y}

/* ===== свайп-ответ на ПК (мышь и тачпад) ===== */
.m.swiping{-webkit-user-select:none;user-select:none}
html{overscroll-behavior-x:none}

/* свайп влево на ПК: значок ответа с правой стороны */
.m.swiping.sl::before,.m.swiping.sl::after{right:auto;left:calc(100% + 10px)}

/* поле ввода сообщения: без обводки и свечения цвета акцента при фокусе */
form.send:focus-within{border-color:var(--line);box-shadow:0 14px 34px -12px rgba(0,0,0,.6)}
form.send input:focus,form.send input:focus-visible{outline:none;box-shadow:none}

/* Плашка соединения */
.conn{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;z-index:150;display:flex;align-items:center;gap:9px;padding:8px 16px 8px 13px;border-radius:99px;background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.3);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:.88rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-160%);transition:transform .38s cubic-bezier(.2,.9,.3,1.2),opacity .2s}
.conn.show{opacity:1;transform:translate(-50%,0)}
.conn .sp{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);border-top-color:var(--accent);animation:connSpin .8s linear infinite}
.conn[data-s=off] .sp{border-top-color:var(--danger)}
.conn[data-s=ok] .sp{animation:none;border:0;background:var(--online);transition:background .2s}
@keyframes connSpin{to{transform:rotate(360deg)}}

/* Редактирование сообщения: плашка с оригиналом над полем ввода */
.replybar .ebi{display:none;flex:none;align-items:center;justify-content:center;color:var(--accent)}
.replybar.editing .ebi{display:flex}
.replybar:not(.hidden){animation:barIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes barIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Кнопка отправки <-> галочка при редактировании: та же пружинка, что и у остальных кнопок */
form.send > button.sb{position:relative}
form.send > button.sb svg{position:absolute;inset:0;margin:auto;transition:transform .45s cubic-bezier(.34,1.7,.5,1),opacity .18s}
form.send > button.sb .i-ok{opacity:0;transform:scale(.3) rotate(-80deg)}
form.send.editing > button.sb .i-send{opacity:0;transform:scale(.3) rotate(80deg)}
form.send.editing > button.sb .i-ok{opacity:1;transform:none}
form.send.editing #micBtn{display:none}
form.send.editing #attachBtn{opacity:.3!important;pointer-events:none}
form.send.editcap > button.sb{opacity:1}

/* Анимация после изменения сообщения */
@keyframes editPop{0%{transform:scale(1)}30%{transform:scale(1.05)}62%{transform:scale(.99)}100%{transform:scale(1)}}
@keyframes editRing{0%{outline:2px solid color-mix(in srgb,var(--accent) 75%,transparent);outline-offset:0}100%{outline:2px solid transparent;outline-offset:9px}}
@keyframes editText{0%{opacity:0;filter:blur(5px);transform:translateY(3px)}100%{opacity:1;filter:none;transform:none}}
.m.edited{animation:editPop .55s cubic-bezier(.34,1.56,.64,1),editRing .75s ease-out;transform-origin:right bottom}
.m.edited:not(.me){transform-origin:left bottom}
.m.edited .mbody{animation:editText .42s cubic-bezier(.2,.8,.2,1)}
.m.edited small{animation:editText .5s .12s cubic-bezier(.2,.8,.2,1) both}

/* Превью фото и голосовых (список чатов, закрепы, ответы) */
.pv{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.pv .pvt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv .pvth{flex:none;width:20px;height:20px;border-radius:5px;object-fit:cover;background:color-mix(in srgb,currentColor 14%,transparent)}
.pv.lg .pvth{width:26px;height:26px;border-radius:7px}
.pv .pvi{flex:none;width:15px;height:15px;color:inherit}
.pv.voice .pvt{font-family:Nunito,Manrope,sans-serif;font-weight:600;font-size:.97em;letter-spacing:.01em;color:inherit}
.contact.on .pv .pvi{color:inherit}

/* разделитель между чатами / контактами */
#contacts .contact[data-cid]{position:relative}
#contacts .contact[data-cid]:not(:last-child)::after{content:"";position:absolute;left:75px;right:12px;bottom:-1px;height:1px;background:var(--line);pointer-events:none}
#contacts .contact[data-cid].on::after,#contacts .contact[data-cid]:hover::after,#contacts .contact[data-cid]:has(+ .contact.on)::after,#contacts .contact[data-cid]:has(+ .contact:hover)::after{opacity:0}

/* плавающая дата: только плавное появление/исчезновение, без «подпрыгивания» */
.float-day,.float-day.show{transform:translate(-50%,0);transition:opacity .25s}

/* профиль собеседника открывается только по аватарке и имени, а не по всей шапке */
#headerWho{flex:0 1 auto;margin-right:auto}

/* меню «⋯» в профиле: разделитель между обычными пунктами и действиями с контактом */
.pmenu .psep{height:1px;margin:5px 10px;background:var(--line)}

/* ===== поиск по чату: строка поиска вместо поля сообщения, лишние кнопки красиво уезжают ===== */
form.send #sq{display:none;flex:1;width:0;min-width:0}
form.send.srch #sq{display:block;animation:sqIn .32s cubic-bezier(.2,.8,.2,1)}
form.send.srch #text{display:none}
@keyframes sqIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
form.send{transition:border-color .2s,box-shadow .2s,gap .32s cubic-bezier(.2,.8,.2,1)}
form.send #attachBtn,form.send #micBtn,form.send > button[aria-label="Отправить"]{transition:width .32s cubic-bezier(.2,.8,.2,1),opacity .22s,transform .32s cubic-bezier(.2,.8,.2,1),filter .2s}
form.send.srch{gap:0}
form.send.srch #attachBtn{width:0!important;opacity:0!important;transform:translateX(-18px) scale(.5);pointer-events:none;overflow:hidden}
form.send.srch #micBtn,form.send.srch > button[aria-label="Отправить"]{width:0!important;opacity:0!important;transform:translateX(28px) scale(.5);pointer-events:none;overflow:hidden}
.snav{display:flex;align-items:center;flex:none;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transform:translateX(30px);pointer-events:none;transition:max-width .34s cubic-bezier(.2,.8,.2,1),opacity .22s,transform .34s cubic-bezier(.2,.8,.2,1)}
form.send.srch .snav{max-width:240px;opacity:1;transform:none;pointer-events:auto}
.snav #sCnt{padding:0 6px;font-size:.82rem;color:var(--mute);font-variant-numeric:tabular-nums}
form.send .snav button{width:36px;height:36px;background:transparent;color:var(--ink);opacity:1!important;box-shadow:none}
form.send .snav button:disabled{opacity:.3!important;pointer-events:none}
form.send .snav button svg{width:20px;height:20px}
@media(max-width:700px){form.send .snav button{width:32px;height:32px}.snav #sCnt{padding:0 4px;font-size:.78rem}}
/* подсветка найденного в сообщении */
mark.sm{background:rgba(255,213,79,.5);color:inherit;border-radius:4px;padding:0 1px}
mark.sm.cur{background:rgba(255,193,7,.9);color:#1b1b1b}

/* ===== открытие профиля: экран плавно выезжает, аватарка «выпрыгивает», блоки поднимаются по очереди ===== */
.profile-screen:not(.hidden){animation:profIn .4s cubic-bezier(.22,.9,.28,1)}
@keyframes profIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
.profile-screen:not(.hidden) .profile-card-wrap .avatar-wrap{animation:profAv .6s .05s cubic-bezier(.34,1.56,.5,1) both}
@keyframes profAv{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:none}}
.profile-screen:not(.hidden) .profile-card-wrap > :not(.avatar-wrap):not(.logout-btn){animation:profUp .5s cubic-bezier(.22,.9,.28,1) both}
@keyframes profUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(1){animation-delay:0.085s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(2){animation-delay:0.130s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(3){animation-delay:0.175s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(4){animation-delay:0.220s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(5){animation-delay:0.265s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(6){animation-delay:0.310s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(7){animation-delay:0.355s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(8){animation-delay:0.400s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(9){animation-delay:0.445s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(10){animation-delay:0.490s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(11){animation-delay:0.535s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(12){animation-delay:0.580s}
.profile-screen:not(.hidden) #profActions .pic{animation:profPop .5s cubic-bezier(.34,1.56,.5,1) both}
.profile-screen:not(.hidden) #profActions .pic:nth-child(1){animation-delay:.22s}
.profile-screen:not(.hidden) #profActions .pic:nth-child(2){animation-delay:.28s}
.profile-screen:not(.hidden) #profActions .pic:nth-child(3){animation-delay:.34s}
@keyframes profPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
html[data-motion=off] .profile-screen,html[data-motion=off] .profile-screen *{animation:none!important}

/* ===== выход из профиля и переход в чат по «Написать» ===== */
.profile-screen.leaving{animation:profOut .26s cubic-bezier(.4,0,.8,.4) forwards;pointer-events:none}
@keyframes profOut{to{opacity:0;transform:translateY(24px) scale(.985)}}
.profile-screen.leaving.to-chat{animation:profToChat .3s cubic-bezier(.4,0,.6,1) forwards}
@keyframes profToChat{to{opacity:0;transform:scale(1.07);filter:blur(6px)}}
.msgs.fromProf{animation:msgsFromProf .45s .05s cubic-bezier(.22,.9,.28,1) backwards}
@keyframes msgsFromProf{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
html[data-motion=off] .profile-screen.leaving,html[data-motion=off] .msgs.fromProf{animation:none!important}


/* ===== меню «⋯»: пружинистое появление, пункты каскадом, плавное закрытие ===== */
.pmenu{transform-origin:calc(100% - 20px) 0;animation:pmIn .3s cubic-bezier(.2,.9,.25,1.12) both;will-change:transform,opacity}
@keyframes pmIn{from{opacity:0;transform:translateY(-10px) scale(.82)}to{opacity:1;transform:none}}
.pmenu.closing{animation:pmOut .17s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
@keyframes pmOut{to{opacity:0;transform:translateY(-8px) scale(.88)}}
.pmenu>*{animation:pmItem .32s cubic-bezier(.22,.9,.28,1) both}
.pmenu.closing>*{animation:none}
@keyframes pmItem{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.pmenu>:nth-child(1){animation-delay:.04s}.pmenu>:nth-child(2){animation-delay:.075s}.pmenu>:nth-child(3){animation-delay:.11s}
.pmenu>:nth-child(4){animation-delay:.145s}.pmenu>:nth-child(5){animation-delay:.18s}.pmenu>:nth-child(6){animation-delay:.215s}
.pmenu button{transition:background .15s,transform .15s cubic-bezier(.2,.8,.2,1)}
.pmenu button:hover{transform:translateX(3px)}
#profMoreBtn svg{transition:transform .38s cubic-bezier(.34,1.56,.5,1)}
#profMoreBtn.open{color:var(--ink);background:rgba(var(--t),.12)}
#profMoreBtn.open svg{transform:rotate(90deg)}

/* ===== настройки в профиле ===== */
.profile-screen:not(.hidden) .profile-card-wrap>#myProfileSettings{animation:none}
.profile-screen:not(.hidden) #myProfileSettings>.sg{animation:sgIn .55s cubic-bezier(.22,.9,.28,1) both}
@keyframes sgIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(1){animation-delay:.40s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(2){animation-delay:.47s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(3){animation-delay:.54s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(4){animation-delay:.61s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(5){animation-delay:.68s}

.sg{transition:border-color .25s,background .25s,box-shadow .25s}
.sg.is-open{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:rgba(var(--t),.05)}
.sg summary{transition:transform .16s cubic-bezier(.2,.8,.2,1),background .2s}
.sg summary:hover{background:rgba(var(--t),.04)}
.sg.js[open] summary::after{transform:none}
.sg summary::after{transition:transform .38s cubic-bezier(.34,1.56,.5,1),color .2s}
.sg.js.is-open summary::after{transform:rotate(90deg);color:var(--accent)}

#myProfileSettings .seg button{transition:background .25s,color .25s,transform .16s cubic-bezier(.2,.8,.2,1)}
#myProfileSettings .seg button:not(.on):hover{background:rgba(var(--t),.07);color:var(--ink)}
#myProfileSettings .seg button.on{animation:segOn .38s cubic-bezier(.34,1.56,.5,1)}
@keyframes segOn{0%{transform:scale(.9)}100%{transform:none}}
#myProfileSettings .sw{transition:box-shadow .3s,transform .25s cubic-bezier(.34,1.56,.5,1)}
#myProfileSettings .sw:hover{transform:scale(1.14)}
#myProfileSettings .sw:active{transform:scale(.92)}
#myProfileSettings .sw.on{animation:swOn .45s cubic-bezier(.34,1.56,.5,1)}
@keyframes swOn{0%{transform:scale(.7)}100%{transform:none}}
#myProfileSettings .wp-card{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
#myProfileSettings .wp-card:hover{transform:translateY(-2px)}
#myProfileSettings .chk{cursor:pointer}
#myProfileSettings .chk input{transition:transform .2s cubic-bezier(.34,1.56,.5,1)}
#myProfileSettings .chk input:active{transform:scale(.85)}
#myProfileSettings .sess{animation:fade .35s both}

/* плавная смена темы и акцента (класс ставится на <html> на полсекунды) */
html.theme-fx *,html.theme-fx *::before,html.theme-fx *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,fill .4s ease,stroke .4s ease!important}


/* ===== ускоренные анимации профиля (открытие / закрытие) ===== */
.profile-screen:not(.hidden){animation-duration:.22s}
.profile-screen:not(.hidden) .profile-card-wrap .avatar-wrap{animation-duration:.34s;animation-delay:.02s}
.profile-screen:not(.hidden) .profile-card-wrap > :not(.avatar-wrap):not(.logout-btn){animation-duration:.28s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(1){animation-delay:0.048s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(2){animation-delay:0.066s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(3){animation-delay:0.084s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(4){animation-delay:0.102s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(5){animation-delay:0.120s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(6){animation-delay:0.138s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(7){animation-delay:0.156s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(8){animation-delay:0.174s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(9){animation-delay:0.192s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(10){animation-delay:0.210s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(11){animation-delay:0.228s}
.profile-screen:not(.hidden) .profile-card-wrap > :nth-child(12){animation-delay:0.246s}
.profile-screen:not(.hidden) #profActions .pic{animation-duration:.3s}
.profile-screen:not(.hidden) #profActions .pic:nth-child(1){animation-delay:0.1s}
.profile-screen:not(.hidden) #profActions .pic:nth-child(2){animation-delay:0.14s}
.profile-screen:not(.hidden) #profActions .pic:nth-child(3){animation-delay:0.18s}
.profile-screen:not(.hidden) #myProfileSettings>.sg{animation-duration:.3s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(1){animation-delay:0.18s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(2){animation-delay:0.22s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(3){animation-delay:0.26s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(4){animation-delay:0.30s}
.profile-screen:not(.hidden) #myProfileSettings>.sg:nth-child(5){animation-delay:0.34s}
.profile-screen.leaving{animation-duration:.16s}
.profile-screen.leaving.to-chat{animation-duration:.2s}
.msgs.fromProf{animation-duration:.3s;animation-delay:.02s}

/* вложение ещё загружается: чуть приглушено, пока идут часики */
.m.upl .att-img{opacity:.75;transition:opacity .25s}
.m.upl .att-file{opacity:.8}

/* плавное появление и скрытие плашки закрепленного сообщения */
@keyframes pinIn{from{max-height:0;opacity:0;padding-top:0;padding-bottom:0;transform:translateY(-8px)}to{max-height:80px;opacity:1;transform:none}}
@keyframes pinOut{from{max-height:80px;opacity:1;transform:none}to{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-width:0;transform:translateY(-8px)}}
.pinned-banner.pin-in{overflow:hidden;animation:pinIn .32s cubic-bezier(.2,.8,.2,1) both}
.pinned-banner.pin-out{overflow:hidden;pointer-events:none;animation:pinOut .26s cubic-bezier(.4,0,.2,1) forwards}

/* фото во вкладке «Медиа»: пока грузится — мерцающий квадратик, потом плавно проявляется */
.mth{position:relative}
.mth img{transition:opacity .3s}
.mth.sk img{opacity:0}
.mth.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(var(--t),.12) 50%,transparent 80%);transform:translateX(-100%);animation:skelSh 1.4s ease-in-out infinite}

/* галочки как в Telegram: одна серая — отправлено, две яркие — прочитано */
.tk,.m.me .tk,.m.me .tk.rd{display:inline-block;vertical-align:-1px;line-height:0;font-size:0;margin-left:4px;font-weight:400;text-shadow:none}
.tk svg{display:block;width:17px;height:11px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tk .t2{opacity:0}
.tk.rd .t2{opacity:1}
.tk.pop{animation:none}
.tk.pop .t2{animation:tkDraw .34s .04s cubic-bezier(.3,.7,.3,1) both}
@keyframes tkDraw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.m.me .tk{color:rgba(255,255,255,.5)}
.m.me .tk.rd{color:var(--accent);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 55%,transparent))}
html[data-theme=light] .m.me .tk{color:rgba(255,255,255,.55)}
html[data-theme=light] .m.me .tk.rd{color:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
.m.emo small .tk,.m.emo small .tk.rd{color:#fff;filter:none}

/* видео в чате */
.att-vid{position:relative;display:block;width:min(320px,62vw);max-width:100%;min-height:120px;margin:0 0 4px;border-radius:12px;overflow:hidden;background:#000}
.att-vid video{display:block;width:100%;max-height:min(420px,60vh);background:#000;object-fit:contain}
.m.upl .att-vid{opacity:.75;transition:opacity .25s}
.chip video{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#000}
#lightbox video{max-width:100%;max-height:100%;border-radius:8px;outline:0}

/* видео во вкладке «Медиа» */
.mth video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:opacity .3s}
.mth.sk video{opacity:0}
.mth.vid{cursor:pointer}
.mth .vplay-b{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(0,0,0,.5);pointer-events:none}
.mth .vplay-b::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff}