/* ================================================================ ZENBAIA SUPERAGENTS — THEME SYSTEM v3.0 superagents-themes.css S'applique PAR-DESSUS superagents-base.css. Aucune variable de base.css n'est supprimée — elles sont surchargées selon le data-theme sur ou . USAGE : → bleu marine → terminal vert néon → lin + terracotta → cartoon or/violet (défaut = Zenbaia natif) → identité Zenbaia originale (turquoise) HOME VARIANTS (indépendantes du thème) : → Épurée (greeting + search + 2 blocs) → Galerie agents (cartes portrait) → Dashboard (KPIs + agents récents + planifié) MARQUE BLANCHE CLIENT : Créer un fichier theme-[client].css qui surcharge les 12 variables listées dans le template en bas de fichier. ================================================================ */ /* ================================================================ 1. THÈME ZENBAIA NATIF (défaut, sans attribut data-theme) Reprend exactement les variables de superagents-base.css Aucun override nécessaire — on le documente pour clarté. ================================================================ */ /* Déjà géré par superagents-base.css : pas d'override ici */ /* ================================================================ 2. THÈME CORPORATE Bleu marine · Inter · Outline icons · Coins 8px ================================================================ */ [data-theme="corporate"] { /* Couleurs */ --zen-primary: #1E4FD8; --zen-primary-dark: #1840C0; --zen-primary-light: #C5D3F8; --zen-gradient-start: #1E4FD8; --zen-gradient-end: #5278E8; --zen-bg: #F8F9FC; --zen-bg-deep: #EFF2F9; --zen-surface: #FFFFFF; --zen-surface-hover: #F4F6FF; --zen-text: #0F1B35; --zen-text-secondary: #6B7A99; --zen-text-muted: #A0AABE; --zen-border: #DDE3F0; --zen-shadow: rgba(30, 79, 216, 0.10); --zen-shadow-strong: rgba(30, 79, 216, 0.22); --zen-warning: #F0A500; --zen-danger: #EF4444; --zen-info: #5278E8; /* Rayons plus nets */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; /* Typographie */ --t-font-display: 'Inter', system-ui, sans-serif; --t-font-body: 'Inter', system-ui, sans-serif; --t-fw-title: 700; --t-ls-title: -0.03em; --t-ls-label: 0.02em; /* Sidebar sombre */ --t-sidebar-bg: #0F1B35; --t-sidebar-text: rgba(255,255,255,0.60); --t-sidebar-active-bg: rgba(255,255,255,0.12); --t-sidebar-active-text: #FFFFFF; --t-sidebar-border: rgba(255,255,255,0.07); --t-sidebar-indicator: 3px solid #1E4FD8; /* Icônes */ --t-icon-stroke: 1.5; --t-icon-bubble: none; /* pas de bulle */ /* Ombres */ --t-shadow-card: none; --t-shadow-avatar: none; --t-shadow-feat: 0 0 0 2px #1E4FD8; } /* Sidebar corporate sombre */ [data-theme="corporate"] .sidebar { background: linear-gradient(180deg, #0F1B35 0%, #0D1828 100%); border-right-color: rgba(255,255,255,0.07); } [data-theme="corporate"] .sidebar-section-title, [data-theme="corporate"] .nav-item { color: rgba(255,255,255,0.60); } [data-theme="corporate"] .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; } [data-theme="corporate"] .nav-item.active { background: linear-gradient(90deg, rgba(30,79,216,0.25), rgba(30,79,216,0.05)); border-left-color: #1E4FD8; color: #FFFFFF; } [data-theme="corporate"] .nav-item-role { color: rgba(255,255,255,0.45); } [data-theme="corporate"] .sidebar-footer { border-top-color: rgba(255,255,255,0.07); } [data-theme="corporate"] .user-info-small .name { color: rgba(255,255,255,0.85); } [data-theme="corporate"] .user-info-small .status { color: #1E4FD8; } [data-theme="corporate"] .user-info-small .status::before { background: #5278E8; } [data-theme="corporate"] .btn-new-agent { border-color: rgba(82,120,232,0.5); color: #90AFFF; background: rgba(30,79,216,0.10); } [data-theme="corporate"] .btn-new-agent:hover { background: rgba(30,79,216,0.20); border-color: #1E4FD8; color: #fff; } [data-theme="corporate"] .nav-separator { background: rgba(255,255,255,0.07); } [data-theme="corporate"] .sidebar-logo h1 { background: linear-gradient(135deg, #5278E8, #90AFFF); -webkit-background-clip: text; } /* Body / main corporate */ [data-theme="corporate"] body { background: linear-gradient(135deg, #F8F9FC 0%, #EFF2F9 100%); font-family: 'Inter', system-ui, sans-serif; } [data-theme="corporate"] .team-card { border-radius: var(--radius-md); } [data-theme="corporate"] .team-card.manager-card { border-color: #1E4FD8; } [data-theme="corporate"] .nav-badge-manager { background: #1E4FD8; } [data-theme="corporate"] .sidebar-section-title .team-count { background: #1E4FD8; } [data-theme="corporate"] .btn-new-agent { border-color: rgba(30,79,216,0.4); } /* ================================================================ 3. THÈME DARK STARTUP Fond #0E0E14 · JetBrains Mono · Pixel art · Coins 4px ================================================================ */ [data-theme="dark"] { --zen-primary: #4ADE80; --zen-primary-dark: #22C55E; --zen-primary-light: rgba(74,222,128,0.20); --zen-gradient-start: #4ADE80; --zen-gradient-end: #6366F1; --zen-bg: #0E0E14; --zen-bg-deep: #12101E; --zen-surface: rgba(255,255,255,0.04); --zen-surface-hover: rgba(255,255,255,0.07); --zen-text: #FFFFFF; --zen-text-secondary: rgba(255,255,255,0.55); --zen-text-muted: rgba(255,255,255,0.30); --zen-border: rgba(255,255,255,0.08); --zen-shadow: rgba(74,222,128,0.10); --zen-shadow-strong: rgba(74,222,128,0.25); --zen-warning: #F0A500; --zen-danger: #F06565; --zen-info: #6366F1; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --t-font-display: 'JetBrains Mono', monospace; --t-font-body: 'JetBrains Mono', monospace; --t-fw-title: 700; --t-ls-title: -0.01em; --t-ls-label: 0.08em; --t-sidebar-bg: #0E0E14; --t-sidebar-text: rgba(255,255,255,0.45); --t-sidebar-active-bg: rgba(74,222,128,0.10); --t-sidebar-active-text: #4ADE80; --t-sidebar-border: rgba(255,255,255,0.06); --t-sidebar-indicator: 2px solid #4ADE80; --t-icon-stroke: 0; --t-icon-bubble: none; --t-shadow-card: none; --t-shadow-avatar:none; --t-shadow-feat: 0 0 0 1px rgba(74,222,128,0.60); } [data-theme="dark"] body { background: #0E0E14; font-family: 'JetBrains Mono', monospace; } [data-theme="dark"] .sidebar { background: #0E0E14; border-right: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .sidebar-logo h1 { background: linear-gradient(135deg, #4ADE80, #6366F1); -webkit-background-clip: text; } [data-theme="dark"] .nav-item { color: rgba(255,255,255,0.45); } [data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; } [data-theme="dark"] .nav-item.active { background: rgba(74,222,128,0.08); border-left-color: #4ADE80; color: #4ADE80; } [data-theme="dark"] .nav-item-role { color: rgba(255,255,255,0.30); } [data-theme="dark"] .sidebar-section-title { color: rgba(255,255,255,0.25); } [data-theme="dark"] .sidebar-section-title .team-count { background: #4ADE80; color: #0E0E14; } [data-theme="dark"] .nav-separator { background: rgba(255,255,255,0.06); } [data-theme="dark"] .sidebar-footer { border-top-color: rgba(255,255,255,0.06); } [data-theme="dark"] .user-info-small .name { color: rgba(255,255,255,0.80); } [data-theme="dark"] .user-info-small .status { color: #4ADE80; } [data-theme="dark"] .user-info-small .status::before { background: #4ADE80; } [data-theme="dark"] .btn-new-agent { border-color: rgba(74,222,128,0.30); color: #4ADE80; background: rgba(74,222,128,0.06); } [data-theme="dark"] .btn-new-agent:hover { background: rgba(74,222,128,0.14); border-color: #4ADE80; } [data-theme="dark"] .team-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); border-radius: var(--radius-md); } [data-theme="dark"] .team-card:hover { border-color: rgba(74,222,128,0.50); box-shadow: 0 4px 20px rgba(74,222,128,0.10); } [data-theme="dark"] .team-card.manager-card { border-color: rgba(74,222,128,0.50); } [data-theme="dark"] .team-card h4 { color: #fff; } [data-theme="dark"] .welcome-screen h2 { color: #fff; } [data-theme="dark"] .welcome-screen p { color: rgba(255,255,255,0.50); } [data-theme="dark"] .nav-badge-manager { background: #4ADE80; color: #0E0E14; } /* Dark: pixel SVG icons */ [data-theme="dark"] .nav-item svg { fill: currentColor; } /* ================================================================ 4. THÈME WARM ENTERPRISE Fond crème · Lora + Source Sans 3 · Stroke 2px · Terracotta ================================================================ */ [data-theme="warm"] { --zen-primary: #C94A2A; --zen-primary-dark: #B03E22; --zen-primary-light: #FDF4F1; --zen-gradient-start: #C94A2A; --zen-gradient-end: #E07050; --zen-bg: #FDFAF7; --zen-bg-deep: #F3EDE4; --zen-surface: #FFFFFF; --zen-surface-hover: #FDF8F4; --zen-text: #2C1810; --zen-text-secondary: #A08070; --zen-text-muted: #C0A898; --zen-border: #E8DDD1; --zen-shadow: rgba(201, 74, 42, 0.08); --zen-shadow-strong: rgba(201, 74, 42, 0.20); --zen-warning: #E5A000; --zen-danger: #DC5050; --zen-info: #5A8FAA; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --t-font-display: 'Lora', Georgia, serif; --t-font-body: 'Source Sans 3', system-ui, sans-serif; --t-fw-title: 600; --t-ls-title: 0em; --t-ls-label: 0.04em; --t-sidebar-bg: #F3EDE4; --t-sidebar-text: #7A6055; --t-sidebar-active-bg: #EAE0D5; --t-sidebar-active-text: #2C1810; --t-sidebar-border: #E8DDD1; --t-sidebar-indicator: 3px solid #C94A2A; --t-icon-stroke: 2; --t-shadow-card: none; --t-shadow-avatar: none; --t-shadow-feat: 0 0 0 2px #C94A2A; } [data-theme="warm"] body { background: linear-gradient(135deg, #FDFAF7 0%, #F3EDE4 100%); font-family: 'Source Sans 3', system-ui, sans-serif; } [data-theme="warm"] .sidebar { background: linear-gradient(180deg, #F3EDE4 0%, #EDE5DA 100%); border-right-color: #E8DDD1; } [data-theme="warm"] .sidebar-logo h1 { background: linear-gradient(135deg, #C94A2A, #E07050); -webkit-background-clip: text; } [data-theme="warm"] .nav-item { color: #7A6055; } [data-theme="warm"] .nav-item:hover { background: #EAE0D5; color: #2C1810; } [data-theme="warm"] .nav-item.active { background: linear-gradient(90deg, rgba(201,74,42,0.12), transparent); border-left-color: #C94A2A; color: #C94A2A; } [data-theme="warm"] .nav-item.manager { border-left-color: #C94A2A; background: linear-gradient(90deg, rgba(201,74,42,0.08), transparent); } [data-theme="warm"] .sidebar-section-title { color: #C0A898; } [data-theme="warm"] .sidebar-section-title .team-count { background: #C94A2A; } [data-theme="warm"] .sidebar-footer { border-top-color: #E8DDD1; } [data-theme="warm"] .user-info-small .status { color: #C94A2A; } [data-theme="warm"] .user-info-small .status::before { background: #C94A2A; } [data-theme="warm"] .btn-new-agent { border-color: rgba(201,74,42,0.35); color: #C94A2A; background: rgba(201,74,42,0.05); } [data-theme="warm"] .btn-new-agent:hover { background: rgba(201,74,42,0.12); } [data-theme="warm"] .nav-separator { background: #E8DDD1; } [data-theme="warm"] .team-card { border-color: #E8DDD1; } [data-theme="warm"] .team-card:hover { border-color: #C94A2A; } [data-theme="warm"] .team-card.manager-card { border-color: #C94A2A; } [data-theme="warm"] .nav-badge-manager { background: #C94A2A; } [data-theme="warm"] .welcome-screen h2 { font-family: 'Lora', Georgia, serif; } /* ================================================================ 5. THÈME LIMOVA / CARTOON Blanc · Baloo 2 + Nunito · Bulles colorées · Coins 20px ================================================================ */ [data-theme="limova"] { --zen-primary: #F0A500; --zen-primary-dark: #D99200; --zen-primary-light: #FFF8E6; --zen-gradient-start: #F0A500; --zen-gradient-end: #6366F1; --zen-bg: #F7F8FA; --zen-bg-deep: #EFEFEF; --zen-surface: #FFFFFF; --zen-surface-hover: #FAFAFA; --zen-text: #1A1A1A; --zen-text-secondary: #777777; --zen-text-muted: #AAAAAA; --zen-border: #E8E8E8; --zen-shadow: rgba(240, 165, 0, 0.12); --zen-shadow-strong: rgba(99, 102, 241, 0.20); --zen-warning: #F0A500; --zen-danger: #EF4444; --zen-info: #6366F1; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --t-font-display: 'Baloo 2', cursive; --t-font-body: 'Nunito', system-ui, sans-serif; --t-fw-title: 800; --t-ls-title: -0.02em; --t-ls-label: 0em; --t-sidebar-bg: #FFFFFF; --t-sidebar-text: #888888; --t-sidebar-active-bg: #F0F0FF; --t-sidebar-active-text: #6366F1; --t-sidebar-border: #F0F0F0; --t-sidebar-indicator: none; /* Bulles d'icônes nav */ --t-ib-1: #FFE9A0; --t-ib-2: #D8F8E8; --t-ib-3: #E0E0FF; --t-ib-4: #FFE0D0; --t-ib-5: #D0F0FF; --t-ib-6: #F0E0FF; --t-icon-stroke: 1.8; --t-shadow-card: 0 2px 12px rgba(0,0,0,0.07); --t-shadow-avatar:0 2px 8px rgba(240,165,0,0.22); --t-shadow-feat: 0 4px 20px rgba(99,102,241,0.18); } [data-theme="limova"] body { background: #F7F8FA; font-family: 'Nunito', system-ui, sans-serif; } [data-theme="limova"] .sidebar { background: #FFFFFF; border-right-color: #F0F0F0; box-shadow: 1px 0 12px rgba(0,0,0,0.04); } [data-theme="limova"] .sidebar-logo h1 { background: linear-gradient(135deg, #F0A500, #6366F1); -webkit-background-clip: text; } [data-theme="limova"] .nav-item { color: #888; border-radius: 12px; margin: 2px 6px; border-left: none !important; } [data-theme="limova"] .nav-item:hover { background: #F5F5F5; color: #1A1A1A; } [data-theme="limova"] .nav-item.active { background: #F0F0FF; border-left: none !important; color: #6366F1; } [data-theme="limova"] .nav-item-role { color: #AAA; } [data-theme="limova"] .sidebar-section-title { color: #CCC; } [data-theme="limova"] .sidebar-section-title .team-count { background: #F0A500; } [data-theme="limova"] .sidebar-footer { border-top-color: #F0F0F0; } [data-theme="limova"] .user-info-small .status { color: #F0A500; } [data-theme="limova"] .user-info-small .status::before { background: #F0A500; } [data-theme="limova"] .btn-new-agent { border-radius: var(--radius-md); border-color: rgba(240,165,0,0.40); color: #F0A500; background: #FFF8E6; } [data-theme="limova"] .btn-new-agent:hover { background: #FFE9A0; } [data-theme="limova"] .nav-separator { background: #F0F0F0; } [data-theme="limova"] .nav-badge-manager { background: #F0A500; } /* Cards Limova : coins très ronds + ombres */ [data-theme="limova"] .team-card { border-radius: var(--radius-lg); box-shadow: 0 2px 12px rgba(0,0,0,0.07); border-color: #E8E8E8; } [data-theme="limova"] .team-card:hover { border-color: #6366F1; box-shadow: 0 4px 20px rgba(99,102,241,0.15); } [data-theme="limova"] .team-card.manager-card { border-color: #F0A500; box-shadow: 0 4px 16px rgba(240,165,0,0.15); } [data-theme="limova"] .team-card-avatar { border-radius: 50%; border-color: #F0F0F0; } [data-theme="limova"] .welcome-screen h2 { font-family: 'Baloo 2', cursive; font-weight: 800; } [data-theme="limova"] .nav-item.manager { border-left: none !important; } /* Nav icons : bulles colorées */ [data-theme="limova"] .nav-item svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--t-ib-1); } /* On assigne les couleurs par position (nth-child sur .nav-item dans sidebar) */ [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(1) svg { background: var(--t-ib-1); } [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(2) svg { background: var(--t-ib-2); } [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(3) svg { background: var(--t-ib-3); } [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(4) svg { background: var(--t-ib-4); } [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(5) svg { background: var(--t-ib-5); } [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(6) svg { background: var(--t-ib-6); } [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(7) svg { background: var(--t-ib-1); } [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(8) svg { background: var(--t-ib-2); } [data-theme="limova"] .sidebar-nav > .nav-item:nth-child(9) svg { background: var(--t-ib-3); } /* ================================================================ 6. HOME VARIANTS (indépendantes du thème) Masquage/affichage des sous-vues de #view-home ================================================================ */ /* Par défaut : afficher la home normale */ #welcome-new-user { display: none; } #home-normal { display: flex; flex: 1; } /* Home A — Épurée */ [data-home="a"] #view-home .welcome-screen, [data-home="a"] #home-normal { display: none !important; } [data-home="a"] #home-view-a { display: flex !important; } /* Home B — Galerie */ [data-home="b"] #view-home .welcome-screen, [data-home="b"] #home-normal { display: none !important; } [data-home="b"] #home-view-b { display: flex !important; } /* Home C — Dashboard */ [data-home="c"] #view-home .welcome-screen, [data-home="c"] #home-normal { display: none !important; } [data-home="c"] #home-view-c { display: flex !important; } /* Les 3 home-views sont cachées par défaut */ #home-view-a, #home-view-b, #home-view-c { display: none; flex: 1; flex-direction: column; overflow-y: auto; padding: 24px 28px; align-items: center; } /* ── Home A : Épurée ── */ .home-a-greeting { font-family: var(--t-font-display, var(--zen-primary)); font-size: 28px; font-weight: var(--t-fw-title, 800); letter-spacing: var(--t-ls-title, -0.02em); color: var(--zen-text); text-align: center; margin-bottom: 20px; padding-top: 10px; } .home-a-greeting em { font-style: normal; color: var(--zen-primary); } .home-a-search { display: flex; align-items: center; gap: 10px; background: var(--zen-surface); border: 1.5px solid var(--zen-border); border-radius: var(--radius-lg); padding: 12px 16px; max-width: 540px; width: 100%; margin: 0 auto 14px; } .home-a-search-input { flex: 1; border: none; background: transparent; font-size: 14px; color: var(--zen-text); font-family: inherit; outline: none; } .home-a-search-input::placeholder { color: var(--zen-text-muted); } .home-a-search-send { width: 36px; height: 36px; background: var(--zen-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 16px; flex-shrink: 0; } .home-a-shortcuts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; max-width: 600px; width: 100%; } .home-a-shortcut { font-size: 12px; font-weight: 600; color: var(--zen-text-secondary); background: var(--zen-surface); border: 1px solid var(--zen-border); border-radius: 20px; padding: 6px 13px; cursor: pointer; transition: all 0.12s; } .home-a-shortcut:hover { border-color: var(--zen-primary); color: var(--zen-primary); } .home-a-two { display: grid; grid-template-columns: 1fr 0.72fr; gap: 14px; max-width: 780px; width: 100%; margin-bottom: 14px; } .home-a-assistants { background: var(--zen-bg-deep); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; position: relative; min-height: 270px; display: flex; flex-direction: column; transition: transform 0.15s; } .home-a-assistants:hover { transform: translateY(-2px); } .home-a-ass-label { position: absolute; top: 16px; left: 16px; font-family: var(--t-font-display, inherit); font-size: 15px; font-weight: var(--t-fw-title, 700); color: var(--zen-text); } .home-a-avatars { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 36px 16px 0; position: relative; min-height: 210px; } .home-a-av-main { font-size: 90px; line-height: 1; position: relative; z-index: 3; } .home-a-av-l { font-size: 52px; position: absolute; left: 16px; bottom: 12px; z-index:2; opacity:.8; } .home-a-av-r { font-size: 52px; position: absolute; right: 16px; bottom: 6px; z-index:2; opacity:.8; } .home-a-av-b { font-size: 40px; position: absolute; left:50%; top:12px; transform:translateX(-50%); opacity:.5; } .home-a-cta { background: rgba(255,255,255,0.92); border-top: 0.5px solid rgba(0,0,0,0.06); padding: 13px 16px; text-align: center; font-family: var(--t-font-display, inherit); font-size: 13px; font-weight: 700; color: var(--zen-text); } .home-a-disc { background: var(--zen-bg-deep); border-radius: var(--radius-lg); padding: 16px; overflow-y: auto; } .home-a-disc-title { font-size: 10px; font-weight: 700; color: var(--zen-text-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } .home-a-disc-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 0.5px solid rgba(0,0,0,.07); cursor: pointer; font-size: 13px; color: var(--zen-text); transition: opacity 0.12s; } .home-a-disc-item:hover { opacity: .7; } .home-a-disc-item:last-child { border-bottom: none; } .home-a-share { display: flex; align-items: center; gap: 10px; background: var(--zen-primary-light); border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-md); padding: 12px 16px; max-width: 780px; width: 100%; margin-bottom: 12px; } .home-a-share-text { flex: 1; font-size: 13px; color: var(--zen-text-secondary); } .home-a-share-text strong { color: var(--zen-text); } .home-a-share-btn { font-size: 12px; font-weight: 700; color: var(--zen-primary-dark); padding: 7px 14px; border: 1.5px solid var(--zen-primary); border-radius: var(--radius-sm); cursor: pointer; background: var(--zen-surface); white-space: nowrap; transition: all 0.12s; } .home-a-share-btn:hover { background: var(--zen-primary); color: #fff; } .home-a-chat { display: flex; align-items: center; gap: 10px; background: var(--zen-surface); border: 1px solid var(--zen-border); border-radius: var(--radius-md); padding: 12px 16px; max-width: 780px; width: 100%; } .home-a-chat-placeholder { flex: 1; font-size: 13px; color: var(--zen-text-muted); } .home-a-chat-send { width: 36px; height: 36px; border-radius: 50%; background: var(--zen-text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--zen-bg); } /* ── Home B : Galerie ── */ #home-view-b { align-items: flex-start; } .home-b-tabs { display: flex; border-bottom: 1px solid var(--zen-border); margin-bottom: 20px; width: 100%; } .home-b-tab { font-size: 13px; font-weight: 600; color: var(--zen-text-muted); padding: 8px 20px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all 0.12s; } .home-b-tab.active { color: var(--zen-primary); border-bottom-color: var(--zen-primary); } .home-b-featured { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 10px; width: 100%; } .home-b-small { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; width: 100%; } .home-b-card { border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: transform 0.15s; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 165px; box-shadow: var(--t-shadow-card, none); } .home-b-card:hover { transform: translateY(-3px); } .home-b-card:hover .home-b-card-share { opacity: 1; } .home-b-card-av { position: absolute; right: 8px; bottom: 46px; font-size: 70px; line-height: 1; } .home-b-card--sm { min-height: 118px; } .home-b-card--sm .home-b-card-av { font-size: 50px; bottom: 38px; } .home-b-card-share { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; color: var(--zen-primary-dark); background: rgba(255,255,255,0.90); padding: 3px 8px; border-radius: 20px; opacity: 0; transition: opacity 0.15s; } .home-b-card-body { padding: 12px 14px; background: rgba(255,255,255,0.92); border-top: 0.5px solid rgba(0,0,0,0.06); } .home-b-card-name { font-family: var(--t-font-display, inherit); font-size: 14px; font-weight: var(--t-fw-title, 700); color: var(--zen-text); margin-bottom: 2px; } .home-b-card--sm .home-b-card-name { font-size: 12px; } .home-b-card-role { font-size: 11px; color: var(--zen-text-secondary); } /* ── Home C : Dashboard ── */ #home-view-c { align-items: flex-start; } .home-c-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 20px; width: 100%; } .home-c-kpi { background: var(--zen-surface); border: 1px solid var(--zen-border); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--t-shadow-card, none); } .home-c-kpi-value { font-family: var(--t-font-display, inherit); font-size: 24px; font-weight: var(--t-fw-title, 800); color: var(--zen-text); line-height: 1.2; } .home-c-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--zen-text-muted); margin-top: 3px; } .home-c-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-bottom: 16px; width: 100%; } .home-c-panel { background: var(--zen-surface); border: 1px solid var(--zen-border); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--t-shadow-card, none); } .home-c-panel-title { font-family: var(--t-font-display, inherit); font-size: 14px; font-weight: var(--t-fw-title, 700); color: var(--zen-text); margin-bottom: 12px; } .home-c-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 0.5px solid var(--zen-border); cursor: pointer; transition: opacity 0.12s; } .home-c-row:hover { opacity: .75; } .home-c-row:last-child { border-bottom: none; } .home-c-row-av { font-size: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--zen-bg-deep); display: flex; align-items: center; justify-content: center; box-shadow: var(--t-shadow-avatar, none); } .home-c-row-name { font-size: 13px; font-weight: 600; color: var(--zen-text); flex: 1; } .home-c-row-convs { font-size: 11px; color: var(--zen-text-muted); } .home-c-task { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 0.5px solid var(--zen-border); } .home-c-task:last-child { border-bottom: none; } .home-c-task-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .home-c-task-name { font-size: 13px; font-weight: 600; color: var(--zen-text); margin-bottom: 2px; } .home-c-task-time { font-size: 10px; color: var(--zen-text-muted); } .home-c-share { display: flex; align-items: center; gap: 10px; background: var(--zen-primary-light); border: 1px solid var(--zen-border); border-radius: var(--radius-md); padding: 12px 16px; width: 100%; } .home-c-share-text { flex: 1; font-size: 13px; color: var(--zen-text-secondary); } .home-c-share-text strong { color: var(--zen-text); } .home-c-share-btn { font-size: 12px; font-weight: 700; color: var(--zen-primary-dark); padding: 7px 14px; border: 1.5px solid var(--zen-primary); border-radius: var(--radius-sm); cursor: pointer; background: var(--zen-surface); white-space: nowrap; transition: all 0.12s; } .home-c-share-btn:hover { background: var(--zen-primary); color: #fff; } /* ================================================================ 7. PANNEAU DE CONTRÔLE DÉMO (à retirer en prod) ================================================================ */ .theme-switcher { position: fixed; bottom: 20px; right: 20px; z-index: 9999; background: var(--zen-surface); border: 1px solid var(--zen-border); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.14); display: flex; flex-direction: column; gap: 8px; font-family: system-ui, sans-serif; font-size: 12px; } .theme-switcher__label { font-size: 9px; font-weight: 700; color: var(--zen-text-muted); letter-spacing: .08em; text-transform: uppercase; } .theme-switcher__row { display: flex; gap: 5px; flex-wrap: wrap; } .theme-switcher__btn { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--zen-border); font-size: 11px; font-weight: 600; cursor: pointer; background: var(--zen-bg); color: var(--zen-text-secondary); transition: all .12s; } .theme-switcher__btn:hover { border-color: var(--zen-primary); color: var(--zen-primary); } .theme-switcher__btn.on { background: var(--zen-primary); color: #fff; border-color: var(--zen-primary); } .theme-switcher__sep { height: 0.5px; background: var(--zen-border); } /* ================================================================ 8. CUSTOM BRAND OVERRIDE TEMPLATE ───────────────────────────────────────────────────────────────── Copier dans theme-[client].css — importer après superagents-themes.css Minimum 5 variables pour 80% de la personnalisation. ================================================================ */ /* [data-theme="acme"] { --zen-primary: #E83A3A; --zen-primary-dark: #C52E2E; --zen-primary-light: #FEF0F0; --zen-gradient-start: #E83A3A; --zen-gradient-end: #FF6B6B; --zen-bg: #FAFAFA; --zen-text: #1A1A1A; --zen-surface: #FFFFFF; --zen-border: #E5E5E5; --t-sidebar-bg: #1C1C1C; --t-sidebar-text: rgba(255,255,255,0.55); --t-sidebar-active-bg: rgba(232,58,58,0.15); --t-sidebar-active-text: #FFFFFF; } [data-theme="acme"] .sidebar { background: #1C1C1C; border-right-color: rgba(255,255,255,0.07); } [data-theme="acme"] .nav-item { color: rgba(255,255,255,0.55); } [data-theme="acme"] .nav-item.active { background: rgba(232,58,58,0.15); border-left-color: #E83A3A; color: #fff; } */ /* ── Dark theme — modals opaques ─────────────────────────────── */ [data-theme="dark"] #profile-modal > div, [data-theme="dark"] #admin-team-modal > div, [data-theme="dark"] .scheduled-modal { background: #1a1a2e !important; } [data-theme="dark"] #profile-modal, [data-theme="dark"] #admin-team-modal, [data-theme="dark"] .scheduled-modal-overlay { background: rgba(0,0,0,0.85) !important; backdrop-filter: blur(2px) !important; } [data-theme="dark"] #profile-modal input, [data-theme="dark"] #profile-modal select, [data-theme="dark"] #profile-modal textarea { background: #12121e !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.12) !important; } /* ══════════════════════════════════════════════════════════════ DESIGN 4 — Blanc Épuré #FFFFFF page, #F7F7F7 surface, #111111 accent Navigation top tabs + sidebar catégories ══════════════════════════════════════════════════════════════ */ [data-theme="blanc"] { --zen-primary: #111111; --zen-primary-dark: #000000; --zen-gradient-end: #333333; --zen-bg: #FFFFFF; --zen-surface: #FFFFFF; --zen-surface-hover: #F7F7F7; --zen-border: #E8E8E8; --zen-text: #111111; --zen-text-secondary: #555555; --zen-text-muted: #999999; --zen-card: #FFFFFF; --zen-card-hover: #F7F7F7; --radius-lg: 12px; --radius-sm: 6px; } [data-theme="blanc"] body { background: #F7F7F7; color: #111111; } [data-theme="blanc"] .sidebar { background: #FFFFFF; border-right: 1px solid #E8E8E8; } [data-theme="blanc"] .sidebar-logo h1 { color: #111111; } [data-theme="blanc"] .sidebar-logo h1 span { color: #111111; } [data-theme="blanc"] .nav-item { color: #666666; } [data-theme="blanc"] .nav-item:hover { background: #F7F7F7; color: #111111; } [data-theme="blanc"] .nav-item.active { background: #F0F0F0; border-left-color: #111111; color: #111111; font-weight: 700; } [data-theme="blanc"] .nav-item-role { color: #999999; } [data-theme="blanc"] .sidebar-section-title { color: #BBBBBB; } [data-theme="blanc"] .nav-separator { background: #EEEEEE; } [data-theme="blanc"] .sidebar-footer { border-top-color: #EEEEEE; } [data-theme="blanc"] .user-info-small .name { color: #111111; } [data-theme="blanc"] .user-info-small .status { color: #111111; } [data-theme="blanc"] .user-info-small .status::before { background: #111111; } [data-theme="blanc"] .main-content { background: #F7F7F7; } [data-theme="blanc"] .team-card { background: #FFFFFF; border: 1px solid #E8E8E8; box-shadow: none; } [data-theme="blanc"] .team-card:hover { border-color: #CCCCCC; box-shadow: 0 2px 8px rgba(0,0,0,.06); } [data-theme="blanc"] .team-card h4 { color: #111111; } [data-theme="blanc"] .team-card p { color: #666666; } [data-theme="blanc"] .manager-card { border: 1.5px solid #111111 !important; } [data-theme="blanc"] .btn-new-agent { background: #111111; color: #FFFFFF; border: none; } [data-theme="blanc"] .btn-new-agent:hover { background: #333333; } [data-theme="blanc"] .chat-bubble.agent-bubble { background: #F7F7F7; border: 1px solid #E8E8E8; color: #111111; } [data-theme="blanc"] .chat-bubble.user-bubble { background: #111111; color: #FFFFFF; } /* Modals opaques */ [data-theme="blanc"] #profile-modal > div, [data-theme="blanc"] #admin-team-modal > div, [data-theme="blanc"] .scheduled-modal { background: #FFFFFF !important; } /* ══════════════════════════════════════════════════════════════ DESIGN 5 — Cartoon Limova #F5F5F0 fond grège clair, #F0A500 accent orange chaud Surfaces blanches, cartes "portrait" avec avatar coloré ══════════════════════════════════════════════════════════════ */ [data-theme="cartoon"] { --zen-primary: #F0A500; --zen-primary-dark: #D4920A; --zen-gradient-end: #F5C842; --zen-bg: #F5F5F0; --zen-surface: #FFFFFF; --zen-surface-hover: #FFF8E8; --zen-border: #E8E4D8; --zen-text: #2C2415; --zen-text-secondary: #5C4F35; --zen-text-muted: #9C8F75; --zen-card: #FFFFFF; --zen-card-hover: #FFF8E8; --radius-lg: 16px; --radius-sm: 10px; } [data-theme="cartoon"] body { background: #F5F5F0; color: #2C2415; } [data-theme="cartoon"] .sidebar { background: #FFFFFF; border-right: 1px solid #E8E4D8; } [data-theme="cartoon"] .sidebar-logo h1 { color: #2C2415; } [data-theme="cartoon"] .sidebar-logo h1 span { color: #F0A500; } [data-theme="cartoon"] .nav-item { color: #7C6F55; } [data-theme="cartoon"] .nav-item:hover { background: #FFF8E8; color: #2C2415; } [data-theme="cartoon"] .nav-item.active { background: #FFF3CC; border-left-color: #F0A500; color: #2C2415; font-weight: 700; } [data-theme="cartoon"] .nav-item-role { color: #B0A080; } [data-theme="cartoon"] .sidebar-section-title { color: #C0B090; letter-spacing: .08em; } [data-theme="cartoon"] .nav-separator { background: #EDE8D8; } [data-theme="cartoon"] .sidebar-footer { border-top-color: #EDE8D8; } [data-theme="cartoon"] .user-info-small .name { color: #2C2415; } [data-theme="cartoon"] .user-info-small .status { color: #F0A500; } [data-theme="cartoon"] .user-info-small .status::before { background: #F0A500; } [data-theme="cartoon"] .main-content { background: #F5F5F0; } [data-theme="cartoon"] .team-card { background: #FFFFFF; border: 1.5px solid #E8E4D8; border-radius: 16px; box-shadow: 0 2px 8px rgba(240,165,0,.08); } [data-theme="cartoon"] .team-card:hover { border-color: #F0A500; box-shadow: 0 4px 20px rgba(240,165,0,.15); transform: translateY(-2px); } [data-theme="cartoon"] .team-card h4 { color: #2C2415; } [data-theme="cartoon"] .team-card p { color: #7C6F55; } [data-theme="cartoon"] .manager-card { background: linear-gradient(135deg, #FFF8E8, #FFFFFF); border: 2px solid #F0A500 !important; } [data-theme="cartoon"] .btn-new-agent { background: #F0A500; color: #FFFFFF; border: none; border-radius: 12px; font-weight: 700; } [data-theme="cartoon"] .btn-new-agent:hover { background: #D4920A; } [data-theme="cartoon"] .chat-bubble.agent-bubble { background: #FFFFFF; border: 1.5px solid #E8E4D8; color: #2C2415; } [data-theme="cartoon"] .chat-bubble.user-bubble { background: #F0A500; color: #FFFFFF; } [data-theme="cartoon"] .scheduled-badge.active { background: #FFF3CC; color: #A06800; border-color: #F0C050; } [data-theme="cartoon"] .btn-modal-save { background: #F0A500; } /* Modals opaques */ [data-theme="cartoon"] #profile-modal > div, [data-theme="cartoon"] #admin-team-modal > div, [data-theme="cartoon"] .scheduled-modal { background: #FFFFFF !important; } /* ══════════════════════════════════════════════════════════════ TOPBAR — Navigation horizontale pour thèmes Épuré & Limova Masque la sidebar et affiche une barre de navigation en haut ══════════════════════════════════════════════════════════════ */ [data-theme="blanc"] .app-shell, [data-theme="cartoon"] .app-shell { flex-direction: column; } /* Sidebar simplifiée — masquer la section Navigation principale */ [data-theme="blanc"] .sidebar-section-title:first-of-type, [data-theme="cartoon"] .sidebar-section-title:first-of-type { display: none; } /* Masquer les nav-items de navigation principale (pas équipe IA) */ [data-theme="blanc"] .nav-item[data-view="home"], [data-theme="blanc"] .nav-item[data-view="conversations"], [data-theme="blanc"] .nav-item[data-view="gallery"], [data-theme="blanc"] .nav-item[data-view="podcasts"], [data-theme="blanc"] .nav-item[data-view="recordings"], [data-theme="blanc"] .nav-item[data-view="analytics"], [data-theme="blanc"] .nav-item[data-view="gallery"], [data-theme="blanc"] .nav-item[data-view="podcasts"], [data-theme="blanc"] .nav-item[data-view="recordings"], [data-theme="blanc"] .nav-item[data-view="scheduled"], [data-theme="blanc"] .nav-item[data-view="documents"], [data-theme="blanc"] .nav-item-external, [data-theme="cartoon"] .nav-item[data-view="home"], [data-theme="cartoon"] .nav-item[data-view="conversations"], [data-theme="cartoon"] .nav-item[data-view="gallery"], [data-theme="cartoon"] .nav-item[data-view="podcasts"], [data-theme="cartoon"] .nav-item[data-view="recordings"], [data-theme="cartoon"] .nav-item[data-view="analytics"], [data-theme="cartoon"] .nav-item[data-view="scheduled"], [data-theme="cartoon"] .nav-item[data-view="documents"], [data-theme="cartoon"] .nav-item-external { display: none !important; } /* Masquer aussi les titres de section Navigation et Outils */ [data-theme="blanc"] .sidebar-section-title, [data-theme="cartoon"] .sidebar-section-title { display: none; } [data-theme="blanc"] .team-title, [data-theme="cartoon"] .team-title { display: block !important; font-size: 10px; padding: 16px 12px 4px; } /* Logo discret dans la sidebar */ [data-theme="blanc"] .sidebar-header, [data-theme="cartoon"] .sidebar-header { display: none; } /* Sidebar plus étroite */ [data-theme="blanc"] .sidebar, [data-theme="cartoon"] .sidebar { width: 260px !important; min-width: 260px !important; height: calc(100vh - 56px) !important; position: fixed !important; top: 56px !important; left: 0 !important; bottom: 0 !important; overflow-y: hidden !important; display: flex !important; flex-direction: column !important; } [data-theme="blanc"] .sidebar-nav, [data-theme="cartoon"] .sidebar-nav { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; } [data-theme="blanc"] .sidebar-footer, [data-theme="cartoon"] .sidebar-footer { flex-shrink: 0 !important; position: relative !important; bottom: auto !important; } /* Topbar */ /* Main content — sidebar réduite à 200px */ [data-theme="blanc"] .main-content, [data-theme="cartoon"] .main-content { margin-left: 260px !important; width: calc(100% - 260px) !important; } /* La topbar est injectée via JS — voir zbApplyTopbar() */ #zb-topbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 500; display: flex; align-items: center; padding: 0 20px; gap: 8px; box-shadow: 0 1px 0 var(--zen-border); } [data-theme="blanc"] #zb-topbar { background: #FFFFFF; border-bottom: 1px solid #E8E8E8; } [data-theme="cartoon"] #zb-topbar { background: #FFFFFF; border-bottom: 1.5px solid #E8E4D8; } #zb-topbar .zb-top-logo { font-size: 16px; font-weight: 800; color: var(--zen-text); margin-right: 0; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid var(--zen-border); padding-right: 16px; } [data-theme="cartoon"] #zb-topbar .zb-top-logo span { color: #F0A500; } #zb-topbar .zb-top-nav { display: flex; align-items: center; gap: 2px; flex: 1; /* La nav commence là où finit le logo (220px) — alignée avec le main content */ } #zb-topbar .zb-top-item { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--zen-text-muted); cursor: pointer; border: none; background: none; transition: all .15s; white-space: nowrap; } #zb-topbar .zb-top-item:hover { background: var(--zen-surface-hover); color: var(--zen-text); } #zb-topbar .zb-top-item.active { background: var(--zen-surface-hover); color: var(--zen-primary); font-weight: 700; } [data-theme="blanc"] #zb-topbar .zb-top-item.active { color: #111111; border-bottom: 2px solid #111111; border-radius: 0; background: none; } [data-theme="cartoon"] #zb-topbar .zb-top-item.active { color: #F0A500; background: #FFF3CC; border-radius: 8px; } #zb-topbar .zb-top-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } #zb-topbar .zb-top-tokens { font-size: 12px; font-weight: 600; color: var(--zen-text-muted); background: var(--zen-bg); padding: 5px 10px; border-radius: 20px; border: 1px solid var(--zen-border); white-space: nowrap; } #zb-topbar .zb-top-btn { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--zen-primary); background: transparent; color: var(--zen-primary); transition: all .15s; } #zb-topbar .zb-top-btn:hover { background: var(--zen-primary); color: #fff; } #zb-topbar .zb-top-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--zen-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; } /* Main content avec topbar */ [data-theme="blanc"] .main-content, [data-theme="cartoon"] .main-content { padding-top: 56px !important; } /* Blanc & Cartoon — bouton nouveau agent reste dans la sidebar */ [data-theme="blanc"] .btn-new-agent, [data-theme="cartoon"] .btn-new-agent { display: flex !important; } /* Section titres de la sidebar adaptée */ [data-theme="blanc"] .team-title, [data-theme="cartoon"] .team-title { font-size: 10px; padding: 12px 12px 4px; } /* Blanc & Cartoon — footer sidebar visible (profil reste en bas à gauche) */ /* rien à masquer */ /* ── Bouton Nouveau SuperAgent fixe en bas de sidebar ── */ /* Pour tous les thèmes standards (pas blanc/cartoon qui ont topbar) */ :root:not([data-theme="blanc"]):not([data-theme="cartoon"]) .btn-new-agent { position: sticky; bottom: 0; margin-top: auto; z-index: 10; flex-shrink: 0; } /* S'assurer que la sidebar est en flex-column pour que sticky marche */ :root:not([data-theme="blanc"]):not([data-theme="cartoon"]) .sidebar { display: flex; flex-direction: column; } :root:not([data-theme="blanc"]):not([data-theme="cartoon"]) .sidebar-nav { flex: 1; overflow-y: auto; } /* Blanc & Cartoon — sidebar ajustements */ /* Badge MANAGER ne déborde pas */ [data-theme="blanc"] .team-card .agent-role-badge, [data-theme="cartoon"] .team-card .agent-role-badge, [data-theme="blanc"] #agents-nav-list .nav-item .agent-badge, [data-theme="cartoon"] #agents-nav-list .nav-item .agent-badge { display: none !important; } /* Texte agent pas tronqué par le badge */ [data-theme="blanc"] #agents-nav-list .nav-item-name, [data-theme="cartoon"] #agents-nav-list .nav-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; } /* Logo plus grand dans la topbar */ [data-theme="blanc"] #zb-topbar .zb-top-logo img, [data-theme="cartoon"] #zb-topbar .zb-top-logo img { height: 36px !important; max-width: 180px !important; } /* Dark — header des vues (background hardcodé blanc) */ [data-theme="dark"] .conversations-header, [data-theme="dark"] .view > div:first-child { background: var(--zen-bg) !important; border-bottom-color: rgba(255,255,255,0.07) !important; color: var(--zen-text) !important; } [data-theme="dark"] .conversations-header h2, [data-theme="dark"] .conversations-header p { color: var(--zen-text) !important; } /* ── Tâches planifiées — adaptation aux thèmes ─────────────── */ /* Corporate */ [data-theme="corporate"] .scheduled-card { background: var(--zen-surface) !important; border-color: var(--zen-border) !important; } /* Dark */ [data-theme="dark"] .scheduled-card { background: #1e1e2e !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: none !important; } [data-theme="dark"] .scheduled-card-title { color: #e2e8f0 !important; } [data-theme="dark"] .scheduled-card-prompt { background: #12121e !important; border-left-color: #4ADE80 !important; color: rgba(255,255,255,0.7) !important; } [data-theme="dark"] .scheduled-badge.freq { background: rgba(74,222,128,.1); color: #4ADE80; border-color: rgba(74,222,128,.3); } [data-theme="dark"] .scheduled-badge.active { background: rgba(74,222,128,.15); color: #4ADE80; border-color: rgba(74,222,128,.3); } [data-theme="dark"] .scheduled-badge.agent { background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.1); } [data-theme="dark"] .scheduled-card-icon { background: linear-gradient(135deg,#22C55E,#16A34A) !important; } [data-theme="dark"] .scheduled-runs { background: #12121e !important; } [data-theme="dark"] .scheduled-run-item { background: #1e1e2e !important; border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .scheduled-run-preview, [data-theme="dark"] .scheduled-run-date { color: rgba(255,255,255,.5) !important; } [data-theme="dark"] .scheduled-next-run { background: #12121e !important; color: rgba(255,255,255,.4) !important; } [data-theme="dark"] .scheduled-action-btn { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.5) !important; } [data-theme="dark"] .scheduled-runs-title { color: rgba(255,255,255,.3) !important; } /* Warm */ [data-theme="warm"] .scheduled-card { background: var(--zen-surface) !important; border-color: var(--zen-border) !important; } [data-theme="warm"] .scheduled-card-prompt { border-left-color: var(--zen-primary) !important; } [data-theme="warm"] .scheduled-card-icon { background: linear-gradient(135deg,var(--zen-primary),var(--zen-primary-dark)) !important; } /* Cartoon (Limova) */ [data-theme="limova"] .scheduled-card, [data-theme="cartoon"] .scheduled-card { border-color: var(--zen-border) !important; border-radius: 16px !important; } [data-theme="limova"] .scheduled-card-icon, [data-theme="cartoon"] .scheduled-card-icon { background: linear-gradient(135deg,var(--zen-primary),var(--zen-primary-dark)) !important; } [data-theme="limova"] .scheduled-badge.active, [data-theme="cartoon"] .scheduled-badge.active { background: #FFF3CC !important; color: #A06800 !important; border-color: #F0C050 !important; } /* Blanc Épuré */ [data-theme="blanc"] .scheduled-card { border-color: #E8E8E8 !important; box-shadow: none !important; } [data-theme="blanc"] .scheduled-card-icon { background: #111111 !important; } [data-theme="blanc"] .scheduled-card-prompt { border-left-color: #111111 !important; } [data-theme="blanc"] .scheduled-badge.active { background: #F0F0F0 !important; color: #111111 !important; border-color: #CCCCCC !important; } [data-theme="blanc"] .scheduled-badge.freq { background: #F0F0F0 !important; color: #333333 !important; border-color: #CCCCCC !important; } [data-theme="blanc"] .btn-new-scheduled { background: #111111 !important; } /* ── Tâches planifiées — thème Corporate ─────────────────────── */ [data-theme="corporate"] .scheduled-card { background: #FFFFFF !important; border-color: var(--zen-border) !important; box-shadow: 0 1px 4px rgba(30,79,216,.06) !important; } [data-theme="corporate"] .scheduled-card-icon { background: linear-gradient(135deg,#1E4FD8,#1840C0) !important; } [data-theme="corporate"] .scheduled-card-prompt { background: #F4F6FF !important; border-left-color: #1E4FD8 !important; color: #0F1B35 !important; } [data-theme="corporate"] .scheduled-badge.freq { background: #EEF2FF !important; color: #1E4FD8 !important; border-color: #C7D2FE !important; } [data-theme="corporate"] .scheduled-badge.active { background: #DCFCE7 !important; color: #166534 !important; border-color: #BBF7D0 !important; } [data-theme="corporate"] .scheduled-badge.agent { background: #F4F6FF !important; color: #6B7A99 !important; border-color: #DDE3F0 !important; } [data-theme="corporate"] .scheduled-runs { background: #F4F6FF !important; } [data-theme="corporate"] .scheduled-run-item { background: #FFFFFF !important; border-color: #DDE3F0 !important; } [data-theme="corporate"] .scheduled-next-run { background: #EEF2FF !important; color: #6B7A99 !important; } [data-theme="corporate"] .scheduled-action-btn { background: #F4F6FF !important; border-color: #DDE3F0 !important; color: #6B7A99 !important; } [data-theme="corporate"] .btn-new-scheduled { background: #1E4FD8 !important; } /* ── Tâches planifiées — thème Warm ──────────────────────────── */ [data-theme="warm"] .scheduled-card { background: #FFFDF9 !important; border-color: #E8D5B0 !important; } [data-theme="warm"] .scheduled-card-icon { background: linear-gradient(135deg,var(--zen-primary),var(--zen-primary-dark)) !important; } [data-theme="warm"] .scheduled-card-prompt { background: #FFF8EE !important; border-left-color: var(--zen-primary) !important; color: #3D2B1A !important; } [data-theme="warm"] .scheduled-badge.freq { background: #FFF3DC !important; color: #9A5C00 !important; border-color: #F5D08A !important; } [data-theme="warm"] .scheduled-badge.active { background: #DCFCE7 !important; color: #166534 !important; border-color: #BBF7D0 !important; } [data-theme="warm"] .scheduled-badge.agent { background: #FFF8EE !important; color: #7C5C3A !important; border-color: #E8D5B0 !important; } [data-theme="warm"] .scheduled-runs { background: #FFF8EE !important; } [data-theme="warm"] .scheduled-run-item { background: #FFFDF9 !important; border-color: #E8D5B0 !important; } [data-theme="warm"] .scheduled-next-run { background: #FFF3DC !important; color: #9A5C00 !important; } [data-theme="warm"] .scheduled-action-btn { background: #FFF8EE !important; border-color: #E8D5B0 !important; color: #7C5C3A !important; } /* ── Tâches planifiées — thème Limova ────────────────────────── */ [data-theme="limova"] .scheduled-card { background: #FFFFFF !important; border-color: #E0D8F0 !important; border-radius: 20px !important; } [data-theme="limova"] .scheduled-card-icon { background: linear-gradient(135deg,var(--zen-primary),var(--zen-primary-dark)) !important; border-radius: 14px !important; } [data-theme="limova"] .scheduled-card-prompt { background: #F5F0FF !important; border-left-color: var(--zen-primary) !important; } [data-theme="limova"] .scheduled-badge.freq { background: #EDE8FF !important; color: var(--zen-primary) !important; border-color: #C4B5FD !important; } [data-theme="limova"] .scheduled-badge.active { background: #D1FAE5 !important; color: #065F46 !important; border-color: #6EE7B7 !important; } [data-theme="limova"] .scheduled-runs { background: #F8F5FF !important; } [data-theme="limova"] .scheduled-run-item { background: #FFFFFF !important; border-color: #E0D8F0 !important; } [data-theme="limova"] .scheduled-next-run { background: #EDE8FF !important; color: var(--zen-primary) !important; } [data-theme="limova"] .btn-new-scheduled { background: var(--zen-primary) !important; border-radius: 12px !important; } /* ══════════════════════════════════════════════════════════════ THÈME APPLE — SF Pro, blanc pur, bleu system Apple Inspiration : apple.com — épuré au maximum ══════════════════════════════════════════════════════════════ */ [data-theme="apple"] { --zen-primary: #0071E3; --zen-primary-dark: #0077ED; --zen-gradient-end: #34AADC; --zen-bg: #F5F5F7; --zen-surface: #FFFFFF; --zen-surface-hover: #F5F5F7; --zen-border: #D2D2D7; --zen-text: #1D1D1F; --zen-text-secondary: #424245; --zen-text-muted: #86868B; --zen-card: #FFFFFF; --zen-card-hover: #F5F5F7; --radius-lg: 18px; --radius-sm: 10px; --t-font-display: -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif; --t-font-body: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; --t-fw-title: 600; --t-ls-title: -0.02em; } [data-theme="apple"] body { background: #F5F5F7; color: #1D1D1F; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; } /* Sidebar Apple */ [data-theme="apple"] .sidebar { background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-right: 1px solid rgba(0,0,0,0.1); } [data-theme="apple"] .sidebar-logo h1 { font-family: -apple-system, "SF Pro Display", sans-serif; font-weight: 600; letter-spacing: -0.02em; color: #1D1D1F; } [data-theme="apple"] .sidebar-logo h1 span { color: #0071E3; } [data-theme="apple"] .nav-item { color: #424245; border-radius: 8px; font-size: 13px; font-weight: 400; } [data-theme="apple"] .nav-item:hover { background: rgba(0,0,0,0.04); color: #1D1D1F; } [data-theme="apple"] .nav-item.active { background: rgba(0,113,227,0.08); border-left-color: #0071E3; color: #0071E3; font-weight: 500; } [data-theme="apple"] .nav-item-role { color: #86868B; font-size: 11px; } [data-theme="apple"] .sidebar-section-title { color: #86868B; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } [data-theme="apple"] .nav-separator { background: rgba(0,0,0,0.08); } [data-theme="apple"] .sidebar-footer { border-top-color: rgba(0,0,0,0.08); } /* Bouton Nouveau SuperAgent style Apple */ [data-theme="apple"] .btn-new-agent { background: #0071E3; color: #FFFFFF; border: none; border-radius: 980px; /* pill Apple */ font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0; } [data-theme="apple"] .btn-new-agent:hover { background: #0077ED; } /* Cards agents */ [data-theme="apple"] .team-card { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 0 0 0.5px rgba(0,0,0,.06); transition: box-shadow .2s; } [data-theme="apple"] .team-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.06); } [data-theme="apple"] .team-card h4 { color: #1D1D1F; font-weight: 600; } [data-theme="apple"] .team-card p { color: #86868B; font-size: 13px; } [data-theme="apple"] .manager-card { border: 1px solid rgba(0,113,227,0.3) !important; } /* Chat bubbles */ [data-theme="apple"] .chat-bubble.user-bubble { background: #0071E3; color: #FFFFFF; border-radius: 18px 18px 4px 18px; } [data-theme="apple"] .chat-bubble.agent-bubble { background: #E9E9EB; color: #1D1D1F; border-radius: 18px 18px 18px 4px; border: none; } /* Main content */ [data-theme="apple"] .main-content { background: #F5F5F7; } /* Tâches planifiées */ [data-theme="apple"] .scheduled-card { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 20px !important; box-shadow: 0 2px 12px rgba(0,0,0,.04), 0 0 0 0.5px rgba(0,0,0,.04) !important; padding: 22px 24px !important; } [data-theme="apple"] .scheduled-card-icon { background: #0071E3 !important; border-radius: 12px !important; box-shadow: none !important; } [data-theme="apple"] .scheduled-card-title { color: #1D1D1F !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } [data-theme="apple"] .scheduled-card-prompt { background: #F5F5F7 !important; border-left-color: #0071E3 !important; color: #424245 !important; border-radius: 8px !important; } [data-theme="apple"] .scheduled-badge.freq { background: #E8F1FC !important; color: #0071E3 !important; border-color: #C6DEFF !important; border-radius: 20px !important; font-weight: 500 !important; } [data-theme="apple"] .scheduled-badge.active { background: #D1F5E0 !important; color: #1C7A3A !important; border-color: #A0E8BE !important; } [data-theme="apple"] .scheduled-badge.agent { background: #F5F5F7 !important; color: #86868B !important; border-color: #D2D2D7 !important; } [data-theme="apple"] .scheduled-runs { background: #F5F5F7 !important; border-radius: 12px !important; } [data-theme="apple"] .scheduled-run-item { background: #FFFFFF !important; border-color: rgba(0,0,0,0.06) !important; border-radius: 10px !important; } [data-theme="apple"] .scheduled-next-run { background: #E8F1FC !important; color: #0071E3 !important; border-radius: 20px !important; } [data-theme="apple"] .scheduled-action-btn { background: #F5F5F7 !important; border-color: rgba(0,0,0,0.1) !important; color: #86868B !important; border-radius: 20px !important; } [data-theme="apple"] .scheduled-action-btn:hover { background: #E8F1FC !important; color: #0071E3 !important; border-color: #C6DEFF !important; } [data-theme="apple"] .btn-new-scheduled { background: #0071E3 !important; border-radius: 980px !important; font-weight: 400 !important; font-size: 13px !important; } /* Modals Apple */ [data-theme="apple"] #profile-modal > div, [data-theme="apple"] #admin-team-modal > div, [data-theme="apple"] .scheduled-modal { background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(40px) !important; border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 20px !important; } [data-theme="apple"] .scheduled-modal-overlay, [data-theme="apple"] #profile-modal, [data-theme="apple"] #admin-team-modal { background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(4px) !important; } /* Topbar Apple (thèmes avec topbar) */ [data-theme="apple"] #zb-topbar { background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.1); } /* ── Apple — overrides globaux ───────────────────────────────── */ /* Forcer SF Pro partout */ [data-theme="apple"] * { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; -webkit-font-smoothing: antialiased !important; } [data-theme="apple"] h1, [data-theme="apple"] h2, [data-theme="apple"] h3, [data-theme="apple"] h4, [data-theme="apple"] .home-a-greeting { font-family: -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif !important; font-weight: 600 !important; letter-spacing: -0.025em !important; } /* Supprimer TOUT le vert Zenbaia */ [data-theme="apple"] .team-card-role, [data-theme="apple"] .agent-role, [data-theme="apple"] .role-badge { color: #0071E3 !important; } /* Couleur primaire forcée partout */ [data-theme="apple"] a, [data-theme="apple"] .nav-item.active, [data-theme="apple"] .scheduled-badge.freq { color: #0071E3 !important; } /* Chat zone */ [data-theme="apple"] .chat-container, [data-theme="apple"] #chat-messages { background: #FFFFFF !important; } [data-theme="apple"] .chat-header { background: rgba(255,255,255,0.72) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; } [data-theme="apple"] .chat-agent-name { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: #1D1D1F !important; } /* Bulles chat plus grandes, police plus grande */ [data-theme="apple"] .chat-bubble { font-size: 15px !important; line-height: 1.55 !important; padding: 12px 16px !important; max-width: 75% !important; } [data-theme="apple"] .chat-bubble.user-bubble { background: #0071E3 !important; color: #FFFFFF !important; border-radius: 20px 20px 6px 20px !important; font-size: 15px !important; } [data-theme="apple"] .chat-bubble.agent-bubble { background: #F2F2F7 !important; color: #1D1D1F !important; border-radius: 20px 20px 20px 6px !important; border: none !important; font-size: 15px !important; } /* Input chat */ [data-theme="apple"] .chat-input-area, [data-theme="apple"] #chat-input-container { background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(20px) !important; border-top: 1px solid rgba(0,0,0,0.08) !important; } [data-theme="apple"] #chat-input { background: #F2F2F7 !important; border: none !important; border-radius: 22px !important; padding: 10px 18px !important; font-size: 15px !important; color: #1D1D1F !important; } [data-theme="apple"] .chat-send-btn, [data-theme="apple"] #send-btn { background: #0071E3 !important; border-radius: 50% !important; width: 34px !important; height: 34px !important; color: #fff !important; } /* Liste conversations */ [data-theme="apple"] .conv-item { background: #FFFFFF !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; padding: 14px 16px !important; } [data-theme="apple"] .conv-item:hover { background: #F5F5F7 !important; } [data-theme="apple"] .conv-item-title { font-size: 15px !important; font-weight: 500 !important; color: #1D1D1F !important; } [data-theme="apple"] .conv-item-preview { font-size: 13px !important; color: #86868B !important; } /* Conversations view */ [data-theme="apple"] .conversations-header { background: rgba(255,255,255,0.72) !important; backdrop-filter: blur(20px) !important; } /* Analytics */ [data-theme="apple"] .analytics-card, [data-theme="apple"] .stat-card { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 18px !important; box-shadow: none !important; } /* Documents */ [data-theme="apple"] .doc-item, [data-theme="apple"] .doc-card { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 14px !important; } /* Cards équipe — plus aérées */ [data-theme="apple"] .team-card { padding: 24px !important; } [data-theme="apple"] .team-card h4 { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } [data-theme="apple"] .team-card p { font-size: 13px !important; line-height: 1.5 !important; margin-top: 6px !important; } /* Boutons Apple — pill style */ [data-theme="apple"] button:not(.nav-item):not(.sidebar-item):not(.zb-top-item) { letter-spacing: 0 !important; } /* Filtres pills */ [data-theme="apple"] .conv-filter, [data-theme="apple"] .gallery-filter { border-radius: 980px !important; font-size: 13px !important; padding: 6px 14px !important; } [data-theme="apple"] .conv-filter.active, [data-theme="apple"] .gallery-filter.active { background: #0071E3 !important; color: #FFFFFF !important; border-color: #0071E3 !important; } /* Supprimer les ombres colorées Zenbaia */ [data-theme="apple"] .team-card-avatar, [data-theme="apple"] .agent-avatar { box-shadow: none !important; } /* Scrollbars Apple style */ [data-theme="apple"] ::-webkit-scrollbar { width: 6px; } [data-theme="apple"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="apple"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; } /* ══════════════════════════════════════════════════════════════ OVERRIDES PRÉCIS — basés sur l'analyse des CSS sources Couleurs hardcodées : #41b89c, #2e9e84, #1a2530, #4a5568, #f8fafc, #e2e8f0, #3B82F6, #0C7ABF, #3949ab, #eef1fb ══════════════════════════════════════════════════════════════ */ /* ── DARK ──────────────────────────────────────────────────── */ [data-theme="dark"] .chat-header { background: rgba(14,14,20,0.9) !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .chat-input-area { background: rgba(14,14,20,0.85) !important; border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .chat-input-wrapper { background: #1e1e2e !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] .chat-input { color: #e2e8f0 !important; } [data-theme="dark"] .message.agent .message-bubble { background: #1e1e2e !important; border-color: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; } [data-theme="dark"] .message.user .message-bubble { background: #0e2a1a !important; border-color: rgba(74,222,128,0.2) !important; color: #e2e8f0 !important; } [data-theme="dark"] .typing-dots span { background: #4ADE80 !important; } [data-theme="dark"] .stream-status { background: linear-gradient(135deg,rgba(74,222,128,.06),rgba(74,222,128,.03)) !important; border-color: rgba(74,222,128,0.15) !important; color: #4ADE80 !important; } [data-theme="dark"] .spinner-sm { border-color: rgba(74,222,128,.2) !important; border-top-color: #4ADE80 !important; } [data-theme="dark"] .conversations-header, [data-theme="dark"] .docs-header { background: rgba(14,14,20,0.9) !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .conversations-header h2, [data-theme="dark"] .docs-header h2 { color: #e2e8f0 !important; } [data-theme="dark"] .conv-search-input { background: #1e1e2e !important; border-color: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; } [data-theme="dark"] .conv-item:hover { background: #1e1e2e !important; } [data-theme="dark"] .conv-item-title { color: #e2e8f0 !important; } [data-theme="dark"] .doc-item:hover { background: #1e1e2e !important; } [data-theme="dark"] .doc-item-icon.folder { background: rgba(240,165,0,.15) !important; } [data-theme="dark"] .doc-item-icon.file { background: rgba(74,222,128,.1) !important; } [data-theme="dark"] .doc-item-icon.indexed { background: rgba(74,222,128,.15) !important; } [data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0e0e14 0%, #12121e 100%) !important; } [data-theme="dark"] .web-source-link { background: rgba(74,222,128,.08) !important; border-color: rgba(74,222,128,.15) !important; color: #4ADE80 !important; } [data-theme="dark"] .message-bubble pre { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .message-bubble code { background: rgba(255,255,255,.06) !important; } /* ── CORPORATE ─────────────────────────────────────────────── */ [data-theme="corporate"] .message.user .message-bubble { background: #EEF2FF !important; border-color: #C7D2FE !important; color: #0F1B35 !important; } [data-theme="corporate"] .typing-dots span { background: #1E4FD8 !important; } [data-theme="corporate"] .stream-status { background: linear-gradient(135deg,rgba(30,79,216,.06),rgba(30,79,216,.03)) !important; border-color: rgba(30,79,216,0.15) !important; color: #1E4FD8 !important; } [data-theme="corporate"] .spinner-sm { border-color: rgba(30,79,216,.2) !important; border-top-color: #1E4FD8 !important; } [data-theme="corporate"] .web-source-link { background: rgba(30,79,216,.08) !important; border-color: rgba(30,79,216,.15) !important; color: #1E4FD8 !important; } [data-theme="corporate"] .sm-trigger-chip { background: #EEF2FF !important; border-color: #C7D2FE !important; color: #1E4FD8 !important; } [data-theme="corporate"] .sm-btn-add-trigger { border-color: #1E4FD8 !important; color: #1E4FD8 !important; } [data-theme="corporate"] .sm-btn-add-trigger:hover { background: #1E4FD8 !important; color: #fff !important; } [data-theme="corporate"] .btn-modal-save { background: #1E4FD8 !important; } [data-theme="corporate"] .scheduled-modal input:focus, [data-theme="corporate"] .scheduled-modal textarea:focus { border-color: #1E4FD8 !important; } /* ── WARM ──────────────────────────────────────────────────── */ [data-theme="warm"] .message.user .message-bubble { background: #FFF3DC !important; border-color: #F5D08A !important; color: #3D2B1A !important; } [data-theme="warm"] .typing-dots span { background: var(--zen-primary) !important; } [data-theme="warm"] .stream-status { background: linear-gradient(135deg,rgba(240,165,0,.06),rgba(240,165,0,.03)) !important; border-color: rgba(240,165,0,0.2) !important; color: #9A5C00 !important; } [data-theme="warm"] .spinner-sm { border-color: rgba(240,165,0,.2) !important; border-top-color: var(--zen-primary) !important; } [data-theme="warm"] .sm-trigger-chip { background: #FFF3DC !important; border-color: #F5D08A !important; color: #9A5C00 !important; } [data-theme="warm"] .sm-btn-add-trigger { border-color: var(--zen-primary) !important; color: var(--zen-primary) !important; } [data-theme="warm"] .btn-modal-save { background: var(--zen-primary) !important; } /* ── BLANC ÉPURÉ ────────────────────────────────────────────── */ [data-theme="blanc"] .message.user .message-bubble { background: #111111 !important; border-color: #111111 !important; color: #FFFFFF !important; } [data-theme="blanc"] .typing-dots span { background: #111111 !important; } [data-theme="blanc"] .stream-status { background: #F7F7F7 !important; border-color: #E8E8E8 !important; color: #111111 !important; } [data-theme="blanc"] .spinner-sm { border-color: #E8E8E8 !important; border-top-color: #111111 !important; } [data-theme="blanc"] .chat-input-wrapper:focus-within { border-color: #111111 !important; box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important; } [data-theme="blanc"] .btn-send { background: #111111 !important; } [data-theme="blanc"] .conversations-header, [data-theme="blanc"] .docs-header { background: #FFFFFF !important; border-bottom-color: #E8E8E8 !important; } [data-theme="blanc"] .sm-trigger-chip { background: #F0F0F0 !important; border-color: #CCCCCC !important; color: #111111 !important; } [data-theme="blanc"] .sm-btn-add-trigger { border-color: #111111 !important; color: #111111 !important; } [data-theme="blanc"] .sm-btn-add-trigger:hover { background: #111111 !important; color: #fff !important; } [data-theme="blanc"] .btn-modal-save { background: #111111 !important; } [data-theme="blanc"] .docs-tab.active { color: #111111 !important; border-bottom-color: #111111 !important; } [data-theme="blanc"] .sidebar { background: #FFFFFF !important; } /* ── CARTOON LIMOVA ─────────────────────────────────────────── */ [data-theme="cartoon"] .message.user .message-bubble { background: #F0A500 !important; border-color: #F0A500 !important; color: #FFFFFF !important; } [data-theme="cartoon"] .typing-dots span { background: #F0A500 !important; } [data-theme="cartoon"] .stream-status { background: linear-gradient(135deg,rgba(240,165,0,.06),rgba(240,165,0,.03)) !important; border-color: rgba(240,165,0,0.2) !important; color: #A06800 !important; } [data-theme="cartoon"] .spinner-sm { border-color: rgba(240,165,0,.2) !important; border-top-color: #F0A500 !important; } [data-theme="cartoon"] .btn-send { background: #F0A500 !important; } [data-theme="cartoon"] .chat-input-wrapper:focus-within { border-color: #F0A500 !important; box-shadow: 0 0 0 3px rgba(240,165,0,.12) !important; } [data-theme="cartoon"] .sm-trigger-chip { background: #FFF3CC !important; border-color: #F0C050 !important; color: #A06800 !important; } [data-theme="cartoon"] .sm-btn-add-trigger { border-color: #F0A500 !important; color: #F0A500 !important; } [data-theme="cartoon"] .sm-btn-add-trigger:hover { background: #F0A500 !important; color: #fff !important; } [data-theme="cartoon"] .btn-modal-save { background: #F0A500 !important; } [data-theme="cartoon"] .docs-tab.active { color: #A06800 !important; border-bottom-color: #F0A500 !important; } /* ── APPLE ──────────────────────────────────────────────────── */ [data-theme="apple"] .typing-dots span { background: #0071E3 !important; } [data-theme="apple"] .stream-status { background: linear-gradient(135deg,rgba(0,113,227,.05),rgba(0,113,227,.02)) !important; border-color: rgba(0,113,227,0.12) !important; color: #0071E3 !important; } [data-theme="apple"] .spinner-sm { border-color: rgba(0,113,227,.15) !important; border-top-color: #0071E3 !important; } [data-theme="apple"] .web-source-link { background: rgba(0,113,227,.06) !important; border-color: rgba(0,113,227,.12) !important; color: #0071E3 !important; } [data-theme="apple"] .sm-trigger-chip { background: #E8F1FC !important; border-color: #C6DEFF !important; color: #0071E3 !important; } [data-theme="apple"] .sm-btn-add-trigger { border-color: #0071E3 !important; color: #0071E3 !important; } [data-theme="apple"] .sm-btn-add-trigger:hover { background: #0071E3 !important; color: #fff !important; } [data-theme="apple"] .btn-modal-save { background: #0071E3 !important; border-radius: 980px !important; } [data-theme="apple"] .btn-modal-cancel { border-radius: 980px !important; } [data-theme="apple"] .docs-tab.active { color: #0071E3 !important; border-bottom-color: #0071E3 !important; } [data-theme="apple"] .conv-filter.active { background: #0071E3 !important; border-color: #0071E3 !important; } [data-theme="apple"] .conv-search-input:focus { border-color: #0071E3 !important; box-shadow: 0 0 0 3px rgba(0,113,227,.1) !important; } [data-theme="apple"] .conversations-header, [data-theme="apple"] .docs-header { background: rgba(255,255,255,0.72) !important; backdrop-filter: blur(20px) !important; } [data-theme="apple"] .doc-item-icon.folder { background: #FEF3C7 !important; } [data-theme="apple"] .doc-item-icon.file { background: #EFF6FF !important; } [data-theme="apple"] .doc-item-icon.indexed { background: #D1FAE5 !important; } [data-theme="apple"] .sidebar { background: rgba(255,255,255,0.72) !important; backdrop-filter: saturate(180%) blur(20px) !important; } [data-theme="apple"] .team-card.manager-card { border-color: #0071E3 !important; } [data-theme="apple"] .manager-badge { background: #0071E3 !important; } [data-theme="apple"] .scheduled-modal input:focus, [data-theme="apple"] .scheduled-modal textarea:focus { border-color: #0071E3 !important; } /* ══════════════════════════════════════════════════════════════ TYPOGRAPHIE & TAILLES — overrides par thème ══════════════════════════════════════════════════════════════ */ /* ── APPLE — polices plus grandes, plus aérées ─────────────── */ [data-theme="apple"] .scheduled-card-title { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: #1D1D1F !important; } [data-theme="apple"] .scheduled-card-prompt { font-size: 14px !important; line-height: 1.55 !important; border-radius: 10px !important; padding: 10px 14px !important; } [data-theme="apple"] .scheduled-badge { font-size: 12px !important; padding: 5px 12px !important; border-radius: 980px !important; font-weight: 500 !important; letter-spacing: 0 !important; } [data-theme="apple"] .scheduled-card-icon { width: 48px !important; height: 48px !important; border-radius: 14px !important; font-size: 22px !important; } [data-theme="apple"] .scheduled-action-btn { border-radius: 980px !important; font-size: 13px !important; padding: 7px 14px !important; } [data-theme="apple"] .scheduled-runs { border-radius: 14px !important; padding: 14px 16px !important; } [data-theme="apple"] .scheduled-run-item { font-size: 13px !important; padding: 10px 14px !important; border-radius: 12px !important; } [data-theme="apple"] .scheduled-run-date { font-size: 12px !important; } [data-theme="apple"] .scheduled-next-run { font-size: 12px !important; padding: 8px 14px !important; border-radius: 980px !important; } [data-theme="apple"] .scheduled-runs-title { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } [data-theme="apple"] .btn-new-scheduled { font-size: 14px !important; padding: 10px 20px !important; border-radius: 980px !important; } /* Chat Apple — polices plus grandes */ [data-theme="apple"] .chat-agent-info h2 { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; } [data-theme="apple"] .message-bubble { font-size: 15px !important; line-height: 1.6 !important; padding: 14px 18px !important; } [data-theme="apple"] .chat-input { font-size: 15px !important; } [data-theme="apple"] .chat-agent-info p { font-size: 13px !important; } /* Conversations Apple */ [data-theme="apple"] .conv-item-title { font-size: 15px !important; font-weight: 500 !important; } [data-theme="apple"] .conv-item-preview { font-size: 13px !important; } [data-theme="apple"] .conversations-header h2 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; } /* Documents Apple */ [data-theme="apple"] .docs-header h2 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; } [data-theme="apple"] .doc-item-name { font-size: 15px !important; font-weight: 500 !important; } [data-theme="apple"] .doc-item-meta { font-size: 13px !important; } [data-theme="apple"] .docs-tab { font-size: 14px !important; } /* Sidebar Apple */ [data-theme="apple"] .nav-item-name { font-size: 14px !important; font-weight: 400 !important; } [data-theme="apple"] .nav-item-role { font-size: 11px !important; } [data-theme="apple"] .sidebar-section-title { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; } /* ── CORPORATE — légèrement plus compact et dense ──────────── */ [data-theme="corporate"] .scheduled-card-title { font-size: 14px !important; font-weight: 700 !important; } [data-theme="corporate"] .scheduled-badge { font-size: 11px !important; font-weight: 700 !important; } /* ── BLANC ÉPURÉ — équilibré, neutre ──────────────────────── */ [data-theme="blanc"] .scheduled-card-title { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: #111111 !important; } [data-theme="blanc"] .scheduled-badge { border-radius: 4px !important; font-weight: 600 !important; } /* ── CARTOON — plus rond, plus expressif ───────────────────── */ [data-theme="cartoon"] .scheduled-card { border-radius: 20px !important; padding: 18px 20px !important; } [data-theme="cartoon"] .scheduled-card-title { font-size: 15px !important; font-weight: 700 !important; } [data-theme="cartoon"] .scheduled-badge { border-radius: 20px !important; font-size: 11px !important; } [data-theme="cartoon"] .scheduled-action-btn { border-radius: 12px !important; } /* ══════════════════════════════════════════════════════════════ HOME / DASHBOARD — typographie par thème ══════════════════════════════════════════════════════════════ */ /* ── APPLE — home plus aéré, polices SF Pro ─────────────────── */ [data-theme="apple"] .welcome-screen h2 { font-size: 32px !important; font-weight: 600 !important; letter-spacing: -0.03em !important; } [data-theme="apple"] .welcome-screen p { font-size: 16px !important; color: #86868B !important; line-height: 1.6 !important; } [data-theme="apple"] .team-card h4 { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } [data-theme="apple"] .team-card p, [data-theme="apple"] .team-card .manager-desc { font-size: 14px !important; line-height: 1.5 !important; color: #86868B !important; } [data-theme="apple"] .team-card .team-card-role { font-size: 13px !important; color: #0071E3 !important; font-weight: 500 !important; } [data-theme="apple"] .team-card { padding: 28px 20px 22px !important; border-radius: 20px !important; } [data-theme="apple"] .team-card.manager-card { padding: 22px 28px !important; } [data-theme="apple"] .manager-badge { background: #0071E3 !important; border-radius: 6px !important; font-size: 10px !important; letter-spacing: 0.04em !important; } [data-theme="apple"] .team-card .agent-tag { font-size: 10px !important; padding: 3px 8px !important; border-radius: 6px !important; } /* Dashboard home C — KPI tiles */ [data-theme="apple"] .home-c-kpi { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 18px !important; padding: 24px !important; } [data-theme="apple"] .home-c-kpi-v { font-size: 36px !important; font-weight: 600 !important; letter-spacing: -0.04em !important; color: #1D1D1F !important; } [data-theme="apple"] .home-c-kpi-l { font-size: 12px !important; font-weight: 500 !important; color: #86868B !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; margin-top: 4px !important; } [data-theme="apple"] .home-c-panel-title { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: #1D1D1F !important; } [data-theme="apple"] .home-c-row-name { font-size: 15px !important; font-weight: 500 !important; color: #1D1D1F !important; } [data-theme="apple"] .home-c-row-meta { font-size: 13px !important; color: #86868B !important; } [data-theme="apple"] .home-c-task-name { font-size: 14px !important; font-weight: 500 !important; color: #1D1D1F !important; } [data-theme="apple"] .home-c-task-time { font-size: 12px !important; color: #86868B !important; } /* ── BLANC — home épuré, noir pur ───────────────────────────── */ [data-theme="blanc"] .welcome-screen h2 { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #111111 !important; } [data-theme="blanc"] .team-card h4 { font-size: 15px !important; font-weight: 700 !important; color: #111111 !important; } [data-theme="blanc"] .team-card .team-card-role { color: #555555 !important; font-size: 12px !important; } [data-theme="blanc"] .manager-badge { background: #111111 !important; } /* ── CARTOON — home expressif, couleurs chaleureuses ─────────── */ [data-theme="cartoon"] .welcome-screen h2 { font-size: 26px !important; font-weight: 800 !important; color: #2C2415 !important; } [data-theme="cartoon"] .team-card h4 { font-size: 15px !important; font-weight: 700 !important; color: #2C2415 !important; } [data-theme="cartoon"] .team-card .team-card-role { color: #F0A500 !important; font-weight: 700 !important; } [data-theme="cartoon"] .manager-badge { background: #F0A500 !important; } [data-theme="cartoon"] .team-card { border-radius: 20px !important; } /* ── DARK — home fond sombre ─────────────────────────────────── */ [data-theme="dark"] .welcome-screen h2 { color: #FFFFFF !important; } [data-theme="dark"] .welcome-screen p { color: rgba(255,255,255,0.5) !important; } [data-theme="dark"] .team-card { background: #1e1e2e !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .team-card h4 { color: #FFFFFF !important; } [data-theme="dark"] .team-card .team-card-role { color: #4ADE80 !important; } [data-theme="dark"] .manager-badge { background: #4ADE80 !important; color: #0e0e14 !important; } [data-theme="dark"] .team-card.manager-card { border-color: rgba(74,222,128,0.3) !important; } [data-theme="dark"] .home-c-kpi { background: #1e1e2e !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .home-c-kpi-v { color: #FFFFFF !important; } [data-theme="dark"] .home-c-panel-title { color: #FFFFFF !important; } [data-theme="dark"] .home-c-row-name { color: #e2e8f0 !important; } [data-theme="dark"] .home-c-task-name { color: #e2e8f0 !important; } /* ── CORPORATE — home professionnel ─────────────────────────── */ [data-theme="corporate"] .welcome-screen h2 { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } [data-theme="corporate"] .team-card h4 { font-size: 14px !important; font-weight: 700 !important; } [data-theme="corporate"] .team-card .team-card-role { color: #1E4FD8 !important; } [data-theme="corporate"] .manager-badge { background: #1E4FD8 !important; } [data-theme="corporate"] .team-card.manager-card { border-color: #1E4FD8 !important; } /* ── Apple — supprimer le fond vert de la sidebar ─────────────── */ [data-theme="apple"] .sidebar { background: rgba(255,255,255,0.85) !important; background-image: none !important; } /* ── Apple — police SF Pro globale (body) ──────────────────────── */ [data-theme="apple"] body { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif !important; } /* ── Blanc — sidebar fond blanc pur ─────────────────────────────── */ [data-theme="blanc"] .sidebar { background: #FFFFFF !important; background-image: none !important; } /* ── Cartoon — sidebar fond crème ───────────────────────────────── */ [data-theme="cartoon"] .sidebar { background: #FFFFFF !important; background-image: none !important; } /* ── Dark — sidebar fond très sombre ────────────────────────────── */ [data-theme="dark"] .sidebar { background: #0e0e14 !important; background-image: none !important; } /* ── Corporate — sidebar fond bleu très sombre ──────────────────── */ [data-theme="corporate"] .sidebar { background: linear-gradient(180deg, #0F1B35 0%, #0a1428 100%) !important; } /* ── Warm — sidebar fond crème chaud ────────────────────────────── */ [data-theme="warm"] .sidebar { background: linear-gradient(180deg, #FFFDF9 0%, #FFF8EE 100%) !important; background-image: none !important; } /* Home C — police héritée du thème body */ [data-theme="apple"] .home-c-kpi-v { font-family: -apple-system, "SF Pro Display", sans-serif !important; font-size: 32px !important; font-weight: 600 !important; letter-spacing: -0.04em !important; } [data-theme="apple"] .home-c-kpi-l { font-family: -apple-system, "SF Pro Text", sans-serif !important; font-size: 11px !important; font-weight: 500 !important; } [data-theme="apple"] .home-c-panel-title { font-family: -apple-system, "SF Pro Display", sans-serif !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } [data-theme="apple"] .home-c-row-name { font-size: 14px !important; font-weight: 500 !important; } [data-theme="apple"] .home-c-task-name { font-size: 14px !important; font-weight: 500 !important; } /* ── Icônes cards tâches planifiées par thème ──────────────── */ /* Apple — fond bleu système, icône SVG blanche */ [data-theme="apple"] .scheduled-card-icon { background: #0071E3 !important; color: #FFFFFF !important; border-radius: 14px !important; width: 50px !important; height: 50px !important; box-shadow: none !important; } [data-theme="apple"] .scheduled-card-icon svg { stroke: #FFFFFF; } /* Corporate — fond bleu marine, SVG blanc */ [data-theme="corporate"] .scheduled-card-icon { background: linear-gradient(135deg,#1E4FD8,#1840C0) !important; color: #FFFFFF !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(30,79,216,.25) !important; } [data-theme="corporate"] .scheduled-card-icon svg { stroke: #FFFFFF; } /* Blanc — fond noir, symboles blancs */ [data-theme="blanc"] .scheduled-card-icon { background: #111111 !important; color: #FFFFFF !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 800 !important; box-shadow: none !important; } /* Cartoon — fond orange, emoji */ [data-theme="cartoon"] .scheduled-card-icon { background: linear-gradient(135deg,#F0A500,#D4920A) !important; box-shadow: 0 2px 8px rgba(240,165,0,.3) !important; border-radius: 14px !important; } /* Dark — fond vert néon */ [data-theme="dark"] .scheduled-card-icon { background: linear-gradient(135deg,#22C55E,#16A34A) !important; box-shadow: 0 2px 8px rgba(74,222,128,.2) !important; } /* ══════════════════════════════════════════════════════════════ APPLE — Style cards definitif (inspiration apple.com) ══════════════════════════════════════════════════════════════ */ /* Override complet de la liste scheduled en mode Apple */ [data-theme="apple"] .scheduled-list { background: #F5F5F7; padding: 20px 24px; gap: 16px; } [data-theme="apple"] .scheduled-card { background: #FFFFFF !important; border: none !important; border-radius: 18px !important; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 20px rgba(0,0,0,.06) !important; padding: 20px 22px !important; transition: box-shadow .2s !important; } [data-theme="apple"] .scheduled-card:hover { box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 8px 30px rgba(0,0,0,.1) !important; transform: none !important; } [data-theme="apple"] .scheduled-card-title { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.022em !important; color: #1D1D1F !important; } [data-theme="apple"] .scheduled-card-prompt { font-size: 13px !important; color: #86868B !important; background: #F5F5F7 !important; border-left: none !important; border-radius: 10px !important; padding: 10px 14px !important; line-height: 1.5 !important; font-weight: 400 !important; } [data-theme="apple"] .scheduled-badge { font-size: 12px !important; font-weight: 400 !important; padding: 5px 12px !important; border-radius: 980px !important; letter-spacing: 0 !important; } [data-theme="apple"] .scheduled-badge.active { background: rgba(52,199,89,.1) !important; color: #1C7A3A !important; border-color: rgba(52,199,89,.2) !important; } [data-theme="apple"] .scheduled-badge.freq { background: rgba(0,113,227,.08) !important; color: #0071E3 !important; border-color: rgba(0,113,227,.15) !important; } [data-theme="apple"] .scheduled-badge.agent { background: #F5F5F7 !important; color: #86868B !important; border-color: transparent !important; } [data-theme="apple"] .scheduled-runs { background: #F5F5F7 !important; border-radius: 12px !important; margin-top: 14px !important; } [data-theme="apple"] .scheduled-run-item { background: #FFFFFF !important; border: none !important; border-radius: 10px !important; font-size: 13px !important; padding: 10px 12px !important; margin-bottom: 6px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; } [data-theme="apple"] .scheduled-runs-title { font-size: 11px !important; font-weight: 500 !important; color: #86868B !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } [data-theme="apple"] .scheduled-next-run { background: rgba(0,113,227,.06) !important; color: #0071E3 !important; border-radius: 980px !important; font-size: 12px !important; padding: 6px 14px !important; font-weight: 400 !important; } [data-theme="apple"] .scheduled-action-btn { background: #F5F5F7 !important; border: none !important; border-radius: 980px !important; color: #86868B !important; font-size: 13px !important; padding: 7px 14px !important; } [data-theme="apple"] .scheduled-action-btn:hover { background: rgba(0,113,227,.08) !important; color: #0071E3 !important; } /* Icône SF style — carré arrondi bleu */ [data-theme="apple"] .scheduled-card-icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; background: #0071E3 !important; color: #FFFFFF !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } [data-theme="apple"] .scheduled-card-icon svg { stroke: #FFFFFF !important; width: 22px !important; height: 22px !important; } /* Header view */ [data-theme="apple"] .conversations-header, [data-theme="apple"] .view > .scheduled-header { background: rgba(245,245,247,0.9) !important; backdrop-filter: blur(20px) !important; } [data-theme="apple"] .btn-new-scheduled { background: #0071E3 !important; border-radius: 980px !important; font-size: 14px !important; font-weight: 400 !important; padding: 10px 20px !important; letter-spacing: 0 !important; } /* ── Apple — forcer fond gris pur sur body ET main ─────────── */ [data-theme="apple"] body { background: #F5F5F7 !important; background-image: none !important; } [data-theme="apple"] .main-content, [data-theme="apple"] .app-shell, [data-theme="apple"] #view-home, [data-theme="apple"] .welcome-screen, [data-theme="apple"] #home-view-c, [data-theme="apple"] #home-view-a, [data-theme="apple"] #home-view-b { background: #F5F5F7 !important; } [data-theme="apple"] .home-c-panel { background: #FFFFFF !important; border: none !important; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05) !important; border-radius: 18px !important; } [data-theme="apple"] .home-c-kpi { background: #FFFFFF !important; border: none !important; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05) !important; border-radius: 16px !important; } /* ── Blanc — fond blanc pur ────────────────────────────────── */ [data-theme="blanc"] body { background: #F7F7F7 !important; background-image: none !important; } [data-theme="blanc"] .main-content { background: #F7F7F7 !important; } /* ── Cartoon — fond grège ──────────────────────────────────── */ [data-theme="cartoon"] body { background: #F5F5F0 !important; background-image: none !important; } [data-theme="cartoon"] .main-content { background: #F5F5F0 !important; } /* ── Dark — fond très sombre ───────────────────────────────── */ [data-theme="dark"] body { background: #0e0e14 !important; background-image: none !important; } [data-theme="dark"] .main-content { background: #0e0e14 !important; } [data-theme="dark"] #home-view-c, [data-theme="dark"] .welcome-screen { background: #0e0e14 !important; } /* ── Corporate — fond bleu très clair ─────────────────────── */ [data-theme="corporate"] body { background: #F4F6FF !important; background-image: none !important; } [data-theme="corporate"] .main-content { background: #F4F6FF !important; } /* ── Warm — fond crème ─────────────────────────────────────── */ [data-theme="warm"] body { background: #FDFAF7 !important; background-image: none !important; } [data-theme="warm"] .main-content { background: #FDFAF7 !important; } /* Warm — sidebar lin doux, contraste subtil avec fond crème */ [data-theme="warm"] .sidebar { background: linear-gradient(180deg, #F3EDE4 0%, #EDE4D8 100%) !important; border-right-color: #DDD0C0 !important; } [data-theme="warm"] .nav-item { color: #7C6050 !important; } [data-theme="warm"] .nav-item:hover { background: rgba(201,74,42,.06) !important; color: #3D2010 !important; } [data-theme="warm"] .nav-item.active { background: rgba(201,74,42,.1) !important; border-left-color: #C94A2A !important; color: #C94A2A !important; } [data-theme="warm"] .sidebar-section-title { color: #B09080 !important; } [data-theme="warm"] .nav-separator { background: #DDD0C0 !important; } [data-theme="warm"] .sidebar-footer { border-top-color: #DDD0C0 !important; background: #EDE4D8 !important; } [data-theme="warm"] .user-info-small .name { color: #3D2010 !important; } [data-theme="warm"] .user-info-small .status { color: #C94A2A !important; } [data-theme="warm"] .user-info-small .status::before { background: #C94A2A !important; } [data-theme="warm"] .btn-new-agent { background: rgba(201,74,42,.08) !important; border-color: #C94A2A !important; color: #C94A2A !important; } [data-theme="warm"] .nav-item-role { color: #A08060 !important; } /* ══════════════════════════════════════════════════════════════ APPLE — Format card unifié sur toute l'app Même fond blanc, même ombre subtile, même coins 18px ══════════════════════════════════════════════════════════════ */ /* Mixin card Apple */ [data-theme="apple"] .team-card, [data-theme="apple"] .conv-item:hover, [data-theme="apple"] .home-c-panel, [data-theme="apple"] .home-c-kpi, [data-theme="apple"] .batch-card, [data-theme="apple"] .doc-item:hover, [data-theme="apple"] .gallery-card, [data-theme="apple"] .conv-picker-wrap, [data-theme="apple"] .folder-picker { background: #FFFFFF !important; border: none !important; border-radius: 18px !important; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06) !important; } [data-theme="apple"] .conv-item { border-radius: 12px !important; margin: 2px 4px !important; } [data-theme="apple"] .conv-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; } [data-theme="apple"] .message.agent .message-bubble { background: #F2F2F7 !important; border: none !important; border-radius: 18px 18px 18px 4px !important; box-shadow: none !important; } /* Dashboard home C */ [data-theme="apple"] .home-c-panel { padding: 20px !important; } [data-theme="apple"] .home-c-kpi { border-radius: 16px !important; padding: 18px 20px !important; } /* Batch cards */ [data-theme="apple"] .batch-card { border-radius: 14px !important; padding: 14px !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; } /* Toast */ [data-theme="apple"] .batch-toast { background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(20px) !important; border: none !important; border-radius: 14px !important; box-shadow: 0 4px 24px rgba(0,0,0,.12) !important; } /* ══════════════════════════════════════════════════════════════ CORPORATE — Cards avec ombre légère, coins 12px, bordure fine ══════════════════════════════════════════════════════════════ */ [data-theme="corporate"] .home-c-panel, [data-theme="corporate"] .home-c-kpi, [data-theme="corporate"] .team-card, [data-theme="corporate"] .batch-card { background: #FFFFFF !important; border: 1px solid #DDE3F0 !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(30,79,216,.04) !important; } [data-theme="corporate"] .conv-item:hover { background: #F4F6FF !important; border-radius: 8px !important; } [data-theme="corporate"] .message.agent .message-bubble { background: #FFFFFF !important; border: 1px solid #DDE3F0 !important; color: #0F1B35 !important; box-shadow: 0 1px 4px rgba(30,79,216,.06) !important; } [data-theme="corporate"] .message.user .message-bubble { background: #1E4FD8 !important; border-color: #1E4FD8 !important; color: #FFFFFF !important; } [data-theme="corporate"] #chat-messages, [data-theme="corporate"] .chat-messages { background: #F4F6FF !important; } [data-theme="corporate"] .chat-input-area { background: rgba(244,246,255,0.95) !important; border-top-color: #DDE3F0 !important; } [data-theme="corporate"] .chat-input-wrapper { background: #FFFFFF !important; border-color: #DDE3F0 !important; } /* ══════════════════════════════════════════════════════════════ DARK — Cards fond sombre, sans bordure vive ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .home-c-panel, [data-theme="dark"] .home-c-kpi, [data-theme="dark"] .team-card, [data-theme="dark"] .batch-card, [data-theme="dark"] .conv-item:hover { background: #1e1e2e !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; box-shadow: none !important; } [data-theme="dark"] .home-c-kpi-v { color: #FFFFFF !important; } [data-theme="dark"] .home-c-panel-title { color: #FFFFFF !important; } [data-theme="dark"] .batch-card-label { color: rgba(255,255,255,.8) !important; } [data-theme="dark"] .conv-item-title { color: rgba(255,255,255,.85) !important; } /* ══════════════════════════════════════════════════════════════ WARM — Cards fond crème, coins ronds, bordure chaude ══════════════════════════════════════════════════════════════ */ [data-theme="warm"] .home-c-panel, [data-theme="warm"] .home-c-kpi, [data-theme="warm"] .team-card, [data-theme="warm"] .batch-card { background: #FFFFFF !important; border: 1px solid #E8D5B0 !important; border-radius: 16px !important; box-shadow: 0 2px 8px rgba(240,165,0,.06) !important; } [data-theme="warm"] .conv-item:hover { background: #FFF8EE !important; border-radius: 8px !important; } /* ══════════════════════════════════════════════════════════════ BLANC — Cards blanches, pas d'ombre, bordure très fine ══════════════════════════════════════════════════════════════ */ [data-theme="blanc"] .home-c-panel, [data-theme="blanc"] .home-c-kpi, [data-theme="blanc"] .team-card, [data-theme="blanc"] .batch-card { background: #FFFFFF !important; border: 1px solid #E8E8E8 !important; border-radius: 10px !important; box-shadow: none !important; } [data-theme="blanc"] .conv-item:hover { background: #F7F7F7 !important; border-radius: 6px !important; } /* ══════════════════════════════════════════════════════════════ CARTOON — Cards blanches, coins très ronds, ombre orange douce ══════════════════════════════════════════════════════════════ */ [data-theme="cartoon"] .home-c-panel, [data-theme="cartoon"] .home-c-kpi, [data-theme="cartoon"] .team-card, [data-theme="cartoon"] .batch-card { background: #FFFFFF !important; border: 1.5px solid #E8E4D8 !important; border-radius: 20px !important; box-shadow: 0 2px 12px rgba(240,165,0,.08) !important; } [data-theme="cartoon"] .conv-item:hover { background: #FFF8E8 !important; border-radius: 12px !important; } /* ================================================================ THÈME ZENSUITE / ZENBOOST Navy #030617 · Indigo #6366f1 · Inter + DM Sans Fidèle au brief design Zenboost/ZenSuite. Actif automatiquement sur zenagent.pro (voir index.html). ================================================================ */ [data-theme="zensuite"] { --zen-primary: #6366f1; --zen-primary-dark: #4f52cc; --zen-primary-light: #eff1ff; --zen-gradient-start: #6366f1; --zen-gradient-end: #9b90ff; --zen-bg: #ffffff; --zen-bg-deep: #f2f5fc; --zen-surface: #ffffff; --zen-surface-hover: #eff1ff; --zen-text: #091123; --zen-text-secondary: #5b6375; --zen-text-muted: #8a93a8; --zen-border: #e1e5eb; --zen-shadow: rgba(99,102,241,.10); --zen-shadow-strong: rgba(99,102,241,.22); --zen-danger: #ee0f1f; --zen-warning: #e99b2a; --zen-info: #6366f1; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; } [data-theme="zensuite"] body { background: #ffffff !important; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } [data-theme="zensuite"] .main-content { background: #f2f5fc !important; } /* ── Sidebar navy + grille fine Zenboost ── */ [data-theme="zensuite"] .sidebar { background: #030617 !important; border-right: 1px solid rgba(255,255,255,.08) !important; position: relative; } [data-theme="zensuite"] .sidebar::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } [data-theme="zensuite"] .sidebar > * { position: relative; z-index: 1; } /* ── Logo ── */ [data-theme="zensuite"] .sidebar-logo h1 { background: linear-gradient(135deg, #6366f1, #9b90ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'DM Sans', 'Inter', sans-serif; letter-spacing: -0.02em; } /* ── Nav ── */ [data-theme="zensuite"] .sidebar-section-title { color: rgba(247,248,252,.38) !important; } [data-theme="zensuite"] .sidebar-section-title .team-count { background: #6366f1 !important; } [data-theme="zensuite"] .nav-item { color: rgba(247,248,252,.65) !important; } [data-theme="zensuite"] .nav-item:hover { background: rgba(255,255,255,.06) !important; color: #f7f8fc !important; } [data-theme="zensuite"] .nav-item.active { background: rgba(99,102,241,.18) !important; border-left-color: #6366f1 !important; color: #f7f8fc !important; font-weight: 600; } [data-theme="zensuite"] .nav-item.manager { border-left-color: #9b90ff !important; background: rgba(155,144,255,.10) !important; } [data-theme="zensuite"] .nav-item-role { color: rgba(247,248,252,.40) !important; } [data-theme="zensuite"] .nav-separator { background: rgba(255,255,255,.08) !important; } [data-theme="zensuite"] .sidebar-footer { border-top-color: rgba(255,255,255,.08) !important; } [data-theme="zensuite"] .user-info-small .name { color: rgba(247,248,252,.85) !important; } [data-theme="zensuite"] .user-info-small .status { color: #9b90ff !important; } [data-theme="zensuite"] .user-info-small .status::before { background: #6366f1 !important; } [data-theme="zensuite"] .nav-badge-manager { background: #6366f1 !important; } /* ── Bouton Nouveau SuperAgent — pilule ── */ [data-theme="zensuite"] .btn-new-agent { border-color: rgba(99,102,241,.35) !important; color: #9b90ff !important; background: rgba(99,102,241,.10) !important; border-radius: 999px !important; } [data-theme="zensuite"] .btn-new-agent:hover { background: rgba(99,102,241,.20) !important; border-color: #6366f1 !important; color: #f7f8fc !important; } /* ── Team cards ── */ [data-theme="zensuite"] .team-card, [data-theme="zensuite"] .home-c-panel, [data-theme="zensuite"] .home-c-kpi, [data-theme="zensuite"] .batch-card { background: #ffffff !important; border: 1px solid #e1e5eb !important; border-radius: 16px !important; box-shadow: none !important; } [data-theme="zensuite"] .team-card:hover { border-color: rgba(99,102,241,.35) !important; box-shadow: 0 4px 20px rgba(99,102,241,.10) !important; transform: translateY(-1px); } [data-theme="zensuite"] .team-card.manager-card { border-color: rgba(99,102,241,.40) !important; box-shadow: 0 0 0 1px rgba(99,102,241,.12), 0 4px 24px rgba(99,102,241,.08) !important; } [data-theme="zensuite"] .team-card h4 { font-family: 'DM Sans', 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #091123 !important; } [data-theme="zensuite"] .team-card .team-card-role { color: #5b6375 !important; } /* ── Welcome screen ── */ [data-theme="zensuite"] .welcome-screen { background: #f2f5fc !important; } [data-theme="zensuite"] .welcome-screen h2 { font-family: 'DM Sans', 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #091123 !important; } [data-theme="zensuite"] .welcome-screen p { color: #5b6375 !important; } /* ── Chat ── */ [data-theme="zensuite"] #chat-messages, [data-theme="zensuite"] .chat-messages { background: #f2f5fc !important; } [data-theme="zensuite"] .chat-input-area { background: #ffffff !important; border-top: 1px solid #e1e5eb !important; } [data-theme="zensuite"] .chat-input-wrapper { background: #ffffff !important; border: 1.5px solid #e1e5eb !important; border-radius: 12px !important; } [data-theme="zensuite"] .message.agent .message-bubble { background: #ffffff !important; border: 1px solid #e1e5eb !important; color: #091123 !important; } [data-theme="zensuite"] .message.user .message-bubble { background: #6366f1 !important; color: #ffffff !important; } /* ── Conversations ── */ [data-theme="zensuite"] .conv-item:hover { background: #eff1ff !important; border-radius: 10px !important; } /* ── Home views ── */ [data-theme="zensuite"] #home-view-a, [data-theme="zensuite"] #home-view-b, [data-theme="zensuite"] #home-view-c { background: #f2f5fc !important; } [data-theme="zensuite"] .home-c-kpi-v { font-family: 'DM Sans', 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #091123 !important; } [data-theme="zensuite"] .home-c-panel-title { font-family: 'DM Sans', 'Inter', sans-serif !important; font-weight: 700 !important; color: #091123 !important; } /* ── Bouton panneau démo ── */ .zb-cb[data-t="zensuite"].on { background: #030617 !important; color: #9b90ff !important; border-color: #6366f1 !important; }