@font-face { font-family: Manrope; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Manrope; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
:root { --bg: #131211; --bg2: #131211; --card: #1d1c1a; --line: #ffffff0d; --text: #efebe4; --muted: #8b867e; --accent: #d8bf98; --accent2: #b89a6e;
  --out: #2c2925; --in: #1e1d1b; --green: #5fae7f; --red: #d0574c; --blue: #b9cbe0; --ease: cubic-bezier(.22,1,.36,1); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 16px/1.4 Manrope, system-ui, sans-serif; letter-spacing: -.005em; overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
input, textarea { font: inherit; color: var(--text); }
svg.i { width: 22px; height: 22px; display: block; flex: none; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); animation: fade .28s var(--ease); }
.screen[hidden] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.screen.dark { background: #0e0d0c; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.c { text-align: center; } .muted { color: var(--muted); } .small { font-size: 13px; } .grow { flex: 1; }

.auth { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 22vh 28px 40px; max-width: 420px; width: 100%; margin: 0 auto; }
.wordmark { font-size: 44px; font-weight: 300; letter-spacing: -.035em; text-align: center; }
.wordmark::after { content: ''; display: block; width: 28px; height: 1px; background: var(--accent); margin: 18px auto 0; }
.link.quiet { color: var(--muted); font-size: 14px; }
.form { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.who { display: flex; gap: 8px; margin-bottom: 8px; } .who .btn { background: var(--card); color: var(--text); font-size: 17px; padding: 18px 16px; border: 1px solid transparent; } .who .btn.on { border-color: var(--accent); color: var(--accent); }
input { width: 100%; background: var(--card); border: 1px solid transparent; border-radius: 12px; padding: 13px 14px; outline: none; transition: border-color .2s; }
input::placeholder, textarea::placeholder { color: #6b675f; }
input:focus { border-color: #ffffff26; }
.err { color: #e08a80; min-height: 1.2em; font-size: 14px; text-align: center; }
.err:empty { min-height: 0; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border: 0; border-radius: 12px; padding: 13px 16px; font-weight: 600; cursor: pointer; width: 100%; transition: transform .14s var(--ease), opacity .2s; }
.btn:active, .ib:active, .round:active, .opt:active { transform: scale(.97); }
.btn svg.i { width: 18px; height: 18px; }
.btn.primary { background: var(--accent); color: #1a1714; } .btn.soft { background: var(--card); } .btn.ghost { background: none; color: var(--muted); margin-top: 18px; font-weight: 500; }
.link { background: none; border: 0; color: var(--accent); padding: 10px; cursor: pointer; }
a.link { text-align: center; text-decoration: none; }
.bar { display: flex; align-items: center; gap: 4px; padding: 6px 6px; min-height: 56px; background: var(--bg2); border-bottom: 1px solid var(--line); flex: none; }
.bar .title { flex: 1; font-size: 18px; font-weight: 600; letter-spacing: -.02em; padding-left: 6px; }
.ib { background: none; border: 0; min-width: 44px; height: 44px; border-radius: 22px; font-size: 20px; transition: transform .14s var(--ease); cursor: pointer; display: grid; place-items: center; color: var(--muted); flex: none; }
.ib:active { background: #ffffff0d; }
.ib.send { color: var(--accent); }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.searchbox { padding: 8px 10px; background: var(--bg2); flex: none; }
.searchbox input { padding: 10px 14px; border-radius: 12px; }

.ava { width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 500; font-size: 20px; color: var(--accent); background: #2a2724; background-size: cover; background-position: center; flex: none; overflow: hidden; }
.ava.sm { width: 38px; height: 38px; font-size: 16px; } .ava.xl { width: 116px; height: 116px; font-size: 46px; }
.ava.saved { background: #2a2724; color: var(--accent); } .ava svg.i { width: 46%; height: 46%; }
.ava.c1 { background: #2e2925; color: #d8bf98; } .ava.c2 { background: #252b27; color: #a9c2ae; } .ava.c3 { background: #2a2730; color: #bfb5d2; } .ava.c4 { background: #2f2b22; color: #d6c48f; } .ava.c5 { background: #232a2d; color: #a8c0c9; }
.onl { position: relative; } .onl::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2px solid var(--bg); }

.item { display: flex; gap: 12px; align-items: center; padding: 9px 12px; cursor: pointer; }
.item:active { background: #ffffff0a; }
.item .body { flex: 1; min-width: 0; border-bottom: 1px solid var(--line); padding-bottom: 9px; margin-bottom: -9px; }
.item .top { display: flex; gap: 8px; align-items: baseline; }
.item .name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .time { color: var(--muted); font-size: 13px; flex: none; }
.item .sub { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 15px; margin-top: 2px; }
.item .sub span:first-child { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { background: var(--accent); color: #1a1714; border-radius: 11px; min-width: 22px; height: 22px; padding: 0 7px; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; }
.typing { color: var(--accent) !important; }
.sect { padding: 18px 16px 6px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.addbtn { background: var(--card); color: var(--text); border: 0; border-radius: 16px; padding: 6px 12px; font-weight: 600; font-size: 14px; cursor: pointer; }
.empty { padding: 40px 24px; text-align: center; color: var(--muted); }

.peerhead { flex: 1; display: flex; gap: 10px; align-items: center; min-width: 0; cursor: pointer; }
.peerhead > div { min-width: 0; } .pn { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps.on { color: var(--accent); }
.pinbar, .searchbar { display: flex; align-items: center; gap: 8px; background: var(--bg2); border-bottom: 1px solid var(--line); padding: 4px 4px 4px 12px; flex: none; cursor: pointer; }
.pinline, .ctxline { width: 3px; align-self: stretch; background: var(--accent); border-radius: 2px; margin: 4px 0; }
.pintext, .ctxtext { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.pintext b, .ctxtext b { color: var(--accent); font-weight: 600; } .pintext span, .ctxtext span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.searchbar input { padding: 8px 12px; }

.msgs { padding: 8px 8px 4px; background: var(--bg); }
.day { text-align: center; margin: 10px 0; } .day span { background: none; letter-spacing: .02em; color: var(--muted); font-size: 13px; padding: 3px 10px; border-radius: 12px; }
.m { display: flex; margin: 2px 0; transition: transform .15s; } .m.out { justify-content: flex-end; }
.m .b { max-width: min(82%, 520px); background: var(--in); border-radius: 18px 18px 18px 6px; padding: 6px 10px 5px; position: relative; word-wrap: break-word; overflow-wrap: anywhere; }
.m.out .b { background: var(--out); border-radius: 18px 18px 6px 18px; }
.m.hl .b { box-shadow: 0 0 0 2px var(--accent); }
.m .txt { white-space: pre-wrap; } .m .txt a { color: var(--blue); }
.m .big { font-size: 42px; line-height: 1.15; }
.m .meta { float: right; margin: 6px 0 -4px 10px; font-size: 11px; color: #ffffff66; font-variant-numeric: tabular-nums; display: flex; gap: 3px; align-items: center; white-space: nowrap; }
.m .meta .tick { color: #ffffff90; } .m .meta .tick.read { color: var(--accent); } .m .meta .tick.fail { color: #ff8f84; }
.m .media { margin: -2px -6px 2px; border-radius: 12px; overflow: hidden; display: block; max-width: 300px; background: #0003; position: relative; }
.m .media img, .m .media video { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.m .media + .meta { position: absolute; right: 12px; bottom: 9px; background: #0007; padding: 1px 6px; border-radius: 9px; margin: 0; }
.m .media.withcap + .meta { position: static; background: none; padding: 0; margin: 6px 0 -4px 10px; }
.m .quote { border-left: 3px solid var(--accent); padding: 2px 8px; margin: 2px 0 4px; font-size: 14px; background: #ffffff0d; border-radius: 4px; cursor: pointer; }
.m .quote b { color: var(--accent); display: block; font-weight: 600; } .m .quote span { color: #ffffffb0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.m .fwd { color: var(--accent); font-size: 13px; margin-bottom: 2px; }
.m .file { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; padding: 4px 0; }
.m .file .fi { width: 44px; height: 44px; border-radius: 12px; background: #ffffff10; color: var(--accent); display: grid; place-items: center; font-size: 20px; flex: none; }
.m .file .fn { font-weight: 600; word-break: break-all; } .m .file .fs { font-size: 13px; color: #ffffffa0; }
.m .voice { display: flex; gap: 10px; align-items: center; min-width: 210px; padding: 2px 0; }
.m .voice .play { width: 42px; height: 42px; border-radius: 50%; background: var(--text); color: #131211; border: 0; cursor: pointer; flex: none; display: grid; place-items: center; } .m .voice .play svg.i { width: 18px; height: 18px; }
.m .wave { display: flex; gap: 2px; align-items: center; height: 30px; flex: 1; cursor: pointer; }
.m .wave i { width: 3px; border-radius: 2px; background: #ffffff55; display: block; } .m .wave i.on { background: var(--accent); }
.m .vdur { font-size: 12px; color: #ffffffa0; }
.m .call { display: flex; gap: 10px; align-items: center; padding: 4px 0; } .m .call .ci { color: var(--accent); } .m .call .ci svg.i { width: 18px; height: 18px; }
.m .call .miss { color: #ff8f84; }
.m .reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; clear: both; }
.m .reacts button { background: #ffffff18; border: 0; border-radius: 12px; padding: 1px 8px; font-size: 14px; cursor: pointer; }
.m .reacts button.mine { background: #d8bf9840; }
.m .del { color: var(--muted); font-style: italic; }
.m .prog { position: absolute; inset: 0; display: grid; place-items: center; background: #0006; color: #fff; font-weight: 600; }
.unreadline { text-align: center; color: var(--accent); font-size: 13px; margin: 8px 0; background: #ffffff08; padding: 3px; }
.tobottom { position: absolute; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; }
.tobottom span { position: absolute; top: -6px; right: -4px; background: var(--accent); color: #1a1714; font-size: 12px; border-radius: 10px; padding: 0 6px; font-weight: 700; }
.tobottom span:empty { display: none; }
.results .item .sub span { white-space: normal; }

.composer { background: var(--bg2); border-top: 1px solid var(--line); flex: none; }
.composer .row { display: flex; align-items: flex-end; gap: 2px; padding: 4px; }
.ctx { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0 12px; }
.composer textarea { flex: 1; resize: none; background: none; border: 0; outline: none; padding: 11px 6px; max-height: 140px; line-height: 1.35; }
.rec { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 16px; min-height: 52px; }
.rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

.profile { display: flex; flex-direction: column; align-items: center; padding: 22px 16px 40px; max-width: 520px; margin: 0 auto; }
.pname { font-size: 24px; font-weight: 500; letter-spacing: -.02em; margin-top: 12px; text-align: center; }
.actions, .row2 { display: flex; gap: 10px; width: 100%; margin-top: 16px; } .actions > *, .row2 > * { flex: 1; }
.card { width: 100%; background: var(--card); border-radius: 16px; padding: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.card:empty { display: none; }
.card h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .card p { margin: 0; }
.card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); } .card input { background: #ffffff08; }
.card .kv b { display: block; } .card .kv span { color: var(--muted); font-size: 13px; }
.media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; margin-top: 14px; }
.media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; }
label.ava { cursor: pointer; }

.callrow { display: flex; gap: 18px; justify-content: center; padding: 20px 16px 36px; }
.round { width: 72px; height: 72px; border-radius: 50%; border: 0; color: #fff; cursor: pointer; position: relative; margin-bottom: 22px; display: grid; place-items: center; transition: transform .14s var(--ease), background .2s; } .round svg.i { width: 26px; height: 26px; }
.round small { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; }
.round.red { background: var(--red); } .round.green { background: var(--green); } .round.soft { background: #ffffff14; } .round.on { background: var(--text); color: var(--bg); }
#timer { font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 6px; min-height: 1.3em; }
.pulse { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #d8bf9855; } 100% { box-shadow: 0 0 0 36px #d8bf9800; } }

.sheet-wrap { position: fixed; inset: 0; background: #0009; display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.sheet-wrap[hidden] { display: none; }
.sheet { width: 100%; max-width: 520px; background: #1b1a18; border-radius: 20px 20px 0 0; animation: up .3s var(--ease); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; }
.sheet .opt svg.i { color: var(--muted); width: 20px; height: 20px; } .sheet .opt .ava { width: 32px; height: 32px; font-size: 14px; }
.sheet .opt { display: flex; gap: 16px; align-items: center; width: 100%; background: none; border: 0; padding: 13px 20px; text-align: left; cursor: pointer; font-size: 16px; }
.sheet .opt:active { background: #ffffff0d; } .sheet .opt.danger { color: #ff8f84; }
.sheet .emojis { display: flex; justify-content: space-around; padding: 6px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.sheet .emojis button { background: none; border: 0; font-size: 28px; cursor: pointer; padding: 4px; border-radius: 12px; }
.sheet .emojis button:active { background: #ffffff18; }
.sheet h4 { margin: 6px 20px 10px; }
.viewer { position: fixed; inset: 0; background: #000; z-index: 30; display: grid; place-items: center; }
.viewer[hidden] { display: none; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vclose { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; color: #fff; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom)); background: #000d; color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 40; font-size: 14px; max-width: 90%; text-align: center; }
.toast[hidden] { display: none; }
.banner { background: var(--accent); color: #1a1714; font-weight: 600; text-align: center; padding: 12px; cursor: pointer; flex: none; }
#net { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; text-align: center; background: #000c; color: var(--muted); font-size: 13px; padding: 3px; z-index: 50; }
[hidden] { display: none !important; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.ps.on, .typing { color: var(--accent) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.card .btn.soft { background: #ffffff0b; }

/* Кружки */
.m .b.bare { background: none; padding: 0; }
.m .circle { position: relative; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; background: #0004; cursor: pointer; transition: width .25s var(--ease), height .25s var(--ease); }
.m .circle.playing { width: 270px; height: 270px; }
.m .circle video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.m .circle .cring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.cring circle { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.m .circle .cdur { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: #0008; color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.m .b.bare .meta { float: none; justify-content: flex-end; margin: 4px 4px 0; }
.m .b.bare .reacts { justify-content: flex-end; }
.circrec { position: fixed; inset: 0; z-index: 25; background: #0e0d0cf2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: fade .25s var(--ease); }
.circrec[hidden] { display: none; }
.circwrap { position: relative; width: min(78vw, 340px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; }
.circwrap video { width: 100%; height: 100%; object-fit: cover; }
.circwrap video.mirror { transform: scaleX(-1); }
.circwrap .cring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.circtime { display: flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.circtime .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: blink 1s infinite; }
.round.accent { background: var(--accent); color: #1a1714; }
/* Скорость голосовых */
.m .spd { background: #ffffff18; border: 0; border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700; color: #ffffffc0; margin-left: 6px; cursor: pointer; }
/* Отложенные, напоминания, тайная переписка */
.laterbar { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--accent); padding: 8px 14px; font-size: 14px; cursor: pointer; }
.laterbar svg.i { width: 17px; height: 17px; }
.m .tag { display: flex; align-items: center; gap: 5px; color: var(--accent); font-size: 13px; margin-bottom: 2px; } .m .tag svg.i { width: 14px; height: 14px; }
.m .meta svg.i { width: 11px; height: 11px; }
.pn svg.i { width: 14px; height: 14px; display: inline-block; vertical-align: -1px; margin-right: 5px; color: var(--accent); }
.sheet .when { display: flex; gap: 8px; padding: 6px 20px 10px; } .sheet .when input { flex: 1; color-scheme: dark; } .sheet .when .btn { width: auto; }
.sheet .li { display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); }
.sheet .li .lt { flex: 1; min-width: 0; } .sheet .li .lt b { display: block; color: var(--accent); font-size: 13px; font-weight: 600; } .sheet .li .lt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Общий список */
.todo { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--line); }
.todo .chk { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #ffffff40; background: none; display: grid; place-items: center; flex: none; cursor: pointer; padding: 0; color: #1a1714; }
.todo .chk svg.i { width: 16px; height: 16px; }
.todo.done .chk { background: var(--accent); border-color: var(--accent); }
.todo .tt { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 8px 0; } .todo .tt a { color: var(--blue); }
.todo.done .tt { color: var(--muted); text-decoration: line-through; }
.todo .ib svg.i { width: 18px; height: 18px; }
#todoForm input { background: none; padding: 11px 10px; }
/* Видеозвонок */
.rv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.lv { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 104px; height: 140px; object-fit: cover; border-radius: 14px; z-index: 2; transform: scaleX(-1); box-shadow: 0 6px 24px #0008; cursor: pointer; }
.lv.back { transform: none; }
#call .center, #call .callrow { position: relative; z-index: 1; }
#call.video .center { justify-content: flex-start; padding-top: calc(18px + env(safe-area-inset-top)); text-shadow: 0 1px 8px #000a; }
#call.video #cAva { display: none; }
#call.video .callrow { background: linear-gradient(transparent, #000a); }
.callrow { gap: 14px; } .round { width: 66px; height: 66px; } .round small { top: 74px; }

/* Мой QR-код и сканер */
.item.tool .ava { background: none; border: 1px solid var(--line); }
.item.tool .body { border: 0; }
.myqr { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 6px 6px; }
.myqr .pname { margin-top: 10px; }
.qr { width: 220px; height: 220px; margin: 18px 0 2px; border-radius: 18px; overflow: hidden; }
.qr svg { display: block; width: 100%; height: 100%; }
.scanbox { position: fixed; inset: 0; z-index: 25; background: #000; display: grid; place-items: center; }
.scanbox[hidden] { display: none; }
.scanbox video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanframe { position: relative; width: min(64vw, 280px); aspect-ratio: 1; border: 1px solid var(--accent); border-radius: 22px; box-shadow: 0 0 0 100vmax #0009; }
.scanbox .round { position: absolute; bottom: calc(40px + env(safe-area-inset-bottom)); }

/* Компьютер: список чатов слева, переписка справа */
@media (hover: hover) and (pointer: fine) {
  .auth { padding-top: 12vh; }
  .item:hover, .sheet .opt:hover { background: #ffffff08; }
  .ib:hover { color: var(--text); }
  ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #ffffff14; border-radius: 4px; }
}
.pane { position: fixed; inset: 0 0 0 360px; display: grid; place-items: center; opacity: .35; pointer-events: none; }
.pane[hidden] { display: none; }
.wide #list { right: auto; width: 360px; border-right: 1px solid var(--line); animation: none; }
.wide #contacts, .wide #chat, .wide #todo, .wide #peer, .wide #settings { left: 360px; }
.wide .item.on { background: #ffffff0d; }
.wide .sheet-wrap { align-items: center; }
.wide .sheet { border-radius: 18px; max-width: 420px; }
.wide .toast { bottom: 40px; }
#chat.drop::after { content: ''; position: absolute; inset: 10px; border: 1px dashed var(--accent); border-radius: 18px; background: #d8bf9810; pointer-events: none; }
.btn.add { margin-top: 18px; }

/* Рядом на двоих: переписка с парой — главный экран, вместо «назад» — мой профиль */
.ib.me { display: none; }
#chat.home .back, .nopair #contacts .back { display: none; }
#chat.home .ib.me, .nopair #contacts .ib.me { display: grid; }
#chat .ib.upd { display: none; opacity: .55; } #chat.home .ib.upd { display: grid; }
.ib.upd.spin svg { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 860px) { body.duo .screen, body.nopair .screen { max-width: 760px; margin: 0 auto; border-inline: 1px solid var(--line); } }