:root { --bg: #0e1220; --bg-elev: #151a2b; --card: #182236; --card-2: #1e2740; --border: #262f47; --text: #eef1fb; --text-dim: #98a2ba; --accent: #7c6cf0; --accent-2: #9b8ff5; --accent-soft: rgba(124, 108, 240, 0.16); --success: #22c48d; --success-soft: rgba(34, 196, 141, 0.14); --danger: #f0596b; --danger-soft: rgba(240, 89, 107, 0.14); --warn: #f3ab3d; --warn-soft: rgba(243, 171, 61, 0.14); --radius: 14px; --radius-lg: 18px; --shadow: 0 20px 50px rgba(0, 0, 0, 0.35); --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.22); font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; } /* Thème clair, activé via data-theme="light" sur (voir le script de bascule dans admin.html + le petit snippet "applique le thème sauvegardé" présent en tête de chaque page pour éviter un flash au chargement). */ [data-theme="light"] { --bg: #f4f6fb; --bg-elev: #ffffff; --card: #ffffff; --card-2: #f7f8fc; --border: #e6e9f2; --text: #181c2c; --text-dim: #6b7390; --accent: #6856e8; --accent-2: #8a7cf3; --accent-soft: #efedff; --success: #18a777; --success-soft: #e7f8f2; --danger: #e65362; --danger-soft: #ffebee; --warn: #db9315; --warn-soft: #fff5df; --shadow: 0 18px 50px rgba(35, 45, 78, 0.1); --shadow-sm: 0 8px 24px rgba(35, 45, 78, 0.07); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; transition: background .25s ease, color .25s ease; } button { cursor: pointer; border: none; font-family: inherit; transition: filter .15s, background .15s, transform .15s, box-shadow .15s; } button:active { transform: scale(0.97); } /* ============ LOGIN ============ */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow); } .brand { display: flex; align-items: center; gap: 10px; } .brand-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .brand h1 { font-size: 1.2rem; margin: 0; letter-spacing: -.02em; } .subtitle { color: var(--text-dim); font-size: .88rem; margin: 8px 0 24px; } .error-box { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); padding: 10px 14px; border-radius: 10px; font-size: .86rem; margin-bottom: 16px; } .login-form { display: flex; flex-direction: column; gap: 16px; } .login-form label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--text-dim); } .login-form input, .dial-input { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); padding: 11px 13px; border-radius: 10px; font-size: .95rem; width: 100%; } .login-form input:focus, .dial-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .login-form button { background: var(--accent); color: #fff; padding: 12px; border-radius: 10px; font-weight: 650; font-size: .95rem; box-shadow: 0 10px 24px rgba(124, 108, 240, .28); } .login-form button:hover { filter: brightness(1.08); transform: translateY(-1px); } /* ============ SHELL FLEX ============ */ .flex-app { display: flex; height: 100vh; overflow: hidden; background: radial-gradient(circle at 8% 0%, var(--accent-soft), transparent 32%), radial-gradient(circle at 96% 100%, var(--success-soft), transparent 34%), var(--bg); } .rail { width: 78px; background: var(--bg-elev); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 6px; flex-shrink: 0; } .rail-logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: #fff; margin-bottom: 14px; box-shadow: 0 8px 20px rgba(124, 108, 240, .3); } .rail-btn { width: 62px; padding: 9px 0; border-radius: 11px; background: transparent; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; font-size: .65rem; position: relative; } .rail-btn .badge-count { position: absolute; top: 2px; right: 8px; min-width: 15px; padding: 1px 4px; font-size: .6rem; line-height: 1.4; } /* Badge de messages non lus: contraste fort (rouge, pas la couleur d'accent discrète utilisée pour les autres compteurs) + pulsation, pour qu'il attire vraiment l'oeil plutôt que de se fondre dans le rail latéral. */ #chat-badge { background: var(--danger); color: #fff; min-width: 18px; height: 18px; padding: 0 5px; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-elev), 0 2px 6px rgba(0,0,0,.35); animation: pulse 1.6s infinite; } .rail-btn #chat-badge { top: -2px; right: 4px; } .rail-btn:hover { background: var(--card); color: var(--text); } .rail-btn.active { background: var(--accent-soft); color: var(--accent); } .rail-icon { font-size: 1.15rem; line-height: 1; } .rail-spacer { flex: 1; } .flex-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .flex-topbar { height: 62px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; } .topbar-left { display: flex; align-items: center; gap: 9px; } .reg-label { font-size: .84rem; color: var(--text-dim); } .topbar-right { display: flex; align-items: center; gap: 16px; } /* .agent-identity est devenu un