@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); :root { --bg: #090c12; --text: rgba(255,255,255,0.94); --text-dim: rgba(255,255,255,0.62); --text-faint: rgba(255,255,255,0.38); --glass-bg: rgba(255,255,255,0.07); --glass-bg-strong: rgba(255,255,255,0.13); --glass-bg-subtle: rgba(255,255,255,0.045); --glass-border: rgba(255,255,255,0.13); --glass-border-strong: rgba(255,255,255,0.22); --shadow: 0 16px 48px rgba(0,0,0,0.5); --scrim: rgba(4,6,10,0.55); /* liquid glass tuning (picker writes these on ) */ --glass-frost: 0.10; --glass-saturation: 1.6; --glass-frost-hsl: 0 0% 100%; --filter-id: blur(0px); /* picker swaps in url(#glass-filter) */ --lg-blur: 8px; --lg-rim: rgba(255,255,255,0.35); --lg-rim-soft: rgba(255,255,255,0.15); --lg-inner: rgba(17,17,26,0.05); --lg-sat: 180%; --lg-tint: rgba(255,255,255,0.10); --lg-tint-strong: rgba(255,255,255,0.17); --lg-tint-subtle: rgba(255,255,255,0.055); --lg-spec: rgba(255,255,255,0.75); /* top specular rim */ --lg-spec-soft: rgba(255,255,255,0.28); --lg-shade: rgba(0,0,0,0.30); /* bottom inner shade */ --lg-glow: rgba(255,255,255,0.14); /* inner bloom */ --lg-drop: 0 20px 50px -12px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.25); /* wallpaper layer, overridden inline by picker */ --wallpaper: url("https://images.unsplash.com/photo-1551384963-cccb0b7ed94b?q=80&w=3247&auto=format&fit=crop&ixlib=rb-4.1.0"); --wallpaper-size: cover; --wall-scrim: rgba(6,9,16,0.28); --accent: oklch(68% 0.19 275); --accent-text: oklch(98% 0.01 275); --accent-soft: oklch(68% 0.19 275 / 0.22); --accent2: oklch(76% 0.14 195); --accent2-soft: oklch(76% 0.14 195 / 0.2); --warn: oklch(78% 0.16 85); --warn-soft: oklch(78% 0.16 85 / 0.2); --danger: oklch(68% 0.19 25); --danger-soft: oklch(68% 0.19 25 / 0.2); --input-bg: rgba(255,255,255,0.05); --track: rgba(255,255,255,0.13); } /* light glass: dark text, brighter tints — for pale wallpapers */ :root[data-glass="light"] { --text: rgba(12,16,24,0.95); --text-dim: rgba(12,16,24,0.62); --text-faint: rgba(12,16,24,0.42); --lg-tint: rgba(255,255,255,0.42); --lg-tint-strong: rgba(255,255,255,0.58); --lg-tint-subtle: rgba(255,255,255,0.26); --lg-spec: rgba(255,255,255,0.95); --lg-spec-soft: rgba(255,255,255,0.55); --lg-rim: rgba(255,255,255,0.6); --lg-rim-soft: rgba(255,255,255,0.3); --lg-inner: rgba(17,17,26,0.04); --lg-shade: rgba(0,0,0,0.10); --lg-glow: rgba(255,255,255,0.5); --lg-drop: 0 18px 44px -14px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.10); --glass-border: rgba(255,255,255,0.55); --glass-border-strong: rgba(255,255,255,0.8); --scrim: rgba(230,236,245,0.45); --wall-scrim: rgba(255,255,255,0.10); --input-bg: rgba(255,255,255,0.35); --track: rgba(0,0,0,0.12); --accent: oklch(52% 0.20 275); --accent-soft: oklch(52% 0.20 275 / 0.20); --accent2: oklch(55% 0.14 195); --accent2-soft: oklch(55% 0.14 195 / 0.18); --warn: oklch(58% 0.16 70); --warn-soft: oklch(58% 0.16 70 / 0.18); --danger: oklch(52% 0.20 25); --danger-soft: oklch(52% 0.20 25 / 0.18); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Manrope', system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(140,150,170,0.35); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } a { color: inherit; text-decoration: none; } @keyframes awpSpin { to { transform: rotate(360deg); } } @keyframes awpFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes awpPopIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes awpToastIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- wallpaper ---------- */ .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .wallpaper { position: absolute; inset: 0; background-image: var(--wallpaper); background-size: var(--wallpaper-size); background-position: center; background-repeat: no-repeat; transition: background-image 0.4s ease; } .wallpaper::after { content: ""; position: absolute; inset: 0; background: var(--wall-scrim); } .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; will-change: auto; mix-blend-mode: screen; } .blob1 { width: 620px; height: 620px; top: -160px; left: -120px; background: oklch(55% 0.19 275 / 0.5); } .blob2 { width: 520px; height: 520px; top: 240px; right: -140px; background: oklch(60% 0.15 195 / 0.4); } .blob3 { width: 460px; height: 460px; bottom: -180px; left: 38%; background: oklch(50% 0.16 320 / 0.35); } :root[data-glass="light"] .blob { mix-blend-mode: soft-light; opacity: 0.7; } /* ---------- liquid glass ---------- */ /* The lens is the SVG displacement filter (#glass-filter): it bends the backdrop at the rim and splits R/G/B by different amounts. Everything the filter can't do — frost, specular rim, inner bloom — is inset box-shadow. */ .glass-surface__filter { pointer-events: none; opacity: 0; z-index: -1; width: 100%; height: 100%; position: absolute; inset: 0; } .glass { position: relative; isolation: isolate; background: hsl(var(--glass-frost-hsl) / var(--glass-frost, 0.1)); /* fallback for engines without url() in backdrop-filter */ backdrop-filter: blur(calc(var(--lg-blur) + 10px)) saturate(var(--glass-saturation, 1.6)); -webkit-backdrop-filter: blur(calc(var(--lg-blur) + 10px)) saturate(var(--glass-saturation, 1.6)); backdrop-filter: var(--filter-id, blur(0px)) blur(var(--lg-blur)) saturate(var(--glass-saturation, 1.6)); border: none; contain: paint; border-radius: 22px; box-shadow: var(--lg-drop), inset 0 0 2px 1px var(--lg-rim), inset 0 0 10px 4px var(--lg-rim-soft), inset 0 4px 16px var(--lg-inner), inset 0 8px 24px var(--lg-inner), inset 0 6px 56px var(--lg-inner); transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.2); } /* top-left specular sweep, drawn border-only so it reads as a lit bevel */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; padding: 1px; background: linear-gradient(140deg, var(--lg-spec) 0%, var(--lg-spec-soft) 18%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.03) 62%, var(--lg-spec-soft) 88%, var(--lg-spec) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .glass-strong { background: hsl(var(--glass-frost-hsl) / calc(var(--glass-frost, 0.1) + 0.08)); } .glass-subtle { background: hsl(var(--glass-frost-hsl) / calc(var(--glass-frost, 0.1) * 0.5)); backdrop-filter: blur(calc(var(--lg-blur) + 8px)) saturate(var(--glass-saturation, 1.6)); -webkit-backdrop-filter: blur(calc(var(--lg-blur) + 8px)) saturate(var(--glass-saturation, 1.6)); box-shadow: inset 0 0 2px 1px var(--lg-rim-soft), inset 0 0 10px 4px var(--lg-inner); } /* interactive glass: lens lifts and brightens on hover, compresses on press */ .glass-interactive { cursor: pointer; } .glass-interactive:hover { transform: translateY(-1px) scale(1.008); box-shadow: var(--lg-drop), inset 0 0 3px 1px var(--lg-spec), inset 0 0 14px 5px var(--lg-rim-soft), inset 0 6px 56px var(--lg-inner); } .glass-interactive:active { transform: scale(0.985); transition-duration: 0.08s; } @media (prefers-reduced-motion: reduce) { .glass, .glass-interactive:hover, .glass-interactive:active { transition: none; transform: none; } } .app-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; } .sidebar { width: 260px; min-width: 260px; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 28px 18px; gap: 28px; z-index: 2; border-radius: 0; border-top: none; border-bottom: none; border-left: none; } /* The mark leads and the wordmark sits under it, in the sidebar as on the login panel. */ .brand-row { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px; } .brand-mark { width: 84px; height: 84px; border-radius: 22px; border: 1px solid var(--glass-border-strong); box-shadow: 0 6px 22px var(--accent-soft); flex-shrink: 0; } .brand-title { font-size: 17px; font-weight: 800; letter-spacing: 0.02em; } .brand-sub { font-size: 11.5px; color: var(--text-faint); font-weight: 600; } .nav-list { display: flex; flex-direction: column; gap: 3px; flex: 1; margin-top: 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--text-dim); font-size: 13.5px; font-weight: 600; transition: background 0.15s ease; } .nav-item { border-radius: 999px; position: relative; isolation: isolate; } .nav-item:hover { background: var(--lg-tint-subtle); } .nav-item.active { background: var(--lg-tint-strong); color: var(--text); font-weight: 700; box-shadow: inset 0 1px 0 var(--lg-spec), inset 0 -1px 1px var(--lg-shade), 0 6px 16px -8px rgba(0,0,0,0.5); } .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; } .nav-item.active .nav-dot { background: var(--accent); } .main { flex: 1; height: 100vh; overflow-y: auto; overscroll-behavior: contain; position: relative; z-index: 1; } .header-bar { border-radius: 0; border-top: none; border-left: none; border-right: none; position: sticky; top: 0; z-index: 3; padding: 22px 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .header-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; } .header-title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; } .header-desc { font-size: 13.5px; color: var(--text-dim); max-width: 420px; text-align: right; } .content { padding: 32px 40px 80px; display: flex; flex-direction: column; gap: 24px; } .card { padding: 24px; display: flex; flex-direction: column; gap: 16px; border-radius: 24px; } .card-title { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .btn { position: relative; isolation: isolate; border: none; font-family: inherit; font-size: 14px; font-weight: 700; padding: 12px 22px; border-radius: 999px; cursor: pointer; color: var(--text); background: hsl(var(--glass-frost-hsl) / calc(var(--glass-frost, 0.1) + 0.04)); box-shadow: 0 6px 18px -6px rgba(0,0,0,0.45), inset 0 1px 0 var(--lg-spec), inset 0 -1px 1px var(--lg-shade); transition: transform 0.18s cubic-bezier(0.2,0.9,0.25,1.2), box-shadow 0.18s ease, background 0.18s ease; } .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; padding: 1px; background: linear-gradient(140deg, var(--lg-spec) 0%, rgba(255,255,255,0.06) 45%, var(--lg-spec-soft) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .btn:hover { transform: translateY(-1px); background: var(--lg-tint-strong); } .btn:active { transform: scale(0.96); transition-duration: 0.07s; } .btn:disabled { cursor: not-allowed; opacity: 0.6; transform: none; } .btn-primary { background: var(--accent-soft); box-shadow: 0 10px 26px -8px var(--accent-soft), inset 0 1px 0 var(--lg-spec), inset 0 -1px 1px var(--lg-shade); } .btn-primary:hover { background: color-mix(in oklab, var(--accent) 38%, transparent); } .btn-secondary { background: var(--lg-tint-strong); } .btn-ghost { background: transparent; color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--glass-border); } .btn-ghost::before { opacity: 0.4; } .btn-danger { background: var(--danger-soft); color: var(--danger); } .btn-sm { padding: 8px 16px; font-size: 13px; } .field { display: flex; flex-direction: column; gap: 8px; } .field-label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); } .control { background: var(--lg-tint-subtle); border: 1px solid transparent; border-radius: 14px; padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--text); outline: none; box-shadow: inset 0 1px 0 var(--lg-spec-soft), inset 0 -1px 1px var(--lg-shade), inset 0 0 0 1px var(--glass-border); transition: box-shadow 0.18s ease, background 0.18s ease; } .control:focus { background: var(--lg-tint); box-shadow: inset 0 1px 0 var(--lg-spec), inset 0 0 0 1px var(--glass-border-strong), 0 0 0 4px var(--accent-soft); } .control::placeholder { color: var(--text-faint); } textarea.control { resize: vertical; min-height: 120px; line-height: 1.5; } /* Native selects and date inputs render with the platform's own chrome, which sits badly on glass. Strip it and draw the chevron ourselves. */ select.control { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 17px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* The dropdown itself is drawn by the OS, so it needs a solid colour to stay legible. */ select.control option { background: var(--bg); color: var(--text); } :root[data-glass="light"] select.control option { background: #fff; } input[type="date"].control, input[type="time"].control { cursor: pointer; } input[type="date"].control::-webkit-calendar-picker-indicator, input[type="time"].control::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.55); cursor: pointer; } :root[data-glass="light"] input[type="date"].control::-webkit-calendar-picker-indicator, :root[data-glass="light"] input[type="time"].control::-webkit-calendar-picker-indicator { filter: opacity(0.55); } /* Filter bar on the call log: the date sits out in the open, everything else lives behind the Filter button. */ .filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .filter-bar .control { min-width: 0; } .filter-inline { display: flex; align-items: center; gap: 8px; } .filter-inline .field-label { white-space: nowrap; } .filter-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-border); } .filter-count { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; } table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 10px 14px; border-bottom: 1px solid var(--glass-border); } table.table td { padding: 14px; border-bottom: 1px solid var(--glass-border); } table.table tr.row-clickable { cursor: pointer; transition: background 0.15s ease; } table.table tr.row-clickable:hover { background: var(--glass-bg-subtle); } .badge { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; display: inline-block; } .badge-success { color: var(--accent2); background: var(--accent2-soft); } .badge-info { color: var(--accent); background: var(--accent-soft); } .badge-warn { color: var(--warn); background: var(--warn-soft); } .badge-danger { color: var(--danger); background: var(--danger-soft); } .modal-overlay { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 50; animation: awpFadeIn 0.15s ease; } .modal-panel { width: 520px; max-width: 92vw; padding: 30px; display: flex; flex-direction: column; gap: 18px; animation: awpPopIn 0.18s ease; max-height: 88vh; overflow-y: auto; border-radius: 26px; } .modal-title { font-size: 19px; font-weight: 800; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } .toast { position: fixed; bottom: 28px; right: 28px; z-index: 60; padding: 14px 18px; display: flex; align-items: center; gap: 12px; min-width: 260px; animation: awpToastIn 0.2s ease; border-radius: 16px; } .toast-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .toast-text { font-size: 13.5px; font-weight: 600; flex: 1; } .toast-close { font-size: 16px; color: var(--text-faint); cursor: pointer; line-height: 1; } .spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--glass-border); border-top-color: var(--accent); animation: awpSpin 0.8s linear infinite; } .empty-state { color: var(--text-faint); font-size: 13.5px; padding: 20px; text-align: center; } .agent-card { display: flex; flex-direction: column; gap: 10px; } .agent-name { font-size: 16px; font-weight: 800; } .agent-number { font-size: 12.5px; color: var(--text-faint); font-weight: 600; } .agent-prompt { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; max-height: 60px; overflow: hidden; } .agent-actions { display: flex; gap: 8px; margin-top: 6px; } .agent-call-row { display: flex; gap: 8px; margin-top: 10px; } .agent-call-row .control { flex: 1; } .transcript { display: flex; flex-direction: column; gap: 12px; } .bubble { max-width: 70%; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; } .bubble-agent { align-self: flex-start; background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-bottom-left-radius: 4px; } .bubble-user { align-self: flex-end; background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); color: var(--text); border-bottom-right-radius: 4px; } .bubble-role { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-bottom: 4px; } .back-link { font-size: 13px; font-weight: 700; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .back-link:hover { color: var(--text); } /* ---------- wallpaper picker ---------- */ .wall-trigger { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-dim); background: var(--lg-tint-subtle); box-shadow: inset 0 1px 0 var(--lg-spec-soft), inset 0 0 0 1px var(--glass-border); transition: transform 0.18s cubic-bezier(0.2,0.9,0.25,1.2), background 0.18s ease; } .wall-trigger:hover { background: var(--lg-tint); color: var(--text); transform: translateY(-1px); } .wall-swatch-mini { width: 18px; height: 18px; border-radius: 6px; background-image: var(--wallpaper); background-size: cover; box-shadow: inset 0 0 0 1px var(--glass-border-strong); flex-shrink: 0; } .wall-panel { display: flex; flex-direction: column; gap: 16px; } .wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; } .wall-swatch { position: relative; aspect-ratio: 4/3; border-radius: 16px; cursor: pointer; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--glass-border), 0 6px 16px -8px rgba(0,0,0,0.5); transition: transform 0.2s cubic-bezier(0.2,0.9,0.25,1.2), box-shadow 0.2s ease; } .wall-swatch:hover { transform: translateY(-2px) scale(1.03); } .wall-swatch.selected { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft), 0 8px 20px -8px rgba(0,0,0,0.5); } .wall-swatch-label { position: absolute; left: 8px; bottom: 6px; font-size: 10.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7); } .wall-mode-row { display: flex; gap: 8px; } .wall-mode { flex: 1; text-align: center; padding: 9px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-dim); background: var(--lg-tint-subtle); box-shadow: inset 0 0 0 1px var(--glass-border); } .wall-mode.selected { color: var(--text); background: var(--lg-tint-strong); box-shadow: inset 0 1px 0 var(--lg-spec), inset 0 0 0 1px var(--glass-border-strong); } .wall-row { display: flex; gap: 8px; align-items: center; } .wall-row .control { flex: 1; } .wall-hint { font-size: 11.5px; color: var(--text-faint); font-weight: 600; } .wall-slider { width: 100%; accent-color: var(--accent); background: transparent; } /* ---------- chrome polish ---------- */ .sidebar, .header-bar { background: var(--lg-tint-subtle); backdrop-filter: blur(20px) saturate(var(--glass-saturation, 1.6)); -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturation, 1.6)); } .sidebar { box-shadow: inset -1px 0 0 var(--glass-border), 1px 0 40px -20px rgba(0,0,0,0.6); } .header-bar { box-shadow: inset 0 -1px 0 var(--glass-border), 0 12px 30px -24px rgba(0,0,0,0.7); } .badge { box-shadow: inset 0 1px 0 var(--lg-spec-soft), inset 0 0 0 1px var(--glass-border); } .card { border-radius: 26px; } table.table tr.row-clickable:hover { background: var(--lg-tint-subtle); } .bubble { box-shadow: inset 0 1px 0 var(--lg-spec-soft), inset 0 -1px 1px var(--lg-shade); } .bubble-agent { background: var(--lg-tint); border: none; } .modal-panel { border-radius: 30px; } .modal-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .spinner { border-color: var(--glass-border); border-top-color: var(--accent); } /* ---------- runner, monitor, calendar ---------- */ .row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cell-muted { color: var(--text-faint); font-size: 12.5px; } .progress-track { height: 6px; border-radius: 999px; background: var(--lg-tint-subtle); overflow: hidden; min-width: 120px; margin-bottom: 6px; } .progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; } .monitor-run { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; } .monitor-run + .monitor-run { border-top: 1px solid var(--glass-border); } .monitor-call { display: flex; flex-direction: column; gap: 10px; } .monitor-call-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* The name/number block takes the slack so the badge stays pinned to the right edge of the card rather than sitting under the name. */ .monitor-call-who { min-width: 0; flex: 1; } .monitor-call-who .agent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); flex: none; } /* Only a call that said something in the last few seconds pulses, so a quiet call still reads as connected without competing for attention. */ .live-badge-hot .live-dot { animation: awpPulse 1.2s ease-in-out infinite; } @keyframes awpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } } .monitor-transcript { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; } .monitor-transcript .bubble { max-width: 88%; font-size: 12.5px; padding: 9px 13px; } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .slot { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--glass-border); font-family: inherit; font-size: 12.5px; color: var(--text); text-align: left; } .slot-free { background: var(--lg-tint-subtle); cursor: pointer; transition: background 0.15s ease; } .slot-free:hover { background: var(--accent-soft); } .slot-booked { background: var(--accent2-soft); border-color: color-mix(in oklab, var(--accent2) 40%, transparent); } .slot-time { font-weight: 700; } .slot-who { color: var(--text-dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ---------- personas ---------- */ .persona-style { min-height: 150px; font-size: 12.5px; line-height: 1.6; } .speaker-option { padding: 10px 14px; border-radius: 14px; cursor: pointer; border: 1px solid var(--glass-border); background: var(--lg-tint-subtle); margin-top: 8px; transition: background 0.15s ease, border-color 0.15s ease; } .speaker-option:hover { background: var(--lg-tint); } .speaker-option.selected { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 45%, transparent); } .speaker-name { font-size: 13px; font-weight: 700; } /* Sign-in screen: the only thing rendered before a session exists. */ /* Same lift as .app-shell: .backdrop is position:fixed at z-index 0, so anything left in normal flow paints underneath the wallpaper. */ .login-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-panel { width: 100%; max-width: 380px; padding: 28px; display: flex; flex-direction: column; gap: 16px; border-radius: 26px; } .sidebar-user { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Login: the mark leads, centred above the fields. */ .login-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .login-logo { width: 118px; height: 118px; border-radius: 30px; border: 1px solid var(--glass-border-strong); box-shadow: 0 8px 28px var(--accent-soft); } /* The mark is inline SVG, so the lettering and ring can be recoloured on hover. Those shapes are the near-white fills in the file; the black plate keeps its own fill. */ .logo { overflow: hidden; line-height: 0; cursor: pointer; } .logo svg { display: block; width: 100%; height: 100%; } .logo svg path[fill="#FDFDFD"], .logo svg path[fill="#FEFEFE"], .logo svg path[fill="#FBFBFB"], .logo svg path[fill="#FCFCFC"], .logo svg path[fill="#FBFBFA"], .logo svg path[fill="#4B4B4B"] { transition: fill 0.2s ease; } .logo:hover svg path[fill="#FDFDFD"], .logo:hover svg path[fill="#FEFEFE"], .logo:hover svg path[fill="#FBFBFB"], .logo:hover svg path[fill="#FCFCFC"], .logo:hover svg path[fill="#FBFBFA"], .logo:hover svg path[fill="#4B4B4B"] { fill: var(--accent); } /* Calendar timezone, pinned to the top-right of the console. */ .tz-chip { position: fixed; bottom: 20px; right: 24px; z-index: 5; display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); } .tz-chip:hover { color: var(--text); } .tz-clock { font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .tz-zone { font-size: 11.5px; color: var(--text-faint); } /* ---------- public booking page ---------- */ /* Opened by the customer from a texted link: one panel, no console chrome, and wide enough on a phone that the time chips stay tappable. */ .booking-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .booking-panel { width: 100%; max-width: 560px; padding: 28px; display: flex; flex-direction: column; gap: 18px; border-radius: 26px; } .booking-head { display: flex; flex-direction: column; gap: 4px; } .booking-note { font-size: 12px; color: var(--text-faint); } .booking-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .booking-day { flex: 0 0 auto; padding: 9px 14px; border-radius: 14px; cursor: pointer; border: 1px solid var(--glass-border); background: var(--lg-tint-subtle); font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-dim); transition: background 0.15s ease, color 0.15s ease; } .booking-day:hover { background: var(--accent-soft); color: var(--text); } .booking-day.active { background: var(--accent-soft); color: var(--text); border-color: color-mix(in oklab, var(--accent) 55%, transparent); } .booking-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } .booking-time { padding: 11px 10px; border-radius: 14px; cursor: pointer; border: 1px solid var(--glass-border); background: var(--lg-tint-subtle); font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; transition: background 0.15s ease; } .booking-time:hover { background: var(--accent-soft); } .booking-time.active { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 60%, transparent); box-shadow: 0 4px 18px var(--accent-soft); } .booking-form { display: flex; flex-direction: column; gap: 12px; } .booking-submit { width: 100%; } .booking-confirm { display: flex; flex-direction: column; gap: 6px; } .booking-confirm-when { font-size: 18px; font-weight: 800; color: var(--text); } /* ---------- call review ---------- */ /* Findings sit under a live transcript and on a call's own page, so they have to read at a glance without competing with the conversation above them. */ .issue-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .issue { padding: 9px 12px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--lg-tint-subtle); display: flex; flex-direction: column; gap: 4px; } .issue-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .issue-detail { font-size: 12.5px; line-height: 1.5; color: var(--text); } .issue-quote { font-size: 12px; color: var(--text-dim); font-style: italic; border-left: 2px solid var(--glass-border-strong); padding-left: 8px; } .review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .review-summary { font-size: 13px; line-height: 1.6; color: var(--text); margin-top: 6px; } /* The backend acting on the agent's behalf mid-call: neither side said it out loud, so it sits centred and quiet between the two speakers. */ .bubble-system { align-self: center; max-width: 92%; background: var(--warn-soft); border: 1px dashed var(--glass-border-strong); color: var(--text-dim); font-size: 11.5px; font-style: italic; text-align: center; } /* Dead air before an agent turn, shown beside the role on the transcript. Muted by default so a normal turn reads as one line; a slow one is meant to catch the eye. */ .bubble-gap { margin-left: 8px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.75; font-variant-numeric: tabular-nums; text-transform: none; } .bubble-gap-slow { color: var(--danger, #ff6b6b); opacity: 1; } /* --------------------------------------------------------------------------- Number pool --------------------------------------------------------------------------- */ /* Pool tallies. auto-fit rather than a fixed count so the six tiles reflow to two rows on a laptop instead of squeezing to unreadable widths. */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-tile { padding: 16px 18px; border-radius: 18px; display: flex; flex-direction: column; gap: 4px; } .stat-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; } .stat-label { font-size: 11.5px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; } .section-title { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 10px; } .filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } /* The mapping step needs room for a card per column, so it opts out of the standard modal width rather than scrolling a 9-column file in a 520px box. */ .modal-wide { width: 880px; } .mapping-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .mapping-card { padding: 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; } .mapping-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mapping-col { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Fixed height so every card's dropdown lines up, however many samples a column happened to have -- a ragged grid makes the roles hard to scan down. */ .mapping-samples { display: flex; flex-direction: column; gap: 2px; height: 68px; overflow: hidden; } .mapping-samples .agent-number { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mapping-card .control { padding: 8px 12px; font-size: 13px; } .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; } /* Two fields side by side, for pairs that read as one thing (first/last name). */ .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; min-width: 0; } /* Outcome picker in the run form. */ .bucket-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .bucket-option { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 6px 0; } .bucket-option input { margin-top: 3px; flex: none; } .bucket-option > span { display: flex; flex-direction: column; gap: 1px; } .bucket-label { font-size: 13.5px; font-weight: 600; }