@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

@font-face { font-family: "Orkney"; src: url("/static/fonts/Orkney-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Orkney"; src: url("/static/fonts/Orkney-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Orkney"; src: url("/static/fonts/Orkney-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Orkney"; src: url("/static/fonts/Orkney-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Jetons semantiques, RGB separes par des espaces pour les modificateurs d'opacite. Theme clair. */
  --c-ink:     0 26 92;
  --c-paper:   245 248 252;
  --c-line:    220 228 239;
  --c-surface: 255 255 255;
  --c-brand:   0 92 232;

  /* Teintes relevees sur le logo My Personal Coach. Le cyan du systeme BYIA a
     ete retire : la marque ne tient que sur le bleu, le navy et l'orange, et
     une quatrieme teinte se lisait comme une couleur d'un autre logo. */
  --byia-navy:     #001a5c;
  --byia-blue:     rgb(var(--c-brand));
  --byia-sky:      rgb(var(--c-brand));
  --byia-orange:   #f8701f;
  --logo-navy-deep:    #002878;
  --logo-blue-light:   #1b7bff;
  --logo-orange-light: #ffa51f;
  --logo-orange-deep:  #ff4a18;
  --byia-gray-50:  #f5f8fc;
  --byia-gray-200: #dce4ef;
  --byia-gray-400: #8fa3bf;
  --byia-gray-500: #5c7a9b;

  --brand-50:  #e3edff;
  --brand-100: #c2d8ff;
  --brand-500: rgb(var(--c-brand));
  --brand-600: #0049c4;
  --brand-700: #002878;
  --sky-100:   #e3edff;
  --sky-300:   #6ba3f7;
  --signal-amber: #f8701f;
  --signal-coral: #db5a42;

  /* Roles d'interface construits sur les jetons */
  --ink:      rgb(var(--c-ink));
  /* ink/70 est le seul palier secondaire du nuancier BYIA qui atteint 4.5:1 en
     theme clair (5.51 sur blanc). Les paliers 60 et 55, par defaut chez BYIA,
     plafonnent a 4.08 et 3.51 sur blanc. */
  --ink-70:   rgb(var(--c-ink) / .7);
  --ink-60:   rgb(var(--c-ink) / .6);
  --ink-55:   rgb(var(--c-ink) / .55);
  --ink-45:   rgb(var(--c-ink) / .45);
  --ink-08:   rgb(var(--c-ink) / .08);
  --paper:    rgb(var(--c-paper));
  --surface:  rgb(var(--c-surface));
  --line:     rgb(var(--c-line));
  --on-solid: #ffffff;

  /* Roles d'accent sensibles au theme. Le bloc .dark de BYIA ne retourne que
     ink/paper/line/surface, donc toute teinte de marque associee a une couleur
     semantique a besoin de sa variante sombre. */
  --accent-text:        var(--brand-500);
  --accent-text-strong: var(--brand-600);
  --tint:       var(--brand-50);
  --tint-ink:   var(--brand-700);
  --tint-line:  var(--brand-100);
  --sky-tint:   #e3edff;
  --sky-ink:    #002878;
  --amber-tint: rgb(248 112 31 / .12);
  --amber-ink:  #8f3a0e;
  --amber-line: rgb(248 112 31 / .3);
  --coral-tint: rgb(219 90 66 / .12);
  --coral-ink:  #8f2f22;
  --coral-line: rgb(219 90 66 / .3);
  /* Quatrieme identite d'agent, batie sur --logo-orange-light et non sur une
     teinte nouvelle : la marque ne tient que sur le bleu, le navy et l'orange.
     Le corail n'etait pas disponible, il porte deja l'erreur (message echoue,
     suppression, toast) et un pastille corail se lirait comme une alerte. */
  --gold-tint:  rgb(255 165 31 / .16);
  --gold-ink:   #7a4a08;

  /* Marque du partenaire, distincte de --signal-amber, jamais un accent d'interface */
  --orange-brand: #ff7900;

  --gradient-navy: linear-gradient(135deg, #0b4bb0 0%, #002878 55%, #001a5c 100%);
  --gradient-sky:  linear-gradient(120deg, #1b7bff 0%, #002878 100%);

  --shadow-soft:   0 8px 24px rgba(0, 26, 92, .1);
  --shadow-action: 0 8px 20px rgb(var(--c-brand) / .28);
  --shadow-lift:   0 14px 36px rgba(0, 26, 92, .14);
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 999px;
  --font-body:    "Orkney", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Montserrat", "Orkney", ui-sans-serif, system-ui, sans-serif;
  --sidebar: 232px;

  color-scheme: light;
}

/* Theme sombre, inverse les jetons semantiques. Marque, ciel et signaux restent identiques. */
.dark {
  --c-ink:     226 235 246;
  --c-paper:   8 18 33;
  --c-line:    32 47 70;
  --c-surface: 16 28 48;
  --accent-text:        #8fb8ff;
  --accent-text-strong: #6ba3f7;
  --tint:               #0b2a63;
  --tint-ink:           #c2d8ff;
  --tint-line:          #173f8a;
  --sky-tint:           #112a5c;
  --sky-ink:            #dbe8ff;
  --amber-tint:         #332a30;
  --amber-ink:          #f5c9a8;
  --amber-line:         #5c4033;
  --coral-tint:         #302633;
  --coral-ink:          #f5bdb3;
  --coral-line:         #5c3a33;
  --gold-tint:          #332e20;
  --gold-ink:           #f5d9a8;
  color-scheme: dark;
}

/* Sans choix explicite, la preference systeme applique les memes valeurs. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    --c-ink:     226 235 246;
    --c-paper:   8 18 33;
    --c-line:    32 47 70;
    --c-surface: 16 28 48;
    --accent-text:        #8fb8ff;
    --accent-text-strong: #6ba3f7;
    --tint:               #0b2a63;
    --tint-ink:           #c2d8ff;
    --tint-line:          #173f8a;
    --sky-tint:           #112a5c;
    --sky-ink:            #dbe8ff;
    --amber-tint:         #332a30;
    --amber-ink:          #f5c9a8;
    --amber-line:         #5c4033;
    --coral-tint:         #302633;
    --coral-ink:          #f5bdb3;
    --coral-line:         #5c3a33;
    --gold-tint:          #332e20;
    --gold-ink:           #f5d9a8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-height: 100vh;
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, textarea:disabled { cursor: not-allowed; opacity: .5; }
button, input, textarea { outline: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--byia-sky); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.noscript { margin: 0; padding: 16px; color: var(--amber-ink); text-align: center; background: var(--amber-tint); border-bottom: 1px solid var(--amber-line); }

.login-view { min-height: 100vh; padding: 30px clamp(24px, 5vw, 68px); }
.login-brand, .app-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
/* Le logo se suffit : ni fond, ni ombre, ni arrondi sous la marque. */
.brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-mark { flex: 0 0 auto; width: 34px; height: 34px; }
.brand-word { display: inline-flex; flex-wrap: wrap; gap: 0 .28em; line-height: 1.15; }
.brand-word-accent { color: var(--byia-orange); }
.login-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .68fr); align-items: center; gap: clamp(48px, 7vw, 120px); width: min(1140px, 100%); min-height: calc(100vh - 92px); margin: auto; }
.login-intro { max-width: 620px; }
.eyebrow, .card-kicker { margin: 0 0 12px; color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.login-intro h1, .home-header h1, .page-header h1 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.login-intro h1 { font-size: clamp(38px, 5.2vw, 60px); }
.login-intro > p:not(.eyebrow) { max-width: 540px; margin: 22px 0; color: var(--ink-70); font-size: 17px; }
.orange-demo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-70); font-size: 13px; font-weight: 500; }
.orange-demo span { width: 16px; height: 16px; background: var(--orange-brand); }
.login-card { padding: clamp(26px, 3.5vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); }
.login-card h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.login-card > p { margin: 0 0 24px; color: var(--ink-70); font-size: 14px; }
.login-card label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.password-wrap { position: relative; }
.password-wrap input { width: 100%; height: 48px; padding: 0 50px 0 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 14px; transition: border-color .15s ease; }
.password-wrap input:focus { border-color: var(--accent-text); }
.password-wrap .icon-button { position: absolute; top: 6px; right: 7px; }
.icon-button { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 9px; color: var(--ink-70); background: transparent; border: 0; border-radius: var(--radius-pill); transition: background .15s ease, color .15s ease; }
.icon-button:hover { color: var(--accent-text-strong); background: var(--tint); }
.icon-button svg { width: 21px; }
.form-error { margin: 10px 0 0 !important; color: var(--coral-ink) !important; font-size: 13px; font-weight: 500; }
.primary-button, .outline-button, .danger-button, .agent-button, .send-button { min-height: 40px; padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: 14px; font-weight: 700; transition: background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease, transform .12s ease; }
.primary-button, .agent-button, .send-button { color: var(--on-solid); background: var(--brand-600); border-color: var(--brand-600); box-shadow: var(--shadow-action); }
.primary-button:hover, .agent-button:hover, .send-button:hover { filter: brightness(1.1); }
.primary-button:active, .agent-button:active, .send-button:active, .outline-button:active, .danger-button:active { transform: scale(.97); }
.full-button { display: flex; justify-content: center; gap: 9px; align-items: center; width: 100%; margin-top: 20px; }
.privacy-note { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0 !important; color: var(--ink-70); font-size: 12px !important; line-height: 1.5; }
.privacy-note svg { flex: 0 0 auto; width: 17px; margin-top: 1px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: var(--sidebar); padding: 26px 14px 20px; background: var(--surface); border-right: 1px solid var(--line); }
.app-brand { margin: 0 8px 34px; }
.side-nav { display: grid; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 13px; color: var(--ink-70); background: transparent; border: 0; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; text-align: left; transition: background .15s ease, color .15s ease; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { color: var(--accent-text-strong); background: var(--tint); }
.nav-item.active { color: var(--tint-ink); background: var(--tint); }
.nav-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px; color: var(--on-solid); background: var(--brand-500); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.side-note { display: flex; gap: 10px; margin: auto 2px 20px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-xl); font-size: 12px; }
.side-note-icon { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; color: var(--on-solid); background: var(--brand-600); border-radius: 50%; font-weight: 700; }
/* Cible les enfants du bloc de texte, pas l'icone: .side-note span l'emportait
   sur .side-note-icon par specificite et ecrasait sa couleur et son display. */
.side-note strong, .side-note > div > span { display: block; }
.side-note > div > span { margin-top: 3px; color: var(--ink-70); }
.side-footer { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.engine-state { display: flex; align-items: center; gap: 8px; min-height: 24px; color: var(--ink-70); font-size: 11px; }
.state-dot { flex: 0 0 auto; width: 7px; height: 7px; background: var(--byia-gray-400); border-radius: 50%; }
.engine-state.available .state-dot { background: var(--byia-sky); box-shadow: 0 0 0 4px rgb(var(--c-brand) / .18); }
.engine-state.unavailable .state-dot { background: var(--signal-amber); }
.text-button { justify-self: start; padding: 2px 0; color: var(--ink-70); background: none; border: 0; font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--accent-text-strong); }
.main-content { min-height: 100vh; margin-left: var(--sidebar); }
.page-view { width: min(1240px, 100%); margin: 0 auto; padding: clamp(34px, 4vw, 60px) clamp(26px, 4vw, 60px) 64px; }
.home-header, .page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 36px; }
.home-header h1 { font-size: clamp(32px, 4.2vw, 46px); }
.outline-button { color: var(--ink); background: var(--surface); border-color: var(--line); }
.outline-button:hover { color: var(--accent-text-strong); border-color: var(--accent-text); }
.compact { min-height: 36px; padding: 0 16px; font-size: 13px; }

/* Quatre colonnes, puis deux, jamais trois : auto-fit choisissait trois colonnes
   sur un ecran courant et laissait la quatrieme carte seule sur sa ligne. Avec
   quatre agents, seuls les diviseurs de quatre remplissent les lignes. Le
   passage a une colonne reste gere par la regle a 1050px plus bas. */
.agent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1320px) { .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.agent-card { position: relative; display: flex; flex-direction: column; min-height: 540px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.agent-card:hover { border-color: var(--tint-line); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.agent-illustration { height: 178px; overflow: hidden; }
.agent-illustration svg { width: 100%; height: 100%; stroke-width: 2.2; }
/* Les illustrations gardent leurs teintes claires dans les deux themes, comme une image. */
.career-illustration { background: #e3edff; }
.sport-illustration { background: #ffe6d2; }
.tutor-illustration { background: #c2d8ff; }
.finance-illustration { background: #ffeecd; }
.agent-illustration .blob { fill: rgba(255, 255, 255, .5); stroke: none; }
.agent-illustration .paper, .agent-illustration .book { fill: #ffffff; stroke: #001a5c; }
.agent-illustration .line { stroke: #5c7a9b; }
.agent-illustration .accent { fill: #005ce8; stroke: none; }
.agent-illustration .ink { stroke: #001a5c; }
.agent-illustration .sun { fill: #f8701f; stroke: none; }
/* Le sigle porte sur la piece orange : le gris-bleu de .line n'y tiendrait pas le contraste. */
.agent-illustration .coin-mark { stroke: #ffffff; }
.agent-illustration .person { stroke-width: 5; }
.agent-illustration .ground { stroke: #6ba3f7; }
.agent-illustration .pencil { fill: #f8701f; stroke: #001a5c; }
.agent-card-body { position: relative; display: flex; flex: 1; flex-direction: column; padding: 26px; }
.agent-number { position: absolute; top: 24px; right: 26px; color: var(--ink-70); font-family: var(--font-display); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.agent-card h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.agent-card h2 + p { min-height: 68px; margin: 0; color: var(--ink-70); font-size: 14px; }
.feature-list { display: grid; gap: 8px; margin: 18px 0 24px; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--ink-70); font-size: 13px; }
.feature-list li::before { margin-right: 9px; color: var(--accent-text); font-weight: 700; content: "\2713"; }
.agent-button { display: flex; justify-content: center; gap: 9px; align-items: center; width: 100%; margin-top: auto; }
.welcome-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); }
.welcome-strip > div { display: flex; gap: 14px; align-items: flex-start; }
.welcome-strip > div > span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; color: var(--on-solid); background: var(--brand-500); border-radius: 50%; font-family: var(--font-display); font-size: 12px; font-weight: 800; }
.welcome-strip p { margin: 0; color: var(--ink-70); font-size: 13px; }
.welcome-strip strong { display: block; color: var(--ink); font-weight: 700; }

.page-header h1 { font-size: clamp(28px, 3.4vw, 40px); }
.page-header h1 + p { margin: 10px 0 0; color: var(--ink-70); font-size: 14px; }
.works-list { display: grid; gap: 10px; }
.works-header-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.works-header-actions .outline-button { display: flex; gap: 9px; align-items: center; }
.works-header-actions .selected { color: var(--tint-ink); background: var(--tint); border-color: var(--tint-line); }
.works-toolbar { margin: 4px 0 12px; padding: 20px 0 0; border-top: 1px solid var(--line); }
.works-toolbar h2 { margin: 0 0 14px; font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.agent-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.agent-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; color: var(--ink-70); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.agent-filter:hover { color: var(--accent-text-strong); border-color: var(--accent-text); }
.agent-filter:active { transform: scale(.97); }
.agent-filter.selected { color: var(--on-solid); background: var(--brand-600); border-color: var(--brand-600); box-shadow: var(--shadow-action); }
.filter-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; color: var(--ink-70); background: var(--ink-08); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.agent-filter.selected .filter-count { color: var(--on-solid); background: rgb(255 255 255 / .22); }
.filter-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--byia-sky); }
.filter-dot.sport { background: var(--signal-amber); }
.filter-dot.tutor { background: var(--accent-text); }
.filter-dot.finance { background: var(--logo-orange-light); }
.works-summary { margin: 12px 0; color: var(--ink-70); font-size: 12px; }
.work-card { animation: work-reveal .2s ease; }
@keyframes work-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.work-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 15px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.work-card:hover { border-color: var(--tint-line); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.work-agent-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.work-agent-icon.career { color: var(--sky-ink); background: var(--sky-tint); }
.work-agent-icon.sport { color: var(--amber-ink); background: var(--amber-tint); }
.work-agent-icon.tutor { color: var(--tint-ink); background: var(--tint); }
.work-agent-icon.finance { color: var(--gold-ink); background: var(--gold-tint); }
.work-info { min-width: 0; }
.work-info h2 { overflow: hidden; margin: 0 0 3px; font-family: var(--font-display); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.work-info p { margin: 0; color: var(--ink-70); font-size: 12px; }
.work-status { padding: 5px 12px; color: var(--ink-70); background: var(--ink-08); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.work-status.completed { color: var(--tint-ink); background: var(--tint); }
.work-actions { display: flex; gap: 7px; }
.open-work { min-height: 36px; padding: 0 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; transition: color .15s ease, border-color .15s ease, transform .12s ease; }
.open-work:hover { color: var(--accent-text-strong); border-color: var(--accent-text); }
.open-work:active { transform: scale(.97); }
.delete-work { color: var(--ink-70); font-size: 19px; }
.delete-work:hover { color: var(--coral-ink); background: var(--coral-tint); }
.empty-state { padding: 64px 30px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; color: var(--on-solid); background: var(--brand-600); border-radius: var(--radius-xl); box-shadow: var(--shadow-action); font-size: 22px; }
.empty-state h2 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.empty-state p { margin: 8px 0 22px; color: var(--ink-70); font-size: 14px; }

.workspace-view { width: 100%; max-width: none; height: 100vh; padding: 0; overflow: hidden; }
.workspace-header { display: flex; align-items: center; gap: 12px; height: 78px; padding: 14px clamp(18px, 2.5vw, 34px); background: var(--surface); border-bottom: 1px solid var(--line); }
.back-button { flex: 0 0 auto; font-size: 20px; }
.workspace-heading-wrap { min-width: 0; }
.workspace-meta { display: flex; align-items: center; gap: 8px; height: 18px; }
.agent-label { color: var(--accent-text); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mode-badge { padding: 2px 9px; color: var(--amber-ink); background: var(--amber-tint); border: 1px solid var(--amber-line); border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; }
.workspace-title { display: block; width: min(50vw, 560px); margin-top: 1px; padding: 2px 7px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: var(--radius-lg); font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; }
.workspace-title:hover { border-color: var(--line); }
.workspace-title:focus { background: var(--paper); border-color: var(--accent-text); }
.workspace-actions { margin-left: auto; }
.workspace-grid { display: grid; grid-template-columns: minmax(350px, .9fr) minmax(420px, 1.1fr); height: calc(100vh - 78px); }
.conversation-panel, .result-panel { display: flex; min-width: 0; flex-direction: column; overflow: hidden; }
/* Repere de la zone de depot, qui couvre le panneau entier pendant un glisser. */
.conversation-panel { position: relative; background: var(--surface); border-right: 1px solid var(--line); }
.result-panel { background: var(--paper); overflow-y: auto; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; min-height: 70px; padding: 16px clamp(20px, 2.5vw, 32px); border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.panel-heading .card-kicker { margin-bottom: 2px; font-size: 10px; }
.conversation-notice { margin: 14px clamp(20px, 2.5vw, 32px) 0; padding: 11px 14px; color: var(--amber-ink); background: var(--amber-tint); border: 1px solid var(--amber-line); border-radius: var(--radius-xl); font-size: 12px; }
.messages { flex: 1; overflow-y: auto; padding: 24px clamp(20px, 2.5vw, 32px) 12px; scroll-behavior: smooth; }
.message { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }
.message.user { grid-template-columns: minmax(0, 1fr); max-width: 82%; margin-left: auto; }
.message-avatar { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; color: var(--on-solid); background: var(--brand-600); border-radius: 50%; font-family: var(--font-display); font-size: 13px; font-weight: 800; }
/* Le tour de l'assistant reste du texte nu, seul le message de la personne porte une bulle. */
.message-bubble { font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user .message-bubble { padding: 12px 16px; color: var(--ink); background: var(--tint); border-radius: var(--radius-2xl); }
.message.failed .message-bubble { padding: 12px 16px; color: var(--coral-ink); background: var(--coral-tint); border: 1px solid var(--coral-line); border-radius: var(--radius-2xl); }
/* Le message de l'assistant est structure en paragraphes et en listes, la
   largeur est deja bornee par la colonne de conversation. Le rythme vertical
   est porte par le seul ecart entre freres : une marge basse s'ajouterait a
   celle du bloc suivant, et le dernier bloc pousserait l'heure vers le bas.
   La regle d'ecart doit rester apres celles qui remettent les marges a zero,
   et aussi specifique qu'elles, sans quoi elle est annulee en silence. */
.message-bubble.message-rich { white-space: normal; }
.message-rich > p, .message-rich > .memo-list { max-width: none; margin-block: 0; }
.message-bubble.message-rich > * + * { margin-top: 10px; }
.message-rich .memo-list li { font-size: 15px; line-height: 1.65; }
.message-time { margin-top: 5px; color: var(--ink-70); font-size: 11px; }
.message.user .message-time { text-align: right; }
.math-flag { display: grid; gap: 4px; margin-top: 8px; padding: 10px 13px; color: var(--amber-ink); background: var(--amber-tint); border: 1px solid var(--amber-line); border-radius: var(--radius-xl); font-size: 12px; }
.math-flag strong { font-weight: 700; }
.math-flag ul { margin: 2px 0 0; padding-left: 18px; }
.math-flag li { overflow-wrap: anywhere; }
.document-message > div { display: flex; flex-direction: column; align-items: flex-end; }
.document-card { display: inline-flex; align-items: center; gap: 11px; max-width: 100%; padding: 11px 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--tint-line); border-radius: var(--radius-2xl); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.document-card:hover { border-color: var(--accent-text); box-shadow: var(--shadow-soft); }
.document-card svg { flex: 0 0 auto; width: 20px; color: var(--accent-text); }
.document-text { display: grid; min-width: 0; gap: 1px; text-align: left; }
.document-text strong { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.document-text span { color: var(--ink-70); font-size: 11.5px; }
.message.entering { animation: message-reveal .22s ease-out both; }
.thinking { align-items: center; }
.thinking-bubble { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: fit-content; color: var(--ink-70); font-size: 13px; }
.thinking-dots { display: inline-flex; align-items: center; gap: 4px; height: 16px; }
.thinking-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); animation: thinking-dot 1.35s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .16s; }
.thinking-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes thinking-dot { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-4px); opacity: 1; } }
.thinking-label.swap { animation: thinking-swap .34s ease-out; }
/* Le tour en cours d'ecriture porte exactement la forme d'un tour d'assistant
   ordinaire : il ne doit pas bouger d'un pixel en devenant definitif, sans quoi
   la fin de la reponse se lirait comme un rechargement. Seul le curseur le
   distingue, et il tient sur la derniere ligne plutot que d'en ouvrir une. */
.writing-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--accent-text); border-radius: 1px; vertical-align: text-bottom; animation: caret-blink .9s ease-in-out infinite; }
/* Prend le relais du curseur quand la reponse est ecrite et que le modele
   redige encore la fiche : le texte ne bouge plus, mais l'attente continue et
   doit se dire. Meme rythme de points que l'attente initiale, pour qu'on
   reconnaisse la meme chose. */
.writing-step { display: flex; align-items: center; gap: 9px; margin-top: 9px; color: var(--ink-70); font-size: 12px; }
@keyframes caret-blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .1; } }
@keyframes thinking-swap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes message-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.messages-welcome { max-width: 400px; margin: 8vh auto 28px; text-align: center; }
.messages-welcome .welcome-avatar { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; color: var(--on-solid); background: var(--brand-600); border-radius: var(--radius-xl); box-shadow: var(--shadow-action); font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.messages-welcome h3 { margin: 0 0 7px; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.messages-welcome p { margin: 0; color: var(--ink-70); font-size: 14px; }
.suggestions { display: flex; flex: 0 0 auto; gap: 7px; overflow-x: auto; padding: 0 clamp(20px, 2.5vw, 32px) 12px; scrollbar-width: none; }
.suggestion { flex: 0 0 auto; min-height: 34px; padding: 0 14px; color: var(--ink-70); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; transition: color .15s ease, border-color .15s ease, transform .12s ease; }
.suggestion:hover { color: var(--accent-text-strong); border-color: var(--accent-text); }
.suggestion:active { transform: scale(.97); }
/* container-type plutot qu'une requete media : le panneau de conversation est
   etroit meme sur un grand ecran, puisque la fiche memo lui prend la moitie de
   la place. Ce qui doit s'effacer dans le composeur depend de la largeur du
   composeur, pas de celle de la fenetre. */
.composer { container-type: inline-size; flex: 0 0 auto; margin: 0 clamp(16px, 2.5vw, 28px) clamp(16px, 2.5vw, 24px); padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); transition: border-color .15s ease; }
.composer:focus-within { border-color: var(--accent-text); }
/* La hauteur est menee par le script, qui la recalcule a chaque frappe : la
   poignee de redimensionnement n'a plus rien a regler et se retire, comme sur
   les messageries ou le champ grandit tout seul. max-height reste ici, pour que
   le champ cesse de pousser la conversation hors de l'ecran au-dela. */
/* La hauteur est menee par le script, qui la recalcule a chaque frappe : la
   poignee de redimensionnement n'a plus rien a regler et se retire, comme sur
   les messageries ou le champ grandit tout seul. La hauteur d'un champ vide
   vient de la mesure de son invite de saisie, cote script ; min-height n'est
   qu'un plancher pour le temps que dure le premier calcul. max-height borne la
   pousse, pour que le champ ne chasse pas la conversation hors de l'ecran, et
   overflow-y ne sert qu'a partir de la. */
.composer textarea { display: block; width: 100%; min-height: 44px; max-height: 220px; padding: 10px 11px; overflow-y: auto; resize: none; color: var(--ink); background: transparent; border: 0; font-size: 15px; line-height: 1.5; }
.composer textarea::placeholder { color: var(--ink-70); }
.composer-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px; }
/* Le rappel du raccourci voyage avec le bouton d'envoi plutot que de porter sa
   propre marge automatique : deux marges automatiques dans la meme rangee se
   partageraient l'espace libre et le rappel flotterait au milieu. */
.composer-send { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Il informe une fois et n'a pas a disputer sa largeur au bouton : des que la
   place manque, il s'efface et le raccourci continue de fonctionner. */
.composer-hint { color: var(--ink-45); font-size: 11px; white-space: nowrap; }
.composer-hint kbd { padding: 1px 4px; color: var(--ink-70); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); font-family: inherit; font-size: 10px; font-weight: 700; }
@container (max-width: 440px) { .composer-hint { display: none; } }
/* Plus bas, le libelle du bouton se raccourcit plutot que de disparaitre : le
   trombone seul se comprend moins vite qu'un mot, et la place gagnee suffit. */
@container (max-width: 330px) { .file-button span { font-size: 0; } .file-button span::after { font-size: 12px; content: "Fichier"; } }
.file-button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; color: var(--ink-70); background: transparent; border: 0; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; transition: background .15s ease, color .15s ease; }
.file-button:hover { color: var(--accent-text-strong); background: var(--tint); }
.file-button svg { width: 18px; }
.send-button { display: flex; align-items: center; gap: 9px; min-height: 34px; margin-left: auto; padding: 0 14px; font-size: 13px; }
/* Le champ de saisie montre les pieces jointes tant qu'elles n'ont pas ete
   envoyees : c'est la qu'elles sont encore retirables, et c'est la que la
   personne les cherche apres les avoir deposees. Elles rejoignent le fil au
   moment de l'envoi, avec le message qu'elles accompagnent. */
.attachments { display: flex; flex-wrap: wrap; gap: 7px; padding: 5px 7px 2px; }
.attachments:empty { display: none; }
.attachment { position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; overflow: hidden; padding: 6px 7px 6px 11px; color: var(--tint-ink); background: var(--tint); border: 1px solid var(--tint-line); border-radius: var(--radius-pill); font-size: 12px; }
.attachment svg { flex: 0 0 auto; width: 15px; }
/* min-width: 0 sans quoi la coupure ne se produirait jamais : un element de
   boite flexible ne descend pas sous la largeur de son contenu par defaut, et
   un nom de fichier long deborderait la puce au lieu d'etre abrege. */
.attachment-name { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.attachment-detail { flex: 0 0 auto; opacity: .75; }
.attachment-remove { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 50%; font-size: 11px; line-height: 1; transition: background .15s ease; }
.attachment-remove:hover { background: rgb(var(--c-ink) / .12); }
/* Un depot en cours porte la meme puce, sans croix : il n'existe pas encore
   cote serveur, donc il n'y a rien a retirer tant que la barre court. */
.attachment.uploading { padding-right: 11px; opacity: .8; }
.attachment.uploading::after { position: absolute; inset: auto 0 0; height: 2px; background: var(--gradient-sky); animation: progress 1.2s infinite ease-in-out; content: ""; }
@keyframes progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Revelee pendant un glisser seulement. Elle couvre la conversation entiere,
   pour qu'un fichier lache n'importe ou dans le panneau soit bien recu, et ne
   recoit aucun evenement de pointeur : sinon elle s'interposerait entre le
   curseur et le panneau qui compte les entrees et les sorties. */
.drop-zone { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; background: rgb(var(--c-surface) / .88); backdrop-filter: blur(2px); pointer-events: none; animation: drop-zone-reveal .14s ease-out both; }
.drop-zone-card { display: grid; justify-items: center; gap: 7px; padding: 30px 40px; color: var(--tint-ink); background: var(--tint); border: 2px dashed var(--accent-text); border-radius: var(--radius-2xl); text-align: center; }
.drop-zone-card svg { width: 32px; }
.drop-zone-card strong { font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.drop-zone-card span { font-size: 12px; opacity: .8; }
@keyframes drop-zone-reveal { from { opacity: 0; } to { opacity: 1; } }

.result-heading { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.icon-text-button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; color: var(--ink-70); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; transition: color .15s ease, border-color .15s ease, transform .12s ease; }
.icon-text-button:hover { color: var(--accent-text-strong); border-color: var(--accent-text); }
.icon-text-button:active { transform: scale(.97); }
.icon-text-button svg { width: 16px; }
.artifact-empty { max-width: 340px; margin: auto; padding: 40px 24px; text-align: center; }
.artifact-empty-visual { display: grid; gap: 7px; width: 88px; margin: 0 auto 24px; padding: 19px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
.artifact-empty-visual span { height: 5px; background: var(--tint-line); border-radius: var(--radius-pill); }
.artifact-empty-visual span:nth-child(2) { width: 72%; }
.artifact-empty h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.artifact-empty p { margin: 9px 0 0; color: var(--ink-70); font-size: 13px; }
.memo-sheet { position: relative; flex: 0 0 auto; width: min(700px, calc(100% - 44px)); margin: 26px auto 12px; padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.2vw, 46px); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); }
/* Le bord de gauche tient le role de la marge reliee d'une feuille. */
.memo-sheet::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--byia-sky), var(--brand-500) 62%, var(--brand-700)); content: ""; }
.memo-title { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 29px); font-weight: 800; letter-spacing: -.025em; line-height: 1.14; }
.memo-body { margin-top: 24px; }
.memo-section + .memo-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.memo-section h4 { margin: 0 0 9px; color: var(--accent-text-strong); font-size: 13px; font-weight: 700; }
.memo-section p, .memo-list { max-width: 66ch; margin: 0 0 10px; }
.memo-section p:last-child, .memo-list:last-child { margin-bottom: 0; }
.memo-section p, .memo-list li { font-size: 14.5px; line-height: 1.72; overflow-wrap: anywhere; }
.memo-list { padding-left: 0; list-style: none; }
.memo-list li { position: relative; padding-left: 20px; }
.memo-list li + li { margin-top: 5px; }
.memo-list li::before { position: absolute; top: .6em; left: 4px; width: 5px; height: 5px; background: var(--sky-300); border-radius: 50%; content: ""; }
.memo-foot, .metrics { flex: 0 0 auto; width: min(700px, calc(100% - 44px)); margin: 0 auto; padding-inline: clamp(24px, 3.2vw, 46px); color: var(--ink-70); }
.memo-foot { margin-bottom: 8px; font-size: 11.5px; }
.metrics { margin-bottom: 24px; font-size: 11px; text-align: right; }
.mobile-workspace-tabs, .mobile-nav { display: none; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(4 44 89 / .55); backdrop-filter: blur(3px); }
.modal { width: min(420px, 100%); padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lift); text-align: center; }
.modal-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 16px; color: var(--on-solid); background: var(--signal-coral); border-radius: 50%; font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.modal h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.modal p { margin: 10px 0 26px; color: var(--ink-70); font-size: 14px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.danger-button { color: var(--on-solid); background: var(--signal-coral); border-color: var(--signal-coral); }
.danger-button:hover { filter: brightness(.95); }
.toast-region { position: fixed; z-index: 200; right: 22px; bottom: 22px; display: grid; gap: 9px; width: min(350px, calc(100vw - 44px)); }
.toast { padding: 13px 17px; color: var(--on-solid); background: var(--byia-navy); border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); font-size: 13px; font-weight: 500; animation: toast-in .2s ease-out; }
.toast.error { background: var(--signal-coral); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1050px) {
  :root { --sidebar: 196px; }
  .sidebar { padding-inline: 12px; }
  .side-note { display: none; }
  .agent-grid { grid-template-columns: 1fr; }
  .agent-card { display: grid; grid-template-columns: 240px 1fr; min-height: 0; }
  .agent-illustration { height: 100%; min-height: 320px; }
  .agent-card h2 + p { min-height: 0; }
  .welcome-strip { grid-template-columns: 1fr; }
  .workspace-grid { grid-template-columns: minmax(320px, .85fr) minmax(380px, 1.15fr); }
}

@media (max-width: 760px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .login-view { padding: 20px 18px 36px; }
  .login-grid { display: block; min-height: 0; padding-top: 48px; }
  .login-intro h1 { font-size: 36px; }
  .login-intro > p:not(.eyebrow) { margin: 18px 0; font-size: 16px; }
  .orange-demo { margin-bottom: 32px; font-size: 12px; }
  .login-card { padding: 24px 20px; }
  .sidebar { display: none; }
  .main-content { margin-left: 0; }
  .page-view { padding: 28px 16px 100px; }
  .home-header { display: block; margin-bottom: 26px; }
  .home-header h1 { font-size: 31px; }
  .home-header .outline-button { display: none; }
  .agent-grid { gap: 14px; }
  .agent-card { display: flex; min-height: 0; }
  .agent-illustration { height: 140px; min-height: 0; }
  .agent-card-body { padding: 22px; }
  .agent-card h2 { font-size: 20px; }
  .feature-list { margin-block: 16px 20px; }
  .welcome-strip { padding: 20px; }
  .page-header { display: block; margin-bottom: 26px; }
  .page-header h1 { font-size: 29px; }
  .page-header .primary-button { width: 100%; margin-top: 18px; }
  .work-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .work-status { display: none; }
  .work-actions { grid-column: 2 / 4; }
  .open-work { flex: 1; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: calc(66px + env(safe-area-inset-bottom)); padding: 7px 8px env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
  .mobile-nav .nav-item { justify-content: center; flex-direction: column; gap: 2px; min-height: 52px; padding: 3px; border-radius: var(--radius-xl); font-size: 10px; }
  .mobile-nav .nav-item svg { width: 20px; }
  .workspace-view { height: calc(100vh - 66px - env(safe-area-inset-bottom)); padding: 0; }
  .workspace-header { height: 68px; padding: 10px 14px; }
  .workspace-title { width: calc(100vw - 160px); font-size: 16px; }
  .workspace-actions { margin-left: auto; }
  .workspace-actions .outline-button { width: 40px; min-height: 40px; padding: 0; overflow: hidden; font-size: 0; }
  .workspace-actions .outline-button::after { font-size: 16px; content: "\2713"; }
  .mobile-workspace-tabs { display: grid; grid-template-columns: 1fr 1fr; height: 46px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .mobile-tab { position: relative; color: var(--ink-70); background: transparent; border: 0; font-size: 13px; font-weight: 700; }
  .mobile-tab.active { color: var(--accent-text-strong); }
  .mobile-tab.active::after { position: absolute; inset: auto 16px 0; height: 3px; background: var(--accent-text); border-radius: var(--radius-pill) var(--radius-pill) 0 0; content: ""; }
  .tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; background: var(--signal-amber); border-radius: 50%; }
  .workspace-grid { display: block; height: calc(100% - 114px); }
  .conversation-panel, .result-panel { height: 100%; border: 0; }
  .workspace-grid[data-mobile-panel="conversation"] .result-panel { display: none; }
  .workspace-grid[data-mobile-panel="result"] .conversation-panel { display: none; }
  .panel-heading { min-height: 62px; padding: 12px 16px; }
  .messages { padding: 20px 16px 10px; }
  .message.user { max-width: 90%; }
  .messages-welcome { margin-top: 6vh; }
  .suggestions { padding-inline: 16px; }
  .conversation-notice { margin-inline: 16px; }
  .composer { margin: 0 12px 12px; }
  /* Le detail du fichier cede la place au nom, seul element qui permette de
     reconnaitre la piece qu'on s'apprete a retirer. */
  .attachment-detail { display: none; }
  .drop-zone-card { padding: 22px 26px; }
  .memo-sheet { width: calc(100% - 24px); margin-top: 14px; padding: 24px 20px; }
  .memo-foot, .metrics { width: calc(100% - 26px); padding-inline: 20px; }
  .toast-region { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

@media (max-width: 410px) {
  .login-intro h1, .home-header h1 { font-size: 29px; }
  .agent-illustration { height: 124px; }
  .agent-card-body { padding: 20px; }
  .agent-card h2 { font-size: 19px; }
  .workspace-title { width: calc(100vw - 150px); }
  .send-button span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}