.sidebar {
    position: fixed;
    top: 56px; /* height of navbar */
    left: 0;
    bottom: 0;
    width: 260px;
    background: var(--color-background-2, #0f1220);
    border-right: 1px solid rgba(255,255,255,0.05);
    overflow-y: auto;
    padding: 16px 12px;
    display: none; /* desktop only */
    z-index: 900;
}
@media (min-width: 992px) {
    .sidebar { display: block; }
    body.has-sidebar { margin-left: 260px; }
}
.sidebar-title {
    color: var(--color-muted, #a49fd0);
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.6px;
}
.sidebar-models-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-model {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--color-text, #e8e6ff);
    transition: background 0.2s;
}
.sidebar-model:hover { background: rgba(255,255,255,0.04); }
.sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-background, #0b0f1c);
    color: var(--color-primary, #b38bfa);
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sidebar-avatar.has-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.sidebar-name { font-size: 14px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-follow { color: var(--color-primary, #b38bfa); font-size: 16px; }

@media (min-width: 992px) {
    body.has-sidebar-right { margin-right: 320px; }
    .sidebar-right { display: block; }
}
.sidebar-right {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: var(--color-background-2, #0f1220);
    border-left: 1px solid rgba(255,255,255,0.05);
    overflow-y: auto;
    padding: 16px 12px;
    display: none; /* desktop only */
    z-index: 900;
}

/* Ensure content column stays centered between fixed sidebars */
@media (min-width: 992px) {
    .container,
    .container-fluid,
    main, .content, .feed-container {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Left Menu (desktop) */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-text, #e8e6ff);
    text-decoration: none;
    transition: background .2s ease;
}
.sidebar-menu .menu-item i { font-size: 18px; width: 22px; text-align: center; }
.sidebar-menu .menu-item span { font-size: 15px; font-weight: 600; }
.sidebar-menu .menu-item:hover { background: rgba(255,255,255,0.06); }
.sidebar-menu .menu-item.is-active { background: rgba(255,255,255,0.10); }

/* Right Suggestions (desktop) */
.sidebar-suggestions { }
.sidebar-suggestions .suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Suggestions header */
.suggestions-title { display:flex; align-items:center; justify-content:space-between; }
.suggestions-actions { display:flex; gap:10px; color:var(--color-muted,#a49fd0); }

/* Card with background image and overlay like the example */
.sugg-card {
    position: relative;
    display: block;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text, #e8e6ff);
    box-shadow: 0 1px 0 rgba(0,0,0,0.25) inset;
}
.sugg-card:hover .sugg-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.5) 85%); }
.sugg-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:contrast(0.95) saturate(1.05); }
.sugg-overlay { position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.55) 85%); }

.sugg-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.25);
}

.sugg-content { position:absolute; left:10px; right:10px; bottom:10px; display:flex; align-items:center; gap:10px; }
.sugg-avatar { position:relative; width:46px; height:46px; border-radius:50%; overflow:hidden; background:#1a1f2e; display:flex; align-items:center; justify-content:center; font-weight:700; }
.sugg-avatar img { width:100%; height:100%; object-fit:cover; }
.sugg-online { position:absolute; right:0; bottom:0; width:12px; height:12px; background:#23d160; border:2px solid #2b2f42; border-radius:50%; }
.sugg-text { display:flex; flex-direction:column; }
.sugg-name { font-size:15px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,0.6); display:flex; align-items:center; gap:6px; }
.sugg-name .verified { color:#58a6ff; font-size:14px; }
.sugg-handle { font-size:12px; color:#d0cfe6; opacity:0.9; }

/* Ensure right sidebar is visible on desktop (override later base rule ordering) */
@media (min-width: 992px) {
    .sidebar-right { display: block; }
}

/* Prevent double-tap zoom on mobile devices */
@media (max-width: 768px) {
    * {
        touch-action: manipulation;
    }

    /* More specific rules for interactive elements */
    button,
    a,
    input,
    textarea,
    select,
    [role="button"],
    [onclick] {
        touch-action: manipulation;
    }
}