:root { --primary: #ffcc00; --primary-dark: #e0b400; --bg: #000000; --card: #0d0d0d; --text: #f5f5f0; --muted: #a8a89c; --border: #33331f; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Segoe UI', 'Noto Sans Thai', Tahoma, sans-serif; background: var(--bg); color: var(--text); } /* Auth pages */ .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .auth-card { background: var(--card); padding: 2.5rem; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.4); width: 100%; max-width: 360px; text-align: center; } .brand-logo { max-width: 160px; max-height: 90px; object-fit: contain; margin: 0 auto; display: block; } .brand { color: var(--primary); font-size: 2rem; margin: 0; letter-spacing: 1px; font-weight: 700; } .tagline { color: var(--muted); margin: 0.25rem 0 1.5rem; font-size: 0.9rem; } .auth-card form { display: flex; flex-direction: column; gap: 0.75rem; } .auth-card input, .auth-card select { padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: #0f0f0d; color: var(--text); font-size: 1rem; } .auth-card button, .chat-form button, #share-location-btn { background: var(--primary); color: #1a1a12; border: none; padding: 0.75rem 1rem; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .auth-card button:hover, .chat-form button:hover, #share-location-btn:hover { background: var(--primary-dark); } .switch { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); } .switch a { color: var(--primary); text-decoration: none; font-weight: 600; } .error { color: #ff6b6b; font-size: 0.9rem; } .success { color: var(--primary); font-size: 0.9rem; background: rgba(255,204,0,0.08); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; } .switch-form { margin-top: 0.5rem; } .bt-consent { display: flex; align-items: flex-start; gap: 0.5rem; text-align: left; font-size: 0.82rem; color: var(--muted); background: rgba(255,204,0,0.06); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; } .bt-consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); } .bt-consent a { color: var(--primary); text-decoration: underline; font-weight: 600; } /* Primary download CTA (APK download page). Uses the :root-scoped --primary variable (defined at the top of this file, available everywhere) rather than the --bt-yellow variable used elsewhere in this file, which only exists inside body.bt-app - this page's uses the older .auth-page class instead, so --bt-yellow is undefined here and any rule depending on it silently renders with no background/color. Also carries a plain hex fallback ahead of the var() for browsers/older WebViews with partial CSS custom-property support. Bigger + glowing + gently pulsing so it reads as the obvious main action on the page. */ .download-cta { display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; background: #ffcc00; background: var(--primary); color: #1a1a12; padding: 18px 20px; font-size: 17px; font-weight: 700; border-radius: 100px; box-shadow: 0 6px 20px rgba(255, 204, 0, 0.45); animation: download-pulse 1.8s ease-in-out infinite; } .download-cta:hover { background: var(--primary-dark); } @keyframes download-pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(255, 204, 0, 0.45); transform: scale(1); } 50% { box-shadow: 0 6px 30px rgba(255, 204, 0, 0.75); transform: scale(1.02); } } @media (prefers-reduced-motion: reduce) { .download-cta { animation: none; } } /* Nav */ .topnav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: var(--card); border-bottom: 1px solid var(--border); } .brand-small { color: var(--primary); font-weight: 700; font-size: 1.25rem; text-decoration: none; } .nav-links { display: flex; gap: 1.25rem; align-items: center; } .nav-links a { color: var(--text); text-decoration: none; font-size: 0.95rem; } .nav-links a:hover { color: var(--primary); } .logout-form button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.95rem; } .page { max-width: 720px; margin: 0 auto; padding: 1.5rem; } .hint { color: var(--muted); font-size: 0.9rem; } /* Nearby */ .nearby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; } .nearby-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.3); text-align: center; padding-bottom: 0.75rem; } .nearby-card img { width: 100%; aspect-ratio: 1; object-fit: cover; } .nearby-card .name { font-weight: 600; margin: 0.5rem 0 0.15rem; color: var(--text); } .nearby-card .distance { color: var(--primary); font-size: 0.85rem; } .nearby-card button { margin-top: 0.5rem; background: var(--primary); color: #1a1a12; border: none; padding: 0.4rem 0.9rem; border-radius: 8px; cursor: pointer; font-weight: 600; } /* Inbox */ .conversation-list { list-style: none; padding: 0; margin: 1rem 0; } .conversation-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 10px; text-decoration: none; color: var(--text); } .conversation-item:hover { background: var(--card); } .avatar-sm { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); } .avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 1rem; border: 2px solid var(--primary); } .conv-name { font-weight: 600; } .conv-last { color: var(--muted); font-size: 0.85rem; } /* Chat */ .chat-page { display: flex; flex-direction: column; height: calc(100vh - 64px - 3rem); } .messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; } .message { max-width: 70%; padding: 0.6rem 0.9rem; border-radius: 14px; font-size: 0.95rem; } .message.theirs { align-self: flex-start; background: var(--card); border: 1px solid var(--border); color: var(--text); } .message.mine { align-self: flex-end; background: var(--primary); color: #1a1a12; font-weight: 500; } .chat-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .chat-form input { flex: 1; padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 1rem; } /* Profile form */ form label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; color: var(--muted); } form input, form select, form textarea { width: 100%; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 1rem; } /* Radar */ .radar-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 1.5rem; } .radar-box { position: relative; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, #1a1a12 0%, #0d0d0a 100%); border: 1px solid var(--border); overflow: hidden; } .radar-ring { position: absolute; border: 1px solid rgba(255,204,0,0.25); border-radius: 50%; } .ring-1 { width: 33%; height: 33%; top: 33.5%; left: 33.5%; } .ring-2 { width: 66%; height: 66%; top: 17%; left: 17%; } .ring-3 { width: 100%; height: 100%; top: 0; left: 0; } .radar-sweep { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: conic-gradient(from 0deg, rgba(255,204,0,0.35), transparent 40%); animation: sweep 4s linear infinite; border-radius: 50%; } @keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .radar-me { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; background: var(--primary); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(255,204,0,0.2); z-index: 3; } .radar-dot { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; z-index: 2; border: 2px solid var(--primary); } .radar-dot.live { border-color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.6); } .radar-dot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .radar-legend { display: flex; gap: 1.5rem; margin-top: 10px; } .ring-label { font-size: 11px; color: var(--muted); } .radar-popup { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--border); padding: 1.25rem; text-align: center; z-index: 20; border-radius: 16px 16px 0 0; } .radar-popup.hidden { display: none; } .radar-popup img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; } .popup-name { font-weight: 600; } .popup-distance { color: var(--primary); font-size: 0.85rem; margin-bottom: 8px; } .radar-popup button[type="submit"] { background: var(--primary); color: #1a1a12; border: none; padding: 0.5rem 1.25rem; border-radius: 8px; font-weight: 600; cursor: pointer; } .blurred { filter: blur(6px); } .live-badge { background: #4ade80; color: #0d2b16; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-right: 4px; vertical-align: middle; } /* Moments / Feed */ .post-form { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: 1rem 0; } .post-form textarea { width: 100%; background: #0f0f0d; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; font-size: 0.9rem; } .post-form-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; } .post-form-row button, .settings-card form button { background: var(--primary); color: #1a1a12; border: none; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; cursor: pointer; } .moments-list { display: flex; flex-direction: column; gap: 1rem; } .moment-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; } .moment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .moment-caption { font-size: 0.9rem; margin: 0.4rem 0; } .moment-image { width: 100%; border-radius: 8px; margin: 0.4rem 0; } .like-btn { background: none; border: none; color: var(--muted); font-size: 0.95rem; cursor: pointer; padding: 0; } .like-btn.liked { color: var(--primary); } /* Settings */ .settings-form { display: flex; flex-direction: column; gap: 8px; margin: 1rem 0; } .settings-subhead { margin: 1.5rem 0 0.25rem; font-size: 1rem; } .radio-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.65rem 0.9rem; cursor: pointer; } .radio-row small { display: block; color: var(--muted); font-size: 0.75rem; } .settings-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-top: 1.25rem; } .settings-card h3 { margin: 0 0 0.5rem; font-size: 0.95rem; } .approved-row { display: flex; align-items: center; gap: 10px; padding: 0.5rem 0; border-bottom: 1px solid var(--border); } .approved-row:last-child { border-bottom: none; } .approved-row .conv-name { flex: 1; } .countdown { font-size: 0.75rem; } /* Link buttons + chat header extras */ .link-btn { background: none; border: none; color: var(--primary); font-size: 0.85rem; cursor: pointer; padding: 0; } .link-btn.danger { color: #ff6b6b; } .chat-header { display: flex; justify-content: space-between; align-items: center; } .chat-menu { display: flex; gap: 12px; } .report-box { display: none; margin: 0.5rem 0; } .report-box.open { display: block; } .report-box textarea { width: 100%; background: #0f0f0d; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; font-size: 0.85rem; } .report-box button { margin-top: 6px; background: var(--primary); color: #1a1a12; border: none; padding: 0.4rem 1rem; border-radius: 8px; font-weight: 600; cursor: pointer; } .blocked-hint { color: #ff6b6b; } /* Live-share status card */ .live-status p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; } .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .live-status.is-online .status-dot { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); } .live-status.is-offline .status-dot { background: #888; } /* Admin panel */ .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem; } .admin-stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; } .admin-stat-card.warn { border-color: #ff6b6b; } .admin-stat-num { font-size: 1.8rem; font-weight: 700; color: var(--primary); } .admin-stat-label { color: var(--muted); font-size: 0.85rem; } .admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; } .admin-table th, .admin-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); } .admin-table th { color: var(--muted); font-weight: 600; font-size: 0.8rem; } .admin-table td img.avatar-sm { vertical-align: middle; margin-right: 6px; } .admin-actions { display: flex; gap: 12px; } .active-tab { color: var(--primary) !important; font-weight: 600; } /* ========================================================================== BTALK Redesign — Dark Glossy Black + Bright Yellow Scoped entirely under body.bt-app / .bt-* classes so the original theme (auth pages, admin panel) is completely untouched. ========================================================================== */ body.bt-app { --bt-canvas: oklch(11% 0.012 95); --bt-bg: oklch(13% 0.014 95); --bt-surface: oklch(19% 0.018 95); --bt-input-bg: oklch(20% 0.02 95); --bt-photo-1: oklch(24% 0.02 95); --bt-photo-2: oklch(28% 0.02 95); --bt-border: oklch(30% 0.025 95); --bt-divider: oklch(26% 0.02 95); --bt-radio-border: oklch(42% 0.02 95); --bt-dish-border: oklch(34% 0.02 95); --bt-ring-border: oklch(85% 0.2 95 / 0.3); --bt-text: oklch(95% 0.012 95); --bt-muted: oklch(66% 0.02 95); --bt-chevron: oklch(58% 0.02 95); --bt-tab-inactive: oklch(60% 0.02 95); --bt-yellow: oklch(85% 0.2 95); --bt-on-yellow: oklch(15% 0.03 90); --bt-tab-active-bg: oklch(30% 0.09 95); --bt-green: oklch(76% 0.19 145); --bt-green-chip: oklch(74% 0.17 150); --bt-green-pulse: oklch(80% 0.19 145); --bt-gray-dot: oklch(60% 0.01 95); --bt-red: oklch(70% 0.21 25); --bt-red-heart: oklch(72% 0.21 20); --bt-r-sm: 10px; --bt-r-md: 15px; --bt-r-sheet: 20px; --bt-r-pill: 100px; --bt-shadow-card: 0 1px 3px oklch(0% 0 0 / 0.35); --bt-shadow-sheet: 0 -8px 24px oklch(0% 0 0 / 0.5); --bt-shadow-knob: 0 1px 2px oklch(0% 0 0 / 0.45); background: var(--bt-canvas); color: var(--bt-text); font-family: 'Noto Sans Thai', -apple-system, 'Helvetica Neue', 'Segoe UI', sans-serif; } body.bt-app a { color: inherit; } /* Screen shell */ .bt-screen { position: relative; max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bt-bg); padding: 130px 20px 96px; overflow-x: hidden; } .bt-screen--sheet { padding: 0 0 32px; } /* Top menu bar: อันดับ / กลุ่ม / กิจกรรม / ร้านค้า - fixed at the very top, mirrors .bt-tabbar's fixed-at-bottom pattern. Every page that includes this also uses .bt-screen, whose top padding above was bumped from 70px to 130px to leave room for it. */ .bt-topbar { position: fixed; left: 0; right: 0; top: 0; z-index: 50; display: flex; justify-content: space-around; align-items: center; max-width: 480px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top, 0px)) 6px 14px; background: rgba(18, 16, 10, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bt-border); } .bt-topbar-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--bt-tab-inactive); font-size: 11px; font-weight: 600; padding: 4px 10px; } .bt-topbar-icon { font-size: 22px; line-height: 1; position: relative; display: inline-block; } .bt-topbar-label { color: var(--bt-text); } .bt-topbar-badge { position: absolute; top: -2px; right: -6px; width: 9px; height: 9px; border-radius: 50%; background: var(--bt-red); border: 2px solid var(--bt-bg); } /* "ปิดร้าน" overlay: a small closed-sign badge layered on top of the shop icon (rather than hiding the menu item) so the shop stays discoverable in the topbar while signaling purchases are unavailable, per how the admin wants a closed shop to read to users. */ .bt-topbar-icon.closed { opacity: 0.5; } .bt-topbar-closed-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; } /* Announcement marquee: sits directly under the fixed top menu bar (it's the first child of .bt-screen on pages that include it). Collapses to zero height/opacity between loop cycles rather than display:none, so the height/opacity transition can animate instead of popping in and out. */ .bt-announcement-banner { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, oklch(85% 0.2 95 / 0.18), oklch(85% 0.2 95 / 0.06)); border: 1px solid var(--bt-border, rgba(255,204,0,0.35)); border-radius: 12px; font-size: 13px; color: var(--bt-text); overflow: hidden; max-height: 0; opacity: 0; padding: 0 14px; margin: 0; border-width: 0; transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin 0.35s ease, border-width 0.35s ease; } .bt-announcement-banner.bt-announcement-visible { max-height: 60px; opacity: 1; padding: 10px 14px; margin: 0 0 14px; border-width: 1px; } .bt-announcement-banner .icon { font-size: 16px; flex-shrink: 0; } /* Scrolling text track: classic marquee trick - the text starts fully off-screen to the right (padding-left: 100%) and animates to translateX (-100%), which is fully off-screen to the left relative to its own width. */ .bt-announcement-track { flex: 1; overflow: hidden; white-space: nowrap; } .bt-announcement-text { display: inline-block; padding-left: 100%; animation: bt-marquee 12s linear infinite; } @keyframes bt-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } .bt-glow { position: absolute; pointer-events: none; border-radius: 50%; z-index: 0; } .bt-glow--yellow { width: 200px; height: 200px; top: -30px; right: -50px; background: radial-gradient(circle, oklch(85% 0.2 95 / 0.45), transparent 70%); } .bt-glow--green { width: 140px; height: 140px; top: -10px; left: -40px; background: radial-gradient(circle, oklch(78% 0.18 145 / 0.3), transparent 70%); } .bt-header-block { position: relative; z-index: 1; margin-bottom: 20px; } .bt-h1 { font-size: 30px; font-weight: 800; color: var(--bt-text); margin: 0 0 4px; } .bt-subtitle { font-size: 14px; color: var(--bt-muted); margin: 0 0 16px; line-height: 1.5; } .bt-pill-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bt-yellow); color: var(--bt-on-yellow); border: none; padding: 11px 18px; border-radius: var(--bt-r-pill); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; text-decoration: none; } .bt-pill-btn:hover { filter: brightness(1.05); } .bt-pill-btn:disabled { opacity: .6; cursor: not-allowed; filter: none; } .bt-status-text { font-size: 13px; color: var(--bt-muted); margin: 10px 0 0; } .bt-toast { position: absolute; top: 8px; left: 50%; z-index: 5; transform: translateX(-50%) translateY(-10px); background: var(--bt-surface); border: 1px solid var(--bt-border); border-left: 4px solid var(--bt-yellow); color: var(--bt-text); font-size: 13px; font-weight: 600; text-align: center; padding: 11px 18px; border-radius: var(--bt-r-sm); box-shadow: 0 10px 28px rgba(0,0,0,.4); max-width: calc(100% - 40px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .bt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .bt-toast.error { border-left-color: var(--bt-red); } /* Back-header pattern: Chat / Settings / Safety */ .bt-backheader { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; background: var(--bt-surface); border-bottom: 1px solid var(--bt-border); padding: 66px 20px 16px; } .bt-back { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; color: var(--bt-text); text-decoration: none; font-size: 20px; line-height: 1; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; } .bt-backheader-title { font-size: 16px; font-weight: 700; color: var(--bt-text); flex: 1; } .bt-backheader-body { padding: 20px; max-width: 480px; margin: 0 auto; } /* Bottom tab bar */ .bt-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: space-around; align-items: center; max-width: 480px; margin: 0 auto; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(18, 16, 10, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--bt-border); } .bt-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--bt-tab-inactive); padding: 6px 14px; border-radius: 14px; position: relative; font-size: 11px; font-weight: 600; transition: color .15s, background-color .15s; } .bt-tab.active { color: var(--bt-yellow); background: var(--bt-tab-active-bg); } .bt-tab-icon { display: inline-block; width: 22px; height: 22px; position: relative; } .bt-tab-icon > span:not(.bt-tab-badge) { display: block; width: 100%; height: 100%; position: relative; } .bt-tab-badge { position: absolute; top: -4px; right: -6px; width: 9px; height: 9px; z-index: 1; border-radius: 50%; background: var(--bt-red); border: 1.5px solid var(--bt-canvas); } .bt-icon-radar { width: 100%; height: 100%; border: 2px solid currentColor; border-radius: 50%; position: relative; } .bt-icon-radar::after { content: ''; position: absolute; width: 6px; height: 6px; background: currentColor; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .bt-icon-nearby { width: 100%; height: 100%; position: relative; } .bt-icon-nearby::before, .bt-icon-nearby::after { content: ''; position: absolute; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; top: 4px; } .bt-icon-nearby::before { left: -1px; } .bt-icon-nearby::after { left: 8px; } .bt-icon-feed { width: 100%; height: 100%; border: 2px solid currentColor; border-radius: 5px; position: relative; } .bt-icon-feed::before, .bt-icon-feed::after { content: ''; position: absolute; left: 4px; height: 2px; background: currentColor; border-radius: 1px; } .bt-icon-feed::before { top: 7px; right: 4px; } .bt-icon-feed::after { top: 12px; width: 55%; } .bt-icon-chat { width: 100%; height: 82%; border: 2px solid currentColor; border-radius: 7px 7px 7px 2px; } .bt-icon-profile { width: 100%; height: 100%; position: relative; } .bt-icon-profile::before { content: ''; position: absolute; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; top: 0; left: 50%; transform: translateX(-50%); } .bt-icon-profile::after { content: ''; position: absolute; width: 17px; height: 9px; border: 2px solid currentColor; border-bottom: none; border-radius: 9px 9px 0 0; bottom: 0; left: 50%; transform: translateX(-50%); } /* Radar screen */ .bt-radar-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: 28px; } .bt-radar-dish { position: relative; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, oklch(22% 0.02 90) 0%, oklch(9% 0.014 95) 100%); border: 1px solid var(--bt-dish-border); overflow: hidden; } .bt-radar-ring { position: absolute; border: 1px solid var(--bt-ring-border); border-radius: 50%; } .bt-radar-ring.r1 { width: 33%; height: 33%; top: 33.5%; left: 33.5%; } .bt-radar-ring.r2 { width: 66%; height: 66%; top: 17%; left: 17%; } .bt-radar-ring.r3 { width: 100%; height: 100%; top: 0; left: 0; } .bt-radar-sweep { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, oklch(85% 0.2 95 / 0.45), transparent 40%); animation: bt-sweep 4s linear infinite; } .bt-radar-me { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; z-index: 3; background: var(--bt-yellow); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 7px oklch(85% 0.2 95 / 0.4); } .bt-radar-dot { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; z-index: 2; border: 2px solid var(--bt-yellow); opacity: 0; animation: bt-pop-in .35s ease forwards; } .bt-radar-dot.live { border-color: var(--bt-green); animation: bt-pop-in .35s ease forwards, bt-pulse 2s infinite; } .bt-radar-dot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .bt-radar-online-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--bt-green, #3ecf6e); border: 2px solid var(--bt-bg); z-index: 3; } .bt-radar-online-dot.offline { background: var(--bt-gray-dot, #9a9a9a); } .bt-radar-legend { display: flex; gap: 24px; margin-top: 10px; position: relative; z-index: 1; } .bt-ring-label { font-size: 11px; color: var(--bt-muted); } .bt-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-width: 480px; margin: 0 auto; background: var(--bt-surface); border-top: 1px solid var(--bt-border); border-radius: var(--bt-r-sheet) var(--bt-r-sheet) 0 0; box-shadow: var(--bt-shadow-sheet); padding: 20px; text-align: center; } .bt-sheet.hidden { display: none; } .bt-sheet img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; } .bt-sheet-name { font-weight: 700; font-size: 15px; } .bt-sheet-online { font-size: 12px; font-weight: 700; color: var(--bt-muted); margin-top: 2px; } .bt-sheet-online.online { color: var(--bt-green, #3ecf6e); } .bt-sheet-distance { color: var(--bt-yellow); font-size: 13px; margin: 2px 0 14px; } .bt-sheet-actions { display: flex; gap: 10px; justify-content: center; } .bt-sheet-btn { border: none; border-radius: var(--bt-r-pill); padding: 10px 22px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; } .bt-sheet-btn.neutral { background: var(--bt-input-bg); color: var(--bt-text); } .bt-sheet-btn.yellow { background: var(--bt-yellow); color: var(--bt-on-yellow); } /* Nearby grid */ .bt-nearby-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; } .bt-nearby-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md); overflow: hidden; box-shadow: var(--bt-shadow-card); opacity: 0; animation: bt-pop-in .35s ease forwards; } .bt-nearby-photo { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; } .bt-nearby-photo img { width: 100%; height: 100%; object-fit: cover; } .bt-nearby-body { padding: 10px 12px 12px; } .bt-nearby-name { font-weight: 700; font-size: 15px; margin: 0 0 4px; } .bt-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 0; } .bt-chip.live { color: var(--bt-green-chip); } .bt-chip.normal { color: var(--bt-yellow); } .bt-nearby-bio { font-size: 12px; color: var(--bt-muted); line-height: 1.4; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bt-nearby-card form { margin-top: 8px; } .bt-nearby-card .bt-pill-btn { width: 100%; justify-content: center; padding: 8px 14px; font-size: 13px; } .bt-live-pill { position: absolute; top: 8px; right: 8px; background: var(--bt-green); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: var(--bt-r-pill); letter-spacing: .03em; } .bt-online-dot { position: absolute; bottom: 8px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--bt-green, #3ecf6e); border: 2px solid var(--bt-bg); } .bt-online-dot.offline { background: var(--bt-gray-dot, #9a9a9a); } /* Feed / Moments */ .bt-composer { position: relative; z-index: 1; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md); padding: 14px; margin-top: 20px; } .bt-composer textarea { width: 100%; background: transparent; border: none; color: var(--bt-text); font-family: inherit; font-size: 14px; resize: none; padding: 0; min-height: 40px; } .bt-composer textarea:focus { outline: none; } .bt-composer-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; } .bt-attach-btn { width: 40px; height: 40px; border-radius: var(--bt-r-sm); border: 1px dashed var(--bt-border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bt-muted); flex-shrink: 0; position: relative; font-size: 16px; } .bt-attach-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .bt-attach-name { font-size: 12px; color: var(--bt-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bt-feed-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .bt-feed-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md); padding: 14px; opacity: 0; animation: bt-pop-in .35s ease forwards; } .bt-feed-head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .bt-feed-head-row .bt-feed-head { margin-bottom: 0; flex: 1; min-width: 0; } .bt-feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .bt-feed-name { font-weight: 700; font-size: 14px; } .bt-feed-time { font-size: 12px; color: var(--bt-muted); } .bt-feed-report-btn { flex-shrink: 0; color: var(--bt-red); font-size: 12px; font-weight: 600; background: none; border: none; cursor: pointer; text-decoration: none; font-family: inherit; padding: 4px 0 4px 8px; } .bt-feed-card .bt-report-box { margin: 0 -14px 10px; padding: 10px 14px; border-radius: 0; border-left: none; border-right: none; } .bt-feed-caption { font-size: 14px; line-height: 1.5; margin: 0 0 10px; } .bt-feed-photo { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--bt-r-sm); object-fit: cover; margin-bottom: 10px; display: block; } .bt-like-btn { background: none; border: none; display: inline-flex; align-items: center; gap: 6px; color: var(--bt-muted); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; } .bt-heart { font-size: 19px; display: inline-block; transition: transform .2s cubic-bezier(.34,1.6,.64,1), color .2s; } .bt-like-btn.liked { color: var(--bt-red-heart); } .bt-like-btn.liked .bt-heart { transform: scale(1.25) rotate(-8deg); } /* Avatars — colorful per-person identity ring */ .bt-avatar { display: inline-block; border-radius: 50%; flex-shrink: 0; } .bt-avatar img { display: block; border-radius: 50%; object-fit: cover; width: 100%; height: 100%; } .bt-avatar-ring { box-shadow: 0 0 0 2px var(--bt-bg), 0 0 0 3.5px oklch(80% 0.14 var(--hue, 95)); } .bt-avatar { position: relative; } .bt-avatar-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bt-muted); border: 2px solid var(--bt-bg); } .bt-avatar-status.online { background: var(--bt-green, #3ecf6e); } /* Inbox */ .bt-inbox-list { position: relative; z-index: 1; margin-top: 16px; } .bt-inbox-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--bt-divider); text-decoration: none; color: var(--bt-text); opacity: 0; animation: bt-pop-in .35s ease forwards; } .bt-inbox-row:last-child { border-bottom: none; } .bt-inbox-avatar { width: 52px; height: 52px; } .bt-inbox-main { flex: 1; min-width: 0; } .bt-inbox-name { font-weight: 700; font-size: 15px; } .bt-inbox-preview { color: var(--bt-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bt-inbox-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .bt-inbox-time { font-size: 11px; color: var(--bt-muted); } .bt-inbox-unread { background: var(--bt-yellow); color: var(--bt-on-yellow); font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: var(--bt-r-pill); display: flex; align-items: center; justify-content: center; padding: 0 5px; } .bt-inbox-row.unread .bt-inbox-name { color: var(--bt-yellow); } .bt-inbox-row.unread .bt-inbox-preview { color: var(--bt-text); font-weight: 600; } /* Chat */ .bt-backheader .bt-inbox-avatar { width: 36px; height: 36px; } .bt-chat-header-name { font-weight: 700; font-size: 15px; line-height: 1.2; } .bt-chat-typing { font-size: 11px; color: var(--bt-green); line-height: 1.2; } .bt-chat-report { margin-left: auto; color: var(--bt-red); font-size: 13px; font-weight: 600; background: none; border: none; cursor: pointer; text-decoration: none; font-family: inherit; } .bt-report-box { display: none; padding: 12px 20px; background: var(--bt-surface); border-bottom: 1px solid var(--bt-border); } .bt-report-box.open { display: block; } .bt-report-box textarea { width: 100%; background: var(--bt-input-bg); color: var(--bt-text); border: 1px solid var(--bt-border); border-radius: var(--bt-r-sm); padding: 8px 10px; font-size: 13px; font-family: inherit; } .bt-report-box button { margin-top: 8px; background: var(--bt-yellow); color: var(--bt-on-yellow); border: none; padding: 7px 16px; border-radius: var(--bt-r-pill); font-weight: 700; cursor: pointer; } .bt-blocked-hint { color: var(--bt-red); padding: 10px 20px; font-size: 13px; } .bt-messages { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; padding-bottom: 90px; } .bt-bubble { max-width: 72%; padding: 10px 14px; font-size: 14px; line-height: 1.4; animation: bt-msg-in .25s ease; } .bt-bubble.mine { align-self: flex-end; background: var(--bt-yellow); color: var(--bt-on-yellow); font-weight: 500; border-radius: 16px 16px 4px 16px; } .bt-bubble.theirs { align-self: flex-start; background: var(--bt-surface); border: 1px solid var(--bt-border); color: var(--bt-text); border-radius: 16px 16px 16px 4px; } .bt-tick { display: inline-block; margin-left: 6px; font-size: 11px; letter-spacing: -2px; opacity: .55; } .bt-tick.read { opacity: 1; color: var(--bt-blue, #3a8bff); } /* Chat image/video attachments */ .bt-bubble.has-media { background: transparent; border: none; padding: 4px; max-width: 220px; } .bt-msg-media { display: block; width: 100%; max-height: 280px; border-radius: 14px; object-fit: cover; cursor: zoom-in; background: #000; } video.bt-msg-media { cursor: default; max-height: 300px; object-fit: contain; } .bt-bubble.has-media .bt-tick { display: block; text-align: right; margin: 2px 4px 0 0; } .bt-typing-bubble { align-self: flex-start; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: 16px 16px 16px 4px; padding: 12px 14px; display: inline-flex; gap: 4px; } .bt-typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--bt-muted); animation: bt-dot-bounce 1.2s infinite; } .bt-typing-bubble span:nth-child(2) { animation-delay: .15s; } .bt-typing-bubble span:nth-child(3) { animation-delay: .3s; } .bt-chat-input-row { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bt-bg); border-top: 1px solid var(--bt-border); } .bt-chat-input-row input { flex: 1; background: var(--bt-input-bg); border: 1px solid var(--bt-border); color: var(--bt-text); border-radius: var(--bt-r-pill); padding: 12px 18px; font-size: 14px; font-family: inherit; } .bt-chat-input-row input:focus { outline: none; border-color: var(--bt-radio-border); } .bt-send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--bt-yellow); color: var(--bt-on-yellow); border: none; flex-shrink: 0; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .bt-send-btn:disabled { opacity: .5; cursor: not-allowed; } /* Profile */ .bt-profile-center { position: relative; z-index: 1; text-align: center; margin-top: 24px; } .bt-profile-avatar { width: 94px; height: 94px; border-radius: 50%; margin: 0 auto 14px; box-shadow: 0 0 0 4px var(--bt-bg), 0 0 0 7px var(--bt-yellow); } .bt-profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .bt-profile-name { font-size: 18px; font-weight: 800; margin: 0 0 4px; } .bt-profile-bio { font-size: 13px; color: var(--bt-muted); margin: 0; } /* Profile photo gallery */ .bt-gallery-section { position: relative; z-index: 1; margin-top: 24px; } .bt-gallery-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .bt-gallery-title { font-size: 14px; font-weight: 700; } .bt-gallery-count { font-size: 12px; color: var(--bt-muted); } .bt-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .bt-gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--bt-r-md); overflow: hidden; border: 1px solid var(--bt-border); background: var(--bt-surface); } .bt-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; } .bt-gallery-delete { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: none; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .bt-gallery-add { aspect-ratio: 1; border-radius: var(--bt-r-md); border: 1.5px dashed var(--bt-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--bt-muted); font-size: 11px; cursor: pointer; background: var(--bt-surface); } .bt-gallery-add .plus { font-size: 22px; font-weight: 300; line-height: 1; color: var(--bt-yellow); } .bt-gallery-add.loading { opacity: .5; pointer-events: none; } .bt-gallery-hint { font-size: 12px; color: var(--bt-red, #e5484d); margin: 8px 0 0; min-height: 14px; } /* Lightbox nav additions (shared .bt-lightbox base is defined elsewhere) */ .bt-lightbox-close, .bt-lightbox-nav { position: absolute; background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .bt-lightbox-close { top: 16px; right: 16px; width: 36px; height: 36px; font-size: 20px; z-index: 2; } .bt-lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 26px; z-index: 2; } .bt-lightbox-nav.prev { left: 12px; } .bt-lightbox-nav.next { right: 12px; } .bt-lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.5); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--bt-r-pill); } .bt-nav-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 28px; } .bt-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md); padding: 15px 16px; text-decoration: none; color: var(--bt-text); font-size: 14px; font-weight: 600; cursor: pointer; } .bt-nav-row .chev { color: var(--bt-chevron); font-size: 16px; } .bt-nav-row.danger { color: var(--bt-red); } .bt-nav-row.danger .chev { display: none; } .bt-nav-row form { margin: 0; } .bt-nav-row button { background: none; border: none; color: var(--bt-red); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; text-align: left; width: 100%; } /* Settings */ .bt-settings-form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .bt-radio-row { display: flex; align-items: flex-start; gap: 12px; background: var(--bt-surface); border: 1px solid var(--bt-radio-border); border-radius: var(--bt-r-md); padding: 14px 16px; cursor: pointer; } .bt-radio-row:has(input:checked) { border-color: var(--bt-yellow); } .bt-radio-row input { position: absolute; opacity: 0; width: 1px; height: 1px; } .bt-radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bt-radio-border); flex-shrink: 0; margin-top: 1px; position: relative; } .bt-radio-row:has(input:checked) .bt-radio-dot { border-color: var(--bt-yellow); } .bt-radio-row:has(input:checked) .bt-radio-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--bt-yellow); } .bt-radio-label { font-size: 14px; font-weight: 700; } .bt-radio-hint { display: block; font-size: 12px; font-weight: 400; color: var(--bt-muted); margin-top: 2px; } .bt-settings-subhead { position: relative; z-index: 1; font-size: 15px; font-weight: 700; margin: 24px 0 4px; } .bt-card { position: relative; z-index: 1; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md); padding: 16px; margin-top: 16px; } .bt-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; } .bt-card .bt-subtitle { margin-bottom: 0; } .bt-approved-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bt-divider); } .bt-approved-row:last-of-type { border-bottom: none; } .bt-approved-name { flex: 1; font-size: 14px; font-weight: 600; } .bt-approved-countdown { font-size: 11px; color: var(--bt-muted); } .bt-link-danger { background: none; border: none; color: var(--bt-red); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; } .bt-link-yellow { background: none; border: none; color: var(--bt-yellow); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; text-decoration: none; } .bt-add-viewer { display: flex; gap: 8px; margin-top: 12px; } .bt-add-viewer select { flex: 1; background: var(--bt-input-bg); border: 1px solid var(--bt-border); color: var(--bt-text); border-radius: var(--bt-r-sm); padding: 8px 10px; font-family: inherit; font-size: 13px; } .bt-add-viewer button { background: var(--bt-yellow); color: var(--bt-on-yellow); border: none; border-radius: var(--bt-r-pill); padding: 8px 16px; font-weight: 700; cursor: pointer; font-size: 13px; } .bt-live-status { display: flex; align-items: center; gap: 8px; font-size: 13px; } .bt-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .bt-live-status.is-online .bt-status-dot { background: var(--bt-green); box-shadow: 0 0 6px oklch(76% 0.19 145 / 0.6); } .bt-live-status.is-offline .bt-status-dot { background: var(--bt-muted); } /* Safety */ .bt-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .bt-toggle-label { font-size: 13px; font-weight: 600; } .bt-toggle { position: relative; display: inline-flex; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; } .bt-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .bt-toggle-track { position: absolute; inset: 0; background: var(--bt-radio-border); border-radius: var(--bt-r-pill); transition: background .2s; } .bt-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: var(--bt-shadow-knob); } .bt-toggle input:checked ~ .bt-toggle-track { background: var(--bt-yellow); } .bt-toggle input:checked ~ .bt-toggle-track .bt-toggle-knob { transform: translateX(20px); } .bt-danger-pill { display: inline-block; background: var(--bt-red); color: #fff; border: none; border-radius: var(--bt-r-pill); padding: 11px 20px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; margin-top: 4px; } .bt-blocked-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bt-divider); } .bt-blocked-row:last-of-type { border-bottom: none; } .bt-blocked-name { flex: 1; font-size: 14px; font-weight: 600; } .bt-empty-hint { position: relative; z-index: 1; color: var(--bt-muted); font-size: 13px; text-align: center; margin-top: 40px; } /* Plain form fields inside the new theme (Profile edit form, etc.) */ .bt-app .bt-form { position: relative; z-index: 1; margin-top: 24px; text-align: left; } .bt-app .bt-form label { display: block; margin: 14px 0 6px; font-size: 12px; color: var(--bt-muted); font-weight: 600; } .bt-app .bt-form input, .bt-app .bt-form select, .bt-app .bt-form textarea { width: 100%; padding: 11px 14px; border-radius: var(--bt-r-sm); border: 1px solid var(--bt-border); background: var(--bt-input-bg); color: var(--bt-text); font-size: 14px; font-family: inherit; } .bt-app .bt-form input:focus, .bt-app .bt-form select:focus, .bt-app .bt-form textarea:focus { outline: none; border-color: var(--bt-radio-border); } .bt-app .bt-form button[type="submit"] { margin-top: 16px; width: 100%; justify-content: center; } .bt-app .bt-error { color: var(--bt-red); font-size: 13px; position: relative; z-index: 1; } .bt-app .bt-success { color: var(--bt-yellow); font-size: 13px; background: oklch(85% 0.2 95 / 0.08); border: 1px solid var(--bt-border); border-radius: var(--bt-r-sm); padding: 10px 12px; position: relative; z-index: 1; } /* Motion */ @keyframes bt-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bt-pulse { 0%, 100% { box-shadow: 0 0 0 0 oklch(80% 0.19 145 / 0.5); } 50% { box-shadow: 0 0 0 6px oklch(80% 0.19 145 / 0); } } @keyframes bt-pop-in { from { opacity: 0; transform: scale(.85) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes bt-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes bt-dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } @media (max-width: 380px) { .bt-screen { padding-left: 16px; padding-right: 16px; } .bt-radar-dish { width: 250px; height: 250px; } } /* Feed: comments + photo lightbox */ .bt-comment-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bt-divider); } .bt-comment-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .bt-comment-row { display: flex; align-items: flex-start; gap: 8px; } .bt-comment-avatar { width: 26px; height: 26px; flex-shrink: 0; } .bt-comment-body { background: var(--bt-input-bg); border-radius: var(--bt-r-sm); padding: 6px 10px; font-size: 13px; line-height: 1.4; } .bt-comment-name { font-weight: 700; margin-right: 6px; } .bt-comment-text { color: var(--bt-text); } .bt-comment-form { display: flex; gap: 8px; } .bt-comment-form input { flex: 1; background: var(--bt-input-bg); border: 1px solid var(--bt-border); color: var(--bt-text); border-radius: var(--bt-r-pill); padding: 8px 14px; font-size: 13px; font-family: inherit; } .bt-comment-form input:focus { outline: none; border-color: var(--bt-radio-border); } .bt-comment-send { background: var(--bt-yellow); color: var(--bt-on-yellow); border: none; border-radius: var(--bt-r-pill); padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; flex-shrink: 0; } .bt-comment-send:disabled { opacity: .6; cursor: not-allowed; } .bt-feed-photo { cursor: zoom-in; } .bt-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; } .bt-lightbox.hidden { display: none; } .bt-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--bt-r-md); } /* Profile header row: title + top-right edit-profile button */ .bt-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .bt-header-row .bt-h1 { margin-bottom: 0; } .bt-edit-profile-btn { display: inline-flex; align-items: center; flex-shrink: 0; margin-top: 4px; background: var(--bt-input-bg); color: var(--bt-text); border: 1px solid var(--bt-border); padding: 8px 14px; border-radius: var(--bt-r-pill); font-size: 12px; font-weight: 700; text-decoration: none; } .bt-edit-profile-btn:hover { border-color: var(--bt-yellow); color: var(--bt-yellow); } .bt-h2 { font-size: 18px; font-weight: 800; color: var(--bt-text); margin: 0 0 4px; } /* Radar popup: avatar+name become a link to that person's profile */ .bt-sheet-profile-link { display: block; text-decoration: none; color: inherit; } /* Feed post author (avatar+name) links to that person's profile */ .bt-feed-link { text-decoration: none; color: inherit; } /* Chat header avatar+name links to that person's profile */ .bt-chat-header-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; } /* Read-only post display used on another user's profile (no like/comment controls - just a static count, matching the "view only" scope). */ .bt-feed-like-static { display: inline-flex; align-items: center; gap: 6px; color: var(--bt-muted); font-size: 14px; font-weight: 600; } .bt-feed-like-static .bt-heart { font-size: 19px; } /* Other user's profile page */ .bt-profile-avatar { position: relative; } .bt-profile-status-dot { width: 16px; height: 16px; border-width: 3px; } .bt-userprofile-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .bt-userprofile-actions .bt-pill-btn { padding: 10px 28px; } .bt-userprofile-actions .bt-report-box { margin: 0; } .bt-userprofile-actions form { margin: 0; } /* อันดับ (Rankings) */ .bt-rank-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .bt-rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md); opacity: 0; animation: bt-pop-in .35s ease forwards; } .bt-rank-row.me { border-color: var(--bt-yellow); } .bt-rank-number { width: 26px; flex-shrink: 0; text-align: center; font-size: 16px; font-weight: 800; color: var(--bt-muted); } .bt-rank-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bt-rank-score { flex-shrink: 0; color: var(--bt-red-heart); font-weight: 700; font-size: 13px; } /* กลุ่ม (Groups) */ .bt-group-create-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .bt-group-create-form input, .bt-group-create-form textarea { width: 100%; padding: 11px 14px; border-radius: var(--bt-r-sm); border: 1px solid var(--bt-border); background: var(--bt-input-bg); color: var(--bt-text); font-size: 14px; font-family: inherit; } .bt-group-create-form input:focus, .bt-group-create-form textarea:focus { outline: none; border-color: var(--bt-radio-border); } .bt-group-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .bt-group-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md); text-decoration: none; color: inherit; opacity: 0; animation: bt-pop-in .35s ease forwards; } .bt-group-icon { font-size: 22px; flex-shrink: 0; width: 22px; text-align: center; } .bt-group-main { flex: 1; min-width: 0; } .bt-group-name { font-weight: 700; font-size: 14px; } .bt-group-preview { font-size: 12px; color: var(--bt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bt-group-members { flex-shrink: 0; font-size: 11px; color: var(--bt-muted); } .bt-group-row form { margin: 0 0 0 8px; flex-shrink: 0; } .bt-group-msg-sender { font-size: 11px; font-weight: 700; color: var(--bt-yellow); margin-bottom: 2px; } /* กิจกรรม (Activities) */ .bt-activity-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .bt-activity-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--bt-divider); opacity: 0; animation: bt-pop-in .35s ease forwards; } .bt-activity-row:last-child { border-bottom: none; } .bt-activity-main { flex: 1; min-width: 0; } .bt-activity-text { font-size: 13px; line-height: 1.4; } .bt-activity-time { font-size: 11px; color: var(--bt-muted); margin-top: 2px; } .bt-activity-icon { flex-shrink: 0; font-size: 16px; } /* ร้านค้า (Shop) */ .bt-coin-balance { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .bt-coin-icon { font-size: 22px; } .bt-shop-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .bt-shop-card { position: relative; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-r-md); padding: 16px 12px; text-align: center; opacity: 0; animation: bt-pop-in .35s ease forwards; } .bt-shop-new-badge { position: absolute; top: 8px; right: 8px; background: var(--bt-red); color: var(--bt-text); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--bt-r-pill); } .bt-shop-icon { display: block; font-size: 34px; margin-bottom: 6px; } .bt-shop-name { font-weight: 700; font-size: 14px; } .bt-shop-desc { font-size: 11px; color: var(--bt-muted); margin: 4px 0 8px; min-height: 28px; } .bt-shop-owned { font-size: 11px; color: var(--bt-green); margin-bottom: 8px; } .bt-shop-card form { margin: 0; } .bt-shop-card .bt-pill-btn { width: 100%; justify-content: center; }