/* РЕПЛИЧАТ · ровная вёрстка 720×1280 · без наложений шапки */
.ms,.ms *{box-sizing:border-box;margin:0;padding:0}
.ms{
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  width:720px;height:1280px;overflow:hidden;position:relative;
  font-family:var(--sf);-webkit-font-smoothing:antialiased;
  background:var(--bg);color:var(--txt);
  display:flex;flex-direction:column;
}
.ms button{border:0;background:0;padding:0;font:inherit;color:inherit}
.ms svg{display:block;flex-shrink:0}

/* Status */
.ms .top{flex:none;width:100%;position:relative;z-index:40}
.ms .sb{
  height:54px;padding:12px 28px 0;display:flex;align-items:center;justify-content:space-between;
  background:var(--sb-bg);color:var(--sb-fg);position:relative;width:100%;
}
.ms .sb-time{font-size:28px;font-weight:600;letter-spacing:.15px;line-height:1}
.ms .sb-island{display:none;position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:118px;height:34px;background:#000;border-radius:18px;z-index:45}
.ms.chrome-island .sb-island{display:block}
.ms .sb-right{display:flex;align-items:center;gap:7px}
.ms .sb-right svg{height:22px;width:auto}

/* Header — full-bleed bar */
.ms .hd{
  width:100%;height:88px;padding:0 12px 0 4px;display:flex;align-items:center;gap:10px;
  background:var(--hd-bg);border-bottom:var(--hd-border,none);margin:0;border-radius:0;
  box-shadow:none;
}
.ms .hd-back{width:40px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--hd-icon);flex:none}
.ms .hd-ava{
  width:68px;height:68px;border-radius:50%;background:var(--ava-bg);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;flex:none;position:relative;
}
.ms .hd-ava.online::after{
  content:'';position:absolute;right:0;bottom:0;width:16px;height:16px;
  background:#4caf50;border:3px solid var(--hd-bg);border-radius:50%;
}
.ms .hd-info{flex:1;min-width:0}
.ms .hd-name{
  font-size:32px;font-weight:600;letter-spacing:-.2px;color:var(--hd-name);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;
}
.ms .hd-sub{font-size:23px;color:var(--hd-sub);margin-top:1px;line-height:1.2}
.ms .hd-actions{display:flex;align-items:center;gap:18px;color:var(--hd-icon);padding-right:4px;flex:none}

/* Chat fills remaining space */
.ms .chat{
  flex:1;position:relative;overflow-x:hidden;overflow-y:auto;
  background-color:var(--bg);background-image:var(--wall);background-size:var(--wall-size,auto);
  background-repeat:repeat;scrollbar-width:none;min-height:0;
}
.ms .chat::-webkit-scrollbar{display:none}
.ms .chat-in{padding:8px 10px 14px;display:flex;flex-direction:column;justify-content:flex-end;min-height:100%}
.ms .date{
  align-self:center;font-size:22px;font-weight:500;padding:5px 12px;border-radius:999px;
  margin:2px auto 8px;background:var(--date-bg);color:var(--date-fg);
}

.ms .row{display:flex;margin:0 0 3px}
.ms .row.in{justify-content:flex-start;padding-right:72px}
.ms .row.out{justify-content:flex-end;padding-left:72px}
.ms .row.grp-tight{margin-bottom:1px}

.ms .bub{
  position:relative;max-width:100%;font-size:30px;line-height:1.3;letter-spacing:-.1px;
  word-wrap:break-word;overflow-wrap:anywhere;box-shadow:var(--bub-sh,none);padding:8px 11px 7px;
}
.ms .bub .txt{display:inline}
.ms .bub .meta{
  float:right;position:relative;top:6px;margin:0 0 0 8px;
  display:inline-flex;align-items:center;gap:3px;
  font-size:20px;line-height:1;color:var(--time);white-space:nowrap;
}
.ms .bub.voice .meta,.ms .bub.photo .meta{
  float:none;position:absolute;right:10px;bottom:8px;margin:0;top:auto;
}
.ms .ticks{opacity:.9;flex-shrink:0}
.ms .ticks.read{color:var(--read)!important;opacity:1}

/* WhatsApp */
.ms-wa{
  --bg:#efeae2;
  --wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg fill='none' stroke='%23c9bfb3' stroke-width='1.4' opacity='.5'%3E%3Cpath d='M20 60c14-20 36-20 50 0s36 20 50 0M140 30h28M250 70a14 14 0 110 28 14 14 0 010-28zM55 200l24-36 24 36M200 240h40'/%3E%3C/g%3E%3C/svg%3E");
  --wall-size:360px;
  --sb-bg:#f7f7f7;--sb-fg:#000;--hd-bg:#f7f7f7;--hd-border:none;
  --hd-name:#000;--hd-sub:#667781;--hd-icon:#007aff;--ava-bg:#00a884;
  --in-bg:#fff;--out-bg:#d9fdd3;--txt:#111b21;--time:#667781;--read:#53bdeb;
  --date-bg:rgba(255,255,255,.92);--date-fg:#54656f;
  --bar-bg:#f0f2f5;--field-bg:#fff;--field-ph:#8696a0;
  --vplay:#8696a0;--vrest:rgba(0,0,0,.14);--vdone:#34b7f1;
}
.ms-wa.ms-dark{
  --bg:#0b141a;--wall:none;--sb-bg:#1f2c33;--sb-fg:#e9edef;--hd-bg:#1f2c33;
  --hd-name:#e9edef;--hd-sub:#8696a0;--hd-icon:#00a884;
  --in-bg:#202c33;--out-bg:#005c4b;--txt:#e9edef;--time:#8696a0;
  --date-bg:rgba(17,27,33,.85);--date-fg:#8696a0;--bar-bg:#1f2c33;--field-bg:#2a3942;
}
.ms-wa .bub.in{background:var(--in-bg);color:var(--txt);border-radius:16px 16px 16px 4px}
.ms-wa .bub.out{background:var(--out-bg);color:var(--txt);border-radius:16px 16px 4px 16px}
.ms-wa .row.out{--vplay:#00a884}
.ms-wa .ibar{height:90px;padding:8px 10px;gap:8px;background:var(--bar-bg);border-top:1px solid rgba(0,0,0,.04);align-items:center}
.ms-wa .i-plus{width:40px;height:40px;color:#007aff;display:grid;place-items:center}
.ms-wa .i-plus svg{width:26px;height:26px}
.ms-wa .ifield{
  flex:1;height:64px;border-radius:32px;background:var(--field-bg);
  padding:0 14px 0 18px;display:flex;align-items:center;justify-content:space-between;
  font-size:28px;color:var(--field-ph);gap:8px;
}
.ms-wa .ifield-end{display:flex;align-items:center;gap:14px;color:#8696a0}
.ms-wa .ifield-end svg{width:24px;height:24px}

/* Telegram Android — 1:1 по референсу */
.ms-tg{
  --sf:Roboto,"Noto Sans",Arial,sans-serif;
  font-family:var(--sf);
  --bg:#c8d9b8;
  --wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' opacity='.22'%3E%3Cpath d='M40 50c8-12 20-12 28 0s20 12 28 0M110 30h20M200 55a12 12 0 110 24 12 12 0 010-24zM60 140l16-24 16 24M160 160h28M90 220a10 10 0 110 20 10 10 0 010-20zM240 120c6-6 16-6 22 0M30 260h36M180 250a8 8 0 110 16 8 8 0 010-16zM250 200l14 14-14 14-14-14zM140 80l10 6-4 12-10-6z'/%3E%3C/g%3E%3C/svg%3E");
  --wall-size:320px;
  --sb-bg:#517da2;--sb-fg:#fff;--hd-bg:#517da2;--hd-border:none;
  --hd-name:#fff;--hd-sub:rgba(255,255,255,.85);--hd-icon:#fff;--ava-bg:#6ba3d1;
  --in-bg:#fff;--out-bg:#effdde;--txt:#000;--time:#a1aab3;--read:#4fae4e;
  --date-bg:rgba(0,0,0,.2);--date-fg:#fff;
  --bar-bg:#fff;--field-bg:transparent;--field-ph:#a2acb4;--send:#517da2;
  --bub-sh:0 1px 1px rgba(0,0,0,.12);
  --vplay:#5eb0e5;--vrest:rgba(0,0,0,.14);--vdone:#5eb0e5;
}
.ms-tg.ms-dark .top,.ms-tg.ms-dark .sb,.ms-tg.ms-dark .hd{background:#17212b!important}
.ms-tg .top{background:#517da2;width:100%}
.ms-tg .sb,.ms-tg .hd{
  background:#517da2!important;width:100%!important;max-width:none!important;
  margin:0!important;border-radius:0!important;box-shadow:none!important;
  left:auto!important;right:auto!important;transform:none!important;
}
.ms-tg .sb{height:48px;padding:8px 22px 0}
.ms-tg .sb-time{font-size:26px;font-weight:500;color:#fff}
.ms-tg .sb-right{color:#fff}
.ms-tg .hd{
  height:112px;padding:0 8px 0 0;gap:8px;
  display:flex;align-items:center;
}
.ms-tg .hd-back{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;color:#fff;
}
.ms-tg .hd-back svg{width:16px;height:26px;stroke:#fff;stroke-width:2.4}
.ms-tg .hd-ava{
  width:80px;height:80px;font-size:28px;font-weight:500;color:#fff;
  background:linear-gradient(160deg,#a78bde 0%,#5b9bd5 100%)!important;
  border-radius:50%;flex:none;
}
.ms-tg .hd-info{flex:1;min-width:0;padding-right:8px}
.ms-tg .hd-name{font-size:34px;font-weight:500;letter-spacing:0;color:#fff;line-height:1.15}
.ms-tg .hd-sub{font-size:26px;font-weight:400;color:rgba(255,255,255,.88);margin-top:2px}
.ms-tg .hd-actions{gap:26px;padding-right:14px;color:#fff}
.ms-tg .hd-actions svg{width:30px;height:30px;fill:#fff;color:#fff}

.ms-tg .bub{font-size:31px;line-height:1.28;padding:10px 12px 8px;box-shadow:var(--bub-sh)}
.ms-tg .bub .meta{font-size:22px;color:var(--time);top:7px}
.ms-tg .bub.in{background:var(--in-bg);color:var(--txt);border-radius:12px;margin-left:6px}
.ms-tg .bub.out{background:var(--out-bg);color:var(--txt);border-radius:12px;margin-right:6px}
.ms-tg .bub.tail-in{border-bottom-left-radius:0;margin-left:0}
.ms-tg .bub.tail-out{border-bottom-right-radius:0;margin-right:0}
.ms-tg .bub.tail-in::before{
  content:'';position:absolute;left:-8px;bottom:0;width:12px;height:18px;background:var(--in-bg);
  border-bottom-right-radius:14px 12px;
}
.ms-tg .bub.tail-in::after{
  content:'';position:absolute;left:-10px;bottom:0;width:10px;height:18px;background:var(--bg);
  border-bottom-right-radius:10px;
}
.ms-tg .bub.tail-out::before{
  content:'';position:absolute;right:-8px;bottom:0;width:12px;height:18px;background:var(--out-bg);
  border-bottom-left-radius:14px 12px;
}
.ms-tg .bub.tail-out::after{
  content:'';position:absolute;right:-10px;bottom:0;width:10px;height:18px;background:var(--bg);
  border-bottom-left-radius:10px;
}
.ms-tg .row.grp-tight .bub{border-radius:12px}
.ms-tg .row.grp-tight .bub::before,.ms-tg .row.grp-tight .bub::after{display:none}
.ms-tg .ticks{color:#8e9194;margin-left:3px;display:block}
.ms-tg .ticks.read{color:#4fae4e!important}
.ms-tg.ms-dark .ticks{color:#6d7f8f}
.ms-tg.ms-dark .ticks.read{color:#6ab3f3!important}
.ms-tg .i-attach{color:#858585}
.ms-tg .i-attach svg{display:block}

.ms-tg .ibar{
  height:96px;padding:0 4px;gap:0;background:var(--bar-bg);
  border-top:1px solid rgba(0,0,0,.06);align-items:center;
}
.ms-tg .i-emoji,.ms-tg .i-attach,.ms-tg .i-mic-plain{
  width:52px;height:52px;display:grid;place-items:center;color:#8e959c;flex:none;
}
.ms-tg .i-emoji svg,.ms-tg .i-attach svg,.ms-tg .i-mic-plain svg{width:30px;height:30px}
.ms-tg .ifield-tg{
  flex:1;height:auto;border:none;border-radius:0;background:transparent;
  padding:0 6px;font-size:30px;color:var(--field-ph);display:flex;align-items:center;
}
.ms-tg.ms-android .home{height:16px;background:var(--bar-bg)}
.ms-tg.ms-android .home i{opacity:0;width:0}
.ms-tg .row.in{padding-right:80px}
.ms-tg .row.out{padding-left:80px}
.ms-tg .chat-in{padding:10px 8px 12px}

/* VK */
.ms-vk{
  --bg:#ebedf0;--wall:none;
  --sb-bg:#fff;--sb-fg:#000;--hd-bg:#fff;--hd-border:1px solid #e7e8ec;
  --hd-name:#000;--hd-sub:#818c99;--hd-icon:#2688eb;--ava-bg:#447bba;
  --in-bg:#fff;--out-bg:#cce4ff;--txt:#000;--time:#818c99;--read:#2688eb;
  --date-bg:rgba(0,0,0,.18);--date-fg:#fff;
  --bar-bg:#fff;--field-bg:#f0f2f5;--field-ph:#99a2ad;--send:#2688eb;
  --vplay:#2688eb;--vrest:rgba(0,0,0,.12);--vdone:#2688eb;
}
.ms-vk.ms-dark{
  --bg:#19191a;--sb-bg:#19191a;--sb-fg:#e1e3e6;--hd-bg:#19191a;--hd-border:1px solid #2c2d2e;
  --hd-name:#e1e3e6;--hd-sub:#76787a;--in-bg:#2c2d2e;--out-bg:#3f5d7e;--txt:#e1e3e6;
  --bar-bg:#19191a;--field-bg:#2c2d2e;--field-ph:#76787a;
}
.ms-vk .bub.in{background:var(--in-bg);color:var(--txt);border-radius:4px 16px 16px 16px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.ms-vk .bub.out{background:var(--out-bg);color:var(--txt);border-radius:16px 4px 16px 16px}
.ms-vk .ibar{height:90px;padding:10px 12px;gap:10px;border-top:1px solid #e7e8ec;align-items:center}
.ms-vk .ifield-vk{
  flex:1;height:64px;border-radius:16px;background:var(--field-bg);
  padding:0 16px;font-size:28px;color:var(--field-ph);display:flex;align-items:center;
}
.ms-vk .i-mic-send{width:52px;height:52px;border-radius:50%;background:var(--send);display:grid;place-items:center;color:#fff}
.ms-vk .i-mic-send svg{width:24px;height:24px}

/* Viber */
.ms-vb{
  --bg:#f0edf8;--wall:none;
  --sb-bg:#7360f2;--sb-fg:#fff;--hd-bg:#7360f2;
  --hd-name:#fff;--hd-sub:rgba(255,255,255,.8);--hd-icon:#fff;--ava-bg:#8b7cf6;
  --in-bg:#fff;--out-bg:#e0d9ff;--txt:#000;--time:#8e8e93;--read:#7360f2;
  --date-bg:rgba(0,0,0,.16);--date-fg:#fff;
  --bar-bg:#fff;--field-bg:#f5f3fa;--field-ph:#a0a0a8;--send:#7360f2;
  --vplay:#7360f2;--vrest:rgba(115,96,242,.22);--vdone:#7360f2;
}
.ms-vb.ms-dark{
  --bg:#121218;--sb-bg:#2a2340;--hd-bg:#2a2340;
  --in-bg:#252030;--out-bg:#4f42a0;--txt:#fff;--time:#8e8799;
  --bar-bg:#1a1822;--field-bg:#2a2538;--field-ph:#8e8799;
}
.ms-vb .bub.in{background:var(--in-bg);color:var(--txt);border-radius:18px}
.ms-vb .bub.out{background:var(--out-bg);color:var(--txt);border-radius:18px}
.ms-vb .ibar{height:80px;padding:8px 10px;gap:8px;align-items:center}
.ms-vb .i-attach{width:40px;height:40px;display:grid;place-items:center;color:#a0a0a8}
.ms-vb .ifield{
  flex:1;height:56px;border-radius:28px;background:var(--field-bg);
  padding:0 16px;font-size:27px;color:var(--field-ph);display:flex;align-items:center;
}
.ms-vb .i-mic-send{width:56px;height:56px;border-radius:50%;background:var(--send);display:grid;place-items:center;color:#fff}
.ms-vb .i-mic-send svg{width:26px;height:26px}

/* MAX */
.ms-mx{
  --bg:#efeaf8;
  --wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='none' stroke='%23cfc6e8' stroke-width='26' opacity='.32'%3E%3Ccircle cx='200' cy='200' r='60'/%3E%3Ccircle cx='200' cy='200' r='120'/%3E%3Ccircle cx='200' cy='200' r='180'/%3E%3C/g%3E%3C/svg%3E");
  --wall-size:400px;
  --sb-bg:#fff;--sb-fg:#000;--hd-bg:#fff;--hd-border:1px solid #ebe8f3;
  --hd-name:#1a1a24;--hd-sub:#8a8499;--hd-icon:#9b95ad;--ava-bg:#7f5af0;
  --in-bg:#fff;--out-bg:#e8dffc;--txt:#1a1a24;--time:#9b95ad;--read:#7f5af0;
  --date-bg:rgba(0,0,0,.12);--date-fg:#fff;
  --bar-bg:#fff;--field-bg:#f5f3fa;--field-ph:#9d97ad;--send:#7f5af0;
  --bub-sh:0 1px 2px rgba(80,60,120,.05);
  --vplay:#7f5af0;--vrest:rgba(127,90,240,.22);--vdone:#7f5af0;
}
.ms-mx.ms-dark{
  --bg:#0c0c10;--wall:none;--sb-bg:#14141c;--sb-fg:#eeeaf5;--hd-bg:#14141c;--hd-border:1px solid #222230;
  --hd-name:#eeeaf5;--hd-sub:#7a758a;--in-bg:#1a1a24;--out-bg:#4a38a0;--txt:#eeeaf5;
  --bar-bg:#14141c;--field-bg:#222230;--field-ph:#7a758a;
}
.ms-mx .bub.in{background:var(--in-bg);color:var(--txt);border-radius:16px 16px 16px 6px}
.ms-mx .bub.out{background:var(--out-bg);color:var(--txt);border-radius:16px 16px 6px 16px}
.ms-mx .ibar{height:90px;padding:10px 14px;gap:12px;border-top:1px solid #ebe8f3;align-items:center}
.ms-mx .ifield-mx{
  flex:1;height:64px;border-radius:32px;background:var(--field-bg);
  padding:0 20px;font-size:28px;color:var(--field-ph);display:flex;align-items:center;
}
.ms-mx .i-plus-send{width:64px;height:64px;border-radius:50%;background:var(--send);display:grid;place-items:center;color:#fff;flex:none}
.ms-mx .i-plus-send svg{width:28px;height:28px}

/* Voice / photo / typing */
.ms .voice{display:flex;align-items:center;gap:10px;min-width:280px;padding:8px 10px 24px!important}
.ms .vplay{width:48px;height:48px;border-radius:50%;background:var(--vplay);display:grid;place-items:center;flex:none;color:#fff}
.ms .vplay svg{width:20px;height:20px;margin-left:2px;fill:#fff}
.ms .vwave{flex:1;display:flex;align-items:center;gap:2.5px;height:32px}
.ms .vwave i{display:block;width:3px;border-radius:1.5px;background:var(--vrest);height:var(--h,40%);align-self:center}
.ms .vwave i.on{background:var(--vdone)}

.ms .photo{width:min(360px,100%);padding:0!important;overflow:hidden;border-radius:inherit;position:relative;background:#c8c0d0}
.ms .photo img{width:100%;display:block;aspect-ratio:1;object-fit:cover;background:linear-gradient(135deg,#d4cce0,#b8aec8)}
.ms .photo .meta{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.3);color:#fff;padding:3px 7px;border-radius:7px;font-size:19px}

.ms .typing{display:flex;justify-content:flex-start;margin-bottom:3px;padding-right:72px}
.ms .typing .bub{padding:12px 16px;display:inline-flex;gap:5px;align-items:center;min-width:64px;background:var(--in-bg);border-radius:16px}
.ms .typing i{width:8px;height:8px;border-radius:50%;background:var(--time);animation:tdot 1.15s infinite}
.ms .typing i:nth-child(2){animation-delay:.15s}
.ms .typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Input + home */
.ms .ibar{flex:none;display:flex;z-index:25;position:relative}
.ms .ifield{flex:1;display:flex;align-items:center}
.ms .home{
  height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--bar-bg);z-index:25;
}
.ms .home i{width:128px;height:5px;border-radius:3px;background:rgba(0,0,0,.18)}
.ms-dark .home i{background:rgba(255,255,255,.28)}

.ms .wm{
  position:absolute;right:14px;bottom:120px;z-index:20;
  background:rgba(0,0,0,.55);color:#fff;font-size:20px;font-weight:600;
  padding:6px 12px 6px 10px;border-radius:12px;display:none;align-items:center;gap:7px;
  letter-spacing:.02em;
}
.ms .wm.show{display:flex}
.ms .wm::before{content:'';width:7px;height:7px;border-radius:50%;background:#e8442a}

/* Capture / export: html2canvas-safe (no shadow frames, no pseudo-tails) */
.ms.ms-capturing,
.ms.ms-capturing *{
  outline:none!important;
  outline-offset:0!important;
  filter:none!important;
  -webkit-filter:none!important;
  text-shadow:none!important;
}
.ms.ms-capturing .bub,
.ms.ms-capturing .date,
.ms.ms-capturing .wm,
.ms.ms-capturing .vplay,
.ms.ms-capturing .photo,
.ms.ms-capturing .hd-ava,
.ms.ms-capturing .ifield{
  box-shadow:none!important;
}
.ms.ms-capturing .bub{
  border:1px solid rgba(0,0,0,.06)!important;
}
.ms.ms-capturing .bub.out{
  border-color:rgba(60,100,30,.1)!important;
}
.ms.ms-dark.ms-capturing .bub{
  border-color:rgba(255,255,255,.06)!important;
}
.ms.ms-capturing .bub::before,
.ms.ms-capturing .bub::after{
  display:none!important;
  content:none!important;
  background:transparent!important;
}
.ms.ms-capturing .bub.tail-in{
  border-bottom-left-radius:4px!important;
  margin-left:6px!important;
}
.ms.ms-capturing .bub.tail-out{
  border-bottom-right-radius:4px!important;
  margin-right:6px!important;
}
.ms.ms-capturing .row,
.ms.ms-capturing .chat-in,
.ms.ms-capturing .chat,
.ms.ms-capturing .top,
.ms.ms-capturing .hd,
.ms.ms-capturing .ibar,
.ms.ms-capturing .home{
  outline:none!important;
  box-shadow:none!important;
}
.ms.ms-capturing .chat,
.ms.ms-capturing .chat-in,
.ms.ms-capturing .row{
  border:none!important;
}
.ms.ms-capturing .photo{
  overflow:hidden!important;
}
.ms.ms-capturing .photo img{
  display:block!important;
  outline:none!important;
  box-shadow:none!important;
}

.ms-host{position:relative;width:100%;height:100%;overflow:hidden}
.ms-host>.ms{position:absolute}