/* =============================================
OUTBOUND MISSION CONTROL · STYLE SYSTEM
5-Campaign Edition · Reply Type · SaaS Animations
+ Replies Management Inbox
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root {
--bg-void: #eef2fb;
--bg-panel: #ffffff;
--bg-panel-2: #f4f7ff;
--bg-hover: #e8eeff;
--border: rgba(47,107,232,0.10);
--border-bright: rgba(47,107,232,0.32);
--blue: #2f6be8;
--blue-mid: #4d84f0;
--blue-soft: rgba(47,107,232,0.08);
--blue-glow: 0 4px 24px rgba(47,107,232,0.22);
--amber: #d48b0f;
--green: #1aab6d;
--rose: #e0334f;
--rose-soft: rgba(224,51,79,0.08);
--cyan: #0284c7;
--sky: #0ea5e9;
--violet: #8b5cf6;
--red: #ef4444;
--text-hi: #0b1427;
--text-mid: #344f82;
--text-low: #7a91be;
--text-dim: #b8c8e8;
--f-display: 'Bebas Neue', 'Calibri', 'Helvetica Neue', system-ui, sans-serif;
--f-ui: 'Calibri', 'Carlito', 'Segoe UI', 'Helvetica Neue', system-ui, Arial, sans-serif;
--f-data: 'IBM Plex Mono', ui-monospace, monospace;
--r: 8px;
--r-lg: 14px;
--r-xl: 20px;
--shadow-sm: 0 1px 4px rgba(15,30,80,0.06), 0 1px 2px rgba(15,30,80,0.04);
--shadow-md: 0 4px 16px rgba(15,30,80,0.08), 0 1px 4px rgba(15,30,80,0.05);
--shadow-lg: 0 8px 32px rgba(15,30,80,0.10), 0 2px 8px rgba(15,30,80,0.06);
}
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
background: var(--bg-void);
color: var(--text-hi);
font-family: var(--f-ui);
min-height: 100vh;
overflow-x: hidden;
}
/* ── PAGE ENTRY ANIMATION ── */
@keyframes pageReveal {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── GRID BG ── */
.grid-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(47,107,232,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(47,107,232,0.045) 1px, transparent 1px);
background-size: 52px 52px;
animation: gridDrift 100s linear infinite;
}
@keyframes gridDrift {
0% { background-position: 0 0; }
100% { background-position: 52px 52px; }
}
.grid-bg::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 720px 480px at 12% 18%, rgba(47,107,232,0.13) 0%, transparent 70%),
radial-gradient(ellipse 560px 380px at 88% 72%, rgba(26,171,109,0.09) 0%, transparent 70%),
radial-gradient(ellipse 460px 340px at 60% 8%, rgba(124,82,217,0.07) 0%, transparent 70%),
radial-gradient(ellipse 380px 280px at 92% 22%, rgba(245,158,11,0.06) 0%, transparent 70%);
pointer-events: none;
animation: orbDrift 28s ease-in-out infinite alternate;
}
@keyframes orbDrift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-22px, 16px, 0) scale(1.04); }
100% { transform: translate3d(18px, -10px, 0) scale(1.02); }
}
.noise-overlay {
position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.020;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *:not(.grid-bg):not(.noise-overlay):not(.side-nav) { position: relative; z-index: 1; }
/* ── TOP BAR ── */
.topbar {
--f-ui: 'Rajdhani', 'Calibri', system-ui, sans-serif;
display: flex; align-items: center; justify-content: space-between;
height: 76px; padding: 0 28px; position: sticky; top: 0; z-index: 100;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 100%);
backdrop-filter: blur(28px) saturate(190%);
-webkit-backdrop-filter: blur(28px) saturate(190%);
box-shadow: 0 1px 0 var(--border), 0 6px 24px rgba(47,107,232,0.06);
animation: pageReveal 0.5s ease both;
}
.topbar::after {
content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
background: linear-gradient(90deg, transparent 0%, rgba(47,107,232,0.45) 25%, rgba(124,82,217,0.40) 60%, rgba(26,171,109,0.32) 100%);
pointer-events:none;
}
.topbar-left, .topbar-center, .topbar-right { display: flex; align-items: center; min-width: 0; }
.topbar-left { flex: 0 0 auto; }
.topbar-center { flex: 1 1 auto; justify-content: center; }
.topbar-right { flex: 0 0 auto; justify-content: flex-end; gap: 10px; }
.logo-mark { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.logo-svg { animation: hexBreath 4s ease-in-out infinite; flex-shrink: 0; }
@keyframes hexBreath {
0%,100% { filter: drop-shadow(0 0 5px rgba(47,107,232,0.30)); }
50% { filter: drop-shadow(0 0 16px rgba(47,107,232,0.65)); }
}
/* ── Brand video logo (assests/logo.mp4) ──
Shared across dashboard topbar, admin topbar, and the standalone login /
signup cards.
The source video has a near-white background. We use mix-blend-mode:
multiply to make that white disappear into the (also near-white) page
backgrounds — the logo itself ends up looking like it's floating on the
page with no tile/box around it. No border-radius, no border, no
container background — just the logo. */
.brand-video {
display: block;
flex-shrink: 0;
background: transparent;
border: 0;
border-radius: 0;
object-fit: contain;
mix-blend-mode: multiply;
-webkit-mix-blend-mode: multiply;
}
.brand-video-sm { width: 68px; height: 68px; }
.brand-video-md { width: 96px; height: 96px; }
.brand-video-lg { width: 128px; height: 128px; }
.logo-title {
font-family: var(--f-display); font-size: 23px; letter-spacing: 0.24em;
background: linear-gradient(135deg, var(--blue) 0%, #6d8df5 60%, var(--violet) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1;
white-space: nowrap;
}
.logo-sub { font-family: var(--f-data); font-size: 9px; letter-spacing: 0.14em; color: var(--text-low); margin-top: 3px; white-space: nowrap; }
/* Status pill */
.status-pill {
display: flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, rgba(26,171,109,0.10), rgba(26,171,109,0.06));
border: 1px solid rgba(26,171,109,0.25);
border-radius: 100px; padding: 6px 14px;
font-family: var(--f-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em;
color: var(--green);
white-space: nowrap;
transition: all 0.35s ease;
}
.status-pill.error {
background: linear-gradient(135deg, rgba(224,51,79,0.10), rgba(224,51,79,0.06));
border-color: rgba(224,51,79,0.25); color: var(--rose);
}
.pulse-dot {
width: 8px; height: 8px; background: var(--green); border-radius: 50%;
box-shadow: 0 0 0 3px rgba(26,171,109,0.14);
animation: dotPulse 1.8s ease-out infinite;
}
.status-pill.error .pulse-dot { background: var(--rose); animation: none; }
@keyframes dotPulse {
0% { box-shadow: 0 0 0 0 rgba(26,171,109,0.55); }
70% { box-shadow: 0 0 0 8px rgba(26,171,109,0); }
100%{ box-shadow: 0 0 0 0 rgba(26,171,109,0); }
}
/* Window badge */
.window-badge {
display: flex; align-items: center; gap: 7px;
padding: 6px 13px; border-radius: 100px;
font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.11em;
background: linear-gradient(135deg, rgba(26,171,109,0.09), rgba(26,171,109,0.05));
border: 1px solid rgba(26,171,109,0.25); color: var(--green);
transition: all 0.3s ease; white-space: nowrap;
}
.window-badge.closed { background:linear-gradient(135deg,rgba(224,51,79,0.09),rgba(224,51,79,0.05)); border-color:rgba(224,51,79,0.25); color:var(--rose); }
.window-badge.weekend-closed { background:linear-gradient(135deg,rgba(212,139,15,0.09),rgba(212,139,15,0.05)); border-color:rgba(212,139,15,0.25); color:var(--amber); }
.window-dot { width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0; }
.window-badge:not(.closed):not(.weekend-closed) .window-dot { animation: dotPulse 1.8s ease-out infinite; }
/* Clock / refresh / logout */
.clock-block { text-align: right; }
.clock-label { font-family:var(--f-data);font-size:9px;letter-spacing:0.14em;color:var(--text-low);text-transform:uppercase; }
.clock-time { font-family:var(--f-data);font-size:15px;color:var(--text-mid);margin-top:2px;font-weight:500; }
.refresh-btn {
display:flex;align-items:center;gap:7px;
background:linear-gradient(135deg,rgba(47,107,232,0.09),rgba(47,107,232,0.05));
border:1px solid rgba(47,107,232,0.28);color:var(--blue);
font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:0.12em;
padding:8px 18px;border-radius:var(--r);cursor:pointer;transition:all 0.22s ease;
box-shadow:var(--shadow-sm);
}
.refresh-btn:hover { background:rgba(47,107,232,0.14);box-shadow:var(--blue-glow);transform:translateY(-1px);border-color:rgba(47,107,232,0.45); }
.refresh-btn:active { transform:translateY(0); }
.refresh-icon { display:inline-block;transition:transform 0.5s ease; }
.refresh-icon.spinning { animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.logout-btn {
display:flex;align-items:center;gap:7px;background:transparent;
border:1px solid var(--border);color:var(--text-low);
font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:0.12em;
padding:8px 14px;border-radius:var(--r);cursor:pointer;transition:all 0.22s ease;
}
.logout-btn:hover { background:var(--rose-soft);border-color:rgba(224,51,79,0.30);color:var(--rose);transform:translateY(-1px); }
.logout-btn:active { transform:translateY(0); }
/* ── CHECK REPLIES BUTTON ── */
.replies-btn {
display: flex; align-items: center; gap: 8px; position: relative;
background: linear-gradient(135deg, rgba(26,171,109,0.12), rgba(26,171,109,0.06));
border: 1px solid rgba(26,171,109,0.35); color: var(--green);
font-family: var(--f-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.13em;
padding: 8px 18px; border-radius: var(--r); cursor: pointer; transition: all 0.22s ease;
box-shadow: var(--shadow-sm); white-space: nowrap;
}
.replies-btn:hover {
background: rgba(26,171,109,0.18); border-color: rgba(26,171,109,0.55);
box-shadow: 0 4px 20px rgba(26,171,109,0.22); transform: translateY(-1px);
}
.replies-btn:active { transform: translateY(0); }
.create-campaign-btn {
display:flex;align-items:center;gap:8px;position:relative;overflow:hidden;
background:
linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 55%, #6d8df5 100%);
border:1px solid transparent;color:#ffffff;
font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:0.13em;
padding:8px 18px;border-radius:var(--r);cursor:pointer;
transition:transform 0.22s ease, box-shadow 0.22s ease;
box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 18px rgba(47,107,232,0.32), 0 1px 3px rgba(15,30,80,0.08);
white-space:nowrap;
}
.create-campaign-btn::before {
content:''; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
background-size: 220% 100%;
animation: ccaSweep 4.2s ease-in-out infinite;
}
@keyframes ccaSweep {
0% { background-position: 220% 0; }
100% { background-position: -120% 0; }
}
.create-campaign-btn::after {
content:'';position:absolute;inset:0;
background:linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 55%);
pointer-events:none;
}
.create-campaign-btn:hover {
transform:translateY(-1.5px);
box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 10px 28px rgba(47,107,232,0.42), 0 2px 6px rgba(15,30,80,0.10);
}
.create-campaign-btn:active { transform:translateY(0); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 12px rgba(47,107,232,0.28); }
.create-campaign-btn svg { stroke:#ffffff; }
.create-campaign-label { position:relative; }
/* Badge counter on replies button */
.replies-count-badge {
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--green) 0%, #2dc885 100%); color: #fff;
font-family: var(--f-data); font-size: 9px; font-weight: 700;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 100px; margin-left: 2px;
box-shadow: 0 0 0 0 rgba(26,171,109,0.55), 0 2px 6px rgba(26,171,109,0.30);
animation: badgePop 0.3s cubic-bezier(0.16,1,0.3,1) both, badgeHalo 1.8s ease-out infinite 0.3s;
}
@keyframes badgePop {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes badgeHalo {
0% { box-shadow: 0 0 0 0 rgba(26,171,109,0.55), 0 2px 6px rgba(26,171,109,0.30); }
70% { box-shadow: 0 0 0 8px rgba(26,171,109,0), 0 2px 6px rgba(26,171,109,0.30); }
100% { box-shadow: 0 0 0 0 rgba(26,171,109,0), 0 2px 6px rgba(26,171,109,0.30); }
}
.replies-btn.has-unread {
border-color: rgba(26,171,109,0.55);
box-shadow: 0 4px 18px rgba(26,171,109,0.22), var(--shadow-sm);
}
/* ── WINDOW STATUS BAR ── */
.window-status-bar {
background: rgba(255,255,255,0.80);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
animation: pageReveal 0.5s 0.05s ease both;
}
.wsb-inner {
display:flex;align-items:center;gap:14px;padding:9px 32px;
font-family:var(--f-data);font-size:10px;letter-spacing:0.05em;flex-wrap:wrap;
}
.wsb-icon { display:flex;align-items:center;flex-shrink:0;color:var(--text-low); }
.wsb-label { font-weight:600;letter-spacing:0.18em;color:var(--text-low);font-size:9px;flex-shrink:0;text-transform:uppercase; }
.wsb-status {
font-weight:700;font-size:11px;letter-spacing:0.10em;
padding:2px 9px;border-radius:100px;
transition:all 0.3s ease;flex-shrink:0;
}
.wsb-status.open { color:var(--green); background:rgba(26,171,109,0.10); box-shadow:0 0 0 1px rgba(26,171,109,0.18) inset; }
.wsb-status.closed { color:var(--rose); background:rgba(224,51,79,0.08); box-shadow:0 0 0 1px rgba(224,51,79,0.18) inset; }
.wsb-status.weekend { color:var(--amber); background:rgba(212,139,15,0.08); box-shadow:0 0 0 1px rgba(212,139,15,0.20) inset; }
.wsb-sep { color:var(--text-dim);flex-shrink:0; }
.wsb-schedule { color:var(--text-low);font-size:10px;letter-spacing:0.03em; }
.wsb-right { margin-left:auto;display:flex;align-items:center;gap:16px;flex-shrink:0; }
.wsb-uk-time { font-size:10px;letter-spacing:0.10em;color:var(--text-mid);font-weight:500; }
.wsb-next { font-size:10px;color:var(--amber);letter-spacing:0.04em; }
.window-status-bar.open-state { background:linear-gradient(135deg,rgba(26,171,109,0.05),rgba(255,255,255,0.85));border-bottom-color:rgba(26,171,109,0.15); }
.window-status-bar.closed-state { background:linear-gradient(135deg,rgba(224,51,79,0.04),rgba(255,255,255,0.85));border-bottom-color:rgba(224,51,79,0.12); }
.window-status-bar.weekend-state { background:linear-gradient(135deg,rgba(212,139,15,0.04),rgba(255,255,255,0.85));border-bottom-color:rgba(212,139,15,0.12); }
/* ── CAMPAIGN FILTER BAR ── */
.campaign-filter-bar {
display:flex;align-items:center;gap:12px;padding:9px 32px;
background:rgba(255,255,255,0.75);backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
animation: pageReveal 0.5s 0.10s ease both;
}
.campaign-filter-label { font-family:var(--f-data);font-size:9px;letter-spacing:0.20em;color:var(--text-low);flex-shrink:0;text-transform:uppercase; }
.campaign-pills { display:flex;gap:5px;flex-wrap:wrap; }
.camp-pill {
display:flex;align-items:center;gap:7px;background:transparent;
border:1px solid var(--border);color:var(--text-mid);
font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:0.09em;
padding:4px 12px;border-radius:100px;cursor:pointer;transition:all 0.20s ease;
text-transform:uppercase;
}
.camp-pill:hover { background:var(--blue-soft);border-color:var(--border-bright);color:var(--blue);transform:translateY(-1px); }
.camp-pill.active {
background: linear-gradient(135deg, rgba(47,107,232,0.18) 0%, rgba(109,141,245,0.10) 100%);
border-color: rgba(47,107,232,0.50);
color: var(--blue);
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 4px 14px rgba(47,107,232,0.18);
}
.camp-pill.active .camp-pill-dot { box-shadow: 0 0 0 3px rgba(47,107,232,0.10); }
.camp-pill-dot { width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0; }
.camp-filter-meta { margin-left:auto;flex-shrink:0;font-family:var(--f-data);font-size:10px;color:var(--text-low);letter-spacing:0.04em; }
/* ── HERO STATS (5 cols) ── */
.hero-stats {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;background:var(--border);border-bottom:1px solid var(--border);
}
.stat-card {
background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(244,247,255,0.86) 100%);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
padding:30px 28px 24px;
position:relative;overflow:hidden;cursor:default;
transition: background 0.28s ease, transform 0.32s cubic-bezier(0.16,1,0.3,1), box-shadow 0.32s ease;
border-right:1px solid var(--border);
animation: statCardIn 0.55s var(--delay,0s) cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes statCardIn {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}
.stat-card:last-child { border-right:none; }
.stat-card:hover {
background:var(--bg-panel);
transform:translateY(-2px);
box-shadow: 0 12px 28px color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent),
0 2px 6px rgba(15,30,80,0.05);
}
.stat-card::before {
content:'';position:absolute;top:0;left:0;width:100%;height:3px;
background:linear-gradient(90deg,var(--accent,var(--blue)),transparent 80%);
transform:scaleX(0.35);transform-origin:left;opacity:0.55;
transition:transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}
.stat-card:hover::before { transform:scaleX(1); opacity:1; }
.stat-card::after {
content:'';position:absolute;top:0;left:0;width:3px;height:0;
background:var(--accent,var(--blue));opacity:0.35;
transition:height 0.45s cubic-bezier(0.16,1,0.3,1);
}
.stat-card:hover::after { height:50%; }
.stat-ornament {
position:absolute;top:6px;right:14px;font-family:var(--f-display);
font-size:84px;line-height:1;
color:var(--accent,var(--blue));
opacity:0.18;pointer-events:none;user-select:none;
letter-spacing:-0.02em;
background: linear-gradient(180deg, var(--accent,var(--blue)) 0%, color-mix(in srgb, var(--accent,var(--blue)) 30%, transparent) 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
transition:opacity 0.35s ease,transform 0.45s cubic-bezier(0.16,1,0.3,1);
filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent,var(--blue)) 28%, transparent));
}
.stat-card:hover .stat-ornament { opacity:0.42;transform:scale(1.08) translateY(-4px); }
.stat-label {
font-family:var(--f-ui);font-size:9.5px;font-weight:800;letter-spacing:0.24em;color:var(--text-low);
margin-bottom:14px;text-transform:uppercase;
display:inline-flex;align-items:center;gap:8px;
}
.stat-label::before {
content:''; width:6px; height:6px; border-radius:50%;
background: var(--accent, var(--blue));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent);
}
.stat-value {
font-family:var(--f-display);font-size:58px;line-height:1;
margin-bottom:16px;font-variant-numeric:tabular-nums;letter-spacing:-0.015em;
background: linear-gradient(180deg,
var(--text-hi) 0%,
var(--text-hi) 50%,
color-mix(in srgb, var(--accent, var(--blue)) 75%, var(--text-hi)) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6));
}
.stat-bar { height:3px;background:rgba(47,107,232,0.08);border-radius:100px;overflow:hidden;margin-bottom:10px; }
.stat-fill {
height:100%;width:0;border-radius:100px;
background: linear-gradient(90deg,
var(--accent,var(--blue)) 0%,
color-mix(in srgb, var(--accent,var(--blue)) 55%, white) 50%,
var(--accent,var(--blue)) 100%);
background-size: 220% 100%;
transition:width 1.6s cubic-bezier(0.16,1,0.3,1);
box-shadow:2px 0 8px color-mix(in srgb, var(--accent,var(--blue)) 35%, transparent);
animation: fillShine 3.4s ease-in-out infinite;
}
@keyframes fillShine {
0% { background-position: 220% 0; }
100% { background-position: -220% 0; }
}
.stat-sub { font-family:var(--f-data);font-size:9.5px;color:var(--text-low);letter-spacing:0.02em; }
/* ── ERROR BANNER ── */
.error-banner {
display:flex;align-items:center;gap:12px;
background:rgba(224,51,79,0.06);
border-top:1px solid rgba(224,51,79,0.15);border-bottom:1px solid rgba(224,51,79,0.15);
padding:11px 32px;font-family:var(--f-data);font-size:12px;color:var(--rose);
}
/* ── CAMPAIGNS STRIP ── */
.campaigns-strip { background:var(--bg-panel);border-bottom:1px solid var(--border); }
.cs-header { display:flex;align-items:center;justify-content:space-between;padding:14px 28px 10px; }
.cs-title {
font-family:var(--f-ui);font-size:10px;font-weight:800;letter-spacing:0.24em;color:var(--text-mid);text-transform:uppercase;
display:inline-flex;align-items:center;gap:9px;
}
.cs-title::before {
content:''; width:5px; height:5px; border-radius:50%;
background: linear-gradient(135deg, var(--blue), var(--violet));
box-shadow: 0 0 0 3px rgba(47,107,232,0.10);
}
.cs-badge { font-family:var(--f-data);font-size:9px;letter-spacing:0.10em;color:var(--blue);background:var(--blue-soft);border:1px solid rgba(47,107,232,0.20);padding:3px 9px;border-radius:4px; }
.cs-cards { display:flex;gap:0;background:var(--border);border-top:1px solid var(--border);overflow-x:auto; }
.cs-card {
flex:1;min-width:240px;background:var(--bg-panel);padding:16px 24px 18px;
border-right:1px solid var(--border);transition:all 0.22s ease;
position:relative;overflow:hidden;
animation: csCardIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes csCardIn {
from { opacity:0; transform:translateX(-12px); }
to { opacity:1; transform:translateX(0); }
}
.cs-card:nth-child(1) { animation-delay:0.05s; }
.cs-card:nth-child(2) { animation-delay:0.10s; }
.cs-card:nth-child(3) { animation-delay:0.15s; }
.cs-card:nth-child(4) { animation-delay:0.20s; }
.cs-card:nth-child(5) { animation-delay:0.25s; }
.cs-card:last-child { border-right:none; }
.cs-card:hover {
background:var(--bg-panel);
transform:translateY(-2px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--cs-accent, var(--blue)) 16%, transparent),
0 1px 3px rgba(15,30,80,0.05);
}
.cs-card::before {
content:'';position:absolute;top:0;left:0;width:4px;height:100%;
background:linear-gradient(180deg, var(--cs-accent,var(--blue)) 0%, color-mix(in srgb, var(--cs-accent,var(--blue)) 35%, transparent) 100%);
box-shadow: 0 0 14px color-mix(in srgb, var(--cs-accent,var(--blue)) 45%, transparent);
}
.cs-camp-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-accent, currentColor) 18%, transparent); }
.skeleton-camp { padding:18px 28px; }
.cs-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px; }
.cs-camp-name { font-family:var(--f-ui);font-size:13px;font-weight:700;color:var(--text-hi);line-height:1.2;max-width:180px; }
.cs-camp-key { font-family:var(--f-data);font-size:9px;letter-spacing:0.12em;color:var(--text-low);margin-top:3px; }
.cs-card-actions { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.cs-camp-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:0; }
.cs-manage-btn {
height:24px;padding:0 9px;border:1px solid rgba(47,107,232,0.18);border-radius:6px;
background:rgba(47,107,232,0.06);color:var(--blue);
font-family:var(--f-ui);font-size:9.5px;font-weight:800;letter-spacing:0.10em;
cursor:pointer;transition:all 0.18s ease;
}
.cs-manage-btn:hover { background:rgba(47,107,232,0.12);border-color:rgba(47,107,232,0.32);transform:translateY(-1px); }
.feature-locked,
.feature-locked:hover {
opacity:0.45;
cursor:not-allowed !important;
transform:none !important;
filter:grayscale(0.35);
}
.cs-metrics { display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px; }
.cs-metric-val { font-family:var(--f-display);font-size:24px;line-height:1;color:var(--text-hi); }
.cs-metric-lbl { font-family:var(--f-data);font-size:8.5px;letter-spacing:0.10em;color:var(--text-low);margin-top:2px;text-transform:uppercase; }
.cs-metric-val.manual { color:var(--green); }
.cs-metric-val.auto { color:var(--amber); }
/* ── Toggle switch ─────────────────────────────────────────────────── */
.mc-toggle { display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none; }
.mc-toggle input { position:absolute;opacity:0;width:0;height:0; }
.mc-toggle-track { position:relative;width:42px;height:24px;background:#d1d5db;border-radius:100px;transition:background .2s; }
.mc-toggle input:checked ~ .mc-toggle-track { background:var(--blue); }
.mc-toggle-thumb { position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2); }
.mc-toggle input:checked ~ .mc-toggle-track .mc-toggle-thumb { left:21px; }
.mc-toggle-text { font-family:var(--f-data);font-size:11px;letter-spacing:.07em;color:var(--text-mid); }
/* ── Radio buttons ──────────────────────────────────────────────────── */
.mc-radio { display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--f-data);font-size:12px;color:var(--text-mid); }
.mc-radio input { accent-color:var(--blue); }
.mc-integ-row { display:flex;gap:20px;margin:8px 0; }
/* ── Integrations tab layout ────────────────────────────────────────── */
.mc-integ-section { padding:16px 0;border-bottom:1px solid var(--border); }
.mc-integ-section:last-child { border-bottom:none; }
.mc-integ-label { font-family:var(--f-data);font-size:10px;letter-spacing:.12em;color:var(--text-hi);font-weight:700;text-transform:uppercase;margin-bottom:4px; }
.mc-integ-desc { font-size:12px;color:var(--text-low);margin-bottom:10px;line-height:1.5; }
.mc-integ-sub { margin-top:10px;padding-top:10px;border-top:1px solid var(--border); }
.cs-health { display:flex;gap:8px;margin-top:10px;flex-wrap:wrap; }
.mc-field-mt { margin-top:8px; }
.cs-health-tag { font-family:var(--f-data);font-size:9px;letter-spacing:0.08em;padding:2px 7px;border-radius:100px;font-weight:600; }
.cs-health-tag.delivered { background:rgba(99,102,241,0.10);color:#6366f1; }
.cs-health-tag.open { background:rgba(16,185,129,0.10);color:#10b981; }
.cs-health-tag.bounce { background:rgba(239,68,68,0.10);color:#ef4444; }
.cs-health-tag.unsub { background:rgba(249,115,22,0.10);color:#f97316; }
.cs-health-tag.error { background:rgba(107,114,128,0.12);color:#6b7280; }
.cs-reply-bar { margin-top:12px; }
.cs-reply-track { height:3px;background:rgba(47,107,232,0.08);border-radius:100px;overflow:hidden;margin-bottom:4px; }
.cs-reply-fill {
height:100%;border-radius:100px;
transition:width 1.4s cubic-bezier(0.16,1,0.3,1);
position:relative;overflow:hidden;
box-shadow: 0 0 8px color-mix(in srgb, var(--cs-accent, var(--blue)) 35%, transparent);
}
.cs-reply-fill::after {
content:'';position:absolute;inset:0;
background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
background-size: 200% 100%;
animation: fillShine 3.4s ease-in-out infinite;
}
.cs-reply-label { font-family:var(--f-data);font-size:9px;color:var(--text-low);letter-spacing:0.06em; }
/* ── MAIN GRID ── */
.main-grid {
display:grid;
grid-template-columns:290px 1fr 300px;
gap:0;background:var(--border);border-bottom:1px solid var(--border);
min-height:420px;
}
.panel {
background:var(--bg-panel);display:flex;flex-direction:column;
border-right:1px solid var(--border);
}
.panel:last-child { border-right:none; }
.panel-header {
display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;border-bottom:1px solid var(--border);
background:linear-gradient(180deg,var(--bg-panel-2),var(--bg-panel));
}
.panel-title {
font-family:var(--f-ui);font-size:9.5px;font-weight:800;letter-spacing:0.24em;color:var(--text-mid);text-transform:uppercase;
display:inline-flex;align-items:center;gap:9px;
}
.panel-title::before {
content:''; width:5px; height:5px; border-radius:50%;
background: linear-gradient(135deg, var(--blue), var(--violet));
box-shadow: 0 0 0 3px rgba(47,107,232,0.10);
}
.panel-tag { font-family:var(--f-data);font-size:9px;letter-spacing:0.1em;color:var(--blue);background:var(--blue-soft);border:1px solid rgba(47,107,232,0.20);padding:3px 9px;border-radius:4px; }
/* Donut */
.funnel-wrap { position:relative;display:flex;justify-content:center;align-items:center;padding:28px 20px 20px; }
#stageDonut { max-width:180px;max-height:180px; }
.donut-center{ position:absolute;text-align:center;pointer-events:none; }
.donut-num {
font-family:var(--f-display);font-size:34px;line-height:1;
background: linear-gradient(180deg, var(--text-hi) 0%, var(--text-hi) 55%, color-mix(in srgb, var(--blue) 65%, var(--text-hi)) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.donut-lbl { font-family:var(--f-data);font-size:9px;letter-spacing:0.22em;color:var(--text-low);margin-top:4px; }
.stage-legend { padding:0 14px 18px;display:flex;flex-direction:column;gap:5px; }
.legend-item {
display:flex;align-items:center;justify-content:space-between;
padding:8px 12px;background:var(--bg-panel-2);border:1px solid var(--border);
border-radius:var(--r);transition:all 0.22s ease;
}
.legend-item:hover { border-color:var(--border-bright);background:var(--bg-hover);transform:translateX(2px);box-shadow:var(--shadow-sm); }
.legend-dot-name { display:flex;align-items:center;gap:9px; }
.legend-dot { width:8px;height:8px;border-radius:3px;flex-shrink:0; }
.legend-name { font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--text-mid); }
.legend-count{ font-family:var(--f-display);font-size:20px;color:var(--text-hi); }
/* Bar chart */
.panel-daily { border-left:1px solid var(--border);border-right:1px solid var(--border); }
.chart-wrap { flex:1;padding:22px;min-height:300px;position:relative; }
/* Right column */
.panel-right-col { display:flex;flex-direction:column; }
/* Reply breakdown */
.reply-breakdown-panel { border-bottom:1px solid var(--border); }
.reply-donut-wrap {
display:flex;align-items:center;gap:16px;
padding:16px 18px 18px;
}
.reply-donut-chart { position:relative;flex-shrink:0;width:110px;height:110px;display:flex;align-items:center;justify-content:center; }
#replyDonut { width:110px!important;height:110px!important; }
.reply-donut-center { position:absolute;text-align:center;pointer-events:none; }
.reply-donut-num {
font-family:var(--f-display);font-size:22px;line-height:1;
background: linear-gradient(180deg, var(--text-hi) 0%, var(--text-hi) 55%, color-mix(in srgb, var(--blue) 65%, var(--text-hi)) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.reply-donut-lbl { font-family:var(--f-data);font-size:8px;letter-spacing:0.18em;color:var(--text-low);margin-top:2px; }
.reply-legend { flex:1;display:flex;flex-direction:column;gap:8px; }
.reply-legend-item {
display:flex;align-items:center;gap:10px;
padding:8px 10px;background:var(--bg-panel-2);border:1px solid var(--border);
border-radius:var(--r);transition:all 0.20s ease;cursor:default;
}
.reply-legend-item:hover { border-color:var(--border-bright);background:var(--bg-hover);transform:translateX(2px); }
.reply-legend-dot { width:8px;height:8px;border-radius:3px;flex-shrink:0; }
.reply-legend-name { font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--text-mid); }
.reply-legend-sub { font-family:var(--f-data);font-size:9px;color:var(--text-dim); }
.reply-legend-count{ font-family:var(--f-display);font-size:22px;color:var(--text-hi);margin-left:auto; }
/* Top companies */
.top-companies-panel { flex:1;display:flex;flex-direction:column; }
.company-list { padding:12px 14px;display:flex;flex-direction:column;gap:5px; }
.company-row {
display:flex;align-items:center;justify-content:space-between;
padding:9px 12px;background:var(--bg-panel-2);border:1px solid var(--border);
border-radius:var(--r);transition:all 0.22s ease;
}
.company-row:hover { border-color:var(--border-bright);background:var(--bg-hover);transform:translateX(3px);box-shadow:var(--shadow-sm); }
.company-bar-wrap { flex:1;margin:0 10px; }
.company-bar-track { height:3px;background:rgba(47,107,232,0.08);border-radius:100px;overflow:hidden; }
.company-bar-fill {
height:100%;border-radius:100px;
background:linear-gradient(90deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 50%, white) 50%, var(--blue-mid) 100%);
background-size: 220% 100%;
transition:width 1.1s cubic-bezier(0.16,1,0.3,1);
box-shadow:1px 0 6px rgba(47,107,232,0.28);
animation: fillShine 3.4s ease-in-out infinite;
}
.company-name { font-family:var(--f-ui);font-size:11px;font-weight:600;color:var(--text-mid);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.company-count { font-family:var(--f-display);font-size:20px;color:var(--cyan);min-width:28px;text-align:right; }
/* Skeleton */
.ld-row {
height:40px;
background:linear-gradient(90deg,var(--bg-panel-2) 25%,rgba(47,107,232,0.035) 50%,var(--bg-panel-2) 75%);
background-size:200% 100%;border-radius:var(--r);animation:shimmer 1.8s infinite;
}
.ld-row.short { width:65%; }
.ld-row.medium { width:80%; }
@keyframes shimmer { 0%{background-position:-200% 0}100%{background-position:200% 0} }
/* ── FEED ── */
.feed-section {
margin:22px;border:1px solid var(--border);border-radius:var(--r-xl);
overflow:hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(244,247,255,0.88) 100%);
backdrop-filter: blur(20px) saturate(170%);
-webkit-backdrop-filter: blur(20px) saturate(170%);
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 18px 50px rgba(15,30,80,0.10),
0 4px 14px rgba(47,107,232,0.06);
animation: pageReveal 0.5s 0.25s ease both;
}
.feed-header {
display:flex;align-items:center;justify-content:space-between;
padding:14px 22px;border-bottom:1px solid var(--border);
background:linear-gradient(180deg,var(--bg-panel-2),rgba(244,247,255,0.5));
}
.feed-title { font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:0.20em;color:var(--text-low);display:flex;align-items:center;gap:10px;text-transform:uppercase; }
.blip {
width:8px;height:8px;background:var(--cyan);border-radius:50%;
box-shadow: 0 0 0 3px rgba(2,132,199,0.16), 0 0 14px rgba(2,132,199,0.55);
animation:blipAnim 2.2s ease-in-out infinite;
}
@keyframes blipAnim {
0%,100% { opacity:1; box-shadow: 0 0 0 3px rgba(2,132,199,0.16), 0 0 14px rgba(2,132,199,0.6); }
50% { opacity:0.55; box-shadow: 0 0 0 6px rgba(2,132,199,0.04), 0 0 6px rgba(2,132,199,0.2); }
}
.feed-right { display:flex;align-items:center;gap:12px; }
.feed-count { font-family:var(--f-data);font-size:11px;color:var(--text-low); }
.feed-controls{ display:flex;gap:4px;flex-wrap:wrap; }
.feed-controls.hidden { display:none; }
/* Lead search box */
.feed-search {
position:relative;
display:flex;
align-items:center;
height:32px;
padding:0 10px;
background:#fff;
border:1px solid rgba(47,107,232,0.18);
border-radius:8px;
min-width:260px;
transition:border-color 0.18s ease, box-shadow 0.18s ease;
}
.feed-search:focus-within {
border-color:rgba(47,107,232,0.45);
box-shadow:0 0 0 3px rgba(47,107,232,0.10);
}
.feed-search-icon { color:var(--text-low);flex-shrink:0;margin-right:6px; }
.feed-search-input {
flex:1;
border:0;
outline:none;
background:transparent;
font-family:var(--f-data);
font-size:11.5px;
color:var(--text-hi);
height:100%;
letter-spacing:0.02em;
/* Remove Safari/WebKit's default search-input chrome (the small rounded
rectangle border drawn around the text portion). */
-webkit-appearance: none;
appearance: none;
box-shadow: none;
}
.feed-search-input::placeholder { color:var(--text-low); }
/* Hide the native browser clear-button on so only our
custom .feed-search-clear shows. Removes the small grey square some
browsers (Safari/WebKit) render inside search inputs. */
.feed-search-input::-webkit-search-decoration,
.feed-search-input::-webkit-search-cancel-button,
.feed-search-input::-webkit-search-results-button,
.feed-search-input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
}
.feed-search-clear {
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border:0;
border-radius:50%;
background:rgba(11,20,39,0.06);
color:var(--text-mid);
font-size:14px;
line-height:1;
cursor:pointer;
padding:0;
}
.feed-search-clear:hover { background:rgba(11,20,39,0.12); }
/* Inline tag next to email when lead is blocked */
.lead-block-tag {
display:inline-flex;
align-items:center;
height:16px;
padding:0 6px;
margin-left:6px;
border-radius:999px;
background:rgba(224,51,79,0.10);
border:1px solid rgba(224,51,79,0.30);
color:#a8233a;
font-family:var(--f-data, monospace);
font-size:8.5px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
}
.lead-block-tag.stopped {
background:rgba(212,139,15,0.10);
border-color:rgba(212,139,15,0.30);
color:#8a5b00;
}
.lead-block-tag.muted {
background:rgba(47,107,232,0.08);
border-color:rgba(47,107,232,0.25);
color:var(--blue);
}
/* Clickable status pill shown in the ACTIONS column when a lead has a
block on it. Reflects the current state (BLACKLISTED / STOPPED / MUTED)
and opens the state-aware action menu when clicked. */
.lead-status-tag {
display:inline-flex;
align-items:center;
height:22px;
padding:0 10px;
border-radius:999px;
font-family:var(--f-data, 'IBM Plex Mono', monospace);
font-size:9px;
font-weight:800;
letter-spacing:0.10em;
text-transform:uppercase;
cursor:pointer;
border:1px solid transparent;
transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.lead-status-tag.blacklisted {
background:rgba(224,51,79,0.12);
border-color:rgba(224,51,79,0.36);
color:#a8233a;
}
.lead-status-tag.stopped {
background:rgba(212,139,15,0.14);
border-color:rgba(212,139,15,0.40);
color:#8a5b00;
}
.lead-status-tag.muted {
background:rgba(47,107,232,0.10);
border-color:rgba(47,107,232,0.30);
color:var(--blue);
}
.lead-status-tag:hover {
transform:translateY(-1px);
filter:brightness(1.05);
box-shadow:0 4px 12px rgba(11,20,39,0.12);
}
.lead-status-tag:active {
transform:translateY(0);
}
.lead-status-tag::after {
content:'▾';
margin-left:6px;
font-size:8px;
opacity:0.7;
}
/* Small trailing kebab on each search row. Layout/column count stays
identical to the regular feed; the kebab is appended INSIDE the last
| so the table grid isn't disturbed. */
.lead-row-kebab {
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
margin-left:8px;
padding:0;
border:0;
background:transparent;
color:var(--text-mid);
font-size:18px;
line-height:1;
border-radius:6px;
cursor:pointer;
vertical-align:middle;
transition:background-color 0.15s ease, color 0.15s ease;
}
.lead-row-kebab:hover {
background:rgba(47,107,232,0.10);
color:var(--blue);
}
.lead-row-kebab:active {
background:rgba(47,107,232,0.18);
}
.feed-search-row td:last-child {
white-space:nowrap;
}
.lead-action-menu {
position:fixed !important;
z-index:2147483647 !important;
display:flex;
flex-direction:column;
width:220px !important;
min-width:200px;
max-width:280px;
padding:6px;
border:2px solid transparent;
border-radius:12px;
/* Two-layer background: white fill (padding-box) + blue gradient
painted only in the border area. Matches the SEND button gradient. */
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) border-box;
box-shadow:
0 1px 2px rgba(37,99,235,0.10),
0 12px 28px -8px rgba(37,99,235,0.30),
0 18px 40px -16px rgba(11,20,39,0.22);
font-family:var(--f-ui);
}
.lead-action-menu[style*="display:none"],
.lead-action-menu[style*="display: none"] {
display:none !important;
}
.lead-action-menu-item {
display:flex;
align-items:center;
gap:10px;
padding:8px 10px;
border:0;
background:transparent;
cursor:pointer;
text-align:left;
font-size:12px;
font-weight:600;
letter-spacing:0.04em;
color:var(--text-hi);
border-radius:6px;
}
.lead-action-menu-item:hover { background:rgba(47,107,232,0.08); }
.lead-action-menu-item.danger { color:#a8233a; }
.lead-action-menu-item.danger:hover { background:rgba(224,51,79,0.10); }
.lead-action-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
font-size:13px;
}
.filter-btn {
display:flex;align-items:center;gap:6px;
background:transparent;border:1px solid var(--border);color:var(--text-mid);
font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:0.10em;
padding:5px 12px;border-radius:var(--r);cursor:pointer;transition:all 0.18s ease;
text-transform:uppercase;
}
.filter-btn:hover { background:var(--blue-soft);border-color:var(--border-bright);color:var(--blue);transform:translateY(-1px); }
.filter-btn.active { background:linear-gradient(135deg,rgba(47,107,232,0.12),rgba(47,107,232,0.06));border-color:rgba(47,107,232,0.35);color:var(--blue);box-shadow:var(--shadow-sm); }
.filter-manual.active { background:rgba(26,171,109,0.10);border-color:rgba(26,171,109,0.35);color:#0e8a55; }
.filter-auto.active { background:rgba(245,158,11,0.10);border-color:rgba(245,158,11,0.35);color:#92400e; }
.fbtn-dot { width:5px;height:5px;border-radius:50%;flex-shrink:0; }
.feed-table-wrap { overflow-x:auto; }
.feed-table { width:100%;border-collapse:collapse; }
.feed-table thead tr { background:linear-gradient(180deg,var(--bg-panel-2),var(--bg-panel)); }
.feed-table th {
font-family:var(--f-ui);font-size:9.5px;font-weight:700;letter-spacing:0.20em;color:var(--text-low);
padding:11px 18px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;text-transform:uppercase;
}
.feed-table td { padding:13px 18px;border-bottom:1px solid rgba(47,107,232,0.05);vertical-align:middle;white-space:nowrap; }
.feed-table tbody tr {
transition: background 0.18s ease, box-shadow 0.18s ease;
opacity:0;animation:rowIn 0.38s ease forwards;
position: relative;
}
.feed-table tbody tr:hover {
background: linear-gradient(90deg, rgba(47,107,232,0.06) 0%, rgba(255,255,255,0) 60%);
box-shadow: inset 3px 0 0 var(--blue);
}
@keyframes rowIn { from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)} }
.c-idx { font-family:var(--f-data);font-size:11px;color:var(--text-dim); }
.c-time { font-family:var(--f-data);font-size:11px;color:var(--text-low); }
.c-name { font-family:var(--f-ui);font-size:13px;font-weight:700;color:var(--text-hi); }
.c-email { font-family:var(--f-data);font-size:11px;color:var(--text-mid); }
.c-co { font-family:var(--f-ui);font-size:13px;font-weight:600;color:var(--cyan); }
.c-subj { font-family:var(--f-data);font-size:11px;color:var(--text-mid);max-width:220px;overflow:hidden;text-overflow:ellipsis; }
/* Campaign tags — all 5 */
.camp-tag {
display:inline-flex;align-items:center;gap:5px;
font-family:var(--f-data);font-size:10px;
padding:3px 9px;border-radius:4px;white-space:nowrap;
transition: transform 0.15s ease;
}
.camp-tag:hover { transform:scale(1.04); }
.ct-mk { background:rgba(245,166,35,0.09);color:#a86200;border:1px solid rgba(245,166,35,0.28); }
.ct-bi { background:rgba(26,171,109,0.09);color:#0e8a55;border:1px solid rgba(26,171,109,0.28); }
.ct-bm { background:rgba(14,165,233,0.09);color:#0369a1;border:1px solid rgba(14,165,233,0.28); }
.ct-cf { background:rgba(139,92,246,0.09);color:#6d28d9;border:1px solid rgba(139,92,246,0.28); }
.ct-bg { background:rgba(239,68,68,0.09); color:#b91c1c;border:1px solid rgba(239,68,68,0.28); }
.ct-xx { background:rgba(47,107,232,0.06);color:var(--text-low);border:1px solid var(--border); }
.camp-tag-dot { width:5px;height:5px;border-radius:50%;display:inline-block;flex-shrink:0; }
/* Stage / reply badges */
.stage-badge {
display:inline-flex;align-items:center;
padding:4px 11px;border-radius:100px;
font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:0.06em;white-space:nowrap;
box-shadow:0 1px 3px rgba(0,0,0,0.06);
transition:transform 0.15s ease;
}
.stage-badge:hover { transform:scale(1.04); }
.b1{background:rgba(47,107,232,0.09);color:#1d55c9;border:1px solid rgba(47,107,232,0.22);}
.b2{background:rgba(212,139,15,0.09);color:#a86200;border:1px solid rgba(212,139,15,0.22);}
.b3{background:rgba(26,171,109,0.09);color:#0e8a55;border:1px solid rgba(26,171,109,0.22);}
.b4{background:rgba(224,51,79,0.09); color:#b81c38;border:1px solid rgba(224,51,79,0.22);}
.b5{background:rgba(124,82,217,0.09);color:#5c34b5;border:1px solid rgba(124,82,217,0.22);}
/* Reply type badges */
.reply-badge-manual {
display:inline-flex;align-items:center;gap:5px;
padding:4px 11px;border-radius:100px;
font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:0.06em;
background:rgba(26,171,109,0.10);color:#0e8a55;border:1px solid rgba(26,171,109,0.25);
white-space:nowrap;
}
.reply-badge-auto {
display:inline-flex;align-items:center;gap:5px;
padding:4px 11px;border-radius:100px;
font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:0.06em;
background:rgba(245,158,11,0.10);color:#92400e;border:1px solid rgba(245,158,11,0.25);
white-space:nowrap;
}
.reply-badge-dot { width:5px;height:5px;border-radius:50%; }
.skeleton-row td { border-bottom:1px solid var(--border); }
.sk-line {
height:18px;
background:linear-gradient(90deg,var(--bg-panel-2) 25%,rgba(47,107,232,0.035) 50%,var(--bg-panel-2) 75%);
background-size:200% 100%;border-radius:4px;animation:shimmer 1.8s infinite;
}
.sk-line.short { width:55%; }
.empty-state {
text-align:center;padding:56px 32px;
font-family:var(--f-data);font-size:12px;color:var(--text-low);letter-spacing:0.06em;
position:relative;
}
.empty-state::before {
content:''; display:block; width:42px; height:42px; margin:0 auto 14px;
border-radius:50%;
background:
radial-gradient(circle at 50% 40%, rgba(47,107,232,0.18) 0%, transparent 70%),
linear-gradient(135deg, rgba(47,107,232,0.08), rgba(124,82,217,0.08));
border: 1px solid rgba(47,107,232,0.18);
box-shadow: 0 0 0 6px rgba(47,107,232,0.04), 0 6px 18px rgba(47,107,232,0.10);
}
/* ── TICKER ── */
.ticker-bar {
display:flex;align-items:center;height:34px;
border-top:1px solid var(--border);
background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2));
overflow:hidden;position:sticky;bottom:0;z-index:50;
box-shadow:0 -2px 12px rgba(47,107,232,0.05);
}
.ticker-label {
background: linear-gradient(135deg, var(--blue) 0%, #5590ff 55%, var(--violet) 100%);
color:#fff;
font-family:var(--f-ui);font-size:10px;font-weight:800;letter-spacing:0.22em;
padding:0 22px;height:100%;display:flex;align-items:center;gap:8px;flex-shrink:0;
text-transform:uppercase;
box-shadow: 6px 0 20px rgba(47,107,232,0.30);
position: relative;
}
.ticker-label::before {
content:''; width:6px; height:6px; border-radius:50%;
background:#ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.30);
animation: dotPulse 1.8s ease-out infinite;
}
.ticker-track {
overflow:hidden;
flex:1;
position: relative;
}
.ticker-track::before,
.ticker-track::after {
content:'';
position:absolute;
top:0;
bottom:0;
width:32px;
pointer-events:none;
z-index:1;
}
.ticker-track::before {
left:0;
background: linear-gradient(90deg, rgba(20,40,122,0.40), rgba(20,40,122,0));
}
.ticker-track::after {
right:0;
background: linear-gradient(270deg, rgba(86,126,255,0.34), rgba(86,126,255,0));
}
.ticker-inner {
font-family:var(--f-data);font-size:11px;color:var(--text-mid);white-space:nowrap;
display:inline-block;
min-width:max-content;
padding-left:0;
padding-right:56px;
animation:tickScroll 42s linear infinite;
will-change:transform;
}
@keyframes tickScroll {
0% { transform: translateX(100%); }
100% { transform: translateX(calc(-100% - 56px)); }
}
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:8px;height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(47,107,232,0.30), rgba(124,82,217,0.28));
border-radius:100px;
border: 2px solid var(--bg-void);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(47,107,232,0.55), rgba(124,82,217,0.50));
background-clip: padding-box;
}
* { scrollbar-color: rgba(47,107,232,0.30) transparent; scrollbar-width: thin; }
/* ============================================================
REPLIES MANAGEMENT VIEW
============================================================ */
.replies-view {
position: fixed; inset: 0; z-index: 200;
display: flex; flex-direction: column;
background: var(--bg-void);
animation: repliesSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
height: 100vh; min-height: 0; overflow: hidden;
}
@keyframes repliesSlideIn {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
.replies-topbar {
display: flex; align-items: center; justify-content: space-between;
height: 60px; padding: 0 24px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 16px rgba(47,107,232,0.07);
flex-shrink: 0; z-index: 10;
}
.replies-topbar-left { display: flex; align-items: center; gap: 16px; }
.replies-topbar-right { display: flex; align-items: center; gap: 12px; }
.back-to-dash-btn {
display: flex; align-items: center; gap: 8px;
background: transparent; border: 1px solid var(--border); color: var(--text-mid);
font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
padding: 7px 14px; border-radius: var(--r); cursor: pointer; transition: all 0.20s ease;
white-space: nowrap;
}
.back-to-dash-btn:hover { background: var(--blue-soft); border-color: var(--border-bright); color: var(--blue); transform: translateX(-2px); }
.replies-topbar-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
.replies-topbar-title {
display: flex; align-items: center; gap: 9px;
font-family: var(--f-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
color: var(--text-hi); text-transform: uppercase;
}
.replies-count-chip {
font-family: var(--f-data); font-size: 10px; letter-spacing: 0.08em;
color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(47,107,232,0.20);
padding: 3px 10px; border-radius: 100px;
}
.replies-refresh-btn {
display: flex; align-items: center; gap: 7px;
background: linear-gradient(135deg,rgba(47,107,232,0.09),rgba(47,107,232,0.05));
border: 1px solid rgba(47,107,232,0.28); color: var(--blue);
font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
padding: 7px 15px; border-radius: var(--r); cursor: pointer; transition: all 0.20s ease;
}
.replies-refresh-btn:hover { background: rgba(47,107,232,0.14); box-shadow: var(--blue-glow); transform: translateY(-1px); }
.replies-camp-filter { display: flex; align-items: center; gap: 8px; }
.replies-camp-label { font-family: var(--f-data); font-size: 9px; letter-spacing: 0.18em; color: var(--text-low); text-transform: uppercase; flex-shrink: 0; }
.replies-camp-select {
background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-mid);
font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
padding: 6px 12px; border-radius: var(--r); cursor: pointer; transition: all 0.20s ease; outline: none;
}
.replies-camp-select:hover, .replies-camp-select:focus { border-color: var(--border-bright); background: var(--bg-hover); }
.replies-body { flex: 1 1 auto; display: flex; overflow: hidden; min-height: 0; height: 0; }
.replies-sidebar {
width: 320px; flex: 0 0 320px; display: flex; flex-direction: column;
background: var(--bg-panel); border-right: 1px solid var(--border);
overflow: hidden; min-height: 0; height: 100%;
}
.replies-search-wrap {
display: flex; align-items: center; gap: 10px; padding: 12px 14px;
border-bottom: 1px solid var(--border); background: var(--bg-panel-2); flex-shrink: 0;
}
.replies-search-icon { color: var(--text-low); flex-shrink: 0; }
.replies-search { flex: 1; background: transparent; border: none; outline: none; font-family: var(--f-ui); font-size: 13px; font-weight: 500; color: var(--text-hi); }
.replies-search::placeholder { color: var(--text-dim); }
.replies-tabs {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px; padding: 10px 12px 12px; border-bottom: 1px solid var(--border);
background: var(--bg-panel-2); flex-shrink: 0;
}
.replies-tab {
--tab-color: var(--blue); --tab-soft: rgba(47,107,232,0.08); --tab-border: rgba(47,107,232,0.18);
min-width: 0; min-height: 40px;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
background: rgba(255,255,255,0.72); border: 1px solid var(--border); border-radius: 8px;
font-family: var(--f-ui); font-size: 9px; font-weight: 800; letter-spacing: 0.10em;
color: var(--text-low); padding: 8px 9px; cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
text-transform: uppercase;
}
.replies-tab[data-tab="manual"] { --tab-color:#0e8a55; --tab-soft:rgba(26,171,109,0.10); --tab-border:rgba(26,171,109,0.28); }
.replies-tab[data-tab="auto"] { --tab-color:#a86200; --tab-soft:rgba(245,158,11,0.11); --tab-border:rgba(245,158,11,0.30); }
.replies-tab[data-tab="followups"] { --tab-color:#1d55c9; --tab-soft:rgba(47,107,232,0.10); --tab-border:rgba(47,107,232,0.30); }
.replies-tab[data-tab="unread"] { --tab-color:#b91c1c; --tab-soft:rgba(239,68,68,0.10); --tab-border:rgba(239,68,68,0.28); }
.replies-tab:hover { color: var(--tab-color); border-color: var(--tab-border); background: var(--tab-soft); transform: translateY(-1px); }
.replies-tab.active { color: var(--tab-color); border-color: var(--tab-border); background: linear-gradient(180deg, rgba(255,255,255,0.92), var(--tab-soft)); box-shadow: 0 6px 16px rgba(47,107,232,0.08); }
.replies-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,0.9); }
.replies-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.replies-tab-count { display: inline-flex; align-items: center; justify-content: center; background: rgba(47,107,232,0.08); color: var(--tab-color); font-family: var(--f-data); font-size: 10px; font-weight: 800; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 7px; }
.replies-tab.active .replies-tab-count { background: var(--tab-color); color: #fff; }
.replies-lead-list { flex: 1 1 auto; min-height: 0; height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.replies-lead-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid rgba(47,107,232,0.06);
border-left: 4px solid transparent; cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
position: relative; animation: leadItemIn 0.30s ease both;
}
@keyframes leadItemIn { from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)} }
.replies-lead-item:hover { background:linear-gradient(135deg,rgba(47,107,232,0.18),rgba(255,255,255,0.78)),#e9f1ff; border-left-color:rgba(47,107,232,0.70); box-shadow:inset 0 0 0 1px rgba(47,107,232,0.16),0 4px 14px rgba(47,107,232,0.08); }
.replies-lead-item.active { background:linear-gradient(135deg,rgba(47,107,232,0.26),rgba(255,255,255,0.84) 68%),#dce9ff; border-left-color:#1d55c9; box-shadow:inset 0 0 0 1px rgba(47,107,232,0.32),inset 14px 0 20px rgba(47,107,232,0.14),0 6px 18px rgba(47,107,232,0.13); }
.replies-lead-item.active:hover { background:linear-gradient(135deg,rgba(47,107,232,0.32),rgba(255,255,255,0.82) 66%),#d5e5ff; box-shadow:inset 0 0 0 1px rgba(47,107,232,0.40),inset 14px 0 20px rgba(47,107,232,0.18),0 8px 22px rgba(47,107,232,0.16); }
.replies-lead-item.active .rli-name { color:#082a63; }
.replies-lead-item.active .rli-company { color:#1d55c9; }
.replies-lead-item.active .rli-time, .replies-lead-item.active .rli-preview { color:#5f78aa; }
.replies-lead-item.active::after { content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid var(--bg-void); }
.replies-scroll-loader { padding:16px;text-align:center;border-top:1px solid rgba(47,107,232,0.08);color:var(--text-dim);font-family:var(--f-data);font-size:10px;letter-spacing:0.12em; }
.rli-avatar { width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:16px;color:#fff; }
.rli-content { flex:1;min-width:0; }
.rli-top { display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:3px; }
.rli-name { font-family:var(--f-ui);font-size:13px;font-weight:700;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.rli-name-wrap { display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%; }
.rli-unread-dot { width:10px;height:10px;min-width:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 10px rgba(239,68,68,0.45);flex-shrink:0; }
.rli-time { font-family:var(--f-data);font-size:9.5px;color:var(--text-dim);white-space:nowrap;flex-shrink:0; }
.rli-company { font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px; }
.rli-bottom { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.rli-preview { font-family:var(--f-data);font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px; }
.rli-camp-badge { display:inline-flex;align-items:center;font-family:var(--f-data);font-size:9px;letter-spacing:0.04em;padding:2px 7px;border-radius:3px;flex-shrink:0; }
.rli-type-badge { display:inline-flex;align-items:center;gap:4px;font-family:var(--f-data);font-size:9px;letter-spacing:0.04em;padding:2px 7px;border-radius:3px;flex-shrink:0; }
.rli-type-manual { background:rgba(26,171,109,0.10);color:#0e8a55;border:1px solid rgba(26,171,109,0.20); }
.rli-type-auto { background:rgba(245,158,11,0.10);color:#92400e;border:1px solid rgba(245,158,11,0.20); }
.rli-followup-badge { display:inline-flex;align-items:center;gap:4px;font-family:var(--f-data);font-size:9px;letter-spacing:0.04em;padding:2px 7px;border-radius:3px;flex-shrink:0;background:rgba(239,68,68,0.09);color:#b91c1c;border:1px solid rgba(239,68,68,0.20); }
.rli-followup-badge.today { background:rgba(47,107,232,0.09);color:var(--blue);border-color:rgba(47,107,232,0.22); }
.replies-lead-skeleton { display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(47,107,232,0.06); }
.rls-avatar { width:38px;height:38px;border-radius:50%;flex-shrink:0; }
.rls-lines { flex:1; }
.sk-block { background:linear-gradient(90deg,var(--bg-panel-2) 25%,rgba(47,107,232,0.04) 50%,var(--bg-panel-2) 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.8s infinite; }
.sk-line-a { height:12px;width:70%;margin-bottom:8px; }
.sk-line-b { height:10px;width:100%; }
.sk-line-b.short { width:55%; }
.replies-list-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:14px;flex:1; }
.replies-list-empty-icon { color:var(--text-dim);opacity:0.6; }
.replies-list-empty-title { font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:0.14em;color:var(--text-low);text-transform:uppercase; }
.replies-list-empty-sub { font-family:var(--f-data);font-size:11px;color:var(--text-dim);line-height:1.6;max-width:220px; }
/* ── THREAD PANEL ── */
:root {
--chat-bg-base: #dfe7ec;
--chat-bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23b0c4cc' stroke-width='0.7' opacity='0.55'%3E%3Cellipse cx='10' cy='10' rx='4' ry='6.5' transform='rotate(35 10 10)'/%3E%3Cellipse cx='50' cy='50' rx='4' ry='6.5' transform='rotate(35 50 50)'/%3E%3Ccircle cx='40' cy='10' r='2.2'/%3E%3Ccircle cx='70' cy='40' r='2.2'/%3E%3Ccircle cx='10' cy='50' r='1.4'/%3E%3Ccircle cx='60' cy='70' r='1.4'/%3E%3Cline x1='68' y1='16' x2='68' y2='22'/%3E%3Cline x1='65' y1='19' x2='71' y2='19'/%3E%3Cline x1='18' y1='66' x2='18' y2='72'/%3E%3Cline x1='15' y1='69' x2='21' y2='69'/%3E%3Cpolygon points='35,64 38,58 41,64'/%3E%3Cpolygon points='75,25 78,19 81,25'/%3E%3Cpath d='M55 5 Q60 2 65 5 Q60 8 55 5Z'/%3E%3Cpath d='M5 35 Q10 32 15 35 Q10 38 5 35Z'/%3E%3Ccircle cx='28' cy='35' r='1'/%3E%3Ccircle cx='32' cy='33' r='1'/%3E%3Ccircle cx='30' cy='38' r='1'/%3E%3Ccircle cx='62' cy='55' r='1'/%3E%3Ccircle cx='66' cy='53' r='1'/%3E%3Ccircle cx='64' cy='58' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.replies-thread-panel { flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;background-color:var(--chat-bg-base);background-image:var(--chat-bg-pattern);background-repeat:repeat;background-size:80px 80px;min-width:0;min-height:0;height:100%; }
.replies-empty-state { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:48px;animation:pageReveal 0.4s ease both; }
.res-icon { opacity:0.45; }
.res-title { font-family:var(--f-ui);font-size:14px;font-weight:700;letter-spacing:0.18em;color:#6b8a9a;text-transform:uppercase;background:rgba(255,255,255,0.6);padding:8px 20px;border-radius:100px;backdrop-filter:blur(6px); }
.res-sub { font-family:var(--f-data);font-size:11px;color:#8aa4ae;text-align:center;max-width:280px;line-height:1.7;background:rgba(255,255,255,0.5);padding:8px 16px;border-radius:var(--r);backdrop-filter:blur(4px); }
.replies-thread-header { display:flex;align-items:center;gap:14px;padding:14px 20px;background:rgba(255,255,255,0.95);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);flex-shrink:0;box-shadow:0 2px 10px rgba(47,107,232,0.05);animation:pageReveal 0.25s ease both; }
.rth-avatar { width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:17px;color:#fff; }
.rth-info { flex:1;min-width:0; }
.rth-name { font-family:var(--f-ui);font-size:14px;font-weight:700;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.rth-meta { display:flex;align-items:center;gap:8px;margin-top:2px; }
.rth-email { font-family:var(--f-data);font-size:11px;color:var(--text-mid); }
.rth-sep { color:var(--text-dim);font-size:10px; }
.rth-company { font-family:var(--f-ui);font-size:11px;font-weight:600;color:var(--cyan); }
.rth-badges { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.rth-camp-badge { font-family:var(--f-data);font-size:10px;padding:4px 10px;border-radius:4px; }
.rth-reply-type { font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:0.08em;padding:4px 11px;border-radius:100px; }
.rth-reply-manual { background:rgba(26,171,109,0.10);color:#0e8a55;border:1px solid rgba(26,171,109,0.25); }
.rth-reply-auto { background:rgba(245,158,11,0.10);color:#92400e;border:1px solid rgba(245,158,11,0.25); }
.rth-actions { display:flex;align-items:center;gap:8px;margin-left:8px; }
.rth-action-btn { display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r);background:transparent;border:1px solid var(--border);color:var(--text-low);cursor:pointer;transition:all 0.18s ease; }
.rth-action-btn:hover { background:var(--blue-soft);border-color:var(--border-bright);color:var(--blue);transform:rotate(180deg); }
.replies-thread-messages { flex:1 1 auto;min-height:0;height:0;overflow-y:auto;overflow-x:hidden;padding:16px 28px 20px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;background:transparent;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; }
.thread-date-sep { display:flex;align-items:center;justify-content:center;margin:10px 0 6px; }
.thread-date-sep-line { display:none; }
.thread-date-sep-text { font-family:var(--f-data);font-size:10px;letter-spacing:0.06em;white-space:nowrap;background:rgba(255,255,255,0.75);color:#4a6670;padding:4px 13px;border-radius:100px;box-shadow:0 1px 3px rgba(0,0,0,0.10);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.5); }
.chat-bubble-wrap { display:flex;gap:10px;max-width:72%;animation:bubbleIn 0.22s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes bubbleIn { from{opacity:0;transform:translateY(8px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)} }
.chat-bubble-wrap.inbound { align-self:flex-start;flex-direction:row; }
.chat-bubble-wrap.outbound { align-self:flex-end;flex-direction:row-reverse; }
.bubble-avatar { width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:12px;color:#fff;margin-top:2px;box-shadow:0 1px 4px rgba(0,0,0,0.18); }
.bubble-content { display:flex;flex-direction:column;gap:4px;min-width:0; }
.chat-bubble { padding:9px 14px 9px;border-radius:14px;position:relative;line-height:1.6;word-break:break-word;white-space:pre-wrap; }
.chat-bubble-wrap.inbound .chat-bubble { background:#ffffff;border:none;border-top-left-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,0.14),0 1px 1px rgba(0,0,0,0.06);font-family:var(--f-ui);font-size:13.5px;color:#111827; }
.chat-bubble-wrap.outbound .chat-bubble { background:linear-gradient(135deg,#2f6be8,#4d84f0);border:none;border-top-right-radius:3px;box-shadow:0 1px 4px rgba(47,107,232,0.35),0 1px 2px rgba(0,0,0,0.08);font-family:var(--f-ui);font-size:13.5px;color:#fff; }
.chat-bubble-wrap.outbound.manual-reply .chat-bubble { background:linear-gradient(135deg,#1aab6d,#22c984);border:none;border-top-right-radius:3px;box-shadow:0 1px 4px rgba(26,171,109,0.40),0 1px 2px rgba(0,0,0,0.08); }
.bubble-type-tag { display:inline-flex;align-items:center;gap:4px;font-family:var(--f-data);font-size:9px;letter-spacing:0.08em;padding:2px 7px;border-radius:3px;margin-bottom:5px; }
.btt-manual-in { background:rgba(26,171,109,0.12);color:#0e8a55;border:1px solid rgba(26,171,109,0.25); }
.btt-auto-in { background:rgba(245,158,11,0.12);color:#92400e;border:1px solid rgba(245,158,11,0.25); }
.btt-out-auto { background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;border:1px solid rgba(255,255,255,0.18);box-shadow:0 2px 8px rgba(2,132,199,0.28); }
.btt-out-manual { background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:1px solid rgba(255,255,255,0.18);box-shadow:0 2px 8px rgba(22,163,74,0.28); }
.bubble-meta { display:flex;align-items:center;gap:8px;margin-top:2px; }
.chat-bubble-wrap.outbound .bubble-meta { justify-content:flex-end; }
.bubble-time { font-family:var(--f-data);font-size:9.5px;color:#7a9aaa; }
.bubble-sender { font-family:var(--f-data);font-size:9.5px;color:#7a9aaa; }
.delivery-ticks { display:inline-flex;align-items:center;min-width:18px;font-family:var(--f-data);font-size:12px;font-weight:800;line-height:1;letter-spacing:0; }
.delivery-ticks.sending { color:#8fa3bf;opacity:0.85; }
.delivery-ticks.sent { color:#2f6be8; }
.delivery-ticks.failed { justify-content:center;width:16px;height:16px;min-width:16px;border-radius:50%;background:rgba(224,51,79,0.12);color:var(--rose);border:1px solid rgba(224,51,79,0.28); }
.thread-loading { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:48px; }
.thread-loading-spinner { width:32px;height:32px;border:2px solid rgba(47,107,232,0.15);border-top-color:var(--blue);border-radius:50%;animation:spin 0.7s linear infinite; }
.thread-loading-text { font-family:var(--f-data);font-size:11px;letter-spacing:0.08em;color:#5a7a8a;background:rgba(255,255,255,0.70);padding:6px 16px;border-radius:100px;backdrop-filter:blur(6px); }
.thread-error { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px; }
.thread-error-text { font-family:var(--f-data);font-size:12px;color:var(--rose);text-align:center;letter-spacing:0.04em;background:rgba(255,255,255,0.75);padding:10px 18px;border-radius:var(--r);backdrop-filter:blur(6px); }
.thread-error-retry { background:rgba(255,255,255,0.7);border:1px solid rgba(224,51,79,0.3);color:var(--rose);font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:0.12em;padding:7px 18px;border-radius:var(--r);cursor:pointer;transition:all 0.20s ease;backdrop-filter:blur(4px); }
.thread-error-retry:hover { background:var(--rose-soft); }
.replies-compose { background:rgba(240,246,248,0.98);border-top:1px solid rgba(180,200,210,0.5);flex-shrink:0;padding:0;backdrop-filter:blur(16px);animation:pageReveal 0.25s ease both;box-shadow:0 -2px 12px rgba(0,0,0,0.06); }
.compose-info-bar { display:flex;align-items:center;gap:8px;padding:7px 18px;border-bottom:1px solid rgba(47,107,232,0.07);background:rgba(47,107,232,0.03);font-family:var(--f-data);font-size:10px;color:var(--text-low);letter-spacing:0.04em; }
.compose-info-bar svg { color:var(--blue);opacity:0.7;flex-shrink:0; }
.compose-followup-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(47,107,232,0.08);background:linear-gradient(180deg,rgba(255,255,255,0.82),rgba(246,250,253,0.76));box-shadow:inset 0 1px 0 rgba(255,255,255,0.82); }
.compose-followup-manual { display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:310px; }
.compose-followup-toggle { display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:1px solid rgba(47,107,232,0.15);border-radius:var(--r);background:#fff;font-family:var(--f-ui);font-size:10px;font-weight:800;letter-spacing:0.12em;color:var(--text-low);cursor:pointer;user-select:none;transition:border-color 0.18s ease,background 0.18s ease,color 0.18s ease; }
.compose-followup-toggle:hover { border-color:rgba(47,107,232,0.28);color:var(--blue);background:rgba(47,107,232,0.04); }
.compose-followup-toggle input { accent-color:var(--blue); }
.compose-followup-picker { display:flex;align-items:center;gap:8px;height:32px;padding:0 9px;border:1px solid rgba(47,107,232,0.18);border-radius:var(--r);background:#fff;box-shadow:0 1px 8px rgba(47,107,232,0.05); }
.compose-followup-date-label { font-family:var(--f-ui);font-size:9px;font-weight:800;letter-spacing:0.14em;color:var(--text-low); }
.compose-followup-date { width:142px;height:28px;border:0;background:transparent;color:var(--text-mid);font-family:var(--f-data);font-size:11px;padding:0;outline:none;color-scheme:light; }
.compose-followup-date:disabled { opacity:0.55;cursor:not-allowed; }
.compose-info-toggle { display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:1px solid rgba(26,171,109,0.20);border-radius:var(--r);background:rgba(26,171,109,0.06);color:#148a5a;font-family:var(--f-ui);font-size:9.5px;font-weight:800;letter-spacing:0.12em;white-space:nowrap;cursor:pointer;user-select:none;transition:all 0.18s ease; }
.compose-info-toggle input { accent-color:#1aab6d; }
.compose-info-toggle:hover,.compose-info-toggle.active { background:rgba(26,171,109,0.12);border-color:rgba(26,171,109,0.32); }
.compose-info-toggle.locked { opacity:0.72;cursor:not-allowed; }
.compose-next-followups { display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:1 1 520px;min-width:280px;overflow:hidden; }
.compose-next-followups-label { flex:0 0 auto;font-family:var(--f-ui);font-size:9.5px;font-weight:800;letter-spacing:0.14em;color:var(--text-low);white-space:nowrap; }
.compose-template-select { width:min(100%,260px);height:32px;border:1px solid rgba(47,107,232,0.18);border-radius:var(--r);background:#fff;color:var(--text-mid);font-family:var(--f-ui);font-size:10.5px;font-weight:800;letter-spacing:0.06em;padding:0 10px;outline:none;cursor:pointer;transition:border-color 0.18s ease,box-shadow 0.18s ease,color 0.18s ease; }
.compose-template-select:hover,.compose-template-select:focus { border-color:rgba(47,107,232,0.38);box-shadow:0 2px 10px rgba(47,107,232,0.10);color:var(--blue); }
.compose-template-select.active { background:rgba(47,107,232,0.08);border-color:rgba(47,107,232,0.34);color:var(--blue); }
.compose-template-select:disabled { opacity:0.58;cursor:not-allowed;box-shadow:none; }
.compose-followup-stop {
display:inline-flex;
align-items:center;
height:32px;
padding:0 14px;
border-radius:var(--r);
background:linear-gradient(135deg, #ef3553 0%, #d62443 55%, #b41c38 100%);
border:1px solid transparent;
color:#ffffff;
font-family:var(--f-ui);
font-size:10px;
font-weight:800;
letter-spacing:0.12em;
text-transform:uppercase;
cursor:pointer;
position:relative;
overflow:hidden;
box-shadow:
0 1px 0 rgba(255,255,255,0.22) inset,
0 6px 18px rgba(224,51,79,0.42),
0 1px 3px rgba(120,15,35,0.20);
transition:transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.compose-followup-stop::after {
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 55%);
pointer-events:none;
}
.compose-followup-stop:hover {
transform:translateY(-1.5px);
filter:brightness(1.05);
box-shadow:
0 1px 0 rgba(255,255,255,0.28) inset,
0 10px 26px rgba(224,51,79,0.55),
0 2px 6px rgba(120,15,35,0.25);
}
.compose-followup-stop:active {
transform:translateY(0);
box-shadow:
0 1px 0 rgba(255,255,255,0.22) inset,
0 4px 12px rgba(224,51,79,0.32);
}
.compose-followup-stop:disabled {
opacity:0.55;
cursor:not-allowed;
transform:none;
filter:none;
box-shadow:none;
}
.compose-body { display:flex;align-items:flex-end;gap:12px;padding:14px 16px 12px; }
.compose-left { flex:1;position:relative;padding-top:8px; }
.compose-resize-handle { position:absolute;top:0;left:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:58px;height:16px;transform:translateX(-50%);border:1px solid rgba(47,107,232,0.18);border-radius:999px;background:rgba(255,255,255,0.96);color:var(--text-low);box-shadow:0 4px 14px rgba(47,107,232,0.12);cursor:ns-resize;transition:border-color 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,background 0.18s ease; }
.compose-resize-handle:hover,.compose-resize-handle:focus-visible { border-color:rgba(47,107,232,0.34);color:var(--blue);background:#fff;box-shadow:0 6px 18px rgba(47,107,232,0.18);outline:none; }
.compose-resize-handle:active,.compose-resize-handle.dragging { cursor:ns-resize;color:var(--blue);border-color:rgba(47,107,232,0.42);box-shadow:0 8px 22px rgba(47,107,232,0.22); }
.compose-resize-handle:disabled { opacity:0.45;cursor:not-allowed;box-shadow:none; }
body.resizing-compose { cursor:ns-resize;user-select:none; }
.compose-textarea { width:100%;min-height:96px;max-height:360px;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px 15px 11px;font-family:var(--f-ui);font-size:13px;color:var(--text-hi);line-height:1.55;resize:none;overflow-y:auto;outline:none;transition:border-color 0.20s ease,box-shadow 0.20s ease; }
.compose-textarea::placeholder { color:var(--text-dim); }
.compose-textarea:focus { border-color:var(--border-bright);box-shadow:0 0 0 3px rgba(47,107,232,0.10);background:#fff; }
.compose-textarea:disabled { opacity:0.72;cursor:not-allowed;background:rgba(232,241,245,0.86); }
.compose-left:has(.compose-textarea:disabled) .compose-resize-handle { opacity:0.45;cursor:not-allowed;box-shadow:none; }
.replies-compose.information-locked .compose-info-bar { background:rgba(26,171,109,0.07); }
.compose-actions { display:flex;flex-direction:column;gap:8px;flex-shrink:0; }
.compose-send-btn { display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#2f6be8,#4d84f0);border:1px solid rgba(47,107,232,0.4);color:#fff;font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:0.14em;padding:10px 20px;border-radius:var(--r-lg);cursor:pointer;transition:all 0.22s ease;box-shadow:0 2px 12px rgba(47,107,232,0.28);white-space:nowrap; }
.compose-send-btn:hover { background:linear-gradient(135deg,#2460d9,#4278e8);box-shadow:0 4px 20px rgba(47,107,232,0.40);transform:translateY(-1px); }
.compose-send-btn:active { transform:translateY(0); }
.compose-send-btn:disabled{ opacity:0.5;pointer-events:none; }
.compose-clear-btn { display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r);background:transparent;border:1px solid var(--border);color:var(--text-low);cursor:pointer;transition:all 0.18s ease; }
.compose-clear-btn:hover { background:var(--rose-soft);border-color:rgba(224,51,79,0.25);color:var(--rose); }
.compose-clear-btn:disabled { opacity:0.45;cursor:not-allowed;pointer-events:none; }
.compose-error { padding:8px 18px 10px;font-family:var(--f-data);font-size:11px;color:var(--rose);letter-spacing:0.03em; }
/* ─── Next-followup badge inside the chat thread ────────────────────
Highlighted pill that sits below the last message bubble whenever the
lead has an automated reply-followup template scheduled. Two visual
states: pending (purple/blue, normal scheduled) and overdue (amber,
due_at is already past — the bot will fire this on the next cycle). */
/* Wrapper row that pushes the badge to the right edge of the message
column (same side as our outbound bubbles), regardless of the
messages container's display mode. */
.next-followup-row {
display:flex;justify-content:flex-end;
margin:18px 0 8px;padding:0 4px;
}
.next-followup-badge {
display:flex;align-items:center;gap:12px;
max-width:min(420px, calc(100% - 16px));
padding:12px 16px;
border-radius:14px;
font-family:var(--f-ui);font-size:12px;color:var(--text-hi);
border:1px solid transparent;
background:rgba(124,77,255,0.06);
box-shadow:0 4px 16px rgba(124,77,255,0.10);
animation:next-followup-pop 0.32s ease-out;
}
.next-followup-badge-pending {
background:linear-gradient(135deg,rgba(124,77,255,0.08),rgba(47,107,232,0.10));
border-color:rgba(124,77,255,0.34);
color:#3a1a99;
}
.next-followup-badge-overdue {
background:linear-gradient(135deg,rgba(245,158,11,0.10),rgba(245,158,11,0.16));
border-color:rgba(245,158,11,0.45);
color:#8a4b00;
}
.next-followup-icon {
flex-shrink:0;display:flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;
background:rgba(255,255,255,0.65);
color:inherit;
}
.next-followup-text { flex:1;min-width:0;display:flex;flex-direction:column;gap:3px; }
.next-followup-line1 { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.next-followup-status {
font-size:10px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
padding:2px 8px;border-radius:999px;
background:rgba(255,255,255,0.55);
border:1px solid currentColor;
}
.next-followup-badge-overdue .next-followup-status {
background:#f59e0b;color:#fff;border-color:#f59e0b;
}
.next-followup-template { font-weight:700;font-size:13px;letter-spacing:0.02em; }
.next-followup-line2 { font-size:11px;color:inherit;opacity:0.86; }
.next-followup-line2 strong { font-weight:700; }
@keyframes next-followup-pop {
from { opacity:0;transform:translateY(6px); }
to { opacity:1;transform:translateY(0); }
}
/* ─── AI Draft button (in compose-actions column, ABOVE the SEND
button). Matches SEND's width/letter-spacing so the column looks
intentional, but uses a purple/sparkle accent so it's distinct
from the primary action. When loading, the icon hides and a
spinner spins; the label shows an ellipsis. */
.compose-ai-btn {
display:flex;align-items:center;justify-content:center;gap:8px;
padding:9px 18px;
background:linear-gradient(135deg,rgba(124,77,255,0.12),rgba(47,107,232,0.12));
border:1px solid rgba(124,77,255,0.36);
border-radius:var(--r-lg);
color:#6135e6;
font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
cursor:pointer;
transition:background 0.18s ease,border-color 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
white-space:nowrap;
}
.compose-ai-btn:hover {
background:linear-gradient(135deg,rgba(124,77,255,0.22),rgba(47,107,232,0.20));
border-color:rgba(124,77,255,0.55);
color:#4a1cb8;
box-shadow:0 4px 18px rgba(124,77,255,0.22);
transform:translateY(-1px);
}
.compose-ai-btn:active { transform:translateY(0); }
.compose-ai-btn:disabled { opacity:0.55;cursor:wait;pointer-events:none;transform:none;box-shadow:none; }
.compose-ai-icon { flex-shrink:0; }
.compose-ai-spinner {
display:none;width:12px;height:12px;border-radius:50%;
border:2px solid rgba(124,77,255,0.25);border-top-color:#6135e6;
animation:compose-ai-spin 0.8s linear infinite;
}
.compose-ai-btn.is-loading .compose-ai-icon { display:none; }
.compose-ai-btn.is-loading .compose-ai-spinner { display:inline-block; }
.compose-ai-btn.is-loading .compose-ai-label::after { content:"…"; }
@keyframes compose-ai-spin { to { transform:rotate(360deg); } }
/* The textarea may be locked while information_sent_at is waiting for a
reply, but the AI button should stay usable when scheduled followups
are in flight. The handler manages its own enabled state. */
/* ============================================================
CREATE CAMPAIGN MODAL · POLISHED BUILDER UI
============================================================ */
/* Body lock */
body.cc-modal-open {
overflow: hidden;
}
/* Campaign creation is a right-side drawer — the dashboard stays in place
behind a dim backdrop instead of being replaced by a full-screen takeover. */
body.cc-modal-open .create-campaign-modal {
display: flex !important;
visibility: visible !important;
}
body.manage-modal-open {
overflow: hidden;
}
body.manage-modal-open .ticker-bar,
body.manage-modal-open #dashboardView,
body.manage-modal-open #repliesView,
body.manage-modal-open .create-campaign-modal {
display: none !important;
visibility: hidden !important;
}
body.manage-modal-open .manage-campaign-modal {
display: flex !important;
visibility: visible !important;
}
body.manage-modal-open {
min-height: 100vh;
background: linear-gradient(135deg, #2f63ec 0%, #3f74ff 50%, #6b8fff 100%);
}
body.manage-modal-open .grid-bg,
body.manage-modal-open .noise-overlay {
opacity: 0 !important;
}
/* Backdrop fills the viewport; the panel itself hugs the right edge. */
.create-campaign-modal {
position: fixed;
inset: 0;
z-index: 5000;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-end;
overflow: hidden;
background: rgba(8,18,43,0.45);
padding: 0;
animation: ccOverlayIn 0.20s ease both;
}
@keyframes ccOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Shell = the sliding right-side panel. Covers the right side of the screen,
full height. The shell itself does NOT scroll — the dialog inside it pins the
header and footer and scrolls only the step content. */
.cc-shell {
width: clamp(560px, 58vw, 1120px);
max-width: 100vw;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
min-height: 0;
gap: 0;
box-shadow: -24px 0 64px rgba(8,18,43,0.28);
overflow: hidden;
padding: 0;
animation: ccPanelIn 0.28s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes ccPanelIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* Shell brand bar */
.cc-shell-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 6px 16px;
flex-shrink: 0;
}
.cc-shell-brand {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.cc-shell-mark {
width: 44px;
height: 44px;
flex-shrink: 0;
display: grid;
place-items: center;
color: #4278ff;
border: 1px solid rgba(66,120,255,0.20);
border-radius: 12px;
background: #fff;
box-shadow:
0 0 0 4px rgba(66,120,255,0.06),
0 8px 24px rgba(47,107,232,0.10);
}
.cc-shell-title {
font-family: var(--f-display);
font-size: 26px;
line-height: 1;
letter-spacing: 0.22em;
color: #07122b;
white-space: nowrap;
}
.cc-shell-subtitle {
margin-top: 5px;
font-family: var(--f-data);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8da0cc;
}
.cc-shell-badges {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.cc-shell-badge {
height: 32px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 13px;
border: 1px solid rgba(47,107,232,0.14);
border-radius: 999px;
background: rgba(255,255,255,0.88);
color: #4a64a0;
font-family: var(--f-data);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(47,107,232,0.07);
transition: all 0.18s ease;
}
.cc-shell-badge:hover {
border-color: rgba(47,107,232,0.28);
background: #fff;
box-shadow: 0 4px 14px rgba(47,107,232,0.11);
}
.cc-shell-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c984;
box-shadow: 0 0 0 3px rgba(34,201,132,0.16);
animation: dotPulse 2s ease-in-out infinite;
}
/* Dialog card — fills the right panel edge-to-edge. Header + footer are pinned;
only the step content (.cc-step-panel) scrolls. */
.cc-dialog {
width: 100%;
height: 100%;
min-height: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
background: #ffffff;
border: none;
border-left: 1px solid rgba(47,107,232,0.15);
border-radius: 0;
overflow: hidden;
}
/* ── Create Campaign as a full content PAGE (not an overlay/drawer) ──────────
Sits beside the fixed sidebar and scrolls with the window. No backdrop, no
internal scroll containers, no fixed heights — so the form just grows and the
page scrolls naturally, with the footer at the end of the form. */
#createCampaignModal.cc-as-page {
position: static;
inset: auto;
z-index: auto;
display: block;
background: transparent;
padding: 0;
margin-left: var(--sidenav-w);
overflow: visible;
animation: none;
}
#createCampaignModal.cc-as-page .cc-shell {
width: auto;
max-width: 1080px;
height: auto;
min-height: 0;
margin: 0 auto;
padding: 22px 24px 48px;
background: transparent;
box-shadow: none;
overflow: visible;
animation: none;
}
#createCampaignModal.cc-as-page .cc-dialog {
height: auto;
min-height: 0;
overflow: visible;
border: 1px solid rgba(47,107,232,0.15);
border-left: 1px solid rgba(47,107,232,0.15);
border-radius: 14px;
box-shadow: 0 2px 12px rgba(47,107,232,0.07);
}
#createCampaignModal.cc-as-page .cc-form {
grid-template-rows: auto auto;
overflow: visible;
}
#createCampaignModal.cc-as-page .cc-progress { overflow: visible; }
#createCampaignModal.cc-as-page .cc-step-panel { overflow: visible; }
#createCampaignModal.cc-as-page .cc-footer {
position: sticky;
bottom: 0;
z-index: 2;
}
@media (max-width: 980px) {
#createCampaignModal.cc-as-page { margin-left: 0; }
}
/* Dialog header */
.cc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 28px;
border-bottom: 1px solid rgba(47,107,232,0.09);
background:
linear-gradient(90deg, rgba(47,107,232,0.055) 0%, transparent 38%),
#fff;
flex-shrink: 0;
}
.cc-title {
font-family: var(--f-ui);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.14em;
color: #07122b;
text-transform: uppercase;
}
.cc-subtitle {
margin-top: 4px;
font-family: var(--f-data);
font-size: 10.5px;
color: #7a90be;
letter-spacing: 0.03em;
}
.cc-close {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(47,107,232,0.13);
border-radius: 9px;
background: #f6f9ff;
color: #8099cc;
cursor: pointer;
transition: all 0.20s ease;
}
.cc-close:hover {
background: rgba(224,51,79,0.07);
border-color: rgba(224,51,79,0.25);
color: var(--rose);
transform: rotate(90deg);
}
/* Form: left nav + right content */
.cc-form {
flex: 1 1 auto;
display: grid;
grid-template-columns: 215px minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
overflow: hidden;
min-height: 0;
}
/* Left step navigation */
.cc-progress {
grid-column: 1;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
gap: 5px;
padding: 22px 14px;
background: linear-gradient(180deg, #f6faff, #edf3ff);
border-right: 1px solid rgba(47,107,232,0.09);
overflow-y: auto;
position: relative;
}
/* Vertical connector */
.cc-progress::before {
content: '';
position: absolute;
left: 35px;
top: 66px;
bottom: 66px;
width: 1.5px;
background: linear-gradient(180deg, rgba(47,107,232,0.16) 0%, rgba(47,107,232,0.05) 100%);
border-radius: 2px;
}
.cc-step {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 11px;
min-height: 62px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: #8099cc;
font-family: var(--f-ui);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0 12px 0 8px;
cursor: pointer;
transition: all 0.20s ease;
text-align: left;
}
/* Number circle */
.cc-step span {
width: 30px;
height: 30px;
min-width: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(47,107,232,0.08);
color: #4278ff;
font-family: var(--f-data);
font-size: 12px;
font-weight: 800;
border: 1px solid rgba(47,107,232,0.12);
transition: all 0.20s ease;
flex-shrink: 0;
}
.cc-step-copy {
min-width: 0;
}
.cc-step strong {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cc-step small {
display: block;
font-family: var(--f-data);
font-size: 9px;
font-weight: 400;
color: #b4c4de;
letter-spacing: 0.04em;
margin-top: 2px;
}
.cc-step:hover {
background: rgba(255,255,255,0.65);
border-color: rgba(47,107,232,0.14);
color: #3a6ae0;
}
.cc-step.active {
background: #fff;
border-color: rgba(47,107,232,0.28);
color: #1d55c9;
box-shadow:
0 0 0 1px rgba(47,107,232,0.09) inset,
0 8px 22px rgba(47,107,232,0.11);
}
.cc-step.active::before {
content:''; position:absolute; left:-1px; top:14px; bottom:14px; width:3px;
background: linear-gradient(180deg, var(--blue) 0%, var(--blue-mid) 100%);
border-radius: 0 4px 4px 0;
box-shadow: 0 0 12px rgba(47,107,232,0.45);
}
.cc-step.active span {
background: linear-gradient(135deg, #2f6be8, #4d84f0);
color: #fff;
border-color: transparent;
box-shadow:
0 0 0 4px rgba(47,107,232,0.10),
0 6px 16px rgba(47,107,232,0.32),
0 1px 0 rgba(255,255,255,0.32) inset;
}
.cc-step.done,
.cc-step.complete:not(.active) {
color: #0e8a55;
}
.cc-step.done span,
.cc-step.complete:not(.active) span {
background: linear-gradient(135deg, #1aab6d, #22c984);
color: #fff;
border-color: transparent;
font-size: 0; /* hide number */
box-shadow:
0 0 0 4px rgba(26,171,109,0.10),
0 4px 14px rgba(26,171,109,0.28);
}
.cc-step.done span::after,
.cc-step.complete:not(.active) span::after {
content: '✓';
font-size: 14px;
font-family: var(--f-ui);
}
.cc-step.incomplete:not(.active) {
color: #b94a61;
}
.cc-step.incomplete:not(.active) span {
background: rgba(224,51,79,0.10);
color: var(--rose);
border-color: rgba(224,51,79,0.24);
font-size: 0;
}
.cc-step.incomplete:not(.active) span::after {
content: '×';
font-size: 15px;
font-family: var(--f-ui);
font-weight: 800;
}
/* Right step panels */
.cc-step-panel {
display: none;
grid-column: 2;
grid-row: 1;
padding: 24px 30px 28px;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: #fff;
}
.cc-step-panel.active {
display: block;
animation: ccPanelIn 0.22s ease both;
}
@keyframes ccPanelIn {
from { opacity: 0; transform: translateX(6px); }
to { opacity: 1; transform: translateX(0); }
}
/* Panel heading */
.cc-panel-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(47,107,232,0.07);
}
.cc-section-title {
font-family: var(--f-ui);
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.12em;
color: #07122b;
text-transform: uppercase;
margin-bottom: 0;
}
.cc-panel-copy {
margin-top: 4px;
font-family: var(--f-data);
font-size: 10.5px;
color: #8099cc;
line-height: 1.55;
}
/* Card */
.cc-card {
background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
border: 1px solid rgba(47,107,232,0.09);
border-radius: 11px;
padding: 18px 16px;
margin-bottom: 16px;
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 3px rgba(47,107,232,0.04), 0 8px 24px rgba(47,107,232,0.04);
transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.cc-card:hover { border-color: rgba(47,107,232,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 22px rgba(47,107,232,0.10); }
/* Grids */
.cc-grid { display: grid; gap: 14px; }
.cc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-grid-mail { grid-template-columns: minmax(0, 1fr) 96px; }
.cc-grid-mail .cc-field:nth-child(n+3) { grid-column: 1 / -1; }
/* Field */
.cc-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.cc-field span {
font-family: var(--f-ui);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
color: #526a9d;
text-transform: uppercase;
user-select: none;
}
.cc-required > span::after {
content: ' *';
color: #e0334f;
}
.cc-field input {
height: 46px;
min-width: 0;
border: 1.5px solid rgba(47,107,232,0.16);
border-radius: 9px;
background: #fff;
color: #07122b;
font-family: var(--f-ui);
font-size: 14px;
font-weight: 600;
padding: 0 13px;
outline: none;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cc-field input::placeholder { color: #b8c8e0; font-weight: 500; }
.cc-field input:hover { border-color: rgba(47,107,232,0.28); background: #fafcff; }
.cc-field input:focus {
background: #fff;
border-color: #4278ff;
box-shadow: 0 0 0 3px rgba(66,120,255,0.11), 0 1px 2px rgba(47,107,232,0.07);
}
.cc-field input[type="password"] { letter-spacing: 0.08em; }
.cc-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.cc-field input[type="number"]::-webkit-inner-spin-button,
.cc-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.cc-template-card,
.cc-verification-card {
background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
border: 1.5px solid rgba(47,107,232,0.11);
border-radius: 11px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 18px rgba(47,107,232,0.05);
transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.cc-template-card:hover,
.cc-verification-card:hover { border-color: rgba(47,107,232,0.20); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 24px rgba(47,107,232,0.10); }
.cc-template-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
margin-bottom:12px;
}
.hidden { display:none !important; }
.cc-template-mode {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:12px 0 14px;
}
.cc-template-mode-btn {
min-height:64px;
border:1.5px solid rgba(47,107,232,0.15);
border-radius:9px;
background:#fff;
color:#526a9d;
text-align:left;
padding:11px 12px;
cursor:pointer;
transition:border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.cc-template-mode-btn strong {
display:block;
font-family:var(--f-ui);
font-size:11px;
font-weight:900;
letter-spacing:0.10em;
text-transform:uppercase;
color:#07122b;
}
.cc-template-mode-btn small {
display:block;
margin-top:5px;
font-family:var(--f-data);
font-size:9.5px;
line-height:1.45;
color:#8099cc;
}
.cc-template-mode-btn:hover {
border-color:rgba(47,107,232,0.28);
background:#fafcff;
}
.cc-template-mode-btn.active {
border-color:rgba(47,107,232,0.45);
background:linear-gradient(180deg,rgba(47,107,232,0.08),rgba(255,255,255,0.96));
box-shadow:0 0 0 3px rgba(47,107,232,0.08), 0 8px 18px rgba(47,107,232,0.09);
}
.cc-token-row {
display:flex;
gap:6px;
flex-wrap:wrap;
justify-content:flex-end;
}
.cc-token-row span {
display:inline-flex;
align-items:center;
height:24px;
padding:0 11px;
border:1px solid rgba(26,171,109,0.30);
border-radius:999px;
background: linear-gradient(135deg, rgba(26,171,109,0.16) 0%, rgba(34,201,132,0.08) 100%);
color:#0e8a55;
font-family:var(--f-data);
font-size:9.5px;
font-weight:800;
letter-spacing:0.04em;
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 2px 8px rgba(26,171,109,0.10);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cc-token-row span:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 4px 14px rgba(26,171,109,0.20); }
/* WYSIWYG email editor */
.cc-wysiwyg-wrap {
border: 1px solid var(--border-bright);
border-radius: 8px;
overflow: hidden;
background: var(--bg-void, #fff);
}
.cc-wysiwyg-toolbar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px 8px;
background: rgba(47,107,232,0.05);
border-bottom: 1px solid var(--border-bright);
}
.cc-wz-btn {
min-width: 30px;
height: 26px;
padding: 0 8px;
border: 1px solid var(--border-bright);
border-radius: 6px;
background: #fff;
color: var(--text-hi, #1a2b4a);
font-family: var(--f-ui);
font-size: 12px;
cursor: pointer;
line-height: 1;
}
.cc-wz-btn:hover { background: rgba(47,107,232,0.10); border-color: rgba(47,107,232,0.35); }
.cc-wysiwyg {
min-height: 140px;
max-height: 320px;
overflow-y: auto;
padding: 10px 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--text-hi, #1a2b4a);
outline: none;
}
.cc-wysiwyg.followup { min-height: 96px; }
.cc-wysiwyg:focus { box-shadow: inset 0 0 0 2px var(--blue-soft); }
.cc-wysiwyg:empty:before {
content: attr(data-placeholder);
color: var(--text-low, #9aa6bd);
}
.cc-wysiwyg p { margin: 0 0 10px; }
.cc-wysiwyg a { color: #2156c7; }
/* Detected custom-column chips (clickable to insert) */
.cc-custom-token-row { margin-top: 6px; }
.cc-custom-token-row:empty { display: none; }
.cc-custom-token {
cursor: pointer;
border-color: rgba(47,107,232,0.32) !important;
background: linear-gradient(135deg, rgba(47,107,232,0.16) 0%, rgba(47,107,232,0.08) 100%) !important;
color: #2156c7 !important;
}
.cc-token-hint {
margin-top: 8px;
font-family: var(--f-ui);
font-size: 11.5px;
line-height: 1.5;
color: var(--text-low, #6b7384);
text-align: right;
}
.cc-token-hint code {
font-family: var(--f-data, monospace);
background: rgba(47,107,232,0.08);
border-radius: 4px;
padding: 1px 5px;
color: #2156c7;
}
/* Sending limits & schedule grid (campaign create + account defaults) */
.cc-limits-section { margin-top: 14px; }
.cc-limits-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
margin-top: 8px;
}
.cc-limits-grid label {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--f-ui);
font-size: 11.5px;
color: var(--text-low, #6b7384);
}
.cc-limits-grid input {
height: 34px;
padding: 0 11px;
border: 1px solid var(--border-bright);
border-radius: 8px;
background: var(--bg-void, #fff);
color: var(--text-hi);
font-family: var(--f-ui);
font-size: 13px;
outline: none;
}
.cc-limits-grid input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
@media (max-width: 560px) { .cc-limits-grid { grid-template-columns: 1fr; } }
.cc-template-textarea {
width:100%;
min-height:220px;
resize:vertical;
border:1.5px solid rgba(47,107,232,0.16);
border-radius:9px;
background:#fff;
color:#07122b;
font-family:var(--f-ui);
font-size:14px;
font-weight:600;
line-height:1.55;
padding:13px;
outline:none;
transition:border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cc-template-textarea.small { min-height:92px; }
.cc-template-textarea.followup { min-height:132px;font-size:13.5px; }
.cc-template-textarea:hover { border-color:rgba(47,107,232,0.28);background:#fafcff; }
.cc-template-textarea:focus {
background:#fff;
border-color:#4278ff;
box-shadow:0 0 0 3px rgba(66,120,255,0.11), 0 1px 2px rgba(47,107,232,0.07);
}
.cc-template-edit-block {
display:flex;
flex-direction:column;
gap:7px;
margin-top:12px;
}
.cc-template-edit-block > span {
font-family:var(--f-ui);
font-size:10.5px;
font-weight:800;
letter-spacing:0.10em;
color:#526a9d;
text-transform:uppercase;
}
.cc-locked-template-block {
position: relative;
margin-top:12px;
padding:13px 14px;
border:1.5px solid rgba(26,171,109,0.24);
border-radius:9px;
background: linear-gradient(180deg, rgba(26,171,109,0.10) 0%, rgba(34,201,132,0.04) 100%);
color:#123f2a;
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 4px 16px rgba(26,171,109,0.07);
}
.cc-locked-template-block::before {
content:''; position:absolute; left:14px; right:14px; top:0; height:2px;
background: linear-gradient(90deg, transparent, rgba(26,171,109,0.55), transparent);
border-radius: 0 0 4px 4px;
}
.cc-lock-label {
margin-bottom:7px;
font-family:var(--f-data);
font-size:9px;
font-weight:800;
letter-spacing:0.13em;
color:#0e8a55;
text-transform:uppercase;
}
.cc-locked-template-block p {
margin:0;
font-family:var(--f-ui);
font-size:14px;
font-weight:700;
line-height:1.55;
}
.cc-template-hint,
.cc-mailbox-status,
.mc-verified {
margin-top:10px;
font-family:var(--f-data);
font-size:10.5px;
color:#7a90be;
line-height:1.55;
letter-spacing:0.02em;
}
.cc-template-hint.error,
.cc-mailbox-status.error {
color:var(--rose);font-weight:700;
display:inline-flex;align-items:center;gap:7px;
padding:5px 12px;border-radius:100px;
background:rgba(224,51,79,0.08);border:1px solid rgba(224,51,79,0.22);
letter-spacing:0.04em;
}
.cc-followup-editor {
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(47,107,232,0.08);
}
.cc-followup-template-list {
display:grid;
gap:14px;
}
.cc-followup-template {
padding:13px;
border:1.5px solid rgba(47,107,232,0.10);
border-radius:10px;
background:linear-gradient(180deg,#fff,#fbfdff);
}
.cc-followup-template-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.cc-followup-name {
font-family:var(--f-ui);
font-size:11px;
font-weight:900;
letter-spacing:0.12em;
color:#07122b;
text-transform:uppercase;
}
.cc-followup-stage {
display:inline-flex;
align-items:center;
height:24px;
padding:0 9px;
border-radius:999px;
background:rgba(47,107,232,0.08);
color:#2f6be8;
border:1px solid rgba(47,107,232,0.18);
font-family:var(--f-data);
font-size:9px;
font-weight:900;
letter-spacing:0.08em;
}
.cc-followup-subject-readonly {
display:flex;
align-items:center;
gap:10px;
padding:9px 12px;
margin-bottom:10px;
border-radius:8px;
background:rgba(47,107,232,0.05);
border:1px dashed rgba(47,107,232,0.22);
}
.cc-followup-subject-label {
font-family:var(--f-ui);
font-size:10px;
font-weight:900;
letter-spacing:0.12em;
text-transform:uppercase;
color:#2f6be8;
}
.cc-followup-subject-value {
font-family:var(--f-ui);
font-size:13px;
font-weight:600;
color:#07122b;
flex:1;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Request Access modal */
.request-access-modal {
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100vw !important;
height:100vh !important;
margin:0 !important;
display:flex;
align-items:center !important;
justify-content:center !important;
background:rgba(11,20,39,0.55);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
z-index:99999;
padding:24px;
}
.ra-dialog {
width:min(480px,100%);
background:#fff;
border:1px solid rgba(47,107,232,0.18);
border-radius:12px;
box-shadow:0 24px 60px rgba(11,20,39,0.28);
overflow:hidden;
font-family:var(--f-ui);
}
.ra-header {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
padding:18px 22px;
border-bottom:1px solid rgba(47,107,232,0.10);
background:linear-gradient(180deg,#fbfdff,#fff);
}
.ra-title {
font-family:var(--f-display, 'Bebas Neue', sans-serif);
font-size:18px;
letter-spacing:0.18em;
color:#07122b;
}
.ra-subtitle {
margin-top:4px;
font-size:12px;
color:#5b6f9a;
font-weight:600;
}
.ra-close {
border:0;
background:transparent;
color:#5b6f9a;
cursor:pointer;
padding:4px;
display:flex;
align-items:center;
justify-content:center;
}
.ra-body {
padding:18px 22px;
}
.ra-body p {
margin:0 0 14px;
font-size:13.5px;
line-height:1.55;
color:#1b2a4a;
}
.ra-field {
display:flex;
flex-direction:column;
gap:8px;
margin-top:6px;
}
.ra-field span {
display:inline-flex;
align-items:center;
gap:6px;
font-family:var(--f-ui);
font-size:10.5px;
font-weight:800;
letter-spacing:0.16em;
text-transform:uppercase;
color:#2f6be8;
}
.ra-field span::before {
content:'';
display:inline-block;
width:5px;
height:5px;
border-radius:50%;
background:#2f6be8;
box-shadow:0 0 0 3px rgba(47,107,232,0.18);
}
.ra-field textarea {
width:100%;
border:1px solid rgba(47,107,232,0.18);
border-radius:10px;
padding:14px 14px;
font-family:var(--f-ui);
font-size:13.5px;
line-height:1.55;
color:#07122b;
background:
linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
resize:vertical;
min-height:92px;
outline:none;
box-shadow:
0 1px 0 #fff inset,
0 1px 2px rgba(11,20,39,0.04);
transition:border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ra-field textarea::placeholder {
color:#94a3c4;
font-style:italic;
letter-spacing:0.01em;
}
.ra-field textarea:hover {
border-color:rgba(47,107,232,0.30);
}
.ra-field textarea:focus {
border-color:#2f6be8;
background:#fff;
box-shadow:
0 0 0 4px rgba(47,107,232,0.12),
0 4px 12px rgba(47,107,232,0.10);
}
.ra-field textarea:disabled {
background:rgba(11,20,39,0.04);
color:#6c7a99;
cursor:not-allowed;
}
.ra-status {
margin-top:10px;
font-size:12px;
color:#5b6f9a;
min-height:18px;
}
.ra-status.error { color:#d94b57; }
.ra-status.ok { color:#0e8a55; }
.ra-footer {
display:flex;
justify-content:flex-end;
gap:10px;
padding:14px 22px 18px;
border-top:1px solid rgba(47,107,232,0.08);
background:#fbfdff;
}
.ra-btn {
height:36px;
padding:0 16px;
border-radius:8px;
font-family:var(--f-ui);
font-weight:800;
font-size:11px;
letter-spacing:0.16em;
cursor:pointer;
border:1px solid transparent;
}
.ra-secondary {
background:#fff;
border-color:rgba(47,107,232,0.22);
color:#2f6be8;
}
.ra-primary {
background:linear-gradient(135deg,#2f6be8,#4d84f0);
color:#fff;
border-color:#2f6be8;
}
.ra-primary:disabled,
.ra-secondary:disabled {
opacity:0.6;
cursor:not-allowed;
}
/* "Currently logged in as" badge in the topbar */
.user-badge {
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
gap:1px;
padding:4px 10px;
margin:0 2px;
border:1px solid rgba(47,107,232,0.18);
border-radius:7px;
background:linear-gradient(180deg,#fbfdff,#f4f8ff);
min-width:0;
max-width:130px;
}
.user-badge-name {
font-family:var(--f-ui, 'Rajdhani', sans-serif);
font-size:10px;
font-weight:800;
letter-spacing:0.04em;
color:#07122b;
max-width:118px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.user-badge-account {
font-family:var(--f-data, 'IBM Plex Mono', monospace);
font-size:8px;
font-weight:600;
letter-spacing:0.04em;
color:#5b6f9a;
text-transform:uppercase;
max-width:118px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Pending-request indicator on locked feature buttons.
Many of the buttons we attach this to (e.g. .create-campaign-btn) use
overflow:hidden for the shimmer animation, so the dot sits inside the
button at the top-right corner instead of overhanging the edge. */
.feature-locked { position:relative !important; }
.feature-request-pending {
position:absolute;
top:5px;
right:6px;
width:9px;
height:9px;
padding:0;
border-radius:50%;
background:#f4a623;
border:2px solid #ffffff;
box-shadow:0 0 0 1px rgba(244,166,35,0.45), 0 1px 4px rgba(244,166,35,0.55);
pointer-events:none;
z-index:5;
overflow:hidden;
text-indent:-9999px;
font-size:0;
line-height:0;
}
.feature-request-pending::after {
content:'';
position:absolute;
inset:0;
border-radius:50%;
animation:featureRequestPulse 1.8s ease-in-out infinite;
background:rgba(244,166,35,0.55);
}
@keyframes featureRequestPulse {
0%,100% { transform:scale(1); opacity:0.6; }
50% { transform:scale(1.6); opacity:0; }
}
.cc-mailbox-status.success {
color:#0e8a55;font-weight:800;
display:inline-flex;align-items:center;gap:7px;
padding:5px 12px;border-radius:100px;
background:linear-gradient(135deg,rgba(26,171,109,0.14),rgba(34,201,132,0.08));
border:1px solid rgba(26,171,109,0.30);
box-shadow: 0 0 0 3px rgba(26,171,109,0.06), 0 2px 10px rgba(26,171,109,0.14);
letter-spacing:0.05em;
}
.cc-mailbox-status.success::before {
content:''; width:6px; height:6px; border-radius:50%;
background: var(--green);
box-shadow: 0 0 0 3px rgba(26,171,109,0.20);
animation: dotPulse 2s ease-in-out infinite;
}
.cc-preview-wrap {
margin-top:16px;
padding:16px;
border:1.5px solid rgba(47,107,232,0.11);
border-radius:11px;
background:#fff;
}
.cc-email-preview {
padding:16px;
border:1px solid rgba(47,107,232,0.12);
border-radius:9px;
background:#fcfdff;
color:#253654;
font-family:Arial, Helvetica, sans-serif;
font-size:13.5px;
line-height:1.62;
}
.cc-email-preview-subject {
margin-bottom:13px;
padding-bottom:11px;
border-bottom:1px solid rgba(47,107,232,0.10);
color:#1d55c9;
font-family:var(--f-data);
font-size:12px;
font-weight:700;
}
.cc-email-preview p { margin:0 0 13px; }
.cc-email-preview p:last-child { margin-bottom:0; }
.cc-verification-controls {
display:grid;
grid-template-columns:minmax(220px,1fr) auto auto;
gap:10px;
align-items:end;
margin-top:12px;
}
.cc-verification-controls .cc-mini-btn { height:46px; }
/* Advanced toggle */
.cc-advanced {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(47,107,232,0.07);
}
.cc-advanced summary {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 14px;
border: 1px solid rgba(47,107,232,0.17);
border-radius: 8px;
background: rgba(47,107,232,0.05);
color: #4278ff;
font-family: var(--f-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
cursor: pointer;
transition: all 0.18s ease;
user-select: none;
list-style: none;
}
.cc-advanced summary::-webkit-details-marker { display: none; }
.cc-advanced summary::before { content: '▸'; font-size: 9px; transition: transform 0.18s ease; display: inline-block; }
.cc-advanced[open] summary::before { transform: rotate(90deg); }
.cc-advanced summary:hover { background: rgba(47,107,232,0.09); border-color: rgba(47,107,232,0.28); }
.cc-advanced .cc-grid { margin-top: 16px; }
/* Mini button */
.cc-mini-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 0 14px;
border: 1px solid rgba(47,107,232,0.22);
border-radius: 8px;
background: linear-gradient(180deg, rgba(47,107,232,0.10) 0%, rgba(47,107,232,0.04) 100%);
color: #2f6be8;
font-family: var(--f-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.20s ease, box-shadow 0.20s ease, transform 0.20s ease, background 0.20s ease;
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset;
}
.cc-mini-btn:hover {
background: linear-gradient(180deg, rgba(47,107,232,0.18) 0%, rgba(47,107,232,0.08) 100%);
border-color: rgba(47,107,232,0.40);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 4px 14px rgba(47,107,232,0.18);
}
/* Mailbox */
.cc-mail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.cc-mail-card {
background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
border: 1.5px solid rgba(47,107,232,0.11);
border-radius: 11px;
padding: 16px 16px 18px;
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 14px rgba(47,107,232,0.04);
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.cc-mail-card:hover {
border-color: rgba(47,107,232,0.26);
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 26px rgba(47,107,232,0.12);
transform: translateY(-1px);
}
.cc-mail-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-family: var(--f-ui);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
color: #2f6be8;
text-transform: uppercase;
}
.cc-mail-title::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Leads layout */
.cc-leads-layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(210px, 0.65fr);
gap: 14px;
align-items: start;
}
.cc-upload-card,
.cc-review-card {
background: #fafcff;
border: 1.5px solid rgba(47,107,232,0.11);
border-radius: 11px;
padding: 16px;
}
/* Upload */
.cc-upload {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 140px;
padding: 24px 20px;
border: 2px dashed rgba(47,107,232,0.26);
border-radius: 10px;
background: linear-gradient(180deg, rgba(47,107,232,0.04), rgba(47,107,232,0.015));
color: #4278ff;
cursor: pointer;
transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.cc-upload::before {
content:''; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
background-size: 220% 100%;
opacity: 0;
transition: opacity 0.25s ease;
animation: fillShine 2.6s ease-in-out infinite;
}
.cc-upload:hover {
background: linear-gradient(180deg, rgba(47,107,232,0.08), rgba(47,107,232,0.03));
border-color: rgba(47,107,232,0.55);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(47,107,232,0.14);
}
.cc-upload:hover::before { opacity: 1; }
.cc-upload input { display: none; }
.cc-upload-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(47,107,232,0.09);
border: 1px solid rgba(47,107,232,0.14);
}
.cc-upload-text {
font-family: var(--f-ui);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.10em;
color: #1d55c9;
}
.cc-upload-summary {
margin-top: 10px;
font-family: var(--f-data);
font-size: 10.5px;
color: #7a90be;
line-height: 1.55;
letter-spacing: 0.02em;
}
.cc-upload-summary.error { color: var(--rose); font-weight: 600; }
.cc-upload-summary.success { color: var(--green); font-weight: 700; letter-spacing: 0.06em; }
/* Column chips */
.cc-chip-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 12px;
}
.cc-chip-row span {
display: inline-flex;
align-items: center;
height: 23px;
padding: 0 10px;
border: 1px solid rgba(47,107,232,0.15);
border-radius: 100px;
background: rgba(47,107,232,0.05);
color: #4a64a0;
font-family: var(--f-data);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
transition: all 0.16s ease;
}
.cc-chip-row span:hover {
background: rgba(47,107,232,0.10);
border-color: rgba(47,107,232,0.28);
color: #2f6be8;
}
/* Review card */
.cc-review-title {
font-family: var(--f-ui);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #07122b;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(47,107,232,0.08);
}
.cc-review-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid rgba(47,107,232,0.06);
}
.cc-review-row:last-child { border-bottom: none; }
.cc-review-row span {
flex-shrink: 0;
font-family: var(--f-data);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #9aa8c8;
}
.cc-review-row strong {
min-width: 0;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--f-ui);
font-size: 13px;
font-weight: 700;
color: #07122b;
text-align: right;
}
#ccReviewLeadCount {
color: #1aab6d;
font-family: var(--f-display);
font-size: 20px;
}
/* Footer — sticky bottom */
.cc-footer {
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-top: 1px solid rgba(47,107,232,0.09);
background:
linear-gradient(180deg, rgba(255,255,255,0.96), #fff);
flex-shrink: 0;
}
.cc-status {
flex: 1;
min-height: 18px;
font-family: var(--f-data);
font-size: 11px;
color: #8099cc;
letter-spacing: 0.04em;
}
.cc-status.error { color: var(--rose); }
.cc-status.success { color: var(--green); font-weight: 700; }
/* Footer buttons */
.cc-secondary,
.cc-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 42px;
border-radius: 10px;
font-family: var(--f-ui);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
padding: 0 22px;
cursor: pointer;
transition: all 0.20s ease;
white-space: nowrap;
text-transform: uppercase;
}
.cc-secondary {
background: #f2f6ff;
color: #526a9d;
border: 1px solid rgba(47,107,232,0.17);
}
.cc-secondary:hover {
background: #e6eeff;
color: #2f6be8;
border-color: rgba(47,107,232,0.30);
transform: translateY(-1px);
}
.cc-secondary:active { transform: translateY(0); }
.cc-primary {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #2356d4 0%, #4278ff 55%, #6d8df5 100%);
color: #fff;
border: 1px solid transparent;
box-shadow:
0 1px 0 rgba(255,255,255,0.28) inset,
0 6px 20px rgba(47,107,232,0.34),
0 1px 3px rgba(15,30,80,0.08);
}
.cc-primary::after {
content:''; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
pointer-events: none;
}
.cc-primary:hover {
background: linear-gradient(135deg, #1f4ec2 0%, #3a6ef5 55%, #6588f4 100%);
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,0.32) inset,
0 12px 30px rgba(47,107,232,0.42),
0 2px 6px rgba(15,30,80,0.10);
}
.cc-primary:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 4px 14px rgba(47,107,232,0.30); }
.cc-primary:disabled { opacity: 0.55; pointer-events: none; box-shadow: none; }
.create-campaign-modal,
.manage-campaign-modal {
position:fixed;
inset:0;
width:100vw;
min-height:100vh;
height:100dvh;
z-index:5000;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
overflow-y:auto;
background:rgba(238,244,255,0.96);
backdrop-filter:blur(12px);
animation:ccOverlayIn 0.20s ease both;
}
.manage-dialog {
width:min(1040px, 96vw);
max-height:calc(100vh - 48px);
display:flex;
flex-direction:column;
background:#fff;
border:1px solid rgba(47,107,232,0.15);
border-radius:14px;
box-shadow:0 28px 64px rgba(8,18,43,0.16), 0 2px 12px rgba(47,107,232,0.07);
overflow:hidden;
}
.manage-form {
display:flex;
flex-direction:column;
min-height:0;
}
.manage-grid {
display:grid;
grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
gap:14px;
padding:20px 24px 8px;
overflow-y:auto;
}
.manage-grid .cc-card,
.manage-grid .cc-upload-card {
margin-bottom:0;
}
.cc-upload.compact {
min-height:112px;
padding:18px;
}
.manage-footer {
grid-column:auto;
grid-row:auto;
}
/* ── RESPONSIVE ── */
/* Tablet */
@media (max-width: 900px) {
.create-campaign-modal { padding: 0 12px 20px; }
.cc-shell { width: 100%; }
.cc-shell-topbar { padding: 16px 4px 12px; }
.cc-shell-badges { display: none; }
.cc-dialog {
height: calc(100vh - 90px);
max-height: calc(100vh - 90px);
min-height: 0;
}
.cc-form {
display: flex;
flex-direction: column;
overflow: hidden;
}
.cc-progress {
flex-direction: row;
align-items: center;
gap: 6px;
padding: 12px 16px;
border-right: none;
border-bottom: 1px solid rgba(47,107,232,0.09);
background: #f6faff;
overflow-x: auto;
flex-shrink: 0;
}
.cc-progress::before { display: none; }
.cc-step { flex: 1; min-height: 52px; gap: 10px; padding: 0 12px; }
.cc-step small { display: none; }
.cc-step span { width: 28px; height: 28px; min-width: 28px; }
.cc-step-panel { flex: 1 1 auto; padding: 20px 20px 24px; overflow-y: auto; }
.cc-footer { grid-column: 1; grid-row: auto; }
.cc-mail-grid { grid-template-columns: 1fr; }
.cc-verification-controls { grid-template-columns:1fr; }
.cc-template-mode { grid-template-columns:1fr; }
.manage-grid { grid-template-columns:1fr; }
.cc-leads-layout{ grid-template-columns: 1fr; }
}
/* Mobile */
@media (max-width: 600px) {
.create-campaign-modal { padding: 0 8px 12px; }
.cc-shell-topbar { padding: 12px 2px 10px; }
.cc-shell-title { font-size: 21px; }
.cc-dialog {
height: calc(100vh - 76px);
max-height: calc(100vh - 76px);
border-radius: 12px;
}
.cc-header { padding: 14px 18px; }
.cc-title { font-size: 13px; }
.cc-step { flex: 0 0 auto; min-width: 76px; }
.cc-grid-2 { grid-template-columns: 1fr; }
.cc-step-panel { padding: 16px 16px 20px; }
.manage-campaign-modal { padding:10px; }
.manage-dialog { max-height:calc(100vh - 20px); }
.manage-grid { padding:14px; }
.cc-footer {
padding: 10px 16px;
flex-wrap: wrap;
}
.cc-status { flex-basis: 100%; }
.cc-secondary, .cc-primary { flex: 1; min-width: 0; padding: 0 12px; }
}
/* ── DASHBOARD RESPONSIVE ── */
@media (max-width:1400px) {
.hero-stats { grid-template-columns:repeat(5,1fr); }
.main-grid { grid-template-columns:270px 1fr 280px; }
}
@media (max-width:1200px) {
.hero-stats { grid-template-columns:repeat(3,1fr); }
.main-grid { grid-template-columns:270px 1fr; }
.panel-right-col { display:none; }
.window-badge { display:none; }
}
@media (max-width:900px) {
.hero-stats { grid-template-columns:repeat(2,1fr); }
.campaign-filter-bar { flex-wrap:wrap; }
.replies-btn span:not(.replies-count-badge) { display: none; }
.create-campaign-btn { padding:8px 12px; }
.create-campaign-label { display:none; }
.compose-followup-row { align-items:flex-start;flex-wrap:wrap; }
.compose-followup-manual { flex:1 1 100%;min-width:0;flex-wrap:wrap; }
.compose-followup-picker { flex:1 1 180px; }
.compose-followup-date { width:100%; }
.compose-info-toggle { flex:1 1 auto; }
.compose-next-followups { flex:1 1 100%;justify-content:flex-start;min-width:0; }
.compose-template-select { width:100%;max-width:320px; }
}
@media (max-width:720px) {
.topbar-center { display:none; }
.main-grid { grid-template-columns:1fr; }
.panel-stages { display:none; }
.hero-stats { grid-template-columns:1fr 1fr; }
.stat-value { font-size:42px; }
.feed-section { margin:12px;border-radius:var(--r-lg); }
.topbar { padding:0 16px; }
.campaign-filter-bar { padding:9px 16px; }
.cs-cards { flex-direction:column; }
.wsb-schedule,.wsb-right { display:none; }
.cs-metrics { grid-template-columns:1fr 1fr; }
.chat-bubble-wrap { max-width: 92%; }
}
@media (max-width:1100px) {
.replies-sidebar { width: 280px; }
}
@media (max-width:860px) {
.replies-sidebar { width: 100%; position: absolute; z-index: 20; top: 60px; bottom: 0; left: 0; }
.replies-sidebar.thread-open { display: none; }
.replies-topbar { padding: 0 14px; gap: 10px; flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
.replies-topbar-right { flex-wrap: wrap; gap: 8px; }
}
/* =============================================
PREMIUM OVERLAY · v2 polish (additive only)
No selectors renamed. Layered on existing system.
============================================= */
:root {
--premium-ring: 0 0 0 1px rgba(47,107,232,0.10), 0 10px 40px -10px rgba(15,30,80,0.18);
--premium-ring-strong: 0 0 0 1px rgba(47,107,232,0.18), 0 20px 60px -20px rgba(15,30,80,0.28);
--glass: rgba(255,255,255,0.72);
--glass-strong: rgba(255,255,255,0.86);
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}
html { scroll-behavior: smooth; }
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Selection */
::selection { background: rgba(47,107,232,0.18); color: var(--text-hi); }
/* Premium scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(47,107,232,0.28), rgba(47,107,232,0.18));
border-radius: 100px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(47,107,232,0.45), rgba(47,107,232,0.30));
background-clip: padding-box;
}
/* Soft enter for everything below the fold */
.window-status-bar, .campaign-filter-bar, .hero-stats { will-change: transform, opacity; }
/* Topbar — extra polish */
.topbar {
height: 68px;
background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.80));
box-shadow:
0 1px 0 rgba(47,107,232,0.08),
0 8px 28px -12px rgba(15,30,80,0.10);
}
.logo-mark .logo-svg { transition: transform .5s var(--ease-out-soft); }
.logo-mark:hover .logo-svg { transform: rotate(8deg) scale(1.04); }
/* Buttons — premium press */
.refresh-btn, .logout-btn, .replies-btn, .create-campaign-btn {
border-radius: 10px;
transition: transform .18s var(--ease-out-soft),
box-shadow .25s var(--ease-out-soft),
background .25s ease, border-color .25s ease, color .2s ease;
}
.refresh-btn:hover, .replies-btn:hover, .create-campaign-btn:hover { transform: translateY(-1.5px); }
.refresh-btn:active, .replies-btn:active, .create-campaign-btn:active, .logout-btn:active { transform: translateY(0) scale(0.985); }
/* Replies button — attention pulse when unread */
.replies-btn { position: relative; overflow: visible; }
.replies-btn.has-unread {
background: linear-gradient(135deg, rgba(26,171,109,0.22), rgba(26,171,109,0.10));
border-color: rgba(26,171,109,0.55);
box-shadow: 0 0 0 0 rgba(26,171,109,0.45);
animation: repliesAttention 2.4s var(--ease-out-soft) infinite;
}
@keyframes repliesAttention {
0% { box-shadow: 0 0 0 0 rgba(26,171,109,0.45); }
60% { box-shadow: 0 0 0 12px rgba(26,171,109,0); }
100% { box-shadow: 0 0 0 0 rgba(26,171,109,0); }
}
.replies-count-badge {
background: linear-gradient(135deg, #1aab6d, #14d886);
box-shadow: 0 4px 12px rgba(26,171,109,0.40), inset 0 1px 0 rgba(255,255,255,0.30);
font-weight: 700; letter-spacing: 0.02em;
}
.replies-btn.has-unread .replies-count-badge {
animation: badgeBeat 1.6s var(--ease-out-soft) infinite;
}
@keyframes badgeBeat {
0%, 100% { transform: scale(1); }
20% { transform: scale(1.18); }
40% { transform: scale(0.96); }
60% { transform: scale(1.08); }
}
/* Stat cards — premium glass */
.stat-card {
padding: 30px 30px 24px;
background: linear-gradient(180deg, #ffffff, #fafcff);
transition: transform .35s var(--ease-out-soft),
box-shadow .35s var(--ease-out-soft),
background .25s ease;
}
.stat-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(420px 200px at 0% 0%, rgba(47,107,232,0.07), transparent 60%);
opacity: 0; transition: opacity .4s ease;
pointer-events: none;
}
.stat-card:hover {
transform: translateY(-3px);
z-index: 2;
box-shadow: 0 18px 40px -22px rgba(15,30,80,0.25);
}
.stat-card:hover::before { opacity: 1; }
/* Subtle shimmer on stat fills when they load */
.stat-fill { position: relative; overflow: hidden; }
.stat-fill::after {
content: '';
position: absolute; top: 0; left: -40%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
animation: shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer {
0% { left: -40%; }
60% { left: 110%; }
100% { left: 110%; }
}
/* Campaign pills — refined */
.camp-pill {
border-radius: 100px;
transition: all .22s var(--ease-out-soft);
backdrop-filter: blur(6px);
}
.camp-pill:hover { transform: translateY(-1.5px); }
.camp-pill.active {
box-shadow: 0 6px 18px -8px rgba(47,107,232,0.45),
inset 0 0 0 1px rgba(47,107,232,0.20);
}
/* Window status bar */
.window-status-bar {
background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.70));
}
/* Tables — subtle premium polish (only common patterns) */
table { border-collapse: separate; border-spacing: 0; }
tbody tr { transition: background .18s ease, transform .18s ease; }
tbody tr:hover { background: rgba(47,107,232,0.035); }
/* Modals — premium feel (generic; works with existing modal classes) */
.modal, .cc-modal, .reply-modal, [class*="modal-overlay"] {
animation: modalFade .25s var(--ease-out-soft) both;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal > *, .cc-modal > *, .reply-modal > * {
animation: modalRise .35s var(--ease-out-soft) both;
}
@keyframes modalRise {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* =============================================
TOAST NOTIFICATION (new replies)
============================================= */
#obScreenNoteStack {
position: fixed;
top: 86px;
left: 50%;
z-index: 10020;
display: flex;
flex-direction: column;
gap: 10px;
width: min(520px, calc(100vw - 32px));
pointer-events: none;
transform: translateX(-50%);
}
.screen-note {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 15px;
border-radius: 10px;
border: 1px solid rgba(47,107,232,0.22);
border-left: 3px solid var(--blue);
background: rgba(255,255,255,0.97);
box-shadow: 0 20px 46px -22px rgba(15,30,80,0.34), 0 8px 18px -14px rgba(47,107,232,0.35);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
font-family: var(--f-ui);
color: var(--text-hi);
transform: translateY(-12px) scale(0.98);
opacity: 0;
transition: transform 0.22s ease, opacity 0.20s ease;
}
.screen-note.show { transform: translateY(0) scale(1); opacity: 1; }
.screen-note.hide { transform: translateY(-8px) scale(0.98); opacity: 0; }
.screen-note.flash { animation: screenNoteFlash 0.42s ease; }
@keyframes screenNoteFlash {
0%,100% { box-shadow: 0 20px 46px -22px rgba(15,30,80,0.34), 0 8px 18px -14px rgba(47,107,232,0.35); }
45% { box-shadow: 0 22px 54px -18px rgba(15,30,80,0.46), 0 0 0 4px rgba(245,166,35,0.16); }
}
.screen-note.warning { border-color:rgba(245,166,35,0.32);border-left-color:#f5a623; }
.screen-note.error { border-color:rgba(224,51,79,0.28);border-left-color:var(--rose); }
.screen-note-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(47,107,232,0.10);
color: var(--blue);
font-size: 13px;
font-weight: 900;
}
.screen-note.warning .screen-note-icon { background:rgba(245,166,35,0.13);color:#a86200; }
.screen-note.error .screen-note-icon { background:rgba(224,51,79,0.10);color:var(--rose); }
.screen-note-body { flex:1;min-width:0; }
.screen-note-title { font-size:11px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-hi); }
.screen-note-message { margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--text-mid); }
.screen-note-close {
flex-shrink:0;
border:0;
background:transparent;
color:var(--text-low);
cursor:pointer;
font-size:17px;
line-height:1;
border-radius:6px;
padding:2px 5px;
}
.screen-note-close:hover { background:rgba(15,30,80,0.06);color:var(--text-hi); }
.screen-note-actions { display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap; }
.screen-note-btn {
height:30px;
border:1px solid rgba(47,107,232,0.18);
border-radius:var(--r);
background:#fff;
color:var(--text-mid);
font-family:var(--f-ui);
font-size:10px;
font-weight:800;
letter-spacing:0.10em;
padding:0 11px;
cursor:pointer;
}
.screen-note-btn.primary { background:var(--blue);border-color:rgba(47,107,232,0.38);color:#fff;box-shadow:0 4px 14px rgba(47,107,232,0.22); }
.screen-note-btn:hover { border-color:rgba(47,107,232,0.35);color:var(--blue); }
.screen-note-btn.primary:hover { color:#fff;background:#245fd8; }
#obToastStack {
position: fixed;
top: 84px; right: 24px;
z-index: 9999;
display: flex; flex-direction: column; gap: 10px;
pointer-events: none;
max-width: 360px;
}
.ob-toast {
pointer-events: auto;
display: flex; align-items: flex-start; gap: 12px;
padding: 13px 16px 13px 14px;
min-width: 280px;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.94));
border: 1px solid rgba(26,171,109,0.30);
border-left: 3px solid #1aab6d;
border-radius: 14px;
box-shadow:
0 20px 40px -16px rgba(15,30,80,0.25),
0 4px 14px -8px rgba(26,171,109,0.30);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
font-family: var(--f-ui);
color: var(--text-hi);
transform: translateX(120%);
opacity: 0;
transition: transform .45s var(--ease-out-soft), opacity .35s ease;
position: relative;
overflow: hidden;
}
.ob-toast.show { transform: translateX(0); opacity: 1; }
.ob-toast.hide { transform: translateX(120%); opacity: 0; }
.ob-toast::before {
content: '';
position: absolute; left: 0; bottom: 0;
height: 2px; width: 100%;
background: linear-gradient(90deg, #1aab6d, #14d886);
transform-origin: left;
animation: toastTimer 5s linear forwards;
}
@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ob-toast-icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(26,171,109,0.18), rgba(20,216,134,0.10));
color: #1aab6d;
}
.ob-toast-icon svg { width: 16px; height: 16px; }
.ob-toast-body { flex: 1; min-width: 0; }
.ob-toast-title {
font-size: 12px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--text-hi);
display: flex; align-items: center; gap: 8px;
}
.ob-toast-title .ob-toast-pulse {
width: 6px; height: 6px; border-radius: 50%;
background: #1aab6d;
box-shadow: 0 0 0 0 rgba(26,171,109,0.6);
animation: dotPulse 1.6s ease-out infinite;
}
.ob-toast-msg {
font-size: 12.5px; font-weight: 500;
color: var(--text-mid); margin-top: 3px;
line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-toast-close {
flex-shrink: 0;
background: transparent; border: 0; cursor: pointer;
color: var(--text-low); padding: 4px;
border-radius: 6px; transition: all .2s ease;
font-size: 16px; line-height: 1;
}
.ob-toast-close:hover { background: rgba(15,30,80,0.06); color: var(--text-hi); }
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 1280px) {
.topbar { padding: 0 20px; }
.hero-stats { grid-template-columns: repeat(5, 1fr); }
.stat-card { padding: 24px 22px 20px; }
}
@media (max-width: 1100px) {
.hero-stats { grid-template-columns: repeat(3, 1fr); }
.stat-card { border-bottom: 1px solid var(--border); }
.stat-card:nth-child(3n) { border-right: none; }
}
@media (max-width: 900px) {
.topbar {
height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 10px;
}
.topbar-left, .topbar-center, .topbar-right { flex: 0 0 auto; }
.topbar-center { order: 3; flex: 1 0 100%; justify-content: flex-start; }
.topbar-right { flex-wrap: wrap; gap: 8px; }
.clock-block { display: none; }
.wsb-inner { padding: 9px 16px; gap: 10px; }
.campaign-filter-bar { padding: 9px 16px; }
}
@media (max-width: 720px) {
.hero-stats { grid-template-columns: repeat(2, 1fr); }
.stat-card { padding: 20px 18px 16px; border-right: 1px solid var(--border) !important; }
.stat-card:nth-child(2n) { border-right: none !important; }
.logo-sub { display: none; }
.logo-title { font-size: 19px; letter-spacing: 0.18em; }
#obToastStack { left: 12px; right: 12px; max-width: none; top: 70px; }
.ob-toast { min-width: 0; width: 100%; }
.replies-btn .create-campaign-label,
.create-campaign-btn .create-campaign-label { display: none; }
}
@media (max-width: 480px) {
.hero-stats { grid-template-columns: 1fr; }
.stat-card { border-right: none !important; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ============================================================================
PREMIUM REFACTOR · v20260521
Token-driven polish + micro-interactions. Markup/JS untouched.
Order of sections:
1. Design tokens
2. Base typography & numerics
3. Topbar
4. Status pill / window badge / LIVE
5. Hero stat cards
6. Campaign filter pills
7. Campaign overview cards (.cs-card)
8. LEADS table
9. Panels / donuts
10. Replies inbox
11. Create-Campaign modal
12. Manage / Request-Access modal
13. Floating action menus
14. Buttons (sheen, transitions)
15. Keyframes
16. Reduced motion
============================================================================ */
/* 1. ── Design tokens ─────────────────────────────────────────────────────── */
:root {
/* surfaces — warm neutral paper scale */
--pr-surface-0: #ffffff;
--pr-surface-1: #fafbfd;
--pr-surface-2: #f4f6fa;
--pr-surface-3: #eef1f6;
--pr-surface-tint: rgba(53, 104, 232, 0.04);
--pr-chat-paper: #e9f0eb;
--pr-chat-inkwash: rgba(31, 92, 124, 0.08);
--pr-chat-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238da4aa' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round' opacity='0.38'%3E%3Cpath d='M17 22c5-4 12-3 16 1 4 4 4 11 0 15-5 5-12 5-16 1-5-4-5-12 0-17Z'/%3E%3Cpath d='M80 18h15m-7-7v14'/%3E%3Cpath d='M65 52c0-6 5-11 11-11s11 5 11 11-5 11-11 11'/%3E%3Cpath d='M33 75c6 0 11 5 11 11s-5 11-11 11-11-5-11-11'/%3E%3Cpath d='M88 74l8 8m0-8-8 8'/%3E%3Cpath d='M58 90c5-4 12-4 17 0'/%3E%3Cpath d='M14 57h13'/%3E%3Cpath d='M20 51v12'/%3E%3Cpath d='M101 102c-4 3-10 3-14 0'/%3E%3Ccircle cx='55' cy='24' r='3.2'/%3E%3Ccircle cx='99' cy='44' r='2.3'/%3E%3Ccircle cx='67' cy='104' r='2.1'/%3E%3C/g%3E%3C/svg%3E");
/* ink — deep slate-blue with cool tint */
--pr-ink-0: #0a0e1a;
--pr-ink-1: #1e2a44;
--pr-ink-2: #455066;
--pr-ink-3: #6a7388;
--pr-ink-4: #9aa3b8;
--pr-ink-5: #c4cad8;
/* brand — refined cobalt scale */
--pr-brand-50: #eef3ff;
--pr-brand-100: #dde5ff;
--pr-brand-200: #b8c8ff;
--pr-brand-300: #8aa2ff;
--pr-brand-400: #5b7bf5;
--pr-brand-500: #3568e8;
--pr-brand-600: #2451c8;
--pr-brand-700: #173b9a;
/* status — semantic */
--pr-success-soft: #e7f7ef;
--pr-success: #1ea25a;
--pr-success-deep: #0e6a3a;
--pr-warn-soft: #fff4e0;
--pr-warn: #e08a1a;
--pr-warn-deep: #8a4d05;
--pr-danger-soft: #fde8ec;
--pr-danger: #d63852;
--pr-danger-deep: #8d1a30;
/* lines */
--pr-line: rgba(15, 30, 65, 0.08);
--pr-line-strong: rgba(15, 30, 65, 0.14);
/* layered elevation */
--pr-elev-1: 0 1px 2px rgba(15, 30, 65, 0.04), 0 1px 1px rgba(15, 30, 65, 0.03);
--pr-elev-2: 0 1px 2px rgba(15, 30, 65, 0.06), 0 4px 10px rgba(15, 30, 65, 0.05);
--pr-elev-3: 0 2px 4px rgba(15, 30, 65, 0.06), 0 12px 24px rgba(15, 30, 65, 0.08);
--pr-elev-4: 0 4px 8px rgba(15, 30, 65, 0.08), 0 24px 48px rgba(15, 30, 65, 0.14);
--pr-glow-brand: 0 0 0 4px rgba(53, 104, 232, 0.12);
/* radius scale */
--pr-r-xs: 6px;
--pr-r-sm: 8px;
--pr-r-md: 10px;
--pr-r-lg: 14px;
--pr-r-xl: 18px;
/* motion */
--pr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--pr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--pr-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--pr-d-fast: 120ms;
--pr-d-base: 200ms;
--pr-d-slow: 320ms;
--pr-d-emph: 520ms;
}
/* 2. ── Base typography & numerics ────────────────────────────────────────── */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.stat-value,
.donut-num,
.cs-badge,
.clock-block,
.kpi-num,
.feed-table td,
.rls-meta,
.window-status-bar {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "ss01" 1;
}
/* 3. ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
background:
linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(250,251,253,0.88) 100%);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--pr-line);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, var(--pr-elev-1);
}
.logo-title {
background: linear-gradient(180deg, var(--pr-ink-0), var(--pr-ink-1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.22em;
}
.logo-sub {
color: var(--pr-ink-3);
letter-spacing: 0.18em;
}
.user-badge {
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-md);
box-shadow: var(--pr-elev-1);
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-out);
}
.user-badge:hover {
background: var(--pr-surface-0);
border-color: var(--pr-line-strong);
transform: translateY(-1px);
}
/* 4. ── Status pill, window badge, LIVE ──────────────────────────────────── */
.status-pill {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--pr-success-soft), color-mix(in oklab, var(--pr-success-soft), white 30%));
border: 1px solid color-mix(in oklab, var(--pr-success), white 70%);
color: var(--pr-success-deep);
border-radius: 999px;
transition: transform var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.status-pill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg,
transparent 30%,
rgba(255,255,255,0.55) 50%,
transparent 70%);
transform: translateX(-100%);
animation: pr-shimmer 4.2s var(--pr-ease-soft) infinite;
pointer-events: none;
}
.status-pill:hover { transform: translateY(-1px); box-shadow: var(--pr-elev-2); }
.pulse-dot {
background: var(--pr-success);
box-shadow: 0 0 0 0 rgba(30, 162, 90, 0.55);
animation: pr-breathe 2.4s var(--pr-ease-soft) infinite;
}
.window-badge {
background: var(--pr-surface-2);
border: 1px solid var(--pr-line);
color: var(--pr-ink-2);
border-radius: var(--pr-r-sm);
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out);
}
.window-badge:hover { background: var(--pr-surface-1); border-color: var(--pr-line-strong); }
.window-dot { animation: pr-breathe-soft 2.6s var(--pr-ease-soft) infinite; }
.clock-block {
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-sm);
color: var(--pr-ink-1);
}
/* 5. ── Hero stat cards ──────────────────────────────────────────────────── */
.hero-stats {
gap: 0;
background: linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
border-bottom: 1px solid var(--pr-line);
}
.stat-card {
position: relative;
padding: 30px 26px 24px;
background: transparent;
border-right: 1px solid var(--pr-line) !important;
transition: background var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-slow) var(--pr-ease-out);
opacity: 0;
animation: pr-fade-up var(--pr-d-emph) var(--pr-ease-out) forwards;
}
.stat-card:nth-child(1) { animation-delay: 40ms; }
.stat-card:nth-child(2) { animation-delay: 100ms; }
.stat-card:nth-child(3) { animation-delay: 160ms; }
.stat-card:nth-child(4) { animation-delay: 220ms; }
.stat-card:nth-child(5) { animation-delay: 280ms; }
.stat-card:nth-child(6) { animation-delay: 340ms; }
.stat-card:hover {
background: var(--pr-surface-tint);
}
.stat-card::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--pr-brand-500), transparent);
transform: scaleX(0);
transform-origin: 50% 50%;
transition: transform var(--pr-d-slow) var(--pr-ease-out);
}
.stat-card:hover::before { transform: scaleX(0.6); }
.stat-value {
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(180deg, var(--pr-ink-0), var(--pr-ink-1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat-label {
color: var(--pr-ink-3);
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
}
.stat-bar {
background: var(--pr-surface-3);
border-radius: 999px;
overflow: hidden;
}
.stat-fill {
background: linear-gradient(90deg, var(--pr-brand-400), var(--pr-brand-600));
border-radius: 999px;
position: relative;
transition: width var(--pr-d-emph) var(--pr-ease-out);
}
.stat-fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
transform: translateX(-100%);
animation: pr-shimmer 3.4s var(--pr-ease-soft) infinite;
}
/* 6. ── Campaign filter pills ────────────────────────────────────────────── */
.campaign-filter-bar {
background: linear-gradient(180deg, var(--pr-surface-1), var(--pr-surface-0));
border-bottom: 1px solid var(--pr-line);
}
.camp-pill {
position: relative;
border: 1px solid var(--pr-line);
background: var(--pr-surface-0);
color: var(--pr-ink-2);
border-radius: 999px;
transition: color var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
background var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.camp-pill:hover {
color: var(--pr-ink-0);
border-color: var(--pr-line-strong);
transform: translateY(-1px);
box-shadow: var(--pr-elev-1);
}
.camp-pill.active,
.camp-pill[aria-pressed="true"] {
background: linear-gradient(135deg, var(--pr-ink-1), var(--pr-ink-0));
color: #fff;
border-color: transparent;
box-shadow: 0 6px 16px -6px rgba(10,14,26,0.45);
}
.camp-pill-dot {
transition: transform var(--pr-d-base) var(--pr-ease-spring);
}
.camp-pill:hover .camp-pill-dot { transform: scale(1.18); }
/* 7. ── Campaign overview cards (.cs-card) ───────────────────────────────── */
.cs-card {
background: linear-gradient(180deg, var(--pr-surface-0) 0%, var(--pr-surface-1) 100%);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-lg);
box-shadow: var(--pr-elev-1);
transition: border-color var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-slow) var(--pr-ease-out),
transform var(--pr-d-slow) var(--pr-ease-out);
opacity: 0;
animation: pr-fade-up var(--pr-d-emph) var(--pr-ease-out) forwards;
}
.cs-cards .cs-card:nth-child(1) { animation-delay: 60ms; }
.cs-cards .cs-card:nth-child(2) { animation-delay: 120ms; }
.cs-cards .cs-card:nth-child(3) { animation-delay: 180ms; }
.cs-cards .cs-card:nth-child(4) { animation-delay: 240ms; }
.cs-cards .cs-card:nth-child(n+5) { animation-delay: 300ms; }
.cs-card:hover {
border-color: var(--pr-line-strong);
box-shadow: var(--pr-elev-3);
transform: translateY(-2px);
}
.cs-title {
color: var(--pr-ink-0);
letter-spacing: -0.01em;
}
.cs-badge {
background: var(--pr-surface-2);
border: 1px solid var(--pr-line);
color: var(--pr-ink-2);
border-radius: 999px;
font-weight: 600;
}
.cs-manage-btn {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
color: var(--pr-ink-1);
border-radius: var(--pr-r-sm);
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.cs-manage-btn:hover {
background: var(--pr-brand-500);
border-color: var(--pr-brand-600);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--pr-elev-2);
}
/* 8. ── LEADS table ──────────────────────────────────────────────────────── */
.feed-section {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-lg);
box-shadow: var(--pr-elev-1);
overflow: hidden;
}
.feed-header {
background: linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
border-bottom: 1px solid var(--pr-line);
}
.feed-title { color: var(--pr-ink-0); letter-spacing: -0.005em; }
/* The input itself is transparent — the .feed-search WRAPPER provides the
visible border/background. Adding any border/background here paints a
nested rectangle inside the search bar, which is the "square" bug. */
.feed-search-input {
background: transparent;
border: 0;
border-radius: 0;
color: var(--pr-ink-0);
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.feed-search-input::placeholder { color: var(--pr-ink-4); }
.feed-search-input:focus {
background: transparent;
border: 0;
outline: none;
box-shadow: none;
}
.feed-search-input::-webkit-search-decoration,
.feed-search-input::-webkit-search-cancel-button,
.feed-search-input::-webkit-search-results-button,
.feed-search-input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
.filter-btn {
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
color: var(--pr-ink-2);
border-radius: var(--pr-r-sm);
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
color var(--pr-d-base) var(--pr-ease-out);
}
.filter-btn:hover { background: var(--pr-surface-0); border-color: var(--pr-line-strong); color: var(--pr-ink-0); }
.filter-btn.active {
background: linear-gradient(135deg, var(--pr-brand-500), var(--pr-brand-600));
border-color: var(--pr-brand-600);
color: #fff;
box-shadow: 0 4px 10px -4px rgba(53,104,232,0.5);
}
/* feed-table: original typography preserved; only sticky header + smooth hover */
.feed-table thead th {
position: sticky; top: 0;
z-index: 2;
}
.blip { animation: pr-breathe-soft 2.2s var(--pr-ease-soft) infinite; }
.lead-row-kebab {
border-radius: var(--pr-r-sm);
color: var(--pr-ink-3);
transition: background var(--pr-d-fast) var(--pr-ease-out),
color var(--pr-d-fast) var(--pr-ease-out),
transform var(--pr-d-fast) var(--pr-ease-spring);
}
.lead-row-kebab:hover {
background: var(--pr-surface-2);
color: var(--pr-ink-0);
transform: scale(1.08);
}
.lead-status-tag {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.04em;
transition: transform var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.lead-status-tag:hover { transform: translateY(-1px); box-shadow: var(--pr-elev-1); }
/* 9. ── Panels & donuts ──────────────────────────────────────────────────── */
.panel {
background: linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-lg);
box-shadow: var(--pr-elev-1);
transition: box-shadow var(--pr-d-slow) var(--pr-ease-out);
}
.panel:hover { box-shadow: var(--pr-elev-2); }
.panel-header { border-bottom: 1px solid var(--pr-line); }
.panel-title {
color: var(--pr-ink-1);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
}
.donut-num {
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(180deg, var(--pr-ink-0), var(--pr-ink-1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: pr-fade-in var(--pr-d-emph) var(--pr-ease-out) both;
}
.donut-lbl { color: var(--pr-ink-3); letter-spacing: 0.14em; text-transform: uppercase; }
.chart-wrap svg circle,
.chart-wrap svg path { transition: stroke-dashoffset 900ms var(--pr-ease-out); }
.chart-wrap { animation: pr-breathe-scale 3.6s var(--pr-ease-soft) infinite; }
/* 10. ── Replies inbox ───────────────────────────────────────────────────── */
.replies-view {
background: var(--pr-surface-1);
}
.replies-sidebar {
background: var(--pr-surface-0);
border-right: 1px solid var(--pr-line);
}
.replies-lead-list { scroll-behavior: smooth; }
.rls-row {
position: relative;
border-bottom: 1px solid var(--pr-line);
transition: background var(--pr-d-fast) var(--pr-ease-out);
}
.rls-row::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--pr-brand-500);
transform: scaleY(0);
transform-origin: 50% 50%;
transition: transform var(--pr-d-base) var(--pr-ease-spring);
}
.rls-row:hover { background: var(--pr-surface-1); }
.rls-row.active,
.rls-row[aria-selected="true"] { background: var(--pr-surface-tint); }
.rls-row.active::before,
.rls-row[aria-selected="true"]::before { transform: scaleY(1); }
.replies-tab,
.rth-tab {
color: var(--pr-ink-3);
border-radius: var(--pr-r-sm);
transition: color var(--pr-d-base) var(--pr-ease-out),
background var(--pr-d-base) var(--pr-ease-out);
}
.replies-tab:hover,
.rth-tab:hover { color: var(--pr-ink-0); background: var(--pr-surface-2); }
.replies-tab.active,
.rth-tab.active {
color: var(--pr-brand-600);
background: var(--pr-brand-50);
}
.replies-compose {
background: linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
border-top: 1px solid var(--pr-line);
}
.compose-textarea,
.cc-template-textarea {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-md);
color: var(--pr-ink-0);
transition: border-color var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.compose-textarea:focus,
.cc-template-textarea:focus {
border-color: var(--pr-brand-500);
outline: none;
box-shadow: var(--pr-glow-brand);
}
/* 11. ── Create-Campaign modal ───────────────────────────────────────────── */
.request-access-modal {
background: rgba(10, 14, 26, 0.42);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
animation: pr-fade-in var(--pr-d-slow) var(--pr-ease-out);
}
/* Animated email-themed backdrop for create + manage modals.
Drifts envelopes + paper planes across a soft brand-tinted canvas. */
.create-campaign-modal,
.manage-campaign-modal {
background:
/* envelope tile (drifts with pr-mail-drift) */
url("data:image/svg+xml;utf8,") repeat,
/* paper plane tile */
url("data:image/svg+xml;utf8,") repeat,
/* @ symbol accent tile */
url("data:image/svg+xml;utf8,") repeat,
/* soft brand orbs */
radial-gradient(60% 50% at 18% 28%, rgba(53,104,232,0.12), transparent 65%),
radial-gradient(55% 45% at 82% 72%, rgba(91,123,245,0.14), transparent 65%),
radial-gradient(40% 35% at 50% 110%, rgba(53,104,232,0.10), transparent 60%),
/* base light gradient */
linear-gradient(135deg, #e8efff 0%, #f1f4fc 50%, #e9eefb 100%);
background-size:
180px 180px,
240px 240px,
360px 360px,
100% 100%, 100% 100%, 100% 100%,
100% 100%;
backdrop-filter: blur(4px) saturate(150%);
-webkit-backdrop-filter: blur(4px) saturate(150%);
animation:
pr-fade-in var(--pr-d-slow) var(--pr-ease-out),
pr-mail-drift 80s linear infinite;
overflow: hidden;
}
/* Create + Manage Campaign get the stronger "Save Changes" blue wash across the full page. */
.create-campaign-modal,
.manage-campaign-modal {
background:
url("data:image/svg+xml;utf8,") repeat,
url("data:image/svg+xml;utf8,") repeat,
url("data:image/svg+xml;utf8,") repeat,
radial-gradient(58% 50% at 18% 28%, rgba(255,255,255,0.18), transparent 65%),
radial-gradient(54% 46% at 82% 72%, rgba(255,255,255,0.14), transparent 65%),
radial-gradient(42% 36% at 50% 110%, rgba(173,198,255,0.22), transparent 60%),
linear-gradient(135deg, #2f63ec 0%, #3f74ff 50%, #6b8fff 100%);
background-size:
180px 180px,
240px 240px,
360px 360px,
100% 100%, 100% 100%, 100% 100%,
100% 100%;
}
/* Floating envelope + plane motifs as accent layer (a few large, scattered) */
.create-campaign-modal::before,
.manage-campaign-modal::before {
content: "";
position: absolute;
inset: 0;
background:
url("data:image/svg+xml;utf8,") no-repeat 4% 10%/66px 66px,
url("data:image/svg+xml;utf8,") no-repeat 90% 14%/78px 78px,
url("data:image/svg+xml;utf8,") no-repeat 8% 52%/54px 54px,
url("data:image/svg+xml;utf8,") no-repeat 84% 58%/68px 68px,
url("data:image/svg+xml;utf8,") no-repeat 18% 88%/62px 62px,
url("data:image/svg+xml;utf8,") no-repeat 95% 84%/72px 72px;
filter: drop-shadow(0 10px 18px rgba(255,255,255,0.16));
pointer-events: none;
animation: pr-mail-bob 7s var(--pr-ease-soft) infinite;
z-index: 0;
}
.create-campaign-modal::before,
.manage-campaign-modal::before {
filter: drop-shadow(0 12px 22px rgba(255,255,255,0.24));
}
/* Soft brand orbs pulsing on a second layer */
.create-campaign-modal::after,
.manage-campaign-modal::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(160px 160px at 22% 36%, rgba(53,104,232,0.22), transparent 70%),
radial-gradient(200px 200px at 78% 64%, rgba(91,123,245,0.20), transparent 70%),
radial-gradient(140px 140px at 50% 92%, rgba(53,104,232,0.16), transparent 70%);
filter: blur(8px);
pointer-events: none;
animation: pr-orbs-pulse 9s var(--pr-ease-soft) infinite;
z-index: 0;
mix-blend-mode: screen;
}
/* Keep .cc-shell and .manage-dialog above the animated layers */
.create-campaign-modal .cc-shell,
.manage-campaign-modal .manage-dialog {
position: relative;
z-index: 1;
}
@keyframes pr-mail-drift {
0% { background-position:
0 0,
0 0,
0 0,
0 0, 0 0, 0 0,
0 0; }
100% { background-position:
180px -180px,
-240px 240px,
360px 360px,
0 0, 0 0, 0 0,
0 0; }
}
@keyframes pr-mail-bob {
0%, 100% { transform: translateY(0) rotate(-1deg); opacity: 0.92; }
50% { transform: translateY(-10px) rotate(1.5deg); opacity: 1; }
}
@keyframes pr-orbs-pulse {
0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.85; }
50% { transform: scale(1.06) translate(8px, -6px); opacity: 1; }
}
.cc-dialog,
.manage-dialog {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-xl);
box-shadow: var(--pr-elev-4);
animation: pr-modal-in var(--pr-d-slow) var(--pr-ease-spring) both;
transform-origin: 50% 40%;
}
.cc-shell-header,
.cc-step-header {
border-bottom: 1px solid var(--pr-line);
background: linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
}
.cc-step-progress,
.cc-step-indicator {
background: var(--pr-surface-2);
border-radius: 999px;
overflow: hidden;
}
.cc-step-progress-bar,
.cc-step-indicator-fill {
background: linear-gradient(90deg, var(--pr-brand-400), var(--pr-brand-600));
border-radius: 999px;
transition: width var(--pr-d-emph) var(--pr-ease-out);
}
.cc-card {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-lg);
box-shadow: var(--pr-elev-1);
transition: border-color var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-out);
}
.cc-card:hover {
border-color: var(--pr-brand-300);
box-shadow: var(--pr-elev-2);
transform: translateY(-1px);
}
.cc-field input,
.cc-field select,
.cc-field textarea {
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-sm);
color: var(--pr-ink-0);
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus {
background: var(--pr-surface-0);
border-color: var(--pr-brand-500);
outline: none;
box-shadow: var(--pr-glow-brand);
}
.cc-token-row .cc-mini-btn,
.cc-mini-btn {
background: var(--pr-brand-50);
border: 1px solid color-mix(in oklab, var(--pr-brand-500), white 65%);
color: var(--pr-brand-700);
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.02em;
transition: background var(--pr-d-fast) var(--pr-ease-out),
border-color var(--pr-d-fast) var(--pr-ease-out),
transform var(--pr-d-fast) var(--pr-ease-spring),
color var(--pr-d-fast) var(--pr-ease-out);
}
.cc-mini-btn:hover {
background: var(--pr-brand-500);
border-color: var(--pr-brand-600);
color: #fff;
transform: translateY(-1px) scale(1.02);
}
.cc-template-mode-btn {
border: 1px solid var(--pr-line);
background: var(--pr-surface-1);
color: var(--pr-ink-2);
border-radius: var(--pr-r-md);
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
color var(--pr-d-base) var(--pr-ease-out);
}
.cc-template-mode-btn.active,
.cc-template-mode-btn[aria-pressed="true"] {
background: var(--pr-brand-50);
border-color: var(--pr-brand-300);
color: var(--pr-brand-700);
}
/* 12. ── Request-Access & Manage modal extras ────────────────────────────── */
.ra-dialog,
.ra-shell {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-xl);
box-shadow: var(--pr-elev-4);
animation: pr-modal-in var(--pr-d-slow) var(--pr-ease-spring) both;
}
.ra-title { color: var(--pr-ink-0); letter-spacing: -0.01em; }
.ra-note { color: var(--pr-ink-2); line-height: 1.55; }
.ra-field textarea {
background:
linear-gradient(180deg, var(--pr-surface-1), var(--pr-surface-0)),
radial-gradient(80% 50% at 50% 0%, rgba(53,104,232,0.06), transparent 70%);
background-blend-mode: normal;
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-md);
transition: border-color var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.ra-field textarea:focus {
border-color: var(--pr-brand-500);
outline: none;
box-shadow: var(--pr-glow-brand);
}
/* 13. ── Floating action menus ──────────────────────────────────────────── */
.lead-action-menu,
.lead-action-menu-pop {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-md);
box-shadow: var(--pr-elev-3);
animation: pr-menu-in var(--pr-d-base) var(--pr-ease-spring) both;
transform-origin: top right;
}
.lead-action-menu button,
.lead-action-menu-item {
transition: background var(--pr-d-fast) var(--pr-ease-out),
color var(--pr-d-fast) var(--pr-ease-out);
}
.lead-action-menu button:hover,
.lead-action-menu-item:hover {
background: var(--pr-surface-2);
color: var(--pr-ink-0);
}
/* 14. ── Buttons: gradient sheen on hover ───────────────────────────────── */
.create-campaign-btn,
.replies-btn,
.refresh-btn,
.logout-btn,
.cc-primary {
position: relative;
overflow: hidden;
transition: transform var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out),
filter var(--pr-d-base) var(--pr-ease-out);
}
.create-campaign-btn::after,
.replies-btn::after,
.refresh-btn::after,
.logout-btn::after,
.cc-primary::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg,
transparent 35%,
rgba(255,255,255,0.35) 50%,
transparent 65%);
transform: translateX(-120%);
transition: transform 700ms var(--pr-ease-out);
pointer-events: none;
}
.create-campaign-btn:hover,
.replies-btn:hover,
.refresh-btn:hover,
.logout-btn:hover,
.cc-primary:hover {
transform: translateY(-1px);
box-shadow: var(--pr-elev-3);
filter: saturate(108%);
}
.create-campaign-btn:hover::after,
.replies-btn:hover::after,
.refresh-btn:hover::after,
.logout-btn:hover::after,
.cc-primary:hover::after { transform: translateX(120%); }
.create-campaign-btn:active,
.replies-btn:active,
.refresh-btn:active,
.logout-btn:active,
.cc-primary:active { transform: translateY(0); filter: saturate(100%); }
.cc-secondary {
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-out);
}
.cc-secondary:hover { transform: translateY(-1px); }
/* Ticker & window status bar polish */
.ticker-bar {
background: linear-gradient(135deg, #2f63ec 0%, #3f74ff 52%, #6b8fff 100%);
border-bottom: 1px solid rgba(255,255,255,0.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 -6px 20px rgba(47,99,236,0.22);
}
.ticker-label {
background: rgba(255,255,255,0.10);
color: #ffffff;
box-shadow: 6px 0 20px rgba(26,56,168,0.20);
}
.ticker-label::before {
background: #ffffff;
box-shadow: 0 0 0 3px rgba(255,255,255,0.24);
}
.ticker-track {
background: linear-gradient(90deg, rgba(20,40,122,0.18), rgba(255,255,255,0.03));
}
.ticker-inner {
letter-spacing: 0.06em;
color: rgba(255,255,255,0.96);
text-shadow: 0 1px 0 rgba(18,38,120,0.20);
opacity: 0.98;
}
.window-status-bar {
background: linear-gradient(180deg, var(--pr-surface-1), var(--pr-surface-0));
border-bottom: 1px solid var(--pr-line);
}
/* 15. ── Keyframes ──────────────────────────────────────────────────────── */
@keyframes pr-fade-up {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes pr-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes pr-shimmer {
0% { transform: translateX(-100%); }
60% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
@keyframes pr-breathe {
0%, 100% { box-shadow: 0 0 0 0 rgba(30, 162, 90, 0.55); transform: scale(1); }
50% { box-shadow: 0 0 0 8px rgba(30, 162, 90, 0); transform: scale(1.08); }
}
@keyframes pr-breathe-soft {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.12); }
}
@keyframes pr-breathe-scale {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.012); }
}
@keyframes pr-modal-in {
0% { opacity: 0; transform: scale(0.96) translateY(8px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pr-menu-in {
0% { opacity: 0; transform: scale(0.96) translateY(-4px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* 16. ── Manage-Campaign modal polish ───────────────────────────────────── */
.manage-dialog {
background:
radial-gradient(120% 60% at 50% 0%, rgba(53,104,232,0.06), transparent 60%),
linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-xl);
box-shadow: var(--pr-elev-4);
}
.manage-dialog .cc-header {
padding: 22px 28px 16px;
background: linear-gradient(180deg, var(--pr-surface-0), rgba(255,255,255,0));
border-bottom: 1px solid var(--pr-line);
position: relative;
}
.manage-dialog .cc-header::after {
content: "";
position: absolute;
left: 28px; right: 28px; bottom: -1px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--pr-brand-500), transparent);
opacity: 0.55;
}
.manage-dialog .cc-title {
background: linear-gradient(180deg, var(--pr-ink-0), var(--pr-ink-1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.04em;
font-weight: 700;
}
.manage-dialog .cc-subtitle { color: var(--pr-ink-3); }
.manage-dialog .cc-close {
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
color: var(--pr-ink-3);
border-radius: var(--pr-r-sm);
transition: background var(--pr-d-base) var(--pr-ease-out),
color var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-spring);
}
.manage-dialog .cc-close:hover {
background: var(--pr-danger-soft);
color: var(--pr-danger);
transform: rotate(90deg);
}
.manage-grid { padding: 24px 28px 12px; gap: 18px; }
.manage-grid .cc-card {
background:
linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-lg);
box-shadow: var(--pr-elev-1);
padding: 22px 22px 18px;
}
.manage-grid .cc-card:hover {
border-color: var(--pr-line-strong);
box-shadow: var(--pr-elev-2);
}
.manage-grid .cc-review-title {
color: var(--pr-ink-3);
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--pr-line);
position: relative;
}
.manage-grid .cc-review-title::before {
content: "";
display: inline-block;
width: 4px; height: 4px;
background: var(--pr-brand-500);
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
box-shadow: 0 0 0 3px rgba(53,104,232,0.18);
}
.manage-grid .cc-field span {
color: var(--pr-ink-3);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 10.5px;
font-weight: 600;
}
.manage-grid .cc-field input {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-md);
color: var(--pr-ink-0);
padding: 11px 14px;
font-family: inherit;
font-size: 13px;
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.manage-grid .cc-field input::placeholder { color: var(--pr-ink-4); }
.manage-grid .cc-field input:hover {
border-color: var(--pr-line-strong);
}
.manage-grid .cc-field input:focus {
border-color: var(--pr-brand-500);
outline: none;
box-shadow: var(--pr-glow-brand);
}
.manage-grid .cc-upload-card {
background:
radial-gradient(120% 60% at 50% 0%, rgba(53,104,232,0.06), transparent 70%),
linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-lg);
box-shadow: var(--pr-elev-1);
padding: 22px;
}
.manage-grid .cc-upload.compact {
background:
repeating-linear-gradient(135deg,
var(--pr-brand-50) 0 12px,
var(--pr-surface-1) 12px 24px);
background-blend-mode: normal;
border: 1.5px dashed color-mix(in oklab, var(--pr-brand-500), white 55%);
border-radius: var(--pr-r-md);
transition: border-color var(--pr-d-base) var(--pr-ease-out),
background var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.manage-grid .cc-upload.compact:hover {
border-color: var(--pr-brand-500);
background:
linear-gradient(135deg, var(--pr-brand-50), color-mix(in oklab, var(--pr-brand-50), white 50%));
transform: translateY(-1px);
box-shadow: var(--pr-elev-2);
}
.manage-grid .cc-upload-icon {
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,255,0.96));
border: 1px solid color-mix(in oklab, var(--pr-brand-500), white 70%);
color: var(--pr-brand-600);
border-radius: 50%;
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px -4px rgba(53,104,232,0.4);
animation: pr-breathe-scale 3s var(--pr-ease-soft) infinite;
}
.manage-grid .cc-upload-text {
color: var(--pr-brand-700);
font-weight: 700;
letter-spacing: 0.02em;
}
.manage-grid .cc-upload-summary {
color: var(--pr-ink-3);
font-size: 12px;
line-height: 1.55;
margin-top: 10px;
}
.manage-footer,
.manage-dialog .cc-footer {
padding: 18px 28px 22px;
background: linear-gradient(180deg, var(--pr-surface-1), var(--pr-surface-2));
border-top: 1px solid var(--pr-line);
}
.manage-dialog .cc-primary {
background: linear-gradient(135deg, #2f63ec 0%, #3f74ff 52%, #6b8fff 100%);
border: 1px solid rgba(36, 81, 200, 0.84);
color: #fff;
border-radius: var(--pr-r-md);
padding: 11px 22px;
font-weight: 700;
letter-spacing: 0.06em;
box-shadow:
0 1px 0 rgba(255,255,255,0.32) inset,
0 8px 18px -8px rgba(53,104,232,0.58);
}
.manage-dialog .cc-secondary {
background: var(--pr-surface-0);
border: 1px solid var(--pr-line);
color: var(--pr-ink-1);
border-radius: var(--pr-r-md);
padding: 11px 22px;
font-weight: 600;
letter-spacing: 0.06em;
}
.manage-dialog .cc-secondary:hover {
background: var(--pr-surface-1);
border-color: var(--pr-line-strong);
}
/* ============================================================================
17. ── Replies inbox — chat-app redesign (iMessage / WhatsApp / Superhuman)
----------------------------------------------------------------------------
Tokens are scoped via existing :root tokens. Section map:
17.1 Layout shell (.replies-view / sidebar / panel)
17.2 Search bar
17.3 Filter pills (.replies-tabs) — wraps; never truncates
17.4 Conversation list (.replies-lead-item, real rows)
17.5 Empty / scroll-loader states
17.6 Thread header (sticky, blurred)
17.7 Message bubbles (.chat-bubble + wraps + meta + ticks)
17.8 Date separators / thread-loading / thread-error
17.9 Empty-state on right panel
17.10 Composer (floating card + send button)
17.11 Scrollbars + selection
17.12 Skeleton shimmer
========================================================================== */
/* 17.1 ── Layout shell ───────────────────────────────────────────────────── */
.replies-view {
background:
radial-gradient(60% 40% at 100% 0%, rgba(53,104,232,0.045), transparent 60%),
radial-gradient(70% 40% at 0% 100%, rgba(91,123,245,0.04), transparent 60%),
var(--pr-surface-1);
}
.replies-sidebar {
background: linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
border-right: 1px solid var(--pr-line);
box-shadow: 1px 0 0 rgba(255,255,255,0.6) inset;
}
.replies-thread-panel {
position: relative;
overflow: hidden;
background:
radial-gradient(48% 30% at 50% 0%, var(--pr-chat-inkwash), transparent 72%),
radial-gradient(38% 26% at 8% 88%, rgba(37,99,235,0.06), transparent 78%),
radial-gradient(34% 24% at 92% 14%, rgba(30,162,90,0.05), transparent 76%),
linear-gradient(180deg, #f4f8f5 0%, var(--pr-chat-paper) 100%);
display: flex;
flex-direction: column;
}
.replies-thread-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--pr-chat-doodle);
background-size: 120px 120px;
background-repeat: repeat;
opacity: 0.72;
}
.replies-thread-panel::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 16%, rgba(255,255,255,0.10) 100%),
radial-gradient(65% 48% at 50% 100%, rgba(255,255,255,0.22), transparent 78%);
}
/* 17.2 ── Search bar ─────────────────────────────────────────────────────── */
.replies-search-wrap {
position: relative;
padding: 14px 16px 10px;
}
.replies-search {
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-md);
color: var(--pr-ink-0);
padding: 10px 12px 10px 34px;
width: 100%;
font-size: 13px;
transition: background var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out);
}
.replies-search::placeholder { color: var(--pr-ink-4); }
.replies-search:focus {
background: var(--pr-surface-0);
border-color: var(--pr-brand-500);
outline: none;
box-shadow: var(--pr-glow-brand);
}
.replies-search-icon {
position: absolute;
left: 28px; top: 50%;
transform: translateY(-50%);
color: var(--pr-ink-4);
pointer-events: none;
}
/* 17.3 ── Filter pills — wraps; labels NEVER truncate ────────────────────── */
.replies-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px 12px 12px;
border-bottom: 1px solid var(--pr-line);
overflow: visible;
}
.replies-tab {
flex: 1 1 auto;
min-width: max-content;
white-space: nowrap;
overflow: visible;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 12px;
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
border-radius: 999px;
color: var(--pr-ink-2);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
cursor: pointer;
transition: background var(--pr-d-base) var(--pr-ease-out),
color var(--pr-d-base) var(--pr-ease-out),
border-color var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-out);
}
.replies-tab:hover {
background: var(--pr-surface-0);
color: var(--pr-ink-0);
border-color: var(--pr-line-strong);
transform: translateY(-1px);
}
/* Active = 12% accent tint + colored border (per spec) */
.replies-tab.active {
background: color-mix(in oklab, var(--pr-brand-500), white 88%);
color: var(--pr-brand-700);
border-color: color-mix(in oklab, var(--pr-brand-500), white 60%);
box-shadow: 0 2px 6px -2px rgba(53,104,232,0.25);
}
.replies-tab-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 2px color-mix(in oklab, currentColor, transparent 75%);
}
.replies-tab-label {
font-weight: 700;
letter-spacing: 0.08em;
}
.replies-tab-count {
padding: 1px 7px;
background: var(--pr-surface-2);
color: var(--pr-ink-2);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.replies-tab.active .replies-tab-count {
background: rgba(53,104,232,0.18);
color: var(--pr-brand-700);
}
/* 17.4 ── Conversation list (real rows: .replies-lead-item / .rli-*) ─────── */
.replies-lead-list {
padding: 4px 0 12px;
}
.replies-lead-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px 12px 20px;
cursor: pointer;
transition: background var(--pr-d-base) var(--pr-ease-out);
}
.replies-lead-item + .replies-lead-item::before {
content: "";
position: absolute;
left: 60px; right: 16px; top: 0;
height: 1px;
background: var(--pr-line);
}
.replies-lead-item::after {
content: "";
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, var(--pr-brand-400), var(--pr-brand-600));
transform: scaleY(0);
transform-origin: 50% 50%;
transition: transform var(--pr-d-base) var(--pr-ease-spring);
}
.replies-lead-item:hover { background: var(--pr-surface-1); }
.replies-lead-item.active {
background: linear-gradient(90deg,
color-mix(in oklab, var(--pr-brand-500), white 90%) 0%,
rgba(53,104,232,0) 100%);
}
.replies-lead-item.active::after { transform: scaleY(1); }
.rli-avatar,
.rls-avatar,
.rth-avatar,
.bubble-avatar {
width: 44px; height: 44px;
border-radius: 50%;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
background-image: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(0,0,0,0.18)) !important;
background-blend-mode: overlay;
box-shadow:
0 4px 10px -4px rgba(15,30,65,0.30),
inset 0 0 0 2px rgba(255,255,255,0.55);
}
.rli-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.rli-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rli-name-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.rli-name {
font-size: 13.5px;
font-weight: 600;
color: var(--pr-ink-0);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.replies-lead-item:has(.rli-unread-dot) .rli-name { font-weight: 700; }
.rli-unread-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--pr-brand-500);
box-shadow: 0 0 0 3px rgba(53,104,232,0.22);
flex-shrink: 0;
animation: pr-breathe-soft 2s var(--pr-ease-soft) infinite;
}
.rli-time {
font-size: 11px;
color: var(--pr-ink-3);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.replies-lead-item:has(.rli-unread-dot) .rli-time { color: var(--pr-brand-600); font-weight: 600; }
.rli-company {
font-size: 12px;
color: var(--pr-ink-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rli-bottom {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
overflow: hidden;
}
.rli-camp-badge {
border-radius: 999px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 2px 7px !important;
flex-shrink: 0;
}
.rli-type-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--pr-line);
background: var(--pr-surface-1);
color: var(--pr-ink-2);
flex-shrink: 0;
}
.rli-type-badge.rli-type-manual {
background: var(--pr-success-soft);
border-color: color-mix(in oklab, var(--pr-success), white 75%);
color: var(--pr-success-deep);
}
.rli-type-badge.rli-type-auto {
background: var(--pr-warn-soft);
border-color: color-mix(in oklab, var(--pr-warn), white 70%);
color: var(--pr-warn-deep);
}
.rli-preview {
font-size: 11.5px;
color: var(--pr-ink-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
/* 17.5 ── Empty / scroll-loader states ───────────────────────────────────── */
.replies-list-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 36px 24px;
gap: 10px;
}
.replies-list-empty-icon {
filter: drop-shadow(0 6px 18px rgba(53,104,232,0.15));
animation: pr-empty-float 3s var(--pr-ease-soft) infinite;
}
.replies-list-empty-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--pr-ink-1);
}
.replies-list-empty-sub {
font-size: 12px;
color: var(--pr-ink-3);
}
.replies-scroll-loader {
padding: 14px;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--pr-ink-3);
}
/* 17.6 ── Thread header (sticky, blurred) ────────────────────────────────── */
.replies-thread-header {
position: sticky;
top: 0;
z-index: 5;
background: rgba(255,255,255,0.78);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid var(--pr-line);
padding: 14px 22px;
display: flex;
align-items: center;
gap: 14px;
}
.rth-info { flex: 1; min-width: 0; }
.rth-name-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.rth-name {
font-size: 15px;
font-weight: 700;
color: var(--pr-ink-0);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Lead-state pill next to the thread name. Shown only when the lead has
been Stopped or Blacklisted. Click to reopen the actions menu. */
.rth-lead-status-tag {
display: none;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
flex-shrink: 0;
}
.rth-lead-status-tag::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.85;
}
.rth-lead-status-tag.stopped {
background: linear-gradient(180deg, #fff4e0, #fde2b5);
border-color: rgba(224,138,26,0.30);
color: #8a4d05;
}
.rth-lead-status-tag.blacklisted {
background: linear-gradient(180deg, #fde8ec, #f9c8d1);
border-color: rgba(214,56,82,0.35);
color: #8d1a30;
}
.rth-lead-status-tag:hover {
transform: translateY(-1px);
filter: saturate(110%);
box-shadow: 0 2px 6px -2px rgba(15,30,65,0.18);
}
.rth-meta {
color: var(--pr-ink-3);
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.rth-sep { opacity: 0.5; }
.rth-camp-badge,
.rth-reply-type {
background: var(--pr-surface-2);
border: 1px solid var(--pr-line);
border-radius: 999px;
color: var(--pr-ink-2);
font-weight: 700;
letter-spacing: 0.06em;
font-size: 10px;
padding: 4px 10px;
}
.rth-reply-type {
background: var(--pr-brand-50);
border-color: color-mix(in oklab, var(--pr-brand-500), white 65%);
color: var(--pr-brand-700);
}
.rth-reply-type {
display: inline-flex;
align-items: center;
gap: 6px;
}
.rth-reply-type .reply-badge-dot {
width: 6px;
height: 6px;
min-width: 6px;
border-radius: 50%;
display: inline-block;
}
.rth-reply-type.rth-reply-manual {
background: rgba(26,171,109,0.10);
border-color: rgba(26,171,109,0.25);
color: #0e8a55;
}
.rth-reply-type.rth-reply-auto {
background: rgba(245,158,11,0.10);
border-color: rgba(245,158,11,0.25);
color: #92400e;
}
.rth-action-btn {
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
color: var(--pr-ink-2);
border-radius: var(--pr-r-sm);
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--pr-d-base) var(--pr-ease-out),
color var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-spring);
}
.rth-action-btn:hover {
background: var(--pr-brand-50);
color: var(--pr-brand-600);
transform: rotate(45deg);
}
/* Actions button — wider text+caret variant, no rotation */
.rth-action-btn.rth-action-actions {
width: auto;
padding: 0 12px;
gap: 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.10em;
color: var(--pr-ink-1);
background: linear-gradient(180deg, var(--pr-surface-0), var(--pr-surface-1));
}
.rth-action-btn.rth-action-actions:hover {
background: linear-gradient(180deg, var(--pr-brand-50), color-mix(in oklab, var(--pr-brand-50), white 40%));
color: var(--pr-brand-700);
border-color: color-mix(in oklab, var(--pr-brand-500), white 60%);
transform: translateY(-1px);
box-shadow: var(--pr-elev-1);
}
.rth-action-actions-caret {
font-size: 12px;
line-height: 1;
opacity: 0.7;
transition: transform var(--pr-d-base) var(--pr-ease-spring);
}
.rth-action-btn.rth-action-actions:hover .rth-action-actions-caret {
transform: translateY(2px);
opacity: 1;
}
/* 17.7 ── Message bubbles ───────────────────────────────────────────────── */
.replies-thread-messages {
flex: 1;
overflow-y: auto;
position: relative;
z-index: 1;
background:
linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06) 24%, rgba(255,255,255,0) 100%);
padding: 22px 28px 24px;
display: flex;
flex-direction: column;
gap: 4px;
}
.chat-bubble-wrap {
display: flex;
align-items: flex-end;
gap: 10px;
max-width: 100%;
margin-top: 4px;
opacity: 0;
animation: pr-bubble-in 320ms var(--pr-ease-out) forwards;
}
/* extra spacing between sender changes */
.chat-bubble-wrap.inbound + .chat-bubble-wrap.outbound,
.chat-bubble-wrap.outbound + .chat-bubble-wrap.inbound {
margin-top: 16px;
}
/* hide avatar on consecutive same-sender messages (visual stack) */
.chat-bubble-wrap.inbound + .chat-bubble-wrap.inbound .bubble-avatar,
.chat-bubble-wrap.outbound + .chat-bubble-wrap.outbound .bubble-avatar {
visibility: hidden;
}
.chat-bubble-wrap.outbound {
flex-direction: row-reverse;
animation-name: pr-bubble-in-out;
}
.bubble-content {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 70%;
min-width: 0;
}
.chat-bubble-wrap.outbound .bubble-content { align-items: flex-end; }
.chat-bubble-wrap.inbound .bubble-content { align-items: flex-start; }
/* Type tags (small label above bubble) */
.bubble-type-tag {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.10em;
padding: 2px 8px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.bubble-type-tag.btt-manual-in {
background: var(--pr-success-soft);
color: var(--pr-success-deep);
}
.bubble-type-tag.btt-auto-in {
background: var(--pr-warn-soft);
color: var(--pr-warn-deep);
}
.bubble-type-tag.btt-out-manual {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
color: #ffffff;
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 4px 12px rgba(22,163,74,0.28);
}
.bubble-type-tag.btt-out-auto {
background: var(--pr-surface-2);
color: var(--pr-ink-2);
}
/* INBOUND bubble (left, white, soft shadow) */
.chat-bubble-wrap.inbound .chat-bubble {
background: #ffffff;
color: var(--pr-ink-0);
border: 1px solid var(--pr-line);
border-radius: 18px 18px 18px 4px;
padding: 12px 16px;
font-size: 13.5px;
line-height: 1.55;
box-shadow:
0 1px 2px rgba(15,30,65,0.04),
0 8px 18px -10px rgba(15,30,65,0.10);
word-wrap: break-word;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
/* AUTO inbound = muted amber wash */
.chat-bubble-wrap.inbound:has(.btt-auto-in) .chat-bubble {
background: linear-gradient(180deg, #fffaf0, #fdf4e3);
border-color: color-mix(in oklab, var(--pr-warn), white 78%);
}
/* OUTBOUND bubble (right, brand gradient) */
.chat-bubble-wrap.outbound .chat-bubble {
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color: #ffffff;
border: none;
border-radius: 18px 18px 4px 18px;
padding: 12px 16px;
font-size: 13.5px;
line-height: 1.55;
box-shadow:
0 1px 2px rgba(37,99,235,0.20),
0 10px 24px -10px rgba(37,99,235,0.40);
word-wrap: break-word;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.chat-bubble-wrap.outbound.manual-reply .chat-bubble {
background: linear-gradient(135deg, #4F8AF7 0%, #2451c8 100%);
}
/* Bubble meta (time + sender + ticks) */
.bubble-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
color: var(--pr-ink-3);
letter-spacing: 0.02em;
padding: 0 4px;
}
.bubble-time { font-variant-numeric: tabular-nums; }
.bubble-sender {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0.85;
}
.delivery-ticks {
font-size: 11px;
font-weight: 700;
letter-spacing: -0.02em;
margin-left: 1px;
}
/* CC chain shown under the bubble meta. Matches Gmail's "cc: a@x.com, b@y.com" */
.bubble-cc {
font-size: 10.5px;
color: var(--pr-ink-3);
letter-spacing: 0.02em;
padding: 1px 4px 0;
word-break: break-all;
max-width: 100%;
line-height: 1.45;
}
.bubble-cc::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--pr-brand-400);
margin-right: 6px;
vertical-align: middle;
opacity: 0.6;
}
.chat-bubble-wrap.outbound .bubble-cc { text-align: right; }
.chat-bubble-wrap.inbound .bubble-cc { text-align: left; }
.delivery-ticks.sent { color: var(--pr-brand-500); }
.delivery-ticks.sending { color: var(--pr-ink-4); animation: pr-tick-pulse 1.2s var(--pr-ease-soft) infinite; }
.delivery-ticks.failed { color: var(--pr-danger); font-weight: 800; }
/* 17.8 ── Date separators, loading, error ───────────────────────────────── */
.thread-date-sep {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0 6px;
color: var(--pr-ink-3);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.thread-date-sep-line {
flex: 1;
height: 1px;
background: var(--pr-line);
}
.thread-date-sep-text {
padding: 3px 12px;
background: var(--pr-surface-2);
border: 1px solid var(--pr-line);
border-radius: 999px;
color: var(--pr-ink-2);
}
.thread-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 60px 24px;
color: var(--pr-ink-3);
}
.thread-loading-spinner {
width: 28px; height: 28px;
border: 2.5px solid var(--pr-line);
border-top-color: var(--pr-brand-500);
border-radius: 50%;
animation: pr-spin 0.9s linear infinite;
}
.thread-loading-text,
.thread-error-text {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.thread-error {
padding: 40px;
text-align: center;
color: var(--pr-ink-2);
}
.thread-error-retry {
margin-top: 12px;
padding: 8px 16px;
background: var(--pr-brand-50);
border: 1px solid color-mix(in oklab, var(--pr-brand-500), white 60%);
color: var(--pr-brand-700);
border-radius: var(--pr-r-md);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.12em;
cursor: pointer;
transition: background var(--pr-d-base) var(--pr-ease-out);
}
.thread-error-retry:hover { background: var(--pr-brand-100); }
/* 17.9 ── Right-panel empty state ────────────────────────────────────────── */
.replies-empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 40px;
}
.replies-empty-state .res-icon {
filter: drop-shadow(0 8px 22px rgba(53,104,232,0.20));
animation: pr-empty-float 3s var(--pr-ease-soft) infinite;
}
.replies-empty-state .res-title {
background: linear-gradient(180deg, var(--pr-ink-0), var(--pr-ink-1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.14em;
font-weight: 800;
font-size: 13px;
}
.replies-empty-state .res-sub {
color: var(--pr-ink-3);
font-size: 12.5px;
max-width: 320px;
text-align: center;
line-height: 1.55;
}
/* 17.10 ── Composer (floating elevated card) ────────────────────────────── */
.replies-compose {
margin: 0 18px 18px;
padding: 14px;
position: relative;
z-index: 2;
background:
linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248,251,255,0.92) 100%);
border: 1px solid rgba(15, 30, 65, 0.10);
border-radius: 16px;
box-shadow:
0 1px 0 rgba(255,255,255,0.72) inset,
0 10px 24px -16px rgba(15,30,65,0.18),
0 18px 40px -24px rgba(15,30,65,0.24);
transition: border-color var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-slow) var(--pr-ease-out);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.replies-compose:focus-within {
border-color: color-mix(in oklab, var(--pr-brand-500), white 55%);
box-shadow:
0 0 0 3px rgba(53,104,232,0.10),
0 8px 22px -10px rgba(53,104,232,0.30);
}
.compose-info-bar {
color: var(--pr-ink-3);
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
border-radius: var(--pr-r-sm);
padding: 6px 10px;
font-size: 11.5px;
margin-bottom: 10px;
display: flex !important;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
}
.compose-info-bar .compose-info-left {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
min-width: 0;
}
/* ══════════════════════════════════════════════════════════════════════
To / Cc chip editor — premium edition
══════════════════════════════════════════════════════════════════════
Layout: [container pill] [TO chip] [separator] [CC chip × N] [+ Cc]
Hosted on the right side of the compose info bar. */
.compose-recipients {
margin-left: auto;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 8px;
background:
linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,247,253,0.94));
border: 1px solid rgba(53,104,232,0.18);
border-radius: 999px;
box-shadow:
0 1px 2px rgba(15,30,65,0.05),
0 6px 18px -10px rgba(53,104,232,0.16),
inset 0 1px 0 rgba(255,255,255,0.7);
font-size: 11px;
line-height: 1;
max-width: 100%;
min-height: 32px;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
}
/* Tiny "·" separator between the To group and the Cc group */
.cr-separator {
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(53,104,232,0.45);
opacity: 0.7;
margin: 0 2px;
}
/* ─── Shared chip base ─────────────────────────────────────────────── */
.cr-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 5px 4px 9px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 11px;
color: var(--pr-ink-1);
white-space: nowrap;
position: relative;
animation: crChipIn 280ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
animation-delay: var(--cr-stagger, 0ms);
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 180ms ease,
border-color 180ms ease,
filter 180ms ease;
}
@keyframes crChipIn {
from {
opacity: 0;
transform: scale(0.86) translateY(2px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* ─── Primary recipient (To) — solid brand gradient ────────────────── */
.cr-chip-to {
padding: 5px 12px 5px 10px;
background:
linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
border-color: #1f47b8;
color: #fff;
box-shadow:
0 1px 2px rgba(37,99,235,0.35),
0 6px 14px -6px rgba(37,99,235,0.55),
inset 0 1px 0 rgba(255,255,255,0.30);
}
.cr-chip-to::before {
/* Subtle inner highlight stripe for premium glass feel */
content: "";
position: absolute;
top: 1px; left: 8%; right: 8%;
height: 35%;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
pointer-events: none;
}
.cr-chip-to:hover {
filter: saturate(110%);
box-shadow:
0 1px 2px rgba(37,99,235,0.40),
0 8px 18px -6px rgba(37,99,235,0.65),
inset 0 1px 0 rgba(255,255,255,0.30);
}
.cr-chip-to .cr-chip-label { color: rgba(255,255,255,0.78); }
.cr-chip-to .cr-chip-email { color: #fff; font-weight: 600; }
/* ─── Cc chip — clean white pill ───────────────────────────────────── */
.cr-chip-cc {
background: linear-gradient(180deg, #ffffff, #fafbff);
border-color: rgba(53,104,232,0.22);
color: var(--pr-ink-1);
box-shadow:
0 1px 2px rgba(15,30,65,0.05);
}
.cr-chip-cc:hover {
border-color: rgba(53,104,232,0.50);
transform: translateY(-1px);
box-shadow:
0 3px 8px -2px rgba(53,104,232,0.20),
0 1px 2px rgba(15,30,65,0.05);
}
.cr-chip-label {
font-family: var(--f-ui, inherit);
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 8.5px;
opacity: 0.65;
flex-shrink: 0;
user-select: none;
}
.cr-chip-email {
font-family: var(--f-data, monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── Icon buttons inside Cc chips (↑ promote, × remove) ──────────── */
.cr-chip-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin-left: 1px;
border: 0;
border-radius: 50%;
background: rgba(15,30,65,0.04);
color: var(--pr-ink-3);
cursor: pointer;
flex-shrink: 0;
transition: background 160ms ease, color 160ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cr-chip-btn:hover {
background: rgba(15,30,65,0.10);
color: var(--pr-ink-0);
transform: scale(1.15);
}
.cr-chip-btn:active { transform: scale(0.94); }
.cr-chip-btn.cr-promote:hover {
background: rgba(53,104,232,0.18);
color: #1f47b8;
}
.cr-chip-btn.cr-remove:hover {
background: rgba(214,56,82,0.18);
color: #8d1a30;
}
.cr-chip-btn svg {
display: block;
}
/* ─── "+ Cc" add button ────────────────────────────────────────────── */
.cr-add-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px 4px 9px;
border: 1px dashed rgba(53,104,232,0.48);
border-radius: 999px;
background: transparent;
color: #2563EB;
font-family: var(--f-ui, inherit);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
cursor: pointer;
transition: background 160ms ease,
border-color 160ms ease,
border-style 160ms ease,
color 160ms ease,
transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 180ms ease;
}
.cr-add-btn svg { color: currentColor; }
.cr-add-btn:hover {
background: linear-gradient(180deg, #eef3ff, #dde7ff);
border-color: #2563EB;
border-style: solid;
color: #173b9a;
transform: translateY(-1px);
box-shadow:
0 3px 10px -3px rgba(53,104,232,0.30),
inset 0 1px 0 rgba(255,255,255,0.50);
}
.cr-add-btn:active { transform: translateY(0); }
/* ─── Inline Add-Cc form (replaces the button while typing) ───────── */
.cr-add-form {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 3px 2px 8px;
border: 1px solid #2563EB;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #f4f7ff);
box-shadow:
0 0 0 3px rgba(53,104,232,0.14),
0 1px 2px rgba(15,30,65,0.06);
animation: crAddFormIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes crAddFormIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
.cr-add-input {
border: 0;
outline: 0;
background: transparent;
font-family: var(--f-data, monospace);
font-size: 11.5px;
font-weight: 500;
color: var(--pr-ink-0);
width: 170px;
padding: 3px 0;
letter-spacing: 0;
}
.cr-add-input::placeholder {
color: var(--pr-ink-4);
font-style: italic;
}
.cr-add-input.cr-add-input-error {
animation: crShake 320ms ease;
color: #8d1a30;
}
@keyframes crShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-3px); }
40% { transform: translateX(3px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
}
.cr-add-submit,
.cr-add-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
transition: background 160ms ease, color 160ms ease, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cr-add-submit {
background: linear-gradient(135deg, #3B82F6, #2563EB);
color: #fff;
box-shadow: 0 2px 6px -1px rgba(37,99,235,0.40);
}
.cr-add-submit:hover:not(:disabled) { transform: scale(1.10); filter: saturate(115%); }
.cr-add-submit:disabled {
background: var(--pr-surface-2);
color: var(--pr-ink-4);
box-shadow: none;
cursor: not-allowed;
}
.cr-add-cancel {
background: transparent;
color: var(--pr-ink-3);
}
.cr-add-cancel:hover {
background: rgba(214,56,82,0.18);
color: #8d1a30;
transform: scale(1.10);
}
@media (max-width: 900px) {
.compose-recipients {
margin-left: 0;
width: 100%;
}
.cr-chip-email { max-width: 140px; }
.cr-add-input { width: 130px; }
}
/* Respect reduced-motion users — disable chip enter animations */
@media (prefers-reduced-motion: reduce) {
.cr-chip,
.cr-add-form {
animation: none !important;
}
.cr-chip:hover,
.cr-chip-cc:hover,
.cr-add-btn:hover {
transform: none;
}
}
.compose-body {
display: flex;
gap: 10px;
align-items: stretch;
}
.compose-left { flex: 1; position: relative; }
.compose-textarea {
width: 100%;
min-height: 56px;
max-height: 280px;
background: transparent;
border: none;
outline: none;
resize: none;
font: inherit;
font-size: 13.5px;
line-height: 1.55;
color: var(--pr-ink-0);
padding: 6px 4px;
}
.compose-textarea::placeholder { color: var(--pr-ink-4); }
.compose-actions {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: flex-end;
}
.compose-send-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color: #fff;
border: none;
border-radius: 12px;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.10em;
cursor: pointer;
box-shadow:
0 6px 14px -6px rgba(37,99,235,0.55),
inset 0 1px 0 rgba(255,255,255,0.25);
transition: transform var(--pr-d-base) var(--pr-ease-out),
box-shadow var(--pr-d-base) var(--pr-ease-out),
filter var(--pr-d-base) var(--pr-ease-out);
}
.compose-send-btn svg {
transition: transform var(--pr-d-base) var(--pr-ease-spring);
}
.compose-send-btn:hover {
transform: translateY(-1px) scale(1.02);
box-shadow:
0 10px 24px -8px rgba(37,99,235,0.65),
inset 0 1px 0 rgba(255,255,255,0.30);
filter: saturate(110%);
}
.compose-send-btn:hover svg { transform: translate(2px, -2px); }
.compose-send-btn:active { transform: scale(0.97); }
.compose-send-btn:disabled {
filter: grayscale(40%);
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.compose-clear-btn {
width: 36px; height: 36px;
background: var(--pr-surface-1);
border: 1px solid var(--pr-line);
color: var(--pr-ink-3);
border-radius: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--pr-d-base) var(--pr-ease-out),
color var(--pr-d-base) var(--pr-ease-out),
transform var(--pr-d-base) var(--pr-ease-spring);
}
.compose-clear-btn:hover {
background: var(--pr-danger-soft);
color: var(--pr-danger);
transform: rotate(90deg);
}
/* 17.11 ── Scrollbars + themed selection ────────────────────────────────── */
.replies-lead-list,
.replies-thread-messages {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.replies-lead-list::-webkit-scrollbar,
.replies-thread-messages::-webkit-scrollbar {
width: 6px;
}
.replies-lead-list::-webkit-scrollbar-thumb,
.replies-thread-messages::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
transition: background 200ms;
}
.replies-lead-list:hover::-webkit-scrollbar-thumb,
.replies-thread-messages:hover::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--pr-ink-3), transparent 60%);
}
.replies-view ::selection {
background: rgba(53,104,232,0.20);
color: inherit;
}
/* 17.12 ── Skeleton shimmer ─────────────────────────────────────────────── */
.sk-block {
background:
linear-gradient(90deg, var(--pr-surface-2) 0%, var(--pr-surface-3) 50%, var(--pr-surface-2) 100%);
background-size: 200% 100%;
animation: pr-sk-shimmer 1.6s var(--pr-ease-soft) infinite;
border-radius: var(--pr-r-sm);
}
.replies-lead-skeleton {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
}
.replies-lead-skeleton .rls-avatar { width: 44px; height: 44px; border-radius: 50%; box-shadow: none; }
.replies-lead-skeleton .rls-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.replies-lead-skeleton .sk-line-a { height: 11px; width: 65%; }
.replies-lead-skeleton .sk-line-b { height: 9px; width: 85%; }
.replies-lead-skeleton .sk-line-b.short { width: 50%; }
/* 17.x ── Keyframes for the chat panel ──────────────────────────────────── */
@keyframes pr-bubble-in {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes pr-bubble-in-out {
0% { opacity: 0; transform: translateY(8px) scale(0.95); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pr-empty-float {
0%, 100% { transform: translateY(-4px); }
50% { transform: translateY(4px); }
}
@keyframes pr-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes pr-tick-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
@keyframes pr-sk-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* 18. ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.stat-card,
.cs-card,
.donut-num,
.cc-dialog,
.manage-dialog,
.ra-dialog,
.lead-action-menu,
.lead-action-menu-pop {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.status-pill::after,
.stat-fill::after,
.create-campaign-btn::after,
.replies-btn::after,
.refresh-btn::after,
.logout-btn::after,
.cc-primary::after {
display: none !important;
}
.pulse-dot,
.window-dot,
.blip,
.chart-wrap,
.replies-empty-state .res-icon,
.manage-grid .cc-upload-icon,
.sk-block,
.create-campaign-modal,
.manage-campaign-modal,
.create-campaign-modal::before,
.manage-campaign-modal::before,
.create-campaign-modal::after,
.manage-campaign-modal::after {
animation: none !important;
transform: none !important;
box-shadow: none !important;
}
}
/* ── Manage Campaign tabs ──────────────────────────────────────── */
.mc-tabs {
display: flex;
gap: 4px;
padding: 0 24px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 16px;
flex-shrink: 0;
}
.mc-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: #8a9ab5;
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
padding: 10px 14px 8px;
cursor: pointer;
text-transform: uppercase;
transition: color .15s, border-color .15s;
}
.mc-tab:hover { color: #c8d4e8; }
.mc-tab.active { color: #5b8dee; border-bottom-color: #5b8dee; }
.mc-tab-panel { display: none; padding: 0 24px 8px; overflow-y: auto; max-height: calc(70vh - 180px); }
.mc-tab-panel.active { display: block; }
.cc-followup-item { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px; margin-top: 14px; }
.cc-followup-stage-label { font-size: 12px; font-weight: 600; color: #8a9ab5; text-transform: uppercase; letter-spacing: .05em; }
.mc-reply-seq-hint { font-size: 12px; color: #8a9ab5; margin: 0 0 12px; }
/* ── Campaign lifecycle: status badge + card actions + clone modal ── */
.cs-status-badge {
font-family:var(--f-data);font-size:8.5px;font-weight:700;letter-spacing:0.10em;
padding:3px 8px;border-radius:999px;text-transform:uppercase;white-space:nowrap;
}
.cs-status-badge.active { color:#0e7a4d;background:rgba(26,171,109,0.13);border:1px solid rgba(26,171,109,0.35); }
.cs-status-badge.paused { color:#a36b08;background:rgba(212,139,15,0.13);border:1px solid rgba(212,139,15,0.38); }
.cs-status-badge.draft { color:#475a85;background:rgba(122,145,190,0.15);border:1px solid rgba(122,145,190,0.40); }
.cs-card-select { cursor:pointer; }
.cs-card-select:hover .cs-camp-name { color:var(--blue); }
.cs-actions-row { display:flex;gap:6px;flex-wrap:wrap;margin-top:10px; }
.cs-manage-btn.launch {
border-color:rgba(26,171,109,0.35);background:rgba(26,171,109,0.08);color:#0e7a4d;
}
.cs-manage-btn.launch:hover { background:rgba(26,171,109,0.16);border-color:rgba(26,171,109,0.5); }
.cs-manage-btn.pause {
border-color:rgba(212,139,15,0.35);background:rgba(212,139,15,0.08);color:#a36b08;
}
.cs-manage-btn.pause:hover { background:rgba(212,139,15,0.16);border-color:rgba(212,139,15,0.5); }
.clone-leads-toggle {
display:flex;align-items:flex-start;gap:9px;margin-top:14px;cursor:pointer;
font-size:12.5px;color:var(--text-mid);line-height:1.45;
}
.clone-leads-toggle input { margin-top:2px;accent-color:var(--blue); }
.clone-hint { font-size:12px;color:var(--text-low);margin:12px 0 0;line-height:1.5; }
/* ── LEFT NAVIGATION ───────────────────────────────────────────── */
:root { --sidenav-w: 200px; }
.side-nav {
position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidenav-w);
z-index: 300; display: flex; flex-direction: column;
background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
border-right: 1px solid var(--border);
box-shadow: 1px 0 0 var(--border), 6px 0 24px rgba(47,107,232,0.05);
padding: 14px 10px;
}
.sn-brand {
display: flex; align-items: center; gap: 9px; cursor: pointer;
padding: 6px 8px 16px; user-select: none;
}
.sn-brand-mark {
width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%);
color: #fff; font-family: var(--f-display); font-size: 14px; letter-spacing: 0.04em;
box-shadow: var(--blue-glow);
}
.sn-brand-txt {
font-family: var(--f-display); font-size: 15px; letter-spacing: 0.12em;
color: var(--text-hi); white-space: nowrap;
}
.sn-section {
font-family: var(--f-data); font-size: 8.5px; font-weight: 700;
letter-spacing: 0.16em; color: var(--text-low);
padding: 12px 10px 6px; text-transform: uppercase;
}
.sn-items { display: flex; flex-direction: column; gap: 2px; }
.sn-item {
display: flex; align-items: center; gap: 10px; width: 100%;
height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px;
background: transparent; color: var(--text-mid); cursor: pointer;
font-family: var(--f-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
transition: all 0.16s ease; text-align: left;
}
.sn-item svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.85; }
.sn-item:hover { background: var(--bg-hover); color: var(--text-hi); }
.sn-item.active {
background: var(--blue-soft); color: var(--blue);
border-color: rgba(47,107,232,0.22);
}
.sn-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-badge {
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--rose); color: #fff;
font-family: var(--f-data); font-size: 9.5px; font-weight: 700;
}
.sn-footer { margin-top: auto; border-top: 1px solid var(--border); padding-top: 8px; }
/* Make room for the rail in both views. margin-left (not `left`) so the
offset works whether .replies-view resolves to relative or fixed. */
#dashboardView { margin-left: var(--sidenav-w); }
.replies-view { margin-left: var(--sidenav-w); }
body.cc-modal-open .side-nav { filter: blur(2px); }
@media (max-width: 1180px) {
:root { --sidenav-w: 60px; }
.sn-label, .sn-brand-txt, .sn-section, .sn-badge { display: none !important; }
.side-nav { padding: 14px 8px; }
.sn-item { justify-content: center; padding: 0; gap: 0; }
.sn-brand { justify-content: center; padding: 6px 0 16px; }
}
@media (max-width: 760px) {
.side-nav { display: none; }
#dashboardView { margin-left: 0; }
.replies-view { margin-left: 0; }
}
/* ── PAGES: suppressions + account settings ───────────────────── */
.page-section { padding: 22px 28px 30px; }
.page-hint { font-size: 12.5px; color: var(--text-low); line-height: 1.55; margin: 10px 0 14px; max-width: 720px; }
.sup-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.sup-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sup-filters .filter-btn span { opacity: 0.65; margin-left: 4px; font-family: var(--f-data); font-size: 10px; }
.sup-search {
height: 32px; min-width: 220px; padding: 0 12px;
border: 1px solid var(--border-bright); border-radius: 8px;
background: var(--bg-panel); color: var(--text-hi);
font-family: var(--f-ui); font-size: 13px; outline: none;
}
.sup-search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
/* Manual add / bulk import form */
.sup-add-form {
border: 1px solid var(--border-bright); border-radius: 10px;
background: var(--bg-panel); padding: 14px; margin-bottom: 14px;
}
.sup-add-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sup-add-label { font-family: var(--f-ui); font-size: 12px; color: var(--text-low); }
.sup-add-select, .sup-add-reason {
height: 34px; padding: 0 12px;
border: 1px solid var(--border-bright); border-radius: 8px;
background: var(--bg-void); color: var(--text-hi);
font-family: var(--f-ui); font-size: 13px; outline: none;
}
.sup-add-reason { flex: 1; min-width: 220px; }
.sup-add-select:focus, .sup-add-reason:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.sup-add-textarea {
width: 100%; box-sizing: border-box; resize: vertical;
padding: 10px 12px; border: 1px solid var(--border-bright); border-radius: 8px;
background: var(--bg-void); color: var(--text-hi);
font-family: var(--f-data, monospace); font-size: 13px; line-height: 1.5; outline: none;
}
.sup-add-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.sup-add-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.sup-add-filebtn { cursor: pointer; margin: 0; }
.sup-add-result { font-family: var(--f-ui); font-size: 12px; color: var(--text-low); }
.sup-add-submit { background: var(--blue); border-color: var(--blue); color: #fff; }
.sup-add-submit:hover { background: var(--blue); filter: brightness(1.08); }
.sup-add-submit:disabled { opacity: 0.6; cursor: default; }
.sup-table-wrap { overflow-x: auto; }
.sup-table { width: 100%; border-collapse: collapse; }
.sup-table th {
text-align: left; padding: 8px 10px; font-family: var(--f-data);
font-size: 9px; letter-spacing: 0.12em; color: var(--text-low);
border-bottom: 1px solid var(--border-bright); white-space: nowrap;
}
.sup-table td { padding: 9px 10px; font-size: 13px; color: var(--text-mid); border-bottom: 1px solid var(--border); vertical-align: middle; }
.sup-email { font-family: var(--f-data); font-size: 12px; color: var(--text-hi); }
.sup-reason { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-date { font-family: var(--f-data); font-size: 11px; color: var(--text-low); white-space: nowrap; }
.sup-action { text-align: right; }
.sup-type-badge {
font-family: var(--f-data); font-size: 8.5px; font-weight: 700; letter-spacing: 0.10em;
padding: 3px 8px; border-radius: 999px; text-transform: uppercase; white-space: nowrap;
}
.sup-type-badge.stopped { color: #a36b08; background: rgba(212,139,15,0.13); border: 1px solid rgba(212,139,15,0.38); }
.sup-type-badge.blacklisted { color: #b3122f; background: rgba(224,51,79,0.10); border: 1px solid rgba(224,51,79,0.35); }
.sup-type-badge.bounce { color: #475a85; background: rgba(122,145,190,0.15); border: 1px solid rgba(122,145,190,0.40); }
.sup-type-badge.enabled { color: #0e7a4d; background: rgba(26,171,109,0.13); border: 1px solid rgba(26,171,109,0.35); }
.account-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; align-items: start; }
.acct-requests-panel { grid-column: 1 / -1; }
@media (max-width: 980px) { .account-grid { grid-template-columns: 1fr; } }
.acct-profile { padding: 6px 0 2px; }
.acct-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.acct-row:last-child { border-bottom: none; }
.acct-row-label { flex: 0 0 110px; font-family: var(--f-data); font-size: 9px; letter-spacing: 0.12em; color: var(--text-low); text-transform: uppercase; }
.acct-row-value { font-size: 13.5px; color: var(--text-hi); font-weight: 600; word-break: break-all; }
.acct-features { display: flex; flex-direction: column; gap: 6px; }
.acct-feature {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg-panel);
}
.acct-feature-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.acct-feature.enabled .acct-feature-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(26,171,109,0.15); }
.acct-feature.locked .acct-feature-dot { background: var(--text-dim); }
.acct-feature-name { flex: 1 1 auto; font-size: 13px; font-weight: 700; color: var(--text-mid); }
.acct-feature.locked .acct-feature-name { color: var(--text-low); }
.acct-feature-state { font-family: var(--f-data); font-size: 9px; letter-spacing: 0.1em; color: #0e7a4d; }
/* Mailbox verification badge in the manage modal */
.mc-verified-badge { margin-left: 8px; font-family: var(--f-data, monospace); font-size: 11px; font-weight: 800; }
.mc-verified-badge.ok { color: #0e8a55; }
.mc-verified-badge.warn { color: #b4690e; }
|