.sidebar{width:230px;min-height:100vh;background:#1b2a49;flex-shrink:0}
.sidebar .nav-link{color:#cfd8ea;padding:.5rem .75rem;border-radius:.4rem}
.sidebar .nav-link:hover,.sidebar .nav-link.active{background:#2f4472;color:#fff}
.content{background:#f4f6fa;min-height:100vh;min-width:0}
.thumb{width:36px;height:44px;object-fit:cover;border-radius:4px;background:#ddd}
@media (max-width:768px){.sidebar{width:60px}.sidebar h5,.sidebar .nav-link{font-size:0}.sidebar .nav-link i{font-size:1.2rem}}

.chat-wrap{height:calc(100vh - 110px);background:#fff;border:1px solid #dde;border-radius:8px;overflow:hidden}
.chat-list{border-right:1px solid #e3e6ee;overflow-y:auto;height:100%}
.chat-item{display:flex;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid #f0f1f5;align-items:center}
.chat-item:hover,.chat-item.sel{background:#eef3ff}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#cfd8ea;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1b2a49;flex-shrink:0}
.chat-pane{display:flex;flex-direction:column;height:100%;background:#efeae2}
.chat-head{background:#f0f2f5;padding:10px 14px;border-bottom:1px solid #dde;display:flex;gap:10px;align-items:center}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 8%}
.bub{max-width:70%;padding:6px 10px 3px;border-radius:8px;margin-bottom:6px;box-shadow:0 1px 1px rgba(0,0,0,.12);word-wrap:break-word;white-space:pre-wrap}
.bub.me{background:#d9fdd3;margin-left:auto}.bub.other{background:#fff}
.bub img{max-width:240px;border-radius:6px;display:block;margin-bottom:3px}
.bub .tm{font-size:11px;color:#667;text-align:right}
.tick{color:#8696a0}.tick.read{color:#53bdeb}
.dsep{text-align:center;margin:8px 0}.dsep span{background:#e1f2fb;padding:2px 10px;border-radius:8px;font-size:12px;color:#445}
.chat-input{background:#f0f2f5;padding:8px;display:flex;gap:8px;align-items:center}
.nav-badge{background:#25d366;color:#fff;border-radius:10px;padding:0 7px;font-size:12px;margin-left:6px}