/* ========================================================================== 1. CORE ARCHITECTURE & RESET ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent; /* Safari needs the prefixed property; the unprefixed one alone did nothing on iOS, which is why long-pressing anywhere still brought up selection handles, the magnifier and the Look Up / Translate menu. touch-callout is what suppresses that menu and the image save sheet. Real prose opts back in further down. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } html, body { /* Stops the rubber-band bounce and the horizontal drag that peels the page back, which is what produced those half-and-half screenshots mid-swipe. */ overscroll-behavior: none; /* Nothing may ever be wider than the screen. This kills the "app wants a wider screen" bug where a single stray element (or an accidental pinch leaving a panned viewport) let the page scroll sideways. */ width: 100%; max-width: 100%; overflow-x: hidden; /* manipulation keeps tap + pan + scroll but drops the browser's own double-tap-to-zoom; real media zoom is our own JS pinch, unaffected. */ touch-action: manipulation; } body { background: #000; display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; /* 100dvh alone still left a gap on iOS when the toolbars animate. */ height: 100dvh; overflow: hidden; } /* Device Shell - Responsive to 100% of Viewport */ .app { width: 100%; max-width: 100%; height: 100dvh; background: var(--bg-primary, #fff); position: relative; overflow: hidden; display: flex; flex-direction: column; transition: background 0.3s ease, color 0.3s ease; } @media (min-width: 500px) { .app { max-width: 430px; max-height: 900px; border-radius: 45px; border: 8px solid #1a1a1a; box-shadow: 0 0 120px rgba(0,122,255,0.15); } } /* The only things people may select: what they are typing, and post captions, which get quoted and shared. touch-callout goes back to default on these so the copy menu still appears where it is wanted. Everything else stays unselectable, so long-pressing a card or a button behaves like a native app instead of raising handles and a Look Up menu. */ input, textarea, [contenteditable="true"], .post-content { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; } /* Safe area for notch/Dynamic Island */ .nav-container { bottom: max(28px, env(safe-area-inset-bottom)); } #chat-bottom-bar { padding-bottom: max(28px, env(safe-area-inset-bottom)) !important; } /* Fill the whole screen on phones. 100dvh/vh both leave a black gap on iOS standalone (dvh resolves short) and on Android with the 3-button nav bar. Pinning .app to the viewport edges with position:fixed fills reliably on both — the black can no longer show through. Scoped to phones so the desktop phone-frame card is untouched. */ html, body { background: #000; } @media (max-width: 499px) { html, body { height: 100%; min-height: 100%; } .app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: auto; min-height: 0; width: auto; max-width: none; } } /* ========================================================================== 2. GLOBAL ANIMATIONS & KEYFRAMES ========================================================================== */ @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @keyframes popIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } } @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } } @keyframes spinRepost { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes slideUpOverlay { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes jellyPop { 0% { opacity: 0; transform: scale(0.5) translateY(-20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes scanLine { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } } @keyframes miniWave { from { transform: scaleY(0.4); } to { transform: scaleY(1); } } /* ========================================================================== WELL-BEING OVERLAY — STYLES ========================================================================== */ @keyframes wbFadeIn { from{opacity:0;} to{opacity:1;} } @keyframes modalUp { from{transform:translateY(100%);opacity:0;} to{transform:translateY(0);opacity:1;} } @keyframes edIn { from{opacity:0;} to{opacity:1;} } /* System-style time-limit screen: centred icon + message, actions pinned low. */ .wb-overlay { position:absolute; inset:0; z-index:9200; display:none; flex-direction:column; align-items:center; justify-content:space-between; padding:0 20px max(30px, env(safe-area-inset-bottom, 30px)); animation: wbFadeIn 0.28s ease both; } .wb-center { flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .wb-icon { font-size:60px; color:#007AFF; margin-bottom:20px; line-height:1; } .wb-msg { text-align:center; padding:0 20px; } .wb-msg h2 { font-size:27px; font-weight:800; letter-spacing:-0.5px; margin-bottom:6px; } .wb-msg p { font-size:19px; opacity:0.45; font-weight:400; line-height:1.35; } .wb-actions { width:100%; max-width:460px; display:flex; flex-direction:column; gap:10px; } .wb-btn-primary { width:100%; padding:17px; border-radius:50px; background:#007AFF; color:#fff; font-size:17px; font-weight:600; border:none; cursor:pointer; transition:transform 0.15s; } .wb-btn-secondary { width:100%; padding:17px; border-radius:50px; background:var(--card-bg,#fff); color:var(--text-primary,#000); font-size:17px; font-weight:400; border:none; cursor:pointer; transition:transform 0.15s; } .wb-btn-primary:active, .wb-btn-secondary:active { transform:scale(0.97); } /* ========================================================================== VIDEO EDITOR — STYLES ========================================================================== */ .editor-overlay { position:absolute; inset:0; z-index:8700; display:none; flex-direction:column; background:#000; animation:edIn 0.25s ease; } .ed-timeline-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; position:relative; } .ed-timeline-scroll::-webkit-scrollbar{ display:none; } .wheel-picker::-webkit-scrollbar{ display:none; } .ed-clip { position:relative; height:40px; border-radius:10px; display:flex; align-items:center; padding:0 18px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.9); cursor:pointer; flex-shrink:0; overflow:hidden; transition:outline 0.15s; } .ed-clip.selected{ outline:2px solid #fff; } /* Wider and higher contrast: at 14px these were very hard to grab when trimming the start or end of a clip. touch-action:none so dragging a handle is not stolen by the timeline's horizontal scroll. */ .ed-trim { position:absolute; top:0; bottom:0; width:24px; z-index:4; background:rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; cursor:ew-resize; font-size:11px; color:rgba(0,0,0,0.75); touch-action:none; } .ed-clip.selected .ed-trim { background:#fff; } .ed-trim-l{ left:0; border-radius:10px 0 0 10px; } .ed-trim-r{ right:0; border-radius:0 10px 10px 0; } /* Without a width cap the scroller grew to fit the whole timeline, so its clientWidth was larger than what you can see and the last few seconds could never scroll under the playhead. */ .ed-timeline-scroll { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } .ed-timeline-scroll::-webkit-scrollbar { display:none; height:0; } .ed-playhead { position:absolute; top:0; bottom:0; width:2px; background:#fff; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; } .ed-playhead::before { content:''; position:absolute; top:-5px; left:-4px; width:10px; height:10px; background:#fff; border-radius:50%; } .ed-tool { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; padding:8px 10px; border-radius:14px; flex-shrink:0; min-width:56px; -webkit-tap-highlight-color:transparent; } .ed-tool:active{ opacity:0.55; } .glass-sheet { background:rgba(18,18,18,0.82); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); border-radius:26px; border:0.5px solid rgba(255,255,255,0.1); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07); position:relative; overflow:hidden; } .glass-sheet::before { content:''; position:absolute; inset:0; border-radius:26px; background:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,transparent 55%); pointer-events:none; } .ed-exit-modal { position:absolute; inset:0; z-index:9100; display:none; flex-direction:column; justify-content:flex-end; } .ed-exit-modal.active{ display:flex; } .ed-exit-bg { position:absolute; inset:0; background:rgba(0,0,0,0.48); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .ed-exit-sheet { position:relative; margin:0 12px 12px; animation:modalUp 0.38s cubic-bezier(0.34,1.56,0.64,1); } /* Draft Recovery */ .draft-modal-wrap { position:absolute; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; padding:24px; } .draft-modal-wrap.active{ display:flex; } .draft-modal-bg { position:absolute; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* Editor panel modal */ .ed-panel { position:absolute; left:0; right:0; bottom:0; z-index:200; display:none; flex-direction:column; animation:modalUp 0.32s cubic-bezier(0.34,1.56,0.64,1); } .ed-panel.active{ display:flex; } /* ========================================================================== 3. VERIFICATION BADGES & UTILS ========================================================================== */ .verify-blue { color: #007AFF; } .verify-green { color: #34C759; } .verify-gold { color: #FFD700; } .verify-silver { color: #C0C0C0; } .verify-red { color: #FF3B30; } /* AI-content label badge — shown instead of the tick when a creator marks their content as AI */ .tf-ai-badge { display:inline-flex; align-items:center; justify-content:center; background:#AF52DE; color:#fff; font-size:9px; font-weight:800; line-height:1; padding:2px 4px; border-radius:5px; letter-spacing:0.5px; vertical-align:middle; font-style:normal; } .admin-badge { background: #000; color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 900; margin-left: 5px; text-transform: uppercase; letter-spacing: 1px; } /* ========================================================================== 4. SIGN UP & STRIPE VERIFICATION FLOW ========================================================================== */ .splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: #fff; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #000; transition: opacity 0.5s ease; } [data-theme="dark"] .splash-screen { background: #000; color: #fff; } .splash-screen.splash-fade-out { opacity: 0; pointer-events: none; } @keyframes vnTrashDrop { 0% { transform: translateY(0) rotate(0); opacity: 1; } 25% { transform: translateY(-5px) rotate(-16deg); } 55% { transform: translateY(-2px) rotate(13deg); } 100% { transform: translateY(44px) rotate(-8deg); opacity: 0; } } @keyframes liveArFloat { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-115vh) scale(1.1); opacity: 0; } } @media (min-width: 500px) { .splash-screen { left: 50%; transform: translateX(-50%); max-width: 430px; max-height: 900px; } } .auth-step { width: 86%; max-width: 400px; display: none; animation: fadeUp 0.45s ease backwards; } .auth-step.active { display: block; } /* The detailed registration form scrolls; the create-account entry fills height */ #step-register-form.active { overflow-y: auto; max-height: 86dvh; padding-right: 4px; -webkit-overflow-scrolling: touch; } #step-register.active { display: flex; flex-direction: column; min-height: 82dvh; } .auth-create-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .auth-brand { font-size: 40px; font-weight: 900; letter-spacing: -0.5px; margin: 0 0 12px; } .auth-create-title { font-size: 29px; font-weight: 800; margin: 0; } .auth-create-bottom { padding-bottom: 6px; } .auth-terms .lnk { color: #007AFF; font-weight: 600; cursor: pointer; } .auth-input { width: 100%; padding: 16px 18px; background: #f4f4f6; border: 1px solid #e5e5ea; border-radius: 16px; margin-bottom: 14px; color: #000; font-size: 16px; outline: none; transition: 0.2s; box-sizing: border-box; } .auth-input::placeholder { color: #9a9aa0; } .auth-input:focus { border-color: #007AFF; background: #fff; } [data-theme="dark"] .auth-input { background: #1a1a1a; border-color: #333; color: #fff; } [data-theme="dark"] .auth-input:focus { border-color: #007AFF; background: #222; } .auth-btn { width: 100%; padding: 16px; background: #007AFF; color: white; border: none; border-radius: 30px; font-weight: 700; font-size: 16px; cursor: pointer; margin-top: 10px; transition: 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; } .auth-btn:active { transform: scale(0.98); } /* Button variants */ .auth-btn-ghost { background: transparent; color: #007AFF; border: 1.5px solid rgba(0,122,255,0.35); } .auth-btn-outline { background: transparent; color: #000; border: 1.5px solid #d5d5da; } [data-theme="dark"] .auth-btn-outline { color: #fff; border-color: #333; } .auth-btn-dark { background: #000; color: #fff; } [data-theme="dark"] .auth-btn-dark { background: #fff; color: #000; } /* ===== Modern auth components (create / login / method sheet) ===== */ .auth-logo { width: 60px; height: 60px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; margin: 0 auto; line-height: 1; } [data-theme="dark"] .auth-logo { background: #fff; color: #000; } .auth-logo-center { margin: 0 auto 22px; } .auth-title { font-size: 25px; font-weight: 800; margin: 12px 0 22px; text-align: center; } .auth-title-lg { font-size: 30px; font-weight: 900; margin: 0 0 4px; } .auth-sub { color: #8e8e93; font-size: 14px; margin-bottom: 32px; } .auth-sub-left { color: #8e8e93; font-size: 15px; margin: 4px 0 20px; } .auth-topbar { display: flex; margin-bottom: 18px; } .auth-topbar.end { justify-content: flex-end; } .auth-back { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: #000; } [data-theme="dark"] .auth-back { color: #fff; } .auth-cta-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .auth-circle-row { display: flex; justify-content: center; gap: 20px; margin: 8px 0 6px; } .auth-circle { width: 56px; height: 56px; border-radius: 50%; border: 1px solid #e0e0e5; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px; color: #000; transition: 0.15s; } .auth-circle:active { transform: scale(0.94); } [data-theme="dark"] .auth-circle { background: transparent; border-color: #333; color: #fff; } .auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e5e5ea; } [data-theme="dark"] .auth-divider::before, [data-theme="dark"] .auth-divider::after { background: #2a2a2a; } .auth-divider span { color: #8e8e93; font-size: 13px; } .auth-terms { text-align: center; font-size: 12.5px; color: #8e8e93; line-height: 1.6; margin-top: 20px; } .auth-terms b { color: #007AFF; font-weight: 600; } .auth-switch { text-align: center; font-size: 14px; color: #8e8e93; margin-top: 22px; } .auth-switch span { color: #007AFF; font-weight: 700; cursor: pointer; } /* Saved accounts switcher */ .saved-account-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f7f7f9; border-radius: 16px; margin-bottom: 12px; cursor: pointer; transition: 0.15s; } .saved-account-row:active { transform: scale(0.99); } [data-theme="dark"] .saved-account-row { background: #161616; } .saved-account-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Unread count for an account you are not signed into, so you can see which one has something waiting before choosing. */ .saved-account-avwrap { position: relative; flex-shrink: 0; line-height: 0; } .saved-account-badge { position: absolute; top: -4px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #FF3B30; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-primary, #fff); box-sizing: border-box; } [data-theme="dark"] .saved-account-badge { border-color: #161616; } .saved-account-info { flex: 1; min-width: 0; } .saved-account-info b { font-size: 16px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .saved-account-info small { color: #8e8e93; font-size: 14px; } .saved-account-del { color: #8e8e93; font-size: 17px; padding: 8px; cursor: pointer; flex-shrink: 0; } .saved-add-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: #f7f7f9; border-radius: 16px; cursor: pointer; } [data-theme="dark"] .saved-add-row { background: #161616; } .saved-add-plus { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; } .saved-add-row .saved-add-label { flex: 1; font-weight: 700; font-size: 15px; } /* Login-method bottom sheet */ .login-methods-sheet { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,0.5); display: none; align-items: flex-end; justify-content: center; } .login-methods-sheet.active { display: flex; } .login-methods-inner { width: 100%; max-width: 500px; background: #fff; border-radius: 26px 26px 0 0; padding: 12px 20px calc(env(safe-area-inset-bottom,0px) + 26px); animation: slideUpOverlay 0.3s cubic-bezier(0.32,0.72,0,1); } [data-theme="dark"] .login-methods-inner { background: #1c1c1e; } .lm-handle { width: 40px; height: 5px; border-radius: 3px; background: #d0d0d5; margin: 0 auto 18px; } [data-theme="dark"] .lm-handle { background: #3a3a3c; } .lm-title { display: block; text-align: center; font-size: 17px; font-weight: 800; margin-bottom: 18px; color: #000; } [data-theme="dark"] .lm-title { color: #fff; } .login-method-btn { width: 100%; padding: 15px; margin-bottom: 12px; border-radius: 30px; border: 1.5px solid #e0e0e5; background: transparent; color: #000; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; } [data-theme="dark"] .login-method-btn { border-color: #3a3a3c; color: #fff; } .login-method-btn:active { transform: scale(0.98); } /* X-style single-field entry pages (email / username / phone / password) */ #step-login-email.active, #step-login-username.active, #step-login-phone.active, #step-login-password.active { display: flex; flex-direction: column; min-height: 82dvh; } .auth-x-title { font-size: 33px; font-weight: 800; line-height: 1.12; margin: 6px 0 22px; } .auth-x-field-row { display: flex; align-items: center; gap: 8px; } .auth-x-field { flex: 1; width: 100%; border: none; outline: none; background: transparent; font-size: 26px; font-weight: 500; color: #000; padding: 6px 0; caret-color: #007AFF; } .auth-x-field::placeholder { color: #c4c4c8; } [data-theme="dark"] .auth-x-field { color: #fff; } [data-theme="dark"] .auth-x-field::placeholder { color: #4a4a4e; } .auth-x-prefix { font-size: 26px; font-weight: 500; color: #000; flex-shrink: 0; } [data-theme="dark"] .auth-x-prefix { color: #fff; } .auth-x-flag { width: 54px; height: 42px; border-radius: 9px; background: #f0f0f2; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } [data-theme="dark"] .auth-x-flag { background: #1a1a1a; } .auth-x-spacer { flex: 1; min-height: 20px; } .auth-x-continue { width: 100%; padding: 17px; border-radius: 30px; border: none; background: #000; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; transition: 0.15s; } [data-theme="dark"] .auth-x-continue { background: #fff; color: #000; } .auth-x-continue:disabled { background: #e2e2e6; color: #a6a6ab; cursor: default; } [data-theme="dark"] .auth-x-continue:disabled { background: #2a2a2c; color: #666; } .auth-x-continue:active:not(:disabled) { transform: scale(0.98); } .auth-x-forgot { color: #000; font-size: 15px; font-weight: 600; cursor: pointer; } [data-theme="dark"] .auth-x-forgot { color: #fff; } #step-signup-email.active, #step-signup-code.active, #step-signup-password.active, #step-signup-name.active, #step-signup-username.active, #step-signup-profile.active, #step-signup-dob.active, #step-signup-parent.active, #step-signup-phone-num.active, #step-signup-waiting.active { display: flex; flex-direction: column; min-height: 82dvh; } .signup-rec-chip { padding: 8px 14px; border-radius: 20px; border: 1.5px solid #e0e0e5; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; color: #007AFF; } .signup-rec-chip:active { transform: scale(0.96); } [data-theme="dark"] .signup-rec-chip { border-color: #333; } .stripe-scan-box { width: 100%; height: 200px; border: 2px dashed #333; border-radius: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: 20px; background: #111; } .scan-line { position: absolute; width: 100%; height: 2px; background: #34C759; box-shadow: 0 0 10px #34C759; animation: scanLine 2s infinite linear; display: none; } /* Apple Spinner */ .loading-spinner { position: relative; width: 30px; height: 30px; margin: 20px auto; display: none; } .ios-blade { position: absolute; left: 44.5%; top: 37%; width: 10%; height: 25%; border-radius: 50px; background-color: #8e8e93; animation: iosFade 1s linear infinite; transform-origin: center 150%; } .ios-blade:nth-child(1) { transform: rotate(0deg) translate(0, -140%); animation-delay: -0.9167s; } .ios-blade:nth-child(2) { transform: rotate(30deg) translate(0, -140%); animation-delay: -0.8333s; } .ios-blade:nth-child(3) { transform: rotate(60deg) translate(0, -140%); animation-delay: -0.75s; } .ios-blade:nth-child(4) { transform: rotate(90deg) translate(0, -140%); animation-delay: -0.6667s; } .ios-blade:nth-child(5) { transform: rotate(120deg) translate(0, -140%); animation-delay: -0.5833s; } .ios-blade:nth-child(6) { transform: rotate(150deg) translate(0, -140%); animation-delay: -0.5s; } .ios-blade:nth-child(7) { transform: rotate(180deg) translate(0, -140%); animation-delay: -0.4167s; } .ios-blade:nth-child(8) { transform: rotate(210deg) translate(0, -140%); animation-delay: -0.3333s; } .ios-blade:nth-child(9) { transform: rotate(240deg) translate(0, -140%); animation-delay: -0.25s; } .ios-blade:nth-child(10) { transform: rotate(270deg) translate(0, -140%); animation-delay: -0.1667s; } .ios-blade:nth-child(11) { transform: rotate(300deg) translate(0, -140%); animation-delay: -0.0833s; } .ios-blade:nth-child(12) { transform: rotate(330deg) translate(0, -140%); animation-delay: 0s; } @keyframes iosFade { 0% { opacity: 1; } 100% { opacity: 0.25; } } /* ========================================================================== 5. MAIN FEED & POST CARDS ========================================================================== */ #feed-panels { flex: 1; overflow-y: auto; padding-bottom: 120px; scroll-behavior: smooth; background: var(--bg-primary, #fff); } #chat-interface { display: flex; flex-direction: column; height: 100%; overflow: hidden; } #chat-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; padding-bottom: 0; } #chat-bottom-bar { flex-shrink: 0; position: relative !important; bottom: auto !important; } .post-card { background: #fff; padding: 15px; border-bottom: 1px solid #f2f2f2; position: relative; transition: 0.3s; animation: popIn 0.4s ease backwards; } .banned-content { filter: blur(15px) grayscale(100%); pointer-events: none; opacity: 0.6; } .mod-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.8); text-align: center; padding: 20px; } .post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .post-avatar { width: 42px; height: 42px; border-radius: 50%; background: #eee; object-fit: cover; border: 1px solid rgba(0,0,0,0.1); } .post-info b { font-size: 15px; display: flex; align-items: center; gap: 4px; } .post-info small { color: #888; font-size: 13px; } .post-content { font-size: 15px; line-height: 1.5; margin-bottom: 12px; color: #1a1a1a; } /* The background and border were hardcoded light, so any letterboxing around a posted image showed up as a white slab on a dark feed. */ /* No fixed aspect-ratio: the box takes the shape of the picture inside it. A forced 4/5 frame left empty bands above and below anything that was not 4/5, which is the padding that looked like a slab around the image. The max-height stops a very tall picture from taking over the whole feed. */ .post-media-box { border-radius: 18px; overflow: hidden; position: relative; background: var(--bg-secondary, #f9f9f9); border: 1px solid var(--border-color, #eee); line-height: 0; } .post-img { width: 100%; height: auto; display: block; max-height: 82vh; object-fit: contain; } /* Stands in for a photo that would not load. The box used to be hidden outright, so one failed request turned a photo post into a text post until the card was rebuilt. */ .tf-img-fallback { display: flex; flex-direction: column; width: 100%; min-height: 180px; align-items: center; justify-content: center; gap: 8px; color: var(--text-tertiary, #999); font-size: 13px; line-height: 1.4; } .tf-img-fallback i { font-size: 26px; opacity: 0.55; } /* A carousel still needs one shared frame, otherwise every slide would be a different height and the track would jump as you swipe. Single images keep their own shape; only multi-image posts get a fixed frame. */ .post-media-box:has(.tf-car-track) { aspect-ratio: 4/5; } .tf-car-item .post-img { max-height: 100%; height: 100%; object-fit: contain; } /* Multi-image posts: one horizontal snap track, dots and a counter over it. Snapping is done by the browser so the swipe stays native-smooth. */ .tf-car-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .tf-car-track::-webkit-scrollbar { display: none; } .tf-car-item { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary, #f9f9f9); } .tf-car-count { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 12px; pointer-events: none; } .tf-car-dots { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 5px; pointer-events: none; } .tf-car-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 0 3px rgba(0,0,0,0.4); transition: background 0.2s, transform 0.2s; } .tf-car-dots span.active { background: #fff; transform: scale(1.2); } /* Full-screen photo viewer opened from a post card. Same snap track as the feed carousel, sized to the screen instead of the card. */ .tf-iv-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .tf-iv-track::-webkit-scrollbar { display: none; } .tf-iv-item { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* Sheets opened from the photo viewer sit above it. The viewer is at 9950 and the comment sheet is pinned to 8500 with !important, so tapping comment (or share) from the viewer put the sheet behind the photo. */ body.tf-iv-open #comment-overlay, body.tf-iv-open .share-sheet, body.tf-iv-open #quoteRetweetModal { z-index: 9990 !important; } /* The action row is the post card's, on black. */ .tf-iv-icons { margin-top: 0 !important; } .tf-iv-icons i { color: #fff; } .tf-iv-icons i.fa-solid.fa-heart { color: #FF3B30 !important; } /* Frosted dropdown (the Groups "+ New" sheet). Themed rather than hardcoded white, which is what made it a bright slab in dark mode. */ .tf-glass-menu { background: rgba(255, 255, 255, 0.72); border: 0.5px solid rgba(255, 255, 255, 0.8); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 1.5px 0 rgba(255, 255, 255, 0.9) inset; } [data-theme="dark"] .tf-glass-menu { background: rgba(38, 38, 42, 0.88); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 1.5px 0 rgba(255, 255, 255, 0.06) inset; } /* Composer attachments: one big preview, or a scrollable row of thumbnails. */ .tf-composer-single { position: relative; } .tf-composer-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tf-composer-strip::-webkit-scrollbar { display: none; } .tf-composer-thumb { position: relative; flex: 0 0 auto; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; background: var(--bg-secondary, #f2f2f2); } .post-icons { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding: 4px 5px 8px; color: #555; } .post-icons > div { display: inline-flex; align-items: center; gap: 5px; padding: 8px 6px; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; min-width: 36px; } .post-icons i { font-size: 20px; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .post-icons i.fa-heart { color: var(--text-primary, #555); } .post-icons i.fa-solid.fa-heart { color: #FF3B30 !important; } .post-icons i.fa-comment, .post-icons i.fa-retweet, .post-icons i.fa-bookmark, .post-icons i.fa-share-nodes { color: var(--text-primary, #555); } [data-theme="dark"] .post-icons i { color: #aaa; } [data-theme="dark"] .post-icons i.fa-solid.fa-heart { color: #FF3B30 !important; } .post-icons > div:active i { transform: scale(1.3); } [data-theme="dark"] .post-icons { color: #aaa; } .post-menu-dropdown { position: absolute; top: 45px; right: 20px; width: 180px; background: #fff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: none; flex-direction: column; z-index: 100; overflow: hidden; border: 1px solid #eee; } .pm-item { padding: 12px 15px; font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 1px solid #f9f9f9; display: flex; gap: 10px; align-items: center; } .pm-item:hover { background: #f5f5f5; } .like-active { color: #e91e63 !important; animation: popIn 0.3s; } .bookmark-active { color: #007AFF !important; animation: popIn 0.3s; } .repost-spin { color: #34C759 !important; animation: spinRepost 0.7s cubic-bezier(0.34,1.56,0.64,1); } /* The blue box-shadow read as a glow bleeding out of the pill on a dark feed. A plain neutral drop shadow lifts it off the page without the halo. */ .back-to-top { position: absolute; top: 85px; left: 50%; transform: translateX(-50%); background: #007AFF; color: #fff; padding: 10px 20px; border-radius: 50px; font-size: 12px; font-weight: 900; display: none; z-index: 2000; box-shadow: 0 4px 12px rgba(0,0,0,0.28); cursor: pointer; text-transform: uppercase; letter-spacing: 1px; } /* ========================================================================== 6. LIQUID NAVIGATION — Premium Floating Glass Pill ========================================================================== */ /* --- Container --- */ .nav-container { position: absolute; bottom: 28px; left: 16px; right: 16px; width: auto; max-width: none; transform: none; display: flex; align-items: center; justify-content: space-between; z-index: 6000; gap: 10px; pointer-events: none; height: 54px; } .app.is-others .nav-container, .app.is-search .nav-container { justify-content: space-between; } /* Pill is auto-width when collapsed, grows when expanded */ .nav-container .liquid-pill { flex: none; min-width: unset; } /* Only the "others" (burger) state grows the pill to fill the row. In search mode the pill keeps its normal size — the search pill grows. */ .app.is-others .nav-container .liquid-pill { flex: 1; min-width: 0; } .nav-container .search-circle { flex-shrink: 0; } .nav-container > * { pointer-events: auto; } /* --- The Glass Pill --- */ .liquid-pill { position: relative; display: flex; align-items: center; gap: 0; padding: 6px 8px; min-width: 100px; border-radius: 50px; /* True liquid glass: translucent + high saturation so the feed behind refracts through. No white gloss — just a faint edge and soft depth. */ background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(26px) saturate(200%); -webkit-backdrop-filter: blur(26px) saturate(200%); border: 0.5px solid rgba(255, 255, 255, 0.20); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12); overflow: visible; -webkit-tap-highlight-color: transparent; transition: min-width 0.55s cubic-bezier(0.32, 0.72, 0, 1), padding 0.55s cubic-bezier(0.32, 0.72, 0, 1); } /* Icons sit above the sliding droplet selector. */ .liquid-pill > .nav-icon, .liquid-pill > span { position: relative; z-index: 1; } /* Glass shimmer sweep */ /* Dark mode glass */ [data-theme="dark"] .liquid-pill { background: rgba(28, 28, 30, 0.65); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -0.5px 0 rgba(0, 0, 0, 0.3) inset; } /* ============================================================ FIX 3 — Comprehensive dark mode + Liquid Glass dark depth ============================================================ */ /* Feed panels & app root. These were pure #000, which read as a black void rather than as our dark theme, and left cards indistinguishable from the page behind them. The surfaces now sit on the shared dark palette, with cards a step lighter than the page so the feed still has depth. */ [data-theme="dark"] body { background: var(--bg-primary, #121212); } [data-theme="dark"] .app { background: var(--bg-primary, #121212) !important; } [data-theme="dark"] #feed-panels { background: var(--bg-primary, #121212) !important; } /* Header */ [data-theme="dark"] .header-container { background: var(--bg-secondary, #1c1c1e) !important; border-bottom-color: rgba(255,255,255,0.07) !important; } /* White overlays (msg, profile, settings sub-pages) */ [data-theme="dark"] .white-overlay { background: var(--bg-primary, #121212) !important; } /* Liquid Glass pill — dark: translucent so the feed refracts through, no gloss. */ [data-theme="dark"] .liquid-pill { background: rgba(18, 18, 22, 0.38) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important; } /* Liquid Glass search circle — dark */ [data-theme="dark"] .search-circle { background: rgba(30, 30, 32, 0.72) !important; border-color: rgba(255,255,255,0.09) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset !important; } /* Post cards */ [data-theme="dark"] .post-card { background: var(--card-bg, #1c1c1e) !important; border-bottom-color: var(--border-color, #2e2e30) !important; } [data-theme="dark"] .post-content { color: #e5e5e5 !important; } [data-theme="dark"] .post-info small { color: #666 !important; } /* Add menu */ [data-theme="dark"] .add-menu { background: rgba(22, 22, 24, 0.97) !important; border-color: rgba(255,255,255,0.08) !important; } /* Liquid glass back buttons */ [data-theme="dark"] .liquid-glass-btn { background: rgba(30,30,32,0.65) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06) inset !important; } /* Composer */ [data-theme="dark"] #composer-overlay { background: var(--bg-primary, #121212) !important; } [data-theme="dark"] #composer-text { color: #fff !important; background: transparent !important; } /* Tabs */ [data-theme="dark"] .msg-tabs { border-bottom-color: #222 !important; } [data-theme="dark"] .m-tab { color: #555 !important; } [data-theme="dark"] .m-tab.active { color: #fff !important; border-bottom-color: #fff !important; } /* Story container */ [data-theme="dark"] .story-container { background: var(--bg-secondary, #1c1c1e) !important; border-bottom-color: var(--border-color, #2e2e30) !important; } /* Bottom bar */ [data-theme="dark"] .msg-bottom-bar { background: rgba(18,18,18,0.95) !important; border-top-color: #1e1e1e !important; } /* Activity */ [data-theme="dark"] .activity-item { background: transparent !important; border-bottom-color: #1e1e1e !important; } /* Settings */ /* Black, not #121212, and this is the whole fix for the band along the bottom of this screen. The phone reserves a strip behind the home indicator and paints it from theme-color, which is #000 and matches the feed exactly, so the feed has never shown a seam. Settings was the one screen a shade lighter than that strip, which is what made the strip visible here and nowhere else. Matching it is also the right look: iOS Settings in dark mode is a black page with #1c1c1e cards, which is exactly what this is now. */ [data-theme="dark"] #settings-overlay { background: #000 !important; } [data-theme="dark"] .settings-card { background: var(--card-bg, #1c1c1e) !important; border-color: var(--border-color, #2e2e30) !important; } [data-theme="dark"] .settings-row { background: var(--card-bg, #1c1c1e) !important; border-bottom-color: var(--border-color, #2e2e30) !important; color: #e5e5e5 !important; } [data-theme="dark"] .settings-section-title { color: #555 !important; } /* Manage-group page: match the Settings look — a near-black page with lighter, bordered cards, instead of black cards on a grey page (which read as holes). */ .mg-page { background: var(--bg-secondary, #f2f2f7); } [data-theme="dark"] .mg-page { background: var(--bg-primary, #121212); } .mg-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; } [data-theme="dark"] .mg-card { background: #1a1a1a; border-color: #333; } /* Message long-press context menu: smooth spring-in instead of popping. */ @keyframes msgReactPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes msgMenuPop { from { transform: scale(0.92) translateY(12px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* Live viewer chat: scrollable but with the scrollbar hidden (TikTok-style overlay). */ .live-chat-scroll { scrollbar-width: none; -ms-overflow-style: none; } .live-chat-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Keep guest co-host tiles from crowding the screen on narrow phones. */ @media (max-width: 380px) { #live-guest-strip > div { width: 76px !important; height: 110px !important; } } /* Repost sheet */ [data-theme="dark"] .repost-sheet { background: var(--modal-bg, #1c1c1e) !important; } /* Comment overlay */ /* One surface for the whole sheet. This block and the later dark overrides disagreed (#161616 vs #1a1a1a), so the header and the input bar could end up a different shade from the list between them. */ [data-theme="dark"] #comment-overlay { background: var(--modal-bg, #1c1c1e) !important; } [data-theme="dark"] .comment-input-bar { background: var(--modal-bg, #1c1c1e) !important; border-top-color: var(--border-color, #2e2e30) !important; } [data-theme="dark"] .comment-input-bar input { background: var(--input-bg, #2c2c2e) !important; color: #fff !important; } [data-theme="dark"] #chat-bottom-bar { background: rgba(18,18,18,0.97) !important; border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] #chat-bottom-bar input, [data-theme="dark"] #chat-msg-input { color: #fff !important; caret-color: #0A84FF !important; } [data-theme="dark"] #chat-bottom-bar > div { background: rgba(44,44,48,0.9) !important; } [data-theme="dark"] #chat-bottom-bar button { color: #0A84FF !important; } [data-theme="dark"] #chat-send-btn { background: #0A84FF !important; } [data-theme="dark"] #chat-interface .header-container { background: rgba(18,18,18,0.97) !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] #chat-body { background: var(--bg-primary, #121212) !important; } [data-theme="dark"] #emoji-picker { background: rgba(28,28,30,0.97) !important; border: 0.5px solid rgba(255,255,255,0.08) !important; } [data-theme="dark"] #gifStickerPanel { background: rgba(18,18,18,0.97) !important; border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .comment-bubble b, [data-theme="dark"] .comment-bubble p { color: #e5e5e5 !important; } /* Search */ [data-theme="dark"] .search-input-wrap input { color: #fff !important; } /* --- Expanded States --- */ .app.is-others .liquid-pill { min-width: 100%; justify-content: space-around; padding: 6px 6px; } /* Search mode: pill stays at its normal collapsed size (home + burger). */ .app.is-search .liquid-pill { flex: none; min-width: unset; padding: 6px 8px; } /* --- Nav Icons --- */ .nav-icon { position: relative; font-size: 21px; color: rgba(0, 0, 0, 0.35); cursor: pointer; padding: 10px; border-radius: 50%; transition: color 0.3s ease, background 0.3s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .nav-icon:active { transform: scale(0.82); } [data-theme="dark"] .nav-icon { color: rgba(255, 255, 255, 0.4); } [data-theme="dark"] .nav-icon.nav-active { background: #0A84FF !important; color: #ffffff !important; border-radius: 20px !important; } /* --- iOS 26 Droplet Selector --- */ .nav-icon.nav-active { color: #007AFF; } @keyframes iconSpring26 { 0% { transform: scale(1); } 18% { transform: scale(0.76); } 50% { transform: scale(1.24); } 72% { transform: scale(0.93); } 88% { transform: scale(1.04); } 100% { transform: scale(1); } } /* Active icon rides ON the sliding droplet — white glyph, no static blue pill. */ .nav-icon.nav-active { background: transparent !important; color: #ffffff !important; border-radius: 50% !important; padding: 10px !important; filter: none !important; animation: none !important; } [data-theme="dark"] .nav-icon.nav-active { background: transparent !important; color: #ffffff !important; border-radius: 50% !important; padding: 10px !important; } /* Icon the droplet is hovering over mid-drag */ .nav-icon.nav-drop-hover { color: #ffffff !important; transform: scale(1.06); } /* ── Liquid-glass droplet selector ────────────────────────────────────────── The blue selector is a water droplet you can grab (from the active icon) and slide across the bar; released over an icon, it navigates there. */ .nav-droplet { position: absolute; top: 50%; left: 0; width: 46px; height: 40px; transform: translateY(-50%); border-radius: 21px; z-index: 0; /* behind the icon glyphs */ background: rgba(0, 122, 255, 0.9); box-shadow: 0 4px 12px rgba(0, 122, 255, 0.32); pointer-events: none; /* drag starts from the active icon on top */ transition: left 0.42s cubic-bezier(0.32, 0.72, 0, 1), width 0.34s cubic-bezier(0.32, 0.72, 0, 1), transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease; } [data-theme="dark"] .nav-droplet { background: rgba(10, 132, 255, 0.92); box-shadow: 0 4px 14px rgba(10, 132, 255, 0.4); } /* Picked up → a real bead of blue glass, not a glossy cartoon bubble. What made the old one read as cartoon was a single huge soft-white blob covering half the top, like sticker gloss. A real droplet instead has: a tight specular dot where the light hits, a brighter caustic pooling at the opposite lower edge as light refracts through and focuses, a crisp rim from total internal reflection, and genuine translucency so the feed shows through it like water rather than a solid plastic pill. */ .nav-droplet.dragging { background: /* tight specular highlight, upper-left */ radial-gradient(circle at 33% 24%, rgba(255,255,255,0.95), rgba(255,255,255,0) 13%), /* refracted light pooling lower-right — the tell of a real bead */ radial-gradient(circle at 67% 84%, rgba(198,232,255,0.62), rgba(198,232,255,0) 32%), /* faint curved sheen so the body reads as rounded glass, not flat */ linear-gradient(158deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%), /* translucent blue tint — enough to stay clearly the same blue as the resting droplet, still see-through; saturate() deepens what refracts */ rgba(10, 132, 255, 0.46); backdrop-filter: blur(7px) saturate(210%); -webkit-backdrop-filter: blur(7px) saturate(210%); box-shadow: /* soft blue halo cast on the bar */ 0 10px 24px rgba(10, 132, 255, 0.42), /* tight contact shadow so it reads as lifted off the surface */ 0 3px 6px rgba(0, 0, 0, 0.22), /* crisp edge — total internal reflection around the rim */ inset 0 0 0 1px rgba(255, 255, 255, 0.42), /* top edge catches the light */ inset 0 3px 5px rgba(255, 255, 255, 0.38), /* bottom edge glows where light refracts through and focuses */ inset 0 -8px 12px rgba(150, 210, 255, 0.5); transform: translateY(-50%) scale(1.16); transition: width 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, box-shadow 0.2s, backdrop-filter 0.2s; } /* Active drag only: turn the selector into a refractive liquid lens. The untouched .nav-droplet rule above continues to control its resting state. */ .nav-droplet.dragging { overflow: hidden; isolation: isolate; background: /* concentrated light source, not a broad plastic-looking gloss */ radial-gradient(ellipse 19% 15% at 27% 21%, rgba(255,255,255,0.96) 0 13%, rgba(213,246,255,0.46) 31%, transparent 72%), /* caustic light bent through the lower edge of the lens */ radial-gradient(ellipse 56% 28% at 72% 98%, rgba(128,229,255,0.70), rgba(56,183,255,0.20) 47%, transparent 76%), /* transparent volume: the content beneath stays visible and blurred */ linear-gradient(145deg, rgba(255,255,255,0.20) 0%, rgba(181,233,255,0.05) 35%, rgba(0,109,255,0.09) 67%, rgba(55,196,255,0.28) 100%), rgba(0, 122, 255, 0.44); border: 0.75px solid rgba(222, 249, 255, 0.68); backdrop-filter: blur(13px) saturate(235%) contrast(1.06); -webkit-backdrop-filter: blur(13px) saturate(235%) contrast(1.06); box-shadow: 0 10px 23px rgba(0, 113, 255, 0.32), 0 3px 6px rgba(0, 21, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -6px 10px rgba(71, 198, 255, 0.34), inset 1px 0 1px rgba(255, 255, 255, 0.24), inset -1px 0 1px rgba(73, 198, 255, 0.34); } /* A contained inner reflection and partial chromatic rim provide the liquid refraction visible in the reference without changing size or drag motion. */ .nav-droplet.dragging::before { content: ''; position: absolute; inset: 1px; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse 50% 16% at 43% 4%, rgba(255,255,255,0.46), transparent 72%), linear-gradient(118deg, rgba(255,255,255,0.19), transparent 28% 67%, rgba(70,224,255,0.22)); mix-blend-mode: screen; } .nav-droplet.dragging::after { content: ''; position: absolute; inset: -1px; z-index: 1; pointer-events: none; padding: 1.5px; border-radius: inherit; background: conic-gradient(from 214deg, rgba(22,215,255,0) 0deg 35deg, rgba(84,238,255,0.72) 46deg 64deg, rgba(188,113,255,0.56) 69deg 82deg, rgba(255,255,255,0) 95deg 204deg, rgba(160,250,255,0.46) 225deg 244deg, rgba(99,201,255,0.62) 251deg 268deg, rgba(22,215,255,0) 282deg 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } @property --droplet-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes droplet-spin { to { --droplet-angle: 360deg; } } @keyframes droplet-shimmer { 0% { filter: brightness(1) saturate(1.2); } 50% { filter: brightness(1.35) saturate(1.8); } 100% { filter: brightness(1) saturate(1.2); } } #navDroplet { display: none !important; position: absolute; top: 3px; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; z-index: 20; will-change: left, width, height, border-radius; opacity: 0; background: conic-gradient( from var(--droplet-angle), #007AFF 0%, #5AC8FA 18%, #34C759 32%, #FFD60A 46%, #FF6B6B 58%, #FF375F 68%, #BF5AF2 78%, #5E5CE6 88%, #007AFF 100% ); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.35), 0 0 6px 1px rgba(0,122,255,0.5), 0 0 14px 2px rgba(88,86,214,0.3), inset 0 0.5px 0 rgba(255,255,255,0.55); animation: droplet-spin 2.5s linear infinite, droplet-shimmer 2s ease-in-out infinite; } [data-theme="dark"] #navDroplet { background: conic-gradient( from var(--droplet-angle), #0A84FF 0%, #64D2FF 18%, #30D158 32%, #FFD60A 46%, #FF6961 58%, #FF375F 68%, #BF5AF2 78%, #6E6CF0 88%, #0A84FF 100% ); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.2), 0 0 8px 2px rgba(10,132,255,0.6), 0 0 18px 3px rgba(191,90,242,0.35), inset 0 0.5px 0 rgba(255,255,255,0.3); } .nav-icon .nav-halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,122,255,0.1); pointer-events: none; } @keyframes haloIn26 { 0% { transform: scale(0.2); opacity: 0; } 55% { transform: scale(1.35); opacity: 1; } 78% { transform: scale(0.93); } 100% { transform: scale(1); opacity: 1; } } .nav-icon .nav-halo { animation: haloIn26 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; } .nav-icon:active { transform: scale(0.76) !important; transition: transform 0.08s ease !important; } [data-theme="dark"] #navDroplet { background: #0A84FF; box-shadow: 0 0 0 3px rgba(10,132,255,0.14), 0 2px 8px rgba(10,132,255,0.5); } [data-theme="dark"] .nav-icon .nav-halo { background: rgba(10,132,255,0.13); } /* --- Notification Badges --- */ .nav-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; background: #007AFF; color: white; font-size: 10px; font-weight: 800; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid rgba(255, 255, 255, 0.7); animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 5; line-height: 1; } .nav-badge:empty, .nav-badge[data-count="0"] { display: none; } @keyframes badgePop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } } [data-theme="dark"] .nav-badge { border-color: rgba(28, 28, 30, 0.65); } /* --- Search Circle --- */ .search-circle { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: rgba(0, 0, 0, 0.45); cursor: pointer; flex-shrink: 0; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(40px) saturate(200%) brightness(1.08); -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.08); border: 0.5px solid rgba(255, 255, 255, 0.6); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07), 0 1.5px 0 rgba(255, 255, 255, 0.8) inset; transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1), height 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .search-circle:active { transform: scale(0.88); } .search-circle.bounce { animation: dropletBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes dropletBounce { 0% { transform: scale(1); } 30% { transform: scale(0.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } [data-theme="dark"] .search-circle { background: rgba(28, 28, 30, 0.65); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset; color: rgba(255, 255, 255, 0.45); } /* Hide search circle when search is active — pill expands to fill */ .app.is-search .search-circle { width: 0; height: 0; opacity: 0; padding: 0; margin: 0; min-width: 0; border: none; overflow: hidden; pointer-events: none; } /* -------- Separate search pill (visible when search active) -------- */ #searchSeparatePill { display: none; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 50px; background: rgba(250,250,254,0.52); backdrop-filter: blur(60px) saturate(160%); -webkit-backdrop-filter: blur(60px) saturate(160%); border: 0.5px solid rgba(255,255,255,0.45); box-shadow: 0 6px 22px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.7) inset; flex: 1; min-width: 0; pointer-events: auto; transition: opacity 0.3s ease; } [data-theme="dark"] #searchSeparatePill { background: rgba(30,30,32,0.72); border-color: rgba(255,255,255,0.09); box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset; } .app.is-search #searchSeparatePill { display: flex; } .app.is-search .liquid-pill { flex: none; min-width: unset; } #searchSeparatePill input { flex: 1; border: none; background: transparent; outline: none; font-size: 16px; font-weight: 500; color: #000; caret-color: #007AFF; min-width: 0; } [data-theme="dark"] #searchSeparatePill input { color: #fff; } #searchSeparatePill input::placeholder { color: rgba(0,0,0,0.3); font-weight: 400; } [data-theme="dark"] #searchSeparatePill input::placeholder { color: rgba(255,255,255,0.3); } #searchSeparatePill .sp-close { color: rgba(0,0,0,0.25); font-size: 17px; cursor: pointer; flex-shrink: 0; transition: color 0.2s; } [data-theme="dark"] #searchSeparatePill .sp-close { color: rgba(255,255,255,0.3); } /* --- Search Input Inside Pill --- */ .search-input-wrap { display: none; width: 100%; align-items: center; gap: 10px; padding: 2px 4px; } .search-input-wrap input { width: 100%; border: none; background: transparent; outline: none; font-size: 17px; font-weight: 500; color: #000; caret-color: #007AFF; } .search-input-wrap input::placeholder { color: rgba(0, 0, 0, 0.3); font-weight: 400; } [data-theme="dark"] .search-input-wrap input { color: #fff; } [data-theme="dark"] .search-input-wrap input::placeholder { color: rgba(255, 255, 255, 0.3); } .search-input-wrap .search-close-btn { color: rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 18px; padding: 4px; transition: color 0.2s; flex-shrink: 0; } .search-input-wrap .search-close-btn:active { color: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .search-input-wrap .search-close-btn { color: rgba(255, 255, 255, 0.25); } /* --- Others-only Icons (Expanded Burger State) --- */ .others-only { display: none; opacity: 0; transform: scale(0.3) translateY(8px); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .app.is-others .others-only { display: flex; opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } /* Stagger the expansion animation */ .app.is-others .others-only:nth-child(3) { transition-delay: 0.03s; } .app.is-others .others-only:nth-child(4) { transition-delay: 0.06s; } .app.is-others .others-only:nth-child(5) { transition-delay: 0.09s; } .app.is-others .others-only:nth-child(6) { transition-delay: 0.12s; } /* --- Burger icon hide when expanded --- */ .burger-icon { transition: opacity 0.2s ease, transform 0.3s ease; } .app.is-others .burger-icon { opacity: 0; transform: scale(0.5) rotate(90deg); width: 0; padding: 0; overflow: hidden; pointer-events: none; } /* ========================================================================== 7. HEADER & + MENU ========================================================================== */ /* padding-top clears the Dynamic Island / notch. The status bar is black-translucent, so in an installed PWA the header sits under the island; env(safe-area-inset-top) is that height, and it collapses to the normal 15px in a browser tab where the inset is 0. */ .header-container { padding: calc(env(safe-area-inset-top, 0px) + 15px) 20px 15px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); z-index: 100; border-bottom: 1px solid rgba(0,0,0,0.05); } .brand-logo { font-size: 24px; font-weight: 900; letter-spacing: -1px; } .plus-wrapper { position: relative; } .liquid-glass-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); cursor: pointer; transition: 0.3s; } .add-menu { position: absolute; top: 55px; right: -10px; width: 200px; background: rgba(255,255,255,0.98); backdrop-filter: blur(30px); border-radius: 20px; padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); display: none; flex-direction: column; z-index: 5000; border: 1px solid rgba(255,255,255,0.5); transform-origin: top right; } .add-menu.active { display: flex; animation: jellyPop 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .add-option { padding: 12px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 12px; border-radius: 12px; cursor: pointer; color: #333; } .add-option:hover { background: #f5f5f5; } /* ========================================================================== 8. SYSTEM OVERLAYS ========================================================================== */ .white-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 100%; background: #fff; z-index: 22000; display: none; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; animation: slideUpOverlay 0.4s cubic-bezier(0.32, 0.72, 0, 1); box-sizing: border-box; } .black-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 4000; display: none; overflow-y: auto; animation: slideUpOverlay 0.4s cubic-bezier(0.32, 0.72, 0, 1); } .liquid-back-float { position: absolute; top: 20px; left: 20px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer; } /* ========================================================================== 9. MESSAGE HUB (Attachments & Emojis) ========================================================================== */ .msg-header { padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px 20px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); position: sticky; top:0; z-index: 10; } .story-container { display: flex; gap: 16px; padding: 15px 20px; overflow-x: auto; border-bottom: 1px solid #f9f9f9; } .story-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 72px; cursor: pointer; } .ring-active { width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .story-pic { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; } .msg-tabs { display: flex; padding: 5px 20px; gap: 25px; border-bottom: 1px solid #f0f0f0; } .m-tab { padding: 10px 0; font-weight: 700; color: #888; cursor: pointer; font-size: 15px; } .m-tab.active { color: #000; border-bottom: 2px solid #000; } .msg-row { display: flex; gap: 15px; padding: 15px 20px; align-items: center; cursor: pointer; transition: 0.2s; } .msg-row:hover { background: #fafafa; } .msg-bottom-bar { position: sticky; bottom: 0; left: 0; right: 0; width: 100%; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: 0; padding: 14px 20px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); border-top: 1px solid rgba(0,0,0,0.05); flex-shrink: 0; } /* Chat Enhancements */ .chat-tools { display: flex; gap: 15px; align-items: center; padding-left: 10px; color: #007AFF; font-size: 22px; } .emoji-picker { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 90%; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: 20px; padding: 15px; display: none; grid-template-columns: repeat(6, 1fr); gap: 10px; font-size: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); animation: popIn 0.3s; z-index: 5005; } .attach-menu { position: absolute; bottom: 80px; left: 20px; background: white; border-radius: 15px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: none; flex-direction: column; gap: 10px; animation: popIn 0.2s; z-index: 5005; } .attach-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: bold; } .attach-item:hover { background: #f5f5f5; } /* ========================================================================== 10. PARENTAL HUB ========================================================================== */ .parent-dashboard { padding: 20px; } .parent-hero { background: linear-gradient(135deg, #34C759, #2ecc71); padding: 25px; border-radius: 25px; color: white; box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3); margin-bottom: 20px; } .request-card { background: #f9f9f9; padding: 15px; border-radius: 18px; margin-bottom: 15px; border: 1px solid #eee; display: flex; flex-direction: column; gap: 10px; } .req-header { display: flex; justify-content: space-between; font-size: 12px; color: #888; font-weight: bold; text-transform: uppercase; } .req-actions { display: flex; gap: 10px; margin-top: 5px; } .btn-approve { flex: 1; padding: 10px; background: #34C759; color: white; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; } .btn-reject { flex: 1; padding: 10px; background: #FF3B30; color: white; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; } /* ========================================================================== 11. VIDEO CALL UI ========================================================================== */ .call-bg { position: absolute; top:0; left:0; width:100%; height:100%; background: url('https://picsum.photos/seed/call/400/800') center/cover; filter: blur(20px); transform: scale(1.1); } .caller-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.2); margin-bottom: 20px; animation: pulseGlow 2s infinite; } .call-btn { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; cursor: pointer; } .btn-decline { background: #FF3B30; } .btn-accept { background: #34C759; } /* ========================================================================== 12. QR CODE & REELS ========================================================================== */ .qr-card { background: #fff; padding: 30px; border-radius: 30px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.15); border: 1px solid #eee; margin-top: 100px; } .qr-code-placeholder { width: 200px; height: 200px; background: #000; margin: 20px auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; } /* Reels (TikTok Style) */ .reels-screen { height: 100%; width: 100%; } .reels-screen .reel-viewport { height: 100%; width: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; } .reels-screen .reel-page { height: 100%; width: 100%; scroll-snap-align: start; position: relative; background: #000; } .reels-screen .reel-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; } .reel-ui { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); color: #fff; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-end; } .reel-ui * { pointer-events: auto; } .reels-screen .reel-action { text-align: center; font-size: 11px; font-weight: bold; margin-bottom: 25px; cursor: pointer; } .reels-screen .reel-action i { font-size: 32px; margin-bottom: 5px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } /* ========================================================================== 13. PROFILE (Jäger Style) ========================================================================== */ .profile-hero { position: relative; } /* An account with no cover photo. One token, because your own profile and somebody else's used to disagree: yours was this flat dark grey while theirs was a blue gradient, so the same account looked different depending on who was looking at it. */ :root { --cover-empty: #333; } .cover-img { height: 180px; width: 100%; background: var(--cover-empty, #333); object-fit: cover; } .avatar-overlap { width: 95px; height: 95px; border-radius: 50%; border: 4px solid #fff; position: absolute; bottom: -45px; left: 20px; background: #eee; z-index: 5; } .profile-btn-row { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 20px; margin-top: 5px; } .action-btn { padding: 8px 20px; border-radius: 20px; border: 1px solid #ddd; background: #fff; font-weight: bold; font-size: 13px; cursor: pointer; } .profile-tabs { display: flex; margin-top: 20px; border-bottom: 1px solid var(--border-color, #eee); } .p-tab { flex: 1; text-align: center; padding: 12px; font-weight: 600; color: #888; cursor: pointer; border-bottom: 2px solid transparent; } /* The selected tab and its underline were literal black, so in dark mode the one tab you had picked was the only one you could not read. */ .p-tab.active { color: var(--text-primary, #000); border-bottom: 2px solid var(--text-primary, #000); } /* ========================================================================== 14. MISC (Sheets, Thoughts, Offline) ========================================================================== */ .repost-sheet { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 430px; background: #fff; border-radius: 30px 30px 0 0; padding: 25px; z-index: 16000; transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -10px 40px rgba(0,0,0,0.1); } .repost-sheet.active { transform: translateX(-50%) translateY(0); } .sheet-btn { display: flex; align-items: center; gap: 15px; padding: 18px; background: #f8f8f8; border-radius: 15px; margin-bottom: 12px; font-weight: bold; cursor: pointer; } .share-sheet { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: #fff; border-radius: 30px 30px 0 0; z-index: 6000; display: none; flex-direction: column; animation: slideUpOverlay 0.3s; padding: 20px; box-shadow: 0 -10px 40px rgba(0,0,0,0.1); } .share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px; text-align: center; } /* Thought cloud floats at the avatar's top-right, like a thought bubble. */ .thought-cloud { position: absolute !important; left: 94px !important; bottom: 34px !important; top: auto !important; right: auto !important; transform: none !important; max-width: 168px; background: #fff; color: #000; padding: 8px 13px; border-radius: 16px 16px 16px 5px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 15px rgba(0,0,0,0.12); animation: thoughtBob 4s infinite ease-in-out; z-index: 20; cursor: pointer; white-space: nowrap; transition: background 0.3s, color 0.3s; } /* GIF/rich thoughts get a wider, wrapping card */ .thought-cloud.has-media { white-space: normal !important; width: 150px; padding: 7px !important; border-radius: 14px 14px 14px 5px !important; bottom: 30px !important; } /* Little trailing puffs pointing back down to the avatar */ .thought-cloud::before, .thought-cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; box-shadow: inherit; } .thought-cloud::before { width: 9px; height: 9px; bottom: -7px; left: 5px; } .thought-cloud::after { width: 5px; height: 5px; bottom: -15px; left: -2px; } @keyframes thoughtBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* The cloud is nowrap and capped at 168px, which suits a short thought but let the go-dark status run straight out past the white background. A status wraps instead of spilling. */ .thought-cloud.tf-cloud-status { white-space: normal !important; max-width: 176px; line-height: 1.35; display: flex; align-items: flex-start; gap: 6px; } .thought-cloud.tf-cloud-status i { margin-top: 2px; flex-shrink: 0; } [data-theme="dark"] .thought-cloud { background: #1e1e22 !important; color: #e5e5e5 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; border: 1px solid rgba(255,255,255,0.08) !important; } /* Dark mode for contact thought clouds in msg list */ [data-theme="dark"] .msg-row [style*="background:white"] { background: rgba(28,28,32,0.95) !important; color: #fff !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .msg-row [style*="background:white"] div { background: rgba(28,28,32,0.95) !important; } .settings-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid #f5f5f5; cursor: pointer; background: #fff; } .composer-tools { display: flex; gap: 20px; padding: 15px 20px; border-top: 1px solid #f0f0f0; color: #007AFF; font-size: 20px; margin-top: auto; } .offline-banner { position: absolute; top: 90px; left: 50%; transform: translateX(-50%) translateY(-100px); background: rgba(255, 59, 48, 0.9); color: white; padding: 10px 20px; border-radius: 20px; font-size: 13px; font-weight: 800; z-index: 6000; transition: 0.5s cubic-bezier(0.32, 0.72, 0, 1); backdrop-filter: blur(10px); } .offline-banner.active { transform: translateX(-50%) translateY(0); } /* CAMERA & PREVIEW OVERLAYS */ #camera-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 8000; display: none; } #camera-preview { width: 100%; height: 100%; object-fit: cover; } .cam-close { position: absolute; top: 30px; left: 20px; color: white; font-size: 30px; z-index: 2; cursor: pointer; text-shadow: 0 2px 5px rgba(0,0,0,0.5); } .cam-capture { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; border-radius: 50%; border: 5px solid white; background: rgba(255,255,255,0.3); z-index: 2; cursor: pointer; } /* ========================================================================== LIQUID GLASS TOGGLE SWITCH - FIX #4 ========================================================================== */ .toggle { width: 44px; height: 24px; background: #ccc; /* Off state - gray */ border-radius: 20px; position: relative; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; transition: background 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .toggle.active { background: #34C759; /* On state - green */ } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; /* Start on the left */ width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .toggle.active::after { left: 22px; /* Move to the right when active */ } /* ========================================================================== REELS SOUND TICKER - FIX #6 ========================================================================== */ .sound-ticker { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(15px) !important; border-radius: 25px !important; padding: 8px 15px !important; margin-top: 10px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; color: white !important; font-size: 13px !important; font-weight: 600 !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; transition: all 0.3s ease !important; } .sound-ticker:hover { background: rgba(0, 122, 255, 0.25) !important; border-color: rgba(0, 122, 255, 0.4) !important; } .sound-ticker i { color: #007AFF !important; /* Apple blue accent */ } /* Also fix the missing reel-sidebar */ .reel-sidebar { display: flex !important; flex-direction: column !important; gap: 20px !important; align-items: center !important; margin-bottom: 40px !important; } /* ========================================================================== SCROLLABLE MESSAGE HUB - STEP 7 ========================================================================== */ #msg-overlay .white-overlay { display: flex; flex-direction: column; } .msg-row { display: flex; gap: 15px; padding: 15px 20px; align-items: center; cursor: pointer; transition: 0.2s; border-bottom: 1px solid #f5f5f5; } .msg-row:hover { background: rgba(0, 122, 255, 0.03); /* Subtle apple blue hover */ } .app.not-authenticated { opacity: 0; visibility: hidden; pointer-events: none; } .app.authenticated { opacity: 1; visibility: visible; transition: opacity 0.5s ease; } .pull-indicator { text-align: center; padding: 15px; color: #007AFF; font-weight: 600; font-size: 13px; display: none; } .acct-type-card.selected { border-color: #007AFF !important; background: #111 !important; box-shadow: 0 0 20px rgba(0, 122, 255, 0.2); } .violations-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(255,149,0,0.12); color: #FF9500; } .restricted-badge { background: #FF9500; color: white; font-size: 10px; padding: 3px 8px; border-radius: 6px; font-weight: 800; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .child-safe-banner { background: linear-gradient(135deg, #34C759, #30D158); color: white; padding: 10px 20px; font-size: 12px; font-weight: 700; text-align: center; display: none; } .child-blocked-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); z-index: 5500; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; animation: popIn 0.3s; } /* ========================================================================== ACTIVITY HUB ========================================================================== */ .activity-tabs { display: flex; padding: 0 20px; gap: 0; border-bottom: 1px solid #f0f0f0; overflow-x: auto; } .activity-tab { padding: 14px 16px; font-weight: 700; color: #888; cursor: pointer; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.3s; } .activity-tab.active { color: #007AFF; border-bottom-color: #007AFF; } .activity-item { display: flex; gap: 12px; padding: 15px 20px; align-items: center; border-bottom: 1px solid #f5f5f5; animation: fadeUp 0.3s ease backwards; } .activity-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .calendar-picker { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 20px; padding: 20px; margin: 15px 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid #eee; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; margin-top: 10px; } .cal-day { padding: 10px 5px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .cal-day:hover { background: rgba(0, 122, 255, 0.1); } .cal-day.has-history { background: rgba(0, 122, 255, 0.1); color: #007AFF; } .cal-day.selected { background: #007AFF; color: white; } .cal-day.header { font-size: 11px; color: #888; font-weight: 800; cursor: default; } /* ========================================================================== ENHANCED SEARCH ========================================================================== */ .search-tabs { display: flex; padding: 10px 20px; gap: 10px; overflow-x: auto; } .search-tab { padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all 0.3s; background: #f0f0f0; color: #555; } .search-tab.active { background: #007AFF; color: white; } .search-result-section { padding: 10px 20px; } #discovery-page { overflow-x: hidden; overflow-y: auto; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; background: var(--bg-primary, #fff); display: none; /* ADD THIS */ } #discovery-page * { max-width: 100%; box-sizing: border-box; } .search-result-section h4 { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-weight: 800; } .hashtag-result { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; } .search-result-section { padding: 8px 16px; } .search-result-section h4 { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 800; } /* Fix stretched user rows in search */ #discovery-page .msg-row { padding: 10px 0 !important; border-bottom: 1px solid #f5f5f5; } #discovery-page .msg-row img { width: 40px !important; height: 40px !important; } .hashtag-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #007AFF, #34C759); display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 18px; } /* ========================================================================== PRIVACY & SECURITY SETTINGS ========================================================================== */ .settings-section-title { margin-top: 30px; font-size: 12px; font-weight: 800; color: #888; padding-left: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .settings-card { background: #fff; border-radius: 20px; border: 1px solid #eee; overflow: hidden; } .security-alert { background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), rgba(52, 199, 89, 0.05)); border: 1px solid rgba(0, 122, 255, 0.1); border-radius: 16px; padding: 15px; margin-bottom: 12px; display: flex; gap: 12px; align-items: flex-start; } .security-alert-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; } .device-card { display: flex; gap: 15px; padding: 15px 20px; align-items: center; border-bottom: 1px solid #f5f5f5; } .device-icon { width: 44px; height: 44px; border-radius: 12px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #007AFF; } .two-step-option { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border-bottom: 1px solid #f5f5f5; cursor: pointer; } .two-step-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; } /* ========================================================================== TRUST SCORE ========================================================================== */ .trust-score-ring { width: 120px; height: 120px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; } .trust-score-ring svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); } .trust-score-number { font-size: 36px; font-weight: 900; color: #007AFF; z-index: 2; } .trust-factor { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; } .trust-bar { width: 100px; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; } .trust-bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease; } /* ========================================================================== LOCAL CIRCLES ========================================================================== */ .local-map-placeholder { height: 200px; background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 20px; margin: 15px 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .local-pulse { width: 20px; height: 20px; background: #007AFF; border-radius: 50%; animation: pulseGlow 2s infinite; } .local-user-card { display: flex; gap: 12px; padding: 15px 20px; align-items: center; border-bottom: 1px solid #f5f5f5; } .distance-badge { background: rgba(0, 122, 255, 0.1); color: #007AFF; padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; } /* ========================================================================== AI SCANNER ========================================================================== */ .scan-result-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 20px; padding: 20px; margin: 15px 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid #eee; text-align: center; } .scan-progress { width: 100%; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; margin: 15px 0; } .scan-progress-bar { height: 100%; background: linear-gradient(90deg, #007AFF, #34C759); border-radius: 3px; transition: width 0.3s; width: 0%; } .authenticity-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 800; } .badge-authentic { background: rgba(52, 199, 89, 0.15); color: #34C759; } .badge-suspect { background: rgba(255, 149, 0, 0.15); color: #FF9500; } .badge-flagged { background: rgba(255, 59, 48, 0.15); color: #FF3B30; } /* ============================================ DARK MODE FIX - Complete Override ============================================ */ [data-theme="dark"] { /* Not pure black, and not tinted either. A true #000 page made the app look like a hole rather than a dark theme; the first pass at fixing that had a cool cast which read as navy sitting on black. These are neutral greys, each step lighter than the last so page → card → input reads as layers. */ --bg-primary: #121212; --bg-secondary: #1c1c1e; --bg-tertiary: #2c2c2e; --text-primary: #ffffff; --text-secondary: #a1a1a6; --text-tertiary: #78787d; --border-color: #2e2e30; --card-bg: #1c1c1e; --input-bg: #2c2c2e; --nav-bg: rgba(18, 18, 18, 0.95); --modal-bg: #1c1c1e; --hover-bg: #2c2c2e; /* Contact Info glass cards/tiles — dark (no white gloss) */ --cp-card-bg: rgba(30,30,34,0.72); --cp-card-border: rgba(255,255,255,0.08); --cp-card-shadow: 0 8px 28px rgba(0,0,0,0.5); --cp-header-bg: rgba(18,18,20,0.8); --cp-tile-bg: rgba(255,255,255,0.06); --cp-tile-border: rgba(255,255,255,0.09); --cp-tile-shadow: 0 2px 10px rgba(0,0,0,0.4); --cp-row-border: rgba(255,255,255,0.07); } [data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --bg-tertiary: #e8e8e8; --text-primary: #000000; --text-secondary: #666666; --text-tertiary: #999999; --border-color: #e0e0e0; --card-bg: #ffffff; --input-bg: #f5f5f5; --nav-bg: rgba(255, 255, 255, 0.95); --modal-bg: #ffffff; --hover-bg: #f0f0f0; /* Contact Info glass cards/tiles — light */ --cp-card-bg: rgba(255,255,255,0.62); --cp-card-border: rgba(0,0,0,0.05); --cp-card-shadow: 0 8px 28px rgba(0,0,0,0.08); --cp-header-bg: rgba(255,255,255,0.75); --cp-tile-bg: rgba(0,0,0,0.03); --cp-tile-border: rgba(0,0,0,0.06); --cp-tile-shadow: 0 2px 10px rgba(0,0,0,0.06); --cp-row-border: rgba(0,0,0,0.06); } /* Apply to ALL elements */ .app, #feed-panels, .post-card, .white-overlay, .settings-overlay, .settings-card, .settings-row, .header-container, .msg-header, .activity-item, .channel-card, .device-card, .trust-factor, .comment-input-bar, #comment-overlay, .local-user-card, .scan-result-card, .hashtag-result, .two-step-option, .request-card, .msg-row, .activity-tab, .cal-day, .search-tab { background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } /* Comment rows sit on the sheet rather than painting their own background. They used to take --bg-primary, which is pure black in dark mode, so every row was a black band on the sheet's lighter grey. */ .comment-item { background-color: transparent; color: var(--text-primary); transition: color 0.3s ease; } [data-theme="dark"] .app, [data-theme="dark"] #feed-panels { background-color: #000 !important; } [data-theme="dark"] .post-card, [data-theme="dark"] .white-overlay, [data-theme="dark"] .settings-card, [data-theme="dark"] .request-card { background-color: #1a1a1a !important; border-color: #333 !important; } [data-theme="dark"] .settings-row { background-color: #1a1a1a !important; border-color: #2a2a2a !important; } /* The feed header. This was pure black while every panel below it sits on #1a1a1a, so the top of the app read as a separate black slab. Matched to the same surface, and kept opaque so it stays that colour rather than darkening as black content scrolls under it. There is an earlier .header-container rule in this file too; both now agree. */ [data-theme="dark"] .header-container { background: #1a1a1a !important; border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .post-content, [data-theme="dark"] .brand-logo { color: #ffffff !important; } [data-theme="dark"] .post-info small, [data-theme="dark"] small { color: #888 !important; } [data-theme="dark"] #feed-panels { background: #000 !important; } [data-theme="dark"] .offline-banner { background: rgba(255,59,48,0.95); } [data-theme="dark"] .comment-input-bar { background: #1a1a1a !important; border-color: #2a2a2a !important; } [data-theme="dark"] .comment-input-bar input { background: var(--input-bg, #2c2c2e) !important; color: #fff !important; } [data-theme="dark"] #comment-overlay { background: var(--modal-bg, #1c1c1e) !important; } /* The header divider was a light-mode grey, which read as a hard line. */ [data-theme="dark"] .comment-header { border-bottom-color: #2a2a2a !important; } [data-theme="dark"] .activity-tabs { border-color: #333 !important; } [data-theme="dark"] .calendar-picker { background: #1a1a1a !important; border-color: #333 !important; } [data-theme="dark"] .cal-day { color: #fff !important; } [data-theme="dark"] .cal-day.header { color: #666 !important; } [data-theme="dark"] .search-tab { background: #1a1a1a !important; color: #aaa !important; } [data-theme="dark"] .search-tab.active { background: #007AFF !important; color: white !important; } [data-theme="dark"] .hashtag-result { border-color: #333 !important; } [data-theme="dark"] .settings-section-title { color: #666 !important; } [data-theme="dark"] .device-icon { background: #2a2a2a !important; } [data-theme="dark"] .trust-bar { background: #2a2a2a !important; } [data-theme="dark"] .trust-factor { border-color: #333 !important; } [data-theme="dark"] .local-user-card { border-color: #333 !important; } [data-theme="dark"] .scan-result-card { background: #1a1a1a !important; border-color: #333 !important; } [data-theme="dark"] .channel-card { border-color: #333 !important; } [data-theme="dark"] .two-step-option { border-color: #333 !important; } [data-theme="dark"] .device-card { border-color: #333 !important; } [data-theme="dark"] .msg-row { border-color: #222 !important; } [data-theme="dark"] .msg-row:hover { background: #1a1a1a !important; } [data-theme="dark"] .add-menu { background: rgba(28,28,30,0.98) !important; border-color: #333 !important; } [data-theme="dark"] .add-option { color: #fff !important; } [data-theme="dark"] .add-option:hover { background: #2a2a2a !important; } [data-theme="dark"] .repost-sheet { background: #1a1a1a !important; } [data-theme="dark"] .sheet-btn { background: #2a2a2a !important; color: #fff !important; } [data-theme="dark"] .post-menu-dropdown { background: #1a1a1a !important; border-color: #333 !important; } [data-theme="dark"] .pm-item { color: #fff !important; border-color: #2a2a2a !important; } [data-theme="dark"] .pm-item:hover { background: #2a2a2a !important; } /* ========================================================================== COMMENT SECTION ========================================================================== */ #comment-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 65%; background: #fff; border-radius: 25px 25px 0 0; z-index: 6500; display: none; flex-direction: column; animation: slideUpOverlay 0.35s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -10px 40px rgba(0,0,0,0.15); } .comment-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f0f0f0; } .comment-list { flex: 1; overflow-y: auto; padding: 10px 0; } .comment-item { display: flex; gap: 10px; padding: 12px 20px; animation: fadeUp 0.3s ease backwards; } .comment-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .comment-bubble { flex: 1; } .comment-bubble b { font-size: 13px; } .comment-bubble p { font-size: 14px; line-height: 1.4; margin-top: 2px; } .comment-bubble small { color: #aaa; font-size: 11px; margin-top: 4px; display: block; } .comment-input-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px max(10px, env(safe-area-inset-bottom, 10px)); border-top: 1px solid #f0f0f0; background: #fff; } .comment-input-bar input { flex: 1; border: none; outline: none; font-size: 15px; padding: 10px 15px; background: #f2f2f2; border-radius: 25px; } .comment-tools { display: flex; gap: 12px; color: #007AFF; font-size: 18px; } .comment-tools i { cursor: pointer; transition: transform 0.2s; } .comment-tools i:active { transform: scale(1.2); } /* GIF picker */ /* ========================================================================== "Your Algorithm" summary: each word arrives blurred and out of focus, then snaps in. Ours is blue rather than the purple other apps use. Once the whole line is written the gradient hands over to normal text, so the sentence stays readable instead of sitting there as decoration. ========================================================================== */ #algoSummary .algo-word { opacity: 0; filter: blur(7px); background: linear-gradient(92deg, #0A84FF 0%, #4DA6FF 45%, #5AC8FA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity 0.34s ease, filter 0.34s ease; will-change: opacity, filter; } #algoSummary .algo-word.in { opacity: 1; filter: blur(0); } /* Settled state: drop the gradient, become plain readable text. */ #algoSummary.algo-done .algo-word { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text-primary, #000); transition: color 0.5s ease; } @media (prefers-reduced-motion: reduce) { #algoSummary .algo-word { transition: none; opacity: 1; filter: none; } } /* Placeholders while the summary and interests are being worked out, so the page never sits blank or flashes stale tags before the real ones arrive. */ .algo-sk { background: var(--skeleton-bg, #e8e8e8); border-radius: 8px; animation: skeletonPulse 1.4s ease-in-out infinite; } /* GIF picker: a small sheet with a grab handle, a search field, and a scrolling two-column grid. The search field is its own row above the grid — it used to be injected as the grid's first cell, so the two-column layout squeezed it to half width and the GIFs deformed it. */ #gif-panel { border-radius: 18px 18px 0 0; background: var(--bg-primary, #fff); box-shadow: 0 -8px 24px rgba(0,0,0,0.10); overflow: hidden; } [data-theme="dark"] #gif-panel { background: #1a1a1a; } .gif-grab { width: 38px; height: 4px; border-radius: 3px; background: rgba(127,127,127,0.35); margin: 8px auto 4px; } .gif-search-wrap { display: flex; align-items: center; gap: 9px; margin: 6px 12px 8px; padding: 10px 14px; background: var(--input-bg, #f0f0f2); border-radius: 12px; } .gif-search-wrap i { color: #8a8a8e; font-size: 14px; flex-shrink: 0; } .gif-search-wrap input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 15px; color: var(--text-primary, #000); } [data-theme="dark"] .gif-search-wrap { background: #2a2a2e; } .gif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 12px 14px; max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .gif-grid img { width: 100%; border-radius: 10px; cursor: pointer; transition: transform 0.2s; } .gif-grid img:active { transform: scale(0.95); } /* ========================================================================== STORY VIEWER ========================================================================== */ #story-viewer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 8500; display: none; flex-direction: column; } .story-progress-bar { display: flex; gap: 4px; /* Stories are full-screen, so the progress pips and the user bar below them must clear the Dynamic Island / notch. */ padding: calc(env(safe-area-inset-top, 0px) + 15px) 15px 0; z-index: 10; } .story-seg { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 3px; overflow: hidden; } .story-seg-fill { height: 100%; background: #fff; width: 0%; transition: width 0.1s linear; } .story-user-bar { display: flex; align-items: center; gap: 10px; padding: 15px; z-index: 10; } .story-content { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; } .story-content img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .story-reply-bar { display: flex; align-items: center; gap: 10px; padding: 15px; z-index: 10; } .story-reply-bar input { flex: 1; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; padding: 12px 18px; border-radius: 25px; outline: none; font-size: 15px; } /* ========================================================================== LIVE STREAM ========================================================================== */ #live-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 8500; display: none; } .live-badge { background: #FF3B30; color: white; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 900; letter-spacing: 1px; } .live-viewers { background: rgba(0,0,0,0.5); color: white; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; backdrop-filter: blur(10px); } .live-comment-feed { position: absolute; bottom: 100px; left: 15px; width: 70%; max-height: 200px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; } .live-comment { background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 20px; color: white; font-size: 13px; animation: fadeUp 0.3s ease; } .live-tools { position: absolute; bottom: 30px; left: 0; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 15px; } .live-tools input { flex: 1; background: rgba(255,255,255,0.15); border: none; color: white; padding: 12px 18px; border-radius: 25px; outline: none; font-size: 14px; backdrop-filter: blur(10px); } .live-action-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; cursor: pointer; } /* ========================================================================== CHANNELS ========================================================================== */ .channel-card { display: flex; gap: 12px; padding: 15px 20px; align-items: center; border-bottom: 1px solid #f5f5f5; cursor: pointer; } .channel-icon { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: white; } .channel-badge { background: #007AFF; color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 700; } /* ========================================================================== FOLLOW BUTTON (Liquid Glass) ========================================================================== */ .follow-btn { background: rgba(255,255,255,0.2); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.3s; } .follow-btn:active { transform: scale(0.95); } .follow-btn.following { background: rgba(255,255,255,0.9); color: #000; border-color: transparent; } /* Feed follow button */ .feed-follow-btn { background: #007AFF; color: white; border: none; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.3s; } .feed-follow-btn.following { background: #f0f0f0; color: #333; } /* Clickable username */ .clickable-user { cursor: pointer; transition: color 0.2s; } .clickable-user:active { color: #007AFF; } /* Story ring - Apple Blue */ .ring-blue { width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #007AFF, #5AC8FA, #007AFF); } /* Content warning overlay */ .content-warning { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; color: white; text-align: center; padding: 20px; border-radius: 18px; } /* Smooth transitions for everything */ .white-overlay, .black-overlay { will-change: transform; } /* ============================================ SPLASH SCREEN WITH LOGO ============================================ */ #appSplashScreen { position: absolute; inset: 0; z-index: 100000; background: #000000; display: flex; align-items: center; justify-content: center; border-radius: inherit; overflow: hidden; transition: opacity 0.15s ease; } #appSplashScreen.fade-out { opacity: 0; pointer-events: none; } #appSplashScreen { position: absolute; inset: 0; z-index: 99999; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transition: opacity 0.5s ease; } #appSplashScreen.fade-out { opacity: 0; pointer-events: none; } #appSplashScreen .splash-mark { width: 150px; height: 150px; overflow: visible; } /* Each piece starts off-screen along the shear axis the mark is built on and slides home. The offsets are that axis, 9 across to 7 down, times a distance; they are in viewBox units, not pixels, so they scale with the mark. */ #appSplashScreen .splash-piece { opacity: 0; } #appSplashScreen #splashWing { animation: tfPieceWing .52s cubic-bezier(.2,.9,.25,1) .06s forwards; } #appSplashScreen #splashHead { animation: tfPieceHead .52s cubic-bezier(.2,.9,.25,1) .17s forwards; } #appSplashScreen #splashStem { animation: tfPieceStem .52s cubic-bezier(.2,.9,.25,1) .28s forwards; } @keyframes tfPieceWing { from { opacity: 0; transform: translate(-363.1px, 282.4px); } to { opacity: 1; transform: none; } } @keyframes tfPieceHead { from { opacity: 0; transform: translate(363.1px, -282.4px); } to { opacity: 1; transform: none; } } @keyframes tfPieceStem { from { opacity: 0; transform: translate(-272.3px, 211.8px); } to { opacity: 1; transform: none; } } #appSplashScreen .splash-text { color: white; font-size: 15px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; opacity: 0; margin-top: 26px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; animation: splashFadeIn 0.38s ease 0.62s forwards; } /* Referenced by .splash-text and never defined, so the wordmark under the logo animated to a keyframe that did not exist: it kept its opacity:0 and has never once been visible on the splash. */ @keyframes splashFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes splashScaleIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } #chat-list-content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 80px; } /* Base navigation screens — must sit BELOW their child overlays */ #msg-overlay { z-index: 5000 !important; } #contacts-overlay { z-index: 5200 !important; } #notif-overlay { z-index: 5300 !important; } #profile-overlay { z-index: 5600 !important; } /* Settings sub-overlays always above settings overlay */ #activity-overlay { z-index: 6500 !important; } #privacy-overlay, #security-overlay { z-index: 6200 !important; } #trust-score-overlay, #local-circles-overlay, #ai-scanner-overlay, #privacy-center-overlay, #language-overlay, #change-password-overlay, #qr-overlay { z-index: 7500 !important; } .settings-sub-overlay { z-index: 8000 !important; } #comment-overlay { z-index: 8500 !important; } #contact-profile-overlay { z-index: 8200 !important; } #cp-privacy-overlay { z-index: 8600 !important; } #story-viewer, #live-overlay { z-index: 8700 !important; } #camera-overlay, #lgCameraPage { z-index: 9000 !important; } #call-overlay { z-index: 9500 !important; } #goDarkModal, #realOneModal, #lgPostMenuOverlay, #reelLongPressMenu { z-index: 15000 !important; } [data-theme="dark"] #lgPostMenuOverlay > div > div > div[style*="rgba(255,255,255,0.72)"], [data-theme="dark"] #lgPostMenuSheet > div[style*="rgba(255,255,255,0.72)"] { background: rgba(30,30,32,0.88) !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 1.5px 0 rgba(255,255,255,0.06) inset !important; } [data-theme="dark"] #lgPostMenuOverlay span[style*="font-size:15px"] { color: #e5e5e5 !important; } #toastNotif { z-index: 99999 !important; } #appSplashScreen { z-index: 100000 !important; } /* Screen-safe sub-overlays */ .settings-sub-overlay { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--bg-secondary, #f2f2f7); z-index: 8500; display: none; flex-direction: column; overflow: hidden; box-sizing: border-box; } .settings-sub-overlay .sub-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 100px; box-sizing: border-box; } /* Bar chart */ .bar-chart-wrap { display:flex; align-items:flex-end; gap:6px; height:120px; padding:0 4px; } .bar-chart-wrap .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; } .bar-chart-wrap .bar-fill { width:100%; border-radius:8px 8px 0 0; transition:height 0.6s cubic-bezier(0.34,1.56,0.64,1); } .bar-chart-wrap .bar-label { font-size:10px; color:#888; font-weight:700; } /* Delete account scroll fix */ #deleteAccountOverlay { overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; max-height:100dvh !important; height:100dvh !important; top:0 !important; bottom:0 !important; } /* Reels scroll fix */ #reel-overlay { overflow: hidden !important; } /* The viewer a feed video opens uses the same clip card, so it takes the same rules — that is what keeps the two from drifting apart again. */ #reel-scroller, #tfClipScroller { height: 100% !important; overflow-y: scroll !important; scroll-snap-type: y mandatory !important; -webkit-overflow-scrolling: touch !important; } #tfClipScroller::-webkit-scrollbar { display: none; } #reel-scroller .reel-page, #tfClipScroller .reel-page { height: 100% !important; scroll-snap-align: start !important; position: relative !important; overflow: hidden !important; flex-shrink: 0 !important; } /* Only the full-bleed media image (direct child) fills the page — NOT nested UI images like the author avatar, which keep their own sizing. */ #reel-scroller .reel-page > img, #tfClipScroller .reel-page > img { width: 100% !important; height: 100% !important; object-fit: cover !important; } #reel-scroller .reel-action, #tfClipScroller .reel-action { text-align: center; font-size: 11px; font-weight: bold; margin-bottom: 20px; cursor: pointer; } #reel-scroller .reel-action i, #tfClipScroller .reel-action i { font-size: 30px; margin-bottom: 5px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); display: block; } [data-theme="dark"] #contact-profile-overlay, [data-theme="dark"] #cp-privacy-overlay { background: #111 !important; } [data-theme="dark"] #contact-profile-overlay > div > div[style*="sticky"], [data-theme="dark"] #cp-privacy-overlay > div[style*="sticky"] { background: rgba(18,18,18,0.88) !important; border-bottom-color: rgba(255,255,255,0.06) !important; } /* ── CHANNEL BROADCAST ── */ #ch-broadcast { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-primary, #fff); z-index: 5500; display: none; flex-direction: column; animation: slideUpOverlay 0.4s cubic-bezier(0.32, 0.72, 0, 1); overflow: hidden; } [data-theme="dark"] #ch-broadcast { background: #0a0a0a !important; } .ch-pill-header { display: flex; align-items: center; gap: 10px; margin: 55px 16px 0; padding: 10px 16px; background: rgba(255,255,255,0.55); backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%); border: 0.5px solid rgba(255,255,255,0.7); border-radius: 50px; box-shadow: 0 6px 24px rgba(0,0,0,0.07), 0 1.5px 0 rgba(255,255,255,0.8) inset; } [data-theme="dark"] .ch-pill-header { background: rgba(28,28,32,0.72) !important; border-color: rgba(255,255,255,0.09) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.07) inset !important; } .ch-glass-card { margin: 10px 16px 0; background: rgba(255,255,255,0.65); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 0.5px solid rgba(255,255,255,0.8); border-radius: 22px; box-shadow: 0 4px 20px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.9) inset; overflow: hidden; animation: popIn 0.4s ease backwards; } [data-theme="dark"] .ch-glass-card { background: rgba(28,28,32,0.70) !important; border-color: rgba(255,255,255,0.09) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important; } .ch-reaction-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255,255,255,0.4); backdrop-filter: blur(20px); border-top: 0.5px solid rgba(255,255,255,0.5); flex-wrap: wrap; } [data-theme="dark"] .ch-reaction-bar { background: rgba(28,28,32,0.4) !important; border-top-color: rgba(255,255,255,0.07) !important; } .ch-react-btn { padding: 5px 12px; border-radius: 20px; cursor: pointer; border: 0.5px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.6); font-size: 13px; font-weight: 600; backdrop-filter: blur(10px); transition: transform 0.15s, background 0.2s; color: var(--text-primary, #000); } .ch-react-btn:active { transform: scale(0.92); } [data-theme="dark"] .ch-react-btn { background: rgba(40,40,44,0.6) !important; border-color: rgba(255,255,255,0.08) !important; color: #e5e5e5 !important; } /* ── LIQUID GLASS CAMERA ── */ #lgCameraPage { position:absolute; top:0; left:0; right:0; bottom:0; z-index:8500; background:#000; overflow:hidden; display:none; } #liveSettingsPage { position:absolute; top:0; left:0; right:0; bottom:0; z-index:9200; background:rgba(0,0,0,0.8); overflow:hidden; } #lgCameraPage.active { display:block; } .lg-btn { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.22); backdrop-filter:blur(30px) saturate(200%); -webkit-backdrop-filter:blur(30px) saturate(200%); border:0.5px solid rgba(255,255,255,0.45); box-shadow:0 4px 12px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.5) inset; display:flex; align-items:center; justify-content:center; cursor:pointer; color:white; font-size:18px; transition:all 0.2s; -webkit-tap-highlight-color:transparent; } .lg-btn:active { transform:scale(0.88); background:rgba(255,255,255,0.32); } .dur-pill { padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; color:rgba(255,255,255,0.65); background:rgba(255,255,255,0.12); backdrop-filter:blur(20px); border:0.5px solid rgba(255,255,255,0.2); transition:all 0.2s; -webkit-tap-highlight-color:transparent; } .dur-pill.active { background:rgba(255,255,255,0.9); color:#000; box-shadow:0 2px 8px rgba(0,0,0,0.25); } .dur-pill:active { transform:scale(0.93); } .shutter-ring { width:76px; height:76px; border-radius:50%; border:3.5px solid rgba(255,255,255,0.88); background:rgba(255,255,255,0.15); backdrop-filter:blur(20px); box-shadow:0 8px 28px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.45) inset; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; -webkit-tap-highlight-color:transparent; } .shutter-ring:active { transform:scale(0.92); } .shutter-dot { width:58px; height:58px; border-radius:50%; background:white; box-shadow:0 2px 10px rgba(0,0,0,0.25); transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); } .shutter-dot.rec { background:#FF3B30; border-radius:10px; width:30px; height:30px; } .cam-audio-pill { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.18); backdrop-filter:blur(30px); border:0.5px solid rgba(255,255,255,0.35); border-radius:30px; padding:7px 14px; cursor:pointer; max-width:190px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.18); } .cam-audio-pill span { color:white; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @keyframes recPulse { 0%,100%{opacity:1} 50%{opacity:0.4} } [data-theme="dark"] #contact-profile-overlay > div[style*="rgba(255,255,255,0.55)"], [data-theme="dark"] #contact-profile-overlay > div > div[style*="rgba(255,255,255,0.55)"], [data-theme="dark"] #contact-profile-overlay > div > div > div[style*="rgba(255,255,255,0.55)"] { background: rgba(28,28,32,0.72) !important; border-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] #contact-profile-overlay div[style*="rgba(255,255,255,0.65)"] { background: rgba(38,38,44,0.75) !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] #contact-profile-overlay div[style*="rgba(0,0,0,0.06)"] { border-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] #contact-profile-overlay div[style*="sticky"] { background: rgba(18,18,18,0.88) !important; border-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] #thoughtsOverlay { background: rgba(10,10,12,0.97) !important; } [data-theme="dark"] #thoughtBubbleCard { background: rgba(28,28,32,0.85) !important; border-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] #thoughtInput { color: #fff !important; } [data-theme="dark"] #thoughtGifSheet, [data-theme="dark"] #thoughtMusicHub { background: rgba(18,18,18,0.94) !important; border-top-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] #thoughtGifSheet [style*="position:sticky"], [data-theme="dark"] #thoughtMusicHub [style*="position:sticky"] { background: rgba(22,22,26,0.95) !important; border-bottom-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] #gifSearchInput, [data-theme="dark"] #musicSearchInput { color: #fff !important; } [data-theme="dark"] #thoughtAudienceMenu { background: rgba(28,28,32,0.92) !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] #thoughtAudienceMenu div b { color: #fff !important; } [data-theme="dark"] #thoughtMusicHub { background: rgba(18,18,18,0.94) !important; border-top-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] #thoughtMusicHub [style*="position:sticky"] { background: rgba(22,22,26,0.97) !important; border-bottom-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] #thoughtMusicHub [style*="position:sticky"] h3 { color: #fff !important; } [data-theme="dark"] #realMusicSearch { color: #fff !important; } [data-theme="dark"] #thoughtMusicHub [style*="rgba(0,0,0,0.06)"] { background: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .music-genre-pill { background: rgba(40,40,44,0.8) !important; color: #aaa !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] #musicNowPlaying { background: rgba(0,122,255,0.12) !important; border-bottom-color: rgba(0,122,255,0.2) !important; } [data-theme="dark"] #thoughtMusicHub [id^="playBtn_"] { background: rgba(40,40,44,0.8) !important; border-color: rgba(255,255,255,0.1) !important; box-shadow: 2px 2px 8px rgba(0,0,0,0.4) !important; } [data-theme="dark"] #thoughtMusicHub b { color: #fff !important; } [data-theme="dark"] #shimmerStyle + div [style*="linear-gradient(90deg,#f0f0f0"] { background: linear-gradient(90deg,#2a2a2e 25%,#333338 50%,#2a2a2e 75%) !important; } /* Force audio to speaker not earpiece on mobile */ #tfMusicAudioEl { display: none !important; position: absolute !important; width: 0 !important; height: 0 !important; } /* Vinyl spin for thought bubble album art */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Sound bar pulse */ @keyframes soundPulse { 0%, 100% { height: 4px; } 50% { height: 16px; } } /* Thought music sticker dark mode */ [data-theme="dark"] #thoughtMusicSticker { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.12) !important; } [data-theme="dark"] #thoughtSongTitle { color: #fff !important; } [data-theme="dark"] #thoughtMusicSticker .sbar { background: #0A84FF !important; } /* Spin animation for vinyl */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ===================================================== LIQUID GLASS THOUGHT VIEWER ===================================================== */ @keyframes lyricsScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-60%); } } @keyframes musicPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,122,255,0.4), 0 8px 32px rgba(0,0,0,0.3); } 50% { box-shadow: 0 0 0 18px rgba(0,122,255,0), 0 8px 32px rgba(0,0,0,0.3); } } .thought-viewer-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 12000; animation: slideUpOverlay 0.45s cubic-bezier(0.32,0.72,0,1); } .tv-glass-pane { background: rgba(10,10,14,0.88); backdrop-filter: blur(60px) saturate(220%) brightness(0.9); -webkit-backdrop-filter: blur(60px) saturate(220%) brightness(0.9); border-radius: 32px 32px 0 0; border-top: 0.5px solid rgba(255,255,255,0.15); box-shadow: 0 -24px 80px rgba(0,0,0,0.7), 0 -1px 0 rgba(255,255,255,0.06) inset; padding: 0 0 52px; overflow: hidden; } .tv-music-bubble { margin: 18px 20px; background: linear-gradient(135deg,rgba(0,122,255,0.28),rgba(88,86,214,0.22)); border: 0.5px solid rgba(0,122,255,0.35); border-radius: 24px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; animation: musicPulse 2.5s infinite; box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06) inset; } .tv-vinyl { width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(#1a1a2e 0deg 40deg, #344 40deg 80deg, #1a1a2e 80deg 120deg, #344 120deg 160deg, #1a1a2e 160deg 200deg, #344 200deg 240deg, #1a1a2e 240deg 280deg, #344 280deg 320deg, #1a1a2e 320deg 360deg); border: 2.5px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: spinRepost 3s linear infinite; box-shadow: 0 4px 16px rgba(0,0,0,0.5); } .tv-reply-bar { margin: 0 16px; background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 0.5px solid rgba(255,255,255,0.14); border-radius: 30px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.07) inset; } /* ── Screen-safe sub-overlays ── */ .settings-sub-overlay { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--bg-secondary, #f2f2f7); z-index: 8500; display: none; flex-direction: column; overflow: hidden; box-sizing: border-box; animation: slideUpOverlay 0.38s cubic-bezier(0.32,0.72,0,1); } [data-theme="dark"] .settings-sub-overlay { background: #0a0a0a !important; } /* 29 sub-page headers hardcode the same light bar inline, so dark mode left a white strip on a black page: Preferred Content, Privacy, TrustCircle, Blocked Accounts, Sync Contacts, Media Quality, Accessibility, Device Permissions, Like & Share Counts and the rest. They sit under different parents (.settings-sub-overlay and .white-overlay), so this matches the hardcoded colour itself and catches every one. Inline styles beat stylesheets, hence !important. */ [data-theme="dark"] [style*="rgba(242,242,247,0.92)"], [data-theme="dark"] [style*="rgba(242, 242, 247, 0.92)"] { background: rgba(20, 20, 22, 0.92) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* Those same 29 headers hardcode `padding:14px 20px`, so their content sat under the status bar / Dynamic Island with viewport-fit=cover. This lifts every one of them below the safe area in a single rule. !important because the inline padding shorthand would otherwise win. */ [style*="rgba(242,242,247,0.92)"], [style*="rgba(242, 242, 247, 0.92)"] { padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important; } .settings-sub-overlay .sub-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px 100px; box-sizing: border-box; } /* ── Bar chart ── */ .tf-bar-chart { display:flex; align-items:flex-end; gap:5px; height:110px; padding:0 2px; } .tf-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; } .tf-bar-fill { width:100%; border-radius:8px 8px 0 0; min-height:4px; } .tf-bar-lbl { font-size:9px; color:#888; font-weight:700; text-align:center; } /* ── Notification category row ── */ .notif-cat-row { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border-color,#f0f0f0); cursor:pointer; } .notif-cat-row:last-child { border-bottom:none; } /* ── Trust Circle member row ── */ .tc-member-row { display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid var(--border-color,#f0f0f0); } .tc-radio { width:26px; height:26px; border-radius:50%; border:2px solid #007AFF; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; } .tc-radio.checked { background:#007AFF; } /* ── Blocked account row ── */ .blocked-row { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border-color,#f0f0f0); } /* ── Restricted account row ── */ .restricted-row { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border-color,#f0f0f0); } /* ── Permission row ── */ .perm-row { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-color,#f0f0f0); cursor:pointer; } /* ── Help row ── */ .help-row { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--border-color,#f0f0f0); cursor:pointer; } /* ── Account status row ── */ .acct-status-row { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--border-color,#f0f0f0); } /* ── Fix white-overlay height ── */ .white-overlay { max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; pointer-events: none; } .white-overlay[style*="display: flex"], .white-overlay[style*="display:flex"], .white-overlay[style*="display: block"], .white-overlay[style*="display:block"] { pointer-events: auto; } /* ── Keep body-level full-screen overlays inside the centered phone frame on wider screens. Mobile (<=430px) is unaffected — they are full-width there by design. Centering uses calc(left) instead of transform so the slideUpOverlay open animation (which animates transform) is not broken. ── */ @media (min-width: 431px) { #saved-overlay, #archive-overlay, #live-overlay, #wallet-overlay, #channels-overlay, #drafts-overlay, #scheduled-overlay, #groups-overlay, #group-page-overlay, #notif-overlay, #contact-profile-overlay, #share-sheet, #repost-sheet { max-width: 430px !important; left: calc(50% - 215px) !important; right: auto !important; } } /* ── Fix delete account overlay ── */ #deleteAccountOverlay { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* ── Fix time management ── */ #timeManagementOverlay, #liveScheduleOverlay { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; height: 100% !important; max-height: 100% !important; } [data-theme="dark"] .notif-cat-row, [data-theme="dark"] .tc-member-row, [data-theme="dark"] .blocked-row, [data-theme="dark"] .restricted-row, [data-theme="dark"] .perm-row, [data-theme="dark"] .help-row, [data-theme="dark"] .acct-status-row { border-color: #1e1e1e !important; } /* ── SAVED LIBRARY ── */ .saved-filter-pill { padding: 8px 18px; border-radius: 25px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; background: var(--bg-secondary, #f0f0f0); color: var(--text-secondary, #666); transition: all 0.22s ease; flex-shrink: 0; } .saved-filter-pill.active { background: #007AFF; color: white; } [data-theme="dark"] .saved-filter-pill { background: #2a2a2a !important; color: #aaa !important; } [data-theme="dark"] .saved-filter-pill.active { background: #007AFF !important; color: white !important; } /* === SOUNDTRACK SHEET === */ .soundtrack-sheet { position: absolute; bottom: 0; left: 0; width: 100%; background: #0a0a0e; border-radius: 32px 32px 0 0; border-top: 0.5px solid rgba(255,255,255,0.12); box-shadow: 0 -24px 80px rgba(0,0,0,0.7); z-index: 12500; animation: slideUpOverlay 0.4s cubic-bezier(0.32,0.72,0,1); padding-bottom: 52px; } .waveform-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; cursor: pointer; } .waveform-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 40px; background: white; border-radius: 2px; cursor: pointer; } .waveform-slider::-webkit-slider-runnable-track { height: 40px; border-radius: 8px; background: linear-gradient(90deg, rgba(0,122,255,0.8) var(--pct,30%), rgba(255,255,255,0.08) var(--pct,30%)); } .liquid-glass-waveform { background: linear-gradient(135deg,rgba(0,122,255,0.35),rgba(88,86,214,0.28),rgba(0,199,255,0.22)); border-radius: 12px; padding: 8px 0; box-shadow: 0 0 30px rgba(0,122,255,0.25) inset; } /* === MESSAGE LONG PRESS === */ .msg-reaction-bar { display: flex; align-items: center; gap: 4px; background: rgba(28,28,32,0.88); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 30px; padding: 8px 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.07) inset; } /* Emoji glyphs sit taller than their font size, so with no line-height the tops and tails were being clipped. Give them room and an even box. */ .msg-react-emoji { font-size: 24px; line-height: 1.4; cursor: pointer; padding: 5px 7px; min-width: 38px; text-align: center; border-radius: 50%; transition: transform 0.15s; -webkit-tap-highlight-color: transparent; } .msg-react-emoji:active { transform: scale(1.3); } .msg-context-menu { background: rgba(28,28,32,0.92); backdrop-filter: blur(50px) saturate(200%); -webkit-backdrop-filter: blur(50px) saturate(200%); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.07) inset; min-width: 200px; } .msg-ctx-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; border-bottom: 0.5px solid rgba(255,255,255,0.06); transition: background 0.15s; } .msg-ctx-row:last-child { border-bottom: none; } .msg-ctx-row:active { background: rgba(255,255,255,0.06); } /* Admin-only bar */ .admin-only-bar { display: flex; align-items: center; justify-content: center; padding: 12px 20px; background: var(--bg-secondary, rgba(0,0,0,0.04)); border-top: 0.5px solid var(--border-color, #f0f0f0); } /* Global pin bar */ .global-pin-bar { background: rgba(0,122,255,0.06); border-bottom: 0.5px solid rgba(0,122,255,0.15); padding: 10px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; } /* Reply thread indicator */ .reply-thread-indicator { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; padding-left: 4px; } .reply-thread-bar { width: 3px; border-radius: 2px; flex-shrink: 0; align-self: stretch; min-height: 20px; } .comment-ctx-overlay { position:absolute;bottom:0;left:0;right:0;top:0; z-index:9999;background:rgba(0,0,0,0.45); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); } .comment-ctx-sheet { position:absolute;bottom:0;left:0;right:0; background:rgba(22,22,26,0.9); backdrop-filter:blur(50px) saturate(200%); -webkit-backdrop-filter:blur(50px) saturate(200%); border-radius:28px 28px 0 0; border-top:0.5px solid rgba(255,255,255,0.1); box-shadow:0 -20px 60px rgba(0,0,0,0.55); padding:12px 0 48px; animation:slideUpOverlay 0.32s cubic-bezier(0.32,0.72,0,1); } .comment-ctx-row { display:flex;align-items:center;gap:14px; padding:15px 24px;cursor:pointer; border-bottom:0.5px solid rgba(255,255,255,0.06); transition:background 0.15s; } .comment-ctx-row:last-child{border-bottom:none;} .comment-ctx-row:active{background:rgba(255,255,255,0.06);} @keyframes heartPop { 0%{transform:scale(0);opacity:0} 60%{transform:scale(1.4)} 100%{transform:scale(1);opacity:1} } @keyframes laughShake { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} } @keyframes surpriseBig { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} } @keyframes sadDrop { 0%{transform:translateY(-10px);opacity:0} 100%{transform:translateY(0);opacity:1} } @keyframes prayFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} } @keyframes clapBounce { 0%,100%{transform:scale(1)} 40%{transform:scale(1.3) rotate(-10deg)} 70%{transform:scale(0.9) rotate(5deg)} } @keyframes partyBurst { 0%{transform:scale(0) rotate(-30deg);opacity:0} 60%{transform:scale(1.25) rotate(10deg);opacity:1} 100%{transform:scale(1) rotate(0deg);opacity:1} } @keyframes hundredSpin { 0%{transform:rotate(-360deg) scale(0);opacity:0} 70%{transform:rotate(10deg) scale(1.2)} 100%{transform:rotate(0deg) scale(1);opacity:1} } #circularVideoRecorder { position:absolute;top:0;left:0;right:0;bottom:0;z-index:10000; background:#000;display:none;flex-direction:column;align-items:center;justify-content:center; } #circularVideoRecorder video { width:260px;height:260px;border-radius:50%;object-fit:cover; border:4px solid rgba(255,255,255,0.3);box-shadow:0 0 0 20px rgba(0,0,0,0.4); } @keyframes vaporize { 0% { opacity:1; transform:scale(1) translateX(0); filter:blur(0); } 30% { opacity:0.8; transform:scale(1.03) translateX(0); filter:blur(0); } 60% { opacity:0.4; transform:scale(0.92) translateX(6px); filter:blur(3px); } 100%{ opacity:0; transform:scale(0.6) translateX(20px) skewX(10deg); filter:blur(14px); } } .vaporizing { animation: vaporize 0.62s cubic-bezier(0.4,0,1,1) forwards !important; pointer-events:none !important; } .violations-badge { display:inline-flex;align-items:center;gap:4px; background:rgba(255,59,48,0.12);color:#FF3B30; padding:3px 10px;border-radius:10px; font-size:11px;font-weight:800; } [data-theme="dark"] #shareModalSheet, [data-theme="dark"] .share-sheet { background: #1c1c1e !important; color: #fff !important; } [data-theme="dark"] .share-option-label { color: #e5e5e5 !important; } #live-viewer-overlay .live-comment, #live-overlay .live-comment { background: rgba(0,0,0,0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 7px 13px; border-radius: 20px; color: white; font-size: 13px; animation: fadeUp 0.3s ease; width: fit-content; max-width: 100%; } @keyframes liveGiftFloat { 0% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-160px) scale(1.5) rotate(12deg); } } /* ===== WELLBEING MODULES OVERLAY ===== */ #wellbeing-modules-overlay { background: var(--bg-secondary,#f2f2f7); overflow-y:auto; } [data-theme="dark"] #wellbeing-modules-overlay { background:#0a0a0a; } .wb-module-cards { padding:16px; display:flex; flex-direction:column; gap:16px; padding-bottom:100px; } .vibe-card { background:#ede9f6; border-radius:24px; padding:20px; position:relative; overflow:visible; } [data-theme="dark"] .vibe-card { background:#1e1a2e; } .vibe-dropzone { border:2px dashed #a78bfa; border-radius:30px; height:54px; display:flex; align-items:center; justify-content:center; color:#a78bfa; font-size:13px; font-weight:600; margin:12px 0; transition:all 0.2s; } .vibe-dropzone.dragover { background:rgba(167,139,250,0.15); border-color:#7c3aed; transform:scale(1.02); } .vibe-dropzone.filled { border-style:solid; border-color:#7c3aed; background:rgba(167,139,250,0.1); } .vibe-tags-cluster { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .vibe-tag { padding:8px 16px; border-radius:20px; font-size:13px; font-weight:700; cursor:grab; touch-action:none; transition:transform 0.15s,box-shadow 0.15s; user-select:none; display:inline-block; position:relative; } .vibe-tag.lifted { transform:scale(1.07); box-shadow:0 8px 24px rgba(0,0,0,0.22); cursor:grabbing; z-index:999; } .breathe-card { background:linear-gradient(145deg,#1e6fcc,#2d8de8); border-radius:24px; padding:20px; position:relative; overflow:hidden; min-height:190px; } .breathe-bg-blob { position:absolute; border-radius:50%; filter:blur(50px); pointer-events:none; } .breathe-circle-btn { width:44px;height:44px;background:rgba(255,255,255,0.2);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.4); border-radius:50%;display:flex;align-items:center;justify-content:center; cursor:pointer;transition:transform 0.2s; } .breathe-circle-btn:active { transform:scale(0.9); } @keyframes blobShift { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(10px,-8px) scale(1.1);} 66%{transform:translate(-8px,6px) scale(0.95);} } @keyframes breatheExpand { 0%,100%{transform:scale(1);} 50%{transform:scale(1.55);} } @keyframes breatheRipple { 0%{transform:scale(1);opacity:0.5;} 100%{transform:scale(2.2);opacity:0;} } /* ============================================================ DISCOVER / FOLLOW SCREEN ============================================================ */ .ds-tab { flex: 1; padding: 14px 0; border: none; background: transparent; font-size: 15px; font-weight: 600; color: var(--text-secondary, #888); cursor: pointer; transition: color 0.2s; position: relative; } .ds-tab.active { color: var(--text-primary, #000); font-weight: 700; } #ds-tab-indicator { position: absolute; bottom: 0; left: 0; height: 2px; width: 50%; background: var(--text-primary, #000); border-radius: 2px 2px 0 0; transition: left 0.25s cubic-bezier(0.4,0,0.2,1); } .ds-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border-color, #e0e0e0); background: var(--bg-primary, #fff); color: var(--text-primary, #000); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.18s; flex-shrink: 0; } .ds-pill.active { background: var(--text-primary, #000); color: var(--bg-primary, #fff); border-color: var(--text-primary, #000); } [data-theme="dark"] .ds-pill.active { background: #fff; color: #000; border-color: #fff; } .ds-user-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 0.5px solid var(--border-color, #f0f0f0); animation: dsFadeIn 0.3s ease both; } @keyframes dsFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ds-follow-btn { padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--text-primary, #000); background: transparent; color: var(--text-primary, #000); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.18s; flex-shrink: 0; white-space: nowrap; } .ds-follow-btn.followed { background: var(--text-primary, #000); color: var(--bg-primary, #fff); } [data-theme="dark"] .ds-follow-btn.followed { background: #fff; color: #000; border-color: #fff; } .ds-skeleton { background: var(--border-color, #eee); border-radius: 8px; animation: dsPulse 1.4s ease infinite; } @keyframes dsPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } #ds-pills-row::-webkit-scrollbar { display: none; } .sounds-card { background:#0e2a4a; border-radius:24px; padding:20px; position:relative; overflow:hidden; min-height:190px; } .sounds-mute-btn { width:44px;height:44px;background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);border-radius:50%; display:flex;align-items:center;justify-content:center; cursor:pointer;flex-shrink:0;transition:background 0.2s; } .sounds-mute-btn.playing { background:rgba(255,255,255,0.2); } .sounds-mute-btn:active { background:rgba(255,255,255,0.3); } .sounds-vis-bar { flex:1; background:rgba(255,255,255,0.5); border-radius:2px; height:4px; max-width:6px; transition:height 0.08s ease; } .sounds-dot { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.25);cursor:pointer;transition:background 0.2s; } .sounds-dot.active { background:white; } @keyframes rippleOut { 0%{transform:translate(-50%,-50%) scale(0.5);opacity:0.4;} 100%{transform:translate(-50%,-50%) scale(3.5);opacity:0;} } /* ===== FOLLOWERS SCREEN ===== */ #followers-screen { background:var(--bg-primary,#fff); z-index:6200; } .fs-header { display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;border-bottom:0.5px solid var(--border-color,rgba(0,0,0,0.08));flex-shrink:0; } .fs-tabs { display:flex;padding:0 16px;border-bottom:0.5px solid var(--border-color,rgba(0,0,0,0.08));flex-shrink:0; } .fs-tab { flex:1;text-align:center;padding:12px 0;font-size:15px;font-weight:600;color:#888;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s; } .fs-tab.active { color:var(--text-primary,#000);border-bottom-color:#007AFF; } .fs-search { display:flex;align-items:center;gap:10px;margin:10px 16px;background:var(--bg-secondary,#f2f2f7);border-radius:12px;padding:10px 14px;flex-shrink:0; } .fs-search input { flex:1;border:none;background:transparent;outline:none;font-size:15px;color:var(--text-primary,#000);-webkit-user-select:text;user-select:text; } .fs-list { flex:1;overflow-y:auto;padding-bottom:80px; } .fs-user-row { display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:0.5px solid var(--border-color,rgba(0,0,0,0.06));animation:fadeUp 0.3s ease both; } .fs-avatar { width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0; } .fs-user-info { flex:1;min-width:0; } .fs-name { font-size:15px;font-weight:700;color:var(--text-primary,#000);display:flex;align-items:center;gap:4px; } .fs-handle { font-size:13px;color:#888;display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap; } .fs-follows-badge { background:#222;color:#ccc;font-size:10px;font-weight:600;padding:2px 7px;border-radius:8px; } [data-theme="dark"] .fs-follows-badge { background:#333; } .fs-bio { font-size:13px;color:var(--text-secondary,#555);margin-top:3px;line-height:1.4;word-break:break-word; } /* nowrap and no shrinking: "Follow back" is longer than "Follow" and was wrapping onto two lines in a row that has an avatar and a name competing for width. */ .fs-follow-btn { padding:7px 16px;border-radius:20px;border:1.5px solid var(--border-color,#ddd);background:transparent;color:var(--text-primary,#000);cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap;flex-shrink:0; } #chat-body.bubble-focused .chat-bubble:not(.focused) { filter: blur(3px); opacity: 0.4; transition: all 0.2s; } .msg-reaction-bar { display:flex; align-items:center; background:rgba(30,30,30,0.95); border-radius:50px; padding:8px 12px; gap:4px; box-shadow:0 4px 20px rgba(0,0,0,0.4); } .msg-react-emoji { width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:22px; border-radius:50%; cursor:pointer; transition:transform 0.15s; } .msg-react-emoji:active { transform:scale(1.3); } .msg-context-menu { background:rgba(30,30,30,0.97); border-radius:16px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.5); } .msg-ctx-row { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:0.5px solid rgba(255,255,255,0.07); cursor:pointer; } .msg-ctx-row:last-child { border-bottom:none; } .msg-ctx-row:active { background:rgba(255,255,255,0.07); } /* ========================================================= CALL INTERFACE — LIQUID GLASS ========================================================= */ @keyframes callRingPulse { 0%{transform:scale(1);opacity:0.5;} 100%{transform:scale(1.8);opacity:0;} } @keyframes callFadeIn { from{opacity:0;transform:scale(0.96);} to{opacity:1;transform:scale(1);} } @keyframes callSheetUp { from{transform:translateY(100%);} to{transform:translateY(0);} } @keyframes callMiniPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} } @keyframes callDotsAnim { 0%,100%{content:'';} 33%{content:'.';} 66%{content:'..';} } @keyframes vmBarAnim { 0%,100%{transform:scaleY(0.3);} 50%{transform:scaleY(1);} } @keyframes callReactionFloat { 0%{opacity:1;transform:translateY(0) scale(1);} 80%{opacity:0.9;transform:translateY(-180px) scale(1.1);} 100%{opacity:0;transform:translateY(-220px) scale(0.8);} } /* Shown by default and hidden only where something else takes over, rather than listed state by state. Naming the states meant any state without a rule, such as "ringing", silently lost the controls. */ #call-bottom-dock { display: flex; } #call-overlay[data-state="incoming"] #call-bottom-dock, #call-overlay[data-state="noanswer"] #call-bottom-dock { display: none !important; } #call-overlay[data-state="connected"] #call-avatar-state { display: none; } #call-overlay[data-state="connected"] #call-remote-video { display: block; } #call-overlay[data-state="connected"] #call-bottom-dock { display: flex; } #call-overlay[data-state="connected"] #call-incoming-actions { display: none; } #call-overlay[data-state="connected"] #call-self-preview { display: block; } #call-overlay[data-state="incoming"] #call-incoming-actions { display: flex; } #call-overlay[data-state="incoming"] #call-bottom-dock { display: none; } #call-overlay[data-state="calling"] #call-incoming-actions { display: none; } /* Show the controls while it is still ringing, so mute, speaker and hang up are reachable before the other side picks up. Hiding them left the outgoing call looking like the old screen with no controls at all. */ #call-overlay[data-state="calling"] #call-bottom-dock { display: flex; } .call-ctrl-active { background: rgba(255,255,255,0.9) !important; color: #000 !important; } .call-ctrl-muted { background: #FF3B30 !important; } /* ========================================================================== TRUSTMAP — LEAFLET Z-INDEX & FRAME FIX Leaflet internal pane layers go up to z-index 650. The overlay header and bottom sheet must sit above them. Also forces overlay to be position:absolute so it is clipped inside the .app shell on desktop, not the raw viewport. ========================================================================== */ #trustMapOverlay { position: absolute !important; } #trustMapOverlay .leaflet-pane { z-index: 100 !important; } #trustMapOverlay .leaflet-tile-pane { z-index: 100 !important; } #trustMapOverlay .leaflet-overlay-pane { z-index: 200 !important; } #trustMapOverlay .leaflet-marker-pane { z-index: 300 !important; } #trustMapOverlay .leaflet-popup-pane { z-index: 400 !important; } #trustMapOverlay .leaflet-top, #trustMapOverlay .leaflet-bottom { z-index: 500 !important; } /* ================================================================ CHANNEL FEATURES v2 — append to bottom of feed.css ================================================================ */ #chFeed.ch-feed-blurred { filter: blur(6px) brightness(0.6); pointer-events: none; transition: filter 0.2s ease; } .ch-react-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.15s, background 0.18s; color: var(--text-primary, #000); font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; } .ch-react-chip:active { transform: scale(0.9); } .ch-react-chip span { font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } .ch-react-chip-mine { background: rgba(0,122,255,0.13); border-color: rgba(0,122,255,0.35); color: #007AFF; } [data-theme="dark"] .ch-react-chip { background: rgba(40,40,44,0.75) !important; border-color: rgba(255,255,255,0.1) !important; color: #e5e5e5 !important; } [data-theme="dark"] .ch-react-chip-mine { background: rgba(0,122,255,0.2) !important; border-color: rgba(0,122,255,0.4) !important; color: #4DA3FF !important; } .ch-action-icon { display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; padding: 4px 2px; border-radius: 8px; transition: opacity 0.15s; -webkit-tap-highlight-color: transparent; } .ch-action-icon:active { opacity: 0.5; transform: scale(0.9); } .ch-seen-row { padding: 2px 16px 4px; animation: fadeIn 0.4s ease; } .ch-reply-row { transition: background 0.15s; } .ch-reply-row:active { background: rgba(0,0,0,0.03); } [data-theme="dark"] .ch-reply-row:active { background: rgba(255,255,255,0.04) !important; } #chPickerPill { animation: popIn 0.2s cubic-bezier(0.34,1.56,0.64,1); } #chPickerMenu { animation: popIn 0.22s cubic-bezier(0.34,1.36,0.64,1) 0.06s backwards; } #chEmojiCatBar::-webkit-scrollbar { display: none; } #chEmojiCatBar { -ms-overflow-style: none; scrollbar-width: none; } #chEmojiScroll::-webkit-scrollbar { display: none; } #chEmojiScroll { -ms-overflow-style: none; scrollbar-width: none; } .ch-members-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.06); border-radius: 30px; padding: 7px 14px; } [data-theme="dark"] .ch-members-pill { background: rgba(255,255,255,0.1) !important; } .vibe-cel-tag { padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; background: rgba(124,58,237,0.1); color: #7c3aed; border: 1.5px solid rgba(124,58,237,0.2); transition: all 0.2s; user-select: none; } .vibe-cel-tag.selected { background: #7c3aed; color: white; border-color: #7c3aed; } /* Story sound waveform animation */ .sv-wave-bar { width: 2.5px; background: #fff; border-radius: 2px; height: 8px; animation: svWave 0.7s ease-in-out infinite alternate; } .sv-wave-bar:nth-child(1){animation-delay:0s;height:5px} .sv-wave-bar:nth-child(2){animation-delay:0.1s;height:10px} .sv-wave-bar:nth-child(3){animation-delay:0.2s;height:14px} .sv-wave-bar:nth-child(4){animation-delay:0.15s;height:9px} .sv-wave-bar:nth-child(5){animation-delay:0.05s;height:6px} @keyframes svWave { from { transform: scaleY(0.4); } to { transform: scaleY(1.2); } } /* Story disc spin */ @keyframes discSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @keyframes discSpinHaptic { 0%{transform:rotate(0deg)} 100%{transform:rotate(-60deg)} } @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } :root { --skeleton-bg: #e8e8e8; } [data-theme="dark"] { --skeleton-bg: #2c2c2e; } /* ── KEYBOARD FOCUS ────────────────────────────────────────────────────────── A label is no use if you cannot reach the thing it names. Anything given role="button" is reachable by Tab now, so it also has to be visible when it is reached — without this, a keyboard user is moving an invisible cursor around the screen. :focus-visible rather than :focus, so a mouse click does not leave a ring behind on something nobody is navigating by keyboard. */ [role="button"]:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #0A84FF; outline-offset: 2px; border-radius: 6px; } /* The nav icons are round, so the ring should be too. */ .nav-icon:focus-visible, .search-circle:focus-visible { border-radius: 50%; } /* ── ACCOUNTS TO FOLLOW, BETWEEN CLIPS ─────────────────────────────────────── The rail scrolls horizontally on its own, so a sideways drag moves between people while an up swipe still goes to the next clip. */ .tc-sg-wrap { position: absolute; inset: 0; background: #000; z-index: 5005; display: flex; flex-direction: column; justify-content: center; } .tc-sg-head { padding: 0 22px 16px; } .tc-sg-head b { color: #fff; font-size: 19px; font-weight: 800; display: block; } .tc-sg-head small { color: rgba(255,255,255,0.55); font-size: 13px; } .tc-sg-rail { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 22px 4px; scrollbar-width: none; } .tc-sg-rail::-webkit-scrollbar { display: none; } .tc-sg-card { scroll-snap-align: center; flex: 0 0 78%; box-sizing: border-box; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 20px 16px 16px; text-align: center; cursor: pointer; /* Not everybody has clips. Without the column the buttons on a card with no thumbnails ride up, and the card beside it half in view looks misaligned. */ display: flex; flex-direction: column; } .tc-sg-card .tc-sg-btns { margin-top: auto; } .tc-sg-card > img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; } .tc-sg-name { color: #fff; font-size: 16px; font-weight: 800; display: block; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-sg-sub { color: rgba(255,255,255,0.5); font-size: 12.5px; display: block; margin-bottom: 14px; } /* A fixed height, not an aspect ratio. With flex:1 and aspect-ratio, two thumbnails were each twice as wide as three and so twice as tall, and the tallest card set the height for the whole rail. */ .tc-sg-clips { display: flex; gap: 4px; margin-bottom: 16px; height: 132px; } .tc-sg-clip { flex: 1; height: 100%; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.08); position: relative; } .tc-sg-clip img { width: 100%; height: 100%; object-fit: cover; display: block; } .tc-sg-clip span { position: absolute; bottom: 4px; left: 5px; color: #fff; font-size: 10px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.7); } .tc-sg-btns { display: flex; gap: 8px; } .tc-sg-btns button { flex: 1; padding: 11px 0; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; } .tc-sg-skip { background: rgba(255,255,255,0.13); color: #fff; } .tc-sg-follow { background: #007AFF; color: #fff; } .tc-sg-follow.following { background: rgba(255,255,255,0.13); } .tc-sg-hint { text-align: center; color: rgba(255,255,255,0.35); font-size: 12px; margin-top: 18px; } /* ── MINI PLAYER ───────────────────────────────────────────────────────────── A strip along the bottom edge with the nav pill riding above it, so a clip keeps playing while you carry on somewhere else. Both move on the same curve and the same duration: the strip sliding out while the nav jumped down after it is what makes this kind of thing look cheap. */ :root { --tf-mini-h: 62px; } .tf-mini { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6100; height: calc(var(--tf-mini-h) + env(safe-area-inset-bottom)); padding: 0 12px env(safe-area-inset-bottom); display: flex; align-items: center; gap: 11px; background: rgba(22,22,24,0.92); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-top: 0.5px solid rgba(255,255,255,0.12); transform: translateY(105%); transition: transform .28s cubic-bezier(.32,.72,0,1); cursor: pointer; } .tf-mini.in { transform: translateY(0); } .tf-mini-thumb { width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: #000; flex-shrink: 0; } .tf-mini-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .tf-mini-meta { flex: 1; min-width: 0; } .tf-mini-meta b { display: block; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tf-mini-meta span { display: block; color: rgba(255,255,255,0.5); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tf-mini-btn { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: none; background: rgba(255,255,255,0.10); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .tf-mini-btn:active { background: rgba(255,255,255,0.2); } /* The nav pill lifts to sit above the strip, on the same curve. */ .nav-container { transition: bottom .28s cubic-bezier(.32,.72,0,1); } .app.tf-mini-open .nav-container { bottom: calc(var(--tf-mini-h) + env(safe-area-inset-bottom) + 14px); } /* Chat bubbles. The received bubble used to be a hardcoded rgba(0,0,0,0.07): 7% black, which over a black background is nothing at all, so in dark mode a received message looked like text floating with no bubble around it. Same for the timestamp, which was 35% black on black. These are the tokens now. */ :root { --msg-in-bg: rgba(0,0,0,0.07); --msg-in-quote: rgba(0,0,0,0.05); --msg-time: rgba(0,0,0,0.35); } [data-theme="dark"] { --msg-in-bg: #262629; --msg-in-quote: rgba(255,255,255,0.09); --msg-time: rgba(255,255,255,0.45); } /* Profile "you're already here" nudge — used when tapping your own username while the profile page is already open (paired with haptic feedback). */ @keyframes tfShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-7px); } 30% { transform: translateX(7px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(3px); } } .tf-shake { animation: tfShake 0.45s cubic-bezier(.36,.07,.19,.97); } /* ===== Music sticker (composer preview + post cards) — 3 styles ===== */ .tf-ms { display:flex; align-items:center; gap:12px; background:var(--card-bg,#fff); border:0.5px solid var(--border-color,#ececec); border-radius:18px; padding:11px 13px; box-shadow:0 2px 12px rgba(0,0,0,0.05); } .tf-ms-play { width:40px; height:40px; border-radius:50%; border:none; background:#007AFF; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; box-shadow:0 2px 10px rgba(0,122,255,0.35); font-size:14px; } .tf-ms-name { font-weight:700; color:var(--text-primary,#000); } .tf-ms-2 .tf-ms2-info, .tf-ms-3 .tf-ms2-info { flex:1; min-width:0; cursor:pointer; } .tf-ms2-info b, .tf-ms1-info .tf-ms-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; } .tf-ms2-info small { color:#888; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } /* Style 1 — compact bar; title wobbles briefly on play */ .tf-ms-1 .tf-ms1-info { flex:1; min-width:0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tf-ms1-info .tf-ms-name { display:inline-block; font-size:14px; vertical-align:bottom; max-width:60%; overflow:hidden; text-overflow:ellipsis; } .tf-ms1-sep { color:#aaa; } .tf-ms1-artist { color:#888; font-size:13px; } @keyframes tfWobble { 0%,100%{transform:rotate(0deg);} 20%{transform:rotate(-6deg);} 40%{transform:rotate(5deg);} 60%{transform:rotate(-3deg);} 80%{transform:rotate(2deg);} } .tf-wobble { animation: tfWobble 0.5s ease-in-out 3; transform-origin:left center; } /* Style 2 — album cover with spinning vinyl disc */ .tf-ms2-cover { position:relative; width:72px; height:48px; flex-shrink:0; } .tf-ms2-art { position:absolute; left:0; top:0; width:48px; height:48px; border-radius:10px; object-fit:cover; z-index:2; box-shadow:0 2px 8px rgba(0,0,0,0.2); } .tf-ms2-disc { position:absolute; left:26px; top:3px; width:42px; height:42px; border-radius:50%; background-size:cover; background-position:center; z-index:1; border:3px solid #141414; box-shadow:0 2px 8px rgba(0,0,0,0.3); } .tf-ms2-disc::after { content:''; position:absolute; top:50%; left:50%; width:9px; height:9px; border-radius:50%; background:var(--card-bg,#fff); border:1px solid rgba(0,0,0,0.25); transform:translate(-50%,-50%); } .tf-ms2-disc.spinning { animation: tfDiscSpin 3s linear infinite; } @keyframes tfDiscSpin { to { transform:rotate(360deg); } } /* Style 3 — synced lyrics with a blue highlight */ .tf-ms-3 { flex-direction:column; align-items:stretch; } .tf-ms3-head { display:flex; align-items:center; gap:10px; } .tf-ms3-thumb { width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0; } .tf-ms3-lyrics { margin-top:11px; max-height:132px; overflow-y:auto; -webkit-overflow-scrolling:touch; font-size:14px; line-height:1.7; } /* Icon, not an emoji: it is a placeholder mark for the lyrics panel, and the muted colour keeps it from competing with the lyrics themselves. */ .tf-ms3-note { font-size:18px; margin-bottom:6px; color:#8a8a8e; } .tf-ms3-line { color:var(--text-secondary,#9a9a9a); transition:color 0.2s ease, font-weight 0.2s ease; } .tf-ms3-line.active { color:#007AFF; font-weight:700; } /* Location card (post) */ .tf-loc-card { margin:4px 16px 10px; border-radius:16px; overflow:hidden; border:0.5px solid var(--border-color,#ececec); background:var(--card-bg,#fff); } .tf-loc-bar { display:flex; align-items:center; gap:10px; padding:10px 12px; } /* Signup OTP digit boxes */ .otp-row { display:flex; gap:8px; justify-content:space-between; width:100%; } .otp-box { flex:1; min-width:0; height:56px; text-align:center; font-size:24px; font-weight:600; border-radius:14px; border:1.5px solid var(--border-color,#e2e2e2); background:var(--input-bg,#f7f7f8); color:var(--text-primary,#000); outline:none; -webkit-user-select:text; user-select:text; transition:border-color 0.15s ease, background 0.15s ease; box-sizing:border-box; } .otp-box:focus { border-color:#007AFF; background:var(--bg-primary,#fff); } .otp-box.filled { border-color:#007AFF; } /* ========================================================================== PEOPLE TO FOLLOW, IN THE FEED A horizontally scrolling rail dropped in among the posts. Themed rather than hardcoded white, so it does not glow on a dark feed. ========================================================================== */ .tf-sg-rail { border-top: 8px solid var(--bg-secondary, #f0f0f0); border-bottom: 8px solid var(--bg-secondary, #f0f0f0); padding: 16px 0 18px; margin: 4px 0; background: var(--bg-primary, #fff); } .tf-sg-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 12px; } .tf-sg-head b { font-size: 17px; font-weight: 800; color: var(--text-primary, #000); } .tf-sg-head span { font-size: 14px; font-weight: 600; color: #0A84FF; cursor: pointer; } .tf-sg-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tf-sg-scroll::-webkit-scrollbar { display: none; } .tf-sg-card { position: relative; flex: 0 0 auto; width: 158px; border: 0.5px solid var(--border-color, #e6e6e6); border-radius: 14px; background: var(--card-bg, #fff); padding: 20px 12px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; } .tf-sg-card img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; cursor: pointer; margin-bottom: 10px; } .tf-sg-card b { font-size: 14px; font-weight: 700; color: var(--text-primary, #000); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .tf-sg-card small { font-size: 12px; color: var(--text-secondary, #888); margin: 3px 0 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-sg-card button { width: 100%; padding: 9px 0; border: none; border-radius: 9px; background: #0A84FF; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; } .tf-sg-card button.following { background: var(--input-bg, #efefef); color: var(--text-primary, #000); } .tf-sg-card button:disabled { opacity: 0.6; } /* The dismiss cross, top-right of each card. */ .tf-sg-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary, #999); font-size: 13px; cursor: pointer; } /* ========================================================================== CHAT CALENDAR Every class here was already written into feed.html and none of them existed in this file, so the sheet rendered as one unstyled column: seven weekday letters and thirty-one numbers stacked vertically. A grid with no display:grid is just a list. ========================================================================== */ .chat-cal-sheet { width: 100%; max-height: 78vh; display: flex; flex-direction: column; background: var(--bg-primary, #fff); border-radius: 22px 22px 0 0; padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 14px); animation: slideUpOverlay 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .chat-cal-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px 12px; } .liq-glass-cal { border: none; cursor: pointer; background: var(--bg-secondary, rgba(120,120,128,0.16)); color: var(--text-primary, #000); font-size: 14px; font-weight: 600; padding: 7px 15px; border-radius: 50px; } /* The months scroll. One month on screen at a time is no use for finding a conversation from a while back. */ .chat-cal-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .chat-cal-month-title { font-size: 17px; font-weight: 800; color: var(--text-primary, #000); text-align: center; margin: 18px 0 12px; } .chat-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 0; } .chat-cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-primary, #000); border-radius: 50%; cursor: pointer; -webkit-user-select: none; user-select: none; } .chat-cal-cell.hdr { font-size: 12px; font-weight: 600; color: var(--text-secondary, #8e8e93); cursor: default; aspect-ratio: auto; height: 26px; } .chat-cal-cell.empty { cursor: default; } /* A day with nothing in it is not worth tapping, and saying so up front beats opening the chat at a day that turns out to be empty. */ .chat-cal-cell.blank { color: var(--text-secondary, #8e8e93); opacity: 0.35; cursor: default; } .chat-cal-cell.has-msgs { font-weight: 700; } .chat-cal-cell.today { color: #007AFF; font-weight: 800; } .chat-cal-cell.selected { background: #007AFF; color: #fff; font-weight: 700; } .chat-cal-cell:not(.empty):not(.hdr):not(.blank):active { background: var(--bg-secondary, rgba(120,120,128,0.2)); } #chat-cal-clear-btn { flex-shrink: 0; display: none; width: 100%; margin-top: 12px; padding: 13px; border: none; border-radius: 14px; background: rgba(255,59,48,0.12); color: #FF3B30; font-size: 15px; font-weight: 700; cursor: pointer; } /* The day a jump landed on, so it is obvious where you were taken. */ @keyframes tfDateFlash { 0%, 100% { background: transparent; } 30% { background: rgba(0,122,255,0.22); } } [data-date-sep].tf-jumped > span { animation: tfDateFlash 1.4s ease; } /* The story buffering spinner. A stalled video and a broken one look the same without it: the bar stops, the picture holds, and nothing says which. */ @keyframes tfSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ========================================================================== THE EDITOR, GIVEN THE SAME MANNERS AS THE REST OF THE APP The editor is not worse code than the rest of TrustFirst. It is the one screen that opted out of the app's motion. Counted: 29 controls in its markup, 0 with a transition, 0 with a pressed state, 0 with touch feedback, while feed.css carries 90 transition rules and 34 pressed states for everything else. Every panel appears and disappears by flipping display, which is instant by definition. That gap is the whole of "the buttons work but in a cheap way". A button that does not acknowledge the finger reads as a picture of a button. All of this is scoped inside .editor-overlay and set through properties the editor's inline styles never touch (transform, transition, animation), so nothing here can fight the existing markup and nothing outside the editor changes. No HTML was rewritten to get it. ========================================================================== */ /* One curve for the whole screen. Fast out, settled in: it reads as the control responding rather than the interface performing. */ .editor-overlay { --ed-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ed-quick: 0.16s; } /* Every control: acknowledges the finger, and lets go smoothly. */ .editor-overlay button, .editor-overlay [onclick], .editor-overlay .ed-tool { transition: transform var(--ed-quick) var(--ed-ease), background-color var(--ed-quick) ease, border-color var(--ed-quick) ease, opacity var(--ed-quick) ease; -webkit-tap-highlight-color: transparent; } .editor-overlay button:active, .editor-overlay [onclick]:active, .editor-overlay .ed-tool:active { transform: scale(0.93); opacity: 0.85; } /* Drag handles and the surfaces you draw on are excluded: a trim handle that shrinks under the finger fights the drag it is meant to be doing, and the whole timeline counts as a click target. */ .editor-overlay .ed-trim:active, .editor-overlay #edVideoTrack:active, .editor-overlay #edAudioTrack:active, .editor-overlay #edTextTrack:active, .editor-overlay #edRuler:active, .editor-overlay #edStage:active, .editor-overlay #edPreviewArea:active, .editor-overlay #edTextLayer:active, .editor-overlay #edTextLayer *:active { transform: none; opacity: 1; } /* A trim handle should still say it has been grabbed. Wider, not smaller. */ .editor-overlay .ed-trim { transition: transform var(--ed-quick) var(--ed-ease), filter var(--ed-quick) ease; } .editor-overlay .ed-trim:active { transform: scaleX(1.35); filter: brightness(1.25); } /* A selected clip settles into place instead of snapping. */ .editor-overlay .ed-clip { transition: transform var(--ed-quick) var(--ed-ease), box-shadow var(--ed-quick) ease, outline-color var(--ed-quick) ease; } .editor-overlay .ed-clip.selected { transform: translateY(-2px); } /* Things the editor shows by flipping display cannot transition, because there is no before state to move from. An animation on the rule runs each time the element comes back, which gets the same result without touching the JS that shows them. */ @keyframes edRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes edFade { from { opacity: 0; } to { opacity: 1; } } .editor-overlay #edClipActions { animation: edRise 0.18s var(--ed-ease); } .editor-overlay #edPanel { animation: edRise 0.22s var(--ed-ease); } .editor-overlay #edExportBar { animation: edFade 0.2s ease; } .editor-overlay #edExitModal { animation: edFade 0.16s ease; } /* Not here: #edExportFill already carries its own inline transition, and an inline style beats a stylesheet whatever the specificity, so a rule for it would never apply. Same reason #edNextBtn does not dim on press: its opacity is set inline because that is how the editor marks it enabled or disabled. It still gives under the finger, which is the part that was missing. */ /* The play button is pressed more than anything else here, so it gets the one piece of character on the screen: a small give, and a ring that answers. */ .editor-overlay #edPlayBtn { transition: transform 0.18s var(--ed-ease), box-shadow 0.18s ease, background-color 0.18s ease; } .editor-overlay #edPlayBtn:active { transform: scale(0.88); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.10); } /* Keyboard users get the same affordance as thumbs. */ .editor-overlay button:focus-visible, .editor-overlay [onclick]:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; } /* Motion is a preference, and this screen has a lot of it. */ @media (prefers-reduced-motion: reduce) { .editor-overlay button, .editor-overlay [onclick], .editor-overlay .ed-tool, .editor-overlay .ed-trim, .editor-overlay .ed-clip, .editor-overlay #edPlayBtn { transition: none; } .editor-overlay #edClipActions, .editor-overlay #edPanel, .editor-overlay #edExportBar, .editor-overlay #edExitModal { animation: none; } .editor-overlay button:active, .editor-overlay [onclick]:active, .editor-overlay .ed-tool:active, .editor-overlay #edPlayBtn:active { transform: none; opacity: 0.75; } } /* ========================================================================== HASHTAGS A posted hashtag is not the caption and should not read as the caption, but it is not a headline either: it is a label you can follow. So it sits one step back from the text around it rather than shouting in link blue, which is what it used to do. Colour comes from here rather than an inline style, because the right grey on a white post is the wrong grey on a black clip. ========================================================================== */ .tf-hashtag { color: #6B7686; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tf-hashtag:active { opacity: 0.6; } /* On a clip the caption is white over video, so the tag steps back to a translucent white instead of a grey that would disappear into the picture. */ .reel-ui .tf-hashtag, .reel-captions .tf-hashtag { color: rgba(255, 255, 255, 0.62); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tf-hashtag { color: #8B95A5; } } :root[data-theme="dark"] .tf-hashtag { color: #8B95A5; } /* While you are still typing, a tag you have just picked from the list reads as chosen: blue and solid, the way a link does before it settles into the posted caption. */ .tf-hashtag-live { color: #007AFF; font-weight: 700; }