/* * Friende — Phase 13 theme system. * * How it works: * * * `data-theme` sets the color variables below. `data-family` (spacious / * cards / dense / glass) sets shape: radius, density, blur — so themes in * the same color mood still feel different if they're different families, * and vice versa. `.dark` on applies the dark overrides for * whichever theme is active. Toggling dark mode never changes the theme; * toggling the theme never changes light/dark — the two are independent, * same as most modern apps. * * Merge instructions: import this file from resources/css/app.css, e.g. * @import './friende-themes.css'; * (See README-PHASE13.md.) */ :root { --friende-radius: 0.75rem; --friende-gap: 1rem; --friende-blur: 0px; --friende-font: 'Figtree', ui-sans-serif, system-ui, sans-serif; --friende-heading-font: var(--friende-font); --friende-transition: 150ms ease; /* Fallback color vars (Minimal Light) so friende-* utility classes still work anywhere data-theme isn't set — e.g. the admin panel, which intentionally doesn't opt into the public site's 10 themes. */ --c-bg: #ffffff; --c-surface: #ffffff; --c-surface-2: #f9fafb; --c-text: #111827; --c-text-muted: #6b7280; --c-border: #e5e7eb; --c-primary: #2563eb; --c-primary-text: #ffffff; --c-accent: #2563eb; } html.dark:not([data-theme]) { --c-bg: #0f172a; --c-surface: #1e293b; --c-surface-2: #16213a; --c-text: #f1f5f9; --c-text-muted: #94a3b8; --c-border: #334155; --c-primary: #3b82f6; --c-primary-text: #ffffff; --c-accent: #60a5fa; } /* ---------- Layout families (shape, not color) ---------- */ [data-family="spacious"] { --friende-radius: 0.75rem; --friende-gap: 1.5rem; --friende-blur: 0px; } [data-family="cards"] { --friende-radius: 1.25rem; --friende-gap: 1rem; --friende-blur: 0px; } [data-family="dense"] { --friende-radius: 0.375rem; --friende-gap: 0.5rem; --friende-blur: 0px; } [data-family="glass"] { --friende-radius: 1rem; --friende-gap: 1rem; --friende-blur: 12px; } /* ---------- 1. Minimal Light (default) ---------- */ [data-theme="minimal-light"] { --c-bg: #ffffff; --c-surface: #ffffff; --c-surface-2: #f9fafb; --c-text: #111827; --c-text-muted: #6b7280; --c-border: #e5e7eb; --c-primary: #2563eb; --c-primary-text: #ffffff; --c-accent: #2563eb; } [data-theme="minimal-light"].dark { --c-bg: #0f172a; --c-surface: #1e293b; --c-surface-2: #16213a; --c-text: #f1f5f9; --c-text-muted: #94a3b8; --c-border: #334155; --c-primary: #3b82f6; --c-primary-text: #ffffff; --c-accent: #60a5fa; } /* ---------- 2. Card Social ---------- */ [data-theme="card-social"] { --c-bg: #fdf2f8; --c-surface: #ffffff; --c-surface-2: #fce7f3; --c-text: #500724; --c-text-muted: #9d174d; --c-border: #fbcfe8; --c-primary: #ec4899; --c-primary-text: #ffffff; --c-accent: #db2777; } [data-theme="card-social"].dark { --c-bg: #1a0b13; --c-surface: #2b0f1e; --c-surface-2: #3b1526; --c-text: #fce7f3; --c-text-muted: #f0abc4; --c-border: #4a1a2e; --c-primary: #f472b6; --c-primary-text: #1a0b13; --c-accent: #f9a8d4; } /* ---------- 3. Dark Glass ---------- */ [data-theme="dark-glass"] { --c-bg: #0b0f1a; --c-surface: rgba(255,255,255,0.06); --c-surface-2: rgba(255,255,255,0.03); --c-text: #e5e7eb; --c-text-muted: #9ca3af; --c-border: rgba(255,255,255,0.12); --c-primary: #8b5cf6; --c-primary-text: #ffffff; --c-accent: #a78bfa; } [data-theme="dark-glass"].dark { /* already dark by default; keep same */ } /* ---------- 4. Compact Dense ---------- */ [data-theme="compact-dense"] { --c-bg: #f9fafb; --c-surface: #ffffff; --c-surface-2: #f3f4f6; --c-text: #1f2937; --c-text-muted: #6b7280; --c-border: #e5e7eb; --c-primary: #0891b2; --c-primary-text: #ffffff; --c-accent: #06b6d4; } [data-theme="compact-dense"].dark { --c-bg: #111827; --c-surface: #1f2937; --c-surface-2: #172033; --c-text: #e5e7eb; --c-text-muted: #9ca3af; --c-border: #374151; --c-primary: #22d3ee; --c-primary-text: #0b1220; --c-accent: #67e8f9; } /* ---------- 5. Sunset Warm ---------- */ [data-theme="sunset-warm"] { --c-bg: #fff7ed; --c-surface: #ffffff; --c-surface-2: #ffedd5; --c-text: #7c2d12; --c-text-muted: #b45309; --c-border: #fed7aa; --c-primary: #f97316; --c-primary-text: #ffffff; --c-accent: #fb923c; } [data-theme="sunset-warm"].dark { --c-bg: #1f1209; --c-surface: #2e1a0d; --c-surface-2: #3d2412; --c-text: #fed7aa; --c-text-muted: #fdba74; --c-border: #4a2c15; --c-primary: #fb923c; --c-primary-text: #1f1209; --c-accent: #fdba74; } /* ---------- 6. Ocean Blue ---------- */ [data-theme="ocean-blue"] { --c-bg: #f0f9ff; --c-surface: #ffffff; --c-surface-2: #e0f2fe; --c-text: #0c4a6e; --c-text-muted: #0369a1; --c-border: #bae6fd; --c-primary: #0284c7; --c-primary-text: #ffffff; --c-accent: #0ea5e9; } [data-theme="ocean-blue"].dark { --c-bg: #06131f; --c-surface: #0b2436; --c-surface-2: #0f2e44; --c-text: #e0f2fe; --c-text-muted: #7dd3fc; --c-border: #16405c; --c-primary: #38bdf8; --c-primary-text: #06131f; --c-accent: #7dd3fc; } /* ---------- 7. Mono Bold ---------- */ [data-theme="mono-bold"] { --c-bg: #ffffff; --c-surface: #ffffff; --c-surface-2: #f4f4f5; --c-text: #000000; --c-text-muted: #52525b; --c-border: #000000; --c-primary: #000000; --c-primary-text: #ffffff; --c-accent: #000000; --friende-heading-font: Georgia, 'Times New Roman', serif; } [data-theme="mono-bold"].dark { --c-bg: #000000; --c-surface: #0a0a0a; --c-surface-2: #171717; --c-text: #ffffff; --c-text-muted: #a1a1aa; --c-border: #ffffff; --c-primary: #ffffff; --c-primary-text: #000000; --c-accent: #ffffff; } /* ---------- 8. Pastel Soft ---------- */ [data-theme="pastel-soft"] { --c-bg: #f5f3ff; --c-surface: #ffffff; --c-surface-2: #ede9fe; --c-text: #4c1d95; --c-text-muted: #7c3aed; --c-border: #ddd6fe; --c-primary: #a78bfa; --c-primary-text: #ffffff; --c-accent: #c4b5fd; } [data-theme="pastel-soft"].dark { --c-bg: #1a1330; --c-surface: #251c42; --c-surface-2: #2f2454; --c-text: #ede9fe; --c-text-muted: #c4b5fd; --c-border: #3b2d63; --c-primary: #c4b5fd; --c-primary-text: #1a1330; --c-accent: #ddd6fe; } /* ---------- 9. Neon Cyber ---------- */ [data-theme="neon-cyber"] { --c-bg: #05060a; --c-surface: rgba(57,255,20,0.05); --c-surface-2: rgba(255,0,229,0.05); --c-text: #e5ffe5; --c-text-muted: #8a9a8a; --c-border: rgba(57,255,20,0.25); --c-primary: #39ff14; --c-primary-text: #05060a; --c-accent: #ff00e5; } [data-theme="neon-cyber"].dark { /* already dark by default; keep same */ } /* ---------- 10. Corporate Classic ---------- */ [data-theme="corporate-classic"] { --c-bg: #f8fafc; --c-surface: #ffffff; --c-surface-2: #f1f5f9; --c-text: #1e293b; --c-text-muted: #475569; --c-border: #cbd5e1; --c-primary: #1d4ed8; --c-primary-text: #ffffff; --c-accent: #2563eb; --friende-heading-font: Georgia, 'Times New Roman', serif; } [data-theme="corporate-classic"].dark { --c-bg: #0f172a; --c-surface: #1e293b; --c-surface-2: #172033; --c-text: #e2e8f0; --c-text-muted: #94a3b8; --c-border: #334155; --c-primary: #3b82f6; --c-primary-text: #0f172a; --c-accent: #60a5fa; } /* ---------- Applied base styles ---------- */ html { background: var(--c-bg); } body { background: var(--c-bg); color: var(--c-text); font-family: var(--friende-font); transition: background-color var(--friende-transition), color var(--friende-transition); } h1, h2, h3, h4 { font-family: var(--friende-heading-font); } .friende-surface { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--friende-radius); backdrop-filter: blur(var(--friende-blur)); -webkit-backdrop-filter: blur(var(--friende-blur)); } .friende-surface-2 { background: var(--c-surface-2); border-color: var(--c-border); } [data-family="dense"] .friende-surface, [data-family="dense"] .friende-card { padding: 0.5rem 0.75rem; } [data-family="cards"] .friende-surface, [data-family="cards"] .friende-card { padding: 1.25rem; } [data-family="spacious"] .friende-surface, [data-family="spacious"] .friende-card { padding: 1.5rem; } [data-family="glass"] .friende-surface, [data-family="glass"] .friende-card { padding: 1.25rem; } .friende-btn-primary { background: var(--c-primary); color: var(--c-primary-text); border-radius: var(--friende-radius); transition: opacity var(--friende-transition), transform var(--friende-transition); } .friende-btn-primary:hover { opacity: 0.9; } .friende-btn-primary:active { transform: scale(0.98); } .friende-text-muted { color: var(--c-text-muted); } .friende-border { border-color: var(--c-border); } .friende-accent { color: var(--c-accent); } /* ---------- Skeleton loaders ---------- */ @keyframes friende-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .friende-skeleton { background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border) 37%, var(--c-surface-2) 63%); background-size: 400% 100%; animation: friende-shimmer 1.4s ease infinite; border-radius: var(--friende-radius); } /* Respect reduced-motion users — shimmer becomes a static pulse-free block */ @media (prefers-reduced-motion: reduce) { .friende-skeleton { animation: none; background: var(--c-surface-2); } .friende-fade, .friende-fade-in, [x-transition] { transition: none !important; } } /* ---------- Page/element transitions ---------- */ .friende-fade-in { animation: friende-fade-in-kf 200ms ease both; } @keyframes friende-fade-in-kf { from { opacity: 0; } to { opacity: 1; } } /* NOTE (fix): the old keyframes also animated `transform`, and because the animation used `fill-mode: both` that final `transform: translateY(0)` stayed applied to this element forever after the animation finished. A `transform` on an ancestor turns it into the "containing block" for any `position: fixed` descendant, so every fixed-position overlay inside the page content (e.g. the Create Post composer, which is `position: fixed; inset:0;`) was being positioned/sized relative to this section instead of the real viewport — that's why the composer box appeared to run off/outside the screen on both desktop and mobile. Dropping the transform from the fade keeps the same fade-in look without breaking fixed-position children anywhere on the site. */ [x-cloak] { display: none !important; } /* ---------- Media fade-in (images/video that load lazily get a skeleton background until they finish loading, then fade in — no separate JS file needed, just `loading="lazy" onload="this.classList.add('loaded')"` on the tag, paired with the .friende-media wrapper below). ---------- */ .friende-media { background: var(--c-surface-2); } .friende-media img, .friende-media video { opacity: 0; transition: opacity 200ms ease; } .friende-media img.loaded, .friende-media video.loaded, .friende-media img[loading]:not([loading]), .friende-media video[data-loaded="true"] { opacity: 1; } .friende-media img.loaded, .friende-media video.loaded { opacity: 1; } /* ---------- Site logo: light vs dark variant ---------- Two tags are always rendered (data-site-logo="light" / data-site-logo="dark"); this shows whichever one matches the *actual* current background, not just the light/dark toggle — themes like Dark Glass / Neon Cyber are dark by default even when the visitor never touched the toggle, so the same dark-detection used for the color variables above is reused here. */ [data-site-logo="dark"] { display: none; } html.dark [data-site-logo="light"], [data-theme="dark-glass"] [data-site-logo="light"], [data-theme="neon-cyber"] [data-site-logo="light"] { display: none; } html.dark [data-site-logo="dark"], [data-theme="dark-glass"] [data-site-logo="dark"], [data-theme="neon-cyber"] [data-site-logo="dark"] { display: inline-block !important; } /* Site logo bounding box — whatever ratio the admin uploads (wide, square, tall), light and dark always render at the exact same visual size. A plain height:Xpx + width:auto image would make a wide logo look bigger than a square one at the "same" height; giving both an identical box and letting the image fit *inside* it (never crop, never stretch) fixes that. */ .friende-logo-box{ display:inline-flex;align-items:center;justify-content:flex-start; height:var(--friende-logo-h,36px); width:auto; max-width:min(60vw, calc(var(--friende-logo-h,36px) * 8)); overflow:hidden; } .friende-logo-box img{ height:100%;width:auto;max-width:100%;object-fit:contain; } /* ================================================================ Friendse Social UI — modern social-platform shell ================================================================ */ .friende-app-shell{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:24px;max-width:1440px;margin:0 auto;width:100%;padding:18px 20px} .friende-app-shell-2col{grid-template-columns:260px minmax(0,1fr)} .friende-sidebar{position:sticky;top:84px;height:calc(100vh - 104px);overflow:auto} .friende-rightbar{position:sticky;top:84px;height:fit-content} .friende-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--c-text-muted);transition:.15s ease} .friende-nav-item:hover{background:var(--c-surface-2);color:var(--c-text)} .friende-nav-item.active{background:color-mix(in srgb,var(--c-primary) 12%,transparent);color:var(--c-primary)} .friende-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04)} /* Facebook-style friend/follower grid cards (Friends, Followers, Following pages) */ .friend-card{transition:box-shadow 150ms ease,transform 150ms ease;width:100%;max-width:208px} .friend-card:hover{box-shadow:0 4px 14px rgba(15,23,42,.10);transform:translateY(-1px)} .friend-card .friende-media img{transition:transform .35s ease,opacity 200ms ease} @media(hover:hover){.friend-card:hover .friende-media img{transform:scale(1.05)}} .friend-card .friende-media{aspect-ratio:1/1} /* ── Follow / Message action pills on friend-follower cards ────────────── Matches the reference design: a fully-rounded solid "Following" pill with icon+label, plus a separate perfectly circular Message icon button beside it. Sizes use container-query units (cqw) tied to the action row's own width, so they scale smoothly from the wide desktop "Suggested Friends" cards all the way down to the narrow 2-up mobile grid — no sudden breakpoint jump, and no risk of the label clipping partway through a word. */ .friend-action-row{display:flex;align-items:center;gap:clamp(6px,2.5cqw,10px);container-type:inline-size;container-name:friend-actions} .friend-action-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; height:clamp(34px,11cqw,48px); font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease; -webkit-tap-highlight-color:transparent;cursor:pointer; } .friend-action-btn svg{flex:none;width:clamp(12px,4cqw,18px);height:clamp(12px,4cqw,18px)} .friend-action-btn:active{transform:scale(.95)} .friend-action-btn:disabled{opacity:.7;cursor:default} /* `overflow:hidden;text-overflow:ellipsis` above is a safety net only — the fluid sizing is tuned so it should never actually trigger; if the label ever doesn't fit, it shows "…" instead of bleeding into the neighbouring button. */ .friend-follow-btn{ flex:1 1 auto;min-width:0; gap:clamp(4px,1.8cqw,8px); padding:0 clamp(10px,4cqw,20px); font-size:clamp(11px,4.4cqw,15px); border-radius:999px; } /* Deep safety net only — with the grid fix below, cards should never actually get this narrow. It exists purely so the button can never truly break (raw mid-word clipping) in some extreme edge case (a manually-resized browser, an unusual zoom level, etc). Under normal use this should never fire — the "Following"/"Unfollow" pill with its label should always be visible, matching the reference design, on both mobile and desktop. */ @container friend-actions (max-width:110px){ .friend-follow-btn{flex:0 0 auto;aspect-ratio:1/1;padding:0;gap:0} .friend-follow-btn .btn-label{display:none} } .friend-message-btn{flex:0 0 auto;aspect-ratio:1/1;padding:0;gap:0;border-radius:50%} .friend-message-btn .btn-label{display:none} .friend-action-btn.is-follow{ background:linear-gradient(135deg,var(--c-primary),color-mix(in srgb,var(--c-primary) 78%,#000 8%)); color:var(--c-primary-text); box-shadow:0 2px 8px color-mix(in srgb,var(--c-primary) 45%,transparent); } @media(hover:hover){.friend-action-btn.is-follow:hover{box-shadow:0 4px 14px color-mix(in srgb,var(--c-primary) 55%,transparent);transform:translateY(-1px)}} /* "Following" reads as the same confident solid-blue pill as "Follow" — just with a checkmark — matching the reference design, rather than a pale/outlined variant. It only shifts to the red "Unfollow" look on hover (desktop) or when actually toggled off. */ .friend-action-btn.is-following{ background:linear-gradient(135deg,var(--c-primary),color-mix(in srgb,var(--c-primary) 78%,#000 8%)); color:var(--c-primary-text); box-shadow:0 2px 8px color-mix(in srgb,var(--c-primary) 45%,transparent); } @media(hover:hover){ .friend-action-btn.is-following:hover{ background:linear-gradient(135deg,#ef4444,color-mix(in srgb,#ef4444 78%,#000 8%)); box-shadow:0 2px 8px color-mix(in srgb,#ef4444 45%,transparent); } .friend-action-btn.is-following:hover .friend-following-only{display:none} .friend-action-btn.is-following:hover .friend-unfollow-only{display:inline-flex} } .friend-unfollow-only{display:none} .friend-action-btn.is-message{ background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border); } @media(hover:hover){.friend-action-btn.is-message:hover{background:var(--c-surface-2);border-color:color-mix(in srgb,var(--c-primary) 40%,var(--c-border));transform:translateY(-1px)}} .friende-topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--c-surface) 94%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--c-border)} .friende-story-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.friende-story-row::-webkit-scrollbar{display:none} .friende-story{min-width:88px;height:132px;border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--c-border);background:var(--c-surface-2);display:flex;align-items:flex-end;padding:8px;color:#fff} .friende-avatar{width:42px;height:42px;border-radius:999px;object-fit:cover;border:2px solid var(--c-surface)} .friende-icon-btn{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--c-border);background:var(--c-surface);transition:.15s;font-size:17px} .friende-icon-btn:hover{background:var(--c-surface-2)} /* ── Voice/Video call header buttons — premium-gated ──────────────────── Wrapper is just a positioning context for the small gold lock badge; the button itself gets a subtle lift + colored ring on hover so both the free ("try it, you'll get redirected") and premium ("just works") paths feel like an intentional, polished control instead of a plain icon button that happens to 402. */ .friende-call-btn-wrap{position:relative;display:inline-flex} .friende-icon-btn--call:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.12);border-color:var(--c-primary)} .friende-icon-btn--call:active{transform:translateY(0) scale(.94)} .friende-premium-lock{ position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:999px; display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1; background:linear-gradient(135deg,#ffd76a,#ff9d1f);color:#3a2400; border:1.5px solid var(--c-surface);box-shadow:0 1px 3px rgba(0,0,0,.35); pointer-events:none; } /* ── "Coming soon" tooltip bubble — appears directly above whichever locked icon (mic / call / video) was just clicked, then fades out. Positioned with fixed coords set from JS (comingSoon()) so it always sits above the exact button that was tapped, not a fixed screen spot. */ .friende-coming-soon-tip{ position:fixed;z-index:300;transform:translate(-50%,-100%) translateY(-4px) scale(.92); background:#1f2937;color:#fff;font-size:12.5px;font-weight:600;line-height:1; padding:7px 12px;border-radius:8px;white-space:nowrap;pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;transition:opacity .15s ease,transform .15s ease; } .friende-coming-soon-tip::after{ content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%); border:5px solid transparent;border-top-color:#1f2937; } .friende-coming-soon-tip.show{opacity:1;transform:translate(-50%,-100%) translateY(-8px) scale(1)} /* ── Premium upgrade prompt (shown instead of an instant redirect when a non-premium user taps 📞/🎥) ─────────────────────────────────────── */ .friende-premium-modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px} .friende-premium-modal{width:100%;max-width:360px;background:var(--c-surface);border-radius:20px;padding:26px 22px 22px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:friendePremiumPop .22s cubic-bezier(.22,1,.36,1)} @keyframes friendePremiumPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}} .friende-premium-modal-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,#ffd76a,#ff9d1f);box-shadow:0 8px 20px rgba(255,157,31,.35)} .friende-premium-modal h3{font-size:17px;font-weight:800;color:var(--c-text);margin:0 0 6px} .friende-premium-modal p{font-size:13.5px;color:var(--c-text-muted);margin:0 0 20px;line-height:1.5} .friende-premium-modal-actions{display:flex;flex-direction:column;gap:8px} .friende-premium-modal-upgrade{width:100%;padding:11px;border:none;border-radius:12px;font-weight:700;font-size:14px;color:#3a2400;background:linear-gradient(135deg,#ffd76a,#ff9d1f);cursor:pointer;transition:transform .12s} .friende-premium-modal-upgrade:hover{transform:translateY(-1px)} .friende-premium-modal-cancel{width:100%;padding:10px;border:none;border-radius:12px;font-weight:600;font-size:13.5px;color:var(--c-text-muted);background:transparent;cursor:pointer} .friende-premium-modal-cancel:hover{background:var(--c-surface-2)} .friende-mobile-nav{display:none} .friende-search{height:40px;border-radius:999px;border:1px solid var(--c-border);background:var(--c-surface-2);padding:0 16px;outline:none;color:var(--c-text);width:260px} .friende-search:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 12%,transparent)} .friende-section-title{font-size:15px;font-weight:700;color:var(--c-text);margin-bottom:12px} .friende-stat{padding:14px;border-radius:14px;background:var(--c-surface-2);border:1px solid var(--c-border)} .friende-dropdown{position:absolute;right:0;top:48px;width:360px;max-width:calc(100vw - 24px);background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.18);overflow:hidden} @media(max-width:1100px){ .friende-app-shell{grid-template-columns:220px minmax(0,1fr)} /* FIX: rightbar (e.g. profile's About/Manage/Monetization card) used to be display:none below 1100px — its content was simply unreachable on tablet/mobile. Now it drops below the two columns and spans full width instead of disappearing. */ .friende-rightbar{grid-column:1/-1;position:static!important;height:auto!important;overflow:visible!important;display:grid!important;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:4px} .friende-search{width:220px} } @media(max-width:820px){ .friende-app-shell{display:block;padding:10px 12px 82px} .friende-sidebar{display:none} /* FIX: on phones the rightbar cards stack in one column, full width, just like they would naturally read on mobile — not a squeezed sticky desktop column anymore. */ .friende-rightbar{display:flex!important;flex-direction:column;gap:12px;margin-top:16px} .friende-mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:64px;background:color-mix(in srgb,var(--c-surface) 96%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--c-border);justify-content:space-around;padding:7px 8px} .friende-mobile-nav a,.friende-mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;font-size:10px;color:var(--c-text-muted);background:none;border:0} .friende-mobile-nav a.active{color:var(--c-primary)} .friende-topbar-inner{padding-left:12px!important;padding-right:12px!important} .friende-search{display:none} .friende-hide-mobile{display:none!important} /* Mobile "More" sheet — full nav list (same items the desktop left sidebar has, Monetization included) in a clean, tappable grid. */ .friende-more-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:60} .friende-more-sheet{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:71;width:min(88vw,360px);height:100dvh;max-height:none;overflow-y:auto;background:var(--c-surface);border-radius:24px 0 0 24px;box-shadow:-18px 0 50px rgba(15,23,42,.28);padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 22px);} .friende-more-sheet .friende-more-handle{width:40px;height:4px;border-radius:999px;background:var(--c-border);margin:8px auto 14px} .friende-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .friende-more-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;font-size:11px;font-weight:600;color:var(--c-text);text-align:center} .friende-more-grid a:active{background:var(--c-surface-2)} .friende-more-grid .friende-more-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--c-surface-2)} } @media(max-width:520px){.friende-card{border-radius:12px}.friende-story{min-width:76px;height:116px}} /* ================================================================ Admin panel dark-mode safety net. Admin pages use plain Tailwind utility classes (bg-white, bg-gray-*, text-gray-*, border-gray-*, bg-indigo-*) rather than the friende-* theme-var system. These overrides make that existing markup adapt correctly when the admin panel is switched to dark mode, instead of staying stuck as light-only white boxes. ================================================================ */ html.dark [class*="admin-"], html.dark .friende-admin-scope { color-scheme: dark; } html.dark body:has(> div > aside) .bg-white, html.dark body:has(> div > aside) [class*="bg-white "], html.dark body:has(> div > aside) [class*=" bg-white"] { background-color: var(--c-surface) !important; } html.dark body:has(> div > aside) [class*="bg-gray-50"] { background-color: var(--c-surface-2) !important; } html.dark body:has(> div > aside) [class*="bg-gray-100"] { background-color: var(--c-surface-2) !important; } html.dark body:has(> div > aside) [class*="bg-gray-900"] { background-color: var(--c-surface) !important; color: var(--c-text) !important; } html.dark body:has(> div > aside) [class*="text-gray-900"], html.dark body:has(> div > aside) [class*="text-gray-800"], html.dark body:has(> div > aside) [class*="text-gray-700"] { color: var(--c-text) !important; } html.dark body:has(> div > aside) [class*="text-gray-600"], html.dark body:has(> div > aside) [class*="text-gray-500"], html.dark body:has(> div > aside) [class*="text-gray-400"] { color: var(--c-text-muted) !important; } html.dark body:has(> div > aside) [class*="border-gray-"] { border-color: var(--c-border) !important; } html.dark body:has(> div > aside) [class*="divide-gray-"] > * + * { border-color: var(--c-border) !important; } html.dark body:has(> div > aside) [class*="bg-indigo-600"], html.dark body:has(> div > aside) [class*="bg-indigo-700"] { background-color: var(--c-primary) !important; } html.dark body:has(> div > aside) [class*="text-indigo-600"], html.dark body:has(> div > aside) [class*="text-indigo-700"] { color: var(--c-primary) !important; } /* ================================================================ Status / Stories — FB/IG-style tray + full-screen viewer. Namespaced under .friende-status-* so nothing existing is touched. ================================================================ */ /* Upload-requirements notice shown at the top of the "New Status" composer — plain-English rules (video length cap, daily upload cap, lifetime) so the limit is clear before the user even picks a file. */ .friende-status-rules{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:12px;padding:10px 14px;margin-bottom:12px} .friende-status-rules-title{font-size:12px;font-weight:700;color:var(--c-text);margin:0 0 4px} .friende-status-rules ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px} .friende-status-rules li{font-size:12px;color:var(--c-text-muted);line-height:1.45} .friende-status-rules li strong{color:var(--c-text)} .friende-status-tray{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px;scroll-snap-type:x proximity} .friende-status-tray::-webkit-scrollbar{display:none} .friende-status-bubble{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:68px;flex-shrink:0;position:relative;background:none;border:0;cursor:pointer;scroll-snap-align:start} .friende-status-ring{width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:2.5px;flex-shrink:0;transition:transform .2s ease,box-shadow .2s ease} .friende-status-bubble:hover .friende-status-ring,.friende-status-bubble:focus-visible .friende-status-ring{transform:scale(1.07)} .friende-status-ring-unseen{background:linear-gradient(135deg,#f97316,#ec4899,#8b5cf6)} .friende-status-ring-unseen.is-unseen{animation:friende-ring-pulse 2.4s ease-in-out infinite} @keyframes friende-ring-pulse{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.28)}50%{box-shadow:0 0 0 5px rgba(236,72,153,0)}} .friende-status-ring-seen{background:var(--c-border)} .friende-status-ring-mine{background:linear-gradient(135deg,var(--c-primary),var(--c-accent))} .friende-status-ring-add{background:var(--c-surface-2);border:2px dashed var(--c-border)} .friende-status-avatar-wrap{width:100%;height:100%;border-radius:999px;overflow:hidden;border:2.5px solid var(--c-surface);position:relative;background:var(--c-surface-2)} .friende-status-avatar{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} .friende-status-bubble:hover .friende-status-avatar{transform:scale(1.05)} .friende-status-plus{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:999px;background:var(--c-primary);color:var(--c-primary-text);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;border:2px solid var(--c-surface)} .friende-status-name{font-size:11.5px;font-weight:600;color:var(--c-text-muted);max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center} /* Facebook-style "new status" blink: the name under an unseen bubble pulses in the accent color instead of sitting static/muted, so an unread status reads as attention-grabbing at a glance, not just the ring around the avatar. */ .friende-status-name.is-unseen{animation:friende-name-blink 1.6s ease-in-out infinite} @keyframes friende-name-blink{0%,100%{color:var(--c-text-muted);opacity:1}50%{color:var(--c-primary);opacity:.55}} .friende-status-count{position:absolute;top:-2px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--c-primary);color:var(--c-primary-text);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--c-surface)} /* ── Discover status grid — Facebook-style scrollable feed of OTHER users' public Status, shown below the existing tray. Infinite-scroll only (window.friendseInfiniteScroll), no pagination controls. Grid columns step up with viewport width; cards stay a 9:16 story shape at every size so it never looks cramped on mobile. ────────────────────── */ .friende-status-feed-title{margin:18px 0 10px} .friende-status-feed-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media (min-width:480px){.friende-status-feed-grid{grid-template-columns:repeat(3,1fr)}} @media (min-width:768px){.friende-status-feed-grid{grid-template-columns:repeat(4,1fr);gap:14px}} @media (min-width:1100px){.friende-status-feed-grid{grid-template-columns:repeat(5,1fr)}} .friende-feed-status-card{position:relative;display:block;border-radius:12px;overflow:hidden;background:var(--c-surface-2);aspect-ratio:9/16;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease} .friende-feed-status-card:hover,.friende-feed-status-card:focus-visible{transform:translateY(-3px) scale(1.015);box-shadow:0 8px 20px rgba(0,0,0,.22)} .friende-feed-status-media{position:absolute;inset:0;display:block} .friende-feed-status-thumb{width:100%;height:100%;object-fit:cover;display:block} .friende-feed-status-play{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center} .friende-feed-status-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:20px 8px 8px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0))} .friende-feed-status-avatar{width:26px;height:26px;border-radius:999px;border:2px solid #fff;object-fit:cover;flex-shrink:0} .friende-feed-status-info{display:flex;flex-direction:column;min-width:0;line-height:1.25} .friende-feed-status-name{color:#fff;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .friende-feed-status-views{color:rgba(255,255,255,.85);font-size:10.5px;font-weight:600} .friende-feed-status-empty{grid-column:1/-1;text-align:center;padding:24px 8px} .friende-status-feed-grid .fp-infinite-sentinel,.friende-status-feed-grid .fp-infinite-end{grid-column:1/-1} /* Story viewer — now rendered inside the normal site layout (sidebar + footer visible around it). It sits inside a full-width "stage" so there is never plain dead space beside it: a softly blurred, oversized copy of the exact same media fills the whole stage, with the sharp, always uncropped media centered on top — the same trick FB/IG use for stories whose aspect ratio doesn't match the frame. */ /* Height comes from --friende-stage-h, set by setupStageHeight() in show.blade.php from the stage's *actual* measured position on the page (topbar height, shell padding, whatever they really render as — no more guessing with vh). The vh values here are only a same-paint fallback for the instant before that JS runs, or if JS is disabled. */ /* ---------------------------------------------------------------- Phase 14 — Reels/Stories player rebuilt as an OVERLAY layout, the same structure FB/IG/TikTok actually use: the media is a single absolutely-positioned layer that fills 100% of the frame, and every piece of chrome (progress bar, header, caption, right-side action rail, comments) floats ON TOP of it instead of being a stacked flex sibling. The old stacked layout (header + stats + media + caption + reactions + comments + footer all sharing one column's height) is what made the actual video/photo shrink to a small box — each extra row of UI ate into the flex:1 media area. Overlaying the chrome fixes that at the root instead of tweaking sizes. Duplicate views count (shown once in the top stats pill, again as text in the old footer) is also gone — there is exactly one views readout now, and the owner's "Seen by" list reuses that same live-bound number. */ .friende-viewer-stage{position:relative;width:100%;height:var(--friende-stage-h, 86vh);display:flex;align-items:center;justify-content:center;border-radius:20px;overflow:hidden;background:#050505;isolation:isolate} /* 820px matches the site's real mobile breakpoint (.friende-app-shell switches to the fixed bottom-nav layout at 820px, see above). */ @media(min-width:821px){.friende-viewer-stage{height:var(--friende-stage-h, 88vh)}} @media(max-width:820px){.friende-viewer-stage{border-radius:0;margin:0 -12px;width:calc(100% + 24px);height:var(--friende-stage-h, calc(100dvh - 132px))}} .friende-viewer-stage-bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(46px) brightness(.45) saturate(1.25);transform:scale(1.05);z-index:0;pointer-events:none} .friende-viewer-stage-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.1),rgba(0,0,0,.72));z-index:1;pointer-events:none} /* The frame itself: fills the stage's full height first (like a real Reels/Story player), width is derived from the 9:16 ratio — so on a short-but-wide laptop window it's still tall and narrow like FB's own player, and on mobile it goes edge-to-edge exactly like TikTok/IG/FB Reels. max-width/max-height keep it from ever overflowing the stage in either dimension. */ .friende-viewer{position:relative;z-index:2;height:100%;width:100%;max-width:calc(var(--friende-stage-h, 86vh) * 9 / 16);aspect-ratio:9/16;max-height:100%;margin:0 auto;background:#000;overflow:hidden;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5); /* Header wrap/overlap fixes below used to key off @media(max-width:...) i.e. the BROWSER WINDOW width. But this element's own width is capped by the stage HEIGHT (aspect-ratio 9/16 of ~86vh), so on a normal desktop it renders ~300-400px wide while the window itself is huge — the window-width media queries never fired, so the Follow pill kept overlapping the icon row. A container query looks at THIS element's actual rendered width instead, so it fires correctly on desktop too. */ container-type:inline-size;container-name:friende-viewer;} @media(max-width:820px){.friende-viewer{width:100%;height:100%;max-width:100%;border-radius:0;box-shadow:none}} /* Media layer — fills the ENTIRE frame, no longer a flex sibling competing for space. A blurred, oversized copy of the same image/ video paints the frame edge-to-edge first (identical trick to the stage backdrop, just scoped to the frame itself now), then the sharp foreground media sits centered on top at object-fit:contain so it is still never cropped — this is exactly how IG/TikTok fill a 9:16 frame with media that doesn't natively match that ratio. */ .friende-viewer-media{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden} .friende-viewer-media-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(38px) brightness(.55) saturate(1.2);transform:scale(1.05);z-index:1;pointer-events:none} .friende-viewer-media img,.friende-viewer-media video{position:relative;z-index:2;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain} .friende-viewer-tapzone{position:absolute;top:0;bottom:0;width:38%;z-index:10;cursor:pointer} /* Visible prev/next chevrons — sit above the invisible tap zones so there's always an obvious, clickable WhatsApp-style "go to next status" control, not just an invisible region a user has to guess about. */ .friende-viewer-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:15;width:34px;height:34px;border-radius:999px;background:rgba(0,0,0,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease;opacity:.75} .friende-viewer-nav-btn:hover{background:rgba(0,0,0,.5);opacity:1;transform:translateY(-50%) scale(1.06)} .friende-viewer-nav-btn:active{transform:translateY(-50%) scale(.94)} .friende-viewer-nav-prev{left:10px} .friende-viewer-nav-next{right:10px} @media(max-width:820px){.friende-viewer-nav-btn{width:30px;height:30px;font-size:17px;opacity:.6}} /* Top chrome — progress bar + header + stats — floats over the media with its own gradient so it stays readable regardless of what's underneath, same as every reels-style player. */ .friende-viewer-top{position:absolute;top:0;left:0;right:0;z-index:25;background:linear-gradient(to bottom,rgba(0,0,0,.65),rgba(0,0,0,.15) 65%,transparent);padding-bottom:6px} .friende-viewer-segments{display:flex;gap:4px;padding:10px 12px 0} .friende-viewer-segment{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.35);overflow:hidden} .friende-viewer-segment-fill{height:100%;width:0%;background:#fff;border-radius:999px} .friende-viewer-segment.is-done .friende-viewer-segment-fill{width:100%} .friende-viewer-segment.is-active .friende-viewer-segment-fill{animation:friende-viewer-progress linear forwards;animation-duration:var(--dur,6s)} @keyframes friende-viewer-progress{from{width:0%}to{width:100%}} .friende-viewer-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;color:#fff} .friende-viewer-menu-wrap{position:relative} .friende-viewer-menu{position:absolute;top:38px;right:0;min-width:170px;background:rgba(24,24,27,.97);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5)} .friende-viewer-menu button,.friende-viewer-menu a{display:block;width:100%;text-align:left;padding:10px 14px;font-size:13px;font-weight:600;color:#fff;background:transparent} .friende-viewer-menu button:hover,.friende-viewer-menu a:hover{background:rgba(255,255,255,.08)} .friende-viewer-menu .danger{color:#f87171} /* Single views readout — the ONLY place view count is shown now. */ .friende-viewer-stats{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 12px 2px;flex-wrap:wrap} .friende-viewer-stat{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;padding:4px 10px;white-space:nowrap} /* Owner-only "who viewed" preview — capped at 3 overlapping avatars plus a "+N" pill, never the full list, so it stays a clean single-line glance instead of a crowded wall of faces. */ .friende-viewer-viewers-stack{display:flex;align-items:center;padding:2px 8px 2px 2px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px} .friende-viewer-viewers-avatar{width:22px;height:22px;border-radius:999px;object-fit:cover;display:block;background:#222;box-shadow:0 0 0 1.5px rgba(0,0,0,.5);margin-left:-8px} .friende-viewer-viewers-avatar:first-child{margin-left:0} .friende-viewer-viewers-more{font-size:10px;font-weight:800;color:#fff;margin-left:2px} /* Figtree (the site's base font) has no emoji glyphs of its own, so any emoji sitting in a Figtree-font element rendered as a blank/tofu box on some systems. This appends real emoji fonts *after* Figtree. */ .friende-viewer-stat,.friende-viewer-reaction-btn,.friende-reaction-pill,.friende-viewer-rail-btn, .friende-editor-tool-btn,.friende-status-count,.friende-filter-chip{ font-family:var(--friende-font),'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif; } /* Right-hand vertical action rail — avatar / like / comment / share, TikTok & FB-Reels convention, floats over the media on both mobile and desktop so the media itself never has to shrink to make room. */ .friende-viewer-rail{position:absolute;right:8px;bottom:104px;z-index:32;display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:auto} .friende-viewer-rail-avatar{width:44px;height:44px;border-radius:999px;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);flex-shrink:0} .friende-viewer-rail-avatar img{width:100%;height:100%;object-fit:cover;display:block} .friende-viewer-rail-item{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative} .friende-viewer-rail-btn{width:46px;height:46px;border-radius:999px;background:rgba(0,0,0,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;transition:transform .15s ease,background .15s ease;border:1px solid rgba(255,255,255,.14)} .friende-viewer-rail-btn:hover{transform:scale(1.08);background:rgba(0,0,0,.5)} .friende-viewer-rail-btn:active{transform:scale(.94)} .friende-viewer-rail-btn.is-mine{background:var(--c-primary);border-color:var(--c-primary);color:#fff} .friende-viewer-rail-count{font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)} /* Reaction picker — pops up above the like button on the rail instead of eating a permanent row of frame height. */ .friende-reaction-picker{position:absolute;bottom:56px;right:0;display:flex;gap:6px;background:rgba(24,24,27,.97);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 8px;box-shadow:0 12px 30px rgba(0,0,0,.5)} .friende-viewer-reaction-btn{font-size:20px;width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;border:1px solid rgba(255,255,255,.15)} .friende-viewer-reaction-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.15)} .friende-viewer-reaction-btn.is-mine{background:var(--c-primary);border-color:var(--c-primary)} /* Per-emoji breakdown pills — "❤️ 12 😂 5", sits just above the caption block at bottom-left. */ .friende-reaction-summary{display:flex;flex-wrap:wrap;gap:6px;padding:0 92px 4px 12px;position:relative;z-index:20} .friende-reaction-pill{font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.4);border-radius:999px;padding:3px 9px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} /* Bottom chrome — username / caption / hashtags / location, floating over the media with its own gradient, room reserved on the right so it never runs under the action rail. */ .friende-viewer-bottom{position:absolute;left:0;right:0;bottom:0;z-index:20;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 55%,transparent 100%);padding:34px 92px 12px 12px} /* Top header now holds ONLY the icon cluster (mute/replay/expand/menu/ close) — no avatar/name/Follow, so it never has to fight for width. */ .friende-viewer-header--controls-only{justify-content:flex-end} /* Creator row — avatar + name + Follow, TikTok placement (bottom-left, above the caption). Given its own row so it never competes for width with the top icon cluster on a narrow player. */ .friende-viewer-bottom-user{display:flex;align-items:center;gap:8px;margin-bottom:8px} .friende-viewer-bottom-user-link{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden;color:inherit;text-decoration:none} .friende-viewer-bottom-user-avatar{display:inline-block;flex-shrink:0;width:34px;height:34px;border-radius:999px;overflow:hidden;border:1.5px solid rgba(255,255,255,.65)} .friende-viewer-bottom-user-avatar img{width:100%;height:100%;object-fit:cover;display:block} .friende-viewer-bottom-user-meta{min-width:0;flex:1;overflow:hidden;display:flex;flex-direction:column} .friende-viewer-bottom-user-name{font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5)} .friende-viewer-bottom-user-sub{font-size:11.5px;color:rgba(255,255,255,.75);line-height:1.2} .fs-follow-btn{flex-shrink:0;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;background:#1877f2;color:#fff;border:1px solid #1877f2} .fs-follow-btn.is-following{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)} .friende-viewer-caption-name{font-weight:700;font-size:13.5px;color:#fff} .friende-viewer-caption-text{font-size:13.5px;color:rgba(255,255,255,.92);margin-top:2px;line-height:1.35} /* TikTok-style caption limit: long captions are visually capped and fade out under a "More" toggle instead of running on forever over the video. Only applied (is-clamped) when the caption is actually long — see the $needsClamp check in status/show.blade.php. */ .friende-viewer-caption-block{position:relative} .friende-viewer-caption-block.is-clamped{max-height:56px;overflow:hidden} .friende-viewer-caption-block.is-clamped:after{content:'';position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(to top,rgba(0,0,0,.85),transparent)} .friende-viewer-caption-toggle{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:#fff;opacity:.82;background:transparent;border:0;padding:0} .friende-viewer-caption-toggle:hover{opacity:1;text-decoration:underline} /* Double-tap-to-like heart burst — TikTok/IG convention. Layered above the media, below the top/bottom chrome, ignores pointer events so it never blocks the tap zones underneath it. */ .friende-heartburst-layer{position:absolute;inset:0;z-index:18;display:flex;align-items:center;justify-content:center;pointer-events:none} .friende-heartburst{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(var(--tx,0),0) rotate(var(--rot,0deg));animation:friende-heartburst-pop .9s cubic-bezier(.17,.89,.32,1.28) forwards} .friende-heartburst-heart{font-size:64px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))} .friende-heartburst-brand{font-family:var(--friende-font),sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:0;animation:friende-heartburst-brand .9s ease forwards} @keyframes friende-heartburst-pop{0%{opacity:0;scale:0}18%{opacity:1;scale:1.15}32%{scale:.95}45%{scale:1.05}100%{opacity:0;scale:1;translate:0 -46px}} @keyframes friende-heartburst-brand{0%,25%{opacity:0}45%{opacity:.55}80%{opacity:.4}100%{opacity:0}} @media(prefers-reduced-motion:reduce){.friende-heartburst{animation:none;opacity:0}} .friende-viewer-hashtags{font-size:13px;color:#7dd3fc;margin-top:2px} .friende-viewer-location{font-size:11.5px;color:rgba(255,255,255,.65);margin-top:3px} .friende-viewer-share-feedback{font-size:11.5px;color:rgba(255,255,255,.8);margin-top:4px} /* Compact always-visible comment composer, pinned above the mobile-nav /frame edge — tapping the field (or the rail comment icon) opens the full comments drawer. */ /* Comments panel — see the "Story viewer fixes" block further down for the actual positioning rules (right-side sliding panel). Kept here: the per-comment bubble styling, which is orientation-independent. */ .friende-comment-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0} .friende-comment-avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;flex-shrink:0} .friende-comment-body{flex:1;min-width:0;background:rgba(255,255,255,.06);border-radius:14px;padding:8px 12px} .friende-comment-name{display:block;font-size:12.5px;font-weight:700;color:#fff} .friende-comment-text{display:block;font-size:13px;color:rgba(255,255,255,.9);margin-top:2px;word-break:break-word} /* Seen-by panel (owner only) — opened from the header menu. */ .friende-seenby-panel{position:absolute;inset:0;z-index:45;background:rgba(10,10,12,.96);backdrop-filter:blur(10px);display:flex;flex-direction:column;padding:16px} .friende-seenby-panel h3{color:#fff;font-size:15px;font-weight:700;margin-bottom:10px} .friende-seenby-panel .list{flex:1;overflow-y:auto} .friende-seenby-panel p{color:rgba(255,255,255,.85);font-size:13.5px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)} .friende-seenby-panel .empty{color:rgba(255,255,255,.5)} .friende-seenby-close{align-self:flex-end;color:rgba(255,255,255,.7);font-size:13px;font-weight:700;margin-top:10px} /* ================================================================ Status composer — Instagram-style photo editor (filters + text). Namespaced under .friende-editor-* so nothing existing is touched. Edits are baked into the actual image file client-side before upload — no new backend fields, so nothing else in the pipeline (tray thumbnail, viewer, download) needs to know this exists. ================================================================ */ .friende-editor-wrap{position:relative;border-radius:14px;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none} .friende-editor-img{display:block;width:100%;max-height:60vh;object-fit:contain;background:#000;pointer-events:none} .friende-editor-text{position:absolute;transform:translate(-50%,-50%);font-weight:800;line-height:1.15;text-align:center;white-space:pre-wrap;max-width:88%;cursor:grab;padding:4px 6px;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.25);touch-action:none} .friende-editor-text:active{cursor:grabbing} .friende-editor-text.is-dragging{outline:1.5px dashed rgba(255,255,255,.65);outline-offset:4px;border-radius:6px} .friende-editor-toolbar{display:flex;align-items:center;gap:8px;padding:8px 2px;flex-wrap:wrap} .friende-editor-tool-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid var(--c-border);background:var(--c-surface-2);color:var(--c-text);transition:.15s} .friende-editor-tool-btn:hover{background:var(--c-border)} .friende-editor-tool-btn.is-active{background:var(--c-primary);color:var(--c-primary-text);border-color:var(--c-primary)} .friende-editor-swatch{width:22px;height:22px;border-radius:999px;border:2px solid var(--c-surface);box-shadow:0 0 0 1px var(--c-border);flex-shrink:0;transition:transform .15s} .friende-editor-swatch.is-active{transform:scale(1.18);box-shadow:0 0 0 2px var(--c-primary)} .friende-editor-textbox{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:12px;padding:10px;margin-top:8px} .friende-editor-size-btn{width:26px;height:26px;border-radius:999px;background:var(--c-surface-2);border:1px solid var(--c-border);font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-text)} .friende-filter-strip{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 4px;scrollbar-width:none;scroll-snap-type:x proximity} .friende-filter-strip::-webkit-scrollbar{display:none} .friende-filter-chip{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;background:none;border:0;cursor:pointer;scroll-snap-align:start} .friende-filter-thumb{width:60px;height:60px;border-radius:10px;overflow:hidden;border:2px solid transparent;transition:border-color .15s,transform .15s} .friende-filter-thumb img{width:100%;height:100%;object-fit:cover;display:block} .friende-filter-chip.is-active .friende-filter-thumb{border-color:var(--c-primary);transform:scale(1.04)} .friende-filter-chip span{font-size:10.5px;font-weight:600;color:var(--c-text-muted);max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .friende-filter-chip.is-active span{color:var(--c-primary);font-weight:800} @media(max-width:480px){.friende-editor-img{max-height:48vh}.friende-filter-thumb{width:52px;height:52px}} /* ================================================================ Video upload progress — "water fill" bar. A liquid gradient fills left-to-right as chunks upload, with a moving highlight sweep for a flowing-water feel. Paused state (connection lost) swaps to an amber tone and stops the sweep animation, so it's visually obvious the bar isn't stuck/broken — it's just waiting for the connection to return, and resumes filling from the same % once it does. ================================================================ */ .friende-upload-progress{margin-top:2px} .friende-upload-progress-track{position:relative;width:100%;height:14px;border-radius:999px;background:var(--c-surface-2);border:1px solid var(--c-border);overflow:hidden} .friende-upload-progress-fill{position:relative;height:100%;border-radius:999px;min-width:14px;background:linear-gradient(90deg,#0ea5e9,#2563eb 45%,#38bdf8);background-size:200% 100%;transition:width .35s cubic-bezier(.4,0,.2,1);animation:friende-water-flow 1.8s linear infinite;overflow:hidden} .friende-upload-progress-wave{position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.45) 45%,transparent 65%);width:60%;animation:friende-water-sweep 1.6s ease-in-out infinite} @keyframes friende-water-flow{0%{background-position:0% 50%}100%{background-position:200% 50%}} @keyframes friende-water-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}} .friende-upload-progress-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--c-text-muted)} .friende-upload-progress-pct{font-weight:800;color:var(--c-primary);font-variant-numeric:tabular-nums} /* Paused (offline) state — bar stops animating, turns amber, label makes clear this is a pause-and-resume, not a stall or failure. */ .friende-upload-progress.is-paused .friende-upload-progress-fill{background:#f59e0b;animation:none} .friende-upload-progress.is-paused .friende-upload-progress-wave{animation:none;opacity:0} .friende-upload-progress.is-paused .friende-upload-progress-meta{color:#d97706} @media (prefers-reduced-motion: reduce){.friende-upload-progress-fill,.friende-upload-progress-wave{animation:none}} /* ================================================================ Profile page — Status grid (mirrors the regular Posts grid FB shows on a profile: thumbnails of the user's active Status uploads, with a delete control for the owner). ================================================================ */ .friende-profile-status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px} .friende-profile-status-item{position:relative} .friende-profile-status-thumb{display:block;position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#0b0b0d;border:1px solid var(--c-border)} .friende-profile-status-thumb img,.friende-profile-status-thumb video{width:100%;height:100%;object-fit:cover;display:block} .friende-profile-status-type{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center} .friende-profile-status-stats{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);display:flex;gap:8px} .friende-profile-status-delete{position:absolute;top:6px;left:6px;z-index:2} .friende-profile-status-delete button{width:26px;height:26px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2)} .friende-profile-status-delete button:hover{background:#dc2626} /* ================================================================ Story viewer fixes: 1) Next/Prev chevrons were sharing screen space with the right action rail (like/comment/share). Since the rail sits higher in the stacking order, it silently swallowed clicks meant for the Next button whenever the two overlapped (which happened on most phone-height screens). Moving Next clear of the rail's horizontal footprint — instead of relying on z-index alone — fixes this for good, on every screen size. 2) Comments become a right-side sliding panel (TikTok/FB-style "same panel you comment in", not a bottom sheet) instead of a drawer that slides up from the bottom. ================================================================ */ .friende-viewer-nav-btn{z-index:26} .friende-viewer-nav-next{right:66px} @media(max-width:820px){.friende-viewer-nav-next{right:60px}} .friende-comments-backdrop{position:absolute;inset:0;z-index:35;background:rgba(0,0,0,.35)} .friende-comments-drawer{position:absolute;top:0;right:0;bottom:0;left:auto;z-index:40;width:min(360px,100%);height:100%;background:rgba(18,18,20,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:0;border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;box-shadow:-12px 0 40px rgba(0,0,0,.5)} .friende-comments-drawer.is-open{transform:translateX(0)} .friende-comments-drawer-title{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;border-bottom:1px solid rgba(255,255,255,.1)} .friende-comments-drawer-title h3{font-size:14px;font-weight:700;color:#fff} .friende-comments-drawer-title button{color:rgba(255,255,255,.7);font-size:18px;line-height:1} .friende-comments{flex:1;overflow-y:auto;padding:10px 14px} .friende-comments-empty{font-size:13px;color:rgba(255,255,255,.55);text-align:center;padding:24px 0} .friende-comments-drawer-composer{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.1)} .friende-comments-drawer-composer input{flex:1;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:13px;padding:10px 14px;color:#fff} .friende-comments-drawer-composer input::placeholder{color:rgba(255,255,255,.55)} .friende-comments-drawer-composer button{color:var(--c-primary,#3b82f6);font-weight:800;font-size:13px;padding:0 6px} @media(max-width:520px){.friende-comments-drawer{width:100%}} /* ================================================================ STATUS PLAYER — FINAL INTERACTION / MOBILE POLISH Namespaced only to the status viewer. ================================================================ */ .friende-viewer-media{isolation:isolate;touch-action:manipulation} .friende-viewer-media-bg{pointer-events:none!important;user-select:none;-webkit-user-select:none} .friende-viewer-media>img:not(.friende-viewer-media-bg), .friende-viewer-media>video:not(.friende-viewer-media-bg){ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; max-width:none!important;max-height:none!important;object-fit:contain!important; object-position:center center!important;background:#000;z-index:3!important; display:block; } .friende-viewer-tapzone{z-index:6!important;width:30%!important;pointer-events:auto!important} .friende-viewer-tapzone-prev{left:0!important;right:auto!important} .friende-viewer-tapzone-next{right:0!important;left:auto!important} .friende-viewer-center-tap{position:absolute;top:18%;bottom:18%;left:30%;right:30%;z-index:7;cursor:pointer;touch-action:manipulation} .friende-heartburst-layer{z-index:18!important} .friende-viewer-nav-btn{z-index:60!important;pointer-events:auto!important} .friende-viewer-nav-prev{left:12px!important} .friende-viewer-nav-next{right:62px!important} .friende-viewer-top{z-index:70!important;pointer-events:none} .friende-viewer-top button, .friende-viewer-top a, .friende-viewer-top .friende-viewer-menu-wrap, .friende-viewer-top .friende-viewer-stats{pointer-events:auto} .friende-viewer-menu-wrap{z-index:100!important} .friende-viewer-more-btn{position:relative;z-index:101!important;display:inline-flex!important;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto!important} .friende-viewer-more-btn:active{transform:scale(.94)} .friende-viewer-menu{z-index:200!important;pointer-events:auto!important;min-width:185px!important} .friende-viewer-menu form{margin:0} .friende-viewer-menu button{cursor:pointer!important} .friende-viewer-stats{position:relative;z-index:90} .friende-viewer-stat{box-shadow:0 3px 14px rgba(0,0,0,.22)} .friende-viewer-rail{z-index:65!important} .friende-viewer-rail-btn{cursor:pointer!important;pointer-events:auto!important} .friende-viewer-bottom{z-index:50!important} /* Compact share sheet: never use a giant browser-sized panel on phones. */ .friende-share-backdrop{position:absolute;inset:0;z-index:110;background:rgba(0,0,0,.48);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .friende-share-sheet{position:absolute;z-index:120;left:50%;bottom:22px;transform:translateX(-50%);width:min(430px,calc(100% - 28px));background:rgba(20,20,23,.97);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:15px;box-shadow:0 20px 70px rgba(0,0,0,.55);color:#fff} .friende-share-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .friende-share-title div{display:flex;flex-direction:column;gap:3px;min-width:0} .friende-share-title strong{font-size:15px;font-weight:800} .friende-share-title span{font-size:11px;color:rgba(255,255,255,.58)} .friende-share-title>button{width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .friende-share-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .friende-share-actions button{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:11px 5px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.055);color:#fff;cursor:pointer;transition:transform .15s ease,background .15s ease} .friende-share-actions button:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)} .friende-share-actions button:active{transform:scale(.96)} .friende-share-actions span{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.09);font-size:18px;font-weight:800} .friende-share-actions small{font-size:10.5px;font-weight:700;white-space:nowrap} .friende-share-status{text-align:center;margin:10px 0 0;font-size:11.5px;color:rgba(255,255,255,.72)} /* Comments: comfortable one-hand mobile sheet and keyboard-safe composer. */ .friende-comments-backdrop{z-index:110!important} .friende-comments-drawer{z-index:120!important} .friende-comments-drawer-composer{padding-bottom:max(10px,env(safe-area-inset-bottom))!important} .friende-comments-drawer-composer input{min-width:0;height:42px;outline:none} .friende-comments-drawer-composer button{min-width:48px;height:38px;border-radius:999px;background:rgba(59,130,246,.16);display:flex;align-items:center;justify-content:center} @media(max-width:820px){ .friende-viewer-nav-prev{left:8px!important} .friende-viewer-nav-next{right:58px!important} .friende-share-sheet{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 20px);border-radius:18px;padding:13px} .friende-share-actions{gap:7px} .friende-share-actions button{padding:10px 3px;border-radius:13px} .friende-viewer-rail{right:7px!important;bottom:116px!important;gap:13px!important} .friende-viewer-rail-btn{width:43px!important;height:43px!important;font-size:20px!important} .friende-viewer-bottom{padding-right:78px!important;padding-bottom:14px!important} } @media(max-width:380px){ .friende-viewer-rail{right:5px!important;gap:10px!important} .friende-viewer-rail-btn{width:40px!important;height:40px!important;font-size:19px!important} .friende-viewer-nav-next{right:52px!important} .friende-share-actions small{font-size:9.5px} } /* ================================================================ FRIENDSE STATUS PLAYER — FINAL POLISH / RE-OPEN SAFE UI Scoped to the status viewer only. No global page layout changes. ================================================================ */ .friende-viewer-stage{min-height:0;isolation:isolate} .friende-viewer{transition:width .22s ease,height .22s ease,border-radius .22s ease,box-shadow .22s ease} .friende-viewer-header{gap:8px} .friende-viewer-header>a{min-width:0;max-width:52%} .friende-viewer-header>a img{display:block} .friende-viewer-more-btn,.friende-viewer-expand-btn{flex:0 0 auto;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.38);box-shadow:0 4px 18px rgba(0,0,0,.2);transition:transform .16s ease,background .16s ease,opacity .16s ease} .friende-viewer-more-btn:hover,.friende-viewer-expand-btn:hover{background:rgba(0,0,0,.58);transform:scale(1.05)} .friende-viewer-more-btn:focus-visible,.friende-viewer-expand-btn:focus-visible,.friende-viewer-nav-btn:focus-visible,.friende-viewer-rail-btn:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:2px} .friende-viewer-media{background:#050505} .friende-viewer-media>video:not(.friende-viewer-media-bg),.friende-viewer-media>img:not(.friende-viewer-media-bg){object-fit:contain!important;object-position:center!important} .friende-viewer-tapzone,.friende-viewer-center-tap{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .friende-viewer-tapzone{width:29%!important} .friende-viewer-center-tap{left:29%!important;right:29%!important} .friende-viewer-nav-prev{left:10px!important} .friende-viewer-nav-next{right:62px!important} .friende-viewer-rail{right:9px!important;bottom:104px!important;gap:15px!important} .friende-viewer-rail-item{min-width:44px} .friende-viewer-rail-btn{box-shadow:0 5px 18px rgba(0,0,0,.24);-webkit-tap-highlight-color:transparent} .friende-viewer-rail-count{min-width:24px;text-align:center} .friende-viewer-bottom{padding-right:84px!important} .friende-viewer-caption-name{margin-bottom:1px;text-shadow:0 2px 8px rgba(0,0,0,.5)} .friende-viewer-caption-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word} .friende-viewer-hashtags{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word} .friende-heartburst{will-change:transform,opacity} .friende-heartburst-name{font-size:12px;font-weight:800;color:rgba(255,255,255,.94);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.55);opacity:0;animation:friende-heartburst-name .9s ease forwards} @keyframes friende-heartburst-name{0%,28%{opacity:0;transform:translateY(4px)}48%{opacity:.9;transform:translateY(0)}82%{opacity:.55}100%{opacity:0;transform:translateY(-10px)}} .friende-share-sheet{max-height:min(360px,calc(100% - 24px));overflow:auto} .friende-share-actions button{min-height:76px} .friende-comments-drawer{overscroll-behavior:contain} .friende-comments-drawer-composer{position:relative;z-index:2;background:rgba(18,18,20,.98)} .friende-comments-drawer-composer input:focus{border-color:rgba(255,255,255,.42);box-shadow:0 0 0 3px rgba(255,255,255,.06)} .friende-viewer-menu{right:0;top:42px} .friende-viewer-menu button{cursor:pointer;min-height:42px} /* Desktop expanded player. Mobile intentionally keeps the normal responsive in-page status experience. */ body.friende-status-expanded-open{overflow:hidden} body.friende-status-expanded-open::before{content:"";position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} .friende-viewer.is-expanded{position:fixed!important;z-index:9999!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(92vw,520px)!important;height:min(94vh,925px)!important;max-width:none!important;max-height:94vh!important;border-radius:20px!important;box-shadow:0 35px 110px rgba(0,0,0,.7)!important} @media(max-width:820px){ body.friende-status-expanded-open{overflow:auto} body.friende-status-expanded-open::before{display:none} .friende-viewer.is-expanded{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important;box-shadow:none!important} .friende-viewer-stage{height:var(--friende-stage-h,calc(100dvh - 132px));min-height:0} .friende-viewer{width:100%!important;height:100%!important;max-width:100%!important} .friende-viewer-header{padding-left:10px;padding-right:10px} .friende-viewer-header>a{max-width:48%} .friende-viewer-nav-next{right:57px!important} .friende-viewer-rail{right:7px!important;bottom:112px!important;gap:12px!important} .friende-viewer-rail-btn{width:42px!important;height:42px!important;font-size:20px!important} .friende-viewer-bottom{padding-right:74px!important;padding-left:11px!important;padding-bottom:13px!important} .friende-viewer-caption-text{font-size:13px;line-height:1.3} .friende-share-sheet{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 18px);padding:12px;border-radius:18px} .friende-share-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .friende-share-actions button{min-height:70px;padding:8px 2px} .friende-share-actions small{font-size:9.5px} } @media(max-width:380px){ .friende-viewer-rail{right:5px!important;gap:9px!important} .friende-viewer-rail-btn{width:39px!important;height:39px!important;font-size:18px!important} .friende-viewer-nav-next{right:51px!important} .friende-viewer-bottom{padding-right:68px!important} .friende-viewer-header>a{max-width:45%} .friende-share-actions button{min-height:66px} .friende-share-actions small{font-size:8.8px} } @media(prefers-reduced-motion:reduce){ .friende-viewer,.friende-heartburst,.friende-heartburst-name{animation:none!important;transition:none!important} } /* ================================================================ FRIENDSE STATUS PLAYER — FINAL STABILITY / TOUCH LAYER Scoped only to the Status viewer. ================================================================ */ .friende-viewer-media > video:not(.friende-viewer-media-bg), .friende-viewer-media > img:not(.friende-viewer-media-bg){ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; max-width:100%!important;max-height:100%!important;object-fit:contain!important; object-position:center center!important;display:block!important;z-index:3!important; } .friende-viewer-center-tap{ appearance:none!important;-webkit-appearance:none!important;border:0!important;padding:0!important; margin:0!important;background:transparent!important;outline:0!important;z-index:12!important; cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; } .friende-viewer-nav-btn{z-index:80!important;pointer-events:auto!important} .friende-viewer-nav-prev{left:10px!important} .friende-viewer-nav-next{right:64px!important} .friende-viewer-top{z-index:90!important;pointer-events:none} .friende-viewer-top button,.friende-viewer-top a,.friende-viewer-top .friende-viewer-menu-wrap,.friende-viewer-top .friende-viewer-stats{pointer-events:auto!important} .friende-viewer-menu-wrap{z-index:110!important;pointer-events:auto!important} .friende-viewer-more-btn,.friende-viewer-expand-btn{pointer-events:auto!important;position:relative;z-index:115!important} .friende-viewer-menu{z-index:120!important;pointer-events:auto!important} .friende-viewer-rail{z-index:85!important;pointer-events:auto!important} .friende-viewer-rail-btn{pointer-events:auto!important;touch-action:manipulation!important} .friende-viewer-bottom{z-index:75!important} .friende-heartburst-layer{z-index:30!important;pointer-events:none!important} .friende-heartburst{pointer-events:none!important} .friende-share-backdrop{z-index:150!important} .friende-share-sheet{z-index:160!important} .friende-comments-backdrop{z-index:170!important} .friende-comments-drawer{z-index:180!important} .friende-seenby-panel{z-index:190!important} @media(max-width:820px){ .friende-viewer-stage{height:var(--friende-stage-h,calc(100dvh - 132px))!important;min-height:0!important} .friende-viewer{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important} .friende-viewer-media{inset:0!important} .friende-viewer-media > video:not(.friende-viewer-media-bg), .friende-viewer-media > img:not(.friende-viewer-media-bg){width:100%!important;height:100%!important;object-fit:contain!important} .friende-viewer-nav-next{right:58px!important} .friende-viewer-rail{right:7px!important;bottom:108px!important;gap:12px!important} .friende-share-sheet{left:50%!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:min(420px,calc(100% - 18px))!important;max-height:calc(100% - 24px)!important} } @media(max-width:380px){ .friende-viewer-nav-next{right:52px!important} .friende-viewer-rail{right:5px!important;gap:9px!important} } /* ================================================================ STATUS PLAYER v2 — New feature CSS ================================================================ */ /* Speed toast */ #fs-speed-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;font-weight:800;font-size:15px;padding:9px 20px;border-radius:999px;pointer-events:none;z-index:80;opacity:0;transition:opacity .2s;white-space:nowrap} #fs-speed-toast.show{opacity:1} /* Hold-to-pause overlay */ #fs-hold-overlay{position:absolute;inset:0;z-index:60;pointer-events:none;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s} #fs-hold-overlay.show{opacity:1} #fs-hold-overlay svg{width:52px;height:52px;fill:#fff;opacity:.9;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))} /* Notify toast */ #fs-notify{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:rgba(15,15,18,.95);color:#fff;font-size:12.5px;font-weight:700;padding:7px 18px;border-radius:999px;pointer-events:none;z-index:150;white-space:nowrap;opacity:0;transition:opacity .18s;border:1px solid rgba(255,255,255,.13)} #fs-notify.show{opacity:1} /* Scrubber bar */ #fs-scrubber-wrap{position:absolute;bottom:0;left:0;right:0;z-index:55;padding:0 0 3px;display:none} #fs-scrubber-wrap.show{display:block} #fs-scrubber{width:100%;height:3px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.3);outline:none;cursor:pointer;display:block} #fs-scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:999px;background:#fff;cursor:pointer;margin-top:0} #fs-scrubber::-moz-range-thumb{width:13px;height:13px;border-radius:999px;background:#fff;border:0;cursor:pointer} /* Like pop */ @keyframes fs-like-pop{0%{transform:scale(1)}40%{transform:scale(1.42)}70%{transform:scale(.9)}100%{transform:scale(1)}} .fs-like-popping{animation:fs-like-pop .35s cubic-bezier(.22,1,.36,1) both} /* Owner badge */ .fs-owner-badge{font-size:10px;background:rgba(59,130,246,.25);color:#93c5fd;border-radius:999px;padding:1px 7px;font-weight:700;margin-left:5px} /* Paused progress bar */ .fs-paused .friende-viewer-segment.is-active .friende-viewer-segment-fill{animation-play-state:paused!important} /* Status composer — location picker dropdown */ .friende-location-dropdown{position:absolute;left:0;right:0;top:100%;z-index:200;border-radius:10px;overflow:hidden;border:1px solid var(--c-border);background:var(--c-surface);box-shadow:0 8px 24px rgba(0,0,0,.25);max-height:200px;overflow-y:auto} .friende-location-option{display:block;width:100%;text-align:left;padding:9px 14px;font-size:13px;color:var(--c-text);background:transparent;border:0;cursor:pointer;border-bottom:1px solid var(--c-border)} .friende-location-option:hover,.friende-location-option.is-highlighted{background:rgba(59,130,246,.12);color:var(--c-primary)} /* Visibility caption */ .friende-viewer-visibility-badge{font-size:10px;background:rgba(0,0,0,.45);color:rgba(255,255,255,.75);border-radius:999px;padding:2px 8px;border:1px solid rgba(255,255,255,.15)} /* ================================================================ FRIENDSE STATUS PLAYER v9 — COMPLETE LAYOUT FIX Fixes: button sizes, overlap, alignment, fullscreen blur, smooth scroll, right rail single profile, mobile/pc responsive ================================================================ */ /* ── STAGE: full viewport, black bg, no overflow ─────────────── */ #fs-player-root { width:100%; } .friende-viewer-stage { display:flex !important; align-items:center !important; justify-content:center !important; background:#000 !important; overflow:hidden !important; } /* ── VIEWER CARD: true 9:16, centered ───────────────────────── */ .friende-viewer { position:relative !important; background:#000 !important; overflow:hidden !important; /* Proper 9:16 aspect ratio */ max-width:min(calc(var(--friende-stage-h,88vh) * 9 / 16), 420px) !important; width:100% !important; } @media(max-width:820px) { .friende-viewer { max-width:100% !important; width:100% !important; height:100% !important; border-radius:0 !important; } } /* ── MEDIA: video/image NEVER blurs on fullscreen ───────────── */ .friende-viewer-media { position:absolute !important; inset:0 !important; background:#000 !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; } /* Blurred background layer — only the bg element */ .friende-viewer-media-bg { position:absolute !important; inset:-5% !important; width:110% !important; height:110% !important; object-fit:cover !important; filter:blur(32px) brightness(.5) saturate(1.15) !important; z-index:1 !important; pointer-events:none !important; } /* Main video/image — SHARP, centered, never blurred */ #fs-media-el { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; z-index:3 !important; background:#000 !important; filter:none !important; /* NO blur ever */ } /* ── TOP CHROME: progress + header properly spaced ───────────── */ .friende-viewer-top { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; z-index:70 !important; background:linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 70%, transparent 100%) !important; padding-bottom:4px !important; pointer-events:none !important; } .friende-viewer-top > *, .friende-viewer-top button, .friende-viewer-top a, .friende-viewer-top .friende-viewer-menu-wrap { pointer-events:auto !important; } /* ── SEGMENTS ────────────────────────────────────────────────── */ .friende-viewer-segments { display:flex !important; gap:3px !important; padding:10px 10px 0 !important; } .friende-viewer-segment { flex:1 !important; height:2px !important; border-radius:999px !important; background:rgba(255,255,255,.3) !important; overflow:hidden !important; } /* ── HEADER: single row, no overflow ────────────────────────── */ .friende-viewer-header { display:flex !important; align-items:center !important; justify-content:space-between !important; padding:6px 10px 4px !important; gap:6px !important; flex-wrap:nowrap !important; color:#fff !important; } /* Avatar + name section */ .friende-viewer-header > a { display:flex !important; align-items:center !important; gap:8px !important; min-width:0 !important; flex:1 !important; overflow:hidden !important; } .friende-viewer-header > a img { width:32px !important; height:32px !important; border-radius:999px !important; object-fit:cover !important; flex-shrink:0 !important; border:1.5px solid rgba(255,255,255,.6) !important; } .friende-viewer-header p { margin:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* Right controls group */ .friende-viewer-header > div.flex { display:flex !important; align-items:center !important; gap:6px !important; flex-shrink:0 !important; } /* ── HEADER BUTTONS: smaller, consistent size ────────────────── */ #fs-btn-mute, #fs-btn-replay, #fs-btn-expand, .friende-viewer-more-btn { width:30px !important; height:30px !important; border-radius:999px !important; background:rgba(0,0,0,.45) !important; border:1px solid rgba(255,255,255,.18) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:13px !important; color:#fff !important; flex-shrink:0 !important; cursor:pointer !important; } /* Close button (X) */ .friende-viewer-header a[title="Close"] { width:30px !important; height:30px !important; border-radius:999px !important; background:rgba(0,0,0,.45) !important; border:1px solid rgba(255,255,255,.18) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:13px !important; flex-shrink:0 !important; } /* ── STATS ROW: compact, no overflow ─────────────────────────── */ .friende-viewer-stats { display:flex !important; align-items:center !important; gap:6px !important; padding:0 10px 4px !important; flex-wrap:nowrap !important; overflow:hidden !important; } .friende-viewer-stat { font-size:11px !important; padding:3px 8px !important; white-space:nowrap !important; display:flex !important; align-items:center !important; gap:3px !important; } /* ── RIGHT RAIL: TikTok style — ONLY action buttons, no duplicate avatar ── */ .friende-viewer-rail { position:absolute !important; right:8px !important; bottom:100px !important; z-index:65 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:12px !important; pointer-events:auto !important; } /* Hide the duplicate profile avatar in rail - TikTok shows it, but ours causes confusion */ .friende-viewer-rail-avatar { width:36px !important; height:36px !important; border-radius:999px !important; overflow:hidden !important; border:2px solid #fff !important; flex-shrink:0 !important; display:block !important; } .friende-viewer-rail-avatar img { width:100% !important; height:100% !important; object-fit:cover !important; } .friende-viewer-rail-item { display:flex !important; flex-direction:column !important; align-items:center !important; gap:3px !important; } /* Rail buttons: proper TikTok size — not too big */ .friende-viewer-rail-btn { width:42px !important; height:42px !important; border-radius:999px !important; background:rgba(0,0,0,.4) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:19px !important; color:#fff !important; border:1px solid rgba(255,255,255,.15) !important; cursor:pointer !important; } .friende-viewer-rail-count { font-size:10px !important; font-weight:700 !important; color:#fff !important; text-shadow:0 1px 3px rgba(0,0,0,.6) !important; min-width:20px !important; text-align:center !important; } /* ── BOTTOM CHROME: text/hashtags/location, no overlap with rail ─ */ .friende-viewer-bottom { position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:50 !important; background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 55%, transparent 100%) !important; padding:28px 58px 12px 12px !important; pointer-events:none !important; } .friende-viewer-bottom > * { pointer-events:auto !important; } .friende-viewer-caption-name { font-size:13px !important; font-weight:700 !important; color:#fff !important; margin-bottom:2px !important; line-height:1.3 !important; } .friende-viewer-caption-text { font-size:12.5px !important; color:rgba(255,255,255,.9) !important; line-height:1.35 !important; word-break:break-word !important; } .friende-viewer-hashtag-chip { font-size:12px !important; color:#7dd3fc !important; font-weight:700 !important; margin-right:5px !important; } .friende-viewer-location-chip { font-size:11px !important; color:rgba(255,255,255,.65) !important; margin-top:3px !important; display:flex !important; align-items:center !important; gap:3px !important; } /* ── PREV/NEXT NAV BUTTONS: not too big, clear of rail ──────── */ .friende-viewer-nav-btn { width:30px !important; height:30px !important; font-size:16px !important; border-radius:999px !important; background:rgba(0,0,0,.35) !important; border:1px solid rgba(255,255,255,.18) !important; z-index:60 !important; opacity:.8 !important; } .friende-viewer-nav-prev { left:10px !important; } .friende-viewer-nav-next { right:58px !important; } /* clear of rail */ /* ── SCRUB BAR ────────────────────────────────────────────────── */ #fs-scrubber-wrap { position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:55 !important; padding:0 !important; } #fs-scrubber { width:100% !important; height:2px !important; -webkit-appearance:none !important; appearance:none !important; background:rgba(255,255,255,.3) !important; outline:none !important; cursor:pointer !important; display:block !important; } #fs-scrubber::-webkit-slider-thumb { -webkit-appearance:none !important; width:10px !important; height:10px !important; border-radius:999px !important; background:#fff !important; } /* ── SMOOTH SCROLL / SWIPE ────────────────────────────────────── */ .friende-viewer-stage { touch-action:pan-y !important; overscroll-behavior:contain !important; } .friende-viewer { touch-action:none !important; } /* ── MOBILE SPECIFIC ────────────────────────────────────────────── */ @media(max-width:820px) { .friende-viewer-rail { right:6px !important; bottom:90px !important; gap:10px !important; } .friende-viewer-rail-btn { width:40px !important; height:40px !important; font-size:18px !important; } .friende-viewer-bottom { padding:24px 54px 10px 10px !important; } .friende-viewer-nav-prev { left:8px !important; } .friende-viewer-nav-next { right:54px !important; } #fs-btn-mute, #fs-btn-replay, #fs-btn-expand, .friende-viewer-more-btn { width:28px !important; height:28px !important; font-size:12px !important; } .friende-viewer-header > a[title="Close"] { width:28px !important; height:28px !important; } /* The per-emoji reaction summary bar sits right above the creator avatar row. On the narrow mobile layout there isn't enough room for it to breathe, so it hide it here — the total like count is still shown on the heart button in the right-hand action rail (#fs-btn-like / #fs-reaction-total), so no count is lost. */ .friende-reaction-summary { display:none !important; } } /* ================================================================ STATUS VIEWER HEADER — RESPONSIVE FIX Superseded: avatar/name/Follow no longer live in .friende-viewer-header at all (moved to the bottom chrome, TikTok-style — see .friende-viewer-bottom-user near the caption CSS). The header is now just the icon cluster, right-aligned, so it never runs out of room and none of the old wrap/shrink rules below are needed any more. Kept as a no-op-safe container query (rather than deleted outright) in case any older cached view still renders the pre-refactor markup. */ @container friende-viewer (max-width:360px){ .friende-viewer-bottom-user-avatar{ width:28px !important; height:28px !important; } .fs-follow-btn{ padding:4px 10px !important; font-size:11px !important; } #fs-btn-mute, #fs-btn-replay, #fs-btn-expand, .friende-viewer-more-btn, .friende-viewer-header a[title="Close"]{ width:26px !important; height:26px !important; font-size:11px !important; } .friende-viewer-header > div.flex{ gap:4px !important; } } /* ── FULL SCREEN EXPAND MODE ────────────────────────────────── */ .friende-viewer.is-expanded { max-width:100% !important; width:100% !important; height:100% !important; border-radius:0 !important; } .friende-viewer.is-expanded #fs-media-el { object-fit:contain !important; /* still sharp, never blur */ } body.friende-status-expanded-open { overflow:hidden !important; } body.friende-status-expanded-open .friende-viewer-stage { position:fixed !important; inset:0 !important; z-index:9999 !important; height:100dvh !important; border-radius:0 !important; margin:0 !important; width:100% !important; } /* ── REACTION SUMMARY BAR ─────────────────────────────────────── */ /* Now rendered in normal flow inside .friende-viewer-bottom (right above the avatar row), so it can no longer land on the same bottom:0 edge as the avatar and get visually stuck behind/under it. */ .friende-reaction-summary { position:static !important; z-index:auto !important; display:none !important; flex-wrap:wrap !important; gap:4px !important; padding:0 !important; margin-bottom:6px !important; } .friende-reaction-summary.fs-open { display:flex !important; } /* ── REPORT/DELETE MENU ───────────────────────────────────────── */ .friende-viewer-menu { min-width:160px !important; z-index:200 !important; } /* ================================================================ FRIENDSE STATUS PLAYER — FIX PATCH (v9.1) Fixes: fullscreen blur, mobile video centering, close button, report modal, UX polish, offline indicator ================================================================ */ /* ── FULLSCREEN: video is ALWAYS sharp, background blurs only ── */ :-webkit-full-screen #fs-media-el, :-moz-full-screen #fs-media-el, :fullscreen #fs-media-el { object-fit: contain !important; filter: none !important; width: 100% !important; height: 100% !important; } :-webkit-full-screen .friende-viewer-media-bg, :-moz-full-screen .friende-viewer-media-bg, :fullscreen .friende-viewer-media-bg { filter: blur(32px) brightness(.5) saturate(1.15) !important; } /* Kill any accidental blur that was inherited by the main video */ #fs-media-el { filter: none !important; -webkit-filter: none !important; } /* ── VIDEO CENTERING: mobile & PC ───────────────────────────── */ .friende-viewer-media { display: flex !important; align-items: center !important; justify-content: center !important; } #fs-media-el { display: block !important; object-fit: contain !important; object-position: center center !important; max-width: 100% !important; max-height: 100% !important; margin: auto !important; } @media (max-width: 820px) { #fs-media-el { width: 100% !important; height: 100% !important; } } /* ── CLOSE BUTTON: always visible, tap-friendly ─────────────── */ #fs-close-btn-fixed { position: absolute; top: 12px; right: 12px; z-index: 300; width: 36px; height: 36px; border-radius: 999px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.22); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .12s; text-decoration: none; } #fs-close-btn-fixed:hover { background: rgba(220,38,38,.7); transform: scale(1.08); } /* ── OFFLINE BANNER ─────────────────────────────────────────── */ #fs-offline-banner { position: absolute; top: 0; left: 0; right: 0; z-index: 500; background: rgba(234,179,8,.95); color: #1c1c1c; font-size: 12.5px; font-weight: 700; padding: 6px 14px; text-align: center; display: none; border-bottom: 1px solid rgba(0,0,0,.15); } #fs-offline-banner.show { display: block; } /* ── REPORT MODAL ────────────────────────────────────────────── */ #fs-report-modal { display: none; } #fs-report-modal.show { display: flex !important; } /* ── SCRUB BAR: fatter touch target on mobile ────────────────── */ @media (max-width: 820px) { #fs-scrubber-wrap { padding-bottom: 6px !important; } #fs-scrubber { height: 4px !important; cursor: pointer; } #fs-scrubber::-webkit-slider-thumb { width: 16px !important; height: 16px !important; } } /* ── SMOOTH PROGRESS SEGMENT ─────────────────────────────────── */ .friende-viewer-segment { transition: flex .15s ease; } /* ── BOTTOM GRADIENT: taller for text visibility ─────────────── */ .friende-viewer-bottom { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 55%, transparent 100%) !important; } /* ── RIGHT RAIL: pop animation on like ──────────────────────── */ .friende-viewer-rail-btn { transition: transform .15s cubic-bezier(.22,1,.36,1), background .15s !important; } .friende-viewer-rail-btn:active { transform: scale(.88) !important; } /* ── COMMENT DRAWER: rounded top corners on mobile ──────────── */ @media (max-width: 820px) { .friende-comments-drawer { border-radius: 18px 18px 0 0 !important; } } /* ── NOTIFICATION TOAST: ensure above all panels ─────────────── */ #fs-notify { z-index: 600 !important; } /* ================================================================ Mobile "More" bottom sheet (partials/mobile-nav.blade.php) Modern rounded sheet, blurred backdrop, animated open/close, and a real close button instead of only "tap outside to dismiss". ================================================================ */ .friende-mobile-nav button{background:none;border:none;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;font-size:10px;color:var(--c-text-muted);cursor:pointer;padding:0;} .friende-more-backdrop{position:fixed;inset:0;z-index:70;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);} .friende-more-backdrop-enter{transition:opacity .25s ease}.friende-more-backdrop-enter-start{opacity:0}.friende-more-backdrop-enter-end{opacity:1} .friende-more-backdrop-leave{transition:opacity .2s ease}.friende-more-backdrop-leave-start{opacity:1}.friende-more-backdrop-leave-end{opacity:0} .friende-more-sheet{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:71;width:min(88vw,360px);height:100dvh;max-height:none;overflow-y:auto;background:var(--c-surface);border-radius:24px 0 0 24px;box-shadow:-18px 0 50px rgba(15,23,42,.28);padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 22px);} .friende-more-sheet-enter{transition:transform .45s cubic-bezier(.2,1.15,.32,1)}.friende-more-sheet-enter-start{transform:translateX(102%)}.friende-more-sheet-enter-end{transform:translateX(0)} .friende-more-sheet-leave{transition:transform .3s cubic-bezier(.5,0,.75,0)}.friende-more-sheet-leave-start{transform:translateX(0)}.friende-more-sheet-leave-end{transform:translateX(102%)} .friende-more-header{position:relative;display:flex;align-items:center;justify-content:center;padding:6px 0 14px;} .friende-more-handle{width:40px;height:4px;border-radius:999px;background:var(--c-border);} .friende-more-close{position:absolute;right:0;top:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-surface-2);color:var(--c-text-muted);border:1px solid var(--c-border);cursor:pointer;transition:background .15s,color .15s,transform .15s;} .friende-more-close:hover{background:var(--c-border);color:var(--c-text);} .friende-more-close:active{transform:scale(.92);} .friende-more-close svg{width:16px;height:16px;} .friende-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .friende-more-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 6px;border-radius:16px;background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text);font-size:11.5px;font-weight:600;text-decoration:none;text-align:center;transition:background .15s ease,transform .12s ease,box-shadow .15s ease;} .friende-more-grid a:hover{background:color-mix(in srgb,var(--c-primary) 10%,var(--c-surface-2));box-shadow:0 4px 14px rgba(15,23,42,.08);} .friende-more-grid a:active{transform:scale(.95);} .friende-more-icon{font-size:21px;line-height:1;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-surface);box-shadow:0 1px 3px rgba(15,23,42,.08);} @media(max-width:359px){.friende-more-grid{grid-template-columns:repeat(3,1fr);}} /* ---------- Sitewide online-presence dot (friend cards, profile header, chat list). Wrap the avatar in .friende-avatar-wrap (position:relative) and drop inside it. ------- */ .friende-avatar-wrap{position:relative;} .friende-online-dot{position:absolute;right:2%;bottom:2%;width:24%;height:24%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;border-radius:50%;background:#9ca3af;border:2px solid var(--c-surface);box-shadow:0 0 0 1px rgba(15,23,42,.06);transition:background-color .2s ease;} .friende-online-dot--online{background:#22c55e;} /* ---------- Friend/follower grid: tighter, evenly-aligned spacing that doesn't sprawl into empty space when there are only a few cards, and scales cleanly from phones up to wide desktops. ---------------------- */ /* NOTE (fix): the previous version picked column count from viewport-width media queries (e.g. "5 columns above 1100px"), but on desktop this grid sits in the *middle* column next to a 260px sidebar and a 300px right rail — so at a 1341px browser window the actual grid container is only ~660px wide, yet the 1100px query still forced 5 columns into it. That's what squeezed every card down to ~120px and made the Follow/Message buttons render as tiny clipped circles. `repeat(auto-fit,minmax(150px,1fr))` fixes this at the root: the column count is derived from the grid's own container width (not the viewport), so it adapts correctly whether the grid has a sidebar next to it or not. Because the upper bound is `1fr` (not a fixed px cap like an earlier attempt used), and it's `auto-fit` (not `auto-fill`), any track left empty when there are only 1-3 people collapses to 0 and the real card(s) expand to fill the row — so there's never dead space on the right, and cards never get stuck tiny just because the row could theoretically fit more columns. */ /* NOTE (fix v2): `auto-fit` + `1fr` let a track's max grow without limit, so when there were only 1-2 people the single/few real card(s) stretched to swallow the *entire* row width — on a full-width mobile column that blew the avatar up to 700px+ tall (see bug report screenshots: one follower rendered as a near-fullscreen photo). Facebook's own grid never does this: cards stay a fixed, "normal" size, however many (or few) people there are. Fixing this only requires capping the track's *max*, so `1fr` becomes a fixed ceiling (`minmax(min,max)`) and the container switches from `auto-fit` (which forces leftover tracks to collapse-and-stretch) to `auto-fill` (which just leaves them empty) — 1 card now renders at true card size instead of full width, exactly like Facebook. */ /* NOTE (fix v3): `justify-content:center` (not `start`) so any leftover row space splits evenly on both sides of the card(s) instead of them hugging the left edge — same "normal size, centered" look on a single lonely card and on a full row. Gap trimmed down a touch (was up to 16-24px) so the cards themselves get more of the row instead of the whitespace between them. */ .friende-people-grid{display:grid;gap:clamp(8px,2vw,12px);grid-template-columns:repeat(auto-fill,minmax(150px,170px));justify-content:center;align-items:stretch;} @media(min-width:821px){ .friende-people-grid{grid-template-columns:repeat(auto-fill,minmax(180px,208px));gap:14px;} } /* Infinite-scroll spinner / "You're all caught up" message: span the full row instead of getting squeezed into a single card-width column. */ .friende-people-grid .fp-infinite-sentinel,.friende-people-grid .fp-infinite-end{grid-column:1/-1} /* ---------- Messenger-style chat sidebar row hover. -------------------- */ .friende-chat-row:hover{background:var(--c-surface-2);} /* ---------- WhatsApp-style chat thread: full-height, no wasted space. -- The thread card fills the space actually left after the sticky 68px topbar and the app-shell's own vertical padding (18px top + 18px bottom on desktop) — using dvh instead of vh so mobile browser chrome (address bar show/hide) doesn't leave a stale gap. On phones the page also adds body.friende-chat-immersive (see below), which hides the bottom tab bar and drops the shell's mobile padding, so the thread gets the full screen like a real messaging app instead of floating above a tab bar with empty space beneath. ------------------- */ .friende-chat-shell{height:calc(100dvh - 104px);min-height:420px} /* Voice/scroll fix: guaranteed-smooth momentum scroll for the message list on iOS/older Android WebViews, and overscroll-behavior:contain so scrolling to the top/bottom of the chat never bubbles up and drags/refreshes the whole page underneath it. */ .friende-chat-scrollbox{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth;overflow-x:hidden} /* Chat header "⋮" kebab menu (View contact / Block / Unblock / Report) — separate from .friende-attach-menu because that one opens UPWARD (it's meant for the composer near the bottom of the screen); this one lives in the header at the TOP of the screen, so it has to open downward instead or it would push off-screen above the page. */ .friende-header-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.15);z-index:40;display:flex;flex-direction:column;min-width:170px;padding:6px} .friende-header-menu a,.friende-header-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--c-text);text-decoration:none;background:transparent} .friende-header-menu a:hover,.friende-header-menu button:hover{background:var(--c-surface-2)} /* Per-chat theme picker (🎨 button, chat header) — same dropdown shell as .friende-header-menu, plus a colour swatch + checkmark per row. Personal to me + this one chat only; see ChatController::updateTheme(). */ .friende-theme-menu{min-width:190px;gap:2px} .friende-theme-menu-title{padding:6px 10px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-muted)} .friende-theme-option{display:flex!important;align-items:center;gap:10px;position:relative} .friende-theme-swatch{width:18px;height:18px;border-radius:999px;flex-shrink:0;border:1px solid rgba(0,0,0,.12)} .friende-theme-option--active{background:var(--c-surface-2)} .friende-theme-check{margin-left:auto;color:var(--c-primary);font-weight:700} /* ── Per-chat theme presets ─────────────────────────────────────────── Scoped to [data-chat-theme="..."] on .friende-chat-shell, but the actual variable overrides live on .friende-chat-scrollbox (the message list) specifically — so only the wallpaper + bubble colours change; the header, composer, and menus keep whatever the site-wide theme (ThemeService) already set. `default` has no rules here on purpose — it just falls back to the site-wide theme, exactly how the chat looked before this feature existed. `midnight`'s wallpaper is dark, so it also overrides --c-text/--c-text-muted/--c-border for the message area only, so date dividers and timestamps stay legible on it. */ .friende-chat-shell[data-chat-theme="ocean"] .friende-chat-scrollbox{background:linear-gradient(180deg,#e0f2fe,#f0f9ff);--c-primary:#0284c7;--c-primary-text:#ffffff;--c-surface-2:#e0f2fe} .friende-chat-shell[data-chat-theme="sunset"] .friende-chat-scrollbox{background:linear-gradient(180deg,#ffedd5,#fff7ed);--c-primary:#f97316;--c-primary-text:#ffffff;--c-surface-2:#ffedd5} .friende-chat-shell[data-chat-theme="forest"] .friende-chat-scrollbox{background:linear-gradient(180deg,#dcfce7,#f0fdf4);--c-primary:#16a34a;--c-primary-text:#ffffff;--c-surface-2:#dcfce7} .friende-chat-shell[data-chat-theme="midnight"] .friende-chat-scrollbox{background:linear-gradient(180deg,#0f0f23,#1e1b4b);--c-primary:#6366f1;--c-primary-text:#ffffff;--c-surface-2:#27253f;--c-text:#e5e7eb;--c-text-muted:#a5a3c4;--c-border:#3b3960} @media(max-width:820px){ body.friende-chat-immersive .friende-mobile-nav{display:none} body.friende-chat-immersive .friende-app-shell{padding:8px 8px 8px} body.friende-chat-immersive .friende-chat-shell{height:calc(100dvh - 84px)} } /* Respect iPhone home-indicator area so the composer never sits under it. */ .friende-chat-input{padding-bottom:calc(0.75rem + env(safe-area-inset-bottom))} /* Bubble timestamp + failed/sending state. */ .friende-msg-time{font-size:10px;opacity:.65;margin-top:2px;display:block} .friende-msg-sending{opacity:.6} /* Image-attached preview strip shown above the composer before sending, WhatsApp-style, so the user sees (and can remove) what they picked instead of it silently attaching on the next tap of Send. */ .friende-chat-preview{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--c-border);background:var(--c-surface-2);max-width:100%;overflow-x:hidden} .friende-chat-preview img{width:52px;height:52px;object-fit:cover;border-radius:10px;border:1px solid var(--c-border)} .friende-chat-preview button{width:26px;height:26px;border-radius:999px;border:1px solid var(--c-border);background:var(--c-surface);flex-shrink:0;font-size:13px;line-height:1;cursor:pointer} /* Report shortcut inside the "Replying to ..." banner — same circular shape as the ✕ cancel button next to it, tinted red like every other report action in the app so it reads as the same action everywhere. */ .friende-chat-preview-report{color:#ef4444;border-color:rgba(239,68,68,.35)!important} .friende-chat-preview-report:hover{background:rgba(239,68,68,.1)!important} /* Chat image thumbnail — subtle hover/press feedback so it reads as clickable (opens the full-size lightbox below). */ /* NOTE: this rule's properties (display/transition/hover/active) are now superseded by the fuller `.friende-chat-img` rule further down in this file (WhatsApp-style fixed box + spinner + fade-in) — kept as a no-op comment instead of deleting outright so the line-history stays clear. */ /* Full-size image lightbox — click any image bubble to open it here, with a real download link (not everyone knows right-click-save, especially on mobile). Esc or clicking outside the image closes it. */ .friende-lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);padding:2.5rem 1rem;backdrop-filter:blur(2px)} .friende-lightbox img{max-width:min(92vw,900px);max-height:85vh;object-fit:contain;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)} .friende-lightbox-close{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:999px;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer;line-height:1} .friende-lightbox-close:hover{background:rgba(255,255,255,.22)} .friende-lightbox-download{position:fixed;top:16px;left:16px;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer} .friende-lightbox-download:hover{background:rgba(255,255,255,.22)} @media(max-width:520px){ .friende-lightbox-close{top:10px;right:10px} .friende-lightbox-download{top:10px;left:10px;padding:7px 12px;font-size:12px} } /* Generic (non-image) file attachment card inside a chat bubble, and in the pre-send preview strip. Tap/click downloads the file. */ .friende-chat-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(127,127,127,.12);text-decoration:none;color:inherit;margin-bottom:4px;max-width:100%} .friende-chat-file:hover{background:rgba(127,127,127,.2)} .friende-chat-file-icon{font-size:20px;flex-shrink:0} .friende-chat-file-name{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px} .friende-chat-file-size{display:block;font-size:11px;opacity:.7} .friende-chat-file-dl{flex-shrink:0;font-size:14px;opacity:.8} @media(max-width:520px){.friende-chat-file-name{max-width:120px}} /* ---------------------------------------------------------------------- Chat Core Upgrade — Phase 1: reply quotes, per-message actions, emoji reactions, voice notes, typing indicator, attach/emoji popovers. ---------------------------------------------------------------------- */ .friende-msg-row{position:relative;max-width:100%;overflow-x:hidden} .friende-msg-wrap{max-width:100%;min-width:0} .friende-msg-bubble{position:relative;min-width:0;min-height:1.5rem} /* Safety net: if a message ever has no renderable content (an unknown/ future message kind, or a payload the view doesn't understand yet), this still shows SOMETHING instead of a blank colour bar with just a tiny timestamp — see the "Unknown message" fallback in show.blade.php. */ .friende-msg-fallback{font-size:13px;opacity:.85;display:flex;align-items:center;gap:6px} .friende-msg-deleted{opacity:.7;font-style:italic} /* Quoted reply strip sitting flush on top of the bubble it belongs to. */ .friende-msg-reply-quote{border-left:3px solid var(--c-primary);margin-bottom:-2px} /* The "⋮" button next to every bubble — always rendered (not hover-only) so it works identically with mouse and touch. */ .friende-msg-actions-btn{width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--c-text-muted);font-size:16px;line-height:1;flex-shrink:0;opacity:.55;transition:.15s} .friende-msg-actions-btn:hover{opacity:1;background:var(--c-surface-2)} /* Popover menu: reaction row + reply/edit/unsend actions. */ .friende-msg-menu{position:relative;z-index:30;margin-top:4px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.15);overflow:hidden;min-width:170px} .friende-msg-menu--right{align-self:flex-end} .friende-msg-menu--left{align-self:flex-start} .friende-msg-menu-emojis{border-bottom:1px solid var(--c-border)} .friende-msg-menu-emojis button{transition:.1s;border-radius:8px} .friende-msg-menu-emojis button:hover{transform:scale(1.25)} .friende-msg-menu-item{display:block;width:100%;text-align:left;padding:9px 14px;font-size:13px;color:var(--c-text);background:transparent} .friende-msg-menu-item:hover{background:var(--c-surface-2)} .friende-msg-menu-item--danger{color:#ef4444} /* Reaction pills under a bubble — tap your own to remove it. */ .friende-msg-reactions{margin-top:2px} .friende-reaction-pill{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:999px;background:var(--c-surface);border:1px solid var(--c-border);font-size:11px;line-height:1.6;color:var(--c-text)} .friende-reaction-pill--mine{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 14%,transparent)} /* Typing indicator — three bouncing dots, Messenger-style. */ .friende-typing-dots{display:inline-flex;gap:3px;align-items:center} .friende-typing-dots span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;animation:friende-typing-bounce 1.2s infinite ease-in-out} .friende-typing-dots span:nth-child(2){animation-delay:.15s} .friende-typing-dots span:nth-child(3){animation-delay:.3s} @keyframes friende-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}} /* Voice note player. */ .friende-voice-player{min-height:28px} .friende-voice-play{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(127,127,127,.18);font-size:12px} .friende-voice-spinner{width:13px;height:13px;border-radius:999px;border:2px solid rgba(127,127,127,.35);border-top-color:currentColor;animation:friendeVoiceSpin .7s linear infinite} @keyframes friendeVoiceSpin{to{transform:rotate(360deg)}} /* WhatsApp-style centered date divider between messages sent on different days. */ .friende-date-divider{display:flex;justify-content:center;margin:10px 0} .friende-date-divider span{background:var(--c-surface-2);color:var(--c-text-muted);font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:999px;border:1px solid var(--c-border)} /* Attach (+) and emoji (😊) popovers above the composer. */ .friende-attach-menu,.friende-emoji-picker{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.15);z-index:30} .friende-attach-menu{display:flex;flex-direction:column;min-width:150px;padding:6px} .friende-attach-menu button{text-align:left;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--c-text)} .friende-attach-menu button:hover{background:var(--c-surface-2)} .friende-emoji-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:8px;max-width:230px} /* Recording bar replaces the composer while a voice note is being held. */ .friende-recording-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:friende-rec-pulse 1s infinite} @keyframes friende-rec-pulse{0%,100%{opacity:1}50%{opacity:.3}} @media(max-width:640px){ .friende-msg-menu{min-width:150px} .friende-emoji-picker{max-width:200px} } /* ---------------------------------------------------------------------- Chat Upgrade — Phase 2: voice/video calling (call-log pills in the thread + the full-screen call widget in partials/call-widget.blade.php). ---------------------------------------------------------------------- */ /* Centered call-log entry inside the message timeline ("📞 Voice call · 2:34"). */ .friende-call-log-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--c-surface-2);border:1px solid var(--c-border);font-size:12.5px;color:var(--c-text-muted);} .friende-call-log-pill--missed{color:#ef4444;border-color:color-mix(in srgb,#ef4444 35%,var(--c-border));} .friende-call-log-callback{margin-left:2px;padding:2px 10px;border-radius:999px;background:var(--c-primary);color:var(--c-primary-text);font-size:11.5px;font-weight:600;border:none;cursor:pointer;} .friende-call-log-callback:hover{filter:brightness(1.05);} /* Full-screen overlay shared by the incoming popup and the outgoing/active stage. */ .friende-call-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);padding:16px;} /* Incoming call card. */ .friende-call-card{width:100%;max-width:320px;background:var(--c-surface);border-radius:22px;padding:32px 24px 26px;text-align:center;box-shadow:0 20px 60px rgba(15,23,42,.35);animation:friende-call-pop .22s cubic-bezier(.32,.72,0,1);} @keyframes friende-call-pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}} .friende-call-avatar-ring{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;padding:4px;display:flex;align-items:center;justify-content:center;background:conic-gradient(from 0deg,var(--c-primary),transparent 70%);animation:friende-call-ring-spin 1.6s linear infinite;} .friende-call-avatar-ring--static{animation:none;background:var(--c-surface-2);padding:0;} .friende-call-avatar-ring--static .friende-call-avatar{width:100%;height:100%;} @keyframes friende-call-ring-spin{to{transform:rotate(360deg)}} .friende-call-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--c-surface);border:3px solid var(--c-surface);} .friende-call-avatar--lg{border-width:4px;} .friende-call-name{font-size:17px;font-weight:700;color:var(--c-text);margin-bottom:2px;} .friende-call-name--lg{font-size:20px;margin-top:14px;} .friende-call-sub{font-size:13px;color:var(--c-text-muted);margin-bottom:22px;} .friende-call-actions{display:flex;align-items:center;justify-content:center;gap:28px;} .friende-call-btn{width:58px;height:58px;border-radius:50%;border:none;display:inline-flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:transform .12s ease,filter .15s ease;color:#fff;} .friende-call-btn:active{transform:scale(.93);} .friende-call-btn--accept{background:#22c55e;} .friende-call-btn--decline,.friende-call-btn--end{background:#ef4444;} .friende-call-btn--ghost{width:52px;height:52px;background:rgba(255,255,255,.14);color:#fff;font-size:20px;} .friende-call-btn--ghost.friende-call-btn--active{background:#fff;color:#111;} .friende-call-btn:hover{filter:brightness(1.08);} /* Outgoing / active full-screen stage. */ .friende-call-overlay--stage{background:linear-gradient(160deg,#0f172a,#1e293b);padding:0;} .friende-call-stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;} .friende-call-remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0f172a;} .friende-call-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;} .friende-call-center .friende-call-name--lg,.friende-call-center .friende-call-sub{color:#fff;} .friende-call-center .friende-call-sub{margin-bottom:0;font-size:14px;opacity:.85;} .friende-call-local-video{position:absolute;z-index:3;bottom:calc(112px + env(safe-area-inset-bottom,0px));right:16px;width:104px;height:150px;object-fit:cover;border-radius:14px;border:2px solid rgba(255,255,255,.35);box-shadow:0 6px 20px rgba(0,0,0,.4);background:#111;transform:scaleX(-1);} .friende-call-controls{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:22px;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));} .friende-call-recovery-badge{position:absolute;z-index:4;top:calc(18px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;backdrop-filter:blur(6px);box-shadow:0 4px 18px rgba(0,0,0,.25);} .friende-call-free-badge{position:absolute;z-index:3;top:calc(18px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.2px;padding:6px 16px;border-radius:999px;backdrop-filter:blur(4px);transition:background .2s ease,color .2s ease;} .friende-call-free-badge--warn{background:#ef4444;color:#fff;animation:friende-call-badge-pulse 1s ease-in-out infinite;} @keyframes friende-call-badge-pulse{0%,100%{opacity:1}50%{opacity:.55}} @media(max-width:480px){ .friende-call-local-video{width:84px;height:120px;right:12px;bottom:calc(100px + env(safe-area-inset-bottom,0px));} .friende-call-avatar-ring{width:80px;height:80px;} .friende-call-btn{width:52px;height:52px;font-size:20px;} .friende-call-btn--ghost{width:46px;height:46px;font-size:18px;} } /* ================================================================ GROUP CHAT UPGRADE — Phase 3 Modal shell (reused by both the "New group" and "Manage group" modals), member picker chips/results, group avatar fallback/badge, sender name+avatar on group bubbles, and the "Seen by" row. ================================================================ */ /* ── Generic modal shell — used by New Group + Manage Group ── */ .friende-modal-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);padding:16px} .friende-modal{width:100%;max-width:460px;max-height:88vh;display:flex;flex-direction:column;background:var(--c-surface);border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4);animation:friendeModalPop .18s cubic-bezier(.22,1,.36,1)} @keyframes friendeModalPop{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}} .friende-modal--sm{max-width:420px} .friende-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--c-border);color:var(--c-text);shrink:0} .friende-modal-body{padding:14px 16px;overflow-y:auto;flex:1;min-height:0} .friende-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--c-border)} @media(max-width:520px){ .friende-modal-overlay{padding:14px} .friende-modal{max-width:100%;max-height:90vh;border-radius:18px} } /* ── Member picker (New Group + Add Members) ── */ .friende-member-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .friende-member-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--c-surface-2);font-size:12.5px;font-weight:600;color:var(--c-text)} .friende-member-chip button{width:18px;height:18px;border-radius:999px;border:none;background:rgba(127,127,127,.25);color:inherit;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .friende-member-chip button:hover{background:rgba(127,127,127,.4)} .friende-member-results{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;border:1px solid var(--c-border);border-radius:10px;padding:4px} .friende-member-result{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:8px;border:none;background:transparent;color:var(--c-text);text-align:left;cursor:pointer} .friende-member-result:hover{background:var(--c-surface-2)} /* ── Manage-group: member list rows with role/actions ── */ .friende-group-member-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--c-border)} .friende-group-member-row:last-child{border-bottom:none} .friende-group-member-role{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--c-primary);margin-left:4px} .friende-group-member-actions{display:flex;align-items:center;gap:4px;margin-left:auto} .friende-group-member-actions button{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);cursor:pointer;white-space:nowrap} .friende-group-member-actions button:hover{background:var(--c-surface-2)} .friende-group-member-actions button.friende-danger-text{color:#ef4444;border-color:color-mix(in srgb,#ef4444 35%,var(--c-border))} .friende-group-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--c-text-muted);margin:14px 0 6px} .friende-group-section-title:first-child{margin-top:0} .friende-group-danger-zone{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-border)} .friende-btn-danger-outline{width:100%;padding:9px;border-radius:10px;border:1px solid color-mix(in srgb,#ef4444 45%,var(--c-border));background:transparent;color:#ef4444;font-weight:600;font-size:13.5px;cursor:pointer} .friende-btn-danger-outline:hover{background:color-mix(in srgb,#ef4444 8%,transparent)} /* ── Group avatar fallback + list badge ── */ .friende-group-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--c-surface-2);font-size:18px} .friende-group-badge{font-size:11px;margin-left:2px;vertical-align:middle;opacity:.85} /* ── Group message bubbles: sender name + small avatar (Messenger-style) ── */ .friende-msg-sender-name{color:var(--c-text-muted)} .friende-msg-sender-avatar{align-self:flex-end} /* ── "Seen by X" row under the last read own-message in a group ── */ .friende-seen-by{line-height:1.3} /* ── Group create/manage avatar preview (photo picker) ── */ .friende-group-avatar-preview{display:flex;align-items:center;gap:10px;margin-bottom:10px} .friende-group-avatar-preview img,.friende-group-avatar-preview .friende-group-avatar-fallback{width:56px;height:56px;border-radius:999px;object-fit:cover} /* ================================================================ ATTACHMENT PREVIEW/DOWNLOAD FIX — WhatsApp-style image bubble (fixed box so the layout never jumps/collapses while loading), loading spinner, graceful failure state, and a standalone download button on images/videos that works regardless of what the browser does with the HTML `download` attribute (see ChatController::downloadAttachment()). ================================================================ */ .friende-chat-img-wrap{display:inline-block;position:relative;max-width:280px;min-width:120px;min-height:80px;background:rgba(127,127,127,.12)} .friende-chat-img{display:block;width:100%;max-height:320px;object-fit:cover;opacity:0;transition:opacity .2s ease} .friende-chat-img.is-loaded{opacity:1} .friende-chat-img:hover{opacity:.94} .friende-chat-img:active{transform:scale(.99)} .friende-chat-img-wrap.is-loaded:hover .friende-chat-img{opacity:.94} .friende-chat-img-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .friende-chat-img-spinner::after{content:'';width:26px;height:26px;border-radius:50%;border:3px solid rgba(127,127,127,.3);border-top-color:var(--c-primary);animation:friende-spin .7s linear infinite} @keyframes friende-spin{to{transform:rotate(360deg)}} .friende-chat-img-wrap--failed{min-height:64px} .friende-chat-img-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;padding:10px;text-align:center;font-size:12px;color:var(--c-text-muted)} .friende-chat-img-error a{color:var(--c-primary);font-weight:600;text-decoration:underline} .friende-attachment-dl-btn{position:absolute;bottom:8px;right:8px;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-size:14px;text-decoration:none;backdrop-filter:blur(2px);transition:background .15s,transform .12s} .friende-attachment-dl-btn:hover{background:rgba(0,0,0,.75)} .friende-attachment-dl-btn:active{transform:scale(.92)} @media(max-width:520px){.friende-chat-img-wrap{max-width:220px}} .friende-chat-img-error a{color:var(--c-primary);font-weight:600;text-decoration:underline} .friende-attachment-dl-btn{position:absolute;bottom:8px;right:8px;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-size:14px;text-decoration:none;backdrop-filter:blur(2px);transition:background .15s,transform .12s} .friende-attachment-dl-btn:hover{background:rgba(0,0,0,.75)} .friende-attachment-dl-btn:active{transform:scale(.92)} @media(max-width:520px){.friende-chat-img-wrap{max-width:220px}} /* ================================================================ FIX: Home hero + story tray ("Friendse Arc" style). The old dashboard header/story tray got visually cropped on the right edge on narrow screens and looked like a generic feed strip. These styles give it a unique, modern, fully responsive look: a gradient "arc" hero card, edge-faded snap-scrolling tray with arrow controls, gradient story rings and an accented invite tile. ================================================================ */ .fx-hero{ position:relative;overflow:hidden;border-radius:22px;padding:20px;margin-bottom:14px; border:1px solid var(--c-border); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--c-primary) 26%,transparent) 0%, transparent 60%), radial-gradient(110% 120% at 0% 100%, color-mix(in srgb,var(--c-primary) 14%,transparent) 0%, transparent 55%), var(--c-surface); } .fx-hero::after{ content:'';position:absolute;right:-70px;top:-90px;width:230px;height:230px;border-radius:50%; border:28px solid color-mix(in srgb,var(--c-primary) 12%,transparent);pointer-events:none; } .fx-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px} .fx-hero-id{display:flex;min-width:0;align-items:center;gap:12px} .fx-hero-avatar{width:54px;height:54px;flex:0 0 54px;border-radius:999px;object-fit:cover;border:2px solid var(--c-surface);box-shadow:0 0 0 2px var(--c-primary)} .fx-hero-title{margin:0;font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-hero-sub{margin:2px 0 0;font-size:13px;color:var(--c-text-muted)} .fx-hero-btn{ flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700; color:#fff;background:linear-gradient(135deg,var(--c-primary),color-mix(in srgb,var(--c-primary) 45%,#0f172a)); box-shadow:0 8px 22px -10px color-mix(in srgb,var(--c-primary) 85%,transparent);transition:transform .15s,box-shadow .15s } .fx-hero-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px color-mix(in srgb,var(--c-primary) 90%,transparent)} .fx-hero-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .fx-chip{ display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:600; border:1px solid var(--c-border);background:color-mix(in srgb,var(--c-surface-2) 80%,transparent);color:var(--c-text); transition:transform .14s,border-color .14s,background .14s } .fx-chip:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--c-primary) 45%,var(--c-border));background:var(--c-surface-2)} /* --- Story tray --- */ .fx-tray{position:relative;padding:12px;border-radius:20px;border:1px solid var(--c-border);background:var(--c-surface);margin-bottom:14px} .fx-tray-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 4px 10px} .fx-tray-head h2{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:0} .fx-tray-head a{font-size:12px;font-weight:700;color:var(--c-primary)} .fx-tray-wrap{position:relative;overflow:hidden;border-radius:14px} .fx-tray-wrap::before,.fx-tray-wrap::after{ /* FIX: this was 44px wide -- almost half the width of the first/last card ("Create story" on the left, "Invite friends" on the right) -- so the scroll-hint fade sat directly on top of their icon/label and made them look blurred/dimmed. Narrowed so it only hints at the edge instead of covering the card's content. */ content:'';position:absolute;top:0;bottom:0;width:16px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s } .fx-tray-wrap::before{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c-surface) 55%,transparent),transparent)} .fx-tray-wrap::after{right:0;background:linear-gradient(270deg,color-mix(in srgb,var(--c-surface) 55%,transparent),transparent)} .fx-tray-wrap.can-left::before{opacity:1} .fx-tray-wrap.can-right::after{opacity:1} .fx-tray-row{ display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity; scrollbar-width:none;padding:2px 2px 4px } .fx-tray-row::-webkit-scrollbar{display:none} .fx-story{ position:relative;flex:0 0 108px;width:108px;height:164px;border-radius:18px;overflow:hidden; display:block;scroll-snap-align:start;border:1px solid var(--c-border);background:var(--c-surface-2); color:#fff;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease } .fx-story:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(2,6,23,.6)} .fx-story-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .fx-story-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0) 32%,rgba(2,6,23,.78) 100%)} .fx-story-ring{ position:absolute;top:9px;left:9px;width:34px;height:34px;border-radius:999px;padding:2px;z-index:2; background:linear-gradient(135deg,var(--c-primary),#22d3ee) } .fx-story-ring img{width:100%;height:100%;border-radius:999px;object-fit:cover;border:2px solid rgba(2,6,23,.85)} .fx-story-name{ position:absolute;left:10px;right:10px;bottom:10px;z-index:2;font-size:12px;font-weight:700;line-height:1.25; color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.75);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical } .fx-story--action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px} .fx-story--create{background:linear-gradient(160deg,var(--c-primary),color-mix(in srgb,var(--c-primary) 40%,#0f172a));border-color:transparent} .fx-story--invite{background:linear-gradient(160deg,#0891b2,#0f172a);border-color:transparent} .fx-story-icon{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-size:18px;background:rgba(255,255,255,.18);backdrop-filter:blur(2px)} .fx-story--action span.fx-story-label{font-size:12px;font-weight:800;line-height:1.25} .fx-tray-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:999px; display:none;align-items:center;justify-content:center;cursor:pointer; border:1px solid var(--c-border);background:color-mix(in srgb,var(--c-surface) 92%,transparent); color:var(--c-text);box-shadow:0 6px 18px -8px rgba(2,6,23,.55);backdrop-filter:blur(6px) } .fx-tray-nav.prev{left:6px} .fx-tray-nav.next{right:6px} @media(hover:hover) and (min-width:721px){ .fx-tray-wrap.can-left .fx-tray-nav.prev{display:flex} .fx-tray-wrap.can-right .fx-tray-nav.next{display:flex} } @media(max-width:720px){ .fx-hero{padding:16px;border-radius:18px} .fx-hero-inner{grid-template-columns:minmax(0,1fr)} .fx-hero-btn{justify-self:start} .fx-hero-title{font-size:18px} .fx-story{flex:0 0 96px;width:96px;height:146px} } @media(max-width:420px){ .fx-hero-avatar{width:46px;height:46px;flex:0 0 46px} .fx-story{flex:0 0 86px;width:86px;height:132px;border-radius:16px} .fx-tray{padding:10px;border-radius:16px} } @media(prefers-reduced-motion:reduce){ .fx-story,.fx-hero-btn,.fx-chip{transition:none} .fx-tray-row{scroll-behavior:auto} } /* ================================================================ FIX: Admin dashboard — every metric is a clickable tile that jumps straight to the filtered list it counts (saves the admin from hunting through the sidebar). ================================================================ */ .fx-metric{ display:block;position:relative;overflow:hidden;padding:18px;border-radius:16px;text-decoration:none; border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease } .fx-metric:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c-primary) 50%,var(--c-border));box-shadow:0 16px 30px -20px rgba(2,6,23,.55)} .fx-metric-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--c-text-muted)} .fx-metric-value{margin-top:6px;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1} .fx-metric-go{position:absolute;right:14px;top:14px;font-size:13px;opacity:0;transform:translateX(-4px);transition:.16s;color:var(--c-primary)} .fx-metric:hover .fx-metric-go{opacity:1;transform:translateX(0)} .fx-metric[data-tone="warn"]{background:linear-gradient(180deg,color-mix(in srgb,#f59e0b 10%,var(--c-surface)),var(--c-surface))} .fx-metric[data-tone="danger"]{background:linear-gradient(180deg,color-mix(in srgb,#ef4444 10%,var(--c-surface)),var(--c-surface))} .fx-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} @media(min-width:768px){.fx-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1200px){.fx-metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} /* ================================================================ DARK MODE READABILITY SAFETY NET (public site). Fix: kuch pages (Analytics, profile widgets, etc.) apne cards hardcoded white background + hardcoded gray/near-black text ke saath render karte hain. Dark mode on karne par page ka text color light ho jata hai lekin yeh boxes white hi rehte the -> text "gayab" lagta tha (white on white). Neeche sirf dark mode ke andar un hardcoded light surfaces/colors ko theme variables par map kiya gaya hai. Light mode bilkul pehle jaisa hai aur koi layout ya functionality change nahi hui. ================================================================ */ html.dark { color-scheme: dark; } /* 1) Hardcoded white / light Tailwind surfaces */ html.dark .bg-white, html.dark [class*="bg-white"], html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: var(--c-surface) !important; } html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: var(--c-surface-2) !important; } /* 2) Hardcoded dark text utilities */ html.dark .text-black, html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700, html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: var(--c-text) !important; } html.dark .text-gray-600, html.dark .text-gray-500, html.dark .text-gray-400, html.dark .text-slate-600, html.dark .text-slate-500, html.dark .text-slate-400 { color: var(--c-text-muted) !important; } /* 3) Light borders / dividers */ html.dark [class*="border-gray-"], html.dark [class*="border-slate-"] { border-color: var(--c-border) !important; } html.dark [class*="divide-gray-"] > * + *, html.dark [class*="divide-slate-"] > * + * { border-color: var(--c-border) !important; } /* 4) Analytics (Overview / Earnings / Insights / Compare / Demographics) cards: inline