.chat-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border-radius: 10px;

    cursor: pointer;

    transition: background 0.12s;

  }

  .chat-item.hidden { display: none; }

  .chat-item:hover { background: var(--hover); }

  .chat-item.active { background: var(--hover); }

  .badge {

    background: var(--accent);

    color: var(--accent-text);

    font-size: 10px;

    font-weight: 600;

    min-width: 18px;

    height: 18px;

    border-radius: 9px;

    padding: 0 6px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-left: 6px;

  }

  .badge.hidden { display: none; }

  .nav-item {

    display: flex; align-items: center; gap: 10px; padding: 8px 12px;

    border-radius: 8px; cursor: pointer; transition: background 0.12s;

  }

  .nav-item:hover { background: var(--hover); }

  .nav-item.active { background: var(--hover); }

  .nav-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px 4px; }

  .nav-avatar {

    width: 36px; height: 36px; border-radius: 50%; background: var(--bg-soft);

    display: flex; align-items: center; justify-content: center; font-size: 13px;

    overflow: hidden; flex-shrink: 0;

  }

  .nav-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

  .online-dot {

    width: 10px; height: 10px; border-radius: 50%; position: absolute;

    bottom: 0; right: 0; border: 2px solid var(--bg);

  }

  .online-dot.online { background: var(--success); }

  .online-dot.idle { background: #f59e0b; }

  .online-dot.offline { background: var(--text-muted); opacity: 0.4; }

  .name { font-size: 14px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .preview { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Search trigger in sidebar */

  .search-trigger {

    display: flex; align-items: center; gap: 10px;

    padding: 10px 14px; margin: 0 12px 10px;

    background: var(--hover); border: 1px solid transparent;

    border-radius: 12px; cursor: pointer;

    transition: all 0.2s; position: relative;

  }

  .search-trigger:hover { border-color: var(--border); background: transparent; }

  .search-trigger svg { width: 16px; height: 16px; stroke: var(--text-muted); stroke-width: 2; fill: none; flex-shrink: 0; }

  .search-trigger-text { flex: 1; font-size: 13px; color: var(--text-muted); font-weight: 400; }