/* ===== Список чатов v3: плоский стиль, вкладки, строки как в современном мессенджере ===== */
.ch-side-head{border-bottom:0;padding:10px 10px 6px}
.ch-tabs{display:flex;gap:4px;padding:2px 10px 8px;overflow-x:auto;overflow-y:hidden;flex:none;scrollbar-width:none;-ms-overflow-style:none}
.ch-tabs::-webkit-scrollbar{display:none}
.ch-tab{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;line-height:20px;padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.ch-tab:hover{background:var(--hover)}
.ch-tab.on,.ch-tab.on:hover{color:var(--ch-accent-text,var(--ch-accent));background:color-mix(in srgb,var(--ch-accent) 14%,transparent)}
.ch-tab:focus-visible{outline:2px solid var(--ch-accent);outline-offset:1px}
.ch-tabn{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ch-accent-fill);color:var(--ch-accent-contrast);font-size:11px;font-weight:700;line-height:1;box-sizing:border-box}
.ch-tabn[hidden]{display:none}
.ch-tabn.muted{background:var(--muted);color:var(--panel)}

.ch-list{padding:2px 0 8px}
.ch-none{padding:24px 16px;text-align:center;color:var(--muted)}
.ch-item{height:62px;padding:8px 10px;margin:0 6px;border-radius:12px;gap:12px;box-shadow:none}
.ch-item.compact{height:58px}
.ch-item .ch-name{font-weight:600;font-size:15px}
.ch-prev{font-size:14px;color:var(--muted)}
.ch-time{font-size:12px;color:var(--muted)}
.ch-badge,.ch-badge.at{border-radius:999px}
.ch-badge{background:var(--ch-accent-fill);color:var(--ch-accent-contrast)}
.ch-badge.muted{background:var(--muted);color:var(--panel)}
.ch-item:hover{background:var(--hover)}

/* выбранный чат: полная заливка акцентом */
.ch-item.sel,.ch-item.sel:hover{background:var(--ch-accent-fill);color:var(--ch-accent-contrast);box-shadow:none;border-left:0}
.ch-item.sel :is(.ch-name,.ch-time,.ch-tick,.ch-tick.rd,.ch-mute,.ch-pin,.ch-who,.ch-who.me,.ch-prev .muted){color:var(--ch-accent-contrast)!important}
.ch-item.sel .ch-prev{color:var(--ch-accent-contrast);opacity:.85}
.ch-item.sel .ch-tick svg,.ch-item.sel .ch-pin svg{color:inherit}
.ch-item.sel .ch-badge,.ch-item.sel .ch-badge.muted,.ch-item.sel .ch-badge.at{background:var(--ch-accent-contrast);color:var(--ch-accent-fill)}

/* плоскость: убираем рельеф в чат-UI (кроме фокуса, чекбокса, вьювера, всплывающих меню) */
.cm-more,.cm-down,.cp-fab,.cm-bubble,.cm-bubble.imgonly,.cm-bubble.noteonly,.cm-rec.holding,.cm-date span,.cm-sys span,.ch-tile.on,.cm-typing,.cm-react{box-shadow:none!important}
.cm-date span,.cm-sys span,.vm,.mp-play,.vm-btn{text-shadow:none}

/* доводка: 4 вкладки помещаются в 320px; аватар общего чата виден на залитой строке */
.ch-tabs{gap:2px;padding:2px 8px 8px}
.ch-tab{font-size:13px;padding:5px 9px;gap:5px}
.ch-tabn{min-width:17px;height:17px;padding:0 4px;font-size:10.5px}
.ch-item.sel .ch-ava-ic{box-shadow:0 0 0 2px var(--ch-accent-contrast)!important}
@media (min-width:1200px){.ch-page{grid-template-columns:380px minmax(0,1fr)}}

/* ===== Окно вкладок (как темы в Telegram) ===== */
.ch-lw{display:flex;flex-direction:column;min-height:0;min-width:0;flex:1}
.ch-tp{display:flex;flex-direction:column;min-height:0;min-width:0;flex:1}
.ch-tp[hidden]{display:none}
.tp-head{display:flex;align-items:center;gap:6px;padding:10px 8px 8px;flex:none}
.tp-head .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--muted);flex:none}
.tp-head .icon-btn:hover{color:var(--ch-accent-text,var(--accent))}
.tp-hi{flex:1;min-width:0}
.tp-title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-sub{font-size:12px;color:var(--muted)}
.tp-sw{padding:0 10px 8px;flex:none}
.tp-sw input{width:100%;box-sizing:border-box;border-radius:999px;height:36px;padding:0 14px;background:var(--hover);border:0}
.tp-list{flex:1;overflow-y:auto;min-height:0;padding:2px 0 8px}
.tp-ic{flex:none;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--tp,#5C6BC0);color:#fff;font-weight:700;font-size:17px}
.tp-ic.tp-gen{background:var(--hover);color:var(--text);font-size:20px}
.ch-item.sel .tp-ic.tp-gen{background:rgba(255,255,255,.22);color:inherit}
.cm-topic-name{color:var(--ch-accent-text,var(--accent));font-weight:600}

/* страница чатов: список сжимается до колонки аватаров, рядом — отдельный остров вкладок */
#chats-view .ch-page:has(.ch-side.tp-open){grid-template-columns:420px minmax(0,1fr)}
#chats-view .ch-side.tp-open{flex-direction:row;gap:10px;background:transparent;border:0;border-radius:0;overflow:visible}
#chats-view .ch-side.tp-open .ch-lw{flex:0 0 72px;background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden}
#chats-view .ch-side.tp-open .ch-tp{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;animation:tpIn .18s ease-out}
:root[data-theme="dark"] #chats-view .ch-side.tp-open .ch-lw,:root[data-theme="dark"] #chats-view .ch-side.tp-open .ch-tp{border:0}
#chats-view .ch-side.tp-open .ch-side-head{padding:10px 0 6px;justify-content:center}
#chats-view .ch-side.tp-open .ch-sw,#chats-view .ch-side.tp-open .ch-tabs,#chats-view .ch-side.tp-open .ch-side-btns .icon-btn:not(.ch-new){display:none}
#chats-view .ch-side.tp-open .ch-list .ch-item{margin:0 6px;padding:8px 0;justify-content:center;position:relative}
#chats-view .ch-side.tp-open .ch-list .ch-info{display:none}
@keyframes tpIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@media (max-width:699px){
  #chats-view .ch-page:has(.ch-side.tp-open){grid-template-columns:minmax(0,1fr)}
  #chats-view .ch-side.tp-open .ch-lw{display:none}
}
/* боковая панель: вкладки поверх списка */
.cp-list.tp-open .ch-lw{display:none}