/* S Home — чат в стиле WhatsApp (шаг 53) */
.wa{--wa-bg:#efeae2;--wa-dot:rgba(11,20,26,.045);--wa-me:#d9fdd3;--wa-them:#fff;--wa-text:#111b21;--wa-meta:#667781;--wa-green:#00a884;--wa-blue:#53bdeb;--wa-head:var(--surface);--wa-in:#fff;--wa-day:#fff;
  display:flex;flex-direction:column;height:calc(100vh - 170px);min-height:480px;max-height:820px;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wa{--wa-bg:#0b141a;--wa-dot:rgba(255,255,255,.035);--wa-me:#005c4b;--wa-them:#202c33;--wa-text:#e9edef;--wa-meta:#8696a0;--wa-in:#2a3942;--wa-day:#182229}}
:root[data-theme="dark"] .wa{--wa-bg:#0b141a;--wa-dot:rgba(255,255,255,.035);--wa-me:#005c4b;--wa-them:#202c33;--wa-text:#e9edef;--wa-meta:#8696a0;--wa-in:#2a3942;--wa-day:#182229}
.wa-head{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--wa-head);border-bottom:1px solid var(--border)}
.wa-back{display:none;color:var(--text);padding:4px}
.wa-ava{flex:none;width:42px;height:42px;border-radius:50%;background:var(--grad);color:var(--on-accent,#fff);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.wa-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.wa-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-who span{font-size:12.5px;color:var(--muted)}
.wa-ctx{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}
.wa-ctx img,.wa-noimg{flex:none;width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--border);display:flex;align-items:center;justify-content:center}
.wa-ctxt{min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.wa-ctxt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-ctxt span{color:var(--muted)}
.wa-list{flex:1;overflow-y:auto;padding:12px 8% 10px;display:flex;flex-direction:column;background-color:var(--wa-bg);background-image:radial-gradient(var(--wa-dot) 1.5px,transparent 1.6px);background-size:22px 22px;color:var(--wa-text)}
.wa-day{align-self:center;margin:10px 0 6px}
.wa-day span{background:var(--wa-day);color:var(--wa-meta);font-size:12px;padding:4px 11px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-empty{margin:auto;color:var(--wa-meta);background:var(--wa-day);padding:8px 14px;border-radius:10px;font-size:14px}
.wa-row{display:flex;margin-top:8px}
.wa-row.me{justify-content:flex-end}
.wa-row.me+.wa-row.me,.wa-row.them+.wa-row.them{margin-top:2px}
.wa-bub{position:relative;max-width:min(78%,520px);padding:6px 8px 5px 9px;border-radius:10px;box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.wa-row.me .wa-bub{background:var(--wa-me);border-top-right-radius:0}
.wa-row.them .wa-bub{background:var(--wa-them);border-top-left-radius:0}
.wa-bub::after{content:"";position:absolute;top:0;width:9px;height:13px;background:inherit}
.wa-row.me .wa-bub::after{right:-8px;clip-path:polygon(0 0,100% 0,0 100%)}
.wa-row.them .wa-bub::after{left:-8px;clip-path:polygon(0 0,100% 0,100% 100%)}
.wa-row.me+.wa-row.me .wa-bub,.wa-row.them+.wa-row.them .wa-bub{border-radius:10px}
.wa-row.me+.wa-row.me .wa-bub::after,.wa-row.them+.wa-row.them .wa-bub::after{display:none}
.wa-txt{white-space:pre-wrap}
.wa-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:7px 0 -3px 10px;font-size:11px;color:var(--wa-meta);line-height:1}
.wa-bub:has(.wa-voice) .wa-meta,.wa-bub:has(.wa-img) .wa-meta{float:none;display:flex;justify-content:flex-end;margin:2px 0 0}
.wa-tick{display:inline-flex;color:var(--wa-meta)}
.wa-tick.read{color:var(--wa-blue)}
.wa-img{display:block;max-width:100%;max-height:300px;border-radius:7px;margin-bottom:3px}
.wa-voice{display:flex;align-items:center;gap:10px;min-width:230px;padding:2px 0}
.wa-voice audio{width:100%;height:36px}
.wa-play{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--wa-green);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wa-vmid{flex:1;min-width:0}
.wa-wave{display:flex;align-items:center;gap:2px;height:30px;cursor:pointer}
.wa-wave i{flex:1;min-width:2px;max-width:4px;background:var(--wa-meta);opacity:.55;border-radius:2px}
.wa-wave i.on{background:var(--wa-green);opacity:1}
.wa-vrow{display:flex;align-items:center;justify-content:space-between;margin-top:1px;font-size:11px;color:var(--wa-meta)}
.wa-speed{border:0;background:rgba(11,20,26,.12);color:var(--wa-text);font-size:11px;font-weight:700;border-radius:10px;padding:2px 7px;cursor:pointer}
.wa-form{display:flex;align-items:flex-end;gap:8px;padding:8px 10px;background:var(--wa-head);border-top:1px solid var(--border)}
.wa-form[hidden],.wa-rec[hidden],.wa-file[hidden],.wa-round[hidden]{display:none!important}
.wa-input{flex:1;display:flex;align-items:flex-end;gap:4px;background:var(--wa-in);border:1px solid var(--border);border-radius:24px;padding:4px 10px}
.wa-input textarea{flex:1;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;resize:none;font:inherit;font-size:15px;line-height:1.35;padding:8px 2px;max-height:140px;color:var(--text)}
.wa-attach{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:36px;color:var(--muted);cursor:pointer}
.wa-round{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--wa-green);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.wa-round[disabled]{opacity:.5}
.wa-rec{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--wa-head);border-top:1px solid var(--border)}
.wa-trash{flex:none;width:40px;height:40px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.wa-dot{flex:none;width:11px;height:11px;border-radius:50%;background:#ef4444;animation:wapulse 1s infinite}
@keyframes wapulse{0%,100%{opacity:1}50%{opacity:.3}}
.wa-live{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:2px;height:32px;overflow:hidden}
.wa-live i{width:3px;min-height:3px;background:var(--wa-green);border-radius:2px}
.wa-file{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;font-size:13px;background:var(--surface-2);border-top:1px solid var(--border)}
.wa-file button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px}
.wa-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--surface-2);border-top:1px solid var(--border);font-size:14px}
.wa .kebab{position:relative;margin-left:auto}
@media (max-width:860px){
  .wa{height:calc(100dvh - 150px);min-height:420px;border-radius:12px}
  .wa-back{display:flex}
  .wa-list{padding:10px 10px 8px}
  .wa-bub{max-width:86%}
}
/* список чатов — как в WhatsApp */
.chatrow{border-radius:0!important;border-bottom:1px solid var(--border);padding:12px 8px!important;align-items:center}
.chatrow .avatar.sm{width:52px;height:52px;border-radius:50%;font-size:20px}
.chatrow .ct{font-weight:700}
.chatrow .cl{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatrow.unread .cl{color:var(--text);font-weight:600}
.chatrow .dot{background:#25d366;color:#fff;border-radius:999px;min-width:22px;height:22px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.chatrow .ph{width:56px;height:56px;border-radius:12px}