/* diaspora.ro source-first module extracted from #mobile-premium; behavior preserved during migration. */
/* ═══════════════════════════════════════════════════════════════════
   MOBILE PREMIUM — Experiența SPECIALĂ pe telefon
   Design diferit de piață: glass nav, ambient gradient, micro-anim.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ambient gradient background (pulsing, barely visible) ── */
@media(max-width:899px){
  body::before{
    content:'';
    position:fixed;inset:0;
    background:
      radial-gradient(ellipse 80% 40% at 50% -10%,rgba(124,58,237,.13) 0%,transparent 70%),
      radial-gradient(ellipse 60% 30% at 80% 80%,rgba(236,72,153,.08) 0%,transparent 60%);
    pointer-events:none;z-index:0;
    animation:ambientPulse 8s ease-in-out infinite alternate;
  }
  @keyframes ambientPulse{
    from{opacity:.6}
    to{opacity:1}
  }

  /* ── Glass bottom navigation ── */
  .hub-nav{
    background:rgba(var(--bg-rgb,15,10,30),.82);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border-top:1px solid rgba(124,58,237,.18);
    box-shadow:0 -4px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .hub-nav-tab{
    transition:transform .15s,color .15s;
    position:relative;
  }
  .hub-nav-tab:active{transform:scale(.88)}
  .hub-nav-tab.active{
    color:var(--brand);
  }
  /* Active tab indicator pill */
  .hub-nav-tab.active::after{
    content:'';
    position:absolute;top:6px;left:50%;
    transform:translateX(-50%);
    width:24px;height:3px;border-radius:2px;
    background:linear-gradient(90deg,#6741D9,#ec4899);
    box-shadow:0 0 10px rgba(124,58,237,.6);
  }

  /* ── Premium top-bar ── */
  .top-bar{
    background:rgba(var(--bg-rgb,15,10,30),.88);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-bottom:1px solid rgba(124,58,237,.12);
    box-shadow:0 2px 20px rgba(0,0,0,.2);
  }

  /* ── Story rings — animated gradient ── */
  .story-ring{
    background:linear-gradient(135deg,#f59e0b,#ef4444,#ec4899,#8b5cf6,#6366f1);
    background-size:300% 300%;
    animation:storyRing 3s ease infinite;
  }
  @keyframes storyRing{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
  }
  .story-ring-seen{
    background:var(--border);
    animation:none;
  }

  /* ── Card entrance animation ── */
  #feed-list .post-card{
    animation:cardIn .35s cubic-bezier(.25,.46,.45,.94) both;
    animation-fill-mode:both;
  }
  #feed-list .post-card:nth-child(1){animation-delay:.04s}
  #feed-list .post-card:nth-child(2){animation-delay:.08s}
  #feed-list .post-card:nth-child(3){animation-delay:.12s}
  #feed-list .post-card:nth-child(4){animation-delay:.16s}
  #feed-list .post-card:nth-child(5){animation-delay:.2s}
  #feed-list .post-card:nth-child(n+6){animation-delay:.24s}
  @keyframes cardIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* ── Floating Compose button (FAB) ── */
  .mf-fab{
    background:linear-gradient(135deg,#6741D9,#a855f7 50%,#ec4899);
    background-size:200% 200%;
    animation:fabGrad 4s ease infinite;
    box-shadow:
      0 4px 22px rgba(124,58,237,.55),
      0 0 0 0 rgba(124,58,237,.4);
    transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
  }
  .mf-fab:active{
    transform:scale(.9);
    box-shadow:0 2px 10px rgba(124,58,237,.35);
  }
  @keyframes fabGrad{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }

  /* ── Post card flat + animatie premium ── */
  #feed-list .post-card {
    position: relative;
    border-radius: 0 ;
    background: var(--card) ;
    box-shadow: none ;
    border-bottom: 1.5px solid rgba(0,0,0,.09) ;
    transform: none ;
    transition: background .18s ease ;
    -webkit-tap-highlight-color: transparent ;
    overflow: hidden ;
  }
  [data-theme="dark"] #feed-list .post-card{
    border-bottom: 1.5px solid rgba(255,255,255,.08) ;
  }
  #feed-list .post-card::before {
    display: none;
  }
  #feed-list .post-card::after {
    display: none;
  }
  #feed-list .post-card:active {
    background: rgba(0,0,0,.03) ;
  }
  #feed-list .post-card:active::after {
    display: none;
  }

  /* ══ POST CARD HOVER GLOW — punct verde rotitor 2026 ═══════ */
  #feed-list .post-card:not(.holo):not(.memory):not(.capsule):hover {
    background: var(--card2) ;
  }
  #feed-list .post-card:not(.holo):not(.memory):not(.capsule):hover::before {
    content: '' ;
    position: absolute ;
    inset: 0 ;
    border-radius: 0 ;
    background: conic-gradient(
      from var(--dia-glow-angle),
      transparent 0deg,
      transparent 338deg,
      rgba(34,197,94,.20) 346deg,
      rgba(74,222,128,.75) 352deg,
      rgba(200,255,220,.95) 356deg,
      rgba(74,222,128,.75) 359deg,
      transparent 360deg
    ) ;
    animation: diaGlowRotate 2.8s linear infinite ;
    pointer-events: none ;
    z-index: -2 ;
  }
  /* Protejam cardurile speciale de 3D generic */
  #feed-list .post-card.holo,
  #feed-list .post-card.memory,
  #feed-list .post-card.capsule {
    box-shadow: none ;
    transform: none ;
  }
  #feed-list .post-card.holo::before,
  #feed-list .post-card.holo::after,
  #feed-list .post-card.memory::before,
  #feed-list .post-card.memory::after,
  #feed-list .post-card.capsule::before,
  #feed-list .post-card.capsule::after {
    display: none ;
  }

  /* ── Shortcuts hover/active states ── */
  .sc-item{
    transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s ease;
  }
  .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 premium ── */
  .composer-card .cmp-avatar{
    box-shadow:0 0 0 2px rgba(124,58,237,.35);
  }

  /* ── Hub nav Melissa button special ── */
  .mel-anna-orb{
    box-shadow:0 8px 28px rgba(124,58,237,.7), 0 0 0 5px rgba(168,85,247,.2);
  }

  /* ── View transitions (smooth switch) ── */
  .hub-view{
    animation:none;
  }
  .hub-view.active{
    animation:viewFadeIn .25s ease both;
  }
  @keyframes viewFadeIn{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* ── Notif badge premium ── */
  .nav-badge{
    background:linear-gradient(135deg,#ef4444,#f97316);
    box-shadow:0 0 8px rgba(239,68,68,.5);
  }

  /* ── Search bar premium mobile — FIXED: ascunsa implicit, slide cand .open ── */
  .hub-search-bar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:300;
    background:rgba(var(--bg-rgb,15,10,30),.97);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid rgba(124,58,237,.18);
    transform:translateY(-110%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
    visibility:hidden;
  }
  .hub-search-bar.open{
    transform:translateY(0);
    pointer-events:all;
    visibility:visible;
  }
  #hub-srch-inp{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(124,58,237,.22);
    border-radius:14px;
    color:#f1f5f9;
  }
  #hub-srch-inp::placeholder{
    color:rgba(255,255,255,.45);
  }
  #hub-srch-inp:focus{
    background:rgba(124,58,237,.12);
    border-color:rgba(124,58,237,.5);
    box-shadow:0 0 0 3px rgba(124,58,237,.12);
  }

  /* ── Menu panel premium ── */
  .menu-panel{
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-right:1px solid rgba(0,0,0,.09);
    box-shadow:4px 0 24px rgba(0,0,0,.12);
  }

  /* ── Toast premium ── */
  .toast{
    background:rgba(20,15,40,.95);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(124,58,237,.2);
    box-shadow:0 8px 32px rgba(0,0,0,.4);
    border-radius:30px;
  }

  /* ── Button press feedback global ── */
  button:active:not(.dt-nav-btn):not(.hub-nav-tab){
    opacity:.85;
  }

  /* ── Scroll improvements ── */
  .hub-scroll{
    overflow-y:visible;
    overscroll-behavior:auto;
    scroll-behavior:smooth;
  }

  /* ── Feed tabs glass ── */
  .feed-tabs-bar{
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    background:rgba(var(--bg-rgb,15,10,30),.82);
  }

  /* ── RADIO BANNER: mini-player la BOTTOM (deasupra nav bar), nu over header ── */
  .radio-banner{
    position:fixed;
    top:auto;
    bottom:calc(72px + var(--safe-bot,0px));
    left:10px;
    right:10px;
    width:auto;
    border-radius:18px;
    z-index:199;
    transform:translateY(150%);
    box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .radio-banner.visible{
    transform:translateY(0);
  }
  /* Cand radio e activ, feed-ul nu mai adauga padding-top ci padding-bottom */
  .hub-scroll.radio-open{
    padding-top:0;
    padding-bottom:calc(138px + var(--safe-bot,0px));
  }

  /* ── MENU hamburger: text intunecat pe fundal alb ── */
  .menu-item-text{
    color:#1c1e21;
  }
  .menu-section-title{
    color:#65676b;
  }
  .menu-user-name{
    color:#1c1e21;
  }
  .menu-user-sub{
    color:#65676b;
  }
  .menu-item:active{
    background:rgba(0,0,0,.05);
  }
  .menu-acc-title{
    color:#1c1e21;
  }
  .menu-acc-title svg{
    stroke:#7c3aed;
  }
}

/* ── Dark mode specific (care are --bg inchis) ── */
@media(max-width:899px) and (prefers-color-scheme:dark){
  /* neutralizat pe mobil — header alb pur */
  :root{--bg-rgb:255,255,255}
}