/* ============================================================ Lougha Chats — design system (2026) Operator-grade editorial. Geist + Fraunces. OKLCH ramps. Dynamic light/dark via [data-theme] on . ============================================================ */ :root, [data-theme="light"] { /* ─── Brand & accent ─── */ --wa: #25d366; --wa-dark: #1da851; --wa-soft: oklch(0.85 0.18 150 / 0.18); --lougha: #10b7e2; --lougha-soft: oklch(0.85 0.10 220 / 0.18); /* Single accent — electric cobalt. Used for focus, primary actions, active states, links. Color = affordance, not decoration. */ --accent: oklch(0.52 0.24 264); --accent-hover: oklch(0.46 0.24 264); --accent-strong: oklch(0.42 0.24 264); --accent-soft: oklch(0.52 0.24 264 / 0.10); --accent-fg: #ffffff; /* ─── Surfaces (warm cream → less harsh for 8h/day operators) ─── */ --bg: oklch(0.99 0.005 75); --surface: #ffffff; --surface-elevated: #ffffff; --surface-sunken: oklch(0.97 0.006 75); --surface-hover: oklch(0.965 0.006 75); --surface-active: oklch(0.95 0.008 75); /* ─── Borders ─── */ --border: oklch(0.92 0.004 250); --border-strong: oklch(0.86 0.005 250); --border-subtle: oklch(0.94 0.003 250); /* ─── Text ─── */ --text: oklch(0.18 0.012 250); --text-secondary: oklch(0.40 0.010 250); --text-tertiary: oklch(0.55 0.008 250); --text-muted: oklch(0.65 0.006 250); --text-inverse: oklch(0.98 0.005 75); /* ─── Status (muted but legible — same hue both themes) ─── */ --success: oklch(0.60 0.16 150); --success-soft: oklch(0.60 0.16 150 / 0.12); --warning: oklch(0.72 0.16 75); --warning-soft: oklch(0.72 0.16 75 / 0.14); --danger: oklch(0.58 0.22 25); --danger-soft: oklch(0.58 0.22 25 / 0.10); --info: oklch(0.60 0.15 230); --info-soft: oklch(0.60 0.15 230 / 0.12); /* ─── Gray ramp (back-compat — kept for the 4500-line stylesheet that references --gray-XXX directly. Values map to a perceptually-even OKLCH ramp; dark theme flips them so legacy code re-themes for free.) */ --gray-50: oklch(0.985 0.003 75); --gray-100: oklch(0.965 0.005 75); --gray-200: oklch(0.92 0.004 250); --gray-300: oklch(0.85 0.005 250); --gray-400: oklch(0.68 0.010 250); --gray-500: oklch(0.55 0.010 250); --gray-600: oklch(0.42 0.010 250); --gray-700: oklch(0.30 0.012 250); --gray-800: oklch(0.22 0.012 250); --gray-900: oklch(0.15 0.012 250); /* ─── Legacy accent colors (kept for components that hard-code them) ─── */ --indigo-500: #6366f1; --pink-500: #ec4899; --blue-500: #3b82f6; --orange-500: #f97316; --violet-500: #8b5cf6; --amber-500: #f59e0b; --red-500: #ef4444; --purple-600: #7e22ce; --green-500: #16a34a; --green-600: #15803d; /* ─── Avatar palette (OKLCH-balanced, equal lightness) ─── */ --av-1: oklch(0.62 0.18 264); --av-2: oklch(0.62 0.18 220); --av-3: oklch(0.62 0.16 150); --av-4: oklch(0.62 0.18 310); --av-5: oklch(0.62 0.18 350); --av-6: oklch(0.65 0.16 60); --av-7: oklch(0.62 0.14 180); --av-8: oklch(0.62 0.16 200); /* ─── Geometry ─── */ --sidebar-w: 360px; --topbar-h: 56px; --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --radius-bubble: 14px; /* ─── Shadows (subtle in light, pronounced in dark) ─── */ --shadow-sm: 0 1px 2px oklch(0.15 0.012 250 / 0.04); --shadow: 0 1px 3px oklch(0.15 0.012 250 / 0.05), 0 4px 12px oklch(0.15 0.012 250 / 0.04); --shadow-lg: 0 12px 32px oklch(0.15 0.012 250 / 0.10), 0 4px 12px oklch(0.15 0.012 250 / 0.06); /* ─── Typography ─── */ --font-sans: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: 'Fraunces', Georgia, "Times New Roman", serif; --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace; /* ─── Motion ─── */ --ease: cubic-bezier(0.2, 0.0, 0.0, 1); --motion-fast: 120ms; --motion-normal: 180ms; --motion-slow: 280ms; } /* ─── Dark theme overrides ────────────────────────────────────────────── Same token names, different values. Manual override via the topbar toggle (writes data-theme + localStorage). On first load with no saved preference, the inline script honours OS prefers-color-scheme. */ [data-theme="dark"] { /* Surfaces — cool charcoal, layered for depth */ --bg: oklch(0.16 0.008 250); --surface: oklch(0.20 0.008 250); --surface-elevated: oklch(0.24 0.010 250); --surface-sunken: oklch(0.18 0.008 250); --surface-hover: oklch(0.25 0.010 250); --surface-active: oklch(0.28 0.012 250); /* Borders — visible but quiet */ --border: oklch(0.28 0.010 250); --border-strong: oklch(0.38 0.012 250); --border-subtle: oklch(0.24 0.010 250); /* Text — warm whites */ --text: oklch(0.96 0.005 75); --text-secondary: oklch(0.78 0.008 250); --text-tertiary: oklch(0.62 0.010 250); --text-muted: oklch(0.48 0.010 250); --text-inverse: oklch(0.18 0.012 250); /* Accent — slightly brighter for dark-bg contrast */ --accent: oklch(0.70 0.22 264); --accent-hover: oklch(0.76 0.22 264); --accent-strong: oklch(0.62 0.22 264); --accent-soft: oklch(0.70 0.22 264 / 0.20); /* Status — brightness pivot for AA contrast on charcoal */ --success: oklch(0.72 0.16 150); --success-soft: oklch(0.72 0.16 150 / 0.18); --warning: oklch(0.82 0.15 75); --warning-soft: oklch(0.82 0.15 75 / 0.18); --danger: oklch(0.72 0.20 25); --danger-soft: oklch(0.72 0.20 25 / 0.20); --info: oklch(0.74 0.16 230); --info-soft: oklch(0.74 0.16 230 / 0.18); /* Gray ramp — flipped so var(--gray-900) text stays light in dark mode */ --gray-50: oklch(0.22 0.010 250); --gray-100: oklch(0.26 0.010 250); --gray-200: oklch(0.32 0.010 250); --gray-300: oklch(0.42 0.010 250); --gray-400: oklch(0.55 0.010 250); --gray-500: oklch(0.66 0.008 250); --gray-600: oklch(0.76 0.008 250); --gray-700: oklch(0.86 0.006 250); --gray-800: oklch(0.92 0.005 75); --gray-900: oklch(0.96 0.005 75); /* Brand soft tints — slightly stronger to remain visible on dark surfaces */ --wa-soft: oklch(0.72 0.16 150 / 0.20); --lougha-soft: oklch(0.72 0.14 220 / 0.20); /* Shadows — black with more diffusion (dark surfaces eat soft shadows) */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30); --shadow: 0 1px 3px oklch(0 0 0 / 0.45), 0 4px 14px oklch(0 0 0 / 0.30); --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55), 0 4px 14px oklch(0 0 0 / 0.40); } /* ─── Theme-toggle button — sun visible in dark mode, moon in light. */ .theme-toggle { color: var(--text-secondary); transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } .theme-toggle:hover { color: var(--text); background: var(--surface-hover); } .theme-toggle .theme-icon { display: none; } [data-theme="light"] .theme-toggle .theme-icon-dark, :root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: inline-flex; } [data-theme="dark"] .theme-toggle .theme-icon-light { display: inline-flex; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-sans); color: var(--text); background: var(--bg); transition: background var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease); } body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } .muted { color: var(--gray-500); } .row { display: flex; align-items: center; } .between { justify-content: space-between; } .mb12 { margin-bottom: 12px; } .mobile-only { display: none; } @media (max-width: 768px) { .mobile-only { display: inline-flex; } } /* Chat back button — promoted to desktop when there's a cross-chat * history stack to pop (set by navigateToChat in app.js). */ body.has-chat-history #chatBackBtn { display: inline-flex; } /* ─── Lucide icon defaults ─── */ [data-lucide] { width: 18px; height: 18px; stroke-width: 2; } .icon-btn [data-lucide] { width: 18px; height: 18px; } .icon-btn-sm [data-lucide] { width: 14px; height: 14px; } /* ─── Buttons (H1: 3-tier height system) ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; background: transparent; color: var(--gray-700); } .btn:hover { background: var(--gray-100); } .btn-primary { background: var(--wa); color: #fff; border-color: transparent; } .btn-primary:hover { background: var(--wa-dark); } .btn-ghost { color: var(--gray-600); background: var(--gray-100); } .btn-ghost:hover { background: var(--gray-200); color: var(--gray-900); } .btn-block { width: 100%; } .btn-lg { height: 42px; padding: 0 18px; font-size: 14px; font-weight: 600; } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; filter: saturate(0.6); pointer-events: none; } .btn-primary:disabled { background: var(--gray-300); color: #fff; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--gray-500); cursor: pointer; font-family: inherit; transition: all 0.15s; position: relative; } .icon-btn:hover { background: var(--gray-100); color: var(--gray-700); } .icon-btn-primary { background: var(--wa); color: #fff; } .icon-btn-primary:hover { background: var(--wa-dark); color: #fff; } .icon-btn-sm { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px; color: var(--gray-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icon-btn-sm:hover { background: var(--gray-200); color: var(--gray-700); } /* Tooltip */ .tip { position: relative; } .tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--gray-900); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 100; } .tip:hover::after { opacity: 1; } .with-badge { position: relative; } .badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--amber-500); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* ─── Inputs ─── */ .input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; outline: none; } .input::placeholder { color: var(--text-muted); } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input:disabled { background: var(--surface-sunken); color: var(--text-tertiary); cursor: not-allowed; } /* ─── Screens / layout ─── */ .screen { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* ─── Login screen ─── */ .login-screen { background: var(--bg); position: relative; } /* Editorial backdrop — soft gradient mesh that picks up the accent in both themes. Quiet enough that the card reads as primary; present enough that the page isn't a flat blank rectangle. */ .login-screen::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 22% 22%, var(--accent-soft), transparent 60%), radial-gradient(ellipse 50% 40% at 82% 78%, var(--wa-soft), transparent 60%); opacity: 0.9; } .login-card { position: relative; z-index: 1; width: 360px; padding: 44px 36px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 12px; text-align: center; } .login-logo { width: 56px; height: 56px; margin: 0 auto 8px; background: var(--accent-soft); border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; } .login-logo [data-lucide] { width: 28px; height: 28px; color: var(--accent); } .login-title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.015em; color: var(--gray-900); font-variation-settings: "opsz" 144; } .login-subtitle { margin: 0 0 16px; color: var(--gray-500); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; } .error-text { color: var(--red-500); font-size: 13px; margin: 4px 0 0; } /* ─── QR screen ─── */ .qr-screen { background: var(--gray-50); } .qr-card { width: 380px; padding: 32px; background: #fff; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .qr-title { margin: 0; font-size: 20px; font-weight: 700; } .qr-subtitle { margin: 0; color: var(--gray-500); font-size: 13px; line-height: 1.5; } .qr-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; color: var(--gray-400); font-size: 13px; } .qr-image { width: 280px; height: 280px; border-radius: 8px; border: 1px solid var(--gray-200); } .qr-status { margin: 0; color: var(--gray-500); font-size: 12px; } .spinner { width: 32px; height: 32px; border: 3px solid var(--gray-200); border-top-color: var(--wa); border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner-sm { width: 16px; height: 16px; border: 2px solid var(--gray-200); border-top-color: var(--gray-400); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── App shell ─── */ .app { display: flex; flex-direction: column; height: 100vh; background: var(--bg); } .topbar { height: var(--topbar-h); /* 3-column grid: left toggle, centered tabs, right user pill. Each side track is `1fr` so they're guaranteed equal width — that centers `.view-tabs` in the middle of the bar regardless of how wide the user pill on the right ends up. The toggle and the pill align inside their own columns via justify-self. Ayoub asked for a centered topbar that stays centered as more items get added. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .topbar-title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); } .topbar-spacer { display: none; } /* superseded by the grid template above */ .topbar > #sidebarToggleBtn { grid-column: 1; justify-self: start; } .topbar > .view-tabs { grid-column: 2; justify-self: center; } .topbar > .topbar-right { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; } /* Back-compat — if the topbar-right wrapper ever goes missing, fall back to placing userPill in column 3 directly. */ .topbar > #userPill { grid-column: 3; justify-self: end; } .main { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr) 0; background: var(--bg); transition: grid-template-columns 0.2s ease; } .main.with-profile { grid-template-columns: var(--sidebar-w) minmax(0,1fr) 340px; } .main.with-profile #profilePanel { display: flex; } .main:not(.with-profile) #profilePanel { display: none; } .main.sidebar-collapsed { grid-template-columns: 0 minmax(0,1fr) 0; } .main.sidebar-collapsed.with-profile { grid-template-columns: 0 minmax(0,1fr) 340px; } .main.sidebar-collapsed .sidebar { display: none; } /* ─── Sidebar ─── */ .sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); } .sidebar-head { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); flex-shrink: 0; } .section-title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.015em; font-variation-settings: "opsz" 144; color: var(--text); } /* Tabs (channel switcher: Inbox / Groups) */ .tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-sunken); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); margin-bottom: 10px; } .tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 0; background: transparent; border-radius: var(--radius-xs); font-size: 12px; font-weight: 500; color: var(--text-tertiary); cursor: pointer; transition: all 0.15s; font-family: inherit; } .tab:hover { color: var(--text); } .tab [data-lucide] { width: 14px; height: 14px; } .tab.tab-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); } .tab[data-channel="groups"].tab-active { color: var(--av-4); } .tab[data-channel="clubs"].tab-active { color: var(--av-5); } .tab[data-channel="sms"].tab-active { color: var(--av-2); } .tab[data-channel="email"].tab-active { color: var(--av-6); } /* Connection bar — quiet status pill above the search. Connected: success-soft / success. Disconnected: surface-sunken / muted text. The "Disconnect" action uses --danger so it reads as destructive. */ .conn-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 12px; } .conn-left { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); } .conn-disconnected { background: var(--surface-sunken); color: var(--text-tertiary); } .conn-connected { background: var(--success-soft); color: var(--success); } .conn-connected .conn-dot { background: var(--success); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .conn-action { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); font-family: inherit; } .conn-action:hover { color: var(--accent-hover); } .conn-connected .conn-action { color: var(--danger); } .conn-connected .conn-action:hover { color: var(--danger); filter: brightness(0.9); } .conn-action [data-lucide] { width: 12px; height: 12px; } /* Filter dropdown */ .dropdown { position: relative; margin-bottom: 10px; } .filter-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s; font-family: inherit; } .filter-btn:hover { border-color: var(--border-strong); } .filter-btn [data-lucide] { width: 14px; height: 14px; } /* Total-matching count pill on the right side of the filter button — * cobalt accent matches the rest of the design system's "selected * count" affordance (was indigo). */ .filter-count-pill { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; margin-left: auto; } .filter-count-pill.hidden { display: none; } .filter-btn .chev { margin-left: auto; transition: transform 0.15s; } .filter-btn[aria-expanded="true"] .chev { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; } .dropdown-item { width: 100%; text-align: left; padding: 8px 12px; border: 0; background: transparent; font-size: 12px; color: var(--text-secondary); cursor: pointer; display: block; font-family: inherit; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } .dropdown-item:hover { background: var(--surface-hover); color: var(--text); } .dropdown-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } .dropdown-section-title { padding: 6px 12px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); } /* Pinned chat — subtle yellow tint + small icon next to the name. The icon is rendered inside .conv-name-wrap so it doesn't disrupt unread badge / time-stamp layout on the right side of the row. */ .conv-item.is-pinned { background: linear-gradient(0deg, rgba(250, 204, 21, 0.06), rgba(250, 204, 21, 0.06)); } .conv-item.is-pinned.active { background: var(--wa-soft); } .conv-name-wrap { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .conv-pin-icon { fill: currentColor; } .conv-flag-icon { fill: #fef2f2; } .conv-unread.flag-badge { background: #dc2626; } /* Synthetic team-user rows shown under the Team filter — visually distinct so the agent knows clicking will route to Team chat (not WA). */ .conv-item.is-synthetic-team { background: linear-gradient(0deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0.04)); } .conv-item.is-synthetic-team::after { content: 'TEAM'; margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; background: rgba(99, 102, 241, 0.12); color: #4f46e5; flex-shrink: 0; } /* Right-click context menu shared across the conv-list. Floating panel, small enough to not feel modal. Closes on outside click or scroll. */ .conv-ctx-menu { background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; min-width: 160px; } .conv-ctx-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: transparent; font-size: 13px; color: var(--gray-700); cursor: pointer; text-align: left; border-radius: 6px; } .conv-ctx-item:hover { background: var(--gray-50); color: var(--gray-900); } /* ─── Team chat view ─── two-pane layout: directory on the left, active conversation on the right. Mirrors the WhatsApp-web split. */ #teamchatView .bulk-body, #teamgroupsView .bulk-body { padding: 0; flex: 1; min-height: 0; } .teamchat-grid { display: grid; grid-template-columns: 320px 1fr; height: 100%; min-height: 0; } .teamchat-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; padding: 12px; background: var(--surface); } .teamchat-tabs { display: flex; gap: 6px; } .teamchat-tab { flex: 1; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary); font-family: inherit; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } .teamchat-tab:hover { background: var(--surface-hover); } .teamchat-tab.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .teamchat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .teamchat-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; } .teamchat-row:hover { background: var(--surface-hover); } .teamchat-row.active { background: var(--accent-soft); } .teamchat-avatar-wrap { position: relative; flex-shrink: 0; } .presence-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); background: var(--text-muted); } .presence-dot.online { background: var(--success); } .teamchat-row-body { flex: 1; min-width: 0; } .teamchat-row-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); } .teamchat-row-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.04em; } .teamchat-row-tag.wa { background: var(--wa-soft); color: var(--wa-dark); } .teamchat-row-preview { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .teamchat-unread { background: var(--wa); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); flex-shrink: 0; } .teamchat-empty-row { padding: 20px; text-align: center; font-size: 12.5px; color: var(--text-tertiary); } .teamchat-section-title { padding: 10px 8px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); } .teamchat-row-wagroup .teamchat-row-tag.wa { font-weight: 700; } .teamchat-pane { display: flex; flex-direction: column; min-height: 0; background: var(--bg); } .teamchat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .teamchat-active { display: flex; flex-direction: column; flex: 1; min-height: 0; } .teamchat-active.hidden { display: none; } .teamchat-active-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface); } .teamchat-active-head-info { display: flex; flex-direction: column; flex: 1; } .teamchat-active-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .teamchat-active-sub { font-size: 12px; color: var(--text-tertiary); } .teamchat-open-inbox-link { font-size: 12px; font-weight: 600; color: var(--wa-dark); text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--wa-soft); white-space: nowrap; transition: background var(--motion-fast) var(--ease); } .teamchat-open-inbox-link:hover { background: var(--wa-soft); filter: brightness(0.95); } [data-theme="dark"] .teamchat-open-inbox-link { color: var(--wa); } [data-theme="dark"] .teamchat-open-inbox-link:hover { filter: brightness(1.15); } .teamchat-messages { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); } .teamchat-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; color: var(--gray-600); text-align: center; } .teamchat-empty-bubble { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(99, 102, 241, 0.10); color: #6366f1; } .teamchat-empty-bubble svg { width: 32px; height: 32px; } .teamchat-empty-title { font-size: 15px; font-weight: 600; color: var(--gray-800); max-width: 360px; } .teamchat-empty-sub { font-size: 12.5px; color: var(--gray-500); max-width: 340px; line-height: 1.45; } .teamchat-msg { max-width: 60%; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; position: relative; } /* Team-chat bubbles — mirror the inbox bubbles' theming pattern via the bubble's own CSS vars so the same outbound emerald reads in both modes (light WA-green / dark deep emerald). */ .teamchat-msg.me { align-self: flex-end; background: #d9fdd3; color: oklch(0.20 0.04 150); } [data-theme="dark"] .teamchat-msg.me { background: oklch(0.32 0.08 150); color: oklch(0.95 0.02 150); } .teamchat-msg.them { align-self: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--border-subtle); } [data-theme="dark"] .teamchat-msg.them { background: var(--surface-elevated); } .teamchat-msg-author { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 2px; } .teamchat-msg-text { white-space: pre-wrap; word-wrap: break-word; } .teamchat-msg-image { max-width: 280px; border-radius: var(--radius-sm); display: block; margin-top: 4px; } .teamchat-msg-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-sunken); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); text-decoration: none; margin-top: 4px; max-width: 280px; border: 1px solid var(--border-subtle); transition: background var(--motion-fast) var(--ease); } .teamchat-msg-file:hover { background: var(--surface-hover); } .teamchat-msg-file svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-secondary); } .teamchat-msg-file .doc-name { font-weight: 600; word-break: break-word; } /* Multi-select on team chat bubbles — same selection styling as inbox. */ .teamchat-msg-row { position: relative; } .teamchat-msg-row .msg-select-btn { position: absolute; top: 50%; transform: translateY(-50%); left: 4px; z-index: 5; } .teamchat-msg-row.me .msg-select-btn { left: auto; right: 4px; } .teamchat-msg-row.is-selected { background: rgba(34, 197, 94, 0.08); } .teamchat-msg-row.selection-mode { cursor: pointer; } .teamchat-msg-meta { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 10px; color: var(--gray-500); margin-top: 2px; } .teamchat-tick { font-weight: 700; } .teamchat-tick.read { color: #4ea3ff; } .teamchat-compose { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--gray-200); background: #f7f7f7; /* Wrap so the reply-preview pill drops onto its own row above the buttons + textarea row, instead of competing for horizontal space and pushing the input off-screen on long quoted messages. */ flex-wrap: wrap; } .teamchat-compose .icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gray-600); background: transparent; transition: background 100ms ease; } .teamchat-compose .icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--gray-800); } .teamchat-textarea { flex: 1; resize: none; max-height: 120px; padding: 9px 14px; border-radius: 22px; background: #fff; border: 1px solid var(--gray-200); font-size: 14px; } .teamchat-textarea:focus { border-color: var(--blue-400, #60a5fa); outline: none; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); } .teamchat-compose { position: relative; } .teamchat-record-overlay { position: absolute; inset: 0; background: #f7f7f7; padding: 8px 12px; display: flex; align-items: center; gap: 10px; } .teamchat-record-overlay.hidden { display: none; } .teamroom-members { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; } .teamroom-member-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; } .teamroom-member-row:hover { background: var(--gray-50); } /* Search */ .search { position: relative; } .search [data-lucide] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; } .search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; outline: none; font-family: inherit; transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); } .search input::placeholder { color: var(--text-muted); } .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Conversation list */ .conv-list { flex: 1; overflow-y: auto; } .conv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px 20px; gap: 8px; color: var(--gray-400); font-size: 13px; } /* Conv rows — calmer rhythm, accent rail/active state, larger date. Hover uses --surface-hover for uniform feel across the app; active pulls --accent-soft (cobalt) and an --accent rail. Channel variants keep their per-channel rail colour for quick visual chunking. */ .conv-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px; cursor: pointer; transition: background 0.12s; position: relative; } .conv-item + .conv-item { border-top: 1px solid var(--border-subtle); } .conv-item:hover { background: var(--surface-hover); } .conv-item.active { background: var(--accent-soft); } .conv-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .conv-item.active.channel-groups::before { background: var(--av-4); } .conv-item.active.channel-clubs::before { background: var(--av-5); } .avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; background: var(--av-1); } .avatar-md { width: 40px; height: 40px; font-size: 13px; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; } .avatar-c1 { background: var(--av-1); } .avatar-c2 { background: var(--av-2); } .avatar-c3 { background: var(--av-3); } .avatar-c4 { background: var(--av-4); } .avatar-c5 { background: var(--av-5); } .avatar-c6 { background: var(--av-6); } .avatar-c7 { background: var(--av-7); } .avatar-c8 { background: var(--av-8); } .conv-body { flex: 1; min-width: 0; } .conv-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .conv-name-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; } .conv-name { font-size: 14.5px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-label-chip { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); } .conv-date { flex-shrink: 0; font-size: 11.5px; color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; } .conv-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; } .conv-preview { flex: 1; min-width: 0; font-size: 13px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-unread { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px; background: #25d366; /* WhatsApp green */ color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(37, 211, 102, 0.35); letter-spacing: 0.2px; } .conv-item.active .conv-unread { background: #1ea952; box-shadow: 0 1px 2px rgba(30, 169, 82, 0.45); } /* When a row has unread messages, brighten the time + preview to draw the eye — * matches the WhatsApp pattern of "new = high-contrast, read = dimmed". */ .conv-date-unread { color: #25d366 !important; font-weight: 700; } .conv-preview-unread { color: var(--gray-900) !important; font-weight: 600; } /* ─── Chat pane ────────────────────────────────────────────────────── The chat canvas is the most-looked-at surface in the app. It gets a quietly-themed background (warm cream in light, cool charcoal in dark) plus a subtle dotted overlay that gives the canvas texture without competing with bubble content. Both layers are CSS vars so the same rule themes correctly across modes. */ .chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); } .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-tertiary); padding: 40px; } .empty-icon { width: 96px; height: 96px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .empty-icon [data-lucide] { width: 48px; height: 48px; color: var(--accent); opacity: 0.7; } .empty-state h3 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--text); } .empty-state p { margin: 0; font-size: 13px; max-width: 280px; text-align: center; color: var(--text-tertiary); } .conv-view { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); } .chat-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .chat-id { flex: 1; min-width: 0; } .chat-id h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-id .muted { font-size: 12px; margin: 0; color: var(--text-tertiary); } .chat-actions { display: flex; align-items: center; gap: 2px; } /* Messages — clean themed canvas. The dotted pattern was dropped by an earlier explicit request; now the canvas is a solid surface that flips with the theme so bubbles read cleanly against either bg. */ .messages-area { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); } .messages-empty { margin: auto; color: var(--text-muted); font-size: 13px; } .messages-top-indicator { text-align: center; font-size: 11px; color: var(--text-tertiary); padding: 8px 0; font-style: italic; background: var(--surface-sunken); } /* Date separator chip — small pill centered between days so the agent sees at a glance that "Today 14:30" follows "Yesterday 22:43" rather than two random timestamps in odd order. */ .date-separator { align-self: center; padding: 4px 12px; margin: 8px 0; border-radius: var(--radius-lg); background: var(--surface-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; } .message-row { display: flex; } .message-row.fromMe { justify-content: flex-end; } .message-row.fromMe + .message-row.fromMe, .message-row:not(.fromMe) + .message-row:not(.fromMe) { margin-top: -2px; } .bubble { --bubble-bg: var(--surface); --bubble-text: var(--text); --bubble-meta: var(--text-muted); max-width: 65%; padding: 8px 12px; border-radius: var(--radius-bubble); font-size: 14px; color: var(--bubble-text); position: relative; background: var(--bubble-bg); box-shadow: 0 1px 1px oklch(0 0 0 / 0.06); border: 1px solid var(--border-subtle); word-wrap: break-word; overflow-wrap: anywhere; } [data-theme="dark"] .bubble { box-shadow: 0 1px 2px oklch(0 0 0 / 0.30); } /* Outbound bubble keeps the WhatsApp emerald identity in light mode; in dark mode it pivots to a deep readable emerald that still says "this is your message" without glowing white against the canvas. */ .bubble.fromMe { --bubble-bg: #d9fdd3; --bubble-text: oklch(0.20 0.04 150); --bubble-meta: oklch(0.40 0.05 150); border-color: transparent; } [data-theme="dark"] .bubble.fromMe { --bubble-bg: oklch(0.32 0.08 150); --bubble-text: oklch(0.95 0.02 150); --bubble-meta: oklch(0.75 0.04 150); } .bubble .text { white-space: pre-wrap; } .bubble .meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; font-size: 11px; color: var(--bubble-meta); } .bubble .meta [data-lucide] { width: 14px; height: 14px; } /* Outbound "by " label — same hue as the rest of the meta but weight 600 + a separating dot so the agent's name sits comfortably beside the timestamp without screaming. Uses currentColor with slightly darker hue via the bubble's CSS var chain. */ .bubble .meta .meta-sender { font-weight: 600; color: inherit; opacity: 0.85; } .bubble .meta .meta-sender::after { content: " · "; font-weight: 400; opacity: 0.7; } .bubble .sender-name { font-size: 12px; font-weight: 600; color: var(--av-1); margin-bottom: 2px; } .bubble .sender-name.clickable { cursor: pointer; } .bubble .sender-name.clickable:hover { text-decoration: underline; } /* Wider audio player so the scrubber is actually usable — agents need to see where they are in the recording, scrub backward, or pause/resume on a known position. The default 240px crammed every control into a tooltip-sized strip. */ .bubble audio { width: 380px; max-width: 100%; height: 40px; } .teamchat-msg audio { width: 380px; max-width: 100%; height: 40px; } /* Chrome's