.sidebar{width:380px;min-width:380px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface);z-index:20}
.sidebar-header{padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;gap:12px;position:relative}
.user-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;cursor:pointer;flex-shrink:0;color:#fff;overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-info{flex:1;min-width:0}.user-name{font-weight:600;font-size:15px;color:#fff}.user-status{font-size:12px;opacity:.85;margin-top:2px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0}
.icon-btn:hover{background:rgba(255,255,255,.25)}.icon-btn.dark{color:var(--text);background:var(--bg)}.icon-btn.dark:hover{background:var(--border)}
.dropdown{display:none;position:absolute;top:60px;right:12px;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-lg);z-index:100;min-width:220px;overflow:hidden}
.dropdown.show{display:block;animation:slideDown 0.2s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.dropdown-item{padding:12px 18px;cursor:pointer;font-size:14px;color:var(--text);display:flex;align-items:center;gap:10px;transition:background 0.15s}
.dropdown-item:hover{background:var(--bg)}.dropdown-item.danger{color:var(--danger)}
.search-box{padding:10px 16px}.search-box input{width:100%;padding:10px 14px 10px 36px;border:1.5px solid var(--border);border-radius:20px;font-size:14px;outline:none;background:var(--bg);color:var(--text)}
.search-box input:focus{border-color:var(--primary)}
.tabs{display:flex;padding:0 12px;gap:6px}.tab{flex:1;text-align:center;padding:10px;font-size:13px;font-weight:600;cursor:pointer;border-radius:10px;color:var(--text-secondary);border:none;background:none;transition:all 0.2s}
.tab.active{color:var(--primary);background:rgba(79,140,255,.1)}
.chat-list{flex:1;overflow-y:auto;padding:8px}
.chat-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;cursor:pointer;transition:all 0.15s;margin-bottom:2px}
.chat-item:hover{background:var(--bg)}.chat-item.active{background:rgba(79,140,255,.1)}
.chat-avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;flex-shrink:0}
.chat-info{flex:1;min-width:0}.chat-name{font-weight:600;font-size:15px}.chat-preview{font-size:13px;color:var(--text-secondary);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-meta{text-align:right;font-size:12px;color:var(--text-secondary);flex-shrink:0}
.create-btn{margin:8px;padding:12px;border:2px dashed var(--border);border-radius:12px;background:none;cursor:pointer;color:var(--text-secondary);font-size:14px;text-align:center;transition:all 0.2s}
.create-btn:hover{border-color:var(--primary);color:var(--primary)}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}.empty-state .icon{font-size:60px;margin-bottom:16px}
@media(max-width:768px){.sidebar{width:100%!important;min-width:100%!important}}

/* Кнопка создания канала всегда внизу */
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chat-list {
    flex: 1;
    overflow-y: auto;
}
.create-btn {
    flex-shrink: 0;
    margin: 8px;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* Чат как в Telegram */
.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 12px;
    margin: 2px 8px;
}
.chat-item:hover, .chat-item.active {
    background: var(--bg);
}
.chat-item.unread {
    background: rgba(79, 140, 255, 0.05);
}

.chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
}

.chat-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.chat-item.unread .chat-name {
    font-weight: 700;
    color: #fff;
}

.chat-preview {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-item.unread .chat-preview {
    color: #ccc;
}

.chat-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.chat-time {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.unread-badge {
    background: #4F8CFF;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.chat-avatar { position: relative; overflow: visible !important; }
.chat-avatar .online-dot {
    position: absolute;
    bottom: 0; right: 0;
    width: 10px; height: 10px;
    background: #22C55E;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 6px rgba(34,197,94,0.4);
}

/* Кругляшок онлайн в списке чатов */
.chat-avatar {
    position: relative !important;
    overflow: visible !important;
}
.chat-avatar::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #22C55E;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 6px rgba(34,197,94,0.4);
    display: none;
}
.chat-item[data-online="1"] .chat-avatar::after {
    display: block;
}

.chat-avatar > span {
    z-index: 5 !important;
    display: block !important;
}