/* * ReadySMS — Onboarding Coach styles (production) * * Activated by onboarding-coach.js adding .plg-onboarding-coach * + .plg-coach-step-first_send to . * * Single step: first_send * - Sidebar: everything grayed + unclickable EXCEPT Dashboard and Settings * - Dashboard page: widgets grayed EXCEPT the Quick Actions card * - Quick Actions: all buttons grayed EXCEPT the Send SMS target * - Inline phone save + sandbox send on first Send click */ /* ─── Global: kill the onboarding banner container during coach ────── */ #onboardingBannerContainer { display: none !important; } /* ─── Sidebar: default gray, allow-list specific items ──────────────── */ body.plg-onboarding-coach .sidebar .nav-item { opacity: 0.28; pointer-events: none; filter: saturate(0.55); transition: opacity 0.35s ease, filter 0.35s ease; } body.plg-onboarding-coach .sidebar .nav-item[data-page="dashboard"], body.plg-onboarding-coach .sidebar .nav-item[data-page="settings"] { opacity: 1; pointer-events: auto; filter: none; } /* ─── Settings tabs: Profile-only during coach ──────────────────────── */ body.plg-onboarding-coach #page-settings .settings-tab:not([data-settings="profile"]) { opacity: 0.28; pointer-events: none; filter: saturate(0.55); transition: opacity 0.35s ease, filter 0.35s ease; } /* Section labels and sidebar footer stay dim */ body.plg-onboarding-coach .sidebar .nav-section-label, body.plg-onboarding-coach .sidebar .sidebar-footer { opacity: 0.4; pointer-events: none; filter: saturate(0.55); } body.plg-onboarding-coach .sidebar .sidebar-footer .logout-btn { pointer-events: auto; opacity: 1; } /* ─── Topbar: dim action buttons, keep logo/toggle live ─────────────── */ body.plg-onboarding-coach .topbar .credit-badge, body.plg-onboarding-coach .topbar .topbar-btn { opacity: 0.32; pointer-events: none; transition: opacity 0.35s ease; } /* ─── Checklist widget / FAB: dim, disable ──────────────────────────── */ body.plg-onboarding-coach #checklistWidget, body.plg-onboarding-coach #checklistFab { opacity: 0.3 !important; pointer-events: none !important; transition: opacity 0.35s ease; } @keyframes plg-coach-pulse { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.025); } } /* ─── "Click here" floating pill above the target ───────────────────── */ .plg-coach-pointer { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #2563EB, #7C3AED); color: #FFF; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.01em; padding: 10px 16px; border-radius: 14px; box-shadow: 0 10px 28px rgba(37, 99, 235, 0.4); white-space: nowrap; pointer-events: none; z-index: 10; animation: plg-coach-bob 2.4s ease-in-out infinite; display: flex; align-items: center; gap: 10px; } .plg-coach-pointer-step { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); color: #FFF; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.02em; flex-shrink: 0; } .plg-coach-pointer-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; } .plg-coach-pointer-title { font-size: 0.78rem; font-weight: 800; } .plg-coach-pointer-sub { font-size: 0.68rem; font-weight: 500; opacity: 0.82; } @keyframes plg-coach-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } } /* Triangle pointing down from the pill to the button */ .plg-coach-pointer::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #7C3AED; } /* Flip triangle to point UP (for pointers below the target) */ #plgRegisterBrandPointer::after { top: auto; bottom: 100%; left: 50%; transform: translateX(-50%); border-top-color: transparent; border-bottom-color: #2563EB; } #plgRegisterBrandPointer, #plgAddCampaignPointer { z-index: 9998; animation: plg-coach-bob-down 2.4s ease-in-out infinite; } #plgAddCampaignPointer::after { top: auto; bottom: 100%; left: 50%; transform: translateX(-50%); border-top-color: transparent; border-bottom-color: #2563EB; } @keyframes plg-coach-bob-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .plg-verify-step { display: inline-block; background: linear-gradient(135deg, #2563EB, #7C3AED); color: #FFF; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .plg-verify-title { font-size: 1.4rem; font-weight: 800; color: #0F172A; letter-spacing: -0.01em; margin: 0 0 8px; } .plg-verify-sub { font-size: 0.9rem; color: #64748B; line-height: 1.5; margin: 0 0 22px; } .plg-verify-sub strong { color: #0F172A; font-weight: 700; } .plg-verify-error { display: none; background: rgba(239, 68, 68, 0.08); color: #DC2626; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 16px; text-align: left; } .plg-verify-code-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; } .plg-verify-box { width: 48px; height: 58px; border: 1.5px solid #CBD5E1; border-radius: 12px; font-size: 1.45rem; font-weight: 700; color: #0F172A; text-align: center; font-family: inherit; outline: none; background: #FFF; transition: border-color 0.15s, box-shadow 0.15s; } .plg-verify-box:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .plg-verify-box.filled { border-color: #2563EB; } .plg-verify-helper { font-size: 0.85rem; color: #64748B; margin-top: 4px; } .plg-verify-helper a { color: #2563EB; font-weight: 700; text-decoration: none; cursor: pointer; } .plg-verify-helper a:hover { text-decoration: underline; } /* ─── Celebration modal (first_send → done) ────────────────────────── */ .plg-celebrate-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); z-index: 10005; display: flex; align-items: center; justify-content: center; padding: 24px; animation: plg-celebrate-fade 0.3s ease-out; } @keyframes plg-celebrate-fade { from { opacity: 0; } to { opacity: 1; } } .plg-celebrate-card { background: #FFF; border-radius: 22px; padding: 44px 40px 36px; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 30px 80px -20px rgba(37, 99, 235, 0.45), 0 0 0 1px rgba(37, 99, 235, 0.08); position: relative; animation: plg-celebrate-pop 0.45s cubic-bezier(0.34, 1.35, 0.64, 1); } @keyframes plg-celebrate-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .plg-celebrate-burst { font-size: 2.4rem; line-height: 1; margin-bottom: -8px; animation: plg-celebrate-burst 1.8s ease-in-out infinite; } @keyframes plg-celebrate-burst { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } } .plg-celebrate-check { width: 62px; height: 62px; margin: 14px auto 20px; border-radius: 999px; background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: #FFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px -6px rgba(16, 185, 129, 0.5); animation: plg-celebrate-check-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; } @keyframes plg-celebrate-check-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .plg-celebrate-title { font-size: 1.55rem; font-weight: 900; color: #0F172A; margin: 0 0 10px; letter-spacing: -0.015em; line-height: 1.2; } .plg-celebrate-sub { font-size: 0.95rem; color: #475569; line-height: 1.5; margin: 0 0 28px; } .plg-celebrate-sub strong { color: #0F172A; font-weight: 700; } .plg-celebrate-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 24px; background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #0EA5E9 100%); color: #FFF; border: none; border-radius: 14px; font-size: 0.98rem; font-weight: 800; letter-spacing: 0.005em; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(37, 99, 235, 0.55); transition: transform 0.18s ease, box-shadow 0.18s ease; } .plg-celebrate-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -10px rgba(37, 99, 235, 0.65); } .plg-celebrate-primary:active { transform: translateY(0); } .plg-celebrate-register { display: block; margin-top: 16px; color: #64748B; font-size: 0.85rem; font-weight: 600; text-decoration: none; cursor: pointer; } .plg-celebrate-register:hover { color: #2563EB; text-decoration: underline; } /* ─── Sticky 10DLC registration banner on dashboard ────────────────── */ .plg-dlc-banner { position: sticky; top: 0; z-index: 101; background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #0EA5E9 100%); color: #FFF; padding: 12px 20px; border-radius: 0; display: flex; align-items: center; gap: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); animation: plg-dlc-banner-in 0.5s cubic-bezier(0.34, 1.35, 0.64, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /* Orange urgency at 2 remaining */ .plg-dlc-banner.plg-dlc-banner-orange { background: linear-gradient(135deg, #EA580C 0%, #D97706 50%, #F59E0B 100%); box-shadow: 0 4px 16px -4px rgba(234, 88, 12, 0.4); } .plg-dlc-banner.plg-dlc-banner-orange .plg-dlc-banner-btn { color: #EA580C; } /* Red urgency at 1 remaining or 0 */ .plg-dlc-banner.plg-dlc-banner-red { background: linear-gradient(135deg, #DC2626 0%, #B91C1C 50%, #EF4444 100%); box-shadow: 0 4px 16px -4px rgba(220, 38, 38, 0.4); } .plg-dlc-banner.plg-dlc-banner-red .plg-dlc-banner-btn { color: #DC2626; } .plg-dlc-count { font-weight: 800; } @keyframes plg-dlc-banner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .plg-dlc-banner-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .plg-dlc-banner-text { flex: 1; font-size: 0.9rem; font-weight: 500; line-height: 1.35; } .plg-dlc-banner-text strong { font-weight: 800; } .plg-dlc-banner-btn { background: #FFF; color: #2563EB; border: none; padding: 9px 18px; border-radius: 10px; font-size: 0.82rem; font-weight: 800; cursor: pointer; white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .plg-dlc-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .plg-dlc-banner ~ .topbar { top: var(--plg-banner-h, 0px); } /* ─── Onboarding progress banner (replaces DLC banner post-brand) ─── */ .plg-progress-banner { position: sticky; top: 0; z-index: 101; background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #0EA5E9 100%); color: #FFF; padding: 12px 20px; border-radius: 0; display: flex; align-items: center; gap: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); animation: plg-dlc-banner-in 0.5s cubic-bezier(0.34, 1.35, 0.64, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .plg-progress-banner.plg-progress-complete { background: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%); } .plg-progress-banner ~ .topbar { top: var(--plg-banner-h, 0px); } /* Steps row — compact inline */ .plg-progress-steps { display: flex; align-items: center; gap: 0; flex-shrink: 0; } /* Individual step */ .plg-progress-step { display: flex; align-items: center; gap: 6px; position: relative; white-space: nowrap; } /* Circle */ .plg-progress-step-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 800; color: rgba(255, 255, 255, 0.7); flex-shrink: 0; transition: background 0.3s ease, border-color 0.3s ease; } /* Step label — inline next to circle */ .plg-progress-step-label { font-size: 0.75rem; font-weight: 600; opacity: 0.6; } /* Connector line between steps */ .plg-progress-step-connector { width: 28px; height: 2px; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; margin: 0 6px; position: relative; overflow: hidden; } /* Halfway fill pseudo-element */ .plg-progress-step-connector::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 0; background: #10B981; transition: width 0.4s ease; } .plg-progress-step-connector.half::after { width: 50%; } .plg-progress-step-connector.full::after { width: 100%; } /* Completed step */ .plg-progress-step.completed .plg-progress-step-circle { background: #10B981; border-color: #10B981; color: #FFF; } .plg-progress-step.completed .plg-progress-step-label { opacity: 1; } /* Current step */ .plg-progress-step.current .plg-progress-step-circle { background: #FFF; color: #2563EB; border-color: #FFF; animation: plg-progress-pulse 2s ease-in-out infinite; } .plg-progress-step.current .plg-progress-step-label { opacity: 1; font-weight: 800; } @keyframes plg-progress-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); } } /* Pending step */ .plg-progress-step.pending .plg-progress-step-circle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.4); } .plg-progress-step.pending .plg-progress-step-label { opacity: 0.4; } /* Status text — fills remaining space */ .plg-progress-status { flex: 1; font-size: 0.82rem; font-weight: 500; line-height: 1.35; opacity: 0.9; } /* CTA button */ .plg-progress-banner-btn { background: #FFF; color: #2563EB; border: none; padding: 9px 18px; border-radius: 10px; font-size: 0.82rem; font-weight: 800; cursor: pointer; white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0; } .plg-progress-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .plg-progress-complete .plg-progress-banner-btn { color: #059669; } /* Mobile responsive — matches .plg-dlc-banner mobile behavior */ @media (max-width: 900px) { .plg-progress-banner { flex-direction: column; gap: 8px; padding: 10px 14px; text-align: center; position: relative; } .plg-progress-steps { width: 100%; justify-content: center; } .plg-progress-step-label { font-size: 0.6rem; } .plg-progress-step-circle { width: 20px; height: 20px; font-size: 0.6rem; } .plg-progress-step-connector { width: 16px; margin: 0 3px; } .plg-progress-status { width: 100%; text-align: center; font-size: 0.8rem; } .plg-progress-banner-btn { width: 100%; padding: 10px 16px; } } /* ─── Inline verification overlay (inside compose modal) ──────────── */ .plg-inline-verify { position: absolute; inset: 0; background: #FFF; z-index: 20; display: flex; align-items: center; justify-content: center; border-radius: inherit; animation: plg-inline-verify-in 0.3s ease-out; } @keyframes plg-inline-verify-in { from { opacity: 0; } to { opacity: 1; } } .plg-inline-verify-card { text-align: center; padding: 32px 28px; max-width: 380px; width: 100%; } .plg-inline-verify-title { font-size: 1.25rem; font-weight: 800; color: #0F172A; margin: 8px 0; } .plg-inline-verify-sub { font-size: 0.9rem; color: #64748B; margin-bottom: 20px; } .plg-inline-verify-sub strong { color: #0F172A; font-weight: 700; } /* ─── Inline send gate (campaign send intercept) ───────────────────── */ .plg-send-gate { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; animation: plg-send-gate-in 0.3s ease-out; } @keyframes plg-send-gate-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .plg-send-gate-content { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #64748B; font-weight: 500; } .plg-send-gate-lock { color: #94A3B8; flex-shrink: 0; } .plg-send-gate-cta { width: 100%; padding: 10px 18px; background: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%); color: #FFF; border: none; border-radius: 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 4px 12px -3px rgba(124, 58, 237, 0.4); } .plg-send-gate-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -3px rgba(124, 58, 237, 0.55); } .plg-send-gate-cta:active { transform: translateY(0); } /* ─── Side callout (appears next to the compose modal) ─────────────── */ .plg-modal-callout { position: fixed; width: 260px; background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); color: #FFF; padding: 26px 22px; border-radius: 18px; box-shadow: 0 20px 50px -14px rgba(37, 99, 235, 0.55); z-index: 10004; animation: plg-callout-in 0.45s cubic-bezier(0.34, 1.35, 0.64, 1); } @keyframes plg-callout-in { from { opacity: 0; transform: translateY(-50%) translateX(-12px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } /* Triangle pointing right toward the modal */ .plg-modal-callout::after { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border: 10px solid transparent; border-left-color: #5B3FBE; } .plg-modal-callout-step { display: inline-block; background: rgba(255, 255, 255, 0.2); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; } .plg-modal-callout-title { font-size: 1.15rem; font-weight: 900; line-height: 1.2; margin-bottom: 8px; } .plg-modal-callout-sub { font-size: 0.82rem; font-weight: 500; opacity: 0.9; line-height: 1.45; } @media (max-width: 1100px) { .plg-modal-callout { display: none; } } /* ───────────────────────────────────────────────────────────────────── */ /* STEP 1: first_send (dashboard -> Send SMS quick action) */ /* ───────────────────────────────────────────────────────────────────── */ /* Non-dashboard/settings pages dimmed during onboarding */ body.plg-coach-step-first_send .page:not(#page-dashboard):not(#page-settings) { opacity: 0.22; pointer-events: none; filter: saturate(0.55); } body.plg-coach-step-first_send #page-dashboard > *:has(.plg-coach-target-send) { opacity: 1; pointer-events: none; filter: none; } body.plg-coach-step-first_send #page-dashboard > *:not(:has(.plg-coach-target-send)) { opacity: 0.22; pointer-events: none; filter: saturate(0.55); transition: opacity 0.35s ease, filter 0.35s ease; } /* Inside the Quick Actions card: dim siblings, keep Send SMS target live */ body.plg-coach-step-first_send .plg-coach-target-send { pointer-events: auto !important; filter: none !important; opacity: 1 !important; z-index: 3; position: relative; } body.plg-coach-step-first_send .quick-action:not(.plg-coach-target-send) { opacity: 0.28; pointer-events: none; filter: saturate(0.55); } /* Pulsing highlight ring around the Send SMS target */ body.plg-coach-step-first_send .plg-coach-target-send::before { content: ''; position: absolute; inset: -6px; border-radius: 16px; background: linear-gradient(135deg, #2563EB, #7C3AED 50%, #0EA5E9); z-index: -1; opacity: 0; animation: plg-coach-pulse 2.4s ease-in-out infinite; pointer-events: none; } /* #newConvoModal escapes the dim entirely when open in any coach step */ body.plg-onboarding-coach #newConvoModal.modal-overlay, body.plg-onboarding-coach #newConvoModal.modal-overlay .modal { opacity: 1 !important; pointer-events: auto !important; filter: none !important; } body.plg-onboarding-coach #newConvoModal.modal-overlay.open { z-index: 9999; } /* ─── Mobile "finish setup on desktop" banner ──────────────────────── */ .plg-mobile-banner { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 9996; background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); color: #FFF; padding: 14px 16px; border-radius: 12px; box-shadow: 0 14px 32px -8px rgba(37, 99, 235, 0.55); display: flex; align-items: center; gap: 12px; font-family: inherit; animation: plg-mobile-banner-in 0.4s ease; } .plg-mobile-banner-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .plg-mobile-banner-body { flex: 1; min-width: 0; } .plg-mobile-banner-title { font-size: 0.88rem; font-weight: 800; letter-spacing: -0.005em; line-height: 1.2; } .plg-mobile-banner-sub { font-size: 0.72rem; opacity: 0.88; line-height: 1.4; margin-top: 2px; } @keyframes plg-mobile-banner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ─── Off-dashboard nudge ──────────────────────────────────────────── */ .plg-dashboard-nudge { position: fixed; z-index: 9997; transform: translateY(-50%); background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #0EA5E9 100%); color: #FFF; padding: 14px 18px 14px 16px; border-radius: 14px; box-shadow: 0 14px 36px -10px rgba(37, 99, 235, 0.55); display: flex; align-items: center; gap: 12px; max-width: 320px; pointer-events: none; animation: plg-nudge-in 0.4s cubic-bezier(0.34, 1.35, 0.64, 1); } .plg-dashboard-nudge::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-right-color: #2563EB; filter: drop-shadow(-1px 0 0 rgba(37, 99, 235, 0.4)); } .plg-dashboard-nudge-icon { width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #FFF; animation: plg-nudge-arrow-left 1.4s ease-in-out infinite; } .plg-dashboard-nudge-title { font-size: 0.88rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.005em; } .plg-dashboard-nudge-sub { font-size: 0.74rem; font-weight: 500; opacity: 0.88; line-height: 1.35; margin-top: 2px; } @keyframes plg-nudge-in { from { opacity: 0; transform: translate(8px, -50%); } to { opacity: 1; transform: translate(0, -50%); } } @keyframes plg-nudge-arrow-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } } /* ─── Wrong-number escape row ──────────────────────────────────────── */ .plg-verify-escape { margin-top: 16px; padding-top: 14px; border-top: 1px solid #F1F5F9; font-size: 0.82rem; } .plg-verify-escape a { color: #64748B; font-weight: 500; text-decoration: none; cursor: pointer; } .plg-verify-escape a:hover { color: #0F172A; text-decoration: underline; } /* ─── Sidebar badge on 10DLC nav item ──────────────────────────── */ .plg-dlc-badge { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; display: inline-block; margin-left: 6px; animation: plg-dlc-badge-pulse 2s ease-in-out infinite; } @keyframes plg-dlc-badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } /* ─── Welcome-back modal ──────────────────────────────────────── */ .plg-welcome-card { background: #FFF; border-radius: 22px; padding: 36px 36px 28px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 30px 80px -20px rgba(37, 99, 235, 0.45), 0 0 0 1px rgba(37, 99, 235, 0.08); position: relative; animation: plg-celebrate-pop 0.45s cubic-bezier(0.34, 1.35, 0.64, 1); } .plg-welcome-title { font-size: 1.4rem; font-weight: 900; color: #0F172A; margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.2; } .plg-welcome-sub { font-size: 0.95rem; color: #475569; line-height: 1.5; margin: 0 0 24px; } /* ─── Mobile onboarding overrides ─────────────────────────────── */ @media (max-width: 900px) { /* Coach pointer pill: position to the right of target on mobile */ #plgSendSmsPointer { font-size: 0.72rem; padding: 8px 12px; } /* Triangle points left toward the button */ #plgSendSmsPointer::after { top: 50%; left: -10px; right: auto; bottom: auto; transform: translateY(-50%); border: 6px solid transparent; border-right-color: #7C3AED; border-top-color: transparent; } /* Hide banners when sidebar is open so they don't cover menu */ .sidebar.open ~ .main-content #plgDlcBanner, .sidebar.open ~ .main-content #plgProgressBanner { display: none !important; } /* Register brand / campaign pointers: hide on mobile */ #plgRegisterBrandPointer, #plgAddCampaignPointer { display: none !important; } /* DLC banner: stack vertically, non-sticky on mobile so topbar pushes it down */ .plg-dlc-banner { flex-direction: column; gap: 8px; padding: 10px 14px; text-align: center; position: relative; } .plg-dlc-banner-icon { display: none; } .plg-dlc-banner-text { font-size: 0.8rem; } .plg-dlc-banner-btn { width: 100%; padding: 10px 16px; } /* Dashboard nudge: bottom banner on mobile instead of sidebar pointer */ .plg-dashboard-nudge-mobile { position: fixed; bottom: 16px; left: 12px; right: 12px; top: auto !important; transform: none; border-radius: 14px; max-width: none; animation: plg-nudge-mobile-in 0.4s cubic-bezier(0.34, 1.35, 0.64, 1); } .plg-dashboard-nudge-mobile::before { display: none; } @keyframes plg-nudge-mobile-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Celebration modal: smaller padding */ .plg-celebrate-card { padding: 32px 24px 28px; } .plg-celebrate-title { font-size: 1.25rem; } .plg-celebrate-sub { font-size: 0.85rem; } /* Welcome-back modal */ .plg-welcome-card { padding: 28px 24px 24px; } .plg-welcome-title { font-size: 1.2rem; } /* Inline verify overlay: reduce padding on mobile */ #plgInlineVerify { padding: 20px 16px !important; } /* Verification code boxes: slightly smaller on mobile */ #plgCodeBoxes { gap: 6px !important; } #plgCodeBoxes input { width: 38px !important; height: 46px !important; font-size: 1.15rem !important; } /* Sandbox badge: smaller */ .plg-sandbox-badge { font-size: 0.58rem; padding: 2px 6px; margin-left: 4px; } /* Sidebar coaching: disabled on mobile since sidebar is hidden */ body.plg-onboarding-coach .sidebar .nav-item { opacity: 1; pointer-events: auto; filter: none; } body.plg-onboarding-coach .sidebar .nav-section-label, body.plg-onboarding-coach .sidebar .sidebar-footer { opacity: 1; pointer-events: auto; filter: none; } } /* ─── Sandbox badge in topbar ─────────────────────────────────── */ .plg-sandbox-badge { display: inline-block; background: #FEF3C7; color: #92400E; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 6px; margin-left: 8px; vertical-align: middle; } /* Hide From Number + no-numbers warning during sandbox compose */ .plg-sandbox-compose #newConvoNoNumbers, .plg-sandbox-compose #newConvoFromNumber, .plg-sandbox-compose #newConvoFromNumber + .custom-dropdown { display: none !important; } /* Hide the entire form-group containing From Number */ .plg-sandbox-compose .modal-body > .form-group:has(#newConvoFromNumber) { display: none !important; }