:root { --bg: #0a0712; --card: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.1); --text: #f4f2fa; --muted: #9a9aab; --blue: #29b6f6; --magenta: #d946ef; --violet-deep: #7c3aed; --gradient: linear-gradient(120deg, var(--blue) 0%, var(--violet-deep) 55%, var(--magenta) 100%); --font-display: 'Space Grotesk', system-ui, sans-serif; --font-headline: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } * { box-sizing: border-box; } /* ---------- Custom scrollbar — branded, not the bare OS default. Mirrors site.css's rule for the landing page, which this app (app.css) never loaded — every scrollable area here (capsule list/compose, chat messages, history screen, consent screen, the lang-switcher dropdown) was falling back to the plain OS scrollbar until now. The bare `::-webkit-scrollbar` (no explicit `*` prefix) is intentional and matches site.css — WebKit treats it as applying to every scrollable element, not just . ---------- */ html { scrollbar-width: thin; scrollbar-color: var(--magenta) transparent; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-image: var(--gradient); border-radius: 999px; border: 2px solid var(--bg); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { border-width: 1px; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); overscroll-behavior: none; overflow-x: hidden; } #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.7; } #root { position: relative; height: 100svh; z-index: 1; } .screen[hidden] { display: none; } .screen { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; } .logo-mark { width: min(320px, 100%); height: auto; margin: 0 0 8px; } .tagline { color: var(--muted); margin: 0 0 40px; } .lock-icon { font-size: 2.4rem; margin: 0 0 16px; } h2 { font-family: var(--font-headline); font-weight: 700; font-size: 1.9rem; margin-bottom: 24px; } .btn { font-family: var(--font-body); border: none; border-radius: 999px; padding: 15px 34px; font-size: 1rem; font-weight: 600; cursor: pointer; margin: 8px 0; width: min(320px, 100%); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 10px 26px rgba(41, 182, 246, 0.35); } .btn-outline { background: transparent; color: var(--blue); border: 1px solid var(--blue); } .code-display { font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: 0.3em; color: var(--blue); margin: 12px 0 28px; } .hint { color: var(--muted); max-width: 320px; } .consent-row { display: flex; align-items: flex-start; justify-content: center; gap: 10px; width: min(340px, 100%); margin: 0 auto 16px; text-align: left; color: var(--muted); font-size: 0.85rem; line-height: 1.5; cursor: pointer; } .consent-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--magenta); flex-shrink: 0; } .consent-row a { color: var(--blue); } /* Simple math CAPTCHA — three pickable answers, styled like the rest of the brand instead of a bare native widget. */ .captcha-widget { width: min(340px, 100%); margin: 0 auto 18px; text-align: center; } .captcha-hint { margin-bottom: 8px; font-size: 0.85rem; max-width: none; } .captcha-question { font-family: var(--font-display, inherit); font-size: 1.4rem; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.02em; } .captcha-options { display: flex; gap: 10px; } .captcha-option-btn { flex: 1; padding: 12px 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .captcha-option-btn:active { transform: scale(0.96); } .captcha-option-btn.is-selected { background: var(--gradient); border-color: transparent; box-shadow: 0 6px 18px rgba(217, 70, 239, 0.35); } /* Loading state — a soft pulsing skeleton instead of a bare "…", so the half-second wait for the server's challenge doesn't read as broken. */ .captcha-skeleton { flex: 1; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); animation: captcha-pulse 1.2s ease-in-out infinite; } .captcha-skeleton:nth-child(2) { animation-delay: 0.15s; } .captcha-skeleton:nth-child(3) { animation-delay: 0.3s; } @keyframes captcha-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .captcha-question:empty { height: 1.4rem; /* reserve the line's height so the layout doesn't jump when the question text arrives */ } .captcha-error { margin-top: 10px; font-size: 0.85rem; color: #fca5a5; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .captcha-error[hidden] { display: none; } .captcha-error .link-btn { font-size: 0.85rem; padding: 0; } /* Returning device whose ToS/age rows are already on file — a small, unobtrusive confirmation line replaces the checkboxes instead of leaving a bare gap where they used to be. */ .consent-already-ok { display: flex; align-items: center; justify-content: center; gap: 6px; width: min(340px, 100%); margin: 0 auto 18px; color: #34d399; font-size: 0.85rem; font-weight: 600; text-align: center; } .consent-already-ok[hidden] { display: none; } .waiting-status { color: var(--muted); font-size: 0.8rem; margin-top: 14px; } .code-input { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.5em; text-align: center; background: transparent; border: 1px solid var(--card-border); border-radius: 14px; color: var(--text); padding: 14px 10px; width: min(280px, 100%); margin-bottom: 20px; } .code-input:focus { outline: none; border-color: var(--blue); } .error { color: #ff6b6b; margin: -8px 0 16px; font-size: 0.9rem; } .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(41, 182, 246, 0.25); border-top-color: var(--blue); animation: spin 0.9s linear infinite; margin-top: 24px; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Call screen ---------- */ .call-screen { position: relative; padding: 0; background: #000; } .remote-video { width: 100%; height: 100%; object-fit: cover; background: #000; } .waiting-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); pointer-events: none; } .local-video { position: absolute; top: max(20px, env(safe-area-inset-top)); right: 16px; width: 110px; height: 150px; border-radius: 14px; object-fit: cover; border: 2px solid var(--blue); background: #111; } /* The heartbeat reading is the product's signature feature, so it gets the visual weight of a hero element, not a status pill — a big glowing number with a heart that actually beats, not just an icon sitting next to text. */ .biometric-badge { position: absolute; top: max(72px, calc(env(safe-area-inset-top) + 60px)); left: 16px; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(160deg, rgba(217, 70, 239, 0.16), rgba(11, 11, 18, 0.65)); backdrop-filter: blur(10px); border: 1px solid rgba(217, 70, 239, 0.3); border-radius: 22px; padding: 10px 18px 10px 14px; z-index: 20; box-shadow: 0 8px 28px rgba(217, 70, 239, 0.18); } .biometric-badge-heart { width: 30px; height: 30px; flex-shrink: 0; color: var(--magenta); filter: drop-shadow(0 0 10px rgba(217, 70, 239, 0.65)); animation: heartbeat 1.15s ease-in-out infinite; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.22); } 32% { transform: scale(0.96); } 45% { transform: scale(1.12); } 60% { transform: scale(1); } } .biometric-badge-numbers { display: flex; align-items: baseline; gap: 5px; font-family: var(--font-display); } #bpm-badge-text { font-size: 2.1rem; font-weight: 800; line-height: 1; background: linear-gradient(120deg, #fff, #ffd7f0); -webkit-background-clip: text; background-clip: text; color: transparent; } .biometric-badge-numbers small { font-size: 0.62rem; font-weight: 600; color: var(--muted); text-transform: lowercase; } .sync-panel { position: absolute; bottom: max(110px, calc(110px + env(safe-area-inset-bottom))); left: 16px; right: 16px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; max-width: 420px; margin: 0 auto; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .sync-panel[hidden] { display: none; } .sync-panel-body { position: relative; z-index: 1; padding: 16px 18px; } /* Heart rhythm: title + live % on one line, the waveform (heartviz.js) directly underneath, sized to its own small block instead of covering the whole panel. */ .heart-rhythm-block { margin-bottom: 14px; } .heart-rhythm-title { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.78rem; font-weight: 700; color: #7fd4ff; margin-bottom: 6px; } .heart-rhythm-title b { color: #fff; font-size: 0.85rem; } .heart-sync-canvas { display: block; width: 100%; height: 56px; pointer-events: none; } /* Per-person comparative rows — one line each: your number, a center-split bar (blue = you, magenta = partner), their number. Color alone says which side is which, so no separate "Sen/Partner" label row is needed. */ .dual-metric { margin-bottom: 12px; } .dual-metric-label { font-size: 0.72rem; color: #c9c9d6; margin-bottom: 5px; } .dual-metric-row { display: flex; align-items: center; gap: 8px; } .dual-num-mine { color: #38bdf8; font-size: 0.8rem; width: 34px; flex-shrink: 0; } .dual-num-partner { color: #e879f9; font-size: 0.8rem; width: 34px; flex-shrink: 0; text-align: right; } .dual-split-bar { display: flex; flex: 1; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.14); } .dual-split-mine { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, #1a8fd6, #29b6f6); transition: width 0.6s ease; } .dual-split-partner { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, #d946ef, #f472e0); transition: width 0.6s ease; } .chat-toasts { position: absolute; bottom: 320px; left: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; max-width: 420px; margin: 0 auto; } .chat-toast { background: rgba(20, 14, 32, 0.85); backdrop-filter: blur(6px); border: 1px solid var(--card-border); border-radius: 14px 14px 14px 4px; padding: 8px 14px; font-size: 0.85rem; animation: chat-toast-in 0.25s ease, chat-toast-out 0.4s ease 4.6s forwards; } .chat-toast-mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgba(41, 182, 246, 0.25); } @keyframes chat-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes chat-toast-out { to { opacity: 0; transform: translateY(-6px); } } /* ---------- Reactions: full-screen heart-on-kiss, angry-face on shake ---------- */ .reaction-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 40; overflow: hidden; } .reaction-emoji { font-size: 40vw; line-height: 1; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5)); animation: reaction-pop 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes reaction-pop { 0% { transform: scale(0.2); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } .chat-toggle-btn { position: absolute; bottom: max(36px, env(safe-area-inset-bottom)); right: 20px; width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); font-size: 1.3rem; cursor: pointer; z-index: 25; } .chat-panel { position: absolute; bottom: max(100px, calc(100px + env(safe-area-inset-bottom))); left: 16px; right: 16px; max-width: 420px; margin: 0 auto; background: rgba(11, 11, 18, 0.9); backdrop-filter: blur(10px); border: 1px solid var(--card-border); border-radius: 16px; padding: 12px; } .chat-quick-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--card-border); } .chat-quick { flex-shrink: 0; background: rgba(255, 255, 255, 0.08); border: none; border-radius: 999px; color: var(--text); padding: 8px 14px; font-size: 0.8rem; cursor: pointer; white-space: nowrap; } .chat-quick:active { transform: scale(0.96); } .chat-input-row { display: flex; gap: 8px; } .chat-input { flex: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); border-radius: 10px; color: var(--text); padding: 10px 12px; font-size: 0.9rem; } .chat-input:focus { outline: none; border-color: var(--blue); } .chat-send-btn { background: var(--gradient); border: none; border-radius: 10px; color: #fff; font-weight: 600; padding: 10px 16px; cursor: pointer; } /* WhatsApp-style bottom row: everything is a same-size circular icon button except the hang-up circle, which is red and very slightly larger — enough to read as "the important one" without dominating the row the way a full-width text pill did. */ .call-controls { position: absolute; bottom: max(32px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 18px; z-index: 20; } .control-btn { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px) saturate(160%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; } .control-btn:active { transform: scale(0.92); } /* Muted state — filled solid red so "off" reads unambiguously at a glance even in a quick side-glance, the same convention every call app uses (a plain white fill reads too close to the default "on" state's glass look at a distance). */ .control-btn.is-off { background: linear-gradient(135deg, #f43f5e, #d946ef); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(244, 63, 94, 0.4); } /* "Engaged" state (sync-panel open) — the brand gradient, not the red muted-convention above, since an open panel isn't a "something's off" signal. */ .control-btn.is-active { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(217, 70, 239, 0.35); } .hangup-btn { width: 68px; height: 68px; flex-shrink: 0; border-radius: 50%; border: none; background: linear-gradient(135deg, #f43f5e 0%, #d946ef 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(244, 63, 94, 0.45); } .hangup-btn:active { transform: scale(0.94); } @media (max-width: 420px) { .control-btn { width: 50px; height: 50px; } .hangup-btn { width: 58px; height: 58px; } .call-controls { gap: 10px; } } /* A 5th control button (sync-panel toggle) means five circles need to fit in one row now — tighten further on genuinely narrow phones instead of letting them overflow/wrap. */ @media (max-width: 370px) { .control-btn { width: 44px; height: 44px; } .control-btn svg { width: 24px; height: 24px; } .hangup-btn { width: 52px; height: 52px; } .call-controls { gap: 7px; } } @media (min-width: 720px) { .code-display { font-size: 3.6rem; } } @media (max-width: 720px) { #bg-canvas { opacity: 0.9; } } #choose-unpaired, #choose-paired { display: flex; flex-direction: column; align-items: center; width: 100%; } #choose-unpaired[hidden], #choose-paired[hidden] { display: none; } #btn-install { margin-top: 20px; } /* Quiet pill buttons for secondary actions ("Geçmişim", "Bağlantıyı sil") — understated enough not to compete with the primary CTA above them, but a soft bordered chip reads far more intentional than a bare underlined link floating in the middle of a dark screen. */ .link-btn { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 8px 18px; color: var(--muted); font-size: 0.82rem; font-weight: 600; margin-top: 24px; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .link-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); color: var(--text); } .link-btn-danger { color: #f87171; border-color: rgba(248, 113, 113, 0.25); margin-top: 14px; margin-bottom: 24px; font-size: 0.8rem; } .link-btn-danger:hover { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.4); color: #f87171; } /* Bağlan / Dürtme gönder / Zaman Kapsülü / Bağlantıyı sil: same width and height as each other, and a size bump from the original 0.8rem link-btn text — this screen's buttons stack vertically, so mismatched heights read as visually broken even though each one was "correct" on its own. */ #choose-paired .btn, #choose-paired .link-btn { display: flex; align-items: center; justify-content: center; width: min(320px, 100%); box-sizing: border-box; padding: 15px 24px; font-size: 0.95rem; margin: 8px 0; } /* ---------- Post-call report + history (scrollable, content can exceed viewport) ---------- */ .report-screen, .history-screen, .capsule-screen { justify-content: flex-start; overflow-y: auto; padding-top: max(48px, env(safe-area-inset-top)); padding-bottom: 40px; } /* ---------- Time capsule ---------- */ .capsule-list { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } .capsule-item { background: var(--card, rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 16px 18px; text-align: left; } .capsule-item img { width: 100%; border-radius: 12px; margin-bottom: 10px; display: block; } .capsule-item-message { font-size: 0.95rem; line-height: 1.5; } .capsule-item-date { font-size: 0.75rem; color: var(--muted); margin-top: 8px; } .capsule-item-pending { color: var(--muted); font-size: 0.85rem; font-style: italic; } .capsule-textarea { width: min(420px, 100%); min-height: 110px; resize: vertical; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 14px 16px; color: #fff; font-family: inherit; font-size: 0.95rem; margin-bottom: 14px; } .capsule-photo-label { display: flex; align-items: center; justify-content: center; width: min(420px, 100%); min-height: 64px; border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 14px; cursor: pointer; color: var(--muted); font-size: 0.9rem; margin-bottom: 8px; overflow: hidden; } #capsule-photo-preview { width: 100%; max-height: 220px; object-fit: cover; display: block; } .capsule-photo-note { width: min(420px, 100%); font-size: 0.75rem; color: var(--muted); text-align: left; margin-bottom: 18px; line-height: 1.5; } .capsule-date-label { width: min(420px, 100%); text-align: left; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; } .capsule-date-input { width: min(420px, 100%); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 12px 14px; color: #fff; font-family: inherit; margin-bottom: 6px; } .report-eyebrow { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 20px; } .report-ring-wrap { position: relative; width: 160px; height: 160px; margin-bottom: 14px; } .report-ring { width: 100%; height: 100%; } #report-ring-progress { stroke-dasharray: 377; stroke-dashoffset: 377; transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .report-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .report-ring-label span { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; } .report-ring-label small { color: var(--muted); font-size: 0.68rem; margin-top: 4px; } .report-caption { color: var(--muted); font-size: 0.78rem; max-width: 320px; line-height: 1.5; margin: 0 0 28px; } .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 380px; margin-bottom: 28px; } .report-tile { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; } .report-tile-label { font-size: 0.72rem; color: var(--muted); } .report-tile-value { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .history-grid { max-width: 420px; } .report-pulse-label { font-family: var(--font-display); font-weight: 700; color: var(--magenta); margin: -18px 0 20px; font-size: 0.95rem; } .report-replay { width: 100%; max-width: 380px; margin-bottom: 28px; } .replay-list { display: flex; flex-direction: column; gap: 10px; } .replay-row { display: grid; grid-template-columns: 24px 44px 1fr; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px 14px; text-align: left; } .replay-icon { font-size: 1rem; } .replay-time { font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; } .replay-label { font-size: 0.8rem; } .streak-badge[hidden] { display: none; } .streak-badge { display: flex; align-items: center; gap: 8px; background: linear-gradient(120deg, rgba(255, 140, 40, 0.18), rgba(217, 70, 239, 0.12)); border: 1px solid rgba(255, 160, 60, 0.35); border-radius: 999px; padding: 10px 20px; margin-bottom: 24px; font-family: var(--font-display); font-weight: 700; } .streak-fire { font-size: 1.1rem; } .streak-text { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--muted); } .heatmap-month-label { font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-transform: capitalize; margin: 0 0 10px; } .heatmap-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; max-width: 380px; margin-bottom: 6px; } .heatmap-weekday { text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; } .heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; max-width: 380px; margin-bottom: 28px; } .heatmap-cell { position: relative; aspect-ratio: 1; min-height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; } .heatmap-cell-num { font-size: 0.82rem; font-weight: 600; color: var(--muted); } .heatmap-cell[data-level] .heatmap-cell-num { color: #fff; } .heatmap-cell.is-today { border-color: var(--magenta); border-width: 2px; } .heatmap-cell[data-level="1"] { background: rgba(41, 182, 246, 0.35); } .heatmap-cell[data-level="2"] { background: rgba(41, 182, 246, 0.6); } .heatmap-cell[data-level="3"] { background: linear-gradient(135deg, var(--blue), var(--magenta)); } @media (max-width: 420px) { .heatmap-cell { min-height: 34px; } .heatmap-cell-num { font-size: 0.72rem; } } /* ---------- Script-specific font fallbacks ---------- */ html[lang="ar"] body { font-family: 'Noto Sans Arabic', var(--font-body); } html[lang="zh"] body { font-family: 'Noto Sans SC', var(--font-body); } /* ---------- RTL (Arabic) ---------- */ [dir="rtl"] .local-video { right: auto; left: 16px; border-color: var(--blue); } [dir="rtl"] .biometric-badge { left: auto; right: 16px; } [dir="rtl"] .chat-toggle-btn { right: auto; left: 20px; } [dir="rtl"] .sync-row span:first-child { text-align: right; } [dir="rtl"] .chat-toast-mine { align-self: flex-start; } [dir="rtl"] .report-tile, [dir="rtl"] .replay-row { text-align: right; } /* ---------- Custom alert/confirm — replaces the browser's native dialog so it looks like part of the product instead of an OS popup. ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 3, 10, 0.6); backdrop-filter: blur(6px); animation: modal-fade-in 0.15s ease; } .modal-overlay[hidden] { display: none; } @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } } .modal-card { width: min(340px, 100%); background: #14101c; border: 1px solid var(--card-border); border-radius: 18px; padding: 26px 24px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); animation: modal-pop-in 0.18s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modal-pop-in { from { opacity: 0; transform: scale(0.94) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-message { color: var(--text); font-size: 0.95rem; line-height: 1.55; text-align: center; margin: 0 0 22px; } .modal-actions { display: flex; gap: 10px; } .modal-actions .btn { width: auto; flex: 1; margin: 0; padding: 12px 16px; font-size: 0.9rem; }