:root{
  --bg:#050507; --side:#0c0c11; --card:#1c1c1e; --hover:#16161c; --fg:#f2f2f5; --mute:#8e8e93; --line:#1f1f28;
  --acc:#8b5cf6; --acc2:#a78bfa; --in:#1c1c1e; --out:#e9e7f2; --outfg:#111; --search:rgba(118,118,128,.24);
  --display:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root{
  --bg:#ebe9e3; --side:#f3f1ec; --card:#fbfaf7; --hover:#e8e5de; --fg:#16151a; --mute:#6c6a72; --line:#d6d2c8;
  --in:#fbfaf7; --out:#16151a; --outfg:#fff; --search:rgba(118,118,128,.12); color-scheme:light}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--display);font-size:15px;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.brand{font-weight:900;font-size:30px;letter-spacing:-1.3px}.brand span{color:var(--acc)}.brand.small{font-size:24px}

/* вход */
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.lcard{background:var(--side);border:1px solid var(--line);border-radius:28px;padding:36px 40px;max-width:440px;width:100%;text-align:center}
.lcard h1{font-size:22px;font-weight:700;margin:18px 0 10px}
.steps{text-align:left;color:var(--mute);margin:0 auto 22px;padding-left:22px;max-width:300px;line-height:1.8}
.steps b{color:var(--fg);font-weight:600}
.qrbox{background:#fff;border-radius:20px;padding:16px;display:inline-block}
#qr img,#qr canvas{display:block;width:220px;height:220px}
.code{font-family:var(--mono);font-size:26px;letter-spacing:4px;margin:18px 0 6px}
.hint{color:var(--mute);font-size:13px;margin:0}

/* приложение */
.app{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-rows:100%;height:100vh;height:100dvh;overflow:hidden}
/* у списка и у переписки своя прокрутка: колонки не растут по содержимому, страница не прокручивается */
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.shead{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 10px}
.iconbtn{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--mute)}
.iconbtn:hover{background:var(--hover);color:var(--fg)}
.search{display:flex;align-items:center;gap:8px;margin:0 16px 10px;height:38px;border-radius:11px;background:var(--search);padding:0 10px;color:var(--mute)}
.search svg{width:18px;height:18px}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:16px}
.list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 16px}
.row{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:14px;cursor:pointer}
.row:hover{background:var(--hover)}
.row.on{background:color-mix(in srgb,var(--acc) 22%,transparent)}
.av{width:46px;height:46px;border-radius:50%;flex:none;background:#5b43b0 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px}
.rmid{flex:1;min-width:0}
.rtop{display:flex;justify-content:space-between;gap:8px}
.rtop b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtop time{font-family:var(--mono);font-size:11.5px;color:var(--mute);flex:none;padding-top:2px}
.rbot{display:flex;justify-content:space-between;gap:8px;margin-top:2px}
.rbot span{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.badge{background:var(--acc);color:#fff;border-radius:11px;min-width:22px;height:22px;padding:0 7px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}

.main{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;height:100%;background:var(--bg)}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mute);gap:12px}
.bubble-ic{width:72px;height:72px;border-radius:24px;background:color-mix(in srgb,var(--acc) 18%,transparent)}
.chat{flex:1;display:flex;flex-direction:column;min-height:0}
.chead{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--side)}
.chead .av{width:40px;height:40px;font-size:15px}
.ctitle{display:flex;flex-direction:column;min-width:0}
.ctitle b{font-weight:600}.ctitle small{color:var(--mute)}
.back{display:none}
.msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px max(18px,calc((100% - 820px)/2));display:flex;flex-direction:column;gap:4px}
/* как в мессенджерах: пока сообщений мало, они прижаты к низу, у поля ввода */
.msgs>:first-child{margin-top:auto}
.day{align-self:center;background:var(--card);color:var(--mute);font-size:12.5px;border-radius:12px;padding:4px 12px;margin:12px 0 6px}
.m{max-width:min(560px,78%);padding:8px 12px 6px;border-radius:18px;background:var(--in);align-self:flex-start;line-height:1.38;word-wrap:break-word;white-space:pre-wrap;position:relative}
.m.me{align-self:flex-end;background:var(--out);color:var(--outfg)}
.m .who{font-size:12.5px;font-weight:600;color:var(--acc2);margin-bottom:2px;white-space:normal}
.m .meta{float:right;margin:6px 0 0 10px;font-family:var(--mono);font-size:11px;opacity:.55;white-space:nowrap}
.m img.ph{display:block;max-width:100%;max-height:340px;border-radius:12px;margin:-2px -6px 4px;cursor:zoom-in}
.m.stk{background:none;padding:0}
.m.stk img{width:150px;height:150px;object-fit:contain}
.m.stk .emo{font-size:64px;line-height:1}
.m a.file{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}
.m a.file i{width:40px;height:40px;border-radius:10px;background:var(--acc);color:#fff;font-style:normal;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center}
.m audio{display:block;max-width:280px;height:36px}
.m .tr{border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);margin-top:6px;padding-top:6px;font-size:14px}
.m .reply{border-left:3px solid var(--acc);padding-left:8px;margin-bottom:4px;font-size:13px;opacity:.75;white-space:normal}
.composer{display:flex;align-items:flex-end;gap:8px;padding:12px max(18px,calc((100% - 820px)/2)) 16px;border-top:1px solid var(--line);background:var(--side)}
.composer textarea{flex:1;resize:none;background:var(--card);border:1px solid var(--line);border-radius:20px;color:var(--fg);font:inherit;font-size:15.5px;padding:10px 14px;max-height:180px;outline:0}
.composer textarea:focus{border-color:var(--acc)}
.send{width:42px;height:42px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.send:disabled{opacity:.5}
.attach{cursor:pointer;flex:none}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 16px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.viewer{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:9;cursor:zoom-out}
.viewer img{max-width:94vw;max-height:94vh;border-radius:8px}

@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .app.open .side{display:none}
  .app:not(.open) .main{display:none}
  .back{display:flex}
}