.ch-kpis { margin-bottom: 1rem; }
.ch-panes { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 1rem; height: calc(100vh - 330px); min-height: 480px; }
@media (max-width: 991px) { .ch-panes { grid-template-columns: 1fr; height: auto; } .ch-conv { min-height: 70vh; } }
.ch-side, .ch-conv { border: 1px solid rgba(127,127,127,.18); border-radius: 18px; background: var(--bs-card-bg, #fff); display: flex; flex-direction: column; overflow: hidden; }
.ch-filters { padding: .7rem; display: flex; flex-direction: column; gap: .5rem; border-bottom: 1px solid rgba(127,127,127,.15); }
.ch-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.ch-tabs button { border: 1px solid rgba(127,127,127,.3); background: transparent; border-radius: 999px; padding: .15rem .65rem; font-size: .82rem; cursor: pointer; color: inherit; }
.ch-tabs button.on { background: #4b8b2a; border-color: #4b8b2a; color: #fff; }
.ch-list { overflow-y: auto; flex: 1; }
.ch-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; padding: .7rem .8rem; border-bottom: 1px solid rgba(127,127,127,.1); cursor: pointer; align-items: center; }
.ch-item:hover { background: rgba(75,139,42,.05); } .ch-item.on { background: rgba(75,139,42,.1); }
.ch-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.1rem; }
.ch-item b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-item small { display: block; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-right { text-align: right; font-size: .75rem; opacity: .8; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.ch-un { background: #c8352d; color: #fff; border-radius: 999px; min-width: 20px; padding: 0 .35rem; text-align: center; font-weight: 700; }
.ch-wait { color: #b07a10; font-weight: 600; }
.ch-head { padding: .8rem 1rem; border-bottom: 1px solid rgba(127,127,127,.15); display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.ch-head b { font-size: 1.05rem; } .ch-head small { display: block; opacity: .7; }
.ch-head .ch-acts { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.ch-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .45rem; background: rgba(127,127,127,.04); }
.ch-m { max-width: 72%; padding: .5rem .8rem; border-radius: 16px; line-height: 1.35; white-space: pre-wrap; word-wrap: break-word; }
.ch-m.them { align-self: flex-start; background: var(--bs-card-bg, #fff); border: 1px solid rgba(127,127,127,.18); border-bottom-left-radius: 5px; }
.ch-m.staff { align-self: flex-end; background: #3d8b2f; color: #fff; border-bottom-right-radius: 5px; }
.ch-m.sys { align-self: center; opacity: .65; font-size: .82rem; text-align: center; }
.ch-m small { display: block; font-size: .72rem; opacity: .7; } .ch-m .who { font-size: .75rem; opacity: .75; display: block; }
.ch-m img { max-width: 260px; border-radius: 10px; display: block; margin: .2rem 0; }
.ch-reply { border-top: 1px solid rgba(127,127,127,.15); padding: .7rem; display: flex; gap: .5rem; align-items: flex-end; }
.ch-reply textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; }
.ch-empty { margin: auto; text-align: center; opacity: .6; padding: 2rem; }
.ch-people { max-height: 220px; overflow-y: auto; }
.ch-people .list-group-item.on { background: rgba(75,139,42,.12); }