/* ========================================================================== Screen protection (2026-08-24) Loaded ONLY when CRM_SCREEN_PROTECT=1. Every rule is scoped to body.protect / html.protect-lock so that with the flag off this file is not even requested and the app renders exactly as before. Honest scope note: this file blocks selection, copy, drag, context menu and printing. It does NOT block screenshots - no browser exposes that. The watermark below is what makes a screenshot traceable. ========================================================================== */ /* ===== L1: selection / copy friction ===== */ body.protect, body.protect * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; /* stops the iOS long-press copy sheet */ } /* Form fields must stay selectable or agents cannot edit a lead at all. Same for anything explicitly opted back in with data-allow-select. */ body.protect input, body.protect textarea, body.protect select, body.protect [contenteditable="true"], body.protect [data-allow-select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-touch-callout: default; } /* Kill image drag-out (drag an to the desktop = a free copy). */ body.protect img, body.protect video, body.protect a { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; } /* ===== L1: printing / save-to-PDF ===== */ @media print { body.protect { visibility: hidden !important; } body.protect::before { visibility: visible !important; content: "Printing is disabled. CRM data may not be printed or saved as PDF. This attempt has been logged."; display: block; position: fixed; inset: 0; padding: 60mm 20mm; font: 600 13pt/1.7 system-ui, sans-serif; color: #000; text-align: center; } } /* ===== L2: identity watermark ===== */ .wm-layer { position: fixed; inset: -25%; /* oversize so the rotation leaves no gap */ z-index: 2147483000; /* above app chrome, below the tamper lock */ pointer-events: none; /* never intercepts a click */ overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--wm-gap-row, 130px) var(--wm-gap-col, 170px); transform: rotate(-24deg); /* Not printed (printing is blocked anyway) and not read by screen readers. */ } .wm-tile { /* Weight 500 rather than 600: a lighter stroke reads as a texture at a glance but still resolves when someone zooms into a screenshot. */ font: 500 var(--wm-size, 20px)/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; white-space: nowrap; color: rgba(0, 0, 0, var(--wm-opacity, 0.042)); user-select: none; } /* Dark theme needs a slightly stronger stamp or it vanishes into the surface. */ html[data-theme="dark"] .wm-tile { color: rgba(255, 255, 255, var(--wm-opacity-dark, 0.060)); } /* Phones: smaller type and tighter spacing so the stamp stays proportionate instead of a few huge labels dominating a narrow screen. */ @media (max-width: 640px) { .wm-layer { gap: calc(var(--wm-gap-row, 130px) * 0.55) calc(var(--wm-gap-col, 170px) * 0.45); } .wm-tile { font-size: calc(var(--wm-size, 20px) * 0.7); } } /* Printing is blocked anyway, but if a stylesheet ever changes that, the stamp must not be the thing that goes missing. */ @media print { .wm-tile { color: rgba(0, 0, 0, 0.28); } } /* ===== L2: tamper lock ===== */ /* protect.js sets this on when the watermark layer is removed or made invisible. Blurring the root rather than hiding it means a screenshot taken in the same instant is already unreadable. */ /* The [data-wm] requirement is a FAIL-SAFE, not a nicety. Only the server sets data-wm, and only on pages it actually stamped. A stale cached protect.js that wrongly calls lock() on an unstamped page (login, agent picker, calendar iframe) therefore cannot blur anything - and a blurred agent cannot use the app to recover, so this must never be possible. */ html.protect-lock body.protect[data-wm="1"] > *:not(#wm-tamper) { filter: blur(16px) !important; pointer-events: none !important; } .wm-tamper { position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; background: rgba(12, 16, 24, 0.86); backdrop-filter: blur(6px); } .wm-tamper[hidden] { display: none; } .wm-tamper-card { max-width: 460px; margin: 0 24px; padding: 28px 32px; border-radius: 14px; background: var(--surface, #fff); color: var(--text, #1a1a1a); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); text-align: center; } .wm-tamper-card h2 { margin: 0 0 10px; font-size: 20px; } .wm-tamper-card p { margin: 0 0 10px; color: var(--text-muted, #4a4a4a); font-size: 14px; line-height: 1.6; } .wm-tamper-card a { color: var(--brand-accent, #c9a84c); font-weight: 600; } /* ===== L3: masked PII ===== */ .pii-masked { font-variant-numeric: tabular-nums; /* stable column width when unmasked */ letter-spacing: 0.02em; white-space: nowrap; } /* The reveal control on the contact page. */ .pii-field { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; } .pii-value { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .pii-value.is-revealed { -webkit-user-select: text; user-select: text; /* a revealed number IS selectable */ font-weight: 600; } .pii-btn { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font: 600 11px/1.6 inherit; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted, #4a4a4a); background: var(--surface-hover, #faf8f3); border: 1px solid var(--border, #e2dfd5); border-radius: 999px; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .pii-btn:hover:not(:disabled) { color: var(--text, #1a1a1a); border-color: var(--brand-accent, #c9a84c); background: var(--surface, #fff); } .pii-btn:disabled { opacity: 0.45; cursor: not-allowed; } .pii-btn.is-busy { opacity: 0.6; pointer-events: none; } /* Cap warning shown next to the reveal button as the agent approaches the hourly limit, so a blocked unmask is never a surprise. */ .pii-cap { font-size: 11px; color: var(--text-faint, #7a7a7a); } .pii-cap.is-warn { color: var(--warn-fg, #8a6d1f); font-weight: 600; } .pii-cap.is-blocked { color: var(--err-fg, #a12a2a); font-weight: 700; } /* Toast used for "copied", "cap reached", "copying is disabled". */ .pii-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); z-index: 2147483500; max-width: min(92vw, 460px); padding: 11px 18px; border-radius: 10px; background: var(--brand-primary, #0d1b2a); color: #fff; font-size: 13px; line-height: 1.5; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; } .pii-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); } .pii-toast.is-err { background: var(--err-fg, #a12a2a); } @media (prefers-reduced-motion: reduce) { .pii-toast { transition: none; } } /* ===== Reveal / Copy buttons inside My Day cards ===== These sit in the card's action row next to WhatsApp/Call and inherit that row's button class, so they only need a light tint to read as secondary actions rather than competing with the primary contact buttons. */ .pii-btn-inline { background: transparent; border: 1px dashed var(--border, #e2dfd5); color: var(--text-muted, #4a4a4a); font-weight: 600; cursor: pointer; } .pii-btn-inline:hover:not(:disabled) { border-style: solid; border-color: var(--brand-accent, #c9a84c); color: var(--text, #1a1a1a); } .pii-btn-inline:disabled { opacity: 0.4; cursor: not-allowed; } .pii-btn-inline.is-busy { opacity: 0.55; pointer-events: none; } /* A revealed number in a card: make it obvious it is now the real value, and selectable, since the agent has already paid the audit cost to see it. */ .cockpit-card-phone.is-revealed, .focus-phone.is-revealed, .today-log-phone .is-revealed { font-weight: 700; color: var(--text, #1a1a1a); -webkit-user-select: text; user-select: text; } /* Reveal-to-edit control sitting beside a masked form input. */ .pii-input-wrap { display: flex; gap: 8px; align-items: center; } .pii-input-wrap input { flex: 1; min-width: 0; } .pii-input-wrap .pii-btn-inline { flex: none; white-space: nowrap; }