/* ── Accessibilité (WCAG 2.1 AA) ───────────────────────────── */
/* Texte visible uniquement par les lecteurs d'écran */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus visible accessible (anneau visible au clavier) */
:focus-visible {
outline: 2px solid var(--accent-hover, #7b2cff);
outline-offset: 2px;
}
/* Respect des préférences utilisateur de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Reset & Variables ──────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
/* ── Charte alignée sur le site vitrine (~/Documents/izia_vitrine/src/index.css) ──
Décision Mehdi 2026-05-28 : identité de marque unifiée site ↔ app.
- VERT (#19f05e) = CTA primaire (boutons d'action) — comme le vitrine.
- VIOLET (#660ff2) = accent d'interface (focus, sélection, liens, badges).
Le vert reste réservé aux actions pour éviter la surcharge visuelle. */
--bg-primary: #0f0f1e;
--bg-secondary: #16162a;
--bg-tertiary: #2a2a40;
--bg-input: #16162a;
--section-bg: #43426b;
/* Surfaces « légèrement au-dessus du fond » — trois intensités. Elles étaient
écrites en dur en rgba(255,255,255,0.0X) à onze endroits : sur fond clair, du
blanc translucide sur du blanc ne produit rien. `--surface-elevated` existait
déjà ici, déclarée et jamais utilisée. */
--surface-elevated: rgba(255, 255, 255, 0.03);
--surface-hover: rgba(255, 255, 255, 0.06);
--surface-sunken: rgba(255, 255, 255, 0.08);
/* Surfaces translucides composées (dégradés) : elles portaient les valeurs de la
palette SOMBRE recopiées littéralement, donc restaient noires en mode clair —
panneau latéral, barre de saisie, cartes de suggestion. La translucidité fait
partie du rendu (elles se superposent au contenu), d'où des dégradés complets
en variables plutôt que des couleurs isolées. */
--composer-bg: linear-gradient(180deg, rgba(22, 22, 42, 0.96), rgba(18, 18, 32, 0.96));
--chat-bar-bg: linear-gradient(180deg, rgba(22, 22, 42, 0.84), rgba(22, 22, 42, 0.98));
--card-bg: linear-gradient(180deg, rgba(42, 42, 64, 0.92), rgba(26, 26, 42, 0.96));
--gate-bg: rgba(22, 22, 42, 0.82);
--avatar-bot-bg: linear-gradient(135deg, #1e1e2a, #2a2a3e);
/* Bleu d'information (badge multi-agent) : #93c5fd est lisible sur fond sombre
et tombe à 1,64:1 sur clair. Même patron que --accent-text / --green-text. */
--info-text: #93c5fd;
/* Surface d'une carte posée sur la page. L'élévation ne se code pas de la même
façon dans les deux thèmes : en sombre une surface surélevée S'ÉCLAIRCIT, en
clair elle BLANCHIT sur une page légèrement grise. Employer `--bg-tertiary`
des deux côtés donnait donc, en clair, des cartes plus FONCÉES que la page. */
--surface-card: #2a2a40;
/* Bulle du message utilisateur : une surface translucide, pas un aplat de marque,
et la MÊME variable des deux côtés — c'est celle du champ de recherche des
conversations, pris comme référence.
Le violet à 80 % avait été essayé d'abord : sur un fond déjà très sombre, 80 %
d'opacité d'un violet donne un violet à peine plus sombre (rgb(102,49,196) contre
rgb(124,58,237)) — un changement réel mais invisible à l'œil.
`--surface-hover` (6 %) plutôt que `--surface-elevated` (3 %) : mesuré, 3 % ne
détache la bulle du fond qu'à 1,06:1, contre 1,14:1 à 6 % — soit la même présence
qu'en clair (1,12:1). Une bulle qu'on ne distingue pas du fond fait perdre la
structure de la conversation. */
--user-bubble-bg: var(--surface-hover);
--user-bubble-text: #ffffff;
/* Survol d'un lien : `--green-hover` est fait pour un FOND de bouton et tombe à
2,05:1 en texte sur fond clair. Un lien qui devient illisible au survol est pire
qu'un lien terne — d'où cette variante, lisible des deux côtés. */
--green-text-hover: #15cc4f;
/* Alias historique employé 20 fois (bordures de séparation des connecteurs) et
JAMAIS déclaré : `var(--border-color)` ne résolvait rien, donc ces bordures ne
s'affichaient pas du tout — dans les deux thèmes. */
--border-color: #2a2a40;
--text-primary: #f0f2f5;
--text-secondary: #b0b0c5;
--text-muted: rgba(255, 255, 255, 0.77);
/* Accent d'interface = violet (focus, sélection, liens, badges) */
--accent: #660ff2;
--accent-hover: #7b2cff;
/* Violet lisible pour TEXTE/liens — WCAG AA ≥4.5 sur fonds sombres (#660ff2 échoue à 2.63) */
--accent-text: #a78bfa;
--accent-glow: rgba(102, 15, 242, 0.15);
--accent-soft: rgba(123, 44, 255, 0.10);
--purple: #660ff2;
--periwinkle: #6b7fd7;
--pale-cyan: #bcedf6;
/* CTA primaire = vert (boutons d'action principaux) */
--green: #19f05e;
--green-hover: #15cc4f;
/* Vert lisible pour TEXTE/liens — même patron que --accent-text : le vert de marque
est fait pour être un FOND (texte #000 dessus, 11,7:1), pas une couleur de texte.
Sur fond clair il tombe à 1,54:1. */
--green-text: #19f05e;
--success: #19f05e;
--success-hover: #15cc4f;
--warning: #fbbf24;
--error: #f87171;
--border: #2a2a40;
--border-hover: #3a3a5a;
/* Bordure translucide façon vitrine pour les surfaces glassmorphism (navbar) */
--border-translucent: rgba(255, 255, 255, 0.18);
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 16px;
--radius-full: 9999px;
--shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
--shadow-premium: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
--navy: #292857;
--navy-light: #393668;
--navbar-bg: rgba(22, 22, 42, 0.88);
--nav-height: 64px;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--sidebar-width: 280px;
/* Indique au NAVIGATEUR quels contrôles natifs dessiner : cases à cocher, boutons
radio, listes déroulantes, ascenseurs, sélecteurs de date. Sans cette
déclaration par thème, l'unique `` de
la page les gardait sombres même en mode clair — des cases à cocher noires sur
fond blanc. Une propriété CSS l'emporte sur la balise meta. */
color-scheme: dark;
}
/* Pictogrammes line-art (lucide) — remplacent les emojis pour un rendu pro */
.ic-svg {
width: 1.05em;
height: 1.05em;
vertical-align: -0.16em;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
display: inline-block;
flex-shrink: 0;
}
/* Pastille de statut colorée (remplace 🟢🔴🟡⚪⚫) */
.ic-dot {
width: 0.7em;
height: 0.7em;
vertical-align: 0.04em;
display: inline-block;
flex-shrink: 0;
}
html {
font-size: 15px;
scroll-behavior: smooth;
}
/* Les contrôles de formulaire n'héritent PAS de `font-family` : les navigateurs leur
imposent leur propre police d'interface. Sans cette règle, `body` a beau porter
Montserrat, chaque champ, bouton, liste déroulante et zone de texte s'affiche dans
la police système — visible à l'œil dès qu'un libellé jouxte un champ.
Seule la FAMILLE est héritée : reprendre `font: inherit` emporterait aussi la taille
et casserait des dimensionnements de contrôles. Les blocs de code gardent
`--font-mono`, leur règle étant plus spécifique. */
input,
button,
select,
textarea,
optgroup {
font-family: inherit;
}
body {
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
display: flex;
overflow: hidden;
}
body.sidebar-open {
overflow: hidden;
touch-action: none;
}
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
outline: 2px solid var(--accent-hover, #7b2cff); /* WCAG 1.4.11 : l'alpha 0.65 tombait à 2,03:1 (seuil 3:1) */
outline-offset: 2px;
}
textarea:focus-visible {
outline: none;
}
/* ══════════════════════════════════════════════════════════
SIDEBAR
══════════════════════════════════════════════════════════ */
.sidebar {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
/* Les deux teintes étaient les valeurs SOMBRES recopiées littéralement
(#16162a et #0f0f1e) : le panneau restait noir en mode clair. */
background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
transition: transform var(--transition);
z-index: 100;
}
.sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(3, 6, 18, 0.58);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition);
z-index: 90;
}
.sidebar-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.sidebar-header {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 2px;
}
.logo-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.logo-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-sm);
}
.logo-text {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.logo-sub {
font-size: 0.68rem;
color: var(--text-muted);
}
/* ── Navigation principale ──────────────────────────────── */
.sidebar-nav {
padding: 10px 10px 0;
flex-shrink: 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
font-size: 0.84rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
text-align: left;
margin-bottom: 2px;
}
.nav-item:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
transform: translateX(2px);
}
/* Page active mise en avant par un simple contour (choix Mehdi) */
.nav-item.active {
background: transparent;
color: var(--accent-text);
border: 1px solid var(--accent-hover);
}
.nav-item.active:hover {
background: var(--accent-soft);
}
.nav-item .nav-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.nav-item .nav-icon svg {
width: 16px !important;
height: 16px !important;
max-width: 16px;
max-height: 16px;
stroke: currentColor;
transition: stroke var(--transition);
flex-shrink: 0;
}
.nav-item.active .nav-icon svg {
stroke: #cbb2ff;
}
.nav-badge {
margin-left: auto;
font-size: 0.68rem;
background: var(--green-hover);
color: #2a2a40;
padding: 1px 6px;
border-radius: 10px;
font-weight: 600;
}
/* Compteur de fichiers indexés = information, pas une notification :
pas de pastille colorée (évite la confusion avec un badge de notif) */
#files-badge {
background: transparent;
color: var(--text-muted);
padding: 0;
font-size: 0.72rem;
}
/* ── Séparateur ─────────────────────────────────────────── */
.sidebar-sep {
height: 1px;
background: var(--border);
margin: 10px 10px;
flex-shrink: 0;
}
/* ── Login Gate (plein écran quand non connecté) ───────── */
.login-gate {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-primary);
overflow: hidden;
}
/* Animated orbs background */
.login-gate::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 15% 25%, rgba(102, 15, 242, 0.22) 0%, transparent 55%),
radial-gradient(ellipse 55% 65% at 85% 75%, rgba(123, 44, 255, 0.16) 0%, transparent 55%),
radial-gradient(ellipse 45% 45% at 55% 5%, rgba(168, 100, 255, 0.1) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 90% 20%, rgba(80, 200, 255, 0.06) 0%, transparent 55%);
animation: loginOrbShift 10s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes loginOrbShift {
0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
50% { opacity: 1; }
100% { transform: scale(1.08) rotate(3deg); opacity: 0.85; }
}
/* Fine noise texture overlay */
.login-gate::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
opacity: 0.4;
}
.login-gate.hidden,
html.noryzia-auth .login-gate {
display: none;
}
.login-gate-box {
position: relative;
z-index: 1;
width: 400px;
max-width: 92vw;
background: var(--gate-bg);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
border: 1px solid var(--border);
border-radius: 20px;
padding: 40px 36px 32px;
box-shadow:
0 0 0 1px rgba(102, 15, 242, 0.14),
0 32px 80px -16px rgba(0, 0, 0, 0.65),
0 8px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
text-align: center;
}
.login-gate-box .logo-lg {
height: 48px;
margin: 0 auto 20px;
display: block;
}
.login-gate-box h2 {
margin-bottom: 8px;
font-size: 1.3rem;
color: var(--text-primary);
}
.login-gate-box p {
margin-bottom: 20px;
font-size: 0.88rem;
color: var(--text-secondary);
}
.login-gate-box .modal-field {
width: 100%;
margin-bottom: 10px;
}
.login-gate-box .btn-primary {
width: 100%;
margin-top: 6px;
}
.login-gate-box .gate-switch {
margin-top: 14px;
font-size: 0.82rem;
color: var(--text-muted);
}
.login-gate-box .gate-switch a {
color: var(--accent-text);
cursor: pointer;
text-decoration: underline;
}
.login-gate-box .gate-error {
color: var(--error);
font-size: 0.82rem;
margin-bottom: 10px;
min-height: 1.2em;
}
.gate-forgot-link {
display: block;
text-align: right;
font-size: 0.78rem;
color: var(--text-muted);
cursor: pointer;
margin: -4px 0 8px;
text-decoration: underline;
}
.gate-forgot-link:hover { color: var(--accent-text); }
/* Lien placé SOUS le bouton : la marge négative de .gate-forgot-link (pensée pour un lien
au-dessus du bouton) le faisait chevaucher « Se connecter ». */
.gate-forgot-link.gate-lien-sous-bouton {
text-align: center;
margin: 12px 0 0;
}
.gate-sso { margin-top: 16px; }
.gate-sso[hidden], .gate-sso-btn[hidden] { display: none; }
.gate-separateur {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-size: 0.8rem;
color: var(--text-muted);
}
.gate-separateur::before,
.gate-separateur::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
.login-gate-box .gate-sso-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.login-gate-box .gate-sso-btn + .gate-sso-btn { margin-top: 8px; }
.gate-success {
color: var(--success);
font-size: 0.82rem;
margin-bottom: 10px;
min-height: 1.2em;
}
.verify-code-input {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.5rem;
text-align: center;
width: 100%;
padding: 14px 8px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--accent-text);
}
.verify-code-input:focus { border-color: var(--accent); outline: none; }
/* ── Auth / User bar ────────────────────────────────────── */
.auth-bar {
padding: 10px;
display: flex;
gap: 6px;
flex-shrink: 0;
}
.auth-bar .btn-auth {
flex: 1;
padding: 7px 0;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 0.78rem;
cursor: pointer;
transition: all var(--transition);
}
.auth-bar .btn-auth:hover {
border-color: var(--accent);
}
.auth-bar .btn-auth.primary {
background: var(--green);
border-color: var(--green-text);
color: #000;
font-weight: 600;
}
.auth-bar .btn-auth.primary:hover {
background: var(--green-hover);
border-color: var(--green-hover);
}
.user-bar {
padding: 8px 10px;
position: relative;
flex-shrink: 0;
}
.user-menu-trigger {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
background: none;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
padding: 5px 7px;
color: var(--text-primary);
transition: background var(--transition), border-color var(--transition);
font-size: 0.82rem;
text-align: left;
}
.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
background: var(--bg-hover, rgba(255,255,255,0.06));
border-color: var(--border);
}
.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
/* Pastille de profil en vert de marque (demande Mehdi, 2026-09-09). L'initiale
passe du blanc au gris de charte : sur ce vert, le blanc tombe à 2,05:1 —
illisible — quand `#2a2a40` tient 6,8:1. C'est la même teinte que le texte
courant et que le `fill` de `logo-noir.svg`. */
background: var(--green-hover);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
color: white;
font-weight: 700;
flex-shrink: 0;
}
.user-menu-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.user-name {
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-status {
font-size: 0.65rem;
color: var(--text-muted);
}
/* P5 — Badge plan tarifaire */
.plan-badge {
display: inline-block;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 4px;
margin-left: 4px;
letter-spacing: 0.05em;
vertical-align: middle;
}
.plan-badge--free { background:#3f3f46; color:#e2e8f0; }
.plan-badge--essentiel { background:#0ea5e9; color:#fff; }
.plan-badge--business { background:#7b2cff; color:#fff; }
.plan-badge--pro { background:#f59e0b; color:#1f1700; }
.plan-badge--citadelle { background:linear-gradient(135deg,#facc15,#f43f5e); color:#fff; }
/* P5 — Bloc quota tokens dans le dropdown user */
.user-quota-block {
padding: 10px 12px;
font-size: 0.7rem;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
.user-quota-row {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.user-quota-row strong {
color: var(--text-primary);
font-weight: 600;
}
.user-quota-bar {
height: 4px;
background: var(--surface-sunken);
border-radius: 2px;
overflow: hidden;
margin-top: 2px;
}
.user-quota-bar > span {
display: block;
height: 100%;
background: var(--accent, #7b2cff);
transition: width 0.3s ease, background 0.3s ease;
}
.user-quota-bar > span.warn { background: #f59e0b; }
.user-quota-bar > span.danger { background: #ef4444; }
.files-capacity {
margin: 0 0 14px;
padding: 10px 12px;
background: var(--surface-2, rgba(127,127,127,0.06));
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
font-size: 0.78rem;
color: var(--text-muted);
}
.files-capacity-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px 10px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.files-capacity-row strong { color: var(--text-primary); font-weight: 600; margin-left: auto; }
.files-capacity-row .storage-details-toggle { flex-shrink: 0; }
.files-capacity .user-quota-bar { height: 6px; background: var(--border); }
/* ── Panneau de répartition du stockage (Phase 1) ─────────────── */
.btn-link.storage-details-toggle {
background: none;
border: none;
color: var(--accent-text, #a78bfa);
font-size: 0.74rem;
cursor: pointer;
padding: 0 0 0 12px;
text-decoration: underline;
}
.btn-link.storage-details-toggle:hover { color: var(--accent-hover, #7b2cff); }
.btn-link.storage-details-toggle:focus-visible { outline: 2px solid var(--accent-hover, #7b2cff); outline-offset: 2px; border-radius: 3px; }
.storage-panel {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
/* Borne la hauteur : le panneau scrolle en interne au lieu d'écraser
la liste de fichiers. Plafond absolu pour laisser de la place sur
les grands écrans aussi. */
max-height: min(38vh, 360px);
overflow-y: auto;
}
.storage-panel-loading { color: var(--text-muted); font-size: 0.76rem; padding: 6px 0; }
.storage-panel-grid {
display: flex;
gap: 18px;
align-items: center;
flex-wrap: wrap;
}
.storage-donut-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.storage-donut {
width: 108px; height: 108px; border-radius: 50%;
background: var(--border);
/* le conic-gradient est injecté inline en JS */
-webkit-mask: radial-gradient(circle 33px at center, transparent 98%, #000 100%);
mask: radial-gradient(circle 33px at center, transparent 98%, #000 100%);
}
.storage-donut-center {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
pointer-events: none; text-align: center;
}
.storage-donut-center strong { color: var(--text-primary); font-size: 0.82rem; }
.storage-donut-center span { color: var(--text-muted); font-size: 0.62rem; }
.storage-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; }
.storage-legend li {
display: flex; align-items: center; gap: 8px;
font-size: 0.74rem; padding: 3px 0;
}
.storage-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.storage-legend .lg-name { color: var(--text-primary); text-transform: capitalize; }
.storage-legend .lg-size { margin-left: auto; color: var(--text-muted); }
.storage-index-line {
margin-top: 10px; padding: 7px 10px;
background: var(--accent-soft, rgba(123,44,255,0.10));
border-radius: 6px; font-size: 0.73rem; color: var(--text-muted);
}
.storage-index-line strong { color: var(--text-primary); }
.storage-age { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.storage-age .age-chip {
flex: 1; min-width: 88px;
background: var(--surface-2, rgba(127,127,127,0.06));
border: 1px solid var(--border); border-radius: 6px;
padding: 6px 8px; font-size: 0.7rem; color: var(--text-muted);
}
.storage-age .age-chip strong { display: block; color: var(--text-primary); font-size: 0.82rem; }
.storage-top { margin-top: 12px; }
.storage-top-title { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em; }
.storage-top-list { list-style: none; margin: 0; padding: 0; }
.storage-top-list li {
display: flex; align-items: center; gap: 8px;
font-size: 0.74rem; padding: 3px 0; color: var(--text-primary);
}
.storage-top-list .tf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-top-list .tf-size { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }
.storage-cleanup { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.storage-cleanup-result { margin-top: 10px; font-size: 0.74rem; color: var(--text-muted); }
.cleanup-summary { color: var(--text-primary); margin-bottom: 6px; }
.cleanup-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin: 4px 0; flex-wrap: wrap;
}
.cleanup-list { list-style: none; margin: 4px 0 8px; padding: 0; }
.cleanup-list li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.cleanup-note { color: var(--text-muted); margin: 3px 0; }
@media (max-width: 640px) {
.storage-panel-grid { justify-content: center; }
.storage-legend { min-width: 100%; }
/* Écran court : panneau plus compact pour préserver la liste. */
.storage-panel { max-height: 46vh; }
}
.user-menu-chevron {
font-size: 0.65rem;
color: var(--text-muted);
transition: transform 0.15s ease;
flex-shrink: 0;
}
.user-menu-trigger[aria-expanded="true"] .user-menu-chevron {
transform: rotate(180deg);
}
.user-dropdown {
position: absolute;
top: calc(100% - 2px);
left: 10px;
right: 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
z-index: 500;
overflow: hidden;
padding: 4px 0;
}
.user-dropdown[hidden] { display: none; }
.user-dropdown-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 14px;
background: none;
border: none;
color: var(--text-primary);
font-size: 0.82rem;
cursor: pointer;
text-decoration: none;
transition: background var(--transition);
text-align: left;
box-sizing: border-box;
}
.user-dropdown-item svg {
flex-shrink: 0;
opacity: 0.7;
}
.user-dropdown-item:hover svg { opacity: 1; }
.user-dropdown-item:hover {
background: var(--bg-hover, rgba(255,255,255,0.06));
}
.user-dropdown-item--danger { color: var(--error, #e05252); }
.user-dropdown-item--accent { color: var(--accent-text); }
.user-dropdown-sep {
border: none;
border-top: 1px solid var(--border);
margin: 4px 0;
}
/* ── Sidebar chat (conversations) ───────────────────────── */
.sidebar-chat-section {
flex: 1;
display: flex;
flex-direction: column;
padding: 8px 10px;
min-height: 0;
}
/* Le label, le bouton "Nouvelle discussion" et la recherche restent figés ;
seule la liste des conversations défile. */
.sidebar-chat-section > .section-label,
.sidebar-chat-section > .btn-new-chat,
.sidebar-chat-section > .conv-search-wrap {
flex-shrink: 0;
}
#conv-list {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.section-label {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
font-weight: 600;
padding: 4px 4px 8px;
}
.conv-search-wrap {
position: relative;
margin-bottom: 8px;
}
.conv-search-input {
width: 100%;
padding: 7px 26px 7px 30px;
background: var(--surface-hover);
border: 1px solid transparent;
border-radius: 8px;
color: var(--text-primary);
font-size: 0.78rem;
outline: none;
box-sizing: border-box;
transition: border-color var(--transition), background var(--transition);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 9px center;
}
.conv-search-input:hover {
background-color: var(--surface-sunken);
border-color: var(--border-hover);
}
.conv-search-input:focus {
border-color: var(--accent);
background-color: rgba(102, 15, 242, 0.06);
}
.conv-search-input::placeholder {
color: var(--text-muted);
}
.conv-search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
.conv-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 0.7rem;
padding: 2px 4px;
line-height: 1;
display: none;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color var(--transition);
}
.conv-search-clear:hover {
color: var(--text-primary);
}
.search-highlight {
background: rgba(102, 15, 242, 0.25);
color: var(--text-primary);
border-radius: 2px;
padding: 0 1px;
font-style: normal;
}
.conv-empty-search {
font-size: 0.75rem;
color: var(--text-muted);
text-align: center;
padding: 16px 8px;
}
.btn-new-chat {
width: 100%;
padding: 10px 12px;
background: var(--green-hover);
color: #2a2a40;
border: none;
border-radius: var(--radius-full);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: all var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-bottom: 10px;
box-shadow: 0 10px 24px rgba(25, 240, 94, 0.22);
}
.btn-new-chat:hover {
background: var(--green);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(25, 240, 94, 0.3);
}
.conv-item {
padding: 9px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
border: 1px solid transparent;
transition: all var(--transition);
margin-bottom: 4px;
position: relative;
}
.conv-item:hover {
background: var(--surface-elevated);
border-color: var(--border);
transform: translateY(-1px);
}
.conv-item.active {
background: linear-gradient(90deg, rgba(102, 15, 242, 0.12), rgba(102, 15, 242, 0.04));
border-color: rgba(108, 99, 255, 0.24);
box-shadow: inset 2px 0 0 var(--accent);
}
.conv-title {
font-size: 0.8rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 22px;
}
.conv-meta {
font-size: 0.68rem;
color: var(--text-muted);
margin-top: 2px;
}
.conv-del {
position: absolute;
top: 6px;
right: 6px;
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 0.78rem;
padding: 2px 4px;
border-radius: 4px;
opacity: 0;
transition: opacity var(--transition), color var(--transition);
}
.conv-item:hover .conv-del,
.conv-item:hover .conv-share {
opacity: 1;
}
.conv-del:hover {
color: var(--error);
}
.conv-share {
position: absolute;
top: 6px;
right: 28px;
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 0.82rem;
padding: 2px 4px;
border-radius: 4px;
opacity: 0;
transition: opacity var(--transition), color var(--transition);
}
.conv-share:hover {
color: var(--accent-text);
}
/* ── Sidebar status (mini) ──────────────────────────────── */
.sidebar-status {
padding: 12px 10px 12px;
flex-shrink: 0;
border-top: 1px solid var(--border);
}
.sidebar-version {
/* La séparation border-top a été retirée avec les status-rows :
la version est maintenant seule dans .sidebar-status, pas besoin
de border-top intermédiaire (le container porte déjà sa propre
border-top en haut). */
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.66rem;
color: var(--text-muted);
opacity: 0.75;
user-select: text;
cursor: help;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-version:hover {
opacity: 1;
color: var(--text-secondary);
}
.sidebar-controls {
padding: 0 10px 10px;
flex-shrink: 0;
}
.sidebar-control-card {
padding: 10px;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.sidebar-control-label {
display: block;
font-size: 0.72rem;
color: var(--text-secondary);
line-height: 1.45;
margin-bottom: 8px;
}
.sidebar-select {
width: 100%;
max-width: none;
border: 1px solid var(--border);
}
.sidebar-select:focus {
border-color: var(--accent);
color: var(--text-primary);
}
.status-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: var(--text-muted);
margin-bottom: 4px;
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
animation: pulse-dot 2s ease-in-out infinite;
}
.status-dot.ok {
background: var(--success);
}
.status-dot.warn {
background: var(--warning);
animation: none;
}
.status-dot.err {
background: var(--error);
animation: none;
}
@keyframes pulse-dot {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
/* ══════════════════════════════════════════════════════════
MAIN CONTENT — PAGES
══════════════════════════════════════════════════════════ */
.main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.page {
display: none;
flex: 1;
flex-direction: column;
overflow: hidden;
}
.page.active {
display: flex;
}
/* ── Page header commun ─────────────────────────────────── */
.page-header {
padding: 10px 28px;
min-height: var(--nav-height);
border-bottom: 1px solid var(--border-translucent);
flex-shrink: 0;
background: var(--navbar-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.page-title {
font-size: 1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.page-subtitle {
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 2px;
}
.page-header-meta {
min-width: 0;
}
/* Header de la page chat : épuré — uniquement les actions (Exporter /
Réinitialiser), alignées à droite (plus de titre ni badge modèle). */
.page-header-chat {
justify-content: flex-end;
}
/* Logo de marque dans le header — affiché en mobile à la place du titre texte */
.page-title-logo {
display: none;
height: 30px;
width: auto;
}
.page-header-actions {
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
#chat-model-badge {
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════
PAGE : CHAT
══════════════════════════════════════════════════════════ */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 16px;
background:
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(102, 15, 242, 0.09) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 90% 80%, rgba(123, 44, 255, 0.05) 0%, transparent 60%),
var(--bg-primary);
}
/* Bienvenue */
.welcome {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
padding: 40px;
gap: 14px;
color: var(--text-muted);
}
.welcome-logo-wrap {
position: relative;
width: 72px;
height: 72px;
margin-bottom: 4px;
}
.welcome-logo {
/* Le pictogramme est un ROND blanc sur transparence. Le cadre carré venait de
l'habillage : une `box-shadow` épouse la BOÎTE, pas la silhouette — appliquée
à un carré de 72×72 arrondi à 18px, elle dessinait un carré arrondi derrière
un logo rond. `border-radius` et `box-shadow` sont donc retirés tous les deux ;
le halo `.welcome-logo-glow`, lui, est circulaire et suit la forme. */
width: 72px;
height: 72px;
position: relative;
z-index: 1;
}
.welcome-logo-glow {
position: absolute;
inset: -8px;
background: radial-gradient(circle, rgba(102, 15, 242, 0.28) 0%, transparent 70%);
border-radius: 50%;
animation: logoGlow 3s ease-in-out infinite alternate;
z-index: 0;
}
@keyframes logoGlow {
from { opacity: 0.6; transform: scale(0.95); }
to { opacity: 1; transform: scale(1.05); }
}
.welcome h2 {
font-size: 1.35rem;
font-weight: 700;
background: linear-gradient(135deg, var(--text-primary) 0%, #cbb2ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.welcome p {
font-size: 0.85rem;
max-width: 400px;
line-height: 1.65;
color: var(--text-secondary);
}
.welcome-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-top: -2px;
}
.welcome-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(102, 15, 242, 0.1);
border: 1px solid rgba(102, 15, 242, 0.22);
border-radius: 20px;
font-size: 0.72rem;
color: var(--accent-text);
font-weight: 500;
}
.welcome-chip svg {
opacity: 0.8;
}
/* Messages */
/* Colonne de conversation centrée (style ChatGPT/Gemini) : question ET réponse
vivent dans une même colonne centrée ; la question s'aligne à droite de la
colonne (row-reverse), la réponse occupe toute la largeur de la colonne. */
.message {
display: flex;
gap: 12px;
width: 100%;
max-width: 820px;
align-self: center;
animation: fadeInUp 0.2s ease;
}
.message.user {
flex-direction: row-reverse;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.msg-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
}
.message.user .msg-avatar {
/* Pastille de profil en vert de marque (demande Mehdi, 2026-09-09). L'initiale
passe du blanc au gris de charte : sur ce vert, le blanc tombe à 2,05:1 —
illisible — quand `#2a2a40` tient 6,8:1. C'est la même teinte que le texte
courant et que le `fill` de `logo-noir.svg`. */
background: var(--green-hover);
color: white;
}
.message.assistant .msg-avatar {
background: var(--avatar-bot-bg);
border: 1px solid var(--border);
font-size: 0.9rem;
}
.msg-bubble {
padding: 13px 16px;
border-radius: var(--radius);
font-size: 0.875rem;
line-height: 1.68;
max-width: 680px;
box-shadow: none;
/* Containment horizontal : une chaîne insécable (adresse email, URL,
token) ne doit jamais élargir la bulle au-delà de l'écran. Critique
sur mobile et pour les réponses EMAIL_SEARCH (From/sujets longs). */
min-width: 0;
overflow-wrap: anywhere;
}
/* Le wrapper flex (frère de .msg-avatar) doit pouvoir rétrécir, sinon
overflow-x:auto sur /
n'engage pas et la bulle déborde. */
.message > div:not(.msg-avatar) {
min-width: 0;
max-width: 100%;
}
/* Tableaux markdown : scroll horizontal interne au lieu de déborder. */
.msg-bubble table {
display: block;
max-width: 100%;
overflow-x: auto;
}
.message.user .msg-bubble {
background: var(--user-bubble-bg);
color: var(--user-bubble-text);
border-bottom-right-radius: 4px;
position: relative;
/* Sans ombre (choix Mehdi, 2026-09-09) : la bulle se distingue par son fond, pas
par un relief. L'ombre violette dessinait par ailleurs un halo carré autour
d'une bulle arrondie, très visible sur fond clair. */
box-shadow: none;
/* Préserve newlines + espaces multiples saisis par l'utilisateur sans
injecter de
côté JS. pre-wrap respecte aussi le word-wrap, donc
les longues lignes se cassent normalement. Ciblé user uniquement —
côté assistant, le rendu HTML markdown gère déjà les paragraphes. */
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* Boutons actions message utilisateur — dans le msg-meta, pas en absolu */
.btn-copy-prompt,
.btn-edit-msg {
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
opacity: 0;
transition: opacity 0.15s, color 0.15s;
padding: 3px 4px;
border-radius: 4px;
display: flex;
align-items: center;
flex-shrink: 0;
}
.message.user:hover .btn-copy-prompt,
.message.user:hover .btn-edit-msg {
opacity: 0.6;
}
.btn-copy-prompt:hover,
.btn-edit-msg:hover {
opacity: 1 !important;
color: var(--accent-text);
}
.msg-meta-user {
justify-content: flex-end;
flex-wrap: nowrap;
}
.btn-copy-prompt svg,
.btn-edit-msg svg,
.btn-copy-code svg {
width: 13px;
height: 13px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.btn-retry-msg {
background: none;
border: 1px solid var(--border);
border-radius: 8px;
padding: 4px 10px;
cursor: pointer;
font-size: 0.75rem;
color: var(--text-muted);
transition: all var(--transition);
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
}
.btn-retry-msg:hover {
border-color: var(--accent);
color: var(--accent-text);
background: rgba(108, 99, 255, 0.08);
}
.btn-retry-msg svg {
width: 13px;
height: 13px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Réponse sans bulle (style ChatGPT/Gemini) : pleine largeur de lecture,
pas de fond/bordure/ombre. La question utilisateur garde sa bulle. */
.message.assistant .msg-bubble {
background: none;
color: var(--text-primary);
border: none;
box-shadow: none;
padding: 2px 0 0;
max-width: none;
}
.msg-bubble code {
font-family: var(--font-mono);
background: rgba(0, 0, 0, 0.3);
padding: 1px 5px;
border-radius: 4px;
font-size: 0.82em;
}
/* Liens dans les réponses LLM — visibles, accessibles, sans casser le contraste */
.msg-bubble a {
/* Vert de marque (demande Mehdi). `--green-text` et non `--green-hover` : ce
dernier vaut #13d151 en clair, soit 2,05:1 sur fond blanc — illisible. Même
couleur de marque, déclinée pour rester lisible sur les deux fonds (5,46:1 en
clair, 12,34:1 en sombre), sur le patron déjà en place pour `--accent-text`. */
color: var(--green-text);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
word-break: break-word;
}
.msg-bubble a:hover { color: var(--green-text-hover); text-decoration-thickness: 2px; }
.msg-bubble a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* Côté user (bulle accent foncée) — garder le lien lisible sur fond coloré */
.message.user .msg-bubble a { color: var(--user-bubble-text); text-decoration-color: currentColor; }
.message.user .msg-bubble a:hover { text-decoration-thickness: 2px; }
/* Wrapper positionnel pour les blocs de code (header + pre) */
.code-block-wrap {
position: relative;
margin: 12px 0;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
font-size: 0.8em;
}
.code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px;
background: #161620;
border-bottom: 1px solid var(--border);
}
.code-lang-label {
font-family: var(--font-mono);
font-size: 0.75em;
color: var(--text-muted);
text-transform: lowercase;
}
.btn-copy-code {
background: none;
border: none;
cursor: pointer;
font-size: 0.75em;
color: var(--text-muted);
padding: 2px 6px;
border-radius: 4px;
transition: color var(--transition);
}
.btn-copy-code:hover {
color: var(--accent-text);
}
.code-block-wrap pre {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: 14px 16px;
font-size: 0.82rem;
line-height: 1.6;
}
.code-block-wrap pre code {
white-space: pre;
word-break: normal;
overflow-wrap: normal;
background: none;
padding: 0;
font-family: var(--font-mono, 'Fira Code', monospace);
}
.msg-bubble pre {
background: #0d0d14;
margin: 0;
overflow-x: auto;
max-width: 100%;
line-height: 1.5;
}
.msg-bubble pre code.hljs {
background: #0d0d14 !important;
padding: 12px 14px !important;
font-family: var(--font-mono) !important;
font-size: 1em !important;
border-radius: 0 !important;
}
.msg-bubble pre code {
background: transparent;
padding: 0;
white-space: pre;
word-break: normal;
overflow-wrap: normal;
}
/* Curseur clignotant pendant le streaming */
.streaming-bubble::after {
content: '▋';
display: inline-block;
animation: blink-cursor 0.8s step-end infinite;
color: var(--accent-text);
margin-left: 1px;
}
@keyframes blink-cursor {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* Disclaimer LLM libre */
.msg-bubble .llm-disclaimer {
display: block;
margin-top: 10px;
padding: 8px 10px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.25);
border-radius: var(--radius-sm);
font-size: 0.76rem;
color: var(--warning);
line-height: 1.5;
}
/* Metadata message */
.msg-meta {
font-size: 0.7rem;
color: var(--text-muted);
margin-top: 5px;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.msg-badge {
padding: 2px 7px;
border-radius: 10px;
font-size: 0.68rem;
font-weight: 600;
background: var(--bg-tertiary);
border: 1px solid var(--border);
}
.msg-badge.factual {
background: rgba(52, 211, 153, 0.1);
color: var(--success);
border-color: rgba(52, 211, 153, 0.2);
}
/* Badge périmètre fichiers (réponse limitée à N fichiers) */
.msg-badge.scope-badge {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
.msg-badge.general {
background: rgba(108, 99, 255, 0.1);
color: var(--accent-text);
border-color: rgba(108, 99, 255, 0.2);
}
.msg-badge.code_gen {
background: rgba(251, 191, 36, 0.1);
color: var(--warning);
border-color: rgba(251, 191, 36, 0.2);
}
.msg-badge.translation {
background: rgba(129, 140, 248, 0.1);
color: var(--accent-text);
border-color: rgba(129, 140, 248, 0.2);
}
.msg-badge.model {
background: rgba(108, 99, 255, 0.08);
color: var(--text-secondary);
border-color: rgba(108, 99, 255, 0.15);
font-family: var(--font-mono);
font-size: 0.66rem;
}
.msg-badge.search-engine {
background: rgba(251, 146, 60, 0.1);
color: var(--warning);
border-color: rgba(251, 146, 60, 0.2);
font-family: var(--font-mono);
font-size: 0.66rem;
}
.msg-badge.multi_agent {
background: rgba(59, 130, 246, 0.12);
color: var(--info-text);
border-color: rgba(59, 130, 246, 0.24);
}
/* Multi-agent : sans bulle, on indique via un accent latéral (pas de halo flottant). */
.message.assistant.multi-agent-active .msg-bubble {
border-left: 2px solid rgba(59, 130, 246, 0.45);
padding-left: 12px;
box-shadow: none;
}
.multi-agent-banner {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 12px;
padding: 8px 10px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(102, 15, 242, 0.14));
border: 1px solid rgba(96, 165, 250, 0.28);
color: var(--info-text);
font-size: 0.76rem;
font-weight: 700;
}
.multi-agent-banner .multi-agent-steps {
padding: 2px 7px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.35);
border: 1px solid rgba(147, 197, 253, 0.22);
font-size: 0.68rem;
font-weight: 700;
color: var(--info-text);
}
.msg-time {
color: var(--text-muted);
font-size: 0.68rem;
margin-left: auto;
}
/* Sources */
.msg-sources {
margin-top: 10px;
overflow: hidden;
max-width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
}
/* La liste des sources occupe sa propre ligne (sous le toggle + l'action scope) */
.msg-sources .sources-list {
flex-basis: 100%;
}
/* Action « Limiter à ces sources » (à côté du toggle sources) */
.sources-scope-btn {
font-size: 0.72rem;
color: var(--accent);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: inline-flex;
align-items: center;
gap: 4px;
transition: opacity var(--transition);
}
.sources-scope-btn:hover {
text-decoration: underline;
}
.sources-toggle {
font-size: 0.72rem;
color: var(--text-muted);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
transition: color var(--transition);
}
.sources-toggle:hover {
color: var(--accent-text);
}
.sources-list {
display: none;
margin-top: 6px;
max-width: 100%;
overflow: hidden;
}
.sources-list.open {
display: block;
}
.source-item {
padding: 6px 10px;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 4px;
font-size: 0.72rem;
color: var(--text-muted);
overflow: hidden;
word-break: break-word;
overflow-wrap: break-word;
}
.source-item .source-name {
color: var(--accent-text);
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}
.source-page {
background: var(--accent);
color: var(--bg-primary);
font-size: 0.65rem;
padding: 1px 6px;
border-radius: 8px;
font-weight: 600;
white-space: nowrap;
}
/* Date du contenu d'un document cité. Discrète : elle situe la source sans rivaliser
avec son nom, mais reste lisible — c'est elle qui dit « cette réponse vient d'un
document de mai ». */
.source-date {
font-size: 0.72rem;
font-weight: 500;
color: var(--text-muted, #7a7a85);
white-space: nowrap;
margin-left: 0.25rem;
}
.sources-extra {
font-size: 0.65rem;
color: var(--text-muted);
font-weight: 400;
margin-left: 4px;
}
.citation-ref-muted {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 500;
}
.source-snippet {
margin-top: 5px;
font-size: 0.72rem;
line-height: 1.55;
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
mark.source-highlight {
background: rgba(108, 99, 255, 0.18);
color: var(--accent-text);
border-radius: 2px;
padding: 0 2px;
font-weight: 600;
}
/* Citation links [N] dans le corps de la réponse */
a.citation-link {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
color: var(--accent-text);
background: rgba(108, 99, 255, 0.12);
border: 1px solid rgba(108, 99, 255, 0.3);
border-radius: 4px;
padding: 0 4px;
margin: 0 1px;
text-decoration: none;
vertical-align: super;
line-height: 1;
transition: background 0.15s, color 0.15s;
cursor: pointer;
}
a.citation-link:hover {
background: rgba(108, 99, 255, 0.28);
text-decoration: none;
}
/* Toggle "Détails" OFF : masque les pastilles [N] inline, le panneau
"▶ X sources", la durée, le badge modèle, le type de requête (routeur)
et la confiance. Préférence stockée en localStorage et appliquée via
body[data-citations="off"]. CSS pur — pas de re-render. Reste visible :
l'heure du message. */
body[data-citations="off"] a.citation-link,
body[data-citations="off"] .msg-sources,
body[data-citations="off"] .msg-duration,
body[data-citations="off"] .msg-badge.model,
body[data-citations="off"] .query-type-badge,
body[data-citations="off"] .confidence-badge {
display: none;
}
/* Source card mise en évidence lors du clic sur une citation */
.source-item-highlighted {
background: rgba(108, 99, 255, 0.15) !important;
border-color: var(--accent) !important;
transition: background 0.2s, border-color 0.2s;
}
/* Confidence badge */
.confidence-badge {
position: relative;
cursor: default;
padding: 2px 7px;
border-radius: 10px;
font-size: 0.68rem;
font-weight: 600;
border: 1px solid var(--border);
}
.confidence-badge.low {
background: rgba(239, 68, 68, 0.1);
color: var(--error);
border-color: rgba(239, 68, 68, 0.25);
}
.confidence-badge.medium {
background: rgba(251, 191, 36, 0.1);
color: var(--warning);
border-color: rgba(251, 191, 36, 0.25);
}
.confidence-badge.high {
background: rgba(52, 211, 153, 0.1);
color: var(--success);
border-color: rgba(52, 211, 153, 0.25);
}
/* « Calculé » — pas un quatrième niveau de confiance, mais une autre NATURE de
réponse : les chiffres sont lus dans le fichier, pas rédigés. Repris du violet
d'accent plutôt que du vert de réussite, pour qu'il ne se lise pas comme un
« encore mieux que Élevé » sur la même échelle. */
.confidence-badge.computed {
background: var(--accent-soft);
color: var(--accent-text);
border-color: var(--accent-glow);
font-weight: 700;
}
.confidence-badge .conf-tooltip {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 0.68rem;
white-space: nowrap;
color: var(--text-primary);
font-weight: 400;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 10;
box-shadow: var(--shadow-md);
}
.confidence-badge:hover .conf-tooltip {
opacity: 1;
}
/* Feedback 👍/👎 */
.msg-feedback {
display: flex;
gap: 6px;
margin-top: 6px;
align-items: center;
}
/* Champ « qu'est-ce qui n'allait pas ? », affiché après un avis négatif.
Discret par construction : il apparaît sous la réponse concernée, sans modale
ni superposition — on demande une précision, on n'interrompt pas la personne. */
.fb-comment {
margin-top: 8px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-elevated, var(--bg-input));
max-width: 560px;
}
.fb-comment-label {
display: block;
font-size: 0.82rem;
color: var(--text-secondary);
margin-bottom: 6px;
}
.fb-optional {
color: var(--text-muted);
font-weight: 400;
}
.fb-comment-input {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
font: inherit;
font-size: 0.88rem;
color: inherit;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 6px);
resize: vertical;
min-height: 44px;
}
.fb-comment-input:focus {
outline: 2px solid var(--accent-hover);
outline-offset: 1px;
border-color: var(--accent-text);
}
/* `.btn-sm` n'existait pas — les boutons du champ auraient hérité de la taille
pleine et déséquilibré un bloc qui doit rester discret. */
.btn-sm {
padding: 6px 12px;
font-size: 0.85rem;
}
.fb-comment-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 8px;
}
/* Mobile : les actions passent pleine largeur — une cible de 44 px reste
atteignable au pouce, ce qu'une paire de petits boutons alignés à droite
ne garantit pas. */
@media (max-width: 640px) {
.fb-comment { max-width: none; }
.fb-comment-actions { flex-direction: column-reverse; }
.fb-comment-actions button { width: 100%; min-height: 44px; }
}
.btn-feedback {
background: none;
border: 1px solid var(--border);
border-radius: 8px;
padding: 2px 9px;
cursor: pointer;
font-size: 0.78rem;
color: var(--text-muted);
transition: all var(--transition);
line-height: 1.5;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn-feedback svg { stroke: currentColor; flex-shrink: 0; }
.btn-fb-copy {
padding: 2px 6px;
}
.btn-fb-docx {
border-color: var(--accent);
color: var(--accent-text);
font-weight: 500;
}
.btn-fb-docx:hover {
background: rgba(108, 99, 255, 0.15);
}
.btn-fb-explain {
font-size: .9rem;
line-height: 1;
}
.btn-fb-explain:hover {
background: rgba(108, 99, 255, 0.12);
border-color: var(--accent);
}
.btn-feedback:hover {
border-color: var(--accent);
color: var(--accent-text);
background: rgba(108, 99, 255, 0.08);
}
/* L800 — Empty state NOT_FOUND guidé */
.not-found-guide {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 8px 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.82rem;
color: var(--text-muted);
}
.not-found-guide-txt {
flex: 1;
}
.btn-not-found-files {
background: transparent;
color: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 12px;
font-size: 0.78rem;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
}
.btn-not-found-files:hover {
background: var(--bg-tertiary);
}
.btn-not-found-web {
background: var(--info, #3b82f6);
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: 4px 12px;
font-size: 0.78rem;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
}
.btn-not-found-web:hover {
opacity: 0.85;
}
.btn-feedback.voted {
border-color: var(--success);
color: var(--success);
background: rgba(52, 211, 153, 0.08);
}
.btn-feedback.voted-neg {
border-color: var(--error);
color: var(--error);
background: rgba(239, 68, 68, 0.08);
}
.btn-feedback:disabled {
cursor: default;
opacity: 0.8;
}
/* Thinking block (debug mode) */
.thinking-block {
margin-top: 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(108, 99, 255, 0.04);
font-size: 0.82rem;
}
.thinking-block summary {
cursor: pointer;
padding: 8px 12px;
color: var(--text-muted);
font-weight: 500;
user-select: none;
}
.thinking-block summary:hover {
color: var(--accent-text);
}
.thinking-content {
padding: 8px 14px 12px;
border-top: 1px solid var(--border);
color: var(--text-muted);
line-height: 1.6;
white-space: pre-wrap;
}
/* Thinking indicator */
.thinking {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.85rem;
color: var(--text-muted);
border-bottom-left-radius: 4px;
animation: thinking-pulse 2.4s ease-in-out infinite;
}
.thinking-dots span {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: thinking-bounce 1.1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) {
animation-delay: 0.18s;
}
.thinking-dots span:nth-child(3) {
animation-delay: 0.36s;
}
.thinking-step {
transition: opacity 0.3s ease;
}
.thinking-step.fade-out {
opacity: 0;
}
@keyframes thinking-bounce {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.35;
}
30% {
transform: translateY(-5px);
opacity: 1;
}
}
@keyframes thinking-pulse {
0%, 100% { border-color: var(--border); }
50% { border-color: rgba(108, 99, 255, 0.45); }
}
/* ── Input bar ──────────────────────────────────────────── */
.chat-input-bar {
padding: 16px 28px 20px;
border-top: 1px solid var(--border);
background: var(--chat-bar-bg);
backdrop-filter: blur(10px);
flex-shrink: 0;
}
/* Bouton de repli de la zone de saisie — masqué par défaut (desktop & paysage),
visible uniquement en portrait sur mobile/tablette (cf. media query plus bas). */
.btn-toggle-input {
display: none;
}
.input-row {
display: flex;
flex-direction: column;
gap: 4px;
background: var(--composer-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 12px 8px 8px 16px;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.input-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 2px;
}
.input-row:focus-within {
border-color: var(--accent-hover); /* WCAG 2.4.7 : identique au repos = aucun focus visible */
}
.chat-textarea {
/* Pas de flex:1 — sinon flex-basis:0 force le textarea à hauteur 0
dans le parent flex-column, et la hauteur inline posée par
autoResize() est ignorée. On laisse la hauteur naturelle dictée
par min-height + scrollHeight via le JS autoResize. */
flex: 0 0 auto;
width: 100%;
box-sizing: border-box;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 0.9rem;
font-family: var(--font-sans);
resize: none;
outline: none;
overflow-y: auto;
padding: 10px 0;
min-height: 44px;
max-height: 200px;
line-height: 1.5;
}
.chat-textarea::placeholder {
color: var(--text-muted);
}
.btn-attach {
background: transparent;
border: none;
color: var(--text-muted);
padding: 8px 6px;
cursor: pointer;
border-radius: var(--radius);
transition: color var(--transition), background var(--transition);
flex-shrink: 0;
line-height: 1;
display: flex;
align-items: center;
}
.btn-attach svg { stroke: currentColor; }
.btn-attach:hover {
color: var(--accent-text);
background: var(--accent-soft);
}
.btn-attach.uploading {
animation: spin 0.8s linear infinite;
pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-mic {
background: transparent;
border: none;
color: var(--text-muted);
padding: 8px 6px;
cursor: pointer;
border-radius: var(--radius);
transition: color var(--transition), background var(--transition);
flex-shrink: 0;
line-height: 1;
display: flex;
align-items: center;
}
.btn-mic svg { stroke: currentColor; }
.btn-mic:hover {
color: var(--accent-text);
background: var(--accent-soft);
}
.btn-mic--recording {
color: var(--error);
animation: mic-pulse 1.2s ease-in-out infinite;
}
.btn-mic--recording svg { stroke: #ef4444; }
@keyframes mic-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.btn-mic:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn-send {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--green-hover);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
flex-shrink: 0;
margin: 2px;
box-shadow: 0 4px 16px rgba(25, 240, 94, 0.28);
}
.btn-send svg { stroke: #000; }
.btn-send:hover {
background: var(--green);
transform: scale(1.06);
box-shadow: 0 6px 20px rgba(25, 240, 94, 0.38);
}
.btn-send:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.reasoning-mode-select {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 10px;
font-size: 0.75rem;
cursor: pointer;
outline: none;
flex-shrink: 0;
min-width: 0;
max-width: 180px;
}
.reasoning-mode-select:focus {
color: var(--text-primary);
border-color: var(--accent);
}
#router-mode.router-forced {
border-color: var(--accent);
color: var(--accent-text);
font-weight: 600;
}
/* Chrome propage `color` et `font-weight` du `