/* ============================================================================ X CONSOLE KIT — design system extrait de la Developer Console de X (Twitter) Tokens exacts + composants. Plain CSS, zéro dépendance (pas de Tailwind). Thème via l'attribut data-theme="light" | "dark" sur ou un conteneur. v2 (2026-08-12) — valeurs RE-VÉRIFIÉES contre getComputedStyle() live sur console.x.com (mesures Marko) : · nav item 13px/400, lh16, #a1a1a1, radius 6, pad 0 8 · nav item actif #ededed, 500, barre gauche CLAIRE (pas bleue) · section 12px/500, #737373, pad 4 8 · titre appbar 16px/400, lh24, #ededed · lien appbar 13px/400, lh16, #a1a1a1, radius 6, pad 0 10 · empty title 14px/500, lh16, #a1a1a1 · new conversation 16px/400, lh24, #ededed, bg #000, bordure #1f1f1f · composer input 14px/400, lh24, #ededed, pad 4 0 · body bg #000, font Inter + layout réel = PANNEAUX FLOTTANTS (marge 12, gap 12, radius 14, ombre panel), le rail « New conversation » vit DANS le panneau principal (séparé line-faint). Le bloc conversation (.xc-chat) inventé de la v1 a été SUPPRIMÉ (jamais observé). ========================================================================== */ /* ---------- Font (Inter self-hosted par X). Décommente pour le look exact, ou installe @fontsource/inter dans ton projet. ------------------------- */ /* @font-face{ font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap; src:url("https://ton.twimg.com/dataproducts/developerconsole/_next/static/media/0336a89fb4e7fc1d-s.p.woff2") format("woff2"); } */ /* ============================================================================ 1. PALETTE DE BASE (stable, indépendante du thème) ========================================================================== */ :root{ --x-black:#000; --x-white:#fff; /* Blue — accent signature X */ --x-blue-050:#d7f6ff; --x-blue-100:#bff2ff; --x-blue-200:#97e3ff; --x-blue-300:#6bc9fb; --x-blue-400:#43b3f6; --x-blue-500:#1d9bf0; --x-blue-600:#0083eb; --x-blue-700:#006fd6; --x-blue-800:#005ac2; --x-blue-900:#003886; /* Green */ --x-green-100:#c2f1dc; --x-green-500:#00ba7c; --x-green-600:#009c64; --x-green-700:#007e50; /* Red */ --x-red-050:#fedee3; --x-red-100:#fdc9ce; --x-red-500:#f4212e; --x-red-600:#d11a28; --x-red-700:#ae1425; /* Yellow / Orange */ --x-yellow-100:#fffec0; --x-yellow-500:#ffd400; --x-yellow-800:#955900; --x-orange-500:#ff7a00; /* Purple / Plum / Magenta / Teal (secondaires) */ --x-purple-500:#7856ff; --x-plum-500:#c936cc; --x-magenta-500:#f91880; --x-teal-500:#00afb6; /* Alphas noir/blanc (overlays, chips) */ --x-black-04:#0000000a; --x-black-08:#00000014; --x-black-10:#0000001a; --x-black-60:#0009; --x-white-04:#ffffff0a; --x-white-08:#ffffff14; --x-white-10:#ffffff1a; --x-white-15:#ffffff26; --x-white-20:#fff3; --x-white-30:#ffffff4d; --x-white-60:#fff9; --x-white-80:#fffc; /* Radius + font + easing (constants) */ --xc-radius-control:6px; /* boutons, inputs, chips, items de nav */ --xc-radius-sm:8px; /* cartes internes */ --xc-radius-panel:14px; /* grands panneaux + composer */ --xc-ease:cubic-bezier(.16,1,.3,1); --xc-ease-out:cubic-bezier(0,0,.2,1); /* = Tailwind ease-out (états hover/clic X) */ --xc-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --xc-font-feature:"tnum" 1; /* chiffres tabulaires (stats alignées) */ } /* ============================================================================ 2. THÈME CLAIR (défaut) ========================================================================== */ :root, [data-theme="light"]{ --gray-100:#fafafa; --gray-200:#f2f2f2; --gray-300:#eaeaea; --gray-400:#e0e0e0; --gray-500:#d4d4d4; --gray-600:#8f8f8f; --gray-700:#666; --gray-800:#171717; --gray-900:#0a0a0a; /* Chrome console */ --console-canvas:#f0f0f0; --console-canvas-sheen:linear-gradient(180deg,#ffffffbf,#fff0 280px); --console-surface:#fff; --console-main:#fff; /* fond du panneau principal */ --console-sunken:var(--gray-100); --console-line:var(--gray-300); --console-line-faint:var(--gray-200); --console-wash:#00000009; --console-chip:#0000000f; --console-modal:#ffffff; /* fond des menus/popovers (bg-modal) */ --x-hover-subtle:#0000000a; /* surbrillance item de menu au survol */ --console-elevation:0 1px 1px #0000000a,0 2px 6px -2px #0000000f; --console-elevation-hover:0 1px 1px #0000000d,0 6px 16px -6px #0000001a; --console-panel-shadow:0 1px 1px #0000000d,0 14px 36px -18px #00000038; --console-hint-shadow:0 2px 6px #0000000d,0 14px 30px -12px #00000029; /* Texte */ --x-fg-primary:var(--gray-900); --x-fg-secondary:var(--gray-700); --x-fg-tertiary:var(--gray-600); --x-fg-inverted:#fff; --x-fg-brand:var(--x-blue-800); --x-fg-destructive:var(--x-red-600); --x-fg-success:var(--x-green-700); --x-fg-warning:var(--x-yellow-800); /* Fonds */ --x-bg-inputs:#fff; --x-bg-destructive:var(--x-red-050); --x-bg-success:var(--x-green-100); --x-bg-warning:var(--x-yellow-100); --x-bg-info:var(--x-blue-100); /* Bordures */ --x-border-normal:var(--gray-300); --x-border-hover:var(--gray-500); /* Boutons */ --x-btn-primary:var(--gray-900); --x-btn-primary-hover:#383838; --x-btn-primary-pressed:#4d4d4d; --x-btn-primary-fg:#fff; --x-btn-secondary:#fff; --x-btn-secondary-hover:var(--gray-100); --x-btn-secondary-pressed:var(--gray-200); --x-btn-ghost-hover:var(--x-black-04); --x-btn-ghost-pressed:var(--x-black-08); --x-ring:var(--x-fg-primary); } /* ============================================================================ 3. THÈME SOMBRE (le look par défaut de la console) — fg mesurés : primary #ededed (gray-800), secondary #a1a1a1 (gray-700), tertiary #737373 (gray-600). PAS les alphas white-60/white-30 de twitter.com. ========================================================================== */ :root[data-theme="dark"], [data-theme="dark"]{ --gray-100:#0a0a0a; --gray-200:#141414; --gray-300:#1f1f1f; --gray-400:#292929; --gray-500:#333; --gray-600:#737373; --gray-700:#a1a1a1; --gray-800:#ededed; --gray-900:#fff; --console-canvas:#000; --console-canvas-sheen:none; /* mesuré : body bg #000 PLAT, pas de gradient */ --console-surface:var(--gray-100); --console-main:#000; /* mesuré : le panneau principal est #000 */ --console-sunken:var(--gray-200); --console-line:var(--gray-300); --console-line-faint:var(--gray-200); --console-wash:#ffffff0d; --console-chip:#ffffff14; --console-modal:var(--gray-200); /* #141414 — bg-modal EXACT (source X compilée) */ --x-hover-subtle:var(--x-white-08); /* #ffffff14 — surbrillance item (source X) */ --console-elevation:inset 0 1px 0 #ffffff0b,0 1px 2px #00000080; --console-elevation-hover:inset 0 1px 0 #ffffff12,0 4px 14px -4px #0009; --console-panel-shadow:inset 0 1px 0 #ffffff0e,0 18px 44px -22px #000000e6; --console-hint-shadow:inset 0 1px 0 #ffffff0d,0 2px 8px #00000080,0 16px 34px -14px #000000bf; --x-fg-primary:var(--gray-800); /* #ededed — mesuré (titre, actif, boutons) */ --x-fg-secondary:var(--gray-700); /* #a1a1a1 — mesuré (nav, liens, empty) */ --x-fg-tertiary:var(--gray-600); /* #737373 — mesuré (sections, placeholders)*/ --x-fg-inverted:var(--x-black); --x-fg-brand:var(--x-blue-500); --x-fg-destructive:var(--x-red-500); --x-fg-success:var(--x-green-500); --x-fg-warning:var(--x-yellow-500); --x-bg-inputs:var(--x-white-08); --x-bg-destructive:var(--x-red-050); --x-bg-success:var(--x-green-100); --x-bg-warning:var(--x-yellow-100); --x-bg-info:var(--x-blue-100); --x-border-normal:var(--gray-300); /* #1f1f1f — valeur CONSOLE (pas white-15) */ --x-border-hover:var(--gray-500); /* #333 — valeur CONSOLE (pas white-20) */ --x-border-active:var(--gray-600); /* #737373 */ --x-btn-primary:var(--x-white); --x-btn-primary-hover:var(--x-white-80); --x-btn-primary-pressed:var(--x-white-60); --x-btn-primary-fg:var(--x-black); --x-btn-secondary:var(--gray-300); --x-btn-secondary-hover:var(--gray-400); --x-btn-secondary-pressed:var(--gray-500); --x-btn-ghost-hover:var(--x-white-08); --x-btn-ghost-pressed:var(--x-white-15); --x-ring:var(--x-blue-500); } /* Suivre le thème système quand aucun data-theme n'est posé. MIROIR COMPLET du bloc [data-theme="dark"] — un sous-ensemble laisserait des tokens light fuiter en dark système (ex: send hover invisible, inputs blancs). */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --gray-100:#0a0a0a; --gray-200:#141414; --gray-300:#1f1f1f; --gray-400:#292929; --gray-500:#333; --gray-600:#737373; --gray-700:#a1a1a1; --gray-800:#ededed; --gray-900:#fff; --console-canvas:#000; --console-canvas-sheen:none; --console-surface:var(--gray-100); --console-main:#000; --console-sunken:var(--gray-200); --console-line:var(--gray-300); --console-line-faint:var(--gray-200); --console-wash:#ffffff0d; --console-chip:#ffffff14; --console-modal:#1a1a1a; --x-hover-subtle:#ffffff0f; --console-elevation:inset 0 1px 0 #ffffff0b,0 1px 2px #00000080; --console-elevation-hover:inset 0 1px 0 #ffffff12,0 4px 14px -4px #0009; --console-panel-shadow:inset 0 1px 0 #ffffff0e,0 18px 44px -22px #000000e6; --console-hint-shadow:inset 0 1px 0 #ffffff0d,0 2px 8px #00000080,0 16px 34px -14px #000000bf; --x-fg-primary:var(--gray-800); --x-fg-secondary:var(--gray-700); --x-fg-tertiary:var(--gray-600); --x-fg-inverted:var(--x-black); --x-fg-brand:var(--x-blue-500); --x-fg-destructive:var(--x-red-500); --x-fg-success:var(--x-green-500); --x-fg-warning:var(--x-yellow-500); --x-bg-inputs:var(--x-white-08); --x-bg-destructive:var(--x-red-050); --x-bg-success:var(--x-green-100); --x-bg-warning:var(--x-yellow-100); --x-bg-info:var(--x-blue-100); --x-border-normal:var(--gray-300); --x-border-hover:var(--gray-500); --x-border-active:var(--gray-600); --console-modal:var(--gray-200); --x-hover-subtle:var(--x-white-08); --x-btn-primary:var(--x-white); --x-btn-primary-hover:var(--x-white-80); --x-btn-primary-pressed:var(--x-white-60); --x-btn-primary-fg:var(--x-black); --x-btn-secondary:var(--gray-300); --x-btn-secondary-hover:var(--gray-400); --x-btn-secondary-pressed:var(--gray-500); --x-btn-ghost-hover:var(--x-white-08); --x-btn-ghost-pressed:var(--x-white-15); --x-ring:var(--x-blue-500); } } /* ============================================================================ 4. COMPOSANTS ========================================================================== */ /* Racine — pose-la sur le conteneur de ton app (ou ) */ .xc{ font-family:var(--xc-font-sans); font-feature-settings:var(--xc-font-feature); color:var(--x-fg-primary); background-color:var(--console-canvas); background-image:var(--console-canvas-sheen); background-repeat:no-repeat; line-height:1.35; -webkit-font-smoothing:antialiased; } .xc *{box-sizing:border-box;} body.xc{margin:0;} /* --- Typographie --- */ .xc-h1{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0;} .xc-title{font-size:15px;font-weight:600;margin:0;} .xc-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--x-fg-tertiary);} .xc-muted{color:var(--x-fg-secondary);font-size:13px;} .xc-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} /* --- Panneau (la grande carte à bord + ombre) --- */ .xc-panel{ background-color:var(--console-surface); border:1px solid var(--console-line); border-radius:var(--xc-radius-panel); box-shadow:var(--console-panel-shadow); } /* Carte interne plus simple (rounded-sm) */ .xc-card{ background-color:var(--console-surface); border:1px solid var(--console-line); border-radius:var(--xc-radius-sm); } .xc-p-5{padding:20px;} /* Séparateurs internes façon divide-y */ .xc-divide>*+*{border-top:1px solid var(--console-line-faint);} /* --- Boutons --- */ .xc-btn{ --_bg:transparent; --_fg:var(--x-fg-primary); --_bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:6px; height:32px;padding:0 14px; font-family:inherit;font-size:13px;font-weight:600;line-height:1;white-space:nowrap; border:1px solid var(--_bd);border-radius:var(--xc-radius-control); background-color:var(--_bg);color:var(--_fg); cursor:pointer;user-select:none;transition:background-color .12s,border-color .12s,opacity .12s; } .xc-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--console-surface),0 0 0 4px var(--x-ring);} .xc-btn:disabled{opacity:.5;cursor:not-allowed;} .xc-btn--sm{height:26px;padding:0 10px;font-size:12px;} .xc-btn--lg{height:38px;padding:0 18px;font-size:14px;} .xc-btn--pill{border-radius:9999px;} .xc-btn--block{width:100%;} .xc-btn--primary{--_bg:var(--x-btn-primary);--_fg:var(--x-btn-primary-fg);} .xc-btn--primary:hover{--_bg:var(--x-btn-primary-hover);} .xc-btn--primary:active{--_bg:var(--x-btn-primary-pressed);} .xc-btn--secondary{--_bg:var(--x-btn-secondary);--_fg:var(--x-fg-primary);--_bd:var(--x-border-normal);} .xc-btn--secondary:hover{--_bg:var(--x-btn-secondary-hover);--_bd:var(--x-border-hover);} .xc-btn--secondary:active{--_bg:var(--x-btn-secondary-pressed);} .xc-btn--ghost{--_bg:transparent;--_fg:var(--x-fg-secondary);} .xc-btn--ghost:hover{--_bg:var(--x-btn-ghost-hover);--_fg:var(--x-fg-primary);} .xc-btn--ghost:active{--_bg:var(--x-btn-ghost-pressed);} .xc-btn--brand{--_bg:var(--x-blue-500);--_fg:#fff;} .xc-btn--brand:hover{--_bg:var(--x-blue-600);} .xc-btn--brand:active{--_bg:var(--x-blue-700);} .xc-btn--destructive{--_bg:var(--x-red-500);--_fg:#fff;} .xc-btn--destructive:hover{--_bg:var(--x-red-600);} .xc-btn--destructive:active{--_bg:var(--x-red-700);} /* --- Chip / Badge --- */ .xc-chip{ display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px; font-size:12px;font-weight:600;border-radius:9999px; background-color:var(--console-chip);color:var(--x-fg-secondary); } .xc-badge{ display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px; font-size:11px;font-weight:600;border-radius:9999px; background-color:var(--console-chip);color:var(--x-fg-secondary); } .xc-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;} .xc-badge--success{color:var(--x-fg-success);} .xc-badge--warning{color:var(--x-fg-warning);} .xc-badge--danger{color:var(--x-fg-destructive);} .xc-badge--brand{color:var(--x-fg-brand);} /* --- Input --- */ .xc-input{ height:32px;padding:0 12px;width:100%; font-family:inherit;font-size:13px;color:var(--x-fg-primary); background-color:var(--x-bg-inputs); border:1px solid var(--x-border-normal);border-radius:var(--xc-radius-control); transition:border-color .12s,box-shadow .12s; } .xc-input::placeholder{color:var(--x-fg-tertiary);} .xc-input:focus{outline:none;border-color:var(--x-blue-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--x-blue-500) 25%,transparent);} /* --- Stat grid (les tuiles de chiffres) --- */ .xc-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--console-line-faint);border-radius:var(--xc-radius-sm);overflow:hidden;} .xc-stat{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--console-surface);} .xc-stat__label{font-size:12px;color:var(--x-fg-secondary);} .xc-stat__value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;} .xc-stat__delta{font-size:12px;font-weight:600;} .xc-stat__delta--up{color:var(--x-fg-success);} .xc-stat__delta--down{color:var(--x-fg-destructive);} /* --- Layout scaffold générique (barre + contenu, pour tes pages internes) --- */ .xc-shell{min-height:100vh;display:flex;flex-direction:column;} .xc-topbar{ display:flex;align-items:center;gap:12px;height:56px;padding:0 20px; border-bottom:1px solid var(--console-line); background:color-mix(in srgb,var(--console-surface) 80%,transparent); backdrop-filter:saturate(1.2) blur(8px);position:sticky;top:0;z-index:10; } .xc-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;} .xc-brand__mark{width:22px;height:22px;display:grid;place-items:center;color:var(--x-fg-primary);} .xc-container{width:100%;max-width:1120px;margin:0 auto;padding:24px 20px 48px;} /* --- Skeleton (le shimmer capturé sur la vraie console) --- */ .xc-skeleton{border-radius:var(--xc-radius-control);background:linear-gradient(90deg,var(--console-sunken) 25%,var(--console-wash) 37%,var(--console-sunken) 63%);background-size:400% 100%;animation:xc-shimmer 1.4s ease infinite;} @keyframes xc-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}} /* --- Divider / utils --- */ .xc-hr{height:1px;background:var(--console-line-faint);border:0;margin:0;} .xc-row{display:flex;align-items:center;gap:12px;} .xc-between{justify-content:space-between;} .xc-grow{flex:1;} .xc-stack{display:flex;flex-direction:column;} .xc-gap-2{gap:8px;} .xc-gap-3{gap:12px;} .xc-gap-4{gap:16px;} .xc-gap-5{gap:20px;} /* ============================================================================ 5. APP SHELL — reproduction 1:1 de la page « Agent » de la Developer Console Layout réel = PANNEAUX FLOTTANTS : marge 12px autour, gap 12px, sidebar et panneau principal séparés, coins 14px, ombre panel. Le rail « New conversation » est DANS le panneau principal, séparé par une ligne faible. CONVENTION : les valeurs marquées (mesuré) = getComputedStyle live ; le reste = interpolé des captures d'écran réelles (approx, non contredit). PRÉREQUIS app React : body{margin:0} (agent.html le fait via body.xc). ========================================================================== */ .xc-app{display:flex;height:100dvh;padding:12px;gap:12px;background:var(--console-canvas);overflow:hidden;} /* breakpoint = choix du kit (non observé sur console.x.com) */ @media(max-width:1100px){.xc-rail{display:none;}} /* ---- Sidebar (panneau flottant) ---- */ .xc-side{ position:relative;width:240px;flex:none;display:flex;flex-direction:column; background:var(--console-surface);border:1px solid var(--console-line); border-radius:var(--xc-radius-panel);box-shadow:var(--console-panel-shadow); overflow:hidden; } /* texture hachurée diagonale en haut de la sidebar — observée sur les captures d'écran réelles de console.x.com (12/08), non mesurable au computedStyle */ .xc-side::before{ content:"";position:absolute;top:0;left:0;right:0;height:110px;pointer-events:none; background:repeating-linear-gradient(135deg,var(--console-wash) 0 1px,transparent 1px 9px); -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); } .xc-side__head{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;} .xc-side__logo{width:24px;height:24px;flex:none;color:var(--x-fg-primary);display:grid;place-items:center;} .xc-side__logo svg{width:100%;height:100%;} .xc-side__brand{font-size:14px;font-weight:700;line-height:1.2;letter-spacing:-.005em;} /* approx (non mesuré) */ .xc-nav{display:flex;flex-direction:column;gap:1px;padding:0 10px;overflow-y:auto;} /* section : 12px/500 #737373 pad 4 8 (mesuré). Séparateur au-dessus = observé sur les captures réelles (ligne fine au-dessus de chaque section). */ .xc-nav__section{font-size:12px;font-weight:500;color:var(--x-fg-tertiary);padding:4px 8px;margin-top:16px;position:relative;} .xc-nav__section::before{content:"";position:absolute;top:-8px;left:8px;right:8px;height:1px;background:var(--console-line-faint);} /* item : 13px/400 lh16 #a1a1a1, radius 6, pad 0 8 (mesuré) */ .xc-nav__item{ display:flex;align-items:center;gap:12px;height:32px;padding:0 8px; border-radius:var(--xc-radius-control);position:relative; color:var(--x-fg-secondary);font-size:13px;line-height:16px;font-weight:400; text-decoration:none;cursor:pointer; transition:background-color .13s var(--xc-ease),color .13s var(--xc-ease); } .xc-nav__item svg{width:16px;height:16px;flex:none;} .xc-nav__item:hover{background:var(--console-wash);color:var(--x-fg-primary);} /* actif : #ededed/500, PAS de fond (mesuré transparent), barre gauche CLAIRE. left:-2px => barre à ~8px du bord du panneau (nav pad 10) : détachée du bord, proche de l'item, comme sur la vraie console (PAS collée à gauche). */ .xc-nav__item.is-active{color:var(--x-fg-primary);font-weight:500;} .xc-nav__item.is-active::before{ content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%); width:3px;height:18px;border-radius:2px;background:var(--x-fg-primary); } .xc-nav__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .xc-side__spacer{flex:1;} /* pied compte (mesuré à l'inspecteur) : - conteneur : border-top #1f1f1f, padding 6px 0 0, inset 10px (aligné à la nav) - compte = LIEN cliquable : flex, h32, px-8, gap-8, rounded-control (hover) - avatar : img 16px rounded-full bg-sunken (#141414) object-cover - nom : flex-1 truncate, 13/400, gris #a1a1a1 - déconnexion : bouton SÉPARÉ 40x32, padding 0 12 (icône 14), gris #a1a1a1 */ .xc-side__user{display:flex;align-items:center;gap:2px;margin:0 13px 10px;padding:6px 0 0;border-top:1px solid var(--console-line);} /* inset 13 => avatar à 21px (mesuré) */ .xc-side__acct{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:var(--xc-radius-control);color:inherit;text-decoration:none;cursor:pointer;transition:background-color .13s var(--xc-ease);} .xc-side__acct:hover{background:var(--console-wash);} /* avatar = photo de profil (img). Fallback = cercle bg-sunken + initiale */ .xc-avatar{width:16px;height:16px;border-radius:50%;flex:none;background:var(--console-sunken);display:grid;place-items:center;color:var(--x-fg-secondary);font-size:9px;font-weight:600;overflow:hidden;} .xc-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;} .xc-side__user-name{flex:1;min-width:0;font-size:13px;font-weight:400;color:var(--x-fg-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* bouton déconnexion : 40x32, radius control 6, icône 14, gris. Spécificité .xc-side__user ... pour battre .xc-iconbtn (défini plus bas). */ .xc-side__user .xc-side__logout{width:40px;height:32px;border-radius:var(--xc-radius-control);color:var(--x-fg-secondary);flex:none;} .xc-side__user .xc-side__logout svg{width:14px;height:14px;} /* bouton icône : ROND (radius 9999, mesuré). Défaut = gris #a1a1a1 (comme la déco) ; dans l'appbar les icônes d'action sont #ededed (mesuré, override plus bas). */ .xc-iconbtn{display:grid;place-items:center;width:32px;height:32px;border-radius:9999px;border:0;background:transparent;color:var(--x-fg-secondary);cursor:pointer;transition:background-color .13s var(--xc-ease),color .13s var(--xc-ease);} .xc-iconbtn:hover{background:var(--console-wash);color:var(--x-fg-primary);} .xc-iconbtn svg{width:18px;height:18px;} /* ---- Panneau principal (flottant) ---- */ .xc-main{ flex:1;min-width:0;display:flex;flex-direction:column; background:var(--console-main);border:1px solid var(--console-line); border-radius:var(--xc-radius-panel);box-shadow:var(--console-panel-shadow); overflow:hidden; } /* header : h-14 base, wide:h-[68px] + pe-7/ps-7 (28px). Cible desktop large = 68/28. Cluster de droite = gap-1 (4px), pas 16px (source X compilée). */ .xc-appbar{display:flex;align-items:center;gap:4px;height:68px;padding:0 28px;border-bottom:1px solid var(--console-line);flex:none;} /* titre : 16px/400 lh24 #ededed (mesuré) */ .xc-appbar__title{font-size:16px;font-weight:400;line-height:24px;color:var(--x-fg-primary);} .xc-appbar__spacer{flex:1;} /* lien : 13px/400 lh16 #a1a1a1 radius 6 pad 0 10 (mesuré) */ .xc-toplink{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:var(--xc-radius-control);font-size:13px;line-height:16px;font-weight:400;color:var(--x-fg-secondary);text-decoration:none;cursor:pointer;transition:color .13s var(--xc-ease),background-color .13s var(--xc-ease);} .xc-toplink:hover{color:var(--x-fg-primary);background:var(--console-wash);} .xc-toplink svg{width:13px;height:13px;opacity:.8;} .xc-appbar__divider{width:1px;height:16px;background:var(--console-line);margin:0 4px;} /* h-4 mx-1 (source X) */ .xc-appbar .xc-iconbtn{color:var(--x-fg-primary);} /* icônes d'action header = #ededed (mesuré) */ /* sélecteur de langue (mesuré) : PAS de bordure, fond blanc-08 (chip), texte #a1a1a1 (secondary), weight 500, radius control 6px */ /* états EXACTS (classes X) : base bg-chip/secondary · hover bg-wash (plus sombre)/primary · actif+ouvert bg-chip/primary · transition-colors 150ms ease-out */ /* transition de couleur volontairement un peu plus longue que X (.25s vs .15s) — demande Marko */ .xc-lang{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;border-radius:var(--xc-radius-control);border:0;background:var(--console-chip);color:var(--x-fg-secondary);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:background-color .25s var(--xc-ease-out),color .25s var(--xc-ease-out);} .xc-lang:hover{background:var(--console-wash);color:var(--x-fg-primary);} /* wash = plus sombre que chip */ .xc-lang:active{background:var(--console-chip);color:var(--x-fg-primary);} .xc-lang[aria-expanded="true"]{background:var(--console-chip);color:var(--x-fg-primary);} /* ouvert = fond de base */ .xc-lang svg{width:15px;height:15px;opacity:.85;} /* chevron : rotate 180 (vers le haut) UNIQUEMENT à l'ouverture, 150ms ease-out */ .xc-lang .xc-lang__chev{width:14px;height:14px;opacity:.85;transition:transform .15s var(--xc-ease-out);} .xc-lang[aria-expanded="true"] .xc-lang__chev{transform:rotate(180deg);} /* ---- Menu déroulant (langue & autres) — reproduit le menu base-ui de X ---- conteneur bg-modal + bordure .5px + rounded + ombre ; ouverture opacity+scale 95->100 sur 150ms ease-out ; items px-2.5 py-1.5 gap-2 ; sélection = checkmark */ .xc-lang-wrap{position:relative;display:inline-flex;} .xc-menu{ position:absolute;top:calc(100% + 6px);right:0;z-index:60; min-width:160px;padding:4px; background:var(--console-modal);border:0; /* pas de bordure visible (l'ombre suffit) */ border-radius:12px; /* classe `rounded` = 12px (source X) */ box-shadow:0 12px 34px -12px #000000cc,0 4px 12px #00000080; transform-origin:top right;opacity:0;transform:scale(.95);visibility:hidden;pointer-events:none; transition:opacity .15s var(--xc-ease-out),transform .15s var(--xc-ease-out),visibility 0s .15s; } .xc-menu.is-open{opacity:1;transform:scale(1);visibility:visible;pointer-events:auto; transition:opacity .15s var(--xc-ease-out),transform .15s var(--xc-ease-out);} .xc-menu__item{ display:flex;align-items:center;gap:8px; padding:6px 10px;border-radius:6px;cursor:pointer; font-size:13px;font-weight:500;line-height:20px;color:var(--x-fg-primary); /* texte blanc clair */ transition:background-color .1s var(--xc-ease-out),color .1s var(--xc-ease-out); } .xc-menu__item:hover{background:var(--x-hover-subtle);} .xc-menu__label{flex:1;min-width:0;} .xc-menu__check{width:16px;height:16px;flex:none;color:var(--x-fg-tertiary);} .xc-menu__check svg{width:100%;height:100%;} .xc-menu__item:not(.is-selected) .xc-menu__check{visibility:hidden;} /* ---- Corps : zone de conversation + rail droit ---- */ .xc-body{flex:1;display:flex;min-height:0;} .xc-canvas{flex:1;display:flex;flex-direction:column;min-width:0;} .xc-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px;} .xc-empty__icon{width:30px;height:30px;color:var(--x-fg-tertiary);display:grid;place-items:center;} .xc-empty__icon svg{width:100%;height:100%;} /* empty title : 14px/500 lh16 #a1a1a1 (mesuré) */ .xc-empty__title{font-size:14px;font-weight:500;line-height:16px;color:var(--x-fg-secondary);margin:0;} .xc-empty__text{max-width:340px;font-size:13px;line-height:1.5;color:var(--x-fg-secondary);margin:0;} /* wrap : px-4 pt-2 pb-4 (mesuré) */ .xc-composer-wrap{flex:none;padding:8px 16px 16px;display:flex;justify-content:center;} /* barre (mesuré) : items-end, gap-2, max-w-3xl(768), rounded-sm(8), border-line, bg-surface, py-2 pe-2 ps-3.5, shadow-elevation ; focus-within => border-hover + elevation-hover. PAS de hauteur fixe : min-h vient du textarea (min-h-8=32) => barre ~48px, grandit avec le texte. */ .xc-composer{ display:flex;align-items:flex-end;gap:8px;width:100%;max-width:768px; padding:8px 8px 8px 14px;background:var(--console-surface); border:1px solid var(--console-line);border-radius:var(--xc-radius-sm); box-shadow:var(--console-elevation); /* border/ombre en fondu DOUX au focus (0.3s) — demande Marko (X=.15s, trop sec) */ transition:border-color .3s var(--xc-ease-out),box-shadow .3s var(--xc-ease-out); } .xc-composer:focus-within{border-color:var(--x-border-hover);box-shadow:var(--console-elevation-hover);} /* textarea : min-h-8(32) max-h-200 resize-none py-1 text 14/lh24 primary, placeholder tertiary. min-width:0 + width:100% = empêche la largeur intrinsèque (cols) de déborder le flex (sinon scrollbar horizontale + barre décentrée). overflow-x:hidden par sécurité. */ .xc-composer textarea,.xc-composer input{ flex:1;min-width:0;width:100%;min-height:32px;max-height:200px;resize:none; padding:4px 0;border:0;background:transparent;overflow-x:hidden;overflow-y:auto; color:var(--x-fg-primary);font-family:inherit;font-size:14px;line-height:24px;outline:none; } .xc-composer textarea::placeholder,.xc-composer input::placeholder{color:var(--x-fg-tertiary);} /* bouton envoi : size-8(32) rounded-full, bg-transparent (pas de fond), icône 16 tertiary */ .xc-composer__send{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;border-radius:9999px;background:transparent;color:var(--x-fg-tertiary);cursor:pointer;transition:background-color .15s var(--xc-ease-out),color .15s var(--xc-ease-out),opacity .15s var(--xc-ease-out);} .xc-composer__send:hover{color:var(--x-fg-secondary);} .xc-composer__send.is-ready{color:var(--x-fg-primary);} .xc-composer__send svg{width:16px;height:16px;} /* ---- Rail droit (DANS le panneau principal, séparé par une ligne faible) ---- ⚠️ largeur 300px = ESTIMÉE (le HTML fourni est le contenu flex-1, pas le conteneur) — à confirmer avec la largeur réelle du rail. */ .xc-rail{width:300px;flex:none;border-left:1px solid var(--console-line-faint);padding:16px 12px 12px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:12px;} /* new conversation (mesuré) : #ededed, bg surface, bordure #1f1f1f, radius 6, weight 500 */ .xc-rail__new{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%; min-height:30px;padding:2px 12px; border:1px solid var(--console-line);border-radius:var(--xc-radius-control); background:var(--console-surface);color:var(--x-fg-primary); font-family:inherit;font-size:14px;line-height:24px;font-weight:500;cursor:pointer; transition:background-color .13s var(--xc-ease),border-color .13s var(--xc-ease); } .xc-rail__new:hover{background:var(--console-sunken);} .xc-rail__new svg{width:16px;height:16px;} /* ---- Liste de conversations (mesuré) : groupes space-y-4, label text-meta tertiary, item h-8 rounded-control, actif bg-chip, corbeille au survol ---- */ .xc-rail__list{display:flex;flex-direction:column;gap:16px;} .xc-rail__group{display:flex;flex-direction:column;} .xc-rail__group-label{padding:0 10px 4px;font-size:12px;font-weight:500;color:var(--x-fg-tertiary);} .xc-conv{display:flex;align-items:center;height:32px;border-radius:var(--xc-radius-control);transition:background-color .15s var(--xc-ease-out);} .xc-conv:hover{background:var(--console-wash);} .xc-conv.is-active{background:var(--console-chip);} .xc-conv__title{flex:1;min-width:0;padding:0 10px;text-align:left;font-size:13px;font-weight:500;color:var(--x-fg-secondary);background:none;border:0;font-family:inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .xc-conv:hover .xc-conv__title,.xc-conv.is-active .xc-conv__title{color:var(--x-fg-primary);} .xc-conv__del{height:24px;margin-right:4px;padding:0 6px;display:grid;place-items:center;border:0;background:transparent;color:var(--x-fg-tertiary);border-radius:var(--xc-radius-control);opacity:0;cursor:pointer;transition:opacity .15s var(--xc-ease-out),color .15s var(--xc-ease-out),background-color .15s var(--xc-ease-out);} .xc-conv:hover .xc-conv__del{opacity:1;} .xc-conv__del:hover{color:var(--x-fg-destructive);background:var(--console-wash);} .xc-conv__del svg{width:14px;height:14px;}