/* 114 — console. Palette, police et composants communs au portail et au chat. */
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono-400.c77a9bcf2e02.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono-600.b5b955131240.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  color-scheme: dark;
  /* teinte 322, force 21 : mauve gris sur noir presque neutre */
  --dev-bg: oklch(0.135 0.005 322);
  --dev-deep: oklch(0.11 0.004 322);
  --dev-sidebar: oklch(0.175 0.006 322);
  --dev-surface: oklch(0.175 0.006 322);
  --dev-raised: oklch(0.21 0.007 322);
  --dev-hover: oklch(0.25 0.01 322);
  --dev-glow: oklch(0.27 0.015 322);
  --dev-line: oklch(0.30 0.009 322);
  --dev-control: oklch(0.50 0.015 322);
  --dev-text: oklch(0.93 0.004 322);
  --dev-muted: oklch(0.74 0.008 322);
  --dev-accent: oklch(0.85 0.036 322);
  --dev-accent-strong: oklch(0.91 0.03 322);
  --dev-on-accent: oklch(0.16 0.006 322);
  --dev-selection: oklch(0.40 0.03 322);
  --dev-link: var(--dev-accent);
  --dev-error: oklch(0.80 0.15 75);
  --dev-error-bg: oklch(0.22 0.03 75);
  --dev-error-line: oklch(0.48 0.09 75);
  --dev-veil: oklch(0.08 0.004 322 / .6);
  --dev-mono: "Martian Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --dev-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* un seul jeu de mouvement pour tout le portail */
  --dev-fast: 110ms;
  --dev-entry: 240ms;
  --dev-step: 45ms;
  --dev-ease: cubic-bezier(.23,1,.32,1);
  --ink: var(--dev-text); --muted: var(--dev-muted); --paper: var(--dev-bg);
  --line: var(--dev-line); --green: var(--dev-accent); --white: var(--dev-surface); --error: var(--dev-error);
  --chat-ink: var(--dev-text); --chat-muted: var(--dev-muted); --chat-line: var(--dev-line);
  --chat-bg: var(--dev-bg); --chat-panel: var(--dev-sidebar); --chat-accent: var(--dev-accent);
}
html { background: var(--dev-bg); scrollbar-color: var(--dev-control) var(--dev-bg); }
::selection { background: var(--dev-selection); color: #fff; }
body { -webkit-font-smoothing: antialiased; }
input, select, textarea { accent-color: var(--dev-accent); }
input::placeholder, textarea::placeholder { color: var(--dev-muted); opacity: 1; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--dev-accent); outline-offset: 2px; }

/* Portail : une colonne de console, des lignes fines, aucun coin arrondi. */
body.portal {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  font: 400 14px/1.7 var(--dev-mono);
  background: radial-gradient(120% 80vh at 50% 0%, var(--dev-glow) 0%, transparent 60%) no-repeat, var(--dev-bg);
}
body.portal > main { flex: 1; width: 100%; }
.skip { background: var(--dev-accent); color: var(--dev-on-accent); }

/* Barre de titre : où je suis, où je peux aller, quelle heure il est. */
.top { max-width: none; margin: 0; padding: 4px clamp(16px,4vw,40px); gap: 0 16px; flex-wrap: wrap; justify-content: flex-start; background: var(--dev-sidebar); border-bottom: 1px solid var(--dev-line); font-size: 12px; color: var(--dev-muted); }
.brand { gap: 0; min-height: 44px; font: 600 16px/1 var(--dev-mono); letter-spacing: -.04em; color: var(--dev-accent); }
.portal-nav { display: flex; flex-wrap: wrap; margin-right: auto; }
.portal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; text-transform: lowercase; color: var(--dev-muted); font-size: 13px; }
.portal-nav a[aria-current=page] { color: var(--dev-text); box-shadow: inset 0 -2px 0 var(--dev-accent); }
.top-clock { white-space: nowrap; font-variant-numeric: tabular-nums; }
.top-clock b { font-weight: 400; color: var(--dev-text); }
.private-label { margin-left: auto; font-size: 12px; }
.top-clock:not([hidden]) + .private-label { margin-left: 0; }
.brand + .top-clock { margin-left: auto; }
body.portal > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; margin: 0; padding: 4px clamp(16px,4vw,40px) max(4px,env(safe-area-inset-bottom)); text-align: left; border-top: 1px solid var(--dev-line); background: var(--dev-sidebar); font: 400 12px/1.7 var(--dev-mono); color: var(--dev-muted); }
.creation-footer-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* Mise en page et texte. */
.workspace { max-width: 980px; padding: clamp(24px,6vh,56px) clamp(16px,4vw,40px) 48px; }
.auth { width: min(100% - 32px,560px); margin: clamp(24px,6vh,64px) auto 48px; }
h1 { font: 600 clamp(20px,3.2vw,28px)/1.25 var(--dev-mono); letter-spacing: -.03em; margin: 0 0 14px; }
.workspace h2, .auth h2 { font: 600 14px/1.6 var(--dev-mono); letter-spacing: 0; margin: 0 0 10px; }
.workspace h2::before, .auth h2::before { content: "# "; color: var(--dev-accent); }
.eyebrow { margin-bottom: 8px; font: 400 12px/1.7 var(--dev-mono); letter-spacing: 0; text-transform: lowercase; color: var(--dev-muted); }
.eyebrow::before { content: "// "; }
.intro { max-width: 68ch; margin-bottom: 24px; font-size: 14px; line-height: 1.7; color: var(--dev-muted); }
.hint, .footnote, .security-note { font-size: 13px; }
.back { min-height: 44px; margin-bottom: 12px; font-size: 13px; color: var(--dev-muted); text-decoration: none; }
code, pre, .note { font-family: var(--dev-mono); }
code { font-size: 1em; color: var(--dev-accent); }
.console-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Blocs : séparés par une ligne, jamais encadrés. */
.panel { margin: 28px 0 0; padding: 20px 0 0; background: transparent; border: 0; border-top: 1px solid var(--dev-line); border-radius: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel + p { margin: 16px 0 0; }
.panel + h2 { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--dev-line); }
:is(.workspace, .auth) :is(.button, button) + p, :is(.workspace, .auth) form + p { margin-top: 14px; }
.workspace > p:first-child { margin: 0 0 12px; }
.workspace > p:last-child > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.workspace > p:first-child > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--dev-muted); text-decoration: none; }
.note { background: var(--dev-sidebar); border-radius: 0; font-size: 13px; line-height: 1.7; }
.qr { background: #fff; padding: 12px; }
.recovery-list { font-size: 14px; }
.error { color: var(--dev-error); }

/* Champs et boutons. */
.field label, .search label { margin-bottom: 6px; font-size: 13px; font-weight: 400; color: var(--dev-muted); }
input, .project-workspace textarea, .creations textarea, .creations select { border: 1px solid var(--dev-control); border-radius: 0; background: var(--dev-sidebar); color: var(--dev-text); caret-color: var(--dev-accent); }
input[aria-invalid=true] { border-color: var(--dev-error); }
.primary, .secondary, .quiet { border-radius: 0; transition: transform var(--dev-fast) var(--dev-ease), background-color var(--dev-fast) ease; }
.primary { background: var(--dev-accent); border-color: var(--dev-accent); color: var(--dev-on-accent); }
.secondary { background: transparent; border-color: var(--dev-control); color: var(--dev-text); }
.quiet { min-height: 44px; padding: 0 14px; border-color: var(--dev-line); font-size: 12px; color: var(--dev-muted); }
.primary:active, .secondary:active, .quiet:active { transform: scale(.97); }
.primary:disabled, .project-workspace button:disabled { background: var(--dev-raised); border-color: var(--dev-line); color: var(--dev-muted); }

/* Listes : une ligne par entrée, le nom en couleur d'accent. */
.results { margin: 8px 0 28px; border-top: 1px solid var(--dev-line); }
.results a { justify-content: center; min-height: 56px; padding: 10px 12px; font-weight: 600; color: var(--dev-accent); transition: background-color var(--dev-fast) ease; }
.results a strong { font-weight: 600; }
.results span { margin-top: 2px; font-size: 12px; font-weight: 400; }
.empty { padding: 16px 12px; }
.results .empty { margin: 0; }
.events { margin: 8px 0 0; }
.events li { gap: 4px 16px; padding: 6px 12px; border: 0; font-size: 13px; color: var(--dev-muted); }
.events time { font-variant-numeric: tabular-nums; }
.events li > span { color: var(--dev-text); }

/* Accueil : l'invite est l'élément signature, le reste est une liste. */
.console-prompt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; }
.console-prompt label { font-weight: 600; font-size: clamp(15px,2.4vw,22px); white-space: nowrap; color: var(--dev-accent); }
.console-prompt input { flex: 1; min-width: 200px; min-height: 52px; padding: 0 0 0 2px; border: 0; border-bottom: 1px solid var(--dev-line); background: transparent; font: 600 clamp(16px,2.4vw,22px)/1.4 var(--dev-mono); }
.console-prompt input::placeholder { color: oklch(0.66 0.008 322); font-weight: 400; }
.console-prompt input:focus-visible { outline: none; border-bottom-color: var(--dev-accent); }
.console-help { margin: 10px 0 0; font-size: 12px; color: var(--dev-muted); }
.console-help kbd { padding: 1px 6px; border: 1px solid var(--dev-line); font: inherit; color: var(--dev-text); }
.console .console-title { margin: clamp(28px,5vh,48px) 0 8px; font-size: 12px; font-weight: 400; color: var(--dev-muted); }
.console-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dev-line); }
.console-list li { border-bottom: 1px solid var(--dev-line); }
.console-row { display: grid; grid-template-columns: 15ch minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 56px; padding: 8px 12px; color: var(--dev-text); text-decoration: none; transition: background-color var(--dev-fast) ease; }
.console-name { font-weight: 600; color: var(--dev-accent); }
.console-what { min-width: 0; }
.console-what small, .console-path { font-size: 12px; color: var(--dev-muted); }
.console-what small { display: block; }
.console-list li[data-vise] .console-row { background: var(--dev-hover); }
.console-list li[data-vise] .console-name::before { content: "› "; }
.console-row:active { transform: scale(.99); }
.console-empty { margin: 0; padding: 20px 12px; color: var(--dev-muted); }
.console-log { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.console-log li { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 6px 12px; color: var(--dev-muted); }
.console-log.console-notes li { display: block; }
.console-log time { font-variant-numeric: tabular-nums; }
.console-log b { font-weight: 400; color: var(--dev-text); }
.console-log .console-alert b { color: var(--dev-error); }
.console-log a { display: inline-flex; align-items: center; min-height: 44px; }
/* séquence d'arrivée : jouée une fois par session, classe posée par console.js */
.console-starting .console-list li, .console-starting .console-log li { animation: console-settle var(--dev-entry) var(--dev-ease) both; animation-delay: calc(var(--i,0) * var(--dev-step)); }
.console-list li:nth-child(2) { --i: 1; } .console-list li:nth-child(3) { --i: 2; } .console-list li:nth-child(4) { --i: 3; }
.console-list li:nth-child(5) { --i: 4; } .console-list li:nth-child(6) { --i: 5; } .console-list li:nth-child(7) { --i: 6; }
.console-list li:nth-child(8) { --i: 7; } .console-list li:nth-child(n+9) { --i: 8; }
.console-log li { --i: 9; } .console-log li:nth-child(2) { --i: 10; } .console-log li:nth-child(n+3) { --i: 11; }
@keyframes console-settle { from { opacity: 0; transform: translateY(6px); } }
@keyframes console-fade { from { opacity: 0; } }

/* Chat : le cadre parle console, le texte lu et écrit garde une police de lecture. */
.chat-app :is(button, select, #chat-send, #chat-stop, #chat-close-nav, .chat-avatar, .chat-mark, .chat-composer, .chat-user, .chat-message pre, .chat-message code, .chat-activity, .chat-file, .chat-file img, .chat-approval, .chat-approval pre, .chat-approval input, .chat-approval textarea, .chat-settings, .chat-attach-menu, .chat-loading, .chat-error, .chat-local-label, .chat-area-link, .chat-deliveries, .chat-delivery-type, .chat-delivery-title, .chat-delivery-download, .chat-file-preview, .chat-preview-footer a, .chat-table-scroll, .chat-table-toggle, .chat-table tbody tr, .creation-chat-tools a) { border-radius: 0; }
.chat-agent-label::before { border-radius: 0; }
.chat-sidebar, .chat-header, .chat-status, .chat-footnote, .chat-pending, .chat-agent-label, .chat-activity, .chat-eyebrow, .chat-loading, .chat-bottom, .chat-copy, .chat-deliveries-heading, .chat-delivery-type, .chat-suggestions, .chat-mark { font-family: var(--dev-mono); }
.chat-sidebar { gap: 22px; box-shadow: none; }
.chat-brand a { font: 600 16px/1 var(--dev-mono); letter-spacing: -.04em; color: var(--dev-accent); }
.chat-brand span, .chat-section-label, .chat-eyebrow { letter-spacing: 0; font-weight: 400; text-transform: lowercase; }
.chat-section-label::before { content: "# "; color: var(--dev-accent); }
.chat-eyebrow::before { content: "// "; }
.chat-new { background: transparent; border-color: var(--dev-control); box-shadow: none; font-size: 13px; }
.chat-history-item { font-size: 13px; }
.chat-history-item::before { background: var(--dev-hover); }
.chat-history-item[aria-current=true] { color: var(--dev-accent); }
.chat-avatar { background: var(--dev-raised); border: 1px solid var(--dev-line); }
.chat-profile { font-size: 13px; }
.chat-area-link { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; font-size: 13px; color: var(--dev-accent); text-decoration: none; border: 1px solid var(--dev-line); }
.chat-header { background: var(--dev-bg); border-color: var(--dev-line); }
.chat-header h1 { font: 600 14px/1.5 var(--dev-mono); letter-spacing: 0; margin: 0; }
.chat-settings-toggle { border: 1px solid var(--dev-line); background: var(--dev-sidebar); }
.chat-settings-toggle strong { font-size: 13px; }
.chat-welcome { text-align: left; max-width: 660px; margin: auto; }
.chat-mark { background: var(--dev-raised); border-color: var(--dev-control); color: var(--dev-accent); }
.chat-welcome h2 { font: 600 clamp(20px,2.6vw,28px)/1.25 var(--dev-mono); letter-spacing: -.03em; }
.chat-suggestions { max-width: none; }
.chat-suggestions button { background: var(--dev-surface); font-size: 13px; }
.chat-composer { background: var(--dev-surface); border-color: var(--dev-control); box-shadow: none; }
.chat-composer:focus-within { border-color: var(--dev-accent); box-shadow: none; }
.chat-composer textarea { caret-color: var(--dev-accent); }
.chat-composer textarea::placeholder { color: var(--dev-muted); }
#chat-send, #chat-stop { background: var(--dev-accent); color: var(--dev-on-accent); }
.chat-user { background: var(--dev-raised); border: 1px solid var(--dev-line); }
.chat-message { color: var(--dev-text); font-size: 16px; line-height: 1.8; }
.chat-message a { color: var(--dev-link); }
.chat-message pre, .chat-approval pre { background: var(--dev-deep); border-color: var(--dev-line); }
.chat-message code { font-family: var(--dev-mono); background: var(--dev-raised); color: var(--dev-accent); }
.chat-message pre code { background: transparent; color: var(--dev-text); }
.chat-activity { background: var(--dev-sidebar); }
.chat-file, .chat-approval[data-state]:not([data-state=pending]) { background: var(--dev-surface); }
.chat-approval { background: var(--dev-raised); border-color: var(--dev-control); }
.chat-approval-actions button:first-child, .chat-settings>button { color: var(--dev-on-accent); }
.chat-approval select, .chat-approval input, .chat-approval textarea, .chat-settings select { color: var(--dev-text); background: var(--dev-bg); border-color: var(--dev-control); }
.chat-settings, .chat-attach-menu, .chat-loading, .chat-bottom { background: var(--dev-surface); box-shadow: 0 4px 12px #0003,0 16px 48px #0005; }
.chat-settings { border-color: var(--dev-control); }
.chat-settings h2, .chat-settings label { font-family: var(--dev-mono); }
.chat-settings h2 { font-size: 14px; }
.chat-error { color: var(--dev-error); background: var(--dev-error-bg); border-color: var(--dev-error-line); }
.chat-skip { background: var(--dev-accent); color: var(--dev-on-accent); }
.chat-loading-spinner { border-color: var(--dev-line); border-top-color: var(--dev-accent); border-right-color: var(--dev-accent); }
.chat-app button:active { background: var(--dev-raised); }
.chat-app #chat-send:active, .chat-app #chat-stop:active { background: var(--dev-accent-strong); }
.chat-app .chat-nav-veil, .chat-app .chat-nav-veil:active { background: var(--dev-veil); }
.chat-file-preview::backdrop { background: var(--dev-veil); }

@media(hover:hover) and (pointer:fine) {
  .portal-nav a:hover, .back:hover, .workspace > p:first-child > a:hover { color: var(--dev-text); }
  .quiet:hover { color: var(--dev-text); border-color: var(--dev-control); }
  .secondary:hover, .results a:hover { background: var(--dev-raised); }
  .primary:hover:not(:disabled) { background: var(--dev-accent-strong); }
  .console-row:hover { background: var(--dev-raised); }
  .console-list li[data-vise] .console-row:hover { background: var(--dev-hover); }
  .chat-app .chat-suggestions button:hover, .chat-attach-menu>button:hover { background: var(--dev-raised); }
}
/* les touches ne se montrent qu'à qui a un clavier */
@media(hover:none), (pointer:coarse) { .console-help { display: none; } }
@media(prefers-reduced-motion:reduce) {
  .console-starting .console-list li, .console-starting .console-log li { animation-name: console-fade; }
  .primary:active, .secondary:active, .quiet:active, .console-row:active { transform: none; }
}
@media(max-width:760px) {
  body.portal { font-size: 13px; }
  .top { padding: 4px 16px; gap: 0 12px; }
  .top form { margin-left: 0; }
  .brand + .top-clock, .portal-nav + .top-clock { margin-left: auto; }
  .top-clock span { display: none; }
  .portal-nav { order: 3; width: 100%; margin: 0 -10px; border-top: 1px solid var(--dev-line); }
  .portal-nav a { padding: 0 10px; font-size: 12px; }
  .portal-nav a:first-child { display: none; }
  .console-prompt { flex-wrap: nowrap; }
  .console-prompt input { min-width: 0; }
  .console-host, .console-path { display: none; }
  .console-row { grid-template-columns: minmax(0,1fr); gap: 2px; padding: 10px 8px; }
  .chat-suggestions { grid-template-columns: 1fr; gap: 10px; }
  .chat-welcome { padding-top: 20px; }
  .chat-suggestions button { padding: 14px 16px; }
}
