/* ---------- Чаты ---------- */
.chp { padding-top: 22px; }
.chp-box { padding: 24px 14px 16px; }
.chp-h { display: flex; align-items: center; gap: 18px; margin: 0 4px 22px; }
.chp-h > svg { color: var(--o); flex: none; }
.chp-h h1 { margin: 0; font: 600 32px/1.1 var(--ff); color: var(--ink); }
.chp-h p { margin: 6px 0 0; font-size: 18px; color: #5d6472; }
.chp-g { display: grid; grid-template-columns: 318px 1fr 290px; gap: 12px; align-items: start; }
.chp-l { padding: 14px 0 6px; min-height: 640px; }
.chp-s { display: flex; align-items: center; gap: 12px; height: 48px; margin: 0 12px 10px; padding: 0 16px; border-radius: 8px; border: 1px solid #dfe3e8; }
.chp-s svg { color: #5d6472; }
.chp-s input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 16px var(--ff); color: var(--ink); }
.chp-it { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 14px; border-bottom: 1px solid var(--ln2); color: var(--ink); }
.chp-it:hover { background: #fafbfc; color: var(--ink); }
.chp-it.on { background: #fff3ec; }
.chp-it.on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--o); }
.chp-it-t { flex: 1; min-width: 0; }
.chp-it-t b { display: block; font: 500 16px/1.3 var(--ff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chp-it-t small { display: block; margin-top: 6px; font-size: 14px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chp-it time { align-self: flex-start; margin-top: 2px; font-size: 14px; color: #6b7280; }
.ch-ic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.ch-ic.o { background: linear-gradient(180deg, #ff7a2e, #f55309); color: #fff; }
.ch-ic.o svg { color: #fff; }
.ch-ic.txt { font: 400 19px var(--fd); font-style: italic; }
.ch-ic.g { background: #e7f7ee; color: #1f9d55; }
.ch-ic.g svg { color: #1f9d55; }
.ch-ic.w { background: #f4f5f7; color: #15171c; }
.ch-ic.w svg { color: #15171c; }
.ch-ic.d { background: #2c3440; color: #fff; }
.ch-ic.d svg { color: #fff; }
.ch-ic.t .tl { border-radius: 50%; }
.chp-c { display: flex; flex-direction: column; height: 1010px; overflow: hidden; }
.chc-h { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--ln2); }
.chc-h > div { flex: 1; min-width: 0; }
.chc-h b { display: block; font: 500 20px var(--ff); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chc-h small { display: block; margin-top: 4px; font-size: 15px; color: #6b7280; }
.chc-b { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: #3c424d; }
.chc-b svg { color: #3c424d; }
.chc-sr { padding: 10px 18px; border-bottom: 1px solid var(--ln2); }
.chc-sr input { width: 100%; height: 38px; padding: 0 12px; border-radius: 6px; border: 1px solid #dfe3e8; font: 400 15px var(--ff); }
.chc-l { flex: 1; overflow-y: auto; padding: 18px 18px 8px; }
.chm { display: flex; gap: 16px; margin-bottom: 18px; }
.chm.cont { margin-top: -10px; }
.chm-av { flex: none; width: 52px; }
.chm-av .av { border-radius: 50%; overflow: hidden; }
.chm-b { min-width: 0; max-width: 78%; }
.chm-n { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.chm-n a { font: 500 16px var(--ff); color: var(--ink); }
.chm-n em, .chr-m em { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; border: 1px solid #ffc7a6; background: #fff6f0; font: 500 12.5px var(--ff); font-style: normal; color: var(--o); }
.chm-n i { font-style: normal; font-size: 11px; font-weight: 600; color: #2f74e0; }
.chm-t { position: relative; padding: 12px 56px 12px 14px; border-radius: 10px; background: #f1f3f6; font-size: 16px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.chm.me .chm-t { background: #fff1e8; }
.chm-t time { position: absolute; right: 12px; bottom: 6px; font-size: 12.5px; color: #6b7280; }
.chm-rep { position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer; opacity: 0; color: #9aa1ab; padding: 2px; }
.chm-rep svg { color: #9aa1ab; }
.chm:hover .chm-rep { opacity: 1; }
.chm-sys { display: flex; justify-content: center; gap: 10px; margin: 6px 0 18px; font-size: 14px; color: #6b7280; }
.chm-sys span { padding: 6px 14px; border-radius: 14px; background: #f4f5f7; }
.chm-sys time { align-self: center; font-size: 12px; color: #9aa1ab; }
.chm-ok { position: relative; display: flex; gap: 18px; margin: 4px 0 18px; padding: 18px; border-radius: 10px; border: 1px solid #b9e6cb; background: #effaf3; }
.chm-ok-i { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #22a45a; }
.chm-ok-i svg { color: #fff; }
.chm-ok > div { flex: 1; }
.chm-ok b { display: block; font: 600 18px/1.35 var(--ff); color: var(--ink); }
.chm-go { margin-top: 14px; width: 100%; height: 44px; background: #239457; color: #fff; font-size: 17px; }
.chm-go svg { color: #fff; }
.chm-go:hover { color: #fff; filter: brightness(1.05); }
.chm-ok time { position: absolute; top: 14px; right: 16px; font-size: 13px; color: #6b7280; }
.chm-empty { padding: 60px 10px; text-align: center; color: #6b7280; }
.chc-f { display: flex; gap: 12px; padding: 12px 16px 16px; }
.chc-f input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 8px; border: 1px solid #dfe3e8; font: 400 16px var(--ff); color: var(--ink); outline: 0; }
.chc-f input:focus { border-color: #ffb48a; }
.chc-f .xbtn { width: 54px; height: 50px; padding: 0; }
.chc-login { padding: 18px; text-align: center; color: #6b7280; border-top: 1px solid var(--ln2); }
.chp-r { display: flex; flex-direction: column; gap: 12px; }
.chr-box { padding: 18px 16px; }
.chr-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.chr-h h3 { margin: 0; font: 600 18px var(--ff); color: var(--ink); white-space: nowrap; }
.chr-h h3 span { font-weight: 400; color: #6b7280; }
.chr-h small { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #3c424d; white-space: nowrap; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c4c8ce; }
.chr-h .dot, .dot.on { background: #22a45a; }
.chr-m { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ln2); color: var(--ink); }
.chr-m:hover { color: var(--ink); }
.chr-m .av { border-radius: 50%; overflow: hidden; }
.chr-m > span { flex: 1; min-width: 0; }
.chr-m b { display: flex; align-items: center; gap: 12px; font: 500 16px var(--ff); }
.chr-m small { display: block; margin-top: 4px; font-size: 14px; color: #6b7280; }
.chr-g { height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--o-line); color: var(--o); font: 500 13px/24px var(--ff); }
.chr-mt { display: flex; align-items: center; justify-content: space-around; padding: 14px 0 6px; }
.chr-mt a { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); max-width: 100px; }
.chr-mt b { font: 600 15px var(--ff); text-transform: uppercase; text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100px; white-space: nowrap; }
.chr-mt .tl { border-radius: 50%; }
.chr-mt .vs { font: 400 22px var(--fd); color: #c4c8ce; }
.chr-when { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 17px; color: var(--ink); }
.chr-when svg { color: var(--ink); }
.chr-when b { font-weight: 500; }
.chr-sub { margin-top: 6px; text-align: center; font-size: 14px; color: #6b7280; }
.chr-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 16px; font-weight: 500; color: var(--o); }
.chr-more svg { color: var(--o); }
.chr-info { display: flex; gap: 14px; }
.chr-info > svg { color: var(--o); flex: none; }
.chr-info b { font: 600 17px var(--ff); color: var(--ink); }
.chr-info p { margin: 8px 0 8px; font-size: 14.5px; line-height: 1.5; color: #3c424d; }
.chr-info a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #6b7280; }
.chr-tg { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.chr-tg:hover { color: var(--ink); }
.chr-tg > svg:first-child { color: #2f9be6; flex: none; }
.chr-tg > div { flex: 1; }
.chr-tg b { display: block; font: 600 16px var(--ff); }
.chr-tg small { display: block; margin-top: 4px; font-size: 13.5px; color: #6b7280; }
.chp .av, .chp .tl { flex: none; }
.chr-h { flex-wrap: wrap; }
.chr-m b { flex-wrap: wrap; gap: 6px 10px; }
.chp-c { height: 900px; }