/* ========================================================================== RobloxPets - Support Center v2 Scoped under .rpt2-app to prevent leakage into other modules. Matches ticket-system-overhaul/styles.css with brand navy/blue palette derived from headers/design-handoff/global-colors.md (--rbp-bg #050E1B, --rbp-accent #3B82F6). ========================================================================== */ /* ---------- Page tagging (body.rpt2-body filter on /support-v2/) ---------- */ /* The dedicated /support-v2/ template now renders through the normal WordPress header lifecycle. The header module owns fixed-header spacing via .rbp-header-root, so this page class only carries the v2 color reset. Stage 5B.2 - page now renders through the normal theme/Breakdance lifecycle (no more template_redirect bypass), so we don't own any more and the old html.rpt2-html selector is gone. body.rpt2-body is sufficient (browsers propagate body bg up to html when html has none). We deliberately do NOT force body / .rpt2-app to min-height:100vh - that trap pushed the Breakdance footer off-screen and left a navy gap below short content. The dashboard still owns its own bounded height (.rpt2-dash { height: calc(100vh - 178px) }) for the inbox/thread feed scrolling - that's separate. */ body.rpt2-body { margin: 0; background: #050E1B; color: #E7ECFF; } /* ---------- Tokens ---------- Aligned to the brand palette from headers/design-handoff/global-colors.md and modules/header/assets/css/header.css. Navy base + #3B82F6 accent, blue-tinted lines - NOT purple. The header module is the source of truth. --------------------------------------------------------------------- */ .rpt2-app { /* Surfaces - matches --rbp-bg (#050E1B) with layered elevations */ --bg-0: #050E1B; --bg-1: #0A1428; --bg-2: #0E1A34; --bg-3: #14223E; --bg-4: #1A2B4E; /* Strokes - blue-tinted, no purple cast */ --line-1: rgba(130, 175, 255, 0.08); --line-2: rgba(130, 175, 255, 0.14); --line-3: rgba(130, 175, 255, 0.22); /* Text - matches header (--rbp-text #E7ECFF etc.) */ --text-1: #E7ECFF; --text-2: #C5CEEA; --text-3: #8A95B8; --text-4: #5A6488; /* Brand blue - matches --rbp-accent exactly */ --accent: #3B82F6; --accent-strong: #2563EB; --accent-soft: rgba(59, 130, 246, 0.12); --accent-glow: 0 0 30px rgba(59, 130, 246, 0.45), 0 0 60px rgba(59, 130, 246, 0.25); --accent-grad: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%); /* Semantic */ --success: #3CD596; --success-soft: rgba(60, 213, 150, 0.12); --warning: #F5B544; --warning-soft: rgba(245, 181, 68, 0.12); --danger: #FF5C7A; --danger-soft: rgba(255, 92, 122, 0.12); /* AI tint - kept subtly distinct for future AI bubbles (Stage 4), but toned way down from the old #A876FF so it doesn't read as purple elsewhere in the UI. */ --ai: #6B8EF5; --ai-soft: rgba(107, 142, 245, 0.14); --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --sh-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4); --sh-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35); --sh-lg: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px rgba(3,6,25,0.6), 0 4px 14px rgba(0,0,0,0.35); --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', 'Geist', -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; color: var(--text-1); background: var(--bg-0); letter-spacing: -0.005em; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: block; width: 100%; } .rpt2-app, .rpt2-app * { box-sizing: border-box; } .rpt2-app.rp-bg { overflow: hidden; isolation: isolate; } .rpt2-app.rp-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(59, 130, 246, 0.18), transparent 70%), radial-gradient(ellipse 50% 40% at 90% 10%, rgba(59, 130, 246, 0.10), transparent 70%), radial-gradient(ellipse 70% 60% at 50% 110%, rgba(59, 130, 246, 0.10), transparent 70%); pointer-events: none; z-index: 0; } .rpt2-app.rp-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(130, 175, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 175, 255, 0.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%); pointer-events: none; z-index: 0; } .rpt2-app > * { position: relative; z-index: 1; } .rpt2-app ::selection { background: rgba(59, 130, 246, 0.3); color: #fff; } .rpt2-shell { max-width: 1440px; margin: 0 auto; padding: 0 56px 40px; } /* ---------- Primitives ---------- */ .rpt2-app .rp-card { background: linear-gradient(180deg, rgba(20, 34, 62, 0.72) 0%, rgba(14, 26, 52, 0.72) 100%); border: 1px solid var(--line-2); border-radius: var(--r-lg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--sh-card); } .rpt2-app .rp-card-flat { background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); } .rpt2-app .rp-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-pill); padding: 10px 18px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; line-height: 1; text-decoration: none; color: var(--text-1); background: transparent; } .rpt2-app .rp-btn-primary { background: var(--accent-grad); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15), 0 4px 16px rgba(59, 130, 246, 0.45), 0 0 0 1px rgba(59, 130, 246, 0.6); } .rpt2-app .rp-btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.15), 0 8px 24px rgba(59, 130, 246, 0.55), 0 0 0 1px rgba(59, 130, 246, 0.8); } .rpt2-app .rp-btn-primary:disabled, .rpt2-app .rp-btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 8px rgba(59, 130, 246, 0.25); } .rpt2-app .rp-btn-ghost { background: rgba(255,255,255,0.02); color: var(--text-2); border-color: var(--line-2); } .rpt2-app .rp-btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--line-3); color: var(--text-1); } .rpt2-app .rp-input { width: 100%; background: rgba(5, 14, 27, 0.6); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; color: var(--text-1); font-family: var(--font-sans); transition: all 0.15s ease; } .rpt2-app .rp-input::placeholder { color: var(--text-4); } .rpt2-app .rp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22); background: rgba(5, 14, 27, 0.9); } /* ---------- Pulsing status dot ---------- */ .rpt2-app .rp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(60, 213, 150, 0.15), 0 0 10px rgba(60, 213, 150, 0.8); position: relative; flex-shrink: 0; } .rpt2-app .rp-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: var(--success); opacity: 0.3; animation: rpt2-pulse 2s ease-out infinite; } @keyframes rpt2-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.5); opacity: 0; } } /* ---------- Typography ---------- */ .rpt2-app .rp-h-hero { font-family: var(--font-display); font-weight: 600; font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-1); margin: 0; } .rpt2-app .rp-h-1 { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-1); margin: 0; } .rpt2-app .rp-h-2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; color: var(--text-1); margin: 0; } .rpt2-app .rp-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; } /* ---------- Avatar ---------- */ .rpt2-app .rp-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 600; font-size: 12px; flex-shrink: 0; width: 28px; height: 28px; } /* ---------- Icon box ---------- */ .rpt2-app .rp-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); border: 1px solid rgba(59, 130, 246, 0.25); color: var(--accent); } /* ---------- Divider / shine ---------- */ .rpt2-app .rp-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); } .rpt2-app .rp-shine { position: relative; overflow: hidden; } .rpt2-app .rp-shine::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.55), transparent 40%, transparent 60%, rgba(59, 130, 246, 0.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ========================================================================== Guest access page ========================================================================== */ /* Sub-header under the site header */ .rpt2-subheader { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; gap: 14px; flex-wrap: wrap; } .rpt2-subheader__lead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rpt2-subheader__title { font-size: 22px; } .rpt2-subheader__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--success); font-weight: 500; } .rpt2-new-ticket { gap: 6px; } .rpt2-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Two-column hero + access-card grid */ .rpt2-guest-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 20px 0 40px; align-items: start; } .rpt2-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; margin-bottom: 16px; } .rpt2-hero-title { margin: 0 0 18px; } .rpt2-hero-gradient { /* Same gradient as the header logo mark (--rbp-grad-logo). Blue-dominant with a subtle lift - stays on-brand instead of drifting into purple. */ background: linear-gradient(135deg, #3B82F6, oklch(0.65 0.22 265)); -webkit-background-clip: text; background-clip: text; color: transparent; } .rpt2-hero-sub { font-size: 17px; line-height: 1.55; color: var(--text-3); max-width: 480px; margin: 0 0 32px; text-wrap: pretty; } .rpt2-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 520px; } .rpt2-trust-item { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-radius: 12px; } .rpt2-trust-item__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(59, 130, 246, 0.08); border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rpt2-trust-item__label { font-size: 11px; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-bottom: 2px; } .rpt2-trust-item__value { font-size: 15px; font-weight: 600; color: var(--text-1); } .rpt2-staff-strip { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 12px 16px; background: rgba(59, 130, 246, 0.06); border: 1px solid var(--line-2); border-radius: 999px; max-width: fit-content; } .rpt2-staff-strip__avatars { display: flex; } .rpt2-stack-avatar { border: 2px solid var(--bg-0); font-size: 11px; } .rpt2-stack-avatar + .rpt2-stack-avatar { margin-left: -8px; } .rpt2-staff-strip__text { font-size: 13px; color: var(--text-2); } .rpt2-staff-strip__text strong { font-weight: 600; color: var(--text-1); } /* ---------- Access card (right column) ---------- */ .rpt2-guest-access { position: relative; } .rpt2-access-glow { position: absolute; inset: -40px; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(59, 130, 246, 0.22), transparent 70%); filter: blur(40px); pointer-events: none; z-index: 0; } .rpt2-access-card { position: relative; padding: 32px; border-radius: 22px; z-index: 1; } .rpt2-access-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .rpt2-access-heading__icon { width: 44px; height: 44px; border-radius: 12px; } .rpt2-access-heading__title { font-size: 18px; font-weight: 600; color: var(--text-1); } .rpt2-access-heading__sub { font-size: 13px; color: var(--text-3); margin-top: 2px; } .rpt2-field-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); margin-bottom: 10px; } .rpt2-input-wrap { position: relative; margin-bottom: 14px; } .rpt2-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-4); display: inline-flex; pointer-events: none; } .rpt2-email-input { padding-left: 44px; padding-top: 15px; padding-bottom: 15px; } .rpt2-full-btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 14px; } .rpt2-full-btn [aria-hidden="true"] { margin-left: 4px; } .rpt2-divider { margin: 24px 0; } .rpt2-secondary-ctas { display: flex; flex-direction: column; gap: 10px; } .rpt2-ghost-split { width: 100%; justify-content: space-between; padding: 12px 16px; font-size: 13px; } .rpt2-ghost-split__left { display: inline-flex; align-items: center; gap: 10px; } .rpt2-encryption-note { display: inline-flex; align-items: center; gap: 6px; justify-content: center; width: 100%; font-size: 11px; color: var(--text-4); margin-top: 22px; } /* ---------- Step 2: OTP ---------- */ .rpt2-back-link { background: none; border: none; color: var(--text-3); font-size: 13px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-family: inherit; } .rpt2-back-link:hover { color: var(--text-1); } .rpt2-code-title { font-size: 20px; margin-bottom: 6px; } .rpt2-code-sub { font-size: 13px; color: var(--text-3); margin-bottom: 24px; } .rpt2-code-email { color: var(--accent); font-family: var(--font-mono); } .rpt2-otp-row { display: flex; gap: 10px; margin-bottom: 18px; } .rpt2-otp-cell { width: 52px; height: 56px; text-align: center; font-size: 22px; font-weight: 600; padding: 0; font-family: var(--font-mono); background: rgba(5, 14, 27, 0.6); color: var(--text-1); border: 1px solid var(--line-2); border-radius: var(--r-md); transition: all 0.15s ease; } .rpt2-otp-cell:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22); background: rgba(5, 14, 27, 0.9); } .rpt2-otp-cell.is-filled { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .rpt2-resend-row { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 16px; } .rpt2-resend-link { background: none; border: none; color: var(--accent); font-weight: 500; cursor: pointer; padding: 0 0 0 4px; font-family: inherit; font-size: inherit; } .rpt2-resend-link:hover { text-decoration: underline; } .rpt2-resend-link:disabled { color: var(--text-4); cursor: not-allowed; text-decoration: none; } /* ---------- Access messages ---------- */ .rpt2-access-msg { font-size: 13px; line-height: 1.45; padding: 12px 14px; border-radius: var(--r-md); margin-top: 14px; } .rpt2-access-msg--err { background: var(--danger-soft); border: 1px solid rgba(255, 92, 122, 0.28); color: #FF7A92; } .rpt2-access-msg--ok { background: var(--success-soft); border: 1px solid rgba(60, 213, 150, 0.28); color: var(--success); } /* ========================================================================== FAQ strip ========================================================================== */ .rpt2-faq { padding: 0 0 40px; } .rpt2-faq__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; } .rpt2-faq__eyebrow { font-size: 11px; color: var(--text-4); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .rpt2-faq__all { font-size: 13px; } .rpt2-faq__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .rpt2-faq__card { padding: 18px; border-radius: 14px; cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; transition: transform 0.15s ease, border-color 0.15s ease; } .rpt2-faq__card:hover { transform: translateY(-2px); border-color: var(--line-3); } .rpt2-faq__icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .rpt2-faq__q { font-size: 14px; font-weight: 600; color: var(--text-1); } .rpt2-faq__a { font-size: 12px; color: var(--text-3); line-height: 1.45; } /* ========================================================================== Authed placeholder (Stage 1 stub - Stage 3 replaces it) ========================================================================== */ .rpt2-authed-placeholder { display: flex; gap: 20px; align-items: flex-start; padding: 28px 32px; border-radius: 20px; margin-bottom: 40px; } .rpt2-authed-placeholder__icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; } .rpt2-authed-placeholder__title { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--text-1); } .rpt2-authed-placeholder__body { font-size: 14px; line-height: 1.55; color: var(--text-3); margin: 0 0 14px; max-width: 560px; } .rpt2-authed-placeholder__cta { text-decoration: none; } /* ========================================================================== Authed Dashboard v2 - Stage 3B 3-column shell rendered server-side by render-v2.php :: rp_ticket_v2_render_authed_placeholder(). All selectors are scoped under .rpt2-app so nothing leaks into the floating widget (.rpw2-*), the V1 customer page (.rpt-*), or the host theme. No JS yet - the tabs, search, and ticket rows are visual-only at this stage. ========================================================================== */ .rpt2-app .rpt2-subheader__actions { display: inline-flex; align-items: center; gap: 10px; } .rpt2-app .rpt2-dash { display: grid; grid-template-columns: 240px minmax(0, 1fr) 340px; gap: 18px; /* Bound the dashboard to the visible viewport so the thread (and the inbox list) get a finite parent - the message stream and the row list each carry their own internal overflow:auto, which only engages when the parent has a real height to clamp against. */ align-items: stretch; height: calc(100vh - 200px); min-height: 560px; } /* Make the [hidden] attribute actually hide our pane swap targets. Without this, .rpt2-dash__list / .rpt2-dash__thread set display:flex (specificity 0,2,0) which beats the UA [hidden] (specificity 0,1,0), so JS toggling .hidden = true would otherwise leave both panes visible and stack the thread below the inbox. */ .rpt2-app [hidden] { display: none !important; } /* Defensive resets - the page builder / theme can wrap the shortcode in a section with default top spacing on
; clamp anything we own so the dashboard sits close under the fixed site header. */ .rpt2-app .rpt2-main { margin: 0; padding: 0; } .rpt2-app { margin: 0; } /* Bounded-cell stretch: each grid column now fills the dashboard height. The inner panes (.rpt2-dash__list / __thread / __side-empty / __side-detail) lay out as flex columns so the scroll containers inside them (list body, thread messages) collapse to the remaining space and engage their own overflow. */ .rpt2-app .rpt2-dash__sidebar, .rpt2-app .rpt2-dash__center, .rpt2-app .rpt2-dash__side { height: 100%; min-height: 0; } .rpt2-app .rpt2-dash__sidebar, .rpt2-app .rpt2-dash__side { position: static; /* fixed-height dashboard supersedes sticky */ top: auto; overflow-y: auto; } .rpt2-app .rpt2-dash__list, .rpt2-app .rpt2-dash__thread { height: 100%; min-height: 0; /* allow flex children to scroll */ } /* ---------- Left sidebar ---------- */ .rpt2-app .rpt2-dash__sidebar { padding: 8px; position: sticky; /* Site header is 88px fixed (see modules/header/assets/css/header.css); full-page route adds the same offset on body, so 104px keeps both the shortcode-on-theme-page and full-page renders comfortably below it. */ top: 104px; } .rpt2-app .rpt2-dash__nav { display: flex; flex-direction: column; gap: 2px; } .rpt2-app .rpt2-dash__nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; color: var(--text-2); border-radius: 10px; text-decoration: none; transition: background 140ms ease, color 140ms ease; cursor: pointer; } .rpt2-app .rpt2-dash__nav-item:hover { background: rgba(130, 175, 255, 0.06); color: var(--text-1); } .rpt2-app .rpt2-dash__nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .rpt2-app .rpt2-dash__nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: currentColor; } .rpt2-app .rpt2-dash__nav-label { flex: 1; min-width: 0; } .rpt2-app .rpt2-dash__nav-heading { padding: 18px 12px 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); } /* ---------- Center: ticket list ---------- */ .rpt2-app .rpt2-dash__list { display: flex; flex-direction: column; overflow: hidden; min-height: 480px; } .rpt2-app .rpt2-dash__list-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--line-1); display: flex; flex-direction: column; gap: 12px; } .rpt2-app .rpt2-dash__list-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .rpt2-app .rpt2-dash__list-title { font-size: 17px; font-weight: 600; color: var(--text-1); line-height: 1.2; } .rpt2-app .rpt2-dash__list-sub { font-size: 12px; color: var(--text-4); margin-top: 2px; } .rpt2-app .rpt2-dash__list-tools { display: inline-flex; gap: 6px; flex-shrink: 0; } .rpt2-app .rpt2-dash__tool-btn { padding: 7px 12px; font-size: 12px; } /* Tabs (visual-only - JS filtering lands in 3A.4) */ .rpt2-app .rpt2-dash__tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; } .rpt2-app .rpt2-dash__tab { appearance: none; background: transparent; border: 1px solid var(--line-2); color: var(--text-3); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .rpt2-app .rpt2-dash__tab:hover { color: var(--text-2); border-color: var(--line-3); } .rpt2-app .rpt2-dash__tab.is-active { background: var(--accent-soft); color: var(--accent); border-color: rgba(59, 130, 246, 0.35); } /* Search */ .rpt2-app .rpt2-dash__search { position: relative; } .rpt2-app .rpt2-dash__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-4); pointer-events: none; } .rpt2-app .rpt2-dash__search-input { width: 100%; padding: 11px 14px 11px 40px; } /* Rows */ .rpt2-app .rpt2-dash__list-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .rpt2-app .rpt2-dash__rows { list-style: none; margin: 0; padding: 0; } .rpt2-app .rpt2-dash__row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-1); cursor: pointer; transition: background 140ms ease; } .rpt2-app .rpt2-dash__row:last-child { border-bottom: 0; } .rpt2-app .rpt2-dash__row:hover { background: rgba(130, 175, 255, 0.04); } .rpt2-app .rpt2-dash__row.is-new { background: rgba(59, 130, 246, 0.04); } .rpt2-app .rpt2-dash__row-main { flex: 1; min-width: 0; } .rpt2-app .rpt2-dash__row-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); } .rpt2-app .rpt2-dash__row-id { color: var(--accent); font-weight: 600; } .rpt2-app .rpt2-dash__row-cat { color: var(--text-3); font-weight: 500; } .rpt2-app .rpt2-dash__row-sep { color: var(--text-4); font-size: 11px; } .rpt2-app .rpt2-dash__row-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid transparent; } .rpt2-app .rpt2-dash__row-pill--open { background: var(--accent-soft); color: var(--accent); border-color: rgba(59, 130, 246, 0.32); } .rpt2-app .rpt2-dash__row-pill--in_progress { background: var(--warning-soft); color: var(--warning); border-color: rgba(245, 181, 68, 0.32); } .rpt2-app .rpt2-dash__row-pill--waiting_customer { background: var(--ai-soft); color: var(--ai); border-color: rgba(107, 142, 245, 0.32); } .rpt2-app .rpt2-dash__row-pill--resolved { background: var(--success-soft); color: var(--success); border-color: rgba(60, 213, 150, 0.32); } .rpt2-app .rpt2-dash__row-pill--closed { background: rgba(130, 175, 255, 0.06); color: var(--text-3); border-color: var(--line-2); } .rpt2-app .rpt2-dash__row-new { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; } .rpt2-app .rpt2-dash__row-subject { font-size: 14.5px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rpt2-app .rpt2-dash__row-foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-4); flex-wrap: wrap; } .rpt2-app .rpt2-dash__row-reply { color: var(--text-3); } .rpt2-app .rpt2-dash__row-reply.is-new { color: var(--accent); font-weight: 600; } .rpt2-app .rpt2-dash__row-chev { color: var(--text-4); margin-top: 4px; display: inline-flex; flex-shrink: 0; } /* Empty state inside the list */ .rpt2-app .rpt2-dash__list-empty { padding: 48px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .rpt2-app .rpt2-dash__list-empty-icon { width: 56px; height: 56px; margin-bottom: 4px; color: var(--accent); } .rpt2-app .rpt2-dash__list-empty-title { font-size: 15px; font-weight: 600; color: var(--text-1); } .rpt2-app .rpt2-dash__list-empty-body { font-size: 13px; color: var(--text-3); line-height: 1.5; max-width: 320px; margin: 0; } .rpt2-app .rpt2-dash__list-empty-cta { margin-top: 8px; text-decoration: none; } /* ---------- Right side panel ---------- */ .rpt2-app .rpt2-dash__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 104px; } /* Select-a-ticket helper card */ .rpt2-app .rpt2-dash__select { padding: 22px; text-align: center; border-radius: var(--r-lg); } .rpt2-app .rpt2-dash__select-icon { width: 60px; height: 60px; border-radius: 16px; margin: 6px auto 14px; background: linear-gradient(180deg, rgba(76, 139, 255, 0.20), rgba(76, 139, 255, 0.04)); border-color: rgba(76, 139, 255, 0.25); color: var(--accent); } .rpt2-app .rpt2-dash__select-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text-1); } .rpt2-app .rpt2-dash__select-body { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 0 0 16px; } .rpt2-app .rpt2-dash__select-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; } .rpt2-app .rpt2-dash__select-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--line-1); border-radius: 10px; font-size: 12px; color: var(--text-2); } .rpt2-app .rpt2-dash__select-list-item svg { color: var(--accent); flex-shrink: 0; } /* Support team trust card */ .rpt2-app .rpt2-dash__team { padding: 16px; border-radius: 14px; } .rpt2-app .rpt2-dash__team-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .rpt2-app .rpt2-dash__team-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .rpt2-app .rpt2-dash__team-online { font-size: 11px; color: var(--success); display: inline-flex; align-items: center; gap: 5px; } .rpt2-app .rpt2-dash__team-online .rp-dot { width: 5px; height: 5px; } .rpt2-app .rpt2-dash__team-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .rpt2-app .rpt2-dash__team-member { display: flex; align-items: center; gap: 10px; } .rpt2-app .rpt2-dash__team-avatar { width: 28px; height: 28px; font-size: 11px; background: var(--accent); color: #fff; flex-shrink: 0; } .rpt2-app .rpt2-dash__team-avatar--ai { background: var(--ai); } .rpt2-app .rpt2-dash__team-meta { flex: 1; min-width: 0; } .rpt2-app .rpt2-dash__team-name { font-size: 12.5px; font-weight: 600; color: var(--text-1); display: inline-flex; align-items: center; gap: 6px; } .rpt2-app .rpt2-dash__team-badge { font-size: 8.5px; padding: 2px 5px; border-radius: 4px; background: var(--ai-soft); color: var(--ai); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; } .rpt2-app .rpt2-dash__team-role { font-size: 11px; color: var(--text-4); margin-top: 1px; } .rpt2-app .rpt2-dash__team-status { font-size: 11px; font-weight: 500; flex-shrink: 0; } .rpt2-app .rpt2-dash__team-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 4px; vertical-align: middle; } .rpt2-app .rpt2-dash__team-status--online { color: var(--success); } .rpt2-app .rpt2-dash__team-status--away { color: var(--warning); } .rpt2-app .rpt2-dash__team-status--muted { color: var(--text-4); } /* Priority CTA - three states (available / cooldown / guest-locked) */ .rpt2-app .rpt2-dash__priority { padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 92, 122, 0.22); background: linear-gradient(180deg, rgba(255, 92, 122, 0.08), rgba(255, 92, 122, 0.02)); } .rpt2-app .rpt2-dash__priority.is-cooldown { border-color: var(--line-2); background: var(--bg-2); } .rpt2-app .rpt2-dash__priority-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rpt2-app .rpt2-dash__priority-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 92, 122, 0.15); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rpt2-app .rpt2-dash__priority.is-cooldown .rpt2-dash__priority-icon { background: rgba(130, 175, 255, 0.10); color: var(--text-3); } .rpt2-app .rpt2-dash__priority-heading { flex: 1; min-width: 0; } .rpt2-app .rpt2-dash__priority-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .rpt2-app .rpt2-dash__priority-sub { font-size: 11px; color: var(--text-4); margin-top: 2px; } .rpt2-app .rpt2-dash__priority-cta { width: 100%; justify-content: center; padding: 10px 16px; font-size: 13px; background: linear-gradient(180deg, #FF7A93 0%, var(--danger) 100%); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(255, 92, 122, 0.28); } .rpt2-app .rpt2-dash__priority-cta:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); } .rpt2-app .rpt2-dash__priority-cta:disabled, .rpt2-app .rpt2-dash__priority-cta[disabled] { background: var(--bg-3); color: var(--text-4); cursor: not-allowed; box-shadow: none; filter: none; transform: none; opacity: 0.85; } .rpt2-app .rpt2-dash__priority-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-1); font-size: 11px; color: var(--text-4); text-align: center; } /* ========================================================================== Stage 4C polish - unread badge sync + read receipts + thread loading Tiny additions on top of 3B/4B; no structural changes. ========================================================================== */ /* Sidebar unread badge - sits at the right end of the My Tickets nav row. Only rendered (data-slot exposes it) when the JS unread sync pulls a non-zero rp_chat_unread count. */ .rpt2-app .rpt2-dash__nav-badge { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 999px; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; flex-shrink: 0; } .rpt2-app .rpt2-dash__nav-item.is-active .rpt2-dash__nav-badge { background: rgba(255, 255, 255, 0.08); color: var(--accent); border-color: rgba(59, 130, 246, 0.45); } /* Customer message read-receipt - three states. The bubble stays the same; only the foot meta (.rpt2-dash__bubble-time--mine) changes: pending - optimistic send (data-id^="pending-"), clock glyph, muted, slight bubble dim delivered - server-acked, single check (default), muted text read - long-poll surfaced read_by_staff_ids, double check + accent text The 4B base file already supplied the delivered + read CSS; this block refines the muted greys and adds the new pending state. */ .rpt2-app .rpt2-dash__bubble-time--mine { font-size: 10.5px; color: var(--text-4); display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.005em; transition: color 160ms ease; } .rpt2-app .rpt2-dash__bubble-time--mine::before { content: ''; display: inline-block; width: 13px; height: 13px; background-repeat: no-repeat; background-size: contain; background-position: center; /* default = delivered (single check, muted) */ background-image: url("data:image/svg+xml;utf8,"); transition: background-image 160ms ease; } .rpt2-app .rpt2-dash__msg--customer.is-read .rpt2-dash__bubble-time--mine { color: var(--accent); } .rpt2-app .rpt2-dash__msg--customer.is-read .rpt2-dash__bubble-time--mine::before { background-image: url("data:image/svg+xml;utf8,"); } /* Pending - optimistic bubble, server hasn't confirmed yet. Subtle clock glyph in --text-4; no opacity change on the time itself (the bubble already dims via [data-id^="pending-"]). */ .rpt2-app .rpt2-dash__msg--customer[data-id^="pending-"] .rpt2-dash__bubble-time--mine::before { background-image: url("data:image/svg+xml;utf8,"); } /* Subtle thread loading state - replaces the bare "Loading messages..." text with a centred dim row + a muted spinner glyph. Same node, JS doesn't change. */ .rpt2-app .rpt2-dash__thread-loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin: auto; padding: 28px 18px; font-size: 13px; color: var(--text-4); text-align: center; max-width: 360px; } .rpt2-app .rpt2-dash__thread-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: rpt2-dash-spin 800ms linear infinite; flex-shrink: 0; } @keyframes rpt2-dash-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rpt2-app .rpt2-dash__thread-loading::before { animation: none; border-top-color: var(--line-2); } } /* Empty state stays text-only (no spinner) - only the loading variant gets the spinner glyph. */ .rpt2-app .rpt2-dash__thread-empty::before { content: none; } /* ========================================================================== New Ticket flow - Stage 5A foundation (visual shell only). Centre pane: header + step indicator + category grid + order placeholder + subject + message + read-only priority block + disabled Create Ticket button. Right pane: Tips for faster help + Expected reply card. The Priority CTA stays mounted across all view-pane swaps. Submit + AJAX wiring lands in 5B; this file only paints the shell. ========================================================================== */ .rpt2-app .rpt2-dash__create { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .rpt2-app .rpt2-dash__create-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 20px; } /* ── Header (back link + eyebrow + title + steps) ── */ .rpt2-app .rpt2-dash__create-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; } .rpt2-app .rpt2-dash__create-back { align-self: flex-start; margin-bottom: 4px; } .rpt2-app .rpt2-dash__create-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .rpt2-app .rpt2-dash__create-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--text-1); line-height: 1.2; } .rpt2-app .rpt2-dash__create-sub { margin: 0; font-size: 13.5px; color: var(--text-3); line-height: 1.5; } /* Step indicator (1 Category active · 2 Details · 3 Submit) */ .rpt2-app .rpt2-dash__create-steps { list-style: none; margin: 12px 0 4px; padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rpt2-app .rpt2-dash__create-step { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-4); } .rpt2-app .rpt2-dash__create-step.is-active { color: var(--text-1); font-weight: 600; } .rpt2-app .rpt2-dash__create-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text-4); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .rpt2-app .rpt2-dash__create-step.is-active .rpt2-dash__create-step-num { background: linear-gradient(180deg, #60A5FA 0%, var(--accent) 100%); border-color: transparent; color: #fff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .rpt2-app .rpt2-dash__create-step-line { flex: 0 0 28px; height: 1px; background: var(--line-2); list-style: none; } /* ── Category grid ── */ .rpt2-app .rpt2-dash__create-categories { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .rpt2-app .rpt2-dash__create-category { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; padding: 16px 18px 16px 18px; border: 1px solid var(--line-1); background: var(--bg-2); border-radius: 14px; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .rpt2-app .rpt2-dash__create-category:hover { border-color: var(--line-3); background: rgba(130, 175, 255, 0.04); } .rpt2-app .rpt2-dash__create-category-input { position: absolute; opacity: 0; pointer-events: none; } .rpt2-app .rpt2-dash__create-category:has(.rpt2-dash__create-category-input:checked) { border-color: rgba(59, 130, 246, 0.5); background: rgba(59, 130, 246, 0.06); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } .rpt2-app .rpt2-dash__create-category-input:focus-visible + .rpt2-dash__create-category-icon { outline: 2px solid var(--accent); outline-offset: 2px; } .rpt2-app .rpt2-dash__create-category-icon { grid-row: 1 / 3; grid-column: 1; align-self: start; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(59, 130, 246, 0.28); } /* Per-tone tint on the icon chip - keeps the design reference's colour coding while still anchoring on our token palette. */ .rpt2-app .rpt2-dash__create-category--success .rpt2-dash__create-category-icon { background: var(--success-soft); color: var(--success); border-color: rgba(60, 213, 150, 0.32); } .rpt2-app .rpt2-dash__create-category--ai .rpt2-dash__create-category-icon { background: var(--ai-soft); color: var(--ai); border-color: rgba(107, 142, 245, 0.32); } .rpt2-app .rpt2-dash__create-category--warning .rpt2-dash__create-category-icon { background: var(--warning-soft); color: var(--warning); border-color: rgba(245, 181, 68, 0.32); } .rpt2-app .rpt2-dash__create-category--muted .rpt2-dash__create-category-icon { background: rgba(130, 175, 255, 0.06); color: var(--text-3); border-color: var(--line-2); } .rpt2-app .rpt2-dash__create-category--danger .rpt2-dash__create-category-icon { background: var(--danger-soft); color: var(--danger); border-color: rgba(255, 92, 122, 0.32); } .rpt2-app .rpt2-dash__create-category-label { grid-row: 1; grid-column: 2; font-size: 14px; font-weight: 600; color: var(--text-1); align-self: end; } .rpt2-app .rpt2-dash__create-category-desc { grid-row: 2; grid-column: 2; font-size: 12px; color: var(--text-3); line-height: 1.4; } .rpt2-app .rpt2-dash__create-category-check { position: absolute; top: 14px; right: 14px; display: inline-flex; color: var(--accent); opacity: 0; transition: opacity 140ms ease; } .rpt2-app .rpt2-dash__create-category:has(.rpt2-dash__create-category-input:checked) .rpt2-dash__create-category-check { opacity: 1; } /* ── Form sections ── */ .rpt2-app .rpt2-dash__create-section { display: flex; flex-direction: column; gap: 8px; } .rpt2-app .rpt2-dash__create-section-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .rpt2-app .rpt2-dash__create-section-aside { font-weight: 400; font-size: 12px; color: var(--text-4); } /* Order placeholder (empty / unauth states) */ .rpt2-app .rpt2-dash__create-orders { border: 1px dashed var(--line-2); border-radius: 12px; padding: 14px; background: var(--bg-2); } .rpt2-app .rpt2-dash__create-orders-empty { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-3); line-height: 1.45; } .rpt2-app .rpt2-dash__create-orders-icon { color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Stage 5B - real linked-order list (mirrors new-ticket.jsx card pattern) */ .rpt2-app .rpt2-dash__create-orders--list { display: flex; flex-direction: column; border: 1px solid var(--line-1); border-style: solid; background: var(--bg-2); padding: 6px; gap: 4px; } .rpt2-app .rpt2-dash__create-order { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .rpt2-app .rpt2-dash__create-order:hover { background: rgba(130, 175, 255, 0.04); } .rpt2-app .rpt2-dash__create-order-input { position: absolute; opacity: 0; pointer-events: none; } .rpt2-app .rpt2-dash__create-order.is-checked { background: var(--accent-soft); border-color: rgba(59, 130, 246, 0.32); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } .rpt2-app .rpt2-dash__create-order-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rpt2-app .rpt2-dash__create-order-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .rpt2-app .rpt2-dash__create-order-line { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .rpt2-app .rpt2-dash__create-order-num { color: var(--accent); font-weight: 600; font-size: 12.5px; } .rpt2-app .rpt2-dash__create-order-items { font-size: 13px; font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .rpt2-app .rpt2-dash__create-order-meta { font-size: 11px; color: var(--text-4); display: inline-flex; align-items: center; gap: 6px; } .rpt2-app .rpt2-dash__create-order-sep { color: var(--text-4); } .rpt2-app .rpt2-dash__create-order-check { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); opacity: 0; transform: scale(0.85); transition: opacity 120ms ease, transform 120ms ease; flex-shrink: 0; } .rpt2-app .rpt2-dash__create-order.is-checked .rpt2-dash__create-order-check { opacity: 1; transform: scale(1); } .rpt2-app .rpt2-dash__create-order-clear { align-self: flex-start; margin: 6px 6px 4px; background: none; border: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--text-3); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } .rpt2-app .rpt2-dash__create-order-clear:hover { color: var(--text-2); } /* Inline submit error */ .rpt2-app .rpt2-dash__create-error { padding: 10px 12px; border-radius: 10px; background: rgba(255, 92, 122, 0.08); border: 1px solid rgba(255, 92, 122, 0.28); color: var(--danger); font-size: 12.5px; line-height: 1.4; } /* Freshly-created row pulse so the customer's eye lands on it after submit */ @keyframes rpt2-row-fresh-pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); } } .rpt2-app .rpt2-dash__row.is-fresh { animation: rpt2-row-fresh-pulse 1200ms ease-out 1; } /* Subject + message inputs */ .rpt2-app .rpt2-dash__create-subject { width: 100%; } .rpt2-app .rpt2-dash__create-message { width: 100%; resize: vertical; min-height: 140px; font-family: inherit; font-size: 14px; line-height: 1.55; padding: 12px 14px; } .rpt2-app .rpt2-dash__create-message-foot { display: flex; align-items: center; justify-content: flex-end; font-size: 11px; color: var(--text-4); } /* Read-only priority block */ .rpt2-app .rpt2-dash__create-priority { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid rgba(255, 92, 122, 0.22); background: linear-gradient(180deg, rgba(255, 92, 122, 0.06), rgba(255, 92, 122, 0.02)); border-radius: 12px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; } .rpt2-app .rpt2-dash__create-priority-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 92, 122, 0.15); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rpt2-app .rpt2-dash__create-priority-body strong { color: var(--text-1); font-weight: 600; } /* Submit row */ .rpt2-app .rpt2-dash__create-actions { display: flex; justify-content: flex-end; padding-top: 4px; } .rpt2-app .rpt2-dash__create-submit { padding: 10px 22px; } /* ── Right-side help cards (Stage 5A) ── */ .rpt2-app .rpt2-dash__side-create { display: flex; flex-direction: column; gap: 14px; } .rpt2-app .rpt2-dash__create-tips { padding: 18px; border-radius: 14px; } .rpt2-app .rpt2-dash__create-tips-head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; } .rpt2-app .rpt2-dash__create-tips-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--ai); } .rpt2-app .rpt2-dash__create-tips-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .rpt2-app .rpt2-dash__create-tips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .rpt2-app .rpt2-dash__create-tips-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); line-height: 1.45; } .rpt2-app .rpt2-dash__create-tips-list li svg { color: var(--success); margin-top: 3px; flex-shrink: 0; } .rpt2-app .rpt2-dash__create-eta { padding: 18px; border-radius: 14px; } .rpt2-app .rpt2-dash__create-eta-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); margin-bottom: 10px; } .rpt2-app .rpt2-dash__create-eta-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; } .rpt2-app .rpt2-dash__create-eta-num { font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; } .rpt2-app .rpt2-dash__create-eta-tail { font-size: 11px; color: var(--text-4); } .rpt2-app .rpt2-dash__create-eta-sub { font-size: 11px; color: var(--text-3); } .rpt2-app .rpt2-dash__create-eta-bar { margin-top: 12px; height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; } .rpt2-app .rpt2-dash__create-eta-bar-fill { width: 85%; height: 100%; background: linear-gradient(90deg, #60A5FA, var(--accent)); border-radius: 3px; } .rpt2-app .rpt2-dash__create-eta-foot { font-size: 10.5px; color: var(--text-4); margin-top: 6px; } /* ========================================================================== Conversation view v2 - Stage 4B Styles the thread + composer + populated right-side detail cards rendered by tickets-customer-v2.js (rp_ticket_messages payload). All selectors stay scoped under .rpt2-app - no widget / V1 leakage. ========================================================================== */ /* The centre column holds the inbox list and the thread; the JS swaps data-view between "list" and "thread" and toggles `hidden` on each pane. The wrapper itself just stretches so either pane can fill it. */ .rpt2-app .rpt2-dash__center { display: flex; flex-direction: column; min-height: 0; } /* ---------- Thread shell ---------- */ .rpt2-app .rpt2-dash__thread { display: flex; flex-direction: column; min-height: 480px; overflow: hidden; } .rpt2-app .rpt2-dash__thread-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line-1); background: linear-gradient(180deg, rgba(20, 34, 62, 0.45), transparent); } .rpt2-app .rpt2-dash__thread-back { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px 6px 10px; font-size: 12.5px; font-weight: 500; font-family: inherit; color: var(--text-3); cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; flex-shrink: 0; } .rpt2-app .rpt2-dash__thread-back:hover { color: var(--text-1); border-color: var(--line-3); background: rgba(130, 175, 255, 0.04); } .rpt2-app .rpt2-dash__thread-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rpt2-app .rpt2-dash__thread-title { flex: 1; min-width: 0; } .rpt2-app .rpt2-dash__thread-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .rpt2-app .rpt2-dash__thread-id { color: var(--accent); font-weight: 600; font-size: 12px; } .rpt2-app .rpt2-dash__thread-cat { font-size: 11px; font-weight: 500; color: var(--text-3); text-transform: capitalize; } .rpt2-app .rpt2-dash__thread-subject { font-size: 16px; font-weight: 600; color: var(--text-1); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Messages stream ---------- */ .rpt2-app .rpt2-dash__thread-messages { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } .rpt2-app .rpt2-dash__thread-loading, .rpt2-app .rpt2-dash__thread-empty { margin: auto; padding: 24px 18px; font-size: 13px; color: var(--text-4); text-align: center; max-width: 320px; } .rpt2-app .rpt2-dash__typing { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 12px; padding: 2px 2px 0; } .rpt2-app .rpt2-dash__typing i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.45; animation: rpt2TypingPulse 1s infinite ease-in-out; } .rpt2-app .rpt2-dash__typing i:nth-child(3) { animation-delay: 0.14s; } .rpt2-app .rpt2-dash__typing i:nth-child(4) { animation-delay: 0.28s; } @keyframes rpt2TypingPulse { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-2px); opacity: 0.85; } } /* Message wrapper - column flex so head + bubble + atts + foot stack. Customer bubbles align right, staff/AI align left. */ .rpt2-app .rpt2-dash__msg { display: flex; flex-direction: column; gap: 6px; max-width: 72%; } .rpt2-app .rpt2-dash__msg--customer { align-self: flex-end; align-items: flex-end; } .rpt2-app .rpt2-dash__msg--staff, .rpt2-app .rpt2-dash__msg--ai { align-self: flex-start; align-items: flex-start; } /* Optimistic pending bubble - JS sets data-id="pending-..." until the server reconciles. Subtle dim so the user sees it's "in flight". */ .rpt2-app .rpt2-dash__msg[data-id^="pending-"] .rpt2-dash__bubble { opacity: 0.72; } /* Bubble head (non-customer): avatar + name + role pill + time */ .rpt2-app .rpt2-dash__bubble-head { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; } .rpt2-app .rpt2-dash__bubble-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; object-fit: cover; flex-shrink: 0; } .rpt2-app .rpt2-dash__bubble-avatar--ai { background: linear-gradient(135deg, var(--ai), var(--accent-strong)); } .rpt2-app .rpt2-dash__bubble-name { font-size: 12px; font-weight: 600; color: var(--text-1); } .rpt2-app .rpt2-dash__bubble-role { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; } .rpt2-app .rpt2-dash__bubble-role--staff { background: var(--success-soft); color: var(--success); } .rpt2-app .rpt2-dash__bubble-role--ai { background: var(--ai-soft); color: var(--ai); } .rpt2-app .rpt2-dash__bubble-time { font-size: 11px; color: var(--text-4); } /* The bubble itself - three role variants */ .rpt2-app .rpt2-dash__bubble { padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; max-width: 100%; white-space: pre-wrap; } .rpt2-app .rpt2-dash__bubble--customer { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.22); } .rpt2-app .rpt2-dash__bubble--staff { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-1); border-bottom-left-radius: 6px; } .rpt2-app .rpt2-dash__bubble--ai { background: linear-gradient(180deg, rgba(107, 142, 245, 0.10), rgba(107, 142, 245, 0.04)); border: 1px solid rgba(107, 142, 245, 0.28); color: var(--text-1); border-bottom-left-radius: 6px; } /* Attachments row */ .rpt2-app .rpt2-dash__bubble-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .rpt2-app .rpt2-dash__bubble-att { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; font-size: 12px; color: var(--text-2); text-decoration: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color 140ms ease, background 140ms ease; } .rpt2-app .rpt2-dash__bubble-att:hover { border-color: var(--line-3); background: rgba(130, 175, 255, 0.06); } .rpt2-app .rpt2-dash__bubble-att--image { padding: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; display: inline-block; max-width: 220px; } .rpt2-app .rpt2-dash__bubble-att--image img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; } /* Customer foot meta (sent · You / read state via .is-read) */ .rpt2-app .rpt2-dash__bubble-time--mine { font-size: 10.5px; color: var(--text-4); display: inline-flex; align-items: center; gap: 4px; } .rpt2-app .rpt2-dash__bubble-time--mine::before { content: ''; display: inline-block; width: 12px; height: 12px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; } .rpt2-app .rpt2-dash__msg--customer.is-read .rpt2-dash__bubble-time--mine { color: var(--accent); } .rpt2-app .rpt2-dash__msg--customer.is-read .rpt2-dash__bubble-time--mine::before { background-image: url("data:image/svg+xml;utf8,"); } /* ---------- Composer ---------- */ .rpt2-app .rpt2-dash__composer { border-top: 1px solid var(--line-1); background: rgba(7, 9, 26, 0.4); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .rpt2-app .rpt2-dash__composer-input { width: 100%; resize: none; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--text-1); min-height: 56px; max-height: 200px; transition: border-color 140ms ease, box-shadow 140ms ease; } .rpt2-app .rpt2-dash__composer-input::placeholder { color: var(--text-4); } .rpt2-app .rpt2-dash__composer-input:focus { outline: none; border-color: rgba(59, 130, 246, 0.55); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .rpt2-app .rpt2-dash__composer-input:disabled { background: var(--bg-2); opacity: 0.7; cursor: not-allowed; } .rpt2-app .rpt2-dash__composer-foot { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; } .rpt2-app .rpt2-dash__composer-hint { font-size: 11.5px; color: var(--text-4); line-height: 1.4; margin-right: auto; min-width: 0; } .rpt2-app .rpt2-dash__composer-kbd { display: inline-block; padding: 1px 6px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 4px; font-size: 10.5px; color: var(--text-2); margin: 0 2px; } .rpt2-app .rpt2-dash__composer-send { padding: 9px 18px; font-size: 13px; flex-shrink: 0; } .rpt2-app .rpt2-dash__attach-btn { padding: 8px 12px; font-size: 12px; flex-shrink: 0; } .rpt2-app .rpt2-dash__attachment-list { display: flex; flex-wrap: wrap; gap: 8px; } .rpt2-app .rpt2-dash__attachment-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(130, 175, 255, 0.05); color: var(--text-2); font-size: 12px; } .rpt2-app .rpt2-dash__attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rpt2-app .rpt2-dash__attachment-chip button, .rpt2-app .rpt2-dash__reply-clear, .rpt2-app .rpt2-dash__msg-reply { appearance: none; border: 0; background: transparent; color: var(--text-3); font: inherit; cursor: pointer; } .rpt2-app .rpt2-dash__reply-clear { flex: 0 0 auto; } .rpt2-app .rpt2-dash__attachment-chip button:hover, .rpt2-app .rpt2-dash__reply-clear:hover, .rpt2-app .rpt2-dash__msg-reply:hover { color: var(--accent); } .rpt2-app .rpt2-dash__reply-preview, .rpt2-app .rpt2-dash__reply-ref { border-left: 2px solid var(--accent); background: rgba(59, 130, 246, 0.08); border-radius: 8px; } .rpt2-app .rpt2-dash__reply-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; max-width: 100%; overflow: hidden; padding: 9px 10px; } .rpt2-app .rpt2-dash__reply-preview-body { flex: 1 1 auto; min-width: 0; overflow: hidden; } .rpt2-app .rpt2-dash__reply-preview-label { display: block; color: var(--text-4); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; } .rpt2-app .rpt2-dash__reply-preview-text { display: block; max-width: 100%; min-width: 0; color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rpt2-app .rpt2-dash__reply-ref { padding: 8px 10px; max-width: 100%; } .rpt2-app .rpt2-dash__reply-ref span { display: block; color: var(--text-3); font-size: 11px; font-weight: 700; margin-bottom: 2px; } .rpt2-app .rpt2-dash__reply-ref p { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.35; } .rpt2-app .rpt2-dash__msg-reply { opacity: 0; align-self: flex-start; padding: 2px 0; font-size: 11px; transition: opacity 140ms ease, color 140ms ease; } .rpt2-app .rpt2-dash__msg--customer .rpt2-dash__msg-reply { align-self: flex-end; } .rpt2-app .rpt2-dash__msg:hover .rpt2-dash__msg-reply, .rpt2-app .rpt2-dash__msg:focus-within .rpt2-dash__msg-reply { opacity: 1; } /* ---------- Right detail panel (populated state) ---------- */ .rpt2-app .rpt2-dash__side-detail { display: flex; flex-direction: column; gap: 14px; } .rpt2-app .rpt2-dash__info, .rpt2-app .rpt2-dash__order, .rpt2-app .rpt2-dash__delivery { padding: 16px 18px; border-radius: 14px; } .rpt2-app .rpt2-dash__info-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); margin-bottom: 12px; } .rpt2-app .rpt2-dash__info-list { display: flex; flex-direction: column; } .rpt2-app .rpt2-dash__info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-1); font-size: 12.5px; } .rpt2-app .rpt2-dash__info-row:last-child { border-bottom: 0; } .rpt2-app .rpt2-dash__info-key { color: var(--text-3); font-weight: 500; flex-shrink: 0; } .rpt2-app .rpt2-dash__info-val { color: var(--text-1); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rpt2-app .rpt2-dash__info-mono { color: var(--accent); font-weight: 600; } /* Order card */ .rpt2-app .rpt2-dash__order-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .rpt2-app .rpt2-dash__order-total { font-weight: 600; color: var(--text-1); font-size: 13px; } .rpt2-app .rpt2-dash__order-row .rpt2-dash__row-pill { margin-left: auto; } .rpt2-app .rpt2-dash__order-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .rpt2-app .rpt2-dash__order-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--line-1); border-radius: 10px; font-size: 12.5px; } .rpt2-app .rpt2-dash__order-thumb { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .rpt2-app .rpt2-dash__order-name { flex: 1; min-width: 0; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rpt2-app .rpt2-dash__order-qty { color: var(--text-4); font-size: 11.5px; flex-shrink: 0; } .rpt2-app .rpt2-dash__order-date { font-size: 11px; color: var(--text-4); } /* Delivery timeline */ .rpt2-app .rpt2-dash__delivery-list { display: flex; flex-direction: column; position: relative; } .rpt2-app .rpt2-dash__delivery-step { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; position: relative; font-size: 12.5px; color: var(--text-3); } /* Connector line between dots */ .rpt2-app .rpt2-dash__delivery-step:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: calc(50% + 7px); bottom: -7px; width: 2px; background: var(--line-2); } .rpt2-app .rpt2-dash__delivery-step.is-done:not(:last-child)::after { background: var(--success); } .rpt2-app .rpt2-dash__delivery-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg-2); position: relative; z-index: 1; } .rpt2-app .rpt2-dash__delivery-step.is-done .rpt2-dash__delivery-dot { border-color: var(--success); background: var(--success); box-shadow: 0 0 0 3px rgba(60, 213, 150, 0.15); } .rpt2-app .rpt2-dash__delivery-step.is-active .rpt2-dash__delivery-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .rpt2-app .rpt2-dash__delivery-label { color: var(--text-3); font-weight: 500; } .rpt2-app .rpt2-dash__delivery-step.is-done .rpt2-dash__delivery-label { color: var(--success); font-weight: 600; } .rpt2-app .rpt2-dash__delivery-step.is-active .rpt2-dash__delivery-label { color: var(--accent); font-weight: 600; } .rpt2-app .rpt2-dash__delivery-time { font-size: 11px; color: var(--text-4); } /* ========================================================================== Stage 5A.1 - Polish pass (density · weight · hierarchy) Surgical refinements on top of every prior section. CSS-only; no markup other than the new sidebar Discord card hook. Each rule re-states the selector at the same specificity used earlier so later mobile breakpoints continue to override naturally. ========================================================================== */ /* ── Density: tighter dashboard shell ─────────────────────────────── */ .rpt2-app .rpt2-dash { gap: 14px; height: calc(100vh - 178px); min-height: 540px; } .rpt2-app .rpt2-shell { padding: 0 56px 28px; } /* ── Sidebar - stronger product-rail feel ─────────────────────────── */ .rpt2-app .rpt2-dash__sidebar { padding: 10px 8px; background: var(--bg-2); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; } .rpt2-app .rpt2-dash__nav { gap: 1px; padding: 0 2px; } .rpt2-app .rpt2-dash__nav-item { position: relative; padding: 8px 12px 8px 14px; font-size: 13px; border-radius: 9px; } .rpt2-app .rpt2-dash__nav-item.is-active { background: linear-gradient(180deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06)); color: var(--text-1); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset; } .rpt2-app .rpt2-dash__nav-item.is-active::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px rgba(59, 130, 246, 0.6); } .rpt2-app .rpt2-dash__nav-item.is-active .rpt2-dash__nav-icon { color: var(--accent); } .rpt2-app .rpt2-dash__nav-heading { padding: 14px 12px 4px; font-size: 9.5px; letter-spacing: 0.14em; } .rpt2-app .rpt2-dash__nav-badge { font-size: 10px; padding: 0 6px; min-width: 18px; height: 16px; font-variant-numeric: tabular-nums; } /* Discord rail card - restores the dashboard.jsx treatment */ .rpt2-app .rpt2-dash__rail-discord { margin: 12px 4px 4px; padding: 12px 14px 12px; border-radius: 12px; border: 1px solid rgba(88, 101, 242, 0.28); background: linear-gradient(180deg, rgba(88, 101, 242, 0.18), rgba(88, 101, 242, 0.04)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 14px rgba(3, 6, 25, 0.35); } .rpt2-app .rpt2-dash__rail-discord-head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; } .rpt2-app .rpt2-dash__rail-discord-icon { display: inline-flex; align-items: center; justify-content: center; color: #7983F5; } .rpt2-app .rpt2-dash__rail-discord-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .rpt2-app .rpt2-dash__rail-discord-body { margin: 0 0 10px; font-size: 11.5px; color: var(--text-3); line-height: 1.45; } .rpt2-app .rpt2-dash__rail-discord-cta { width: 100%; justify-content: center; padding: 7px 12px; font-size: 12px; gap: 6px; } /* ── Inbox list density + tighter rows ────────────────────────────── */ .rpt2-app .rpt2-dash__list-head { padding: 14px 18px 12px; gap: 10px; } .rpt2-app .rpt2-dash__list-title { font-size: 16px; } .rpt2-app .rpt2-dash__list-sub { font-size: 11.5px; color: var(--text-4); } .rpt2-app .rpt2-dash__tab { padding: 5px 12px; font-size: 12px; } .rpt2-app .rpt2-dash__search-input { padding: 9px 14px 9px 38px; font-size: 13px; } .rpt2-app .rpt2-dash__row { padding: 11px 18px; gap: 12px; } .rpt2-app .rpt2-dash__row-subject { font-size: 13.5px; margin-bottom: 3px; } .rpt2-app .rpt2-dash__row-meta { margin-bottom: 4px; gap: 7px; } .rpt2-app .rpt2-dash__row-pill { padding: 1px 7px; font-size: 9.5px; letter-spacing: 0.04em; } .rpt2-app .rpt2-dash__row-foot { font-size: 11px; } /* ── Right rail: stronger card weight + hierarchy ─────────────────── */ .rpt2-app .rpt2-dash__side { gap: 12px; } .rpt2-app .rpt2-dash__select, .rpt2-app .rpt2-dash__team, .rpt2-app .rpt2-dash__priority, .rpt2-app .rpt2-dash__info, .rpt2-app .rpt2-dash__order, .rpt2-app .rpt2-dash__delivery, .rpt2-app .rpt2-dash__create-tips, .rpt2-app .rpt2-dash__create-eta { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 22px rgba(3, 6, 25, 0.4); border-color: var(--line-2); } .rpt2-app .rpt2-dash__info-title, .rpt2-app .rpt2-dash__create-eta-eyebrow { font-size: 10px; letter-spacing: 0.14em; color: var(--text-4); margin-bottom: 10px; } /* Select-a-ticket card - tighter + premium */ .rpt2-app .rpt2-dash__select { padding: 18px; } .rpt2-app .rpt2-dash__select-icon { width: 52px; height: 52px; margin: 4px auto 12px; border-radius: 14px; } .rpt2-app .rpt2-dash__select-title { font-size: 14px; margin-bottom: 4px; } .rpt2-app .rpt2-dash__select-body { font-size: 12px; margin-bottom: 12px; } .rpt2-app .rpt2-dash__select-list-item { padding: 7px 10px; font-size: 11.5px; } /* Team trust card */ .rpt2-app .rpt2-dash__team { padding: 14px 16px; } .rpt2-app .rpt2-dash__team-list { gap: 8px; } .rpt2-app .rpt2-dash__team-member { gap: 9px; } .rpt2-app .rpt2-dash__team-name { font-size: 12px; } .rpt2-app .rpt2-dash__team-role { font-size: 10.5px; } .rpt2-app .rpt2-dash__team-status { font-size: 10.5px; } .rpt2-app .rpt2-dash__team-avatar { width: 26px; height: 26px; font-size: 10.5px; } /* Priority card stronger anchoring */ .rpt2-app .rpt2-dash__priority { padding: 14px 16px; } .rpt2-app .rpt2-dash__priority-cta { padding: 9px 16px; font-size: 12.5px; } .rpt2-app .rpt2-dash__priority-title { font-size: 12.5px; } .rpt2-app .rpt2-dash__priority-sub { font-size: 10.5px; } /* Detail cards (info / order / delivery) tightened */ .rpt2-app .rpt2-dash__info, .rpt2-app .rpt2-dash__order, .rpt2-app .rpt2-dash__delivery { padding: 14px 16px; } .rpt2-app .rpt2-dash__info-row { padding: 6px 0; font-size: 12px; } .rpt2-app .rpt2-dash__delivery-step { padding: 7px 0; font-size: 12px; } /* ── Thread header: command-center authority ──────────────────────── */ .rpt2-app .rpt2-dash__thread-head { padding: 14px 20px; gap: 12px; background: linear-gradient(180deg, rgba(20, 34, 62, 0.55), rgba(20, 34, 62, 0)); border-bottom: 1px solid var(--line-2); } .rpt2-app .rpt2-dash__thread-meta { margin-bottom: 5px; gap: 7px; } .rpt2-app .rpt2-dash__thread-id { font-size: 11.5px; } .rpt2-app .rpt2-dash__thread-cat { font-size: 10.5px; color: var(--text-4); } .rpt2-app .rpt2-dash__thread-subject { font-size: 15.5px; letter-spacing: -0.005em; } .rpt2-app .rpt2-dash__thread-back { padding: 6px 11px 6px 9px; font-size: 12px; background: var(--bg-2); border-color: var(--line-2); } /* ── Thread message density ───────────────────────────────────────── */ .rpt2-app .rpt2-dash__thread-messages { padding: 18px 22px 16px; gap: 12px; } .rpt2-app .rpt2-dash__bubble { font-size: 13.5px; padding: 10px 14px; border-radius: 12px; line-height: 1.5; } .rpt2-app .rpt2-dash__bubble--customer { border-bottom-right-radius: 5px; } .rpt2-app .rpt2-dash__bubble--staff, .rpt2-app .rpt2-dash__bubble--ai { border-bottom-left-radius: 5px; } .rpt2-app .rpt2-dash__bubble-head { font-size: 10.5px; gap: 7px; } .rpt2-app .rpt2-dash__bubble-name { font-size: 11.5px; } .rpt2-app .rpt2-dash__bubble-role { font-size: 8.5px; padding: 1px 5px; letter-spacing: 0.07em; } .rpt2-app .rpt2-dash__bubble-avatar { width: 24px; height: 24px; font-size: 10.5px; } /* Composer density */ .rpt2-app .rpt2-dash__composer { padding: 12px 16px; gap: 8px; } .rpt2-app .rpt2-dash__composer-input { min-height: 50px; padding: 11px 14px; font-size: 13.5px; border-radius: 11px; } .rpt2-app .rpt2-dash__composer-send { padding: 8px 16px; font-size: 12.5px; } .rpt2-app .rpt2-dash__composer-hint { font-size: 11px; } /* ── New Ticket form - density + weight ───────────────────────────── */ .rpt2-app .rpt2-dash__create-scroll { padding: 20px 24px 22px; gap: 18px; } .rpt2-app .rpt2-dash__create-eyebrow { font-size: 10.5px; letter-spacing: 0.14em; } .rpt2-app .rpt2-dash__create-title { font-size: 20px; } .rpt2-app .rpt2-dash__create-sub { font-size: 13px; } .rpt2-app .rpt2-dash__create-steps { margin: 8px 0 2px; gap: 8px; } .rpt2-app .rpt2-dash__create-step { font-size: 12px; } .rpt2-app .rpt2-dash__create-step-num { width: 22px; height: 22px; font-size: 10.5px; } .rpt2-app .rpt2-dash__create-step-line { flex-basis: 22px; } .rpt2-app .rpt2-dash__create-section { gap: 6px; } .rpt2-app .rpt2-dash__create-section-title { font-size: 12.5px; } .rpt2-app .rpt2-dash__create-section-aside { font-size: 11px; } .rpt2-app .rpt2-dash__create-orders { padding: 12px; } .rpt2-app .rpt2-dash__create-orders-empty { font-size: 12px; } .rpt2-app .rpt2-dash__create-subject { padding: 9px 13px; font-size: 13px; } .rpt2-app .rpt2-dash__create-message { min-height: 120px; padding: 11px 14px; font-size: 13px; } .rpt2-app .rpt2-dash__create-priority { padding: 12px 14px; font-size: 12px; border-radius: 11px; } .rpt2-app .rpt2-dash__create-priority-icon { width: 26px; height: 26px; } .rpt2-app .rpt2-dash__create-submit { padding: 9px 22px; font-size: 12.5px; } /* Category card confidence - selected state */ .rpt2-app .rpt2-dash__create-categories { gap: 10px; } .rpt2-app .rpt2-dash__create-category { padding: 14px 16px; border-radius: 13px; } .rpt2-app .rpt2-dash__create-category-icon { width: 34px; height: 34px; border-radius: 9px; } .rpt2-app .rpt2-dash__create-category-label { font-size: 13px; } .rpt2-app .rpt2-dash__create-category-desc { font-size: 11.5px; } .rpt2-app .rpt2-dash__create-category:has(.rpt2-dash__create-category-input:checked) { border-color: rgba(59, 130, 246, 0.65); background: linear-gradient(180deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.04)); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.55), 0 0 0 5px rgba(59, 130, 246, 0.14), 0 8px 22px rgba(3, 6, 25, 0.45); transform: translateY(-1px); } .rpt2-app .rpt2-dash__create-category:has(.rpt2-dash__create-category-input:checked) .rpt2-dash__create-category-icon { transform: scale(1.04); } .rpt2-app .rpt2-dash__create-category-check { top: 12px; right: 12px; width: 22px; height: 22px; background: var(--accent); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); transform: scale(0.7); transition: opacity 160ms ease, transform 160ms ease; } .rpt2-app .rpt2-dash__create-category:has(.rpt2-dash__create-category-input:checked) .rpt2-dash__create-category-check { opacity: 1; transform: scale(1); } /* Right-side help cards (create view) - match the right-rail weight */ .rpt2-app .rpt2-dash__create-tips { padding: 14px 16px; } .rpt2-app .rpt2-dash__create-tips-list { gap: 8px; } .rpt2-app .rpt2-dash__create-tips-list li { font-size: 12px; } .rpt2-app .rpt2-dash__create-eta { padding: 14px 16px; } .rpt2-app .rpt2-dash__create-eta-num { font-size: 28px; letter-spacing: -0.02em; } .rpt2-app .rpt2-dash__create-eta-tail { font-size: 10.5px; } .rpt2-app .rpt2-dash__create-eta-sub { font-size: 10.5px; } .rpt2-app .rpt2-dash__create-eta-foot { font-size: 10px; } /* ── Sub-header tightened ─────────────────────────────────────────── */ .rpt2-app .rpt2-subheader { padding: 12px 0 12px; gap: 12px; } .rpt2-app .rpt2-subheader__title { font-size: 20px; letter-spacing: -0.01em; } .rpt2-app .rpt2-subheader__status { font-size: 11.5px; } /* ========================================================================== Stage 5A.2 - Release the bounded scroll for the Create view Inbox + thread keep the Discord/Intercom-style bounded shell (the list body and message stream each scroll inside a fixed dashboard height). Create is a guided action flow, not a feed, so it should grow naturally and let the document scroll instead of trapping the form inside a 540-580px scroll region. Scoped via :has(.rpt2-dash__center[data-view="create"]) - fires only when setView('create') has flipped that attribute. List and thread states are byte-identical because their data-view values never match this selector. Also lifts the right rail's overflow:auto in this view per spec ("right rail should remain natural height only - no independent scroll"). Sidebar + columns are released in lockstep so nothing else fights the bounded-height inheritance. ========================================================================== */ .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) { height: auto; min-height: 0; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__center, .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__sidebar, .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__side, .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__create, .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__create-scroll { height: auto; min-height: 0; overflow: visible; } /* ========================================================================== Mobile - preliminary responsive rules (hardened further in Stage 6) ========================================================================== */ @media (max-width: 960px) { .rpt2-shell { padding: 0 24px 32px; } .rpt2-guest-grid { grid-template-columns: 1fr; gap: 32px; } .rpt2-app .rp-h-hero { font-size: 40px; } .rpt2-faq__grid { grid-template-columns: repeat(2, 1fr); } /* Dashboard: collapse to a single column. Sidebar becomes a horizontal scroll strip; right panel drops below the ticket list. The desktop fixed-height clamp is released so the page can scroll naturally. */ .rpt2-app .rpt2-dash { grid-template-columns: minmax(0, 1fr); gap: 14px; height: auto; min-height: 0; align-items: stretch; } .rpt2-app .rpt2-dash__sidebar, .rpt2-app .rpt2-dash__center, .rpt2-app .rpt2-dash__side { height: auto; } .rpt2-app .rpt2-dash__list, .rpt2-app .rpt2-dash__thread { height: auto; min-height: 480px; /* keep the desktop minimum on mobile */ } .rpt2-app .rpt2-dash__sidebar, .rpt2-app .rpt2-dash__side { position: static; top: auto; overflow: visible; } .rpt2-app .rpt2-dash__sidebar { padding: 6px; } .rpt2-app .rpt2-dash__nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 4px; } .rpt2-app .rpt2-dash__nav::-webkit-scrollbar { display: none; } .rpt2-app .rpt2-dash__nav-item { flex-shrink: 0; padding: 8px 12px; font-size: 12.5px; } .rpt2-app .rpt2-dash__nav-heading { display: none; } } @media (max-width: 640px) { .rpt2-shell { padding: 0 18px 28px; } .rpt2-subheader { padding-top: 18px; } .rpt2-app .rp-h-hero { font-size: 32px; line-height: 1.1; } .rpt2-hero-sub { font-size: 15px; } .rpt2-access-card { padding: 22px; border-radius: 18px; } .rpt2-otp-cell { width: 42px; height: 48px; font-size: 18px; } .rpt2-otp-row { gap: 6px; } .rpt2-trust-grid { grid-template-columns: repeat(2, 1fr); } .rpt2-staff-strip { max-width: none; } .rpt2-faq__grid { grid-template-columns: 1fr; } /* Dashboard: tighter padding, allow subjects to wrap to two lines so the full title is readable on narrow phones. */ .rpt2-app .rpt2-dash__list-head { padding: 14px 16px 12px; } .rpt2-app .rpt2-dash__row { padding: 12px 14px; } .rpt2-app .rpt2-dash__row-subject { font-size: 13.5px; white-space: normal; overflow: visible; text-overflow: clip; } .rpt2-app .rpt2-dash__list-tools { display: none; } .rpt2-app .rpt2-dash__select { padding: 18px; } /* Conversation view: tighter padding, give bubbles more horizontal room since the column is now full-width. */ .rpt2-app .rpt2-dash__thread-head { padding: 14px 16px; gap: 10px; } .rpt2-app .rpt2-dash__thread-subject { font-size: 14.5px; white-space: normal; } .rpt2-app .rpt2-dash__thread-messages { padding: 16px; gap: 12px; } .rpt2-app .rpt2-dash__msg { max-width: 88%; } .rpt2-app .rpt2-dash__bubble { font-size: 13.5px; padding: 10px 13px; } .rpt2-app .rpt2-dash__composer { padding: 12px 14px; } .rpt2-app .rpt2-dash__composer-hint { display: none; } .rpt2-app .rpt2-dash__composer-foot { justify-content: flex-end; } /* New-ticket pane: collapse the 3-up category grid to a single column, tighten the scroll padding, and let the step indicator wrap. */ .rpt2-app .rpt2-dash__create-scroll { padding: 18px 16px 22px; gap: 18px; } .rpt2-app .rpt2-dash__create-title { font-size: 18px; } .rpt2-app .rpt2-dash__create-categories { grid-template-columns: 1fr; gap: 10px; } .rpt2-app .rpt2-dash__create-step-line { display: none; } } /* ========================================================================== Final responsive/layout refinement sweep CSS-only: center feed remains bounded, right rail grows naturally, and mobile thread/create views keep app-like proportions without new markup. ========================================================================== */ .rpt2-app .rpt2-dash:not(:has(.rpt2-dash__center[data-view="create"])) { height: auto; min-height: 540px; align-items: start; } .rpt2-app .rpt2-dash:not(:has(.rpt2-dash__center[data-view="create"])) .rpt2-dash__center { height: calc(100vh - 178px); min-height: 540px; } .rpt2-app .rpt2-dash__side { height: auto; min-height: 0; overflow: visible; align-self: start; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) { gap: 18px; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__create-scroll { padding: 22px 26px 28px; gap: 22px; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__create-section { gap: 10px; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__create-categories { gap: 14px; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__side-create { gap: 16px; } @media (max-width: 960px) { .rpt2-app .rpt2-shell { padding-left: 16px; padding-right: 16px; /* Small buffer only — body.rbp-header-active already reserves the mobile-nav space below the footer, so the +var here just opened a gap above the footer. */ padding-bottom: 24px; } .rpt2-app .rpt2-dash, .rpt2-app .rpt2-dash:not(:has(.rpt2-dash__center[data-view="create"])) { gap: 16px; min-height: 0; } .rpt2-app .rpt2-dash:not(:has(.rpt2-dash__center[data-view="create"])) .rpt2-dash__center { height: auto; min-height: 0; } .rpt2-app .rpt2-dash__list { height: auto; min-height: 480px; } .rpt2-app .rpt2-dash__thread { height: clamp(560px, calc(100dvh - 170px), 720px); min-height: 0; } .rpt2-app .rpt2-dash__thread-messages { min-height: 0; overflow-y: auto; } .rpt2-app .rpt2-dash__side { width: 100%; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) { gap: 16px; } } @media (max-width: 640px) { .rpt2-app .rpt2-shell { padding-left: 10px; padding-right: 10px; /* Small buffer only — nav space is reserved below the footer by body padding. */ padding-bottom: 18px; } .rpt2-app .rpt2-dash { gap: 14px; } .rpt2-app .rpt2-dash__thread { height: clamp(520px, calc(100dvh - 132px), 660px); } .rpt2-app .rpt2-dash__composer-foot { gap: 8px; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__create-scroll { padding: 18px 14px 22px; gap: 20px; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__create-categories { gap: 12px; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__create-category { padding: 14px; column-gap: 10px; } .rpt2-app .rpt2-dash:has(.rpt2-dash__center[data-view="create"]) .rpt2-dash__side-create { gap: 14px; } } /* Ticket right rail spacing: the empty/detail panes are nested inside the rail, so they need their own stack gap in addition to the outer aside gap. */ .rpt2-app .rpt2-dash__side, .rpt2-app .rpt2-dash__side-empty, .rpt2-app .rpt2-dash__side-detail { gap: 18px; } .rpt2-app .rpt2-dash__side-empty { display: flex; flex-direction: column; min-width: 0; } .rpt2-app .rpt2-dash__side-detail { gap: 18px; } @media (max-width: 640px) { .rpt2-app .rpt2-dash__side, .rpt2-app .rpt2-dash__side-empty, .rpt2-app .rpt2-dash__side-detail { gap: 14px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .rpt2-app *, .rpt2-app *::before, .rpt2-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== Widget v2 - Section 1: Shell + Launcher Scope: #rpw2-root (floating footer injection, site-wide). Tokens are redeclared locally so the widget is self-contained and doesn't depend on .rpt2-app being on the page. Parallel to v1 #rpw-root; v1 remains default until the rp_tickets_ui_v2 flag flips. ========================================================================== */ #rpw2-root { --bg-0: #050E1B; --bg-1: #0A1428; --bg-2: #0E1A34; --bg-3: #14223E; --line-1: rgba(130, 175, 255, 0.08); --line-2: rgba(130, 175, 255, 0.14); --line-3: rgba(130, 175, 255, 0.22); --text-1: #E7ECFF; --text-2: #C5CEEA; --text-3: #8A95B8; --text-4: #5A6488; --accent: #3B82F6; --accent-strong: #2563EB; --accent-soft: rgba(59, 130, 246, 0.12); --accent-grad: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%); --danger: #FF5C7A; --online: #3CD596; --panel-w: 380px; --panel-h: 560px; --sh-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35); --sh-lg: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px rgba(3,6,25,0.6), 0 4px 14px rgba(0,0,0,0.35); --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', 'Geist', -apple-system, sans-serif; position: fixed; /* --rbp-bottom-nav-reserve is published by the header module on mobile; 0 elsewhere. */ bottom: calc(20px + var(--rbp-bottom-nav-reserve, 0px)); left: 20px; z-index: 9999999; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #rpw2-root, #rpw2-root * { box-sizing: border-box; } /* ---------- Launcher column (preview bubble stacked above the button) ---- */ .rpw2-launcher { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } #rpw2-root.is-open .rpw2-launcher { display: none; } /* Preview bubble - hidden by default; JS toggles .is-visible */ .rpw2-preview { position: relative; background: rgba(14, 26, 52, 0.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; max-width: 280px; font-size: 13px; color: var(--text-2); box-shadow: var(--sh-card); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .rpw2-preview.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .rpw2-preview__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rpw2-preview__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .rpw2-preview__name { font-size: 12px; font-weight: 600; color: var(--text-1); } .rpw2-preview__time { font-size: 11px; color: var(--text-4); } .rpw2-preview__dismiss { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border: none; background: transparent; color: var(--text-4); cursor: pointer; border-radius: 4px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .rpw2-preview__dismiss:hover { color: var(--text-2); background: rgba(255,255,255,0.06); } /* ---------- Floating launcher button ---------- */ .rpw2-btn-launch { position: relative; width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--accent-grad); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 8px 28px rgba(59, 130, 246, 0.55), 0 0 0 4px rgba(59, 130, 246, 0.12), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform 200ms ease, box-shadow 200ms ease; } .rpw2-btn-launch:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(59, 130, 246, 0.65), 0 0 0 4px rgba(59, 130, 246, 0.18), inset 0 1px 0 rgba(255,255,255,0.32); } .rpw2-btn-launch:active { transform: translateY(0); } .rpw2-btn-launch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45), 0 8px 28px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255,255,255,0.3); } /* Unread count badge on the launcher */ .rpw2-launcher__badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; display: none; align-items: center; justify-content: center; border: 2px solid var(--bg-0); line-height: 1; } .rpw2-launcher__badge.is-visible { display: inline-flex; } /* ---------- Panel shell (shared chrome for every view) ---------- */ .rpw2-panel { position: absolute; bottom: 76px; /* launcher height (60) + 16 gap */ left: 0; width: var(--panel-w); height: var(--panel-h); max-height: calc(100vh - 120px); background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; display: none; flex-direction: column; box-shadow: var(--sh-lg); opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: bottom left; transition: opacity 200ms ease, transform 200ms ease; } #rpw2-root.is-open .rpw2-panel { display: flex; opacity: 1; transform: translateY(0) scale(1); } /* Panel header (title, subtitle, back/external/close actions) */ .rpw2-panel__header { padding: 14px 16px; border-bottom: 1px solid var(--line-1); background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), transparent); display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .rpw2-panel__title { flex: 1; min-width: 0; } .rpw2-panel__title-main { font-size: 14px; font-weight: 600; color: var(--text-1); font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rpw2-panel__title-sub { font-size: 11px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; } .rpw2-panel__title-sub::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px rgba(60, 213, 150, 0.55); } /* Header icon buttons (back, external, close) */ .rpw2-icon-btn { width: 28px; height: 28px; border: none; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background 140ms ease, color 140ms ease; } .rpw2-icon-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-1); } .rpw2-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rpw2-icon-btn--back { background: rgba(255,255,255,0.05); color: var(--text-2); } .rpw2-icon-btn--back:hover { background: rgba(255,255,255,0.09); } /* Body container - view templates (access, inbox, chat, form) mount here */ .rpw2-panel__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Footer link band ("Open full support page ->") */ .rpw2-panel__footer { padding: 12px; border-top: 1px solid var(--line-1); text-align: center; font-size: 12px; flex-shrink: 0; } .rpw2-panel__footer a { color: var(--accent); font-weight: 500; text-decoration: none; cursor: pointer; } .rpw2-panel__footer a:hover { text-decoration: underline; } /* ========================================================================== Widget v2 - Section 2: Access panel (email + OTP code states) Mounted inside .rpw2-panel__body. Two views, .rpw2-access (email entry) and .rpw2-otp (6-digit code entry), swapped by JS via a .is-hidden class. Uses compact sizing tuned to the 380px panel; the support-page guest card patterns in .rpt2-* remain untouched. ========================================================================== */ .rpw2-access { padding: 26px 22px; flex: 1; display: flex; flex-direction: column; overflow-y: auto; } .rpw2-access.is-hidden, .rpw2-otp.is-hidden { display: none; } /* Top hero: icon badge + headline + subtitle */ .rpw2-access__hero { text-align: center; margin-bottom: 22px; } .rpw2-access__icon { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(180deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.04)); border: 1px solid rgba(59, 130, 246, 0.3); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 14px; } .rpw2-access__title { font-size: 19px; font-weight: 600; color: var(--text-1); font-family: var(--font-display); margin-bottom: 4px; } .rpw2-access__sub { font-size: 13px; color: var(--text-3); line-height: 1.45; } /* Email input with leading mail icon */ .rpw2-input-wrap { position: relative; margin-bottom: 10px; } .rpw2-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-4); display: inline-flex; pointer-events: none; } .rpw2-input { width: 100%; padding: 12px 14px 12px 40px; background: rgba(5, 14, 27, 0.6); border: 1px solid var(--line-2); border-radius: 10px; color: var(--text-1); font-family: inherit; font-size: 14px; line-height: 1.4; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .rpw2-input::placeholder { color: var(--text-4); } .rpw2-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22); background: rgba(5, 14, 27, 0.9); } .rpw2-input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 92, 122, 0.20); } .rpw2-field-error { font-size: 11px; color: var(--danger); margin: -4px 0 10px; } /* Primary + ghost buttons */ .rpw2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .rpw2-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rpw2-btn:disabled, .rpw2-btn[disabled], .rpw2-btn.is-loading { opacity: 0.65; cursor: not-allowed; transform: none; } .rpw2-btn--primary { background: var(--accent-grad); color: #fff; padding: 13px 16px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(59, 130, 246, 0.32), inset 0 1px 0 rgba(255,255,255,0.22); } .rpw2-btn--primary:hover:not(:disabled):not(.is-loading) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(59, 130, 246, 0.42), inset 0 1px 0 rgba(255,255,255,0.26); } .rpw2-btn--ghost { background: rgba(255,255,255,0.03); border-color: var(--line-2); color: var(--text-2); } .rpw2-btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--line-3); color: var(--text-1); } .rpw2-btn--full { width: 100%; justify-content: center; } .rpw2-btn--align-start { justify-content: flex-start; } /* Inline spinner for the Continue -> Verifying... flip */ .rpw2-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: rpw2-spin 700ms linear infinite; flex-shrink: 0; } @keyframes rpw2-spin { to { transform: rotate(360deg); } } /* OR divider between primary CTA and secondary CTAs */ .rpw2-access__divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; } .rpw2-access__divider::before, .rpw2-access__divider::after { content: ''; flex: 1; height: 1px; background: var(--line-2); } .rpw2-access__divider span { font-size: 10px; color: var(--text-4); letter-spacing: 0.08em; } /* Secondary CTA stack (Discord, FAQ) */ .rpw2-access__ctas { display: flex; flex-direction: column; gap: 8px; } .rpw2-cta-discord-icon { color: #7983F5; } .rpw2-cta-faq-icon { color: var(--text-3); } /* Encryption footer - pushed to bottom of access view */ .rpw2-access__encryption { margin-top: auto; padding-top: 14px; font-size: 11px; color: var(--text-4); display: inline-flex; align-items: center; gap: 5px; justify-content: center; } /* ---------- OTP (code) view ---------- */ .rpw2-otp { padding: 22px; flex: 1; display: flex; flex-direction: column; overflow-y: auto; } .rpw2-otp__back { background: none; border: none; color: var(--text-3); font-size: 12px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-family: inherit; align-self: flex-start; } .rpw2-otp__back:hover { color: var(--text-1); } .rpw2-otp__title { font-size: 17px; font-weight: 600; color: var(--text-1); font-family: var(--font-display); margin-bottom: 6px; } .rpw2-otp__sub { font-size: 12px; color: var(--text-3); margin-bottom: 20px; line-height: 1.5; } .rpw2-otp__email { color: var(--accent); font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; word-break: break-all; } /* 6-digit OTP cell row - compact sizing for the 380px panel */ .rpw2-otp__row { display: flex; gap: 8px; margin-bottom: 14px; justify-content: space-between; } .rpw2-otp__cell { flex: 1; min-width: 0; height: 48px; text-align: center; font-size: 20px; font-weight: 600; padding: 0; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; background: rgba(5, 14, 27, 0.6); color: var(--text-1); border: 1px solid var(--line-2); border-radius: 10px; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .rpw2-otp__cell:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22); background: rgba(5, 14, 27, 0.9); } .rpw2-otp__cell.is-filled { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .rpw2-otp__cell.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 92, 122, 0.20); } .rpw2-otp__error { font-size: 11px; color: var(--danger); text-align: center; margin-bottom: 10px; } .rpw2-otp__resend { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 14px; } .rpw2-otp__resend-btn { background: none; border: none; padding: 0; color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; } .rpw2-otp__resend-btn:hover { text-decoration: underline; } .rpw2-otp__resend-btn:disabled, .rpw2-otp__resend-btn[disabled] { color: var(--text-4); cursor: not-allowed; text-decoration: none; } .rpw2-otp__resend-countdown { color: var(--text-4); font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; } /* ========================================================================== Widget v2 - Section 3: Mini inbox (ticket list) Mounted inside .rpw2-panel__body. Tab bar on top (All / Active / Closed + "new ticket" button), scrolling list below. Status pills cover the full state machine: open | in_progress | waiting_customer | resolved | closed. Row interactions live here; mini chat markup is separate (Section 4). ========================================================================== */ .rpw2-inbox { flex: 1; min-height: 0; display: flex; flex-direction: column; } .rpw2-inbox.is-hidden { display: none; } /* ---------- Tab bar (All / Active / Closed + new-ticket button) ---------- */ .rpw2-inbox__tabs { padding: 10px 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-1); flex-shrink: 0; } .rpw2-inbox__tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; border: 1px solid transparent; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--text-3); cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .rpw2-inbox__tab:hover { background: rgba(255,255,255,0.04); color: var(--text-2); } .rpw2-inbox__tab.is-active { background: var(--accent-soft); color: var(--accent); border-color: rgba(59, 130, 246, 0.28); } .rpw2-inbox__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rpw2-inbox__tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; background: rgba(255,255,255,0.05); border-radius: 999px; font-size: 10px; font-weight: 600; color: inherit; line-height: 1; } .rpw2-inbox__tab.is-active .rpw2-inbox__tab-count { background: rgba(59, 130, 246, 0.22); } .rpw2-inbox__new-btn { margin-left: auto; width: 30px; height: 30px; border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .rpw2-inbox__new-btn:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.55); } .rpw2-inbox__new-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Scrolling list ---------- */ .rpw2-inbox__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* Thin custom scrollbar - cosmetic only, falls back to UA default */ .rpw2-inbox__list::-webkit-scrollbar { width: 6px; } .rpw2-inbox__list::-webkit-scrollbar-track { background: transparent; } .rpw2-inbox__list::-webkit-scrollbar-thumb { background: rgba(130, 175, 255, 0.14); border-radius: 3px; } .rpw2-inbox__list::-webkit-scrollbar-thumb:hover { background: rgba(130, 175, 255, 0.22); } /* ---------- Ticket row ---------- */ .rpw2-ticket-row { display: block; width: 100%; padding: 12px 16px; background: transparent; border: none; border-bottom: 1px solid var(--line-1); border-left: 2px solid transparent; text-align: left; cursor: pointer; font-family: inherit; color: inherit; transition: background 140ms ease, border-left-color 140ms ease; } .rpw2-ticket-row:hover { background: rgba(255,255,255,0.025); } .rpw2-ticket-row:focus-visible { outline: none; background: rgba(59, 130, 246, 0.06); border-left-color: var(--accent); } .rpw2-ticket-row.is-unread { background: rgba(59, 130, 246, 0.04); } .rpw2-ticket-row.is-unread:hover { background: rgba(59, 130, 246, 0.07); } .rpw2-ticket-row__head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .rpw2-ticket-row__unread { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; } .rpw2-ticket-row__subj { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rpw2-ticket-row__meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-4); min-width: 0; } .rpw2-ticket-row__id { color: var(--accent); font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; flex-shrink: 0; } .rpw2-ticket-row__sep { flex-shrink: 0; } .rpw2-ticket-row__cat, .rpw2-ticket-row__age { flex-shrink: 0; white-space: nowrap; } .rpw2-ticket-row__last { margin-left: auto; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-4); font-weight: 400; max-width: 50%; } .rpw2-ticket-row.is-unread .rpw2-ticket-row__last { color: var(--accent); font-weight: 500; } /* ---------- Status pills (shared with future views) ---------- */ .rpw2-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; flex-shrink: 0; line-height: 1; } .rpw2-pill--open { background: var(--accent-soft); color: var(--accent); border-color: rgba(59, 130, 246, 0.3); } .rpw2-pill--progress { background: rgba(245, 181, 68, 0.12); color: #F5B544; border-color: rgba(245, 181, 68, 0.3); } .rpw2-pill--waiting { background: rgba(107, 142, 245, 0.14); color: #6B8EF5; border-color: rgba(107, 142, 245, 0.3); } .rpw2-pill--resolved { background: rgba(60, 213, 150, 0.12); color: var(--online); border-color: rgba(60, 213, 150, 0.3); } .rpw2-pill--closed { background: rgba(255,255,255,0.04); color: var(--text-3); border-color: var(--line-2); } /* ---------- Empty state (no tickets in this tab) ---------- */ .rpw2-inbox__empty { padding: 40px 24px; text-align: center; color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: 10px; margin: auto; } .rpw2-inbox__empty-icon { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(180deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.03)); border: 1px solid rgba(59, 130, 246, 0.22); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .rpw2-inbox__empty-title { font-size: 14px; font-weight: 600; color: var(--text-2); font-family: var(--font-display); } .rpw2-inbox__empty-sub { font-size: 12px; color: var(--text-4); line-height: 1.5; max-width: 240px; } /* ========================================================================== Widget v2 - Section 4: Mini chat (ticket conversation) Presentation layer only. No polling / AJAX / long-poll logic. Mounted inside .rpw2-panel__body. Three bubble roles (customer / ai / staff) plus reusable sub-components: day divider, typing indicator, inline order card, attachment card, composer. Internal notes are staff-only and do NOT render in this customer-facing widget - no markup for them here by design. ========================================================================== */ .rpw2-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; } .rpw2-chat.is-hidden { display: none; } /* ---------- Message scroll column ---------- */ .rpw2-chat__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .rpw2-chat__scroll::-webkit-scrollbar { width: 6px; } .rpw2-chat__scroll::-webkit-scrollbar-track { background: transparent; } .rpw2-chat__scroll::-webkit-scrollbar-thumb { background: rgba(130, 175, 255, 0.14); border-radius: 3px; } .rpw2-chat__scroll::-webkit-scrollbar-thumb:hover { background: rgba(130, 175, 255, 0.22); } /* ---------- Day divider ("Today · 8:19 PM") ---------- */ .rpw2-chat__day { align-self: center; font-size: 10px; color: var(--text-4); letter-spacing: 0.1em; text-transform: uppercase; } .rpw2-chat__day span { padding: 3px 10px; background: var(--bg-2); border-radius: 999px; } /* ---------- Message group wrapper ---------- One group per participant turn. Alignment is driven by --customer/--staff/--ai modifiers so JS can just add a class and not worry about styles. */ .rpw2-msg { display: flex; flex-direction: column; gap: 5px; max-width: 85%; } .rpw2-msg--customer { align-self: flex-end; align-items: flex-end; max-width: 85%; } .rpw2-msg--ai, .rpw2-msg--staff { align-self: flex-start; align-items: flex-start; } /* ---------- Participant header (avatar + name + role pill) ---------- */ .rpw2-msg__head { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); } .rpw2-msg__avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; flex-shrink: 0; background: var(--accent-grad); } .rpw2-msg__avatar--staff { background: var(--online); color: #05140C; } .rpw2-msg__avatar--ai { background: linear-gradient(180deg, #8BA6F6 0%, #6B8EF5 100%); } .rpw2-msg__name { font-size: 11px; font-weight: 600; color: var(--text-1); } .rpw2-msg__time { font-size: 10px; color: var(--text-4); margin-left: auto; padding-left: 6px; } /* Role pills - the STAFF / AI markers shown next to the name */ .rpw2-role-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; border: 1px solid transparent; line-height: 1; flex-shrink: 0; } .rpw2-role-pill--ai { background: rgba(107, 142, 245, 0.14); color: #8BA6F6; border-color: rgba(107, 142, 245, 0.3); } .rpw2-role-pill--staff { background: rgba(60, 213, 150, 0.12); color: var(--online); border-color: rgba(60, 213, 150, 0.3); } /* ---------- Bubble ---------- */ .rpw2-bubble { padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; border: 1px solid transparent; } .rpw2-bubble strong { color: var(--accent); font-weight: 600; } .rpw2-bubble--customer { background: var(--accent-grad); color: #fff; border-bottom-right-radius: 4px; } .rpw2-bubble--customer strong { color: #fff; text-decoration: underline; } .rpw2-bubble--ai { background: rgba(107, 142, 245, 0.10); color: var(--text-1); border-color: rgba(107, 142, 245, 0.22); border-bottom-left-radius: 4px; } .rpw2-bubble--staff { background: var(--bg-2); color: var(--text-1); border-color: var(--line-2); border-bottom-left-radius: 4px; } /* Delivery meta under customer bubble (single/double check + time) */ .rpw2-msg__meta { font-size: 10px; color: var(--text-4); display: inline-flex; align-items: center; gap: 4px; } .rpw2-msg__meta--sent { color: var(--text-4); } .rpw2-msg__meta--delivered { color: var(--text-3); } .rpw2-msg__meta--read { color: var(--accent); } .rpw2-msg__meta-icon { display: inline-flex; } /* ---------- Typing indicator (AI or staff) ---------- */ .rpw2-typing { display: inline-flex; align-items: center; gap: 4px; padding: 14px 18px; border-radius: 14px; border-bottom-left-radius: 4px; border: 1px solid var(--line-2); background: var(--bg-2); } .rpw2-typing--ai { background: rgba(107, 142, 245, 0.10); border-color: rgba(107, 142, 245, 0.22); } .rpw2-typing__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: rpw2-bounce 1.2s ease-in-out infinite; } .rpw2-typing__dot:nth-child(2) { animation-delay: 0.15s; } .rpw2-typing__dot:nth-child(3) { animation-delay: 0.30s; } @keyframes rpw2-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } } /* ---------- Inline order card (embedded in AI / staff bubble group) ---- */ .rpw2-order-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color 140ms ease, background 140ms ease; cursor: pointer; width: 100%; max-width: 280px; } .rpw2-order-card:hover { background: var(--bg-3); border-color: var(--line-3); } .rpw2-order-card__icon { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .rpw2-order-card__body { flex: 1; min-width: 0; } .rpw2-order-card__title { font-size: 12px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rpw2-order-card__status { font-size: 11px; color: var(--online); margin-top: 1px; } .rpw2-order-card__status--pending { color: #F5B544; } .rpw2-order-card__chevron { color: var(--text-4); flex-shrink: 0; } /* ---------- Attachment card (image / file) ---------- */ .rpw2-attach { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; text-decoration: none; color: inherit; width: 220px; max-width: 100%; transition: border-color 140ms ease, background 140ms ease; } .rpw2-attach:hover { background: var(--bg-3); border-color: var(--line-3); } .rpw2-attach__icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(59, 130, 246, 0.10); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .rpw2-attach__body { flex: 1; min-width: 0; } .rpw2-attach__name { font-size: 12px; font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rpw2-attach__size { font-size: 11px; color: var(--text-4); margin-top: 1px; } .rpw2-attach__action { color: var(--text-3); flex-shrink: 0; } /* ---------- Composer ---------- */ .rpw2-composer { padding: 12px; border-top: 1px solid var(--line-1); flex-shrink: 0; } .rpw2-composer__shell { position: relative; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 46px 10px 12px; display: flex; align-items: center; gap: 8px; transition: border-color 140ms ease, box-shadow 140ms ease; } .rpw2-composer__shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .rpw2-composer__attach { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; transition: color 140ms ease, background 140ms ease; } .rpw2-composer__attach:hover { color: var(--text-1); background: rgba(255,255,255,0.05); } .rpw2-composer__input { flex: 1; min-width: 0; background: none; border: none; color: var(--text-1); outline: none; font-size: 13px; font-family: var(--font-sans); line-height: 1.4; resize: none; max-height: 96px; padding: 0; } .rpw2-composer__input::placeholder { color: var(--text-4); } .rpw2-composer__send { position: absolute; right: 6px; top: 6px; bottom: 6px; width: 34px; border: none; border-radius: 8px; background: var(--accent-grad); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease; } .rpw2-composer__send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.55); } .rpw2-composer__send:disabled, .rpw2-composer__send[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .rpw2-composer__send:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } /* ========================================================================== Widget v2 - Section 11: Pointer-events hygiene + Mobile bottom sheet -------------------------------------------------------------------------- Pointer-events: the root container reserves a column for the (always present) preview bubble above the launcher button. With pointer-events: auto, that column was eating clicks even though the bubble itself was visually hidden. Make the root pass-through and only the visible launcher button + the open panel claim pointer events. Mobile (<= 640px): the panel becomes a true bottom sheet that slides up from the bottom edge and fills ~85svh, with a backdrop scrim that closes the sheet on tap (handled by the JS click-outside guard). ========================================================================== */ /* Defensive: root is non-interactive, only opt-in children claim clicks. */ #rpw2-root { pointer-events: none; } #rpw2-root .rpw2-btn-launch, #rpw2-root .rpw2-preview.is-visible, #rpw2-root.is-open .rpw2-panel { pointer-events: auto; } /* Stacking inside the widget: launcher above scrim, panel above launcher. */ .rpw2-launcher { position: relative; z-index: 2; } .rpw2-panel { z-index: 3; } @media (max-width: 1023px) { /* Z-index hygiene with the header's mobile chrome. Header (header.css): .rbp-mobile-bottom z-index: 105 .rbp-main z-index: 100 .rbp-mobile-overlay z-index: 120 .rbp-mobile-drawer z-index: 121 .rbp-mobile-search z-index: 122 Widget needs to stay ABOVE the bottom nav (so the open bottom sheet covers it) but BELOW the drawer/overlay/search so the burger menu can sit on top of the widget instead of the widget peeking through. 9999999 from the desktop block is overridden here. */ #rpw2-root { z-index: 110; } } @media (max-width: 640px) { /* Tighten the root anchor; the preview bubble has no room above a bottom-sheet panel, so hide it on mobile to keep the launcher tidy. */ #rpw2-root { bottom: calc(16px + var(--rbp-bottom-nav-reserve, 0px)); left: 16px; right: auto; } .rpw2-preview { display: none; } .rpw2-btn-launch { width: 56px; height: 56px; } /* Backdrop scrim. Click-through is handled by the JS document click handler in tickets-widget-v2.js (the patch that goes with this CSS stops checking $root.contains() and tests the panel/launcher specifically, so clicks on the scrim now close). */ #rpw2-root::before { content: ''; position: fixed; inset: 0; background: rgba(2, 6, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 220ms ease; z-index: 1; } #rpw2-root.is-open::before { opacity: 1; pointer-events: auto; } /* Panel = bottom sheet. Override the desktop display:none closed state with a transform-driven hide so the slide-up actually animates. */ .rpw2-panel { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; height: 85svh; max-height: 85svh; border-radius: 22px 22px 0 0; transform: translateY(102%); transform-origin: bottom center; display: flex !important; /* override desktop `display: none` */ visibility: hidden; opacity: 1; pointer-events: none; transition: transform 320ms cubic-bezier(0.22, 0.85, 0.25, 1), visibility 0s linear 320ms; box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.45); } #rpw2-root.is-open .rpw2-panel { visibility: visible; transform: translateY(0); pointer-events: auto; transition: transform 320ms cubic-bezier(0.22, 0.85, 0.25, 1), visibility 0s linear 0s; } /* Drag-handle pill at the top edge - signals the sheet is dismissible. */ .rpw2-panel::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); transform: translateX(-50%); pointer-events: none; z-index: 2; } .rpw2-panel__header { padding-top: 22px; } /* Collapse the launcher while the sheet is open so it doesn't peek above the bottom-sheet edge. */ #rpw2-root.is-open .rpw2-launcher { opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms ease; } /* JS toggles `body.rpw2-mobile-locked` while the sheet is open, so the page behind the scrim doesn't scroll under the user's finger. */ body.rpw2-mobile-locked { overflow: hidden; overscroll-behavior: contain; touch-action: none; } } @media (prefers-reduced-motion: reduce) { #rpw2-root::before, #rpw2-root .rpw2-panel, #rpw2-root.is-open .rpw2-launcher { transition: none !important; } } /* ========================================================================== Stage 6 polish - cohesive RobloxPets visual system ------------------------------------------------------------------------ Brings the Support v2 surface in line with newer overhauled pages (how-to-claim, weekly-giveaway, login revamped). All overrides remain scoped under .rpt2-app so the floating widget (.rpw2-*), the v1 customer page (.rpt-*), and the host theme stay untouched. No markup changes are required - selectors target existing classes exclusively so JS hooks, data-* attrs, and feature flags are unaffected. Visual tokens (panel/glass treatment) align to the page palette already declared in :root tokens (--bg-0 / --line-* / --accent / etc.) - we don't introduce a parallel color system, only tighten how those tokens compose into the dashboard surfaces. ========================================================================== */ /* ---------- Background: deepen the page bed, blue-only glow ---------- */ body.rpt2-body { background: radial-gradient(900px 540px at 60% 5%, rgba(67, 136, 255, 0.18), transparent 64%), radial-gradient(620px 420px at 8% 32%, rgba(84, 214, 255, 0.07), transparent 70%), radial-gradient(560px 460px at 100% 75%, rgba(67, 136, 255, 0.09), transparent 70%), #050e1b; } .rpt2-app.rp-bg::before { background: radial-gradient(900px 540px at 60% 5%, rgba(67, 136, 255, 0.18), transparent 62%), radial-gradient(620px 420px at 8% 32%, rgba(84, 214, 255, 0.07), transparent 70%), radial-gradient(560px 460px at 100% 75%, rgba(67, 136, 255, 0.09), transparent 70%); } .rpt2-app.rp-bg::after { background-image: linear-gradient(rgba(120, 160, 255, 0.034) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 160, 255, 0.034) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 35%, #000 22%, transparent 80%); mask-image: radial-gradient(ellipse 80% 75% at 50% 35%, #000 22%, transparent 80%); } /* ---------- Subheader - eyebrow + gradient accent on the title ------- */ .rpt2-app .rpt2-subheader { align-items: flex-end; padding: 28px 0 18px; gap: 16px; } .rpt2-app .rpt2-subheader__lead { flex-direction: column; align-items: flex-start; gap: 6px; } .rpt2-app .rpt2-subheader__title { font-family: var(--font-display, 'Space Grotesk', 'Geist', sans-serif); font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; margin: 0; background: linear-gradient(180deg, #ffffff 0%, #c5d3f0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .rpt2-app .rpt2-subheader__status { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--success); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(60, 213, 150, 0.28); background: rgba(60, 213, 150, 0.08); } .rpt2-app .rpt2-subheader__actions { gap: 10px; } /* ---------- Shared premium glass panel for dashboard cards ----------- Single source of truth: every dashboard card (sidebar, list, side cards, thread, create form) carries the same glass treatment so the page reads as one design system instead of mismatched modules. ------------------------------------------------------------------- */ .rpt2-app .rpt2-dash__sidebar, .rpt2-app .rpt2-dash__list, .rpt2-app .rpt2-dash__thread, .rpt2-app .rpt2-dash__create, .rpt2-app .rpt2-dash__select, .rpt2-app .rpt2-dash__team, .rpt2-app .rpt2-dash__priority, .rpt2-app .rpt2-dash__info, .rpt2-app .rpt2-dash__order, .rpt2-app .rpt2-dash__delivery, .rpt2-app .rpt2-dash__create-tips, .rpt2-app .rpt2-dash__create-eta { border: 1px solid rgba(123, 166, 255, 0.18); border-radius: 20px; background: radial-gradient(circle at 18% -10%, rgba(84, 214, 255, 0.07), transparent 48%), radial-gradient(circle at 100% 0%, rgba(67, 136, 255, 0.10), transparent 50%), linear-gradient(180deg, rgba(17, 29, 55, 0.84), rgba(8, 13, 27, 0.78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 38px rgba(0, 0, 0, 0.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ---------- Left sidebar - tighter, premium nav -------------------- */ .rpt2-app .rpt2-dash__sidebar { padding: 14px 12px 16px; display: flex; flex-direction: column; } .rpt2-app .rpt2-dash__nav-item { position: relative; gap: 11px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-2); border: 1px solid transparent; border-radius: 11px; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .rpt2-app .rpt2-dash__nav-item:hover { background: rgba(123, 166, 255, 0.06); border-color: rgba(123, 166, 255, 0.10); color: var(--text-1); } .rpt2-app .rpt2-dash__nav-item.is-active { background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.05)); border-color: rgba(59, 130, 246, 0.32); color: #cfe0ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .rpt2-app .rpt2-dash__nav-item.is-active::before { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 999px; background: linear-gradient(180deg, #60A5FA, #3B82F6); box-shadow: 0 0 12px rgba(59, 130, 246, 0.65); } .rpt2-app .rpt2-dash__nav-icon { width: 18px; height: 18px; color: var(--text-3); transition: color 160ms ease; } .rpt2-app .rpt2-dash__nav-item:hover .rpt2-dash__nav-icon, .rpt2-app .rpt2-dash__nav-item.is-active .rpt2-dash__nav-icon { color: var(--accent); } .rpt2-app .rpt2-dash__nav-heading { padding: 22px 12px 6px; font-size: 9.5px; color: var(--text-4); letter-spacing: 0.16em; } /* Discord rail - subtle indigo gradient, no neon */ .rpt2-app .rpt2-dash__rail-discord { margin: 14px 2px 2px; padding: 14px; border-radius: 14px; border-color: rgba(110, 124, 240, 0.22); background: radial-gradient(circle at 80% 0%, rgba(110, 124, 240, 0.18), transparent 60%), linear-gradient(180deg, rgba(20, 26, 60, 0.55), rgba(10, 14, 32, 0.55)); } .rpt2-app .rpt2-dash__rail-discord-cta { background: rgba(110, 124, 240, 0.10); border: 1px solid rgba(110, 124, 240, 0.32); color: #c7cdff; } .rpt2-app .rpt2-dash__rail-discord-cta:hover { background: rgba(110, 124, 240, 0.18); border-color: rgba(110, 124, 240, 0.55); color: #ffffff; } /* ---------- Centre ticket list - cleaner head, premium tabs --------- */ .rpt2-app .rpt2-dash__list-head { padding: 18px 22px 14px; border-bottom: 1px solid rgba(123, 166, 255, 0.10); gap: 14px; } .rpt2-app .rpt2-dash__list-title { font-family: var(--font-display, 'Space Grotesk', 'Geist', sans-serif); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; } .rpt2-app .rpt2-dash__list-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; } /* Filter / sort: pill ghost language */ .rpt2-app .rpt2-dash__tool-btn { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(123, 166, 255, 0.18); background: rgba(15, 25, 47, 0.55); color: var(--text-2); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; } .rpt2-app .rpt2-dash__tool-btn:hover { border-color: rgba(84, 214, 255, 0.34); background: rgba(20, 34, 64, 0.7); color: #ffffff; } /* Tabs */ .rpt2-app .rpt2-dash__tabs { gap: 7px; } .rpt2-app .rpt2-dash__tab { padding: 6px 13px; border: 1px solid rgba(123, 166, 255, 0.16); border-radius: 999px; background: rgba(15, 25, 47, 0.45); color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; } .rpt2-app .rpt2-dash__tab:hover { color: var(--text-1); border-color: rgba(123, 166, 255, 0.32); background: rgba(20, 34, 64, 0.6); } .rpt2-app .rpt2-dash__tab.is-active { color: #cfe0ff; border-color: rgba(59, 130, 246, 0.55); background: linear-gradient(180deg, rgba(59, 130, 246, 0.20), rgba(59, 130, 246, 0.06)); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18), 0 4px 14px rgba(59, 130, 246, 0.16); } /* Search */ .rpt2-app .rpt2-dash__search-input { padding: 11px 14px 11px 40px; border-radius: 12px; background: rgba(5, 14, 27, 0.6); border: 1px solid rgba(123, 166, 255, 0.14); } .rpt2-app .rpt2-dash__search-input:focus { border-color: rgba(84, 214, 255, 0.55); box-shadow: 0 0 0 3px rgba(84, 214, 255, 0.16); } /* ---------- Ticket rows - depth, hover lift, active ring ----------- */ .rpt2-app .rpt2-dash__list-body { padding: 6px 8px; } .rpt2-app .rpt2-dash__rows { display: flex; flex-direction: column; gap: 6px; } .rpt2-app .rpt2-dash__row { padding: 13px 14px; gap: 12px; border: 1px solid transparent; border-bottom: 1px solid transparent; border-radius: 13px; background: transparent; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .rpt2-app .rpt2-dash__row:hover { background: rgba(123, 166, 255, 0.05); border-color: rgba(123, 166, 255, 0.14); } .rpt2-app .rpt2-dash__row.is-new { background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02)); border-color: rgba(59, 130, 246, 0.22); } .rpt2-app .rpt2-dash__row.is-active { background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.04)); border-color: rgba(59, 130, 246, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(59, 130, 246, 0.14); } .rpt2-app .rpt2-dash__row-id { font-family: var(--font-mono, ui-monospace, monospace); color: #8db9ff; font-size: 11px; letter-spacing: 0.02em; } .rpt2-app .rpt2-dash__row-subject { font-size: 14px; font-weight: 650; color: #ffffff; margin-bottom: 4px; } .rpt2-app .rpt2-dash__row-pill { padding: 2px 9px; font-size: 10px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase; } .rpt2-app .rpt2-dash__row-new { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18), 0 0 12px rgba(59, 130, 246, 0.65); } /* Empty state - bigger glow on the inbox icon */ .rpt2-app .rpt2-dash__list-empty { padding: 56px 32px 48px; gap: 12px; } .rpt2-app .rpt2-dash__list-empty-icon { width: 64px; height: 64px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.32), transparent 70%), linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.04)); border: 1px solid rgba(59, 130, 246, 0.32); color: #8db9ff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.18); } .rpt2-app .rpt2-dash__list-empty-title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 16px; font-weight: 700; color: #ffffff; } .rpt2-app .rpt2-dash__list-empty-body { font-size: 13px; color: var(--text-3); max-width: 340px; line-height: 1.55; } /* ---------- Right rail cards - share the glass treatment ---------- */ .rpt2-app .rpt2-dash__side { gap: 14px; } /* Select-a-ticket card */ .rpt2-app .rpt2-dash__select { padding: 22px; } .rpt2-app .rpt2-dash__select-icon { width: 60px; height: 60px; margin: 4px auto 14px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.30), transparent 65%), linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.04)); border: 1px solid rgba(59, 130, 246, 0.32); color: #8db9ff; } .rpt2-app .rpt2-dash__select-title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 15px; font-weight: 700; color: #ffffff; margin-bottom: 6px; } .rpt2-app .rpt2-dash__select-body { font-size: 12.5px; color: var(--text-3); } .rpt2-app .rpt2-dash__select-list-item { padding: 9px 11px; border-radius: 11px; border: 1px solid rgba(123, 166, 255, 0.12); background: rgba(5, 14, 27, 0.42); font-size: 12px; color: var(--text-2); } .rpt2-app .rpt2-dash__select-list-item svg { color: #8db9ff; } /* Support team card */ .rpt2-app .rpt2-dash__team { padding: 16px 18px; } .rpt2-app .rpt2-dash__team-head { margin-bottom: 14px; } .rpt2-app .rpt2-dash__team-title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 13px; font-weight: 700; color: #ffffff; letter-spacing: 0; } .rpt2-app .rpt2-dash__team-online { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(60, 213, 150, 0.28); background: rgba(60, 213, 150, 0.08); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; } .rpt2-app .rpt2-dash__team-list { gap: 10px; } .rpt2-app .rpt2-dash__team-member { padding: 8px 10px; border-radius: 11px; background: rgba(5, 14, 27, 0.36); border: 1px solid rgba(123, 166, 255, 0.10); } .rpt2-app .rpt2-dash__team-avatar { width: 30px; height: 30px; font-size: 11px; background: linear-gradient(135deg, #3B82F6, #60A5FA); color: #ffffff; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.28); } .rpt2-app .rpt2-dash__team-avatar--ai { background: linear-gradient(135deg, #6B8EF5, #8da7ff); box-shadow: 0 4px 10px rgba(107, 142, 245, 0.28); } .rpt2-app .rpt2-dash__team-name { font-size: 12.5px; font-weight: 650; color: #ffffff; } .rpt2-app .rpt2-dash__team-badge { background: rgba(107, 142, 245, 0.18); color: #aab7ff; border-radius: 5px; } .rpt2-app .rpt2-dash__team-role { font-size: 10.5px; color: var(--text-4); margin-top: 1px; } .rpt2-app .rpt2-dash__team-status--online::before { box-shadow: 0 0 6px rgba(60, 213, 150, 0.7); } .rpt2-app .rpt2-dash__team-status--away::before { box-shadow: 0 0 6px rgba(245, 181, 68, 0.7); } /* ---------- Priority card - toned-down pink/red, integrated ------- */ .rpt2-app .rpt2-dash__priority { padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255, 122, 147, 0.22); background: radial-gradient(circle at 80% -20%, rgba(255, 122, 147, 0.12), transparent 60%), linear-gradient(180deg, rgba(48, 24, 38, 0.50), rgba(8, 13, 27, 0.74)); } .rpt2-app .rpt2-dash__priority.is-available { border-color: rgba(255, 122, 147, 0.32); background: radial-gradient(circle at 80% -20%, rgba(255, 122, 147, 0.20), transparent 60%), linear-gradient(180deg, rgba(60, 22, 38, 0.55), rgba(8, 13, 27, 0.74)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 38px rgba(0, 0, 0, 0.36), 0 0 36px rgba(255, 92, 122, 0.12); } .rpt2-app .rpt2-dash__priority.is-cooldown { /* Cooldown / guest-locked feels like part of the page, not an alert. */ border-color: rgba(123, 166, 255, 0.18); background: radial-gradient(circle at 80% -20%, rgba(67, 136, 255, 0.10), transparent 60%), linear-gradient(180deg, rgba(17, 29, 55, 0.78), rgba(8, 13, 27, 0.78)); } .rpt2-app .rpt2-dash__priority-head { gap: 12px; margin-bottom: 12px; } .rpt2-app .rpt2-dash__priority-icon { width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 122, 147, 0.16); border: 1px solid rgba(255, 122, 147, 0.28); color: #ff8a9f; } .rpt2-app .rpt2-dash__priority.is-cooldown .rpt2-dash__priority-icon { background: rgba(67, 136, 255, 0.12); border-color: rgba(67, 136, 255, 0.28); color: #8db9ff; } .rpt2-app .rpt2-dash__priority-title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 13.5px; font-weight: 700; color: #ffffff; letter-spacing: 0; } .rpt2-app .rpt2-dash__priority-sub { font-size: 11px; color: var(--text-3); } .rpt2-app .rpt2-dash__priority-cta { border-radius: 12px; padding: 10px 16px; font-size: 12.5px; font-weight: 700; background: linear-gradient(135deg, #ff5c7a 0%, #ff7a93 100%); border: 1px solid rgba(255, 122, 147, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px rgba(255, 92, 122, 0.32); } .rpt2-app .rpt2-dash__priority.is-cooldown .rpt2-dash__priority-cta, .rpt2-app .rpt2-dash__priority-cta:disabled, .rpt2-app .rpt2-dash__priority-cta[disabled] { background: rgba(123, 166, 255, 0.08); border-color: rgba(123, 166, 255, 0.18); color: var(--text-4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); cursor: not-allowed; filter: none; transform: none; } .rpt2-app .rpt2-dash__priority-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(123, 166, 255, 0.10); font-size: 11px; color: var(--text-3); } /* ---------- New Ticket: cleaner submit + category cards ----------- */ .rpt2-app .rpt2-dash__create-scroll { padding: 24px 28px 28px; gap: 22px; } .rpt2-app .rpt2-dash__create-eyebrow { color: #54d6ff; font-size: 11px; letter-spacing: 0.16em; font-weight: 800; } .rpt2-app .rpt2-dash__create-title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.015em; color: #ffffff; } .rpt2-app .rpt2-dash__create-sub { font-size: 13px; color: var(--text-3); } .rpt2-app .rpt2-dash__create-section-title { font-size: 12.5px; font-weight: 700; color: var(--text-2); letter-spacing: 0.01em; } .rpt2-app .rpt2-dash__create-category { border: 1px solid rgba(123, 166, 255, 0.14); background: rgba(5, 14, 27, 0.42); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .rpt2-app .rpt2-dash__create-category:hover { border-color: rgba(84, 214, 255, 0.32); background: rgba(15, 30, 60, 0.6); } .rpt2-app .rpt2-dash__create-submit { border-radius: 999px; padding: 11px 24px; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, #307bff 0%, #4c98ff 100%); border: 1px solid rgba(67, 136, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 32px rgba(67, 136, 255, 0.28); } .rpt2-app .rpt2-dash__create-submit:disabled, .rpt2-app .rpt2-dash__create-submit[disabled] { background: rgba(123, 166, 255, 0.10); border-color: rgba(123, 166, 255, 0.16); color: var(--text-4); box-shadow: none; filter: none; transform: none; cursor: not-allowed; } /* ---------- Thread surfaces: align with the new glass language ---- */ .rpt2-app .rpt2-dash__thread-head { background: radial-gradient(circle at 20% -40%, rgba(84, 214, 255, 0.10), transparent 60%), linear-gradient(180deg, rgba(20, 34, 62, 0.55), rgba(20, 34, 62, 0)); border-bottom: 1px solid rgba(123, 166, 255, 0.12); padding: 16px 22px; } .rpt2-app .rpt2-dash__thread-subject { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; color: #ffffff; letter-spacing: -0.01em; } .rpt2-app .rpt2-dash__thread-back { border-radius: 999px; border-color: rgba(123, 166, 255, 0.18); background: rgba(15, 25, 47, 0.55); color: var(--text-2); } .rpt2-app .rpt2-dash__thread-back:hover { color: #ffffff; border-color: rgba(84, 214, 255, 0.34); background: rgba(20, 34, 64, 0.7); } /* ---------- Sub-header CTAs match the pill button language -------- */ .rpt2-app .rpt2-dash__refresh, .rpt2-app .rpt2-dash__new { border-radius: 999px; } .rpt2-app .rpt2-dash__new { background: linear-gradient(135deg, #307bff 0%, #4c98ff 100%); border-color: rgba(67, 136, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px rgba(67, 136, 255, 0.24); } .rpt2-app .rpt2-dash__new:hover { filter: brightness(1.06); transform: translateY(-1px); } /* ---------- Guest page: same eyebrow / gradient title language ---- */ .rpt2-app .rpt2-guest-grid { padding: 28px 0 44px; } .rpt2-app .rpt2-eyebrow { color: #54d6ff; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; } .rpt2-app .rpt2-eyebrow svg { color: #54d6ff; } .rpt2-app .rpt2-hero-gradient { background: linear-gradient(135deg, #4c98ff 0%, #54d6ff 60%, #4c98ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .rpt2-app .rpt2-trust-item { border-radius: 14px; border: 1px solid rgba(123, 166, 255, 0.14); background: rgba(5, 14, 27, 0.40); } .rpt2-app .rpt2-trust-item__icon { border-radius: 11px; border: 1px solid rgba(67, 136, 255, 0.30); background: rgba(67, 136, 255, 0.12); } .rpt2-app .rpt2-access-card { border: 1px solid rgba(123, 166, 255, 0.20); background: radial-gradient(circle at 18% -10%, rgba(84, 214, 255, 0.10), transparent 50%), radial-gradient(circle at 100% 0%, rgba(67, 136, 255, 0.16), transparent 55%), linear-gradient(180deg, rgba(17, 29, 55, 0.86), rgba(8, 13, 27, 0.84)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 26px 70px rgba(0, 0, 0, 0.32); } .rpt2-app .rpt2-access-heading__icon { border-radius: 12px; border: 1px solid rgba(67, 136, 255, 0.30); background: rgba(67, 136, 255, 0.12); color: #8db9ff; } .rpt2-app .rpt2-access-heading__title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; color: #ffffff; } .rpt2-app .rpt2-otp-cell { border-radius: 12px; border-color: rgba(123, 166, 255, 0.18); } .rpt2-app .rpt2-otp-cell:focus, .rpt2-app .rpt2-otp-cell.is-filled { border-color: rgba(84, 214, 255, 0.55); box-shadow: 0 0 0 3px rgba(84, 214, 255, 0.18); } .rpt2-app .rpt2-faq__card { border-radius: 16px; border-color: rgba(123, 166, 255, 0.16); background: radial-gradient(circle at 16% -10%, rgba(84, 214, 255, 0.07), transparent 55%), linear-gradient(180deg, rgba(17, 29, 55, 0.78), rgba(8, 13, 27, 0.74)); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .rpt2-app .rpt2-faq__card:hover { transform: translateY(-3px); border-color: rgba(84, 214, 255, 0.32); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32); } .rpt2-app .rpt2-faq__icon { width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(67, 136, 255, 0.32); background: rgba(67, 136, 255, 0.12); color: #8db9ff; } .rpt2-app .rpt2-faq__q { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; color: #ffffff; } /* ---------- Mobile - keep the new card weight from collapsing ---- */ @media (max-width: 960px) { .rpt2-app .rpt2-subheader { padding: 18px 0 12px; } .rpt2-app .rpt2-subheader__title { font-size: clamp(22px, 6vw, 28px); } .rpt2-app .rpt2-dash__sidebar, .rpt2-app .rpt2-dash__list, .rpt2-app .rpt2-dash__thread, .rpt2-app .rpt2-dash__select, .rpt2-app .rpt2-dash__team, .rpt2-app .rpt2-dash__priority { border-radius: 18px; } .rpt2-app .rpt2-dash__list-head { padding: 16px 18px 12px; } .rpt2-app .rpt2-dash__create-scroll { padding: 20px 18px 22px; } } @media (max-width: 640px) { .rpt2-app .rpt2-subheader { padding: 14px 0 8px; } .rpt2-app .rpt2-dash__row { padding: 12px; } .rpt2-app .rpt2-dash__list-head { padding: 14px 16px 10px; } } /* ========================================================================== Stage 6.1 - logged-in dashboard hierarchy polish ------------------------------------------------------------------------ Small follow-up to Stage 6. Stage 6 unified all dashboard surfaces under a single glass treatment, which fixed the colour/theme mismatch but left the sidebar, ticket list, and right rail competing for visual weight. This pass differentiates the panes so the ticket list reads as the primary surface, the sidebar feels like a calm support-nav card, and the right rail reads as one supporting system instead of three loud stand-alone cards. Markup, JS hooks, AJAX/REST contracts, and the guest page treatment are deliberately untouched. ========================================================================== */ /* ---------- Page rhythm: breathe between subheader and panels -------- */ .rpt2-app .rpt2-subheader { padding: 26px 0 14px; align-items: center; border-bottom: 1px solid rgba(123, 166, 255, 0.08); margin-bottom: 18px; } .rpt2-app .rpt2-subheader__lead { gap: 8px; } .rpt2-app .rpt2-subheader__title { font-size: clamp(24px, 2.6vw, 30px); } .rpt2-app .rpt2-subheader__status { font-size: 10.5px; padding: 4px 9px 4px 8px; letter-spacing: 0.05em; } /* ---------- Subheader CTAs: clearer primary/secondary split --------- */ .rpt2-app .rpt2-subheader__actions { gap: 8px; } .rpt2-app .rpt2-dash__refresh { padding: 8px 14px; font-size: 12px; border: 1px solid rgba(123, 166, 255, 0.18); background: rgba(15, 25, 47, 0.55); color: var(--text-2); } .rpt2-app .rpt2-dash__refresh:hover { background: rgba(20, 34, 64, 0.7); border-color: rgba(123, 166, 255, 0.32); color: #ffffff; } .rpt2-app .rpt2-dash__new { padding: 9px 18px; font-size: 12.5px; } /* ---------- Hierarchy: list = primary, sidebar/side = supporting ---- */ /* Sidebar reads as a calm navigation card, not another competing panel. */ .rpt2-app .rpt2-dash__sidebar { border-color: rgba(123, 166, 255, 0.10); background: radial-gradient(circle at 18% -10%, rgba(84, 214, 255, 0.04), transparent 50%), linear-gradient(180deg, rgba(13, 22, 44, 0.72), rgba(8, 13, 27, 0.70)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 22px rgba(0, 0, 0, 0.22); } /* Right-rail cards: lighter borders so they support, not compete. */ .rpt2-app .rpt2-dash__select, .rpt2-app .rpt2-dash__team, .rpt2-app .rpt2-dash__priority, .rpt2-app .rpt2-dash__info, .rpt2-app .rpt2-dash__order, .rpt2-app .rpt2-dash__delivery, .rpt2-app .rpt2-dash__create-tips, .rpt2-app .rpt2-dash__create-eta { border-color: rgba(123, 166, 255, 0.12); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(67, 136, 255, 0.06), transparent 55%), linear-gradient(180deg, rgba(13, 22, 44, 0.78), rgba(8, 13, 27, 0.74)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 26px rgba(0, 0, 0, 0.24); } /* Centre list is the focal surface - slightly stronger weight. */ .rpt2-app .rpt2-dash__list, .rpt2-app .rpt2-dash__thread, .rpt2-app .rpt2-dash__create { border-color: rgba(123, 166, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 44px rgba(0, 0, 0, 0.36); } /* ---------- Sidebar: support-nav voice instead of admin list ------- */ .rpt2-app .rpt2-dash__sidebar { padding: 16px 12px; gap: 2px; } /* Calm "Quick nav" eyebrow above the first nav item (no markup needed - we relabel the existing rpt2-dash__nav element with a leading rule). */ .rpt2-app .rpt2-dash__nav { padding-top: 4px; } .rpt2-app .rpt2-dash__nav-item { padding: 9px 12px; font-size: 12.5px; font-weight: 600; border-radius: 10px; } .rpt2-app .rpt2-dash__nav-icon { width: 17px; height: 17px; } .rpt2-app .rpt2-dash__nav-item.is-active { /* Slightly less saturated active state - it shouldn't outshout the ticket list selection ring on the right. */ background: linear-gradient(180deg, rgba(59, 130, 246, 0.13), rgba(59, 130, 246, 0.04)); border-color: rgba(59, 130, 246, 0.22); } .rpt2-app .rpt2-dash__nav-item.is-active::before { height: 14px; margin-top: -7px; background: linear-gradient(180deg, #60A5FA, #3B82F6); box-shadow: 0 0 10px rgba(59, 130, 246, 0.55); } .rpt2-app .rpt2-dash__nav-heading { padding: 18px 12px 6px; font-size: 9.5px; letter-spacing: 0.18em; color: var(--text-4); border-top: 1px solid rgba(123, 166, 255, 0.08); margin-top: 8px; } /* The first heading is just "Useful links" - keep the divider purely above it, no double border at the top of the sidebar. */ .rpt2-app .rpt2-dash__nav > .rpt2-dash__nav-heading:first-child { border-top: 0; margin-top: 0; padding-top: 4px; } /* Discord rail: pull back so it never outshouts the nav list above it. */ .rpt2-app .rpt2-dash__rail-discord { margin: 14px 0 0; padding: 13px 14px; border-radius: 12px; border-color: rgba(110, 124, 240, 0.18); background: radial-gradient(circle at 100% 0%, rgba(110, 124, 240, 0.10), transparent 60%), linear-gradient(180deg, rgba(15, 19, 44, 0.70), rgba(8, 13, 27, 0.70)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .rpt2-app .rpt2-dash__rail-discord-title { font-size: 12.5px; } .rpt2-app .rpt2-dash__rail-discord-body { font-size: 11px; color: var(--text-4); margin-bottom: 9px; } /* ---------- Centre list head: brand it with a left accent rail ---- */ .rpt2-app .rpt2-dash__list-head { position: relative; padding: 18px 22px 14px 26px; gap: 12px; } .rpt2-app .rpt2-dash__list-head::before { content: ''; position: absolute; left: 16px; top: 22px; width: 3px; height: 18px; border-radius: 999px; background: linear-gradient(180deg, #60A5FA, #3B82F6); box-shadow: 0 0 10px rgba(59, 130, 246, 0.55); } .rpt2-app .rpt2-dash__list-title { font-size: 16px; } .rpt2-app .rpt2-dash__list-sub { font-size: 11.5px; margin-top: 2px; } /* Tabs: tighter; counts inside tabs already render in the markup as equivalents - this just gives the chips a more refined rhythm. */ .rpt2-app .rpt2-dash__tab { padding: 5px 12px; font-size: 11.5px; } .rpt2-app .rpt2-dash__tabs { gap: 6px; } /* Tool buttons: smaller chip footprint matches the new tab size. */ .rpt2-app .rpt2-dash__tool-btn { padding: 6px 11px; font-size: 11px; } /* ---------- Ticket rows: clearer hierarchy without taller rows --- */ .rpt2-app .rpt2-dash__list-body { padding: 6px 8px 10px; } .rpt2-app .rpt2-dash__rows { gap: 4px; } .rpt2-app .rpt2-dash__row { padding: 12px 14px; border-radius: 12px; } .rpt2-app .rpt2-dash__row-meta { gap: 7px; margin-bottom: 4px; } .rpt2-app .rpt2-dash__row-id { font-size: 10.5px; } .rpt2-app .rpt2-dash__row-cat { font-size: 11px; } .rpt2-app .rpt2-dash__row-pill { padding: 1px 8px; font-size: 9.5px; } .rpt2-app .rpt2-dash__row-subject { font-size: 13.5px; font-weight: 600; } .rpt2-app .rpt2-dash__row-foot { gap: 7px; font-size: 11px; } .rpt2-app .rpt2-dash__row-date { color: var(--text-3); } .rpt2-app .rpt2-dash__row.is-active { /* Calmer active ring - obvious but not louder than it needs to be. */ background: linear-gradient(180deg, rgba(59, 130, 246, 0.13), rgba(59, 130, 246, 0.03)); border-color: rgba(59, 130, 246, 0.36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(59, 130, 246, 0.10); } .rpt2-app .rpt2-dash__row-chev { color: var(--text-4); transition: color 140ms ease, transform 140ms ease; } .rpt2-app .rpt2-dash__row:hover .rpt2-dash__row-chev, .rpt2-app .rpt2-dash__row.is-active .rpt2-dash__row-chev { color: var(--accent); transform: translateX(2px); } /* ---------- Right rail: unify the three cards as one system ----- */ .rpt2-app .rpt2-dash__side { gap: 12px; } /* Select-a-ticket card: tighter, less hero-like. */ .rpt2-app .rpt2-dash__select { padding: 18px; } .rpt2-app .rpt2-dash__select-icon { width: 50px; height: 50px; border-radius: 14px; margin: 2px auto 12px; } .rpt2-app .rpt2-dash__select-title { font-size: 14px; } .rpt2-app .rpt2-dash__select-body { font-size: 12px; margin-bottom: 14px; } .rpt2-app .rpt2-dash__select-list-item { padding: 8px 10px; font-size: 11.5px; } /* Support team card: calmer typography + smaller online chip. */ .rpt2-app .rpt2-dash__team { padding: 14px 16px; } .rpt2-app .rpt2-dash__team-head { margin-bottom: 12px; } .rpt2-app .rpt2-dash__team-title { font-size: 12px; letter-spacing: 0.02em; } .rpt2-app .rpt2-dash__team-online { padding: 3px 8px; font-size: 10px; border-color: rgba(60, 213, 150, 0.22); background: rgba(60, 213, 150, 0.06); } .rpt2-app .rpt2-dash__team-list { gap: 8px; } .rpt2-app .rpt2-dash__team-member { padding: 7px 9px; border-radius: 10px; border-color: rgba(123, 166, 255, 0.08); background: rgba(5, 14, 27, 0.32); } .rpt2-app .rpt2-dash__team-avatar { width: 28px; height: 28px; font-size: 10.5px; box-shadow: 0 3px 8px rgba(59, 130, 246, 0.22); } .rpt2-app .rpt2-dash__team-avatar--ai { box-shadow: 0 3px 8px rgba(107, 142, 245, 0.22); } .rpt2-app .rpt2-dash__team-name { font-size: 12px; } .rpt2-app .rpt2-dash__team-role { font-size: 10.5px; } .rpt2-app .rpt2-dash__team-status { font-size: 10px; } /* Priority card: still semantic, but pulled back so it stops dominating. Keep amber/red ONLY in the available state; cooldown / guest-locked should read as a calm neutral block. */ .rpt2-app .rpt2-dash__priority { padding: 14px 16px; border-radius: 16px; } .rpt2-app .rpt2-dash__priority.is-available { border-color: rgba(255, 122, 147, 0.22); background: radial-gradient(circle at 100% -10%, rgba(255, 122, 147, 0.10), transparent 55%), linear-gradient(180deg, rgba(34, 18, 32, 0.55), rgba(8, 13, 27, 0.74)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.26); } .rpt2-app .rpt2-dash__priority.is-cooldown { border-color: rgba(123, 166, 255, 0.12); background: radial-gradient(circle at 100% 0%, rgba(67, 136, 255, 0.06), transparent 55%), linear-gradient(180deg, rgba(13, 22, 44, 0.78), rgba(8, 13, 27, 0.74)); } .rpt2-app .rpt2-dash__priority-head { gap: 11px; margin-bottom: 11px; } .rpt2-app .rpt2-dash__priority-icon { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 122, 147, 0.12); border-color: rgba(255, 122, 147, 0.22); color: #ff8a9f; } .rpt2-app .rpt2-dash__priority-title { font-size: 12.5px; } .rpt2-app .rpt2-dash__priority-sub { font-size: 10.5px; } .rpt2-app .rpt2-dash__priority-cta { padding: 9px 16px; font-size: 12px; border-radius: 10px; background: linear-gradient(135deg, #ec4f6f 0%, #ff7a93 100%); border: 1px solid rgba(255, 122, 147, 0.45); /* Softer glow than Stage 6 - still feels urgent without a bloom. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px rgba(236, 79, 111, 0.22); } .rpt2-app .rpt2-dash__priority-cta:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); } .rpt2-app .rpt2-dash__priority-foot { margin-top: 11px; padding-top: 10px; font-size: 10.5px; color: var(--text-4); } /* ---------- Mobile: keep the new rhythm legible at narrow widths -- */ @media (max-width: 960px) { .rpt2-app .rpt2-subheader { padding: 18px 0 12px; margin-bottom: 14px; } .rpt2-app .rpt2-dash__list-head { padding: 16px 18px 12px 22px; } .rpt2-app .rpt2-dash__list-head::before { left: 12px; top: 20px; } } @media (max-width: 640px) { .rpt2-app .rpt2-subheader { padding: 14px 0 10px; margin-bottom: 12px; } .rpt2-app .rpt2-dash__list-head { padding: 14px 16px 10px 20px; } .rpt2-app .rpt2-dash__list-head::before { left: 10px; top: 18px; } } /* ──────────────────────────────────────────────────────────────────── Aria action buttons (under AI message bubbles) Rendered by extractAriaActions() in tickets-widget-v2.js from [[ACTION:label|path|type]] markers that survive the server-side allowlist sanitiser. Tightly scoped under .rpw2-msg__actions so we don't fight other inline-link styling. ──────────────────────────────────────────────────────────────────── */ .rpw2-msg__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; } .rpw2-msg__action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 13px; border-radius: 10px; border: 1px solid rgba(96, 165, 250, 0.30); background: rgba(8, 22, 44, 0.62); color: #dceaff; font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: 0.005em; text-decoration: none; transition: transform .15s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .rpw2-msg__action:hover, .rpw2-msg__action:focus-visible { transform: translateY(-1px); border-color: rgba(108, 182, 255, 0.55); background: rgba(15, 35, 70, 0.78); box-shadow: 0 6px 14px rgba(2, 6, 18, 0.30); color: #ffffff; } .rpw2-msg__action:focus-visible { outline: 2px solid rgba(108, 182, 255, 0.85); outline-offset: 3px; } .rpw2-msg__action--primary { background: linear-gradient(180deg, #4ea1ff, #2c70d8); border-color: rgba(186, 213, 255, 0.32); color: #ffffff; box-shadow: 0 10px 22px rgba(46, 113, 215, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10); } .rpw2-msg__action--primary:hover, .rpw2-msg__action--primary:focus-visible { background: linear-gradient(180deg, #5cabff, #3478e0); border-color: rgba(186, 213, 255, 0.50); box-shadow: 0 14px 26px rgba(46, 113, 215, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .rpw2-msg__action--link { border-color: transparent; background: transparent; padding: 6px 4px; color: #6cb6ff; } .rpw2-msg__action--link:hover, .rpw2-msg__action--link:focus-visible { background: transparent; border-color: transparent; color: #ffffff; box-shadow: none; transform: none; } @media (prefers-reduced-motion: reduce) { .rpw2-msg__action, .rpw2-msg__action--primary { transition: none !important; } .rpw2-msg__action:hover, .rpw2-msg__action--primary:hover { transform: none !important; } } /* ──────────────────────────────────────────────────────────────────── Loading view — shown to logged-in customers while rp_chat_init resolves, so the guest access form never flashes for a frame. ──────────────────────────────────────────────────────────────────── */ .rpw2-loading { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 18px; text-align: center; } .rpw2-loading.is-hidden { display: none; } .rpw2-loading__spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(108, 182, 255, 0.22); border-top-color: rgba(108, 182, 255, 0.85); animation: rpw2-spin .8s linear infinite; } .rpw2-loading__label { font-size: 13px; font-weight: 600; color: rgba(186, 213, 255, 0.72); } @keyframes rpw2-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rpw2-loading__spinner { animation: none; } } /* ──────────────────────────────────────────────────────────────────── Compose view — in-widget new-ticket form ──────────────────────────────────────────────────────────────────── */ .rpw2-compose { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 18px; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .rpw2-compose.is-hidden { display: none; } .rpw2-compose__hero { margin-bottom: 4px; } .rpw2-compose__title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 4px; } .rpw2-compose__sub { font-size: 12.5px; line-height: 1.4; color: rgba(186, 213, 255, 0.72); } .rpw2-compose__field { display: flex; flex-direction: column; gap: 6px; } .rpw2-compose__field[hidden] { display: none; } .rpw2-compose__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(186, 213, 255, 0.72); } .rpw2-compose__input, .rpw2-compose__select, .rpw2-compose__textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(99, 140, 200, 0.30); background: rgba(6, 16, 32, 0.55); color: #e7ecff; font-family: inherit; font-size: 13.5px; line-height: 1.4; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .rpw2-compose__input::placeholder, .rpw2-compose__textarea::placeholder { color: rgba(148, 163, 184, 0.55); } .rpw2-compose__input:focus, .rpw2-compose__select:focus, .rpw2-compose__textarea:focus { border-color: rgba(108, 182, 255, 0.65); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); background: rgba(6, 16, 32, 0.78); } .rpw2-compose__select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, rgba(186,213,255,0.6) 50%), linear-gradient(135deg, rgba(186,213,255,0.6) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .rpw2-compose__textarea { min-height: 96px; resize: vertical; } .rpw2-compose__error { font-size: 12px; line-height: 1.4; color: #fecaca; background: rgba(248, 113, 113, 0.10); border: 1px solid rgba(248, 113, 113, 0.30); padding: 9px 11px; border-radius: 8px; } .rpw2-compose__error[hidden] { display: none; } .rpw2-compose__actions { display: flex; gap: 8px; margin-top: 4px; } .rpw2-compose__actions .rpw2-btn { flex: 1 1 0; min-width: 0; } /* Reuse the primary/ghost button look already defined for the access view; tighten heights to match the compose density. */ .rpw2-compose__actions .rpw2-btn--primary, .rpw2-compose__actions .rpw2-btn--ghost { padding-block: 11px; } .rpw2-compose__actions .rpw2-btn--primary.is-loading { position: relative; color: transparent !important; pointer-events: none; } .rpw2-compose__actions .rpw2-btn--primary.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, 0.30); border-top-color: #fff; border-radius: 50%; animation: rpw2-spin .68s linear infinite; } @media (max-width: 480px) { .rpw2-compose { padding: 14px; gap: 10px; } .rpw2-compose__textarea { min-height: 88px; } .rpw2-compose__title { font-size: 15px; } .rpw2-compose__actions { gap: 6px; } }