/* diaspora.ro source-first module extracted from #desktop-layout; behavior preserved during migration. */
/* ═══════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT ≥ 900px — Design premium dark diaspora.ro
   Pe mobil (< 900px) ABSOLUT NIMIC nu se schimba.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stiluri de baza pentru elementele sidebar (declarate global,
      invizibile pe mobil prin media query de mai jos) ── */
.dt-nav-logo{
  font:900 26px var(--font);letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  padding:20px 16px 24px;display:block;
}
.dt-nav-btn{
  display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px;
  font:600 15px var(--font);color:var(--ink2);cursor:pointer;
  transition:all .18s;background:transparent;text-align:left;width:100%;border:none;
  margin-bottom:2px;
}
.dt-nav-btn:hover{background:rgba(124,58,237,.1);color:var(--ink)}
.dt-nav-btn.active{
  color:var(--brand);background:rgba(124,58,237,.16);
  box-shadow:inset 3px 0 0 var(--brand);
}
.dt-nav-btn svg{width:22px;height:22px;flex-shrink:0}
.dt-nav-sep{height:1px;background:var(--border);margin:10px 12px}
.dt-nav-sm{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:10px;
  font:500 13px var(--font);color:var(--ink2);cursor:pointer;
  transition:all .15s;background:transparent;text-align:left;width:100%;border:none;
}
.dt-nav-sm:hover{background:rgba(124,58,237,.08);color:var(--ink)}
.dt-nav-sm svg{width:17px;height:17px;flex-shrink:0;opacity:.55}
.dt-post-btn{
  margin:16px 12px 0;padding:13px;border-radius:26px;
  background:linear-gradient(135deg,#6741D9,#a855f7 55%,#ec4899);
  color:#fff;font:700 14px var(--font);cursor:pointer;
  width:calc(100% - 24px);border:none;
  box-shadow:0 4px 22px rgba(124,58,237,.5);
  transition:all .18s;
}
.dt-post-btn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 6px 30px rgba(124,58,237,.65)}

/* Widgets sidebar dreapta */
.dt-widget{
  background:var(--card2);border-radius:18px;
  border:1px solid rgba(124,58,237,.18);overflow:hidden;

}
.dt-widget-title{
  font:700 13px var(--font);color:var(--ink2);
  padding:14px 16px 11px;border-bottom:1px solid rgba(255,255,255,.06);
  letter-spacing:.02em;text-transform:uppercase;font-size:11px;
}
.dt-stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(124,58,237,.06)}
.dt-stat{background:transparent;text-align:center;padding:14px 6px}
.dt-stat-val{font:800 20px var(--font);color:var(--brand)}
.dt-stat-val.g{color:#34d399}.dt-stat-val.a{color:#fbbf24}
.dt-stat-lbl{font:500 9px var(--font);color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
#dt-nl-wrap{
  padding:14px 16px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(90deg,rgba(99,102,241,.15),rgba(236,72,153,.08));
}
.dt-nl-activity{display:flex;gap:3px;align-items:center}
.dt-nl-spike{width:3px;border-radius:2px;background:linear-gradient(180deg,#6366f1,#ec4899);animation:nlSpike 1.2s ease-in-out infinite alternate}
.dt-nl-spike:nth-child(1){height:8px;animation-delay:0s}.dt-nl-spike:nth-child(2){height:18px;animation-delay:.15s}
.dt-nl-spike:nth-child(3){height:12px;animation-delay:.3s}.dt-nl-spike:nth-child(4){height:22px;animation-delay:.45s}
.dt-nl-spike:nth-child(5){height:9px;animation-delay:.6s}.dt-nl-spike:nth-child(6){height:16px;animation-delay:.75s}
.dt-nl-status{flex:1;font:500 12px var(--font);color:#4f46e5;line-height:1.5}
.dt-nl-status strong{color:#6741D9;display:block;font-size:13px;font-weight:700}
.dt-nl-pill{
  background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.4);
  border-radius:20px;padding:5px 12px;font:700 10px var(--font);color:#7c3aed;
  cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s;
}
.dt-nl-pill:hover{background:rgba(124,58,237,.15);color:var(--brand)}
.dt-qlinks{display:flex;flex-direction:column}
.dt-qlink{
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  font:500 13px var(--font);color:var(--ink2);cursor:pointer;
  transition:all .15s;text-decoration:none;
}
.dt-qlink:hover{background:rgba(124,58,237,.08);color:var(--ink)}
.dt-qlink-ico{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;background:var(--card2);
}
.dt-footer{padding:12px 16px 16px;font:400 11px var(--font);color:var(--muted);line-height:1.8}
.dt-footer a{color:var(--brand);text-decoration:none}
.dt-footer a:hover{color:var(--brand)}

/* ── Profile card sidebar stânga ── */
.dt-profile-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;cursor:pointer;
  transition:background .15s;margin-bottom:4px;
  overflow:hidden;min-width:0;
}
.dt-profile-card:hover{background:rgba(124,58,237,.08)}
.dt-profile-card.active{background:rgba(124,58,237,.16);box-shadow:inset 3px 0 0 var(--brand)}
.dt-profile-av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--grad);display:flex;align-items:center;
  justify-content:center;color:#fff;font:800 14px var(--font);
  overflow:hidden;
}
.dt-profile-name{
  font:700 13px var(--font);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dt-profile-tag{
  font:400 12px var(--font);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Trending items ── */
.dt-trend-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;cursor:pointer;transition:background .15s;
}
.dt-trend-item:hover{background:rgba(124,58,237,.06)}
.dt-trend-num{
  font:700 12px var(--font);color:var(--muted);
  width:16px;text-align:center;flex-shrink:0;
}
.dt-trend-text{flex:1;min-width:0}
.dt-trend-tag{
  font:600 13px var(--font);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:6px;
}
.dt-trend-count{font:400 11px var(--font);color:var(--muted);margin-top:1px}
.dt-trend-unavailable .dt-trend-tag{color:var(--muted)}
.dt-trend-badge{
  font:800 9px var(--font);color:#ef4444;
  background:rgba(239,68,68,.12);padding:1px 6px;
  border-radius:4px;letter-spacing:.06em;flex-shrink:0;
}

/* ── MOBIL: ascunde total elementele desktop ── */
@media(max-width:899px){
  #dt-left,#dt-right{display:none}
  #dt-body{display:contents}
  #dt-center{display:contents}
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP ≥ 900px — DESIGN PREMIUM DARK (fundaluri 100% opace)
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:900px){

  /* ── 1. Pagina — fara scroll global, fundal opac ── */
  html,body{
    overflow-x: hidden;
    height:100%;
    background:var(--bg);
  }
  body{max-width:100%;margin:0;}

  /* ── 2. Header fix — opac, fara blur pe pagina ── */
  .top-bar{
    position:fixed;top:0;left:0;right:0;
    width:100%;max-width:100%;transform:none;
    height:58px;padding:0 28px;gap:18px;
    display:flex;align-items:center;z-index:2000;
    background:var(--bg);
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg,transparent,#7c3aed 30%,#ec4899 70%,transparent) 1;
    box-shadow:0 2px 30px #000;
  }
  .top-bar .tb-hamburger{display:none}
  .tb-logo{
    font-size:22px;flex-shrink:0;font-weight:900;
    background:linear-gradient(135deg,#6741D9,#ec4899);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  }
  .tb-btn{
    background:var(--card2);
    border:1px solid var(--border);
    color:var(--ink);
  }
  .tb-btn:hover{background:rgba(124,58,237,.25);border-color:rgba(124,58,237,.5)}

  /* ── 3. Search bar integrata in header ── */
  .hub-search-bar{
    position:static;transform:none;
    flex:1;max-width:380px;
    padding:0;border:none;background:transparent;
    box-shadow:none;display:flex;align-items:center;
    z-index:auto;opacity:1;pointer-events:all;
  }
  .hub-search-bar.open,.hub-search-bar:not(.open){transform:none}
  .srch-back{display:none}
  #hub-srch-inp{
    height:35px;border-radius:18px;
    background:var(--card2);
    border:1px solid var(--border);
    padding:0 16px;font-size:13px;width:100%;outline:none;
    color:var(--ink);font-family:var(--font);
    transition:all .2s;
  }
  #hub-srch-inp:focus{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.5)}
  #hub-srch-inp::placeholder{color:var(--muted)}
  #btn-search{display:none}

  /* ── Fix ordine flex header: logo | search | butoane actiune ── */
  .top-bar{justify-content:flex-start}
  .tb-left{order:1;flex-shrink:0}
  .hub-search-bar{order:2}
  .tb-actions{order:3;flex-shrink:0;margin-left:auto}

  /* ── Fix sticky feed-tabs — relativ la dt-center, nu la viewport ── */
  .feed-tabs-bar{top:0}

  /* ── Fix sidebar stânga: separatorul creste, cele 5 butoane raman
        MEREU vizibile la baza sidebar-ului, indiferent de inaltimea ecranului ── */
  #dt-left .dt-nav-sep{
    flex:1;
    height:auto;
    min-height:10px;
    background:transparent;
    border-top:1px solid rgba(255,255,255,.07);
    margin:8px 0 4px;
  }
  /* Arata un scrollbar subtire la hover, ca utilizatorul sa stie ca sidebar-ul e scrollabil */
  #dt-left:hover{scrollbar-width:thin}
  #dt-left:hover::-webkit-scrollbar{display:block;width:3px}
  #dt-left:hover::-webkit-scrollbar-thumb{background:rgba(124,58,237,.4);border-radius:2px}

  /* ── 4. Grid 3 coloane — cu zone explicite (fix ordinea) ── */
  #dt-body{
    position:fixed;
    top:58px;bottom:0;
    left:50%;transform:translateX(-50%);
    width:min(1280px,100vw);
    display:grid;
    grid-template-columns:260px minmax(0,1fr) 300px;
    grid-template-rows:100%;
    grid-template-areas:"left center right";
    overflow:hidden;
    background:var(--bg);
  }

  /* ── 5. Sidebar STÂNGA — navigare, 100% opac ── */
  #dt-left{
    grid-area:left;
    display:flex;flex-direction:column;
    overflow-y:auto;overflow-x:hidden;
    padding:8px 8px 60px;
    background:var(--bg);
    border-right:1px solid var(--border);
    scrollbar-width:none;
    z-index:1;
  }
  #dt-left::-webkit-scrollbar{display:none}
  /* Fix: profile card se clipuieste corect, textul nu iese din sidebar */
  .dt-profile-card{
    overflow:hidden;
    flex-shrink:0;
    min-height:56px;
    min-width:0;
  }
  .dt-profile-av{
    flex-shrink:0;
    min-width:36px;
    width:36px;
  }
  /* Containerul de text (div anonim) trebuie sa aiba min-width:0 si flex:1
     pentru ca text-overflow:ellipsis sa functioneze in flex */
  .dt-profile-card > div:not(.dt-profile-av){
    flex:1;
    min-width:0;
    overflow:hidden;
  }
  .dt-profile-name,.dt-profile-tag{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
  }

  /* ── 6. Centru — feed 100% opac, FARA blur ── */
  #dt-center{
    grid-area:center;
    display:block;
    overflow-y:auto;
    overflow-x:hidden;
    background:var(--card);
    scrollbar-width:thin;
    scrollbar-color:rgba(124,58,237,.3) transparent;
    z-index:1;
  }
  #dt-center::-webkit-scrollbar{width:4px}
  #dt-center::-webkit-scrollbar-track{background:transparent}
  #dt-center::-webkit-scrollbar-thumb{background:rgba(124,58,237,.4);border-radius:2px}

  /* hub-scroll = containerul feedului — OPAC, fara blur */
  .hub-scroll{
    overflow:visible;
    height:auto;
    min-height:calc(100vh - 58px);
    padding-bottom:60px;
    background:var(--card);
    border:none;
    border-radius:0;
    box-shadow:none;
    border-top:none;
  }
  .hub-scroll.radio-open{padding-top:0}

  /* Post cards */
  #feed-list .post-card,.hub-view .post-card{
    border-radius:0;
    background:var(--card);
    border-left:none;border-right:none;
    border-top:none;
    border-bottom:1px solid var(--border);
    transition:background .15s;
  }
  #feed-list .post-card:hover,.hub-view .post-card:hover{background:var(--card2)}

  /* Bare in feed — opace, FARA backdrop-filter */
  .shortcuts-bar,.stories-bar,.feed-tabs-bar,.feed-sort-bar{
    border-radius:0;
    background:var(--bg);
    border-bottom:1px solid var(--border);
  }

    /* ── Shortcuts scrollabile pe desktop ── */
  .shortcuts-grid{scrollbar-width:thin}
  .shortcuts-grid:active{cursor:grabbing}
  .shortcuts-grid::-webkit-scrollbar{display:block;height:4px}
  .shortcuts-grid::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:2px}
  .shortcuts-grid::-webkit-scrollbar-track{background:transparent}
  /* ── Carduri shortcuts desktop — 3D lift style ── */
  .sc-item:hover{
    transform:translateY(-7px) perspective(500px) rotateX(6deg);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.38),
      0 5px 0 rgba(0,0,0,.52),
      0 8px 0 rgba(0,0,0,.35),
      0 11px 0 rgba(0,0,0,.18),
      0 13px 0 rgba(0,0,0,.07),
      0 20px 48px rgba(0,0,0,.48),
      0 8px 20px rgba(0,0,0,.22);
  }
  .sc-item:active{
    transform:translateY(5px) scale(.94);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 1px 0 rgba(0,0,0,.45),
      0 2px 0 rgba(0,0,0,.25),
      0 4px 12px rgba(0,0,0,.22);
  }

  .composer-card{
    border-radius:0;
    background:var(--card);
    border-bottom:1px solid var(--border);
  }

  /* Auth banner pe desktop */
  .auth-banner{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:0;
    margin:0;
  }
  .auth-banner-title{color:var(--ink)}
  .auth-banner-sub{color:var(--ink2)}
  .btn-login{color:var(--ink);border-color:var(--border);background:var(--card2)}
  .btn-register{background:var(--brand);color:#fff;border-color:transparent}

  /* ── 7. Sidebar DREAPTA — widgets, 100% opac ── */
  #dt-right{
    grid-area:right;
    display:flex;flex-direction:column;
    overflow-y:auto;overflow-x:hidden;
    padding:14px 10px 60px;
    gap:12px;
    background:var(--bg);
    border-left:1px solid var(--border);
    scrollbar-width:none;
    z-index:1;
    box-sizing:border-box;
  }
  #dt-right::-webkit-scrollbar{display:none}
  /* Fix widgets dreapta: incadrate corect, nu taiate */
  #dt-right .dt-widget{
    width:100%;
    box-sizing:border-box;
    flex-shrink:0;
    min-width:0;
    border-radius:14px;
    overflow:hidden;
  }
  #dt-right .dt-stats-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    width:100%;
    box-sizing:border-box;
  }
  #dt-right .dt-stat{
    padding:12px 4px;
    min-width:0;
    overflow:hidden;
  }
  #dt-right .dt-stat-val{
    font-size:17px;
    white-space:nowrap;
  }
  #dt-right .dt-stat-lbl{
    font-size:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    display:block;
  }
  /* Neural Link widget: text incadrat */
  #dt-nl-wrap{
    padding:12px 12px;
    flex-wrap:wrap;
    gap:8px;
  }
  .dt-nl-status{
    min-width:0;
    overflow:hidden;
  }
  .dt-nl-status strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:block;
  }
  .dt-widget-title{
    padding:12px 14px 10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ── 8. Elemente mobile ascunse pe desktop ── */
  .hub-nav{display:none}
  .menu-overlay{display:none}
  #view-home .hub-stats{display:none}
  #view-home .neural-link-bar{display:none}
  /* Twin-bar ascuns pe desktop — apare floating in flow si creeaza duplicate "Profil" */
  #twin-bar{display:none}

  /* ── 9. Hub views ── */
  .hub-view{display:none}
  .hub-view.active{display:block}

  /* ── 10. Profile view pe desktop — hero mai inalt, tabs sticky ── */
  .profile-hero{
    height:200px;
    border-radius:0;
    border-bottom:2px solid rgba(124,58,237,.3);
  }
  .profile-tabs-bar{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    border-top:1px solid var(--border);
  }
  /* ── 10. Panouri & modals centrate ── */
  #bookmarks-panel:not(.open){display:none}
  #bookmarks-panel.open{
    position:fixed;top:70px;left:50%;
    right:auto;bottom:20px;
    transform:translateX(-50%);width:min(480px,90vw);
    border-radius:18px;z-index:3000;overflow-y:auto;
  }
  .notif-panel:not(.open){display:none}
  .notif-panel.open{display:flex;flex-direction:column;opacity:1;pointer-events:all}
  .notif-inner{
    max-width:440px;width:100%;
    margin:70px auto 0;border-radius:18px;
    overflow:hidden;max-height:calc(100vh - 90px);
  }
  /* BUG-DESKTOP-1 FIX: overlay-ul composer/comments trebuie sa ramana
   * full-screen (inset:0) — NU se limiteaza la 600px. Centrarea inner-ului
   * se face exclusiv prin .cmp-modal-inner / .comments-inner (max-width+margin:auto).
   * Regula veche crea o "umbra dreptunghiulara" de 600px in centrul ecranului. */
  .composer-modal,.comments-modal{
    inset:0;left:0;right:0;
    transform:none;max-width:none;width:100%;
  }
  .melissa-panel,.ghost-toggle-panel,.narrative-panel,.vhc-panel,
  .map-panel,.did-panel,.hub-epm{
    position:fixed;z-index:3000;
    left:50%;transform:translateX(-50%);
    max-width:540px;width:100%;right:auto;
  }
  /* Modal overlay: dialog centrat pe intreg viewport-ul desktop */
  .modal-overlay{
    position:fixed;z-index:10001;
    inset:0;left:0;right:0;top:0;bottom:0;
    transform:none;max-width:none;width:100%;
    display:flex;align-items:center;justify-content:center;
  }
  /* Sheet interior: card dialog centrat, colturi complete, max 480px */
  .modal-overlay .modal-sheet{
    max-width:480px;
    width:calc(100% - 48px);
    border-radius:20px;
    position:relative;
    left:auto;right:auto;
    margin:auto;
    transform:translateY(28px) scale(.96);
    opacity:0;
    transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .22s ease;
    box-shadow:0 24px 64px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.14);
  }
  .modal-overlay.open .modal-sheet{
    transform:translateY(0) scale(1);
    opacity:1;
  }
  .story-viewer{
    position:fixed;z-index:3000;
    left:50%;transform:translateX(-50%);
    max-width:420px;right:auto;
  }
  .media-lb,.med-overlay{
    position:fixed;inset:0;
    left:0;right:0;transform:none;z-index:11000;
  }
  .ar-filter-panel,.voice-record-panel,.mind-memo-panel{
    left:50%;transform:translateX(-50%);
    max-width:580px;right:auto;width:100%;
  }
  .cmp-modal-inner,.comments-inner{max-width:600px;margin:0 auto}
  .toast{
    position:fixed;z-index:25000;
    bottom:32px;left:50%;transform:translateX(-50%);
    right:auto;max-width:380px;width:auto;
  }

  /* ── 11. Radio banner — ascuns implicit, slide-in cand .visible ── */
  .radio-banner{
    position:fixed;
    top:58px;
    left:50%;
    transform:translateX(-50%) translateY(-110%);
    right:auto;
    width:min(1280px,100vw);
    z-index:1999;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .radio-banner.visible{
    transform:translateX(-50%) translateY(0);
  }

  /* ── 12. Buton Postează vizibil ── */
  #dt-post-btn{display:block}

  /* ── Radio banner — dt-center coboara cand bannerul e vizibil ── */
  body:has(#radio-banner.visible) #dt-center{
    padding-top:52px;
    transition:padding-top .3s ease;
  }

  /* ── FIX 6: Logo duplicat in top-bar ascuns — sidebar stanga are deja dt-nav-logo ── */
  .tb-logo{display:none}

  /* ── FIX 7: Search btn ascuns pe desktop — search bar e mereu vizibil inline ── */
  #btn-search{display:none}

  /* ── FIX 7b: Buton profil — adaptat pentru desktop: avatarul utilizatorului ── */
  #btn-profile-pic{
    width:40px;height:40px;
    border-radius:12px;
    background:var(--card2);
    border:1.5px solid var(--border);
    display:flex;align-items:center;
    justify-content:center;
    overflow:hidden;
    color:var(--ink);
    font-size:20px;
    transition:border-color .18s,box-shadow .18s;
    cursor:pointer;
  }
  #btn-profile-pic:hover{
    border-color:rgba(124,58,237,.55);
    box-shadow:0 0 14px rgba(124,58,237,.25);
  }
  #btn-profile-pic img{
    width:100%;height:100%;object-fit:cover;display:block;
  }

}