/* ───────────────────────────────────────────────────────────────────────── In-app support — floating orb + ticket dialog. PORTED from social-stream/css/support.css. The component rules below are kept verbatim (so they stay diff-able against the source) and reference a set of SS semantic CSS variables (--surface, --border, --text, --accent, --c-blue/purple/magenta, …). TradeByFire's design tokens are the --wot-* set, so the :root alias block below maps the SS names onto WOT tokens, and a "TradeByFire brand overrides" block at the very end re-skins the few hard-coded indigo literals (orb gradient, primary button, active tab, focus rings) to the WOT orange→pink gradient. tradebyfire is dark-only — the body.theme-light rules below simply never match. The orb sits at z-index 9500; the dialog overlay at 9600. ───────────────────────────────────────────────────────────────────── */ /* ── SS-var → WOT-token alias map (the only edit inside the ported block) ── */ :root { --surface: var(--wot-bg-2); --bg: var(--wot-bg-0); --bg-elev: var(--wot-bg-1); --bg-elev-2: var(--wot-bg-2); --bg-hover: var(--wot-bg-3); --border: var(--wot-border); --border-strong: var(--wot-border-strong); --text: var(--wot-text-0); --text-muted: var(--wot-text-1); --text-faint: var(--wot-text-2); --accent: var(--wot-grad-end); --accent-soft: rgba(255, 31, 143, 0.14); --radius-md: var(--wot-r-md); --radius-lg: var(--wot-r-lg); --radius-pill: var(--wot-r-pill); /* orb / hero gradient stops */ --c-blue: var(--wot-grad-start); --c-purple: #FF3D6E; --c-magenta: var(--wot-grad-end); /* status soft fills + text */ --neutral-soft: rgba(255,255,255,0.06); --info-soft: rgba(38,217,127,0.14); --info-text: var(--wot-bull); --warning: var(--wot-chop); --warning-soft: rgba(245,180,0,0.16); --warning-text: var(--wot-chop); --danger: var(--wot-bear); --danger-soft: rgba(239,68,68,0.16); --danger-text: var(--wot-bear); --success: var(--wot-bull); --success-soft: rgba(34,197,94,0.16); --success-text: var(--wot-bull); } /* ── Orb (always mounted in ) ────────────────────────────────────── */ .ss-support-orb { position: fixed; right: 24px; bottom: 24px; z-index: 9500; width: 56px; height: 56px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(135deg, var(--c-blue) 0%, var(--c-purple) 45%, var(--c-magenta) 100%); color: #fff; border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 20px -4px rgba(72, 56, 180, 0.55), 0 0 0 6px rgba(180, 142, 255, 0.08); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease, right 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); } .ss-support-orb:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 30px -8px rgba(72, 56, 180, 0.65), 0 0 0 8px rgba(180, 142, 255, 0.12); } .ss-support-orb:active { transform: translateY(0) scale(0.98); } .ss-support-orb:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 30px -8px rgba(72, 56, 180, 0.65), 0 0 0 4px rgba(124, 92, 255, 0.35); } .ss-support-orb-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; } .ss-support-orb-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; } .ss-support-orb-attention .ss-support-orb-pulse { animation: ssSupportPulse 1.6s ease-out 2; background: radial-gradient(circle at center, rgba(232,107,217,0.45), transparent 70%); opacity: 1; } @keyframes ssSupportPulse { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } } /* Light theme — keep the orb branded but use a subtler shadow halo. */ body.theme-light .ss-support-orb { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 12px rgba(72, 56, 180, 0.20), 0 0 0 4px rgba(124, 92, 255, 0.10); border-color: rgba(255,255,255,0.5); } /* Reduce-motion respect */ @media (prefers-reduced-motion: reduce) { .ss-support-orb { transition: none; } .ss-support-orb-attention .ss-support-orb-pulse { animation: none; opacity: 0; } } /* ── AI rail collision avoidance ───────────────────────────────────────── The AI rail (.ai-rail) lives at `position: fixed; right: 0; width: var(--ai-rail-width, 320px)` and its send button sits in the bottom-right corner — exactly where the support orb is anchored. When the rail is mounted AND not minimized AND docked to the right (the default), shift the orb + its notification badges LEFT by the rail's width so the rail's send button stays clickable. When the rail is minimized (back to its own little orb) or docked to the LEFT side of the viewport, the support orb stays anchored bottom-right. `body.has-ai-rail`, `body.ai-rail-minimized`, and `body.ai-rail-docked-left` are set by js/ai-rail.js — single source of truth, no JS needed here. */ body.has-ai-rail:not(.ai-rail-minimized):not(.ai-rail-docked-left) .ss-support-orb, body.has-ai-rail:not(.ai-rail-minimized):not(.ai-rail-docked-left) .ss-support-orb-badges, body.has-ai-rail:not(.ai-rail-minimized):not(.ai-rail-docked-left) .ss-support-orb-stage { right: calc(var(--ai-rail-width, 320px) + 24px); } .ss-support-orb-badges, .ss-support-orb-stage { transition: right 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .ss-support-orb-badges { transition: none; } .ss-support-orb-stage { transition: none; } } /* ── Stage chip (per-route Alpha / Beta / Placeholder) ──────────────────── Sits above the count pills, anchored to the orb. Pure information — taps are intentionally inert. Alpha is the default for nearly every surface; Placeholder is reserved for analytics today. */ .ss-support-orb-stage { position: fixed; right: 24px; bottom: 112px; /* orb (24+56) + badges row (32 incl. gap) ≈ 112 */ z-index: 9550; pointer-events: none; max-width: min(380px, calc(100vw - 48px)); display: flex; justify-content: flex-end; } .ss-support-orb-stage-chip { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: var(--radius-pill); font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.005em; text-transform: none; border: 1px solid rgba(184, 137, 255, 0.22); background: linear-gradient(180deg, rgba(184, 137, 255, 0.14) 0%, rgba(124, 92, 255, 0.18) 100%); color: var(--text); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 2px 8px -3px rgba(124, 92, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); opacity: 0.72; transition: opacity 280ms ease; animation: ssSupportBadgePop 280ms cubic-bezier(0.18, 1.4, 0.4, 1); } .ss-support-orb-stage-chip:hover { opacity: 1; } .ss-support-orb-stage-chip.is-fading { opacity: 0; transition: opacity 240ms ease; } .ss-support-orb-stage-sparkle { display: inline-flex; align-items: center; justify-content: center; color: #c9a8ff; filter: drop-shadow(0 0 4px rgba(184, 137, 255, 0.55)); animation: ssStageSparkle 3.6s ease-in-out infinite; } .ss-support-orb-stage-sparkle svg { width: 12px; height: 12px; } .ss-support-orb-stage-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; } .ss-support-orb-stage-placeholder { border-color: rgba(251, 191, 107, 0.30); background: linear-gradient(180deg, rgba(251, 191, 107, 0.14) 0%, rgba(217, 134, 41, 0.18) 100%); box-shadow: 0 2px 8px -3px rgba(217, 134, 41, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .ss-support-orb-stage-placeholder .ss-support-orb-stage-sparkle { color: #fbbf6b; filter: drop-shadow(0 0 4px rgba(251, 191, 107, 0.55)); } body.theme-light .ss-support-orb-stage-chip { border-color: rgba(124, 92, 255, 0.22); background: linear-gradient(180deg, rgba(184, 137, 255, 0.10) 0%, rgba(124, 92, 255, 0.13) 100%); color: var(--text); box-shadow: 0 2px 8px -3px rgba(124, 92, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45); opacity: 0.82; } body.theme-light .ss-support-orb-stage-chip:hover { opacity: 1; } body.theme-light .ss-support-orb-stage-sparkle { color: #7c5cff; } @keyframes ssStageSparkle { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .ss-support-orb-stage-chip { animation: none; } .ss-support-orb-stage-sparkle { animation: none; } .ss-support-orb-stage-chip.is-fading { opacity: 0.72; } } @media (max-width: 560px) { .ss-support-orb-stage-label { max-width: 200px; } } /* ── Orb count pills (notification-badge style) ─────────────────────────── Anchored to the orb's coordinates (bottom-right of the viewport). When one or both pills are present they stack horizontally just above the orb's top edge, slightly inset so they hug the orb. Tap → /support. */ .ss-support-orb-badges { position: fixed; right: 24px; bottom: 76px; /* sit just above the 56px orb + 24px bottom margin */ z-index: 9550; display: flex; gap: 6px; pointer-events: none; } .ss-support-orb-badges:empty { display: none; } .ss-support-orb-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: -0.005em; color: #fff; border: 1px solid transparent; cursor: pointer; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15); transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease; animation: ssSupportBadgePop 280ms cubic-bezier(0.18, 1.4, 0.4, 1); } .ss-support-orb-pill:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 6px 16px -2px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18); } .ss-support-orb-pill:active { transform: translateY(0) scale(0.97); } .ss-support-orb-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.92); } .ss-support-orb-pill-count { font-variant-numeric: tabular-nums; } .ss-support-orb-pill-red { background: linear-gradient(180deg, #ef6b6b 0%, #c93b3b 100%); } .ss-support-orb-pill-green { background: linear-gradient(180deg, #5fe88a 0%, #38c465 100%); color: #04230f; } .ss-support-orb-pill-green .ss-support-orb-pill-dot { background: rgba(4, 35, 15, 0.85); } @keyframes ssSupportBadgePop { 0% { opacity: 0; transform: scale(0.6) translateY(8px); } 60% { opacity: 1; transform: scale(1.08) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } body.theme-light .ss-support-orb-pill { box-shadow: 0 2px 8px -1px rgba(72,56,180,0.20), inset 0 1px 0 rgba(255,255,255,0.20); } body.theme-light .ss-support-orb-pill:hover { box-shadow: 0 4px 12px -1px rgba(72,56,180,0.28), inset 0 1px 0 rgba(255,255,255,0.24); } @media (prefers-reduced-motion: reduce) { .ss-support-orb-pill { animation: none; transition: none; } } /* ── Dialog overlay ────────────────────────────────────────────────────── */ .ss-support-overlay { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px; background: rgba(8, 8, 18, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ssSupportFade 160ms ease-out; } body.theme-light .ss-support-overlay { background: rgba(15, 15, 15, 0.30); } @keyframes ssSupportFade { from { opacity: 0; } to { opacity: 1; } } .ss-support-dialog { width: 100%; max-width: 520px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 64px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02); padding: 22px 24px; animation: ssSupportSlide 240ms cubic-bezier(0.2, 0.9, 0.3, 1); overflow: hidden; } @keyframes ssSupportSlide { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .ss-support-dialog.sup-proactive { border-color: rgba(245, 180, 97, 0.35); box-shadow: 0 24px 64px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(245, 180, 97, 0.18), inset 0 1px 0 rgba(255,255,255,0.04); } /* Hero (icon + title + body + close) */ .ss-support-hero { display: grid; grid-template-columns: 44px 1fr auto; align-items: start; gap: 12px; } /* AI Support eyebrow — small branded pill above the hero title. Carries the Social Stream gradient + a sparkle icon. Reinforces that the support flow is AI-powered without shouting it. */ .ss-support-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: linear-gradient(135deg, var(--c-blue), var(--c-purple) 55%, var(--c-magenta)); margin-bottom: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px -4px rgba(72, 56, 180, 0.45); } .ss-support-eyebrow-icon { display: inline-flex; align-items: center; justify-content: center; } .ss-support-hero-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(135deg, var(--c-blue) 0%, var(--c-purple) 45%, var(--c-magenta) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 16px -8px rgba(72, 56, 180, 0.55); } .ss-support-hero-text h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .ss-support-hero-text p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); } .ss-support-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ss-support-close:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); } /* Meta row — severity pill + tab chip + last-error chip */ .ss-support-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ss-support-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; } .ss-support-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ss-support-pill.sev-low { background: var(--neutral-soft); color: var(--text-muted); border-color: var(--border); } .ss-support-pill.sev-medium { background: var(--info-soft); color: var(--info-text); } .ss-support-pill.sev-high { background: var(--warning-soft); color: var(--warning-text); } .ss-support-pill.sev-critical { background: var(--danger-soft); color: var(--danger-text); } .ss-support-meta-chip { font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--bg-elev-2); border: 1px solid var(--border); padding: 4px 9px; border-radius: 999px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-support-meta-chip.ss-support-meta-error { color: var(--danger-text); background: var(--danger-soft); border-color: transparent; } /* ── Chip dropdowns (priority + feature) ───────────────────────────────── The chip-trigger looks like a pill but is interactive: icon + label + chevron, hover/focus + open states. The menu opens absolutely-positioned below the chip with z-index above the dialog content. */ .ss-support-chip-wrap { position: relative; display: inline-block; } .ss-support-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 9px; border-radius: var(--radius-pill); background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); font-size: 12px; font-weight: 600; font-family: inherit; letter-spacing: 0.005em; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s; user-select: none; } .ss-support-chip:hover { background: var(--bg-hover); border-color: var(--border-strong); } .ss-support-chip:active { transform: scale(0.98); } .ss-support-chip:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,0.22); } .ss-support-chip-wrap.is-open .ss-support-chip { background: var(--bg-hover); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,0.18); } .ss-support-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: currentColor; } .ss-support-chip-chev { display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); margin-left: 1px; transition: transform 0.18s ease; } .ss-support-chip-wrap.is-open .ss-support-chip-chev { transform: rotate(180deg); color: var(--accent); } .ss-support-chip-label { white-space: nowrap; } /* Severity-tinted variants for the priority chip. */ .ss-support-chip-priority.sev-low { color: var(--text-muted); background: var(--neutral-soft); border-color: var(--border); } .ss-support-chip-priority.sev-medium { color: var(--info-text); background: var(--info-soft); border-color: transparent; } .ss-support-chip-priority.sev-high { color: var(--warning-text); background: var(--warning-soft); border-color: transparent; } .ss-support-chip-priority.sev-critical { color: var(--danger-text); background: var(--danger-soft); border-color: transparent; } .ss-support-chip-priority .ss-support-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* Dropdown menu */ .ss-support-chip-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; max-height: 280px; overflow-y: auto; z-index: 9700; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 18px 40px -8px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02); animation: ssSupportChipMenuIn 140ms cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes ssSupportChipMenuIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .ss-support-chip-item { display: grid; grid-template-columns: 18px 1fr 14px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; transition: background 0.12s ease; } .ss-support-chip-item:hover, .ss-support-chip-item:focus { background: var(--bg-hover); outline: none; } .ss-support-chip-item-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); } .ss-support-chip-item-label { color: inherit; } .ss-support-chip-item-check { color: var(--accent); opacity: 0; transition: opacity 0.12s; } .ss-support-chip-item[aria-selected="true"] { background: var(--accent-soft); color: var(--text); } .ss-support-chip-item[aria-selected="true"] .ss-support-chip-item-check { opacity: 1; } .ss-support-chip-item[aria-selected="true"] .ss-support-chip-item-icon { color: var(--accent); } /* Severity items get their tint applied to the dot. */ .ss-support-chip-item-sev-low .ss-support-pill-dot { background: var(--text-muted); } .ss-support-chip-item-sev-medium .ss-support-pill-dot { background: var(--c-blue); } .ss-support-chip-item-sev-high .ss-support-pill-dot { background: var(--warning); } .ss-support-chip-item-sev-critical .ss-support-pill-dot { background: var(--danger); } .ss-support-chip-item-sev-low .ss-support-chip-item-icon, .ss-support-chip-item-sev-medium .ss-support-chip-item-icon, .ss-support-chip-item-sev-high .ss-support-chip-item-icon, .ss-support-chip-item-sev-critical .ss-support-chip-item-icon { color: inherit; } .ss-support-chip-item .ss-support-pill-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* Textarea */ .ss-support-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.01em; text-transform: uppercase; } .ss-support-textarea { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.55; resize: vertical; min-height: 96px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .ss-support-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,0.18); } .ss-support-textarea-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,107,107,0.20); } .ss-support-counter { align-self: flex-end; font-size: 11px; color: var(--text-faint); margin-top: -8px; } /* Details disclosure */ .ss-support-details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elev-2); overflow: hidden; } .ss-support-details summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text); user-select: none; } .ss-support-details summary::-webkit-details-marker { display: none; } .ss-support-details-summary { display: inline-flex; align-items: center; gap: 8px; } .ss-support-details-check { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--success-soft); color: var(--success-text); } .ss-support-details-toggle { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; } .ss-support-details[open] .ss-support-details-toggle::before { content: "collapse"; } .ss-support-details[open] .ss-support-details-toggle { font-size: 0; } .ss-support-details[open] .ss-support-details-toggle::before { font-size: 11px; } .ss-support-details-body { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 16px; max-height: 36vh; overflow-y: auto; } .ss-support-detail-section h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .ss-support-kv { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0; } .ss-support-kv > div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 12px; } .ss-support-kv dt { color: var(--text-faint); } .ss-support-kv dd { margin: 0; color: var(--text); word-break: break-word; } .ss-support-err-list, .ss-support-crumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; } .ss-support-err-list li { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .ss-support-err-kind { color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; } .ss-support-err-msg { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-support-crumb-list li { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 4px 0; } .ss-support-crumb-kind { color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; } .ss-support-crumb-label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Actions */ .ss-support-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } .ss-support-actions-right { display: inline-flex; gap: 8px; } .ss-support-actions-spacer { flex: 1; } .ss-support-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; font-size: 13px; font-weight: 600; border-radius: var(--radius-md); background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); cursor: pointer; transition: background 0.15s, border-color 0.15s, filter 0.15s; } .ss-support-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); } .ss-support-btn-ghost { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: 12px; padding: 7px 12px; border-radius: 999px; cursor: pointer; } .ss-support-btn-ghost:hover { color: var(--text); border-color: var(--text-muted); } .ss-support-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #5a5cdc 0%, #4a48c2 100%); color: #fff; border-color: rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 14px -6px rgba(74,72,194,0.55); transition: filter 0.15s ease, background 0.15s ease, box-shadow 0.2s ease, transform 0.08s ease; } .ss-support-btn-primary:hover { filter: brightness(1.08); } .ss-support-btn-primary:disabled { opacity: 0.7; cursor: progress; filter: none; } .ss-support-btn-icon { display: inline-flex; align-items: center; justify-content: center; } /* ── Light theme — primary button needs darker-on-hover (not brighter). In dark mode the gradient sits on a dark surface so `filter: brightness` reads as a subtle pop. On white the same filter washes the gradient out and the white text becomes unreadable. Replace it with a true colour shift + grounding shadow, the same pattern base.css uses for `.btn-primary`. */ body.theme-light .ss-support-btn-primary { background: linear-gradient(180deg, #6566e8 0%, #4d4ed1 100%); color: #ffffff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(15, 15, 15, 0.12), 0 8px 20px -8px rgba(74, 72, 194, 0.42); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10); } body.theme-light .ss-support-btn-primary:hover { filter: none; background: linear-gradient(180deg, #4d4ed1 0%, #3c3cb0 100%); box-shadow: 0 2px 4px rgba(15, 15, 15, 0.18), 0 14px 28px -10px rgba(60, 60, 176, 0.55); transform: translateY(-1px); } body.theme-light .ss-support-btn-primary:active { background: linear-gradient(180deg, #3c3cb0 0%, #2f2f99 100%); transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 15, 15, 0.16), 0 6px 14px -6px rgba(60, 60, 176, 0.45); } body.theme-light .ss-support-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.30), 0 8px 20px -8px rgba(74, 72, 194, 0.42); } body.theme-light .ss-support-btn-primary:disabled { opacity: 0.55; filter: grayscale(0.2); transform: none; cursor: progress; } /* Mobile / narrow viewports — full-bleed dialog */ @media (max-width: 540px) { .ss-support-overlay { align-items: stretch; justify-content: stretch; padding: 0; } .ss-support-dialog { max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; } } /* ═════════════════════════════════════════════════════════════════════════ /support — customer-facing page that mirrors the admin tickets UX vocab. Three tabs (Active / Resolved / Acknowledged), beautiful read-only cards, the admin's resolution message gets pride of place in a callout box. ═════════════════════════════════════════════════════════════════════════ */ .cs-shell { display: flex; flex-direction: column; gap: 18px; } .cs-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; } .cs-header-actions { flex-shrink: 0; } .cs-tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-pill); } .cs-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 18px; border: none; border-radius: var(--radius-pill); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); background: transparent; cursor: pointer; transition: background 0.15s, color 0.15s; } .cs-tab:hover { color: var(--text); } .cs-tab.is-active { background: linear-gradient(180deg, #5a5cdc 0%, #4a48c2 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 14px -8px rgba(74,72,194,0.55); } .cs-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--bg-hover); color: var(--text-muted); } .cs-tab.is-active .cs-tab-count { background: rgba(255,255,255,0.20); color: #fff; } .cs-body { display: flex; flex-direction: column; gap: 12px; } .cs-loading { display: flex; flex-direction: column; gap: 12px; } .ss-skel-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; min-height: 92px; } .cs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; animation: ssFadeUp 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both; } .cs-card-resolved { border-left: 3px solid var(--success); } .cs-card-acknowledged { border-left: 3px solid var(--warning); } .cs-card-open, .cs-card-in_progress { border-left: 3px solid var(--accent); } .cs-card-head { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cs-card-time { margin-left: auto; font-size: 11px; color: var(--text-faint); } .cs-feature-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-muted); } .cs-status-pill { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; } .cs-status-open { background: var(--accent-soft); color: var(--accent); } .cs-status-in_progress { background: var(--warning-soft); color: var(--warning-text); } .cs-status-resolved { background: var(--success-soft); color: var(--success-text); } .cs-status-acknowledged { background: var(--neutral-soft); color: var(--text-faint); } .cs-card-body { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; } /* Admin reply callout — gradient-accented for emphasis. */ .cs-message { border-radius: var(--radius-md); padding: 16px 18px; background: var(--accent-soft); border: 1px solid var(--accent); position: relative; overflow: hidden; } .cs-message.cs-message-acknowledged { background: var(--warning-soft); border-color: var(--warning); } .cs-message-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; } .cs-message-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); } .cs-message-acknowledged .cs-message-eyebrow { color: var(--warning-text); } .cs-message-time { font-size: 11px; color: var(--text-muted); } .cs-message-body { font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; } .cs-message-body p { margin: 0 0 12px; } .cs-message-body p:last-child { margin: 0; } .cs-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; } .cs-card-actions .btn-sm { padding: 7px 14px; font-size: 12px; border-radius: var(--radius-pill); } .cs-empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 48px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .cs-empty h3 { margin: 0; font-size: 17px; color: var(--text); } .cs-empty p { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 460px; } .cs-empty-illustration { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(95, 232, 138, 0.18), rgba(124, 92, 255, 0.18)); color: var(--text); margin-bottom: 6px; } .cs-empty-illustration .icon { width: 28px; height: 28px; } .cs-empty .btn-primary { margin-top: 6px; } /* Light theme polish */ body.theme-light .cs-card { box-shadow: 0 1px 2px rgba(15,15,15,0.04); } body.theme-light .cs-tabs { background: var(--bg-elev-2); } body.theme-light .cs-tab-count { background: var(--bg-hover); } body.theme-light .cs-empty { background: var(--bg); } body.theme-light .cs-card-actions .btn-sm { background: transparent; border: 1px solid var(--border); color: var(--text); } body.theme-light .cs-card-actions .btn-sm:hover { background: var(--bg-hover); } /* ═══════════════════════════════════════════════════════════════════════════ TradeByFire brand overrides — re-skin the few hard-coded SS indigo literals (orb gradient, primary button, active tab) + purple focus rings to the WOT orange→pink gradient. Appended last so they win the cascade. ═══════════════════════════════════════════════════════════════════════════ */ .ss-support-orb, .ss-support-hero-icon { background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,0.20), transparent 55%), var(--wot-grad); } .ss-support-orb { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 20px -4px rgba(255, 31, 143, 0.45), 0 0 0 6px rgba(255, 31, 143, 0.08); } .ss-support-orb:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 30px -8px rgba(255, 31, 143, 0.55), 0 0 0 8px rgba(255, 31, 143, 0.12); } .ss-support-eyebrow { background: var(--wot-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px -4px rgba(255, 31, 143, 0.45); } .ss-support-btn-primary, .cs-tab.is-active { background: var(--wot-grad); border-color: rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 14px -6px rgba(255, 31, 143, 0.5); } .ss-support-btn-primary:hover { filter: brightness(1.08); } /* Purple → pink focus rings to match the brand. */ .ss-support-chip:focus-visible, .ss-support-chip-wrap.is-open .ss-support-chip, .ss-support-textarea:focus { border-color: var(--wot-grad-end); box-shadow: 0 0 0 3px rgba(255, 31, 143, 0.22); } /* Small reply button used by the customer cards (#/support). */ .cs-card-actions .wot-btn-sm { padding: 7px 14px; font-size: 12px; border-radius: var(--wot-r-pill); } /* View title/sub used by the #/support header (match the rest of the app). */ .cs-shell .wot-view-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--wot-text-0); letter-spacing: -0.01em; } .cs-shell .wot-view-sub { margin: 0; font-size: 13px; color: var(--wot-text-1); max-width: 620px; line-height: 1.5; } /* Skeleton shimmer used while tickets load. */ .ss-skel { position: relative; overflow: hidden; background: var(--wot-bg-1); } .ss-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); transform: translateX(-100%); animation: ssSkel 1.2s infinite; } @keyframes ssSkel { to { transform: translateX(100%); } }