:root { /* Dark-first. Brand priority colours: red + #ffffff (white). Red = primary accent/selected/links + low availability; green = availability/ pharmacy/success; orange = moderate. The two brand colours are variables so Portugal mode can swap them app-wide (LU red ee163d to PT red fe0000; LU blue 00a3de to PT green 006600). All hard-coded uses below reference these vars / their rgba channels. */ --brand: #ee163d; /* priority brand colour */ --brand-rgb: 238, 22, 61; /* same, as rgba() channels */ --brand2: #00a3de; /* secondary brand: messages / unread / nav accent */ --brand2-rgb: 0, 163, 222; --flag-red: var(--brand); /* (alias kept for older refs) */ --flag-blue: var(--brand); /* actions / nav / selected / links → brand */ --ok: #2fd17a; /* availability / pharmacy / success */ --warn: var(--brand); /* low availability */ --mid: #ff9f0a; /* moderate */ --bg: #0c0c0e; --panel: #161619; --panel-2: #1d1d22; --panel-3: #26262d; --line: #2b2b32; --text: #ffffff; --muted: #9aa3ad; --accent: var(--brand); --ev: #2e9bff; /* EV markers stay blue for map distinction */ --fuel: #ff9f0a; --parking: #2fd17a; --pharmacy: #2fd17a; --events: #ffb627; /* events → warm yellow-ish orange */ --call: #10b981; /* emerald — calls */ --call-2: #34d399; --diesel: #ff9f0a; --sp95: #2e9bff; --sp98: #bf5af2; --lpg: #2fd17a; --topbar-h: 60px; --nav-h: 56px; --radius: 18px; --shadow: 0 12px 40px rgba(0,0,0,.55); --ease: cubic-bezier(.2, .8, .25, 1); --glass: rgba(20,20,24,.72); --glass-line: rgba(255,255,255,.09); } /* Portugal mode (Settings → Region): swap the two brand colours everywhere. Set on as data-mode="pt" early by settings.js, before paint. Friends/chat etc. are unaffected. */ :root[data-mode="pt"] { --brand: #fe0000; --brand-rgb: 254, 0, 0; --brand2: #006600; --brand2-rgb: 0, 102, 0; } /* Appearance (Settings → General): Light / Dark / System. Dark is the default above; the early inline script + settings.js set . Light overrides ONLY the surface palette, so the brand colours (and the PT swap above, which targets different vars) carry over to both regions unchanged. */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --bg: #f5f6f8; --panel: #ffffff; --panel-2: #f1f2f5; --panel-3: #e7e8ee; --line: #e4e5ec; --text: #15161a; --muted: #5c636e; --shadow: 0 10px 34px rgba(20, 22, 40, .14); --glass: rgba(255, 255, 255, .82); --glass-line: rgba(0, 0, 0, .08); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Dark background on too, so any area the fixed body doesn't cover (e.g. the iOS home-indicator safe area) is the app's colour — never a stray black/white bar. */ html, body { height: 100%; margin: 0; background: var(--bg); } body { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); overflow: hidden; position: fixed; inset: 0; /* lock the app frame; screens scroll internally */ } a { color: var(--flag-blue); text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } /* ---------- Top bar ---------- */ .topbar { /* height must INCLUDE the safe-area inset — with box-sizing:border-box the inset would otherwise eat into the 60px, squishing the bar and shifting everything up on iOS. */ position: fixed; top: 0; left: 0; right: 0; height: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 1300; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; padding-top: env(safe-area-inset-top); background: var(--glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--glass-line); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: .2px; flex: 0 0 auto; } .brand .logo { height: 38px; width: auto; border-radius: 9px; display: block; } .brand span { white-space: nowrap; } .top-right { display: flex; align-items: center; gap: 10px; min-width: 0; } .avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: linear-gradient(135deg, var(--flag-blue), #1769c4); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; transition: transform .12s var(--ease); } .avatar:hover { transform: scale(1.06); } /* ---------- Signature pharmacy pill (lives in the top bar, every screen) ---------- */ /* Animatable gradient stops + foreground colour, so EVERY state change (incl. the colours) cross-fades smoothly — plain `background` can't interpolate between two gradients, but @property-registered custom properties can. (Unsupported browsers just snap.) */ @property --pp-c1 { syntax: ""; inherits: false; initial-value: #46e08a; } @property --pp-c2 { syntax: ""; inherits: false; initial-value: #2fd17a; } @property --pp-fg { syntax: ""; inherits: false; initial-value: #06210f; } .pharma-pill { --pp-c1: #46e08a; --pp-c2: #2fd17a; --pp-fg: #06210f; display: flex; align-items: center; gap: 9px; border: 0; cursor: pointer; text-align: left; overflow: hidden; flex: none; width: min(56vw, 240px); min-width: min(56vw, 240px); max-width: min(56vw, 240px); height: 44px; /* FIXED — never resizes to its content */ padding: 0 14px 0 7px; border-radius: 999px; color: var(--pp-fg); background: linear-gradient(135deg, var(--pp-c1), var(--pp-c2)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(47,209,122,.4); transition: --pp-c1 .38s var(--ease), --pp-c2 .38s var(--ease), color .38s var(--ease), box-shadow .38s var(--ease), width .34s var(--ease), min-width .34s var(--ease), max-width .34s var(--ease), transform .18s var(--ease); touch-action: manipulation; } .pharma-pill[hidden] { display: none; } .pharma-pill:hover { transform: translateY(-1px) scale(1.02); } .pharma-pill:active { transform: scale(.98); } .pp-ic { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: rgba(255,255,255,.85); color: var(--ok); display: grid; place-items: center; font-weight: 800; font-size: 14px; overflow: hidden; } .pp-ic.has-ava { background: rgba(255,255,255,.25); } .pp-ic img { width: 100%; height: 100%; object-fit: cover; } .pp-ic span { color: #fff; } .pp-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; } .pp-text b { font-size: 12.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-text small { font-size: 11px; opacity: .85; } /* Calls render their controls INSIDE the pill (replaces the old separate floating call bar); the pill widens to fit them. */ .pp-acts { display: none; } .pharma-pill.pp-call { width: min(90vw, 360px); min-width: min(90vw, 360px); max-width: min(90vw, 360px); padding-right: 6px; } .pharma-pill.pp-call .pp-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .pp-btn { width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.22); color: inherit; font-size: 15px; line-height: 1; display: grid; place-items: center; transition: background .15s var(--ease), transform .1s var(--ease); } .pp-btn:hover { background: rgba(255,255,255,.34); } .pp-btn:active { transform: scale(.92); } .pp-btn.danger { background: rgba(0,0,0,.32); } .pp-btn.active { background: rgba(255,255,255,.55); } /* During a call the pill floats just below the top bar, right-aligned, with room for the controls. */ .pp-call.pill-floating { right: 12px; left: auto; top: calc(env(safe-area-inset-top) + var(--topbar-h) + 8px); } .pharma-pill.pulse { animation: ppPulse 1s var(--ease) 0s 3; } @keyframes ppPulse { 0%, 100% { box-shadow: 0 6px 20px rgba(47,209,122,.4); } 50% { box-shadow: 0 6px 30px rgba(47,209,122,.95), 0 0 0 6px rgba(47,209,122,.25); transform: scale(1.04); } } /* Call states — brand red, with the pill floating above overlays while a call is up. */ .pharma-pill[data-state="incoming"], .pharma-pill[data-state="outgoing"], .pharma-pill[data-state="active"] { --pp-c1: #ff4d68; --pp-c2: var(--brand); --pp-fg: #fff; box-shadow: 0 6px 22px rgba(var(--brand-rgb),.55); } .pharma-pill[data-state="active"] .pp-text small { font-variant-numeric: tabular-nums; } .pharma-pill[data-state="incoming"] { animation: callBeat 1.1s ease-in-out infinite; } @keyframes callBeat { 0%, 100% { box-shadow: 0 6px 22px rgba(var(--brand-rgb),.5); transform: scale(1); } 18% { transform: scale(1.06); box-shadow: 0 8px 30px rgba(var(--brand-rgb),.95), 0 0 0 6px rgba(var(--brand-rgb),.25); } 36% { transform: scale(1); } 54% { transform: scale(1.05); box-shadow: 0 8px 28px rgba(var(--brand-rgb),.85), 0 0 0 5px rgba(var(--brand-rgb),.18); } } body.reduce-motion .pharma-pill[data-state="incoming"], body.reduce-motion .pharma-pill.pulse { animation: none; } /* Float in the SAME spot as the in-topbar pill — left of the avatar, never over it. */ .pill-floating { position: fixed; top: calc(env(safe-area-inset-top) + 11px); right: 56px; z-index: 2300; max-width: calc(100vw - 70px); } /* Long-press quick actions */ .pill-actions-ov { position: fixed; inset: 0; z-index: 2500; } .pill-actions { position: fixed; top: calc(env(safe-area-inset-top) + 56px); right: 12px; min-width: 184px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); animation: lgPop .18s var(--ease) both; } .pa-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; background: none; color: var(--text); font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer; text-align: left; } .pa-item:active { background: var(--panel-3); } .pa-item.active { color: var(--call-2); } .pa-item.danger { color: var(--warn); } .pa-item .pa-ic { font-size: 17px; width: 22px; text-align: center; } /* ---------- Login nudge (points at the profile button when logged out) ---------- */ .login-nudge { position: fixed; z-index: 1280; right: 12px; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px); display: flex; align-items: center; gap: 6px; max-width: 78vw; background: var(--panel-2); border: 1px solid var(--glass-line); border-radius: 12px; padding: 8px 8px 8px 12px; box-shadow: var(--shadow); font-size: 12.5px; color: var(--text); cursor: pointer; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .login-nudge.show { opacity: 1; transform: none; pointer-events: auto; } .login-nudge::before { content: ""; position: absolute; top: -5px; right: 16px; width: 11px; height: 11px; background: var(--panel-2); border-left: 1px solid var(--glass-line); border-top: 1px solid var(--glass-line); transform: rotate(45deg); } .login-nudge .ln-x { background: none; border: 0; color: var(--muted); font-size: 17px; line-height: 1; padding: 0 4px; } /* PWA install suggestion banner (install.js) — a dismissible card above the nav. */ .install-banner { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--nav-h) + 14px); transform: translate(-50%, 16px); z-index: 1290; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 24px)); padding: 11px 11px 11px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .install-banner.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .install-banner .ib-ic { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; object-fit: cover; } .install-banner .ib-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .install-banner .ib-txt b { font-size: 14px; font-weight: 700; } .install-banner .ib-txt small { font-size: 12px; color: var(--muted); line-height: 1.35; } .install-banner .ib-cta { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; } .install-banner .ib-x { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; background: var(--panel-3); color: var(--muted); font-size: 17px; line-height: 1; display: grid; place-items: center; } .install-banner .ib-x:hover { color: var(--text); } /* ---------- Error bar ---------- */ .dataerror { position: fixed; top: calc(var(--topbar-h) + env(safe-area-inset-top)); left: 0; right: 0; z-index: 1240; background: #3a1414; color: #ffb4ad; border-bottom: 1px solid #5a1f1f; padding: 9px 14px; font-size: 12.5px; } .dataerror code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 4px; } /* ---------- Screens (tabs slide left/right; both stay visible during the slide → no blink) ---------- */ .screens { position: fixed; left: 0; right: 0; bottom: 0; overflow: hidden; top: calc(var(--topbar-h) + env(safe-area-inset-top)); } .screen { position: absolute; inset: 0; visibility: hidden; transform: translateX(0); } .screen.active { visibility: visible; } .screen.lg-sliding { transition: transform .3s var(--ease); will-change: transform; } body.reduce-motion .screen.lg-sliding { transition: none; } /* Re-rendering an already-shown tab: skip the one-time entrance animations so the content swap is seamless (no flash). Unread chat rows keep their breathing glow. */ .lg-noanim .chat-row:not(.unread), .lg-noanim .friend-card, .lg-noanim .card { animation: none; } .screen-pad { position: absolute; inset: 0; overflow-y: auto; padding: 18px 16px 104px; -webkit-overflow-scrolling: touch; } /* ---------- Explore ---------- */ #map { position: absolute; inset: 0; background: var(--bg); z-index: 0; } .explore-top { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 600; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .explore-top > * { pointer-events: auto; } .search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--glass-line); box-shadow: var(--shadow); } .search-ic { color: var(--muted); font-size: 17px; } .search input { flex: 1; border: 0; background: transparent; color: var(--text); font-size: 16px; outline: none; min-width: 0; } /* Explore filter: a single button that drops down a menu of every layer — no long chip scroll. */ .filter-bar { position: relative; display: flex; } .filter-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--glass-line); box-shadow: var(--shadow); color: var(--text); font-size: 14px; font-weight: 650; cursor: pointer; transition: transform .12s var(--ease); } .filter-btn:active { transform: scale(.97); } .filter-ic { font-size: 16px; line-height: 1; } .filter-caret { color: var(--muted); font-size: 12px; margin-left: 1px; transition: transform .18s var(--ease); } .filter-btn[aria-expanded="true"] .filter-caret { transform: rotate(180deg); } .filter-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; max-height: 64vh; overflow-y: auto; z-index: 1200; padding: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); animation: lgPop .16s var(--ease) both; -webkit-overflow-scrolling: touch; } .filter-menu[hidden] { display: none; } .filter-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--text); font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer; text-align: left; } .filter-opt:hover { background: var(--panel-2); } .filter-opt .fo-ic { font-size: 17px; width: 22px; text-align: center; flex: 0 0 auto; } .filter-opt .fo-lbl { flex: 1 1 auto; } .filter-opt .fo-check { flex: 0 0 auto; color: var(--accent); opacity: 0; } .filter-opt.on { color: var(--accent); } .filter-opt.on .fo-check { opacity: 1; } /* ---------- Bottom sheet ---------- */ .sheet { position: fixed; left: 0; right: 0; z-index: 1250; bottom: calc(var(--nav-h) + 46px + env(safe-area-inset-bottom)); /* sit comfortably above the floating nav pill */ margin: 0 auto; width: min(560px, 100%); background: var(--glass); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--glass-line); border-radius: 20px; box-shadow: var(--shadow); /* floats above the nav → fully rounded card */ /* Fully clear the screen when hidden — translate by the panel's own height PLUS its bottom offset (+ buffer), otherwise a sliver of the translucent sheet peeks at the bottom on iOS. */ transform: translateY(calc(100% + var(--nav-h) + env(safe-area-inset-bottom) + 64px)); transition: transform .34s var(--ease); } .sheet[data-state="collapsed"], .sheet[data-state="expanded"] { transform: none; } .sheet[data-state="hidden"] { transform: translateY(calc(100% + var(--nav-h) + env(safe-area-inset-bottom) + 64px)); pointer-events: none; } .sheet-handle { display: block; width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); border: 0; margin: 9px auto 4px; padding: 0; } .sheet-close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); border: 0; color: var(--muted); font-size: 18px; line-height: 1; } .sheet-head { padding: 4px 18px 14px; } .sheet-body { display: none; padding: 0 18px 18px; max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sheet[data-state="expanded"] .sheet-body { display: block; animation: lgFade .2s ease both; } .sh-title { font-size: 17px; font-weight: 700; margin: 0; } .sh-sub { color: var(--muted); font-size: 11.5px; margin: 2px 0 0; } .sh-row { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; } .sh-metric { font-size: 38px; font-weight: 800; line-height: .9; letter-spacing: -1px; font-variant-numeric: tabular-nums; } .sh-metric small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .sh-metriclabel { color: var(--muted); font-size: 11px; margin-bottom: 4px; } .sh-actions { margin-left: auto; display: flex; gap: 8px; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 13px; border: 0; font-weight: 650; font-size: 14px; transition: transform .12s var(--ease), filter .15s; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(var(--brand-rgb),.4); } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: var(--panel-2); color: var(--text); } .btn-save.on { color: var(--mid); } /* sheet body content */ .sb-photo { position: relative; height: 150px; margin: 0 0 12px; border-radius: 14px; overflow: hidden; background: #000; } .sb-photo .bg { position: absolute; inset: -24px; background-size: cover; background-position: center; filter: blur(18px); transform: scale(1.1); opacity: .5; } .sb-photo img { position: relative; height: 100%; display: block; margin: 0 auto; object-fit: contain; } .sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0; } .sb-cell { background: var(--panel-2); border-radius: 12px; padding: 9px 12px; } .sb-cell .k { color: var(--muted); font-size: 10.5px; } .sb-cell .v { font-size: 13px; font-weight: 600; margin-top: 1px; } .sb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .tag { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; font-size: 11.5px; } .sb-note { color: var(--muted); font-size: 11.5px; margin: 8px 0 0; } .sb-table { width: 100%; border-collapse: collapse; margin: 6px 0; } .sb-table td { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; font-variant-numeric: tabular-nums; } .sb-table td.p { text-align: right; font-weight: 650; } .sb-bar { height: 8px; border-radius: 5px; background: var(--panel-3); overflow: hidden; margin: 8px 0; } .sb-bar > div { height: 100%; } .sb-details summary { color: var(--muted); font-size: 12.5px; cursor: pointer; margin-top: 6px; } .sb-details pre { white-space: pre-wrap; font: 12px/1.45 system-ui; color: var(--muted); margin: 6px 0 0; } /* ---------- Bottom nav ---------- */ /* Floating translucent pill (non-movable). Mobile: bottom, full width minus margins. */ .bottomnav { position: fixed; left: 10px; right: 10px; bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 1300; display: flex; gap: 2px; padding: 5px; border-radius: 24px; background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--glass-line); box-shadow: var(--shadow); } .bottomnav button { flex: 1 1 0; min-width: 0; background: none; border: 0; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 600; padding: 6px 2px; border-radius: 16px; transition: color .15s var(--ease), background .15s; } .bottomnav .bn-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .bottomnav .bn-ic { font-size: 19px; line-height: 1; transition: transform .15s var(--ease); } .bottomnav button.active { color: var(--accent); background: rgba(var(--brand-rgb),.16); } .bottomnav button.active .bn-ic { transform: scale(1.08); } .bottomnav button:active .bn-ic { transform: scale(.9); } /* ---------- Cards / dashboard / placeholders ---------- */ .greeting { font-size: 26px; font-weight: 750; margin: 4px 0 2px; } .greeting + .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; } .section-h { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 20px 2px 10px; } .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .card { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 16px; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; animation: lgUp .3s var(--ease) both; } .card .c-ic { font-size: 18px; } .card .c-val { font-size: 30px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .card .c-val small { font-size: 14px; font-weight: 600; color: var(--muted); } .card .c-label { color: var(--muted); font-size: 12.5px; } /* Fuel card: today's price for every fuel type (replaces the single "cheapest" number). */ .fuel-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; } .fuel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; line-height: 1.3; } .fuel-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fuel-row b { flex: 0 0 auto; font-weight: 750; color: var(--fuel); font-variant-numeric: tabular-nums; } .card.tap { cursor: pointer; transition: transform .14s var(--ease), border-color .2s; } .card.tap:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); } .card:nth-child(2){animation-delay:.04s} .card:nth-child(3){animation-delay:.08s} .card:nth-child(4){animation-delay:.12s} /* Free-parking count ticks live → a quick bump when the number changes (see core.js). */ @keyframes cValBump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } } .card .c-val.bump { animation: cValBump .5s var(--ease); } body.reduce-motion .card .c-val.bump { animation: none; } /* ---- Dashboard "Friends & social" block (emphasised above the Luxembourg-live cards) ---- */ .ds-online { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; } .ds-online::-webkit-scrollbar { display: none; } .ds-person { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 58px; background: none; border: 0; cursor: pointer; padding: 0; } .ds-person .fr-ava { width: 50px; height: 50px; font-size: 18px; } .ds-person .ds-name { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); text-align: center; } .ds-empty { color: var(--muted); font-size: 13px; padding: 6px 2px 8px; } .ds-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; } .ds-act { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--glass-line); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); transition: transform .14s var(--ease), border-color .2s var(--ease); } .ds-act:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); } .ds-act:active { transform: scale(.97); } .ds-act .ds-act-ic { font-size: 20px; line-height: 1; } .ds-act .ds-badge { position: absolute; top: 8px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .bigcard { background: linear-gradient(160deg, rgba(var(--brand-rgb),.14), rgba(255,255,255,.02)); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 18px; } /* Read-only profile fields (username / display name) with an inline Edit button. */ .pf-field { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); } .pf-field:first-of-type { margin-top: 4px; } .pf-field-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .pf-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; } .pf-value { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-field.editing { align-items: flex-start; } .pf-field-actions { display: flex; gap: 6px; flex: 0 0 auto; } .upsell { background: linear-gradient(160deg, rgba(191,90,242,.16), rgba(255,255,255,.02)); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 18px; margin-top: 12px; } .upsell h3 { margin: 0 0 6px; font-size: 17px; } .upsell p { margin: 0 0 12px; color: var(--muted); font-size: 13px; } .pill-tier { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--text); margin-bottom: 8px; } /* Membership tiers */ .tier { border: 1px solid var(--glass-line); border-left: 3px solid var(--tc, var(--line)); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: rgba(255,255,255,.03); } .tier-cur { background: rgba(var(--brand-rgb),.08); } .tier-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .tier-h b { font-size: 16px; } .tier-price { font-size: 22px; font-weight: 800; color: var(--tc, var(--text)); white-space: nowrap; } .tier-price small { font-size: 12px; font-weight: 500; color: var(--muted); } .tier-feat { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; } .auth-in { width: 100%; padding: 11px 13px; margin: 0 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 16px; } .auth-in:focus { outline: none; border-color: var(--flag-blue); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18); } /* Settings */ .set-gear { position: absolute; top: 14px; right: 16px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 16px; } .set-body { padding: 4px 16px 24px; overflow-y: auto; } /* Settings categories are collapsible accordion sections. */ .set-cat { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; background: none; border: 0; border-top: 1px solid var(--line); padding: 15px 2px; text-align: left; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; } .set-body > .set-cat:first-of-type { border-top: 0; } .set-cat .set-cat-caret { flex: 0 0 auto; font-size: 13px; color: var(--muted); transition: transform .2s var(--ease); } .set-cat[aria-expanded="true"] .set-cat-caret { transform: rotate(180deg); } .set-cat-body { display: none; padding-bottom: 4px; } .set-cat[aria-expanded="true"] + .set-cat-body { display: block; animation: lgFade .18s ease both; } .set-toggle { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid var(--line); cursor: pointer; } .set-toggle span { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .set-toggle b { font-size: 14px; font-weight: 600; } .set-toggle small { color: var(--muted); font-size: 12px; line-height: 1.45; } /* Custom checkbox: unchecked is on-theme (dark fill + subtle border) instead of the native white box; checked fills with brand red and shows a white tick. */ .set-toggle input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 7px; border: 1.5px solid var(--line); background: var(--panel-3); display: grid; place-items: center; transition: background .15s var(--ease), border-color .15s var(--ease); } .set-toggle input:checked { background: var(--accent); border-color: transparent; } .set-toggle input:checked::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .set-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .set-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid var(--line); } .set-row > span { font-size: 14px; font-weight: 600; } .set-sel { flex: 0 0 auto; max-width: 56%; background: var(--panel-3); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font-size: 16px; } .set-body .auth-in { margin-top: 4px; } .set-body .btn { margin-top: 14px; } .field-hint { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: -4px 2px 10px; } /* Respect "Reduce motion" (Settings) and the OS preference. */ body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .empty { text-align: center; color: var(--muted); padding: 48px 16px; } .empty .e-ic { font-size: 34px; display: block; margin-bottom: 10px; opacity: .7; } .saved-item { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; } .saved-item .si-metric { font-size: 22px; font-weight: 800; margin-left: auto; font-variant-numeric: tabular-nums; } /* Saved gas station: expands on tap to reveal price-alert toggles. */ .fuel-saved { display: block; padding: 0; cursor: default; } .fuel-saved .si-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; } .fuel-saved .si-head .si-metric { font-size: 19px; } .fuel-saved .si-caret { flex: 0 0 auto; color: var(--muted); font-size: 14px; transition: transform .2s var(--ease); } .fuel-saved.open .si-caret { transform: rotate(180deg); } .fuel-saved .si-body { padding: 0 14px 8px; border-top: 1px solid var(--line); } .fuel-saved .si-body[hidden] { display: none; } .fuel-saved .si-body .set-toggle, .fuel-saved .si-body .set-row { padding: 11px 0; } .fa-belowx { width: 110px; max-width: 110px; background: var(--panel-3); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Map markers ---------- */ .lg-dotwrap { background: transparent; border: 0; } .lg-dot { position: absolute; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.6); transition: transform .12s var(--ease); } .lg-dot.big { width: 22px; height: 22px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent), 0 1px 8px rgba(0,0,0,.6); } .lg-dotwrap:hover .lg-dot { transform: translate(-50%, -50%) scale(1.2); } /* parking: big availability number */ .pk-pin-wrap { background: transparent; border: 0; } /* Fuel station map pin: a tappable ⛽ emoji (both regions), legible on the dark map. */ .leaflet-div-icon.fuel-pin, .fuel-pin { background: transparent; border: 0; } .fuel-pin { display: grid; place-items: center; font-size: 19px; line-height: 1; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)); transition: transform .12s var(--ease); } .fuel-pin:hover { transform: scale(1.18); } /* PT station sheet: opening-hours rows */ .ptf-hours { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .ptf-hr { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; } .ptf-hr span { color: var(--muted); } .ptf-hr b { font-weight: 650; } /* "Cheapest nearby": floating map button (top-right) + right-hand sliding panel. */ .cn-btn { position: fixed; right: 12px; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px); z-index: 700; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; cursor: pointer; background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--glass-line); box-shadow: var(--shadow); color: var(--text); font-size: 13px; font-weight: 650; transition: transform .12s var(--ease); } .cn-btn[hidden] { display: none; } .cn-btn:active { transform: scale(.96); } .cn-ov { position: fixed; inset: 0; z-index: 2400; background: rgba(0,0,0,.45); display: flex; justify-content: flex-end; opacity: 0; transition: opacity .24s var(--ease); } .cn-ov.show { opacity: 1; } .cn-panel { width: min(380px, 90vw); height: 100%; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); transform: translateX(100%); transition: transform .26s var(--ease); } .cn-ov.show .cn-panel { transform: none; } .cn-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px; } .cn-controls { padding: 13px 16px; display: flex; flex-direction: column; gap: 13px; border-bottom: 1px solid var(--line); } .cn-field { display: flex; flex-direction: column; gap: 6px; } .cn-field > span { font-size: 12.5px; color: var(--muted); font-weight: 600; } .cn-field .set-sel { width: 100%; max-width: none; } .cn-field input[type="range"] { width: 100%; accent-color: var(--accent); } .cn-list { flex: 1; overflow-y: auto; padding: 4px 8px 16px; } .cn-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; background: none; border-bottom: 1px solid var(--line); color: var(--text); text-align: left; cursor: pointer; } .cn-row:hover { background: var(--panel-2); } .cn-price { flex: 0 0 auto; min-width: 64px; font-weight: 800; font-size: 15px; color: var(--fuel); font-variant-numeric: tabular-nums; } .cn-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .cn-main b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cn-main small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cn-dist { flex: 0 0 auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .cn-empty { color: var(--muted); text-align: center; padding: 32px 16px; font-size: 13.5px; } /* Dashboard "apply notifications to all saved stations" block (PT fuel section). */ .dash-bulk { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); display: flex; flex-direction: column; gap: 8px; } .dash-bulk .db-title { font-size: 13px; font-weight: 700; color: var(--text); } .dash-bulk .set-toggle, .dash-bulk .set-row { padding: 4px 0; } /* Date badge for the "List of events" rows (reuses the .cn-row layout). */ .el-date { flex: 0 0 auto; min-width: 46px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; color: var(--events); } .el-date b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .el-date small { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .pk-pin { position: absolute; transform: translate(-50%, -50%); min-width: 34px; height: 28px; padding: 0 7px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--c, var(--muted)); color: #06210f; font: 800 16px/1 -apple-system, system-ui, sans-serif; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 2px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3); white-space: nowrap; transition: transform .12s var(--ease); } .pk-pin:hover { transform: translate(-50%, -50%) scale(1.14); } .lg-cluster { background: transparent !important; } .lg-cluster div { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.92); background: var(--cl, var(--accent)); /* solid fallback */ background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--cl, var(--accent)) 72%, #fff), var(--cl, var(--accent))); box-shadow: 0 3px 12px rgba(0,0,0,.45); /* fallback */ box-shadow: 0 3px 12px rgba(0,0,0,.42), 0 0 0 6px color-mix(in srgb, var(--cl, var(--accent)) 20%, transparent); transition: transform .14s var(--ease); } .lg-sm div { width: 36px; height: 36px; font-size: 13px; } .lg-md div { width: 44px; height: 44px; font-size: 15px; } .lg-lg div { width: 52px; height: 52px; font-size: 16.5px; } .lg-cluster:hover div { transform: scale(1.08); } .leaflet-container { background: var(--bg); font: inherit; } /* Keep Leaflet's own chrome on-theme (attribution box). */ .leaflet-control-attribution { background: var(--glass) !important; color: var(--muted) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 8px 0 0 0; font-size: 10px; padding: 2px 7px; } .leaflet-control-attribution a { color: var(--muted) !important; } /* ---------- Modal (chart) ---------- */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; animation: lgFade .2s ease both; } .modal[hidden] { display: none; } .modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; width: min(560px, 100%); box-shadow: var(--shadow); position: relative; animation: lgPop .3s var(--ease-spring) both; } .modal-card h2 { margin: 0 0 10px; font-size: 17px; } .modal-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 24px; } #modal-body svg { width: 100%; height: auto; display: block; } .chart-empty { color: var(--muted); padding: 30px 0; text-align: center; } .hint { font-size: 11.5px; color: var(--muted); } /* ---------- Social: friends, chat, sharing ---------- */ .btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 10px; } .fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .fr-ava { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: var(--panel-3); display: grid; place-items: center; font-weight: 700; overflow: hidden; } .fr-ava img { width: 100%; height: 100%; object-fit: cover; } .fr-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-name small { color: var(--muted); font-weight: 400; } .fr-act { flex: 0 0 auto; color: var(--muted); font-size: 12px; } /* Greyed, non-interactive status pill for the find-friends list (already a friend / request sent). */ .fr-tag { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; } /* Inbound "Share → LetzGo" preview shown above the friend picker */ .share-in-prev { margin: 12px 16px 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.4; max-height: 84px; overflow: hidden; white-space: pre-wrap; word-break: break-word; } .social-ov { position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; animation: lgFade .2s ease both; } .social-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px 18px 0 0; width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column; animation: lgPop .3s var(--ease-spring) both; } .social-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px; } /* Overlay close "×": a circular, on-theme icon button (matches the in-game .game-x), shared by every social-card header — settings, game picker, requests, share… Previously an unstyled default button, which looked native-grey and off-brand. */ .social-head .ln-x { width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer; padding: 0; background: var(--panel-3); color: var(--muted); font-size: 19px; line-height: 1; display: grid; place-items: center; transition: background .15s var(--ease), color .15s var(--ease), transform .1s var(--ease); } .social-head .ln-x:hover { background: var(--line); color: var(--text); } .social-head .ln-x:active { transform: scale(.92); } /* "What's new" / update panel (updater.js) — sits inside the shared social-card overlay. */ .upd-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .upd-ver { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); } .upd-intro { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); } .upd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .upd-list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.45; color: var(--text); } .upd-list li::before { content: "✦"; position: absolute; left: 2px; top: 0; color: var(--accent); font-size: 12px; } .upd-foot { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); } .upd-foot .btn { flex: 1; justify-content: center; } /* "You missed a fuel alert" recap list (fuel-missed.js) — inside the shared upd-body. */ .miss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .miss-list li { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); } .miss-list li b { font-size: 13.5px; } .miss-list li span { font-size: 12px; color: var(--fuel); font-variant-numeric: tabular-nums; } .miss-list .fm-more { color: var(--muted); font-size: 12px; text-align: center; background: none; border: 0; padding: 4px; } .chat-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 220px; } .msg { align-self: flex-start; max-width: 78%; background: var(--brand2); color: #fff; padding: 8px 12px; border-radius: 14px; font-size: 14px; word-break: break-word; } .msg.mine { align-self: flex-end; background: var(--flag-blue); color: #fff; } .chat-in { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); } .chat-in input { flex: 1 1 auto; min-width: 0; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 16px; } .chat-in .chat-gif, .chat-in .btn { flex: 0 0 auto; } .chat-in input:focus { outline: none; border-color: var(--flag-blue); } @media (min-width: 860px) { .social-ov { align-items: center; } .social-card { border-radius: 18px; max-height: 70vh; } } /* WhatsApp-style chat: fullscreen on mobile, centered card on desktop. */ .chat-fs { align-items: stretch; } .chat-fs .social-card { width: 100%; max-height: none; height: 100vh; height: 100dvh; border: 0; border-radius: 0; } .chat-head { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 10px 10px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--panel-2); } .chat-back { flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: none; color: var(--text); font-size: 30px; line-height: 1; display: grid; place-items: center; cursor: pointer; border-radius: 50%; } .chat-back:active { background: var(--panel-3); } .chat-peer { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 4px 6px; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; border-radius: 12px; } .chat-peer:active { background: var(--panel-3); } .chat-peer-name { font-weight: 650; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-head-title { font-weight: 650; font-size: 16px; padding-left: 4px; } .chat-fs .chat-in { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } .contact-body { flex: 1; overflow-y: auto; padding: 26px 18px; } .contact-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 26px; } .contact-ava { width: 104px; height: 104px; border-radius: 50%; background: var(--panel-3); overflow: hidden; display: grid; place-items: center; font-size: 40px; font-weight: 700; } .contact-ava img { width: 100%; height: 100%; object-fit: cover; } .contact-name { font-size: 22px; font-weight: 700; text-align: center; } .contact-handle { color: var(--muted); font-size: 14px; } @media (min-width: 860px) { .chat-fs { align-items: center; } .chat-fs .social-card { width: min(460px, 100%); height: auto; max-height: 80vh; border: 1px solid var(--line); border-radius: 18px; } } /* "You are here" ping — persistent across categories. */ .leaflet-div-icon.me-marker, .me-marker { background: transparent; border: 0; } .me-marker { position: relative; } .me-core, .me-pulse { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; } .me-core { background: #2e9bff; border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 1px 6px rgba(0,0,0,.4), 0 0 14px rgba(46,155,255,.55); } .me-pulse { opacity: .6; background: radial-gradient(circle, rgba(46,155,255,.55), rgba(46,155,255,0) 70%); animation: mePulse 2.8s cubic-bezier(.22,.61,.36,1) infinite; } @keyframes mePulse { 0% { transform: scale(.6); opacity: .6; } 70% { opacity: .14; } 100% { transform: scale(4.2); opacity: 0; } } body.reduce-motion .me-pulse { animation: none; opacity: 0; } /* Friend avatar markers (Friends category) + one-time shared pin. */ .leaflet-div-icon.friend-marker, .friend-marker, .leaflet-div-icon.pin-marker, .pin-marker { background: transparent; border: 0; } .friend-marker { position: relative; } .fm-ring { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2.5px solid var(--ok); background: var(--panel-3); display: grid; place-items: center; font-weight: 700; color: var(--text); box-shadow: 0 3px 11px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06); transition: transform .14s var(--ease); } .friend-marker:hover .fm-ring { transform: scale(1.07); } .fm-ring img { width: 100%; height: 100%; object-fit: cover; } .friend-marker.live::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--ok); opacity: .55; animation: mePulse 2.4s ease-out infinite; } body.reduce-motion .friend-marker.live::after { animation: none; opacity: 0; } .pin-marker { font-size: 28px; line-height: 1; text-align: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); } .fm-pop b { font-size: 14px; } .fm-handle { color: var(--muted); font-size: 12px; margin: 2px 0 2px; } .fm-pop-actions { display: flex; gap: 6px; margin-top: 8px; } /* Themed Leaflet popups (used by friend markers). */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); } .leaflet-popup-content-wrapper { border-radius: 16px; } .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.42; } .leaflet-popup-content img { max-width: 100%; border-radius: 10px; display: block; } .leaflet-popup-close-button { color: var(--muted) !important; width: 26px !important; height: 26px !important; font: 600 18px/22px sans-serif !important; } .leaflet-popup-close-button:hover { color: var(--text) !important; } /* Chat: floating "share location" pill + GIF button + special message bubbles. */ .chat-actions { display: flex; justify-content: center; padding: 8px 16px 0; } .chat-loc { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.35); } .chat-loc:active { background: var(--panel-3); } .chat-loc:disabled { opacity: .6; } .chat-gif { flex: 0 0 auto; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-weight: 800; font-size: 12px; letter-spacing: .5px; cursor: pointer; } .msg-loc { display: flex; align-items: center; gap: 10px; } .msg-loc .ml-pin { font-size: 22px; } .msg-loc .ml-txt { display: flex; flex-direction: column; } .msg-loc .ml-txt small { opacity: .8; font-size: 11.5px; } .msg-gif { padding: 3px !important; background: none !important; } .msg-gif img { display: block; max-width: 220px; width: 100%; border-radius: 12px; } /* Sent photos / videos (compressed media messages) */ .msg-img { padding: 3px !important; background: none !important; } .msg-img img { display: block; max-width: 240px; width: 100%; border-radius: 12px; cursor: pointer; } .msg-vid { padding: 3px !important; background: none !important; } .msg-vid video { display: block; max-width: 260px; width: 100%; border-radius: 12px; background: #000; } .gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 16px 20px; overflow-y: auto; } .gif-cell { padding: 0; border: 0; background: var(--panel-3); border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 1; } .gif-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Chat header: call buttons + peer moved to the right */ .chat-call { flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: none; color: var(--text); font-size: 19px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; } .chat-call:active { background: var(--panel-3); } .chat-head-spacer { flex: 1 1 auto; } .chat-peer.right { flex: 0 0 auto; padding-left: 2px; } .chat-peer.right .chat-peer-name { max-width: 36vw; } /* In-call fullscreen video */ .call-video { position: fixed; inset: 0; z-index: 2400; background: #000; } .call-video[hidden] { display: none; } #cv-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #07100c; } #cv-local { position: absolute; right: 14px; top: calc(env(safe-area-inset-top) + 60px); width: 104px; height: 150px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 4px 16px rgba(0,0,0,.5); transform: scaleX(-1); background: #111; z-index: 2; } .cv-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 12px) 16px 14px; background: linear-gradient(rgba(0,0,0,.55), transparent); z-index: 2; } .cv-min { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 22px; cursor: pointer; } .cv-name { color: #fff; font-weight: 700; font-size: 16px; } .cv-bar { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 24px); display: flex; justify-content: center; gap: 16px; z-index: 2; } .cv-btn { width: 58px; height: 58px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; cursor: pointer; display: grid; place-items: center; } .cv-btn:active { transform: scale(.94); } .cv-hang { background: var(--warn); } /* Toast */ .lg-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 90px); transform: translate(-50%, 10px); z-index: 2600; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; font-size: 13.5px; box-shadow: var(--shadow); opacity: 0; transition: opacity .25s, transform .25s; max-width: 80vw; text-align: center; } .lg-toast.show { opacity: 1; transform: translate(-50%, 0); } /* On-screen call control bar (active/outgoing calls) — obvious controls for desktop. */ .call-bar { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + var(--topbar-h) + 8px); transform: translateX(-50%); z-index: 2350; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 7px 8px 7px 13px; border-radius: 999px; color: #04231a; background: linear-gradient(135deg, var(--call-2), var(--call)); box-shadow: 0 8px 26px rgba(16,185,129,.5); animation: lgPop .2s var(--ease) both; } .cb-ava { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: rgba(255,255,255,.3); display: grid; place-items: center; font-weight: 800; font-size: 13px; } .cb-ava img { width: 100%; height: 100%; object-fit: cover; } .cb-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .cb-info b { font-size: 13px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; } .cb-info small { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; } .cb-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .cb-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.28); color: #04231a; font-size: 17px; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .1s; } .cb-btn:hover { background: rgba(255,255,255,.45); } .cb-btn:active { transform: scale(.92); } .cb-hang { background: var(--warn); color: #fff; } @media (min-width: 860px) { .cb-info b { max-width: 220px; } } /* ---------- Animations ---------- */ @keyframes lgUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes lgFade { from { opacity: 0; } to { opacity: 1; } } @keyframes lgPop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- Desktop: left nav rail, docked place card, centered content ---------- */ @media (min-width: 860px) { /* Desktop: floating vertical pill on the left, vertically centred. */ .bottomnav { left: 14px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 4px; padding: 8px; border-radius: 26px; } .bottomnav button { flex: 0 0 auto; min-width: 62px; padding: 9px 6px; font-size: 10px; gap: 4px; border-radius: 16px; } .bottomnav .bn-ic { font-size: 22px; } /* Explore: a left column (search + filter), place card docked bottom-left — both clear the pill */ .explore-top { left: 100px; right: auto; width: min(460px, calc(100vw - 130px)); transform: none; top: 14px; } .sheet { left: 100px; right: auto; margin: 0; width: 360px; max-width: 360px; bottom: 18px; border-radius: 20px; border: 1px solid var(--glass-line); } .sheet[data-state="hidden"] { transform: translateX(-130%); } .sheet[data-state="collapsed"], .sheet[data-state="expanded"] { transform: none; } .sheet-body { max-height: 46vh; } /* Content screens: offset clear of the left pill */ .screen-pad { padding: 28px 28px 56px 120px; max-width: 1040px; } .cards { grid-template-columns: repeat(4, 1fr); } .greeting { font-size: 30px; } .pp-text b, .pp-text small { max-width: 360px; } } /* ============================ Native-app feel (mobile) ============================ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; } /* …but real content stays selectable / copyable (chat bubbles deliberately are NOT — they use a long-press menu instead). */ input, textarea, [contenteditable], .pf-value, .sheet-body, .modal-body, .contact-handle { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .msg, .ml-txt { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* No 300ms double-tap-zoom delay on anything tappable. */ a, button, label, input, select, textarea, .chip, .saved-item, .fr-row, .card, .pharma-pill, [data-screen], [role="button"] { touch-action: manipulation; } img { -webkit-user-drag: none; user-drag: none; } /* Keep scroll momentum inside panels (never rubber-bands the whole app); hide scrollbars. */ .screen-pad, .sheet-body, .set-body, .chat-msgs, .contact-body, .gif-grid { overscroll-behavior: contain; scrollbar-width: none; } .screen-pad::-webkit-scrollbar, .sheet-body::-webkit-scrollbar, .set-body::-webkit-scrollbar, .chat-msgs::-webkit-scrollbar, .contact-body::-webkit-scrollbar, .gif-grid::-webkit-scrollbar { width: 0; height: 0; } /* Instant press feedback — touch surfaces respond to the press itself, not hover. */ .btn, .chip, .saved-item, .fr-row, .card.tap, #bottomnav button, .set-gear, .chat-call, .pa-item, .gif-cell, .avatar { transition: transform .1s var(--ease), opacity .12s, background-color .15s; } @media (hover: none) { .btn:active, .chip:active, .saved-item:active, .fr-row:active, .card.tap:active, #bottomnav button:active, .set-gear:active, .chat-call:active, .pa-item:active, .gif-cell:active, .avatar:active { transform: scale(.96); opacity: .94; } } /* ---------- Watch Together: link button (slides down) + synced player ---------- */ .msg-yt { flex-direction: column; align-items: stretch; gap: 8px; max-width: 80%; } .yt-body { color: inherit; text-decoration: underline; word-break: break-all; font-size: 14px; } .msg.mine .yt-body { color: #fff; } .yt-watch { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--brand), #ff4d6a); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 3px 12px rgba(var(--brand-rgb),.4); transform-origin: top; animation: ytSlide .34s var(--ease) both; } .yt-watch:active { transform: scale(.96); } @keyframes ytSlide { from { opacity: 0; transform: translateY(-10px) scaleY(.6); } to { opacity: 1; transform: none; } } body.reduce-motion .yt-watch { animation: none; } /* TikTok / Instagram reels: link + "play here" button → opens an embedded player overlay. */ .msg-reel { flex-direction: column; align-items: stretch; gap: 8px; max-width: 80%; } .reel-body { color: inherit; text-decoration: underline; word-break: break-all; font-size: 14px; } .msg.mine .reel-body { color: #fff; } .reel-play { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: rgba(0,0,0,.35); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; } .reel-play:active { transform: scale(.96); } .reel-ov { align-items: center; } .reel-card { position: relative; display: flex; flex-direction: column; align-items: center; width: min(94vw, 400px); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 46px 10px 10px; animation: lgPop .3s var(--ease-spring) both; } .reel-x { position: absolute; top: 9px; right: 11px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--panel-3); color: var(--text); font-size: 15px; cursor: pointer; display: grid; place-items: center; } .reel-frame { width: 100%; height: min(76vh, 720px); border-radius: 12px; overflow: hidden; background: #000; } .reel-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .reel-load { display: grid; place-items: center; height: 100%; color: #fff; opacity: .85; font-size: 14px; } .reel-open { margin-top: 10px; color: var(--muted); font-size: 12.5px; } /* ---- Media compress/upload progress ---- */ .media-prog-ov { align-items: center; justify-content: center; background: rgba(0,0,0,.5); } .media-prog-card { width: min(82vw, 320px); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px; box-shadow: var(--shadow); animation: lgPop .2s var(--ease) both; } .mp-label { font-size: 14px; font-weight: 650; color: var(--text); margin-bottom: 12px; text-align: center; } .mp-bar { height: 6px; border-radius: 999px; background: var(--panel-3); overflow: hidden; } .mp-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand2), #2fd17a); transition: width .2s var(--ease); } .mp-fill.indet { width: 42% !important; animation: mpIndet 1.1s ease-in-out infinite; } @keyframes mpIndet { 0% { margin-left: -42%; } 100% { margin-left: 100%; } } /* ---- Fullscreen media viewer (tap a sent photo) ---- */ .media-view-ov { align-items: center; justify-content: center; background: rgba(0,0,0,.92); } .media-view-ov .mv-media { max-width: 96vw; max-height: 90vh; border-radius: 10px; } /* ---- Transient toast ---- */ .lg-toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); background: rgba(20,20,24,.96); color: #fff; border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; z-index: 3000; opacity: 0; pointer-events: none; max-width: 86vw; text-align: center; transition: opacity .2s var(--ease), transform .2s var(--ease); } .lg-toast.show { opacity: 1; transform: translate(-50%, 0); } .watch-ov { position: fixed; inset: 0; z-index: 2450; background: #000; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); } .wt-stage { flex: 1; min-height: 0; display: grid; place-items: center; background: #000; } .wt-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100%; max-width: calc(100vh * 16 / 9); } .wt-frame > div, .wt-frame iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } .wt-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); } .wt-btn { width: 46px; height: 46px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--text); font-size: 20px; cursor: pointer; display: grid; place-items: center; } .wt-btn:active { transform: scale(.92); } .wt-hang { background: var(--warn); color: #fff; } .wt-vol { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 16px; min-width: 0; } .wt-vol input[type="range"] { flex: 1; accent-color: var(--brand); min-width: 0; } /* Picture-in-picture of the call, draggable, over the Watch Together player */ .call-pip { position: fixed; z-index: 2470; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 102px; height: 142px; border-radius: 14px; overflow: hidden; background: #111; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 6px 20px rgba(0,0,0,.6); cursor: grab; touch-action: none; } .call-pip[hidden] { display: none; } .call-pip video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* ============================ Premium polish ============================ */ :root { --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } @keyframes lgRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* A little weight on press — scale-down on touch, springy settle on release. */ .btn, .chip, .ct-act, .chat-row, .saved-item, #bottomnav button, .set-gear, .chat-call, .pa-item, .gif-cell { transition: transform .2s var(--ease-spring), opacity .15s var(--ease-out), background-color .18s var(--ease-out); } /* Profile: plan badge + stat strip */ .tier-badge { display: inline-block; margin: 2px 0; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; } .tier-badge.tier-free { background: rgba(255,255,255,.1); color: var(--muted); } .tier-badge.tier-premium { background: linear-gradient(135deg, var(--brand), #ff5d78); color: #fff; box-shadow: 0 3px 12px rgba(var(--brand-rgb),.4); } .tier-badge.tier-pro { background: linear-gradient(135deg, #ffd34d, #ff9f0a); color: #2a1a00; box-shadow: 0 3px 12px rgba(255,159,10,.4); } .pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; } .pf-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; } .pf-stat b { display: block; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .pf-stat small { color: var(--muted); font-size: 11px; } /* Chat list rows: avatar · name + last-message preview · relative time */ .chat-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; animation: lgRise .4s var(--ease-out) both; } .chat-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .chat-row-name { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-row-prev { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-row-time { flex: 0 0 auto; color: var(--muted); font-size: 11px; align-self: flex-start; margin-top: 2px; } body.reduce-motion .chat-row { animation: none; } /* Chat messages: timestamp under each bubble + day separators + linkified URLs */ .msg-row { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; } .msg-row.mine { align-items: flex-end; } .msg-t { font-size: 10.5px; color: var(--muted); margin: 2px 6px 0; } /* Delivered / Seen status under the last outgoing message (iMessage-style). */ .msg-status { font-size: 10.5px; font-weight: 600; color: var(--muted); margin: 1px 6px 2px; display: inline-flex; align-items: center; gap: 4px; animation: lgFade .2s ease both; } .msg-status::before { content: "✓"; font-size: 10px; opacity: .9; } .msg-status.delivered::before, .msg-status.seen::before { content: "✓✓"; letter-spacing: -3px; padding-right: 2px; } .msg-status.seen { color: var(--flag-blue); } .chat-day { align-self: center; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 3px 12px; border-radius: 999px; margin: 10px auto 6px; } .msg-link { color: inherit; text-decoration: underline; word-break: break-all; } .msg.mine .msg-link { color: #fff; } /* Contact panel quick actions */ .ct-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; } .ct-act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 14px; font-size: 12px; font-weight: 600; } .ct-act span { font-size: 20px; } /* Settings about footer */ .set-about { text-align: center; color: var(--muted); font-size: 11.5px; margin: 22px 0 4px; } /* ---------- Tier decoration: Pro (gold ring + crown), Premium (blue ring) ---------- */ :root { --pro-ring: #ffd34d; --premium-ring: #2e9bff; } /* Avatar images round themselves so the container can show the crown (overflow: visible). */ .fr-ava img, .contact-ava img, .pp-ic img, .cb-ava img { border-radius: 50%; } .av-pro, .av-premium { position: relative; } .fr-ava.av-pro, .fr-ava.av-premium, .contact-ava.av-pro, .contact-ava.av-premium, .av-self.av-pro, .av-self.av-premium { overflow: visible; } .av-pro { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--pro-ring); } .av-premium { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--premium-ring); } .avatar.av-pro, .avatar.av-premium { border-color: transparent; } /* !important to beat the container's `.fr-ava img { width:100%; border-radius:50% }` rules. */ img.lg-crown { position: absolute; left: 50%; top: -46%; transform: translateX(-50%); width: 62% !important; height: auto !important; border-radius: 0 !important; object-fit: contain; pointer-events: none; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); } /* ---------- Live traffic layer legend ---------- */ .traffic-legend { position: fixed; left: 12px; z-index: 600; bottom: calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border-radius: 12px; background: var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--glass-line); box-shadow: var(--shadow); font-size: 11.5px; pointer-events: none; } .traffic-legend span { display: flex; align-items: center; gap: 7px; color: var(--text); white-space: nowrap; } .traffic-legend i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; } @media (min-width: 860px) { .traffic-legend { left: auto; right: 14px; bottom: 14px; } } /* Map-only overlays belong to Explore — never let them bleed over Chat/Friends/Dashboard/Profile. */ body:not([data-screen="explore"]) .traffic-legend, body:not([data-screen="explore"]) .zoom-hint { display: none !important; } /* ---------- Sheet drag ---------- */ .sheet.dragging { transition: none; } .sheet-handle { touch-action: none; cursor: grab; } .sheet-head { touch-action: none; } /* ---------- Traffic-cam live feed (in the place sheet) ---------- */ .cam-wrap { position: relative; margin-bottom: 6px; } .cam-shot { width: 100%; display: block; border-radius: 12px; background: var(--panel-3); min-height: 150px; aspect-ratio: 16 / 10; object-fit: cover; } .cam-shot.cam-err { min-height: 60px; aspect-ratio: auto; } .cam-shot.loading { animation: camBreath 1.1s ease-in-out infinite; } @keyframes camBreath { 0%, 100% { opacity: .4; } 50% { opacity: .9; } } body.reduce-motion .cam-shot.loading { animation: none; opacity: .7; } .cam-live-dot { position: absolute; top: 8px; left: 8px; display: none; align-items: center; gap: 5px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 3px 8px 3px 6px; border-radius: 999px; } .cam-live-dot.on { display: inline-flex; } .cam-live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: liveBlink 1.4s ease-out infinite; } .cam-live-dot::after { content: "LIVE"; } @keyframes liveBlink { 0% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb),.6); } 100% { box-shadow: 0 0 0 7px rgba(var(--brand-rgb),0); } } body.reduce-motion .cam-live-dot::before { animation: none; } /* ---------- Global search: autocomplete dropdown + dense-layer zoom hint ---------- */ .search { position: relative; z-index: 30; } /* lift search + its dropdown above the category chips */ .search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1100; pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 5px; box-shadow: var(--shadow); max-height: 60vh; overflow-y: auto; scrollbar-width: none; animation: lgPop .16s var(--ease) both; } .search-suggest[hidden] { display: none; } .search-suggest::-webkit-scrollbar { width: 0; } .ss-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border: 0; background: none; color: var(--text); font-size: 14px; border-radius: 10px; cursor: pointer; text-align: left; } .ss-item:hover, .ss-item:active { background: var(--panel-3); } .ss-ic { flex: 0 0 auto; width: 20px; text-align: center; font-size: 16px; } .ss-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zoom-hint { position: fixed; left: 50%; transform: translateX(-50%); z-index: 700; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 64px); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-line); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; color: var(--text); box-shadow: var(--shadow); pointer-events: none; } .zoom-hint[hidden] { display: none; } /* ============================ Social layer (profiles, friends, messages) ============================ */ /* Incoming-message pill state (var(--brand2), breathing glow) */ .pharma-pill[data-state="message"] { --pp-c1: #33b8ee; --pp-c2: var(--brand2); --pp-fg: #04222e; box-shadow: 0 6px 22px rgba(var(--brand2-rgb),.55); animation: msgBreath 1.7s ease-in-out infinite; } @keyframes msgBreath { 0%, 100% { box-shadow: 0 6px 18px rgba(var(--brand2-rgb),.45); } 50% { box-shadow: 0 8px 30px rgba(var(--brand2-rgb),.95), 0 0 0 6px rgba(var(--brand2-rgb),.22); } } body.reduce-motion .pharma-pill[data-state="message"] { animation: none; } /* Pill priority states: upcoming events (warm yellow-orange) + friend status (translucent dark). */ .pharma-pill[data-state="event"] { --pp-c1: #ffd24d; --pp-c2: #f5a623; --pp-fg: #3d2600; box-shadow: 0 6px 22px rgba(245,166,35,.5); } .pharma-pill[data-state="friend"] { --pp-c1: rgba(34,34,42,.8); --pp-c2: rgba(16,16,22,.62); --pp-fg: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.45); } /* On-launch (pharmacy hours): the on-duty pharmacy breathes/glows for 5s, then the queue resumes */ .pharma-pill.glow { animation: ppPulse 1.5s var(--ease) infinite; } body.reduce-motion .pharma-pill.glow { animation: none; } /* Unread badge on the Chat nav button */ .bottomnav button { position: relative; } .bn-badge { position: absolute; top: 3px; right: 16px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--glass); z-index: 2; } .bn-badge[hidden] { display: none; } @media (min-width: 860px) { .bn-badge { right: 8px; top: 4px; } } /* Friends screen — cards backed by each friend's banner */ .friend-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 10px; color: #fff; min-height: 66px; background: var(--panel); background-size: cover; background-position: center; overflow: hidden; animation: lgRise .4s var(--ease-out) both; } .friend-card .fc-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.32)); } .friend-card:not(.has-banner) .fc-shade { background: none; } .friend-card > .fr-ava, .friend-card > .fc-main { position: relative; z-index: 1; } .fc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fc-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fc-status { font-size: 12.5px; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .friend-card:not(.has-banner) .fc-name { color: var(--text); } .friend-card:not(.has-banner) .fc-status { color: var(--muted); opacity: 1; } body.reduce-motion .friend-card { animation: none; } /* Public profile view (Discord-meets-MySpace) */ .profile-view { flex: 1; overflow-y: auto; } .pv-banner { height: 150px; background: linear-gradient(135deg, var(--panel-3), var(--panel-2)); background-size: cover; background-position: center; } .pv-top { display: flex; align-items: flex-end; gap: 14px; padding: 0 18px; margin-top: -34px; } .pv-ava { width: 84px !important; height: 84px !important; border: 3px solid var(--bg); } .pv-id { padding-bottom: 6px; min-width: 0; } .pv-body { padding: 14px 18px 26px; display: flex; flex-direction: column; } .pv-status { font-size: 15px; margin-top: 10px; } .pv-bio { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 12px 0 0; white-space: pre-wrap; } /* Profile banner editor */ .pf-banner-edit { height: 110px; border-radius: 16px; margin-bottom: 12px; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--panel-3), var(--panel-2)); background-size: cover; background-position: center; border: 1px dashed var(--line); display: grid; place-items: center; } .pf-banner-edit.has { border-style: solid; } .pf-banner-hint { background: rgba(0,0,0,.5); color: #fff; font-size: 12px; padding: 5px 12px; border-radius: 999px; } /* Swipe-to-remove (Apple-style) on shared items */ .swipe { position: relative; overflow: hidden; border-radius: 14px; margin-bottom: 10px; } .swipe-del { position: absolute; top: 0; right: 0; bottom: 0; width: 92px; border: 0; background: var(--warn); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; } .swipe-row { position: relative; z-index: 1; width: 100%; text-align: left; cursor: pointer; touch-action: pan-y; background: var(--panel); border: 1px solid var(--line); margin: 0; } .swipe.removing { opacity: 0; transform: translateX(-30px); transition: opacity .2s, transform .2s; } /* ---------- Image cropper (avatar / banner placement) ---------- */ .crop-ov { position: fixed; inset: 0; z-index: 2700; background: #000; display: flex; flex-direction: column; } .crop-head { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; } .crop-head .crop-title { color: #fff; font-weight: 700; font-size: 15px; } .crop-x, .crop-save { background: none; border: 0; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; padding: 6px 4px; } .crop-save { color: var(--ok); } .crop-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; background: #0a0a0c; cursor: grab; } .crop-stage:active { cursor: grabbing; } .crop-img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; } .crop-frame { position: absolute; pointer-events: none; border: 2px solid rgba(255,255,255,.92); box-shadow: 0 0 0 100vmax rgba(0,0,0,.62); } .crop-frame.circle { border-radius: 50%; } .crop-controls { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 16px; padding: 16px 24px calc(env(safe-area-inset-bottom) + 18px); } .crop-controls input[type="range"] { flex: 1; accent-color: var(--brand); } /* iOS: `touch-action: manipulation` (set on all inputs for snappiness) blocks dragging a range thumb — only taps register. Restore default touch handling for sliders. */ input[type="range"] { touch-action: auto; } /* ---------- Unread chats: var(--brand2) outline + faint breathing glow ---------- */ .chat-row.unread { border-color: var(--brand2); box-shadow: 0 0 0 1px var(--brand2); animation: unreadGlow 2.3s ease-in-out infinite; } @keyframes unreadGlow { 0%, 100% { box-shadow: 0 0 0 1px var(--brand2), 0 0 0 0 rgba(var(--brand2-rgb),0); } 50% { box-shadow: 0 0 0 1px var(--brand2), 0 0 13px 2px rgba(var(--brand2-rgb),.32); } } body.reduce-motion .chat-row.unread { animation: none; box-shadow: 0 0 0 1px var(--brand2); } /* ---------- Per-chat backgrounds ---------- */ /* Chat list row with a shared bubble background (gradient keeps the preview readable). */ .chat-row.has-bg { position: relative; overflow: hidden; color: #fff; background-size: cover; background-position: center; } .chat-row .cr-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.22) 100%); } .chat-row.has-bg > .fr-ava, .chat-row.has-bg > .chat-row-main, .chat-row.has-bg > .chat-row-time { position: relative; z-index: 1; } .chat-row.has-bg .chat-row-prev { color: rgba(255,255,255,.92); } .chat-row.has-bg .chat-row-time { color: rgba(255,255,255,.85); } /* Chat room with a shared background (image is dark-layered in JS for readability). */ .chat-msgs.has-bg { background-size: cover; background-position: center; } /* ---- Chat: tools button + floating anchored tools menu (bottom-right, above keyboard) ---- */ .chat-tools { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer; } .chat-tools:active { background: var(--panel-3); } .tools-ov { background: transparent; } .tools-menu { position: fixed; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 2200; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; min-width: 210px; box-shadow: var(--shadow); animation: lgPop .18s var(--ease) both; } .tm-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font-size: 14.5px; padding: 11px 12px; border-radius: 10px; cursor: pointer; } .tm-item:active { background: var(--panel-3); } /* ---- Message long-press action menu ---- */ .msg-menu-ov { background: rgba(0,0,0,.4); } .mm-card { position: fixed; min-width: 184px; max-width: 250px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); animation: lgPop .16s var(--ease) both; } .mm-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font-size: 14.5px; padding: 11px 12px; border-radius: 10px; cursor: pointer; } .mm-item:active { background: var(--panel-3); } .mm-item.danger { color: var(--warn); } /* Timestamp header in the long-press menu: Sent / Delivered / Seen with their times. */ .mm-meta { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px 10px; margin: 2px 2px 5px; border-bottom: 1px solid var(--line); } .mm-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 12px; line-height: 1.2; } .mm-meta-k { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; } .mm-meta-k::before { content: "✓"; font-size: 11px; } .mm-meta-row.delivered .mm-meta-k::before, .mm-meta-row.seen .mm-meta-k::before { content: "✓✓"; letter-spacing: -3px; padding-right: 2px; } .mm-meta-row.seen .mm-meta-k { color: var(--flag-blue); } .mm-meta-v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- Pinned message bar (under the chat header) ---- */ .chat-pinned { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); cursor: pointer; } .chat-pinned .cp-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); } .chat-pinned .cp-x { flex: 0 0 auto; background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; } /* ---- "Editing message" bar above the input ---- */ .chat-editbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 16px; background: var(--panel-2); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } .chat-editbar button { background: none; border: 0; color: var(--flag-blue); font-size: 13px; cursor: pointer; } /* ---- Buzz: shake the whole app surface when buzzed ---- */ @keyframes lgBuzz { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); } } #screens.buzzing { animation: lgBuzz .6s var(--ease) both; } body.reduce-motion #screens.buzzing { animation: none; } /* ============================ Pill morph · nav gradient · profile hero · add-more · requests ============================ */ /* Pill: a springy "morph" pop whenever it switches state (pharmacy ⇄ message ⇄ call), so the change flows with weight instead of snapping. Removed on animationend (call.js) so a state's own looping animation — e.g. the incoming-call beat — resumes afterward. */ @keyframes pillMorph { 0% { transform: scale(.8); opacity: .35; } 55% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } } .pharma-pill.pill-morph { animation: pillMorph .42s var(--ease-spring) both; } body.reduce-motion .pharma-pill.pill-morph { animation: none; } /* Passive-standby rotation (events ⇄ friend statuses) is the SAME state, so it must NOT pop — the content scrolls up gently (clipped by the pill's overflow) while the @property colour transition cross-fades the gradient underneath, for a calm swap instead of a punchy one. */ @keyframes pillScroll { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: translateY(0); } } .pharma-pill.pill-scroll .pp-ic, .pharma-pill.pill-scroll .pp-text { animation: pillScroll .4s var(--ease) both; } body.reduce-motion .pharma-pill.pill-scroll .pp-ic, body.reduce-motion .pharma-pill.pill-scroll .pp-text { animation: none; } /* "UPDATE available" state: a steady DEEP RED, tappable badge that stays until the user restarts. Colour and the ~7s arrival breathe are also driven from JS (pill.setUpdate) so they hold up even against a stale cached stylesheet; these rules are the matching fallback. */ .pharma-pill[data-state="update"] { --pp-c1: #c01228; --pp-c2: #7d0c1a; --pp-fg: #fff; box-shadow: 0 6px 22px rgba(150,8,24,.55); } .pharma-pill[data-state="update"] .pp-ic { background: rgba(255,255,255,.22); color: #fff; } /* Bottom nav: stays translucent (backdrop blur), with a gradient from transparent at the top to a translucent var(--brand2) accent at the bottom. */ .bottomnav { background: linear-gradient(180deg, rgba(var(--brand2-rgb),0) 0%, rgba(var(--brand2-rgb),.34) 100%); } /* Friends / Chat header row: title on the left, a small coloured "add more people" pill on the right (shown once you already have ≥1 friend; the big CTA button is only for new users). */ .screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .screen-head .greeting { margin: 4px 0; } .add-more { flex: 0 0 auto; width: auto; max-width: 56%; margin: 0; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(var(--brand-rgb),.6); background: rgba(var(--brand-rgb),.16); color: #ffc2cc; font-size: 13px; font-weight: 650; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .add-more::placeholder { color: #ffc2cc; opacity: .95; } .add-more:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.22); } /* Friend-requests entry (top of the Friends tab) → opens a floating, searchable requests menu. */ .req-entry { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; margin: 6px 0 12px; background: linear-gradient(135deg, rgba(var(--brand-rgb),.18), rgba(255,255,255,.03)); border: 1px solid var(--glass-line); border-radius: 14px; padding: 12px 14px; color: var(--text); } .req-entry .req-ic { font-size: 18px; flex: 0 0 auto; } .req-entry .req-lbl { flex: 1 1 auto; text-align: left; font-weight: 650; font-size: 14px; } .req-entry .req-count { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; } /* Own profile hero — laid out like a Friends-tab card: banner background, avatar vertically centred and pinned left (with margin), name beside it, bio inset to the right with a shadow. Both the banner (tap anywhere) and the avatar are tappable to change. */ .pv-banner { position: relative; } .pf-hero { position: relative; display: flex; align-items: center; gap: 14px; min-height: 116px; border-radius: 16px; padding: 16px; overflow: hidden; margin-bottom: 4px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--panel-3), var(--panel-2)); background-size: cover; background-position: center; } .pf-hero .fc-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.3)); } .pf-hero:not(.has-banner) .fc-shade { background: none; } .pf-hero > * { position: relative; z-index: 1; } .pf-ava-big { width: 72px !important; height: 72px !important; flex: 0 0 auto; border: 3px solid var(--bg); cursor: pointer; } .pf-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pf-main .contact-name { text-align: left; font-size: 19px; } .pf-main .contact-handle { color: rgba(255,255,255,.85); } .pf-main .tier-badge { align-self: flex-start; margin-top: 2px; } .pf-hero:not(.has-banner) .contact-handle { color: var(--muted); } .pf-ava-edit { overflow: visible !important; position: relative; } .pf-cam-badge { position: absolute; display: grid; place-items: center; background: rgba(0,0,0,.62); color: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.5); z-index: 2; pointer-events: none; } .pf-cam-banner { top: 10px; left: 10px; width: 28px; height: 28px; font-size: 13px; } /* top-left, clear of the gear (top-right) */ /* Bio inset to the right of the banner, with a strong shadow so it stays legible over any image (the banner is never dimmed). Used on the own-profile hero AND on Friends-tab cards. */ .fc-bio { flex: 0 1 auto; max-width: 44%; margin-left: auto; text-align: right; align-self: center; z-index: 1; color: #fff; font-size: 12px; line-height: 1.35; font-weight: 600; white-space: pre-wrap; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .pf-hero .fc-bio { align-self: flex-end; -webkit-line-clamp: 3; max-width: 40%; font-size: 12.5px; } .friend-card > .fc-bio { z-index: 1; } .friend-card:not(.has-banner) .fc-bio, .pf-hero:not(.has-banner) .fc-bio { color: var(--muted); text-shadow: none; } /* (legacy) bio overlay still used by the full-screen public profile view (openProfile) */ .pv-banner-bio { position: absolute; right: 14px; bottom: 12px; max-width: 60%; text-align: right; z-index: 1; color: #fff; font-size: 13px; line-height: 1.4; font-weight: 600; white-space: pre-wrap; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } /* ---- Online-status chip (bottom-right of an avatar): Auto/Online → green, Busy → amber, Offline → grey. A bigger, tappable variant (.pres-chip) sits on your own avatar. ---- */ .fr-ava, .contact-ava { position: relative; overflow: visible; } .pres-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg); z-index: 3; pointer-events: none; } .contact-ava .pres-dot { width: 18px; height: 18px; right: 3px; bottom: 3px; border-width: 3px; } .pres-chip { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--bg); cursor: pointer; z-index: 4; box-shadow: 0 1px 4px rgba(0,0,0,.5); } .pres-online { background: #2fd17a; } .pres-busy { background: #ff9f0a; } .pres-offline { background: #7a828c; } .mm-item .pres-dot { position: static; border: 0; width: 13px; height: 13px; } .mm-item.pres-cur { color: var(--flag-blue); font-weight: 700; } /* ---- Typing indicator (chat room line + Chat-tab row preview), glowing var(--brand2) ---- */ .typing-glow { color: var(--brand2) !important; text-shadow: 0 0 6px rgba(var(--brand2-rgb),.75), 0 0 12px rgba(var(--brand2-rgb),.45); animation: typingGlow 1.6s ease-in-out infinite; } @keyframes typingGlow { 0%, 100% { opacity: .8; } 50% { opacity: 1; } } body.reduce-motion .typing-glow { animation: none; } .chat-typing { align-self: flex-start; max-width: 82%; font-size: 13px; font-style: italic; padding: 2px 8px; margin-top: 2px; }