/* ============================================================
   Чаты — scoped under .ch-host (interactive: list / conversation / group info)
   Faithful reproduction of the warm-beige chat design.
   ============================================================ */
.ch-host{
  position:absolute; top:0; left:0; width:390px; height:844px; transform-origin:top left;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --bg:linear-gradient(180deg,#FBF4E8 0%,#F4E9D7 100%);
  --text-1:#2E2517; --text-2:#7C6A52; --text-3:#A6957A;
  --surface:rgba(255,255,255,0.74); --line:rgba(120,90,55,0.12);
  --accent:#C2683D; --accent-2:#E0962F; --accent-soft:rgba(194,104,61,0.12);
  --tab-on:#C2683D; --tab-on-bg:rgba(194,104,61,0.13);
  --bubble-in:#FFFFFF; --bubble-out:linear-gradient(135deg,#E0962F,#C2683D);
  --shadow:0 6px 20px rgba(120,90,55,0.13); --shadow-soft:0 2px 10px rgba(120,90,55,0.09);
  --green:#3E8E5A; --red:#D9483B;
  color:var(--text-1); background:var(--bg); overflow:hidden;
}
.ch-statusbar{ position:absolute; top:0; left:0; right:0; height:54px; z-index:40; display:flex; align-items:flex-end; justify-content:space-between; padding:0 30px 8px; pointer-events:none; color:var(--text-1); }
.ch-statusbar .t{ font:700 16px/1 'Montserrat',sans-serif; }
.ch-statusbar .r{ display:flex; align-items:center; gap:7px; }

/* glass top bar (list) */
.ch-host .topbar{ position:absolute; top:54px; left:0; right:0; z-index:30; padding:8px 16px 12px; background:rgba(251,244,232,0.82); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-bottom:1px solid var(--line); }
.ch-host .tb-title{ font:700 22px/1.1 'Montserrat',sans-serif; color:var(--text-1); letter-spacing:-0.01em; }
.ch-host .segs{ display:flex; gap:4px; margin-top:12px; padding:4px; border-radius:14px; background:rgba(120,90,55,0.08); }
.ch-host .segs button{ flex:1; border:0; background:transparent; cursor:pointer; font:600 14px/1 'Montserrat',sans-serif; color:var(--text-2); padding:10px 0; border-radius:10px; transition:.2s; display:flex; align-items:center; justify-content:center; gap:7px; }
.ch-host .segs button .cnt{ font:700 11px/1; padding:2px 6px; border-radius:9999px; background:rgba(120,90,55,0.14); color:var(--text-2); }
.ch-host .segs button.on{ background:#fff; color:var(--accent); box-shadow:0 2px 8px rgba(120,90,55,0.14); }
.ch-host .segs button.on .cnt{ background:var(--accent-soft); color:var(--accent); }

/* scroll regions */
.ch-host .scroll{ position:absolute; left:0; right:0; z-index:20; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.ch-host .scroll::-webkit-scrollbar{ display:none; }
.ch-host .scroll{ scrollbar-width:none; }

/* chat list */
.ch-host .clist{ padding:8px 12px 110px; display:flex; flex-direction:column; }
.ch-host .crow{ display:flex; align-items:center; gap:13px; padding:12px 10px; border-radius:18px; cursor:pointer; transition:background .2s; }
.ch-host .crow:hover{ background:rgba(255,255,255,0.55); }
.ch-host .crow + .crow{ border-top:1px solid var(--line); }
.ch-host .av{ width:54px; height:54px; border-radius:18px; flex:none; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font:700 18px/1 'Montserrat',sans-serif; }
.ch-host .av.terra{ background:linear-gradient(140deg,#D07A4A,#B85A33); }
.ch-host .av.amber{ background:linear-gradient(140deg,#E5A93C,#D08A28); }
.ch-host .av.olive{ background:linear-gradient(140deg,#A89A4E,#857C36); }
.ch-host .av.rose{ background:linear-gradient(140deg,#C97A6E,#B25E52); }
.ch-host .av.plum{ background:linear-gradient(140deg,#9A6FB0,#7C5191); }
.ch-host .av.teal{ background:linear-gradient(140deg,#4FA39A,#2F7F76); }
.ch-host .av.round{ border-radius:50%; }
.ch-host .av .on-dot{ position:absolute; right:-1px; bottom:-1px; width:15px; height:15px; border-radius:50%; background:var(--green); border:2.5px solid #FBF4E8; z-index:2; }
.ch-host .cmain{ flex:1; min-width:0; }
.ch-host .cline1{ display:flex; align-items:center; gap:7px; }
.ch-host .cname{ font:700 15.5px/1.2 'Montserrat',sans-serif; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-host .crole{ font:600 10px/1 'Montserrat',sans-serif; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:6px; background:var(--accent-soft); color:var(--accent); flex:none; }
.ch-host .ctime{ margin-left:auto; font:500 12px/1 'Montserrat',sans-serif; color:var(--text-3); flex:none; }
.ch-host .cline2{ display:flex; align-items:center; gap:8px; margin-top:5px; }
.ch-host .cprev{ flex:1; min-width:0; font:500 13.5px/1.35 'Montserrat',sans-serif; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ch-host .cprev .sender{ color:var(--text-1); font-weight:600; }
.ch-host .cprev .mention{ color:var(--accent); font-weight:700; }
.ch-host .cprev .voice{ color:var(--accent); font-weight:600; }
.ch-host .badge{ flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:9999px; background:var(--accent); color:#fff; font:700 11px/20px 'Montserrat',sans-serif; text-align:center; }
.ch-host .badge.mut{ background:rgba(120,90,55,0.25); color:#fff; }
.ch-host .badge.at{ background:var(--accent); display:flex; align-items:center; justify-content:center; padding:0; width:20px; }
.ch-host .pin-i{ color:var(--text-3); flex:none; }

/* conversation header */
.ch-host .conv-head{ position:absolute; top:54px; left:0; right:0; z-index:30; background:rgba(251,244,232,0.86); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-bottom:1px solid var(--line); }
.ch-host .ch-top{ display:flex; align-items:center; gap:11px; padding:7px 12px 9px; }
.ch-host .iconbtn{ width:40px; height:40px; border-radius:50%; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--text-2); }
.ch-host .ch-info{ flex:1; min-width:0; cursor:pointer; }
.ch-host .ch-name{ font:700 16px/1.15 'Montserrat',sans-serif; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-host .ch-sub{ font:500 12px/1.2 'Montserrat',sans-serif; color:var(--text-2); margin-top:2px; }
.ch-host .ch-av{ width:40px; height:40px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font:700 15px/1 'Montserrat',sans-serif; }
.ch-host .topics{ display:flex; gap:7px; padding:2px 12px 10px; overflow-x:auto; }
.ch-host .topics::-webkit-scrollbar{ display:none; }
.ch-host .topics{ scrollbar-width:none; }
.ch-host .topic{ flex:none; display:flex; align-items:center; gap:6px; padding:7px 13px; border-radius:9999px; cursor:pointer; font:600 12.5px/1 'Montserrat',sans-serif; color:var(--text-2); background:rgba(120,90,55,0.08); border:1px solid transparent; white-space:nowrap; }
.ch-host .topic .tdot{ width:7px; height:7px; border-radius:50%; flex:none; }
.ch-host .topic.on{ background:#fff; color:var(--text-1); border-color:var(--line); box-shadow:var(--shadow-soft); }
.ch-host .topic .tc{ font:700 10px/1; color:var(--text-3); }
.ch-host .pinned{ display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; background:rgba(255,255,255,0.6); border-bottom:1px solid var(--line); }
.ch-host .pinned .bar{ width:3px; height:30px; border-radius:9999px; background:var(--accent); flex:none; }
.ch-host .pinned .pmain{ flex:1; min-width:0; }
.ch-host .pinned .pl{ font:700 11px/1 'Montserrat',sans-serif; color:var(--accent); }
.ch-host .pinned .pt{ font:500 13px/1.3 'Montserrat',sans-serif; color:var(--text-2); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* messages */
.ch-host .msgs{ padding:14px 14px 18px; display:flex; flex-direction:column; gap:11px; }
.ch-host .daypill{ align-self:center; font:600 11.5px/1 'Montserrat',sans-serif; color:var(--text-2); padding:6px 13px; border-radius:9999px; background:rgba(255,255,255,0.7); border:1px solid var(--line); margin:2px 0 6px; }
.ch-host .msg{ max-width:78%; display:flex; flex-direction:column; }
.ch-host .msg.in{ align-self:flex-start; align-items:flex-start; }
.ch-host .msg.out{ align-self:flex-end; align-items:flex-end; }
.ch-host .msg .who{ font:700 12px/1 'Montserrat',sans-serif; margin:0 0 4px 12px; }
.ch-host .bubble{ position:relative; padding:10px 13px; border-radius:18px; font:500 14.5px/1.4 'Montserrat',sans-serif; word-wrap:break-word; }
.ch-host .msg.in .bubble{ background:var(--bubble-in); color:var(--text-1); border-bottom-left-radius:6px; box-shadow:var(--shadow-soft); }
.ch-host .msg.out .bubble{ background:var(--bubble-out); color:#fff; border-bottom-right-radius:6px; box-shadow:0 4px 14px rgba(194,104,61,0.28); }
.ch-host .bubble .at{ font-weight:700; color:var(--accent); }
.ch-host .msg.out .bubble .at{ color:#FFF4DC; }
.ch-host .bubble.hl{ outline:2px solid var(--accent); outline-offset:1px; }
.ch-host .bubble .reply{ display:block; padding:6px 9px; margin:-2px 0 7px; border-radius:9px; border-left:3px solid var(--accent); background:rgba(194,104,61,0.10); font:500 12.5px/1.3 'Montserrat',sans-serif; color:var(--text-2); }
.ch-host .msg.out .bubble .reply{ border-left-color:#FFF4DC; background:rgba(255,255,255,0.18); color:#FFF0DC; }
.ch-host .bubble .reply b{ color:var(--accent); font-weight:700; display:block; margin-bottom:1px; }
.ch-host .msg.out .bubble .reply b{ color:#fff; }
.ch-host .mtime{ font:500 10.5px/1 'Montserrat',sans-serif; color:var(--text-3); margin:5px 8px 0; display:flex; align-items:center; gap:4px; }
.ch-host .mtime .seen{ color:var(--accent); }
.ch-host .voice-msg{ display:flex; align-items:center; gap:11px; min-width:172px; }
.ch-host .voice-msg .vplay{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; cursor:pointer; }
.ch-host .msg.out .voice-msg .vplay{ background:rgba(255,255,255,0.25); }
.ch-host .wave{ flex:1; display:flex; align-items:center; gap:2.5px; height:30px; }
.ch-host .wave i{ flex:1; border-radius:9999px; background:var(--accent); opacity:.4; }
.ch-host .msg.out .wave i{ background:#fff; opacity:.55; }
.ch-host .wave i.played{ opacity:1; }
.ch-host .vdur{ font:600 12px/1 'Montserrat',sans-serif; color:var(--text-2); flex:none; }
.ch-host .msg.out .vdur{ color:#FFF0DC; }

/* input bar */
.ch-host .inputbar{ position:absolute; bottom:0; left:0; right:0; z-index:30; padding:10px 12px 26px; background:rgba(251,244,232,0.92); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.ch-host .inputbar .plus{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--text-2); cursor:pointer; }
.ch-host .inputbar .field{ flex:1; display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); font:500 14.5px/1 'Montserrat',sans-serif; color:var(--text-3); }
.ch-host .inputbar .field .emo{ margin-left:auto; color:var(--text-3); flex:none; }
.ch-host .inputbar .mic{ width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--bubble-out); color:#fff; cursor:pointer; box-shadow:0 4px 14px rgba(194,104,61,0.30); }

/* group info */
.ch-host .gi-hero{ position:relative; padding:64px 20px 22px; overflow:hidden; text-align:center; background:linear-gradient(150deg,#E5A93C,#C2683D); }
.ch-host .gi-hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.4),transparent 70%); }
.ch-host .gi-back{ position:absolute; top:60px; left:16px; z-index:2; width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; }
.ch-host .gi-av{ position:relative; z-index:1; width:88px; height:88px; border-radius:28px; margin:6px auto 0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.92); color:#C2683D; font:800 34px/1 'Montserrat',sans-serif; box-shadow:0 10px 26px rgba(120,60,20,0.3); }
.ch-host .gi-name{ position:relative; z-index:1; margin-top:14px; font:800 23px/1.15 'Montserrat',sans-serif; color:#fff; letter-spacing:-0.01em; }
.ch-host .gi-meta{ position:relative; z-index:1; margin-top:6px; font:500 13.5px/1 'Montserrat',sans-serif; color:rgba(255,255,255,0.85); }
.ch-host .gi-actions{ position:relative; z-index:1; display:flex; justify-content:center; gap:10px; margin-top:18px; }
.ch-host .gi-act{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; width:66px; }
.ch-host .gi-act .ic{ width:46px; height:46px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.34); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; }
.ch-host .gi-act .lb{ font:600 11px/1 'Montserrat',sans-serif; color:rgba(255,255,255,0.92); }
.ch-host .gi-body{ padding:16px 16px 28px; display:flex; flex-direction:column; gap:14px; }
.ch-host .card{ border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-soft); overflow:hidden; }
.ch-host .card-h{ display:flex; align-items:center; gap:8px; padding:13px 15px 9px; font:700 13px/1 'Montserrat',sans-serif; color:var(--text-2); letter-spacing:.03em; text-transform:uppercase; }
.ch-host .card-h .cnt{ margin-left:auto; font:600 12px/1; color:var(--text-3); text-transform:none; letter-spacing:0; }
.ch-host .gi-pin{ display:flex; gap:11px; padding:11px 15px; cursor:pointer; }
.ch-host .gi-pin + .gi-pin{ border-top:1px solid var(--line); }
.ch-host .gi-pin .bar{ width:3px; border-radius:9999px; background:var(--accent); flex:none; }
.ch-host .gi-pin .pn{ font:600 12px/1 'Montserrat',sans-serif; color:var(--accent); }
.ch-host .gi-pin .pv{ font:500 13.5px/1.35 'Montserrat',sans-serif; color:var(--text-1); margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ch-host .gi-topic{ display:flex; align-items:center; gap:11px; padding:11px 15px; cursor:pointer; }
.ch-host .gi-topic + .gi-topic{ border-top:1px solid var(--line); }
.ch-host .gi-topic .tdot{ width:10px; height:10px; border-radius:50%; flex:none; }
.ch-host .gi-topic .tn{ font:600 14.5px/1.2 'Montserrat',sans-serif; color:var(--text-1); flex:1; }
.ch-host .gi-topic .tcount{ font:500 12.5px/1 'Montserrat',sans-serif; color:var(--text-3); }
.ch-host .mem{ display:flex; align-items:center; gap:12px; padding:10px 15px; cursor:pointer; }
.ch-host .mem + .mem{ border-top:1px solid var(--line); }
.ch-host .mem .mav{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font:700 15px/1 'Montserrat',sans-serif; }
.ch-host .mem .mmain{ flex:1; min-width:0; }
.ch-host .mem .mn{ font:600 14.5px/1.2 'Montserrat',sans-serif; color:var(--text-1); }
.ch-host .mem .ms{ font:500 12px/1 'Montserrat',sans-serif; color:var(--text-3); margin-top:3px; }
.ch-host .mem .mrole{ font:600 10px/1 'Montserrat',sans-serif; letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:7px; flex:none; }
.ch-host .mrole.cur{ background:var(--accent-soft); color:var(--accent); }
.ch-host .mrole.adm{ background:rgba(62,142,90,0.14); color:var(--green); }