/* diaspora.ro source-first module extracted from #fb-mobile-overrides; behavior preserved during migration. */
/* ═══════════════════════════════════════════════════
   MELISSA - ANNA — FAB exact în footer nav
   ═══════════════════════════════════════════════════ */
#mf-fab {
  display: none ;
  visibility: hidden ;
  pointer-events: none ;
  position: fixed;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  z-index: 8990;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7, #ec4899);
  background-size: 200% 200%;
  box-shadow: 0 6px 24px rgba(124,58,237,.65), 0 0 0 0 rgba(124,58,237,.3);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: melFabGrad 4s ease infinite;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
#mf-fab:active {
  transform: scale(.9);
  box-shadow: 0 3px 12px rgba(124,58,237,.45);
}
@keyframes melFabGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (max-width: 640px) {
/* ══════════════════════════════════════════════════
   MOBILE FIX COMPLET — layout robust iOS/Android
   ══════════════════════════════════════════════════ */

/* ── Pagina: fara scroll global, fundalul alb ── */
html, body {
  overflow-x: hidden;
  height: 100% ;
  max-width: 100vw ;
  background: #ffffff ;
}

/* ── Sub-header avatar+search ascuns pe mobile
   (search accesibil prin butonul din top-bar) ── */
#sub-hdr { display: none ; }

/* ── Top bar: alb clar, fara blur problematic ── */
.top-bar {
  position: fixed ;
  top: 0 ; left: 0 ; right: 0 ;
  z-index: 200 ;
  background: #ffffff ;
  backdrop-filter: none ;
  -webkit-backdrop-filter: none ;
  height: calc(var(--safe-top, 0px) + 58px) ;
  padding-top: calc(var(--safe-top, 0px) + 10px) ;
  box-sizing: border-box ;
}

/* ── Hub-nav: ancorat fix la baza, cu safe-area ── */
.hub-nav {
  position: fixed ;
  bottom: 0 ; left: 0 ; right: 0 ;
  z-index: 200 ;
  background: var(--card, #fff) ;
  border-top: 1px solid var(--border, #e4e6ea) ;
  display: flex ;
  align-items: center ;
  padding-bottom: env(safe-area-inset-bottom, 0px) ;
  box-shadow: 0 -1px 0 rgba(0,0,0,.08) ;
  height: calc(62px + env(safe-area-inset-bottom, 0px)) ;
}
.hub-nav-tab {
  flex: 1 ;
  display: flex ;
  flex-direction: column ;
  align-items: center ;
  justify-content: center ;
  gap: 3px ;
  padding: 4px 2px ;
  cursor: pointer ;
  position: relative ;
  color: var(--ink2, #65676b) ;
  font: 600 9.5px/1.2 var(--font) ;
  background: transparent ;
  border: none ;
  -webkit-tap-highlight-color: transparent ;
  min-height: 44px ;
}
.hub-nav-tab.active { color: var(--brand, #7c3aed) ; }
.hub-nav-tab > svg { width: 28px ; height: 28px ; }

/* ── Tab Melissa-Anna: mai lat ── */
.mel-anna-tab { flex: 1.5; gap: 0; overflow: visible; justify-content: flex-end; padding-bottom: 7px; }
.mel-anna-tab > span {
  font: 700 9px/1.1 var(--font);
  color: #7c3aed;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.mel-anna-orb {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
  background-size: 200% 200%;
  box-shadow: 0 6px 22px rgba(124,58,237,.6), 0 0 0 4px rgba(168,85,247,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 11px;
  overflow: hidden;
  margin-top: -22px;
  margin-bottom: 4px;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
  animation: melOrbGrad 4s ease infinite;
}
.mel-anna-tab:active .mel-anna-orb {
  transform: scale(.88);
  box-shadow: 0 3px 10px rgba(124,58,237,.4);
}
@keyframes melOrbGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Hub-scroll: position:fixed intre top-bar si hub-nav ── */
.hub-scroll {
  position: fixed ;
  top: calc(var(--safe-top, 0px) + 58px) ;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px)) ;
  left: 0 ; right: 0 ;
  height: auto ;
  overflow-x: hidden ;
  overflow-y: auto ;
  -webkit-overflow-scrolling: touch ;
  overscroll-behavior-y: contain ;
  padding-bottom: 12px ;
  box-sizing: border-box ;
}

/* ── Feed-tabs-bar: lipit la topul containerului de scroll ── */
.feed-tabs-bar {
  top: 0 ;
  z-index: 50 ;
}

/* ── Feed-vbar (filtre chips): scroll lateral iOS ── */
.feed-vbar {
  -webkit-overflow-scrolling: touch ;
  touch-action: pan-x ;
  overflow-x: auto ;
  scrollbar-width: none ;
}
.feed-vbar::-webkit-scrollbar { display: none ; }

/* ── Butoane loc-feed: toata latimea, tap-uri mari ── */
.loc-feed-btn {
  display: flex ;
  width: 100% ;
  box-sizing: border-box ;
  justify-content: center ;
  min-height: 48px ;
}

/* ── Feed tab buttons: tap targets OK ── */
.feed-tab-btn { min-height: 44px ; }
.feed-vchip { padding: 8px 14px ; min-height: 36px ; }
.tb-btn { min-width: 44px ; min-height: 44px ; }

/* ── Prevenire overflow orizontal pe carduri ── */
.post-card, .loc-feed-card, .geo-card, .auth-banner, .composer-card, .shortcuts-bar {
  max-width: 100% ;
  box-sizing: border-box ;
}

/* ── Scroll hint geo ── */
.loc-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 14px 10px;
  font: 500 11px var(--font);
  color: var(--muted, #8a8d91);
}
.loc-scroll-hint svg {
  animation: shintSlide 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes shintSlide {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%       { transform: translateX(5px); opacity: 1; }
}
} /* end @media (max-width: 640px) */
/* ═══════════════════════════════════════════════════
   DESKTOP ≥900px: video/imagine umplu cardul complet
   fara limitare artificiala de inaltime
   ═══════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .post-media video,
  .media-video-wrap video,
  .fb-feed-video {
    max-height: none ;
    min-height: 280px ;
    width: 100% ;
    object-fit: contain ;
  }
  .post-media img,
  .post-media .fb-img {
    max-height: none ;
    width: 100% ;
    object-fit: contain ;
  }
  .post-card .post-media {
    width: 100% ;
    overflow: hidden ;
    background: #000 ;
  }
}

/* ═══════════════════════════════════════════════════
   VIDEO — înălțime exactă: fit pe ecran (fără depășire)
   ═══════════════════════════════════════════════════ */
.post-media video,
.media-video-wrap video,
.fb-feed-video {
  width: 100% ;
  height: auto ;
  max-height: 75vh ;
  display: block ;
  background: #000 ;
  object-fit: contain ;
}
.media-video-wrap {
  width: 100% ;
  position: relative ;
  background: #000 ;
  overflow: hidden ;
}
/* ═══════════════════════════════════════════════════
   IMAGINE — calitate maximă, fără limite artificiale
   ═══════════════════════════════════════════════════ */
.post-media img,
.post-media .fb-img {
  width: 100% ;
  height: auto ;
  max-height: none ;
  display: block ;
  object-fit: contain ;
  background: #000 ;
  image-rendering: -webkit-optimize-contrast ;
  filter: contrast(1.04) saturate(1.08) ;
  -ms-interpolation-mode: bicubic ;
}
.post-media.single-img img {
  max-height: none ;
  object-fit: contain ;
}
.post-media.multi-img {
  display: grid ;
  grid-template-columns: 1fr 1fr ;
  gap: 2px ;
  background: #000 ;
}
.post-media.multi-img img {
  width: 100% ;
  height: 220px ;
  object-fit: cover ;
  max-height: none ;
  filter: contrast(1.04) saturate(1.08) ;
}
.post-media {
  width: 100% ; background: #000 ;
  padding: 0 ; margin: 0 ;
  line-height: 0 ; overflow: hidden ;
}

/* ═══════════════════════════════════════════════════
   POST CARD
   ═══════════════════════════════════════════════════ */
.post-card {
  background: var(--card) ;
  border-bottom: 8px solid var(--bg) ;
  border-top: none ; border-left: none ; border-right: none ;
  box-shadow: none ; overflow: hidden ; margin: 0 ;
}
.post-head { display:flex;align-items:center;gap:8px;padding:12px 12px 8px; }
.post-av { width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden; }
.post-av img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.post-name { font:600 15px/1.25 var(--font);color:var(--ink); }
.post-info { font:400 12px/1.4 var(--font);color:var(--ink2);margin-top:2px; }
.post-body { padding:4px 12px 10px;font:400 15px/1.55 var(--font);color:var(--ink); }
.post-actions { display:flex;border-top:1px solid var(--border); }
.post-act { flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:40px;font:600 13px var(--font);color:var(--ink2);border-right:1px solid var(--border);background:transparent; }
.post-act:last-child { border-right:none; }
.post-act:active { background:var(--card2); }
.post-act.liked { color:#1877f2; }
.post-act svg { width:20px;height:20px; }
.post-act-wrap { flex:1;display:flex;align-items:center;justify-content:center;position:relative;height:40px; }
.post-act-count { display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font:400 13px/1 var(--font);color:var(--ink2); }

/* React picker */
.react-picker { display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--card);border-radius:50px;box-shadow:0 4px 24px rgba(0,0,0,.22);padding:8px 12px;gap:6px;z-index:9000;white-space:nowrap; }
.react-picker.open { display:flex; }
.react-picker span { font-size:30px;cursor:pointer;transition:transform .12s;padding:2px 3px; }
.react-picker span:hover, .react-picker span:active { transform:scale(1.4) translateY(-5px); }

/* Video controls */
.fb-vid-mute { position:absolute;bottom:10px;left:10px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:3; }
.fb-vid-mute svg { width:18px;height:18px;fill:#fff; }
.fb-vid-play-indicator { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none;z-index:3; }
.fb-vid-play-indicator.show { opacity:1; }
.fb-vid-progress { position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.3);z-index:3; }
.fb-vid-progress-bar { height:100%;background:var(--brand);width:0%; }
.media-fs-btn { position:absolute;bottom:10px;right:10px;width:34px;height:34px;border-radius:8px;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:3; }
.media-fs-btn svg { width:16px;height:16px;stroke:#fff; }

/* Shortcuts — stiluri consolidate, fara , preiau design-ul din sectiunea principala */
#feed-list { padding-bottom:12px; }

/* Composer */
.cmp-textarea.has-bg { border-radius:12px;min-height:180px;font-size:20px;font-weight:700;text-align:center;color:#fff;padding:32px 16px;text-shadow:0 1px 5px rgba(0,0,0,.35);caret-color:#fff; }

/* Lightbox fullscreen */
.media-lb-video { max-width:100vw;max-height:100svh;width:100%;height:auto; }
.media-lb-img { max-width:100vw;max-height:100svh;object-fit:contain;filter:contrast(1.04) saturate(1.08); }

/* Swipe hint overlay */
#lb-swipe-hint {
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.6); color:#fff; border-radius:20px;
  padding:6px 16px; font:500 13px/1.4 system-ui;
  pointer-events:none; opacity:0; transition:opacity .4s; z-index:5;
}
#lb-swipe-hint.show { opacity:1; }

/* ── Lightbox: X colț dreapta sus + video fullscreen corect ── */
#media-lb { position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.97);display:none;align-items:center;justify-content:center;flex-direction:column; }
#media-lb.open { display:flex; }
.media-lb-close { position:fixed;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:10001;border:1.5px solid rgba(255,255,255,.3);cursor:pointer;-webkit-tap-highlight-color:transparent; }
.media-lb-close svg { width:20px;height:20px;stroke:#fff; }
.media-lb-close:active { background:rgba(255,255,255,.4);transform:scale(.92); }
.media-lb-inner { width:100vw;height:100svh;display:flex;align-items:center;justify-content:center; }
.media-lb-video { width:100vw;height:100svh;max-width:100vw;max-height:100svh;object-fit:contain;display:block;background:#000; }
.media-lb-img { max-width:100vw;max-height:100svh;width:auto;height:auto;object-fit:contain;filter:contrast(1.04) saturate(1.08); }
.media-lb-badge { position:fixed;bottom:20px;right:18px;z-index:10001;pointer-events:none; }
#lb-swipe-hint { position:fixed;bottom:55px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;border-radius:22px;padding:8px 20px;font:500 14px/1.4 system-ui;pointer-events:none;opacity:0;transition:opacity .35s;z-index:10002;white-space:nowrap; }
#lb-swipe-hint.show { opacity:1; }

/* ═══════════════ WELCOME POPUP — SERVICII ═══════════════ */
#wp-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#wp-overlay.wp-show{display:flex;animation:wpFadeIn .35s ease}
@keyframes wpFadeIn{from{opacity:0}to{opacity:1}}

#wp-card{width:100%;max-height:94vh;background:linear-gradient(180deg,#0f0020 0%,#140030 100%);border-radius:28px 28px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 48px rgba(124,58,237,.35);transform-origin:center bottom;transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .5s ease,border-radius .5s ease}

#wp-header{padding:22px 20px 16px;background:linear-gradient(135deg,#6741D9,#a855f7,#ec4899);flex-shrink:0;position:relative;overflow:hidden}
#wp-header::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.wp-drag-bar{width:40px;height:4px;background:rgba(255,255,255,.35);border-radius:2px;margin:0 auto 14px}
.wp-greeting{font-size:11px;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.wp-title{font-size:21px;font-weight:900;color:#fff;line-height:1.25;letter-spacing:-.03em;margin-bottom:6px}
.wp-subtitle{font-size:13px;color:rgba(255,255,255,.82);line-height:1.5}
.wp-loc-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;color:#fff;margin-top:10px}

#wp-body{flex:1;overflow-y:auto;padding:16px 16px 0;-webkit-overflow-scrolling:touch}
#wp-body::-webkit-scrollbar{width:3px}
#wp-body::-webkit-scrollbar-thumb{background:rgba(124,58,237,.4);border-radius:2px}

.wp-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(192,132,252,.7);margin:16px 0 8px;display:flex;align-items:center;gap:7px}
.wp-section-title::before{content:'';width:3px;height:12px;background:linear-gradient(135deg,#6741D9,#ec4899);border-radius:2px;flex-shrink:0}

/* Service cards */
.wp-card{background:rgba(255,255,255,.05);border:1px solid rgba(192,132,252,.15);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s;text-decoration:none;display:block;color:inherit;-webkit-tap-highlight-color:transparent}
.wp-card:active{transform:scale(.98);background:rgba(255,255,255,.09)}
.wp-card-row{display:flex;align-items:flex-start;gap:12px}
.wp-card-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.wp-card-body{flex:1;min-width:0}
.wp-card-title{font-size:14px;font-weight:800;color:#f3eeff;margin-bottom:3px}
.wp-card-sub{font-size:12px;color:rgba(192,160,240,.7);line-height:1.45}
.wp-card-arrow{font-size:16px;color:rgba(192,132,252,.5);flex-shrink:0;align-self:center}

/* Small cards grid */
.wp-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.wp-card-sm{background:rgba(255,255,255,.05);border:1px solid rgba(192,132,252,.13);border-radius:14px;padding:12px 12px;cursor:pointer;transition:background .15s,transform .12s;text-decoration:none;display:flex;flex-direction:column;gap:4px;-webkit-tap-highlight-color:transparent}
.wp-card-sm:active{transform:scale(.97);background:rgba(255,255,255,.09)}
.wp-card-sm-ico{font-size:22px;margin-bottom:2px}
.wp-card-sm-name{font-size:12px;font-weight:800;color:#f3eeff;line-height:1.3}
.wp-card-sm-sub{font-size:10px;color:rgba(192,160,240,.6)}

/* Acte list */
.wp-acte-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.wp-acte-tag{background:rgba(124,58,237,.22);border:1px solid rgba(124,58,237,.35);border-radius:20px;padding:4px 11px;font-size:11px;font-weight:700;color:#c084fc}

/* SOS card */
.wp-sos-card{background:linear-gradient(135deg,rgba(220,38,38,.25),rgba(185,28,28,.15));border:1px solid rgba(220,38,38,.4);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wp-sos-title{font-size:13px;font-weight:900;color:#fca5a5;margin-bottom:4px}
.wp-sos-sub{font-size:12px;color:rgba(252,165,165,.7)}

/* Footer cookie + OK */
#wp-footer{flex-shrink:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.6);border-top:1px solid rgba(192,132,252,.15)}
.wp-cookie-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.wp-cookie-check{width:20px;height:20px;border:2px solid rgba(192,132,252,.5);border-radius:6px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;margin-top:1px;background:transparent}
.wp-cookie-check.checked{background:linear-gradient(135deg,#6741D9,#a855f7);border-color:transparent}
.wp-cookie-check svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.wp-cookie-check.checked svg{opacity:1}
.wp-cookie-txt{font-size:11px;color:rgba(192,160,240,.65);line-height:1.5;flex:1}
.wp-cookie-txt a{color:rgba(192,132,252,.8);text-decoration:underline}
.wp-ok-btn{width:100%;padding:15px;border-radius:16px;background:linear-gradient(135deg,#6741D9,#a855f7,#ec4899);background-size:200% 200%;border:none;color:#fff;font-size:16px;font-weight:900;letter-spacing:-.02em;cursor:pointer;transition:filter .15s,transform .15s;box-shadow:0 4px 24px rgba(124,58,237,.45)}
.wp-ok-btn:active{transform:scale(.97);filter:brightness(1.1)}
.wp-ok-btn:disabled{opacity:.6;cursor:default}

/* Loading state */
.wp-loading{text-align:center;padding:32px 16px;color:rgba(192,160,240,.6);font-size:13px}
.wp-spinner{width:28px;height:28px;border:3px solid rgba(192,132,252,.2);border-top-color:#9333ea;border-radius:50%;animation:wpSpin .8s linear infinite;margin:0 auto 12px}
@keyframes wpSpin{to{transform:rotate(360deg)}}
/* ═══════════════ END WELCOME POPUP ═══════════════════════ */


/* ── Feed loading/error state contract — MP-1.2C ── */
.feed-error-state { display:flex; flex-direction:column; align-items:center; gap:8px; }
.feed-error-state .feed-error-icon { margin-bottom:0; }
.feed-error-title { color:var(--ink); font:700 15px/1.3 var(--font); }
.feed-error-copy { max-width:30rem; margin:0; color:var(--ink2); }
.feed-retry-btn { margin-top:4px; padding:9px 16px; border:1px solid color-mix(in srgb, var(--brand) 35%, transparent); border-radius:10px; background:var(--brand); color:#fff; font:700 13px var(--font); cursor:pointer; }
.feed-retry-btn:hover { filter:brightness(1.06); }
.feed-retry-btn:focus-visible { outline:3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset:2px; }