:root{
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f2f5);
  --fg: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --link: var(--tg-theme-link-color, #2a7de1);
  --accent: var(--tg-theme-button-color, #2a7de1);
  --accent-fg: var(--tg-theme-button-text-color, #fff);
  --danger: #d1453b;
  --ok: #34a853;
  --line: color-mix(in srgb, var(--fg) 10%, transparent);
  --out: color-mix(in srgb, var(--accent) 16%, var(--bg));
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --app-h: var(--tg-viewport-stable-height, 100dvh);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--fg);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px;width:100%}
.hidden{display:none!important}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow{flex:1}

.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--hint);padding:24px;text-align:center}
.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.screen{position:fixed;top:0;left:0;right:0;height:var(--app-h);display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.screen > *{flex-shrink:0}
.screen > .list,.screen > .msgs,.screen > .form{flex:1 1 auto;min-height:0;overflow-y:auto}
.bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);min-height:52px}
.bar-title{font-weight:600;font-size:17px}
.bar-mid{flex:1;min-width:0}
.bar-sub{font-size:12px;color:var(--hint)}
.chip{font-size:13px;padding:5px 11px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);white-space:nowrap}
.chip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid var(--line);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips:empty{display:none}

.list{padding-bottom:calc(90px + var(--safe-b))}
.row{display:flex;gap:11px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.row:active{background:var(--bg2)}
.av{position:relative;width:46px;height:46px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;flex:none}
.av .pf{position:absolute;right:-3px;bottom:-3px;font-size:9px;font-weight:700;padding:1px 4px;border-radius:6px;border:2px solid var(--bg);color:#fff}
.pf.telegram{background:#2aabee}.pf.max{background:#7b4dff}.pf.whatsapp{background:#25d366}.pf.avito{background:#00aaff}.pf.hh{background:#d6001c}
.mid{flex:1;min-width:0}
.top{display:flex;gap:8px;align-items:baseline}
.name{font-weight:600;flex:1;min-width:0}
.time{font-size:12px;color:var(--hint);flex:none}
.sub{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--hint)}
.sub .pv{flex:1;min-width:0}
.tag{font-size:11px;color:var(--hint);background:var(--bg2);border-radius:6px;padding:0 6px;flex:none;max-width:120px}
.badge{min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:var(--accent-fg);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 6px;flex:none}
.empty{color:var(--hint);text-align:center;padding:48px 24px;line-height:1.5}
.note{color:var(--hint);font-size:14px;padding:12px 14px;line-height:1.45}

.msgs{padding:10px 10px 6px;display:flex;flex-direction:column;gap:4px;background:var(--bg2)}
.day{align-self:center;font-size:12px;color:var(--hint);background:var(--bg);border-radius:10px;padding:2px 10px;margin:8px 0 4px}
.msg{max-width:82%;padding:7px 10px 5px;border-radius:14px;background:var(--bg);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;align-self:flex-start}
.msg.out{align-self:flex-end;background:var(--out)}
.msg .meta{font-size:11px;color:var(--hint);text-align:right;margin-top:2px}
.msg.error .meta{color:var(--danger)}
.composer{display:flex;gap:8px;align-items:flex-end;padding:8px 10px calc(8px + var(--safe-b));border-top:1px solid var(--line);background:var(--bg)}
.composer textarea{resize:none;max-height:140px;border-radius:18px;padding:9px 14px}
.send{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-size:20px;flex:none}
.send:disabled{opacity:.5}

.fab{position:fixed;left:16px;right:16px;bottom:calc(12px + max(var(--safe-b), 12px));background:var(--accent);color:var(--accent-fg);font-weight:600;padding:14px;border-radius:14px}
.st{font-size:12px;display:flex;align-items:center;gap:5px;color:var(--hint)}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hint)}
.st.online::before{background:var(--ok)}.st.error::before,.st.need_login::before{background:var(--danger)}
.st.connecting::before{background:#f2a300}

.form{padding:16px 14px calc(30px + var(--safe-b));display:flex;flex-direction:column;gap:12px}
.form label{font-size:13px;color:var(--hint);margin-bottom:-6px}
.btn{background:var(--accent);color:var(--accent-fg);font-weight:600;padding:13px;border-radius:12px;width:100%}
.btn.ghost{background:var(--bg2);color:var(--fg)}
.btn.danger{background:none;color:var(--danger)}
.btn:disabled{opacity:.5}
.plat{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:12px;text-align:left;width:100%}
.plat:disabled{opacity:.45}
.plat .soon{margin-left:auto;font-size:12px;color:var(--hint)}
.hint{font-size:13px;color:var(--hint)}
.err{font-size:14px;color:var(--danger)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.switch input{width:auto;transform:scale(1.3)}

.person{padding:12px 14px;border-bottom:1px solid var(--line)}
.person .chs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(80px + var(--safe-b));background:#323232;color:#fff;padding:11px 14px;border-radius:12px;font-size:14px;z-index:10;text-align:center}