/* quentyx-hora / LA SAISIE FLOTTANTE, 2026-09-27. Voir saisie.js.
 *
 * Sa reference (« Ask anything… ») a un halo orange et bleu : il n est pas de Hora. Ici, la
 * matiere des icones de l accueil (--ico-*), mate au repos ; SEULE L ARETE s anime, du reflet
 * chrome du H (--ia-chrome), et seulement pendant que le modele reflechit. */
.sf {
  position: fixed; z-index: 47; right: 18px; bottom: 18px;
  width: min(460px, calc(100vw - 24px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px 16px;
  border: 1px solid transparent; border-radius: 26px;
  background:
    linear-gradient(165deg, var(--ico-haut), var(--ico-bas)) padding-box,
    linear-gradient(180deg, var(--ico-arete), transparent 70%) border-box;
  box-shadow: 0 16px 34px var(--ico-ombre), 0 3px 8px var(--ico-ombre);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .2s;
  cursor: grab;
}
.sf[hidden] { display: none; }
.sf.cache { opacity: 0; transform: scale(.97); pointer-events: none; }
.sf.glisse { cursor: grabbing; transition: none; }
.sf:focus-within { box-shadow: 0 16px 34px var(--ico-ombre), 0 3px 8px var(--ico-ombre), 0 0 0 4px var(--voile); }

.sf textarea {
  display: block; width: 100%; min-height: 26px; max-height: 160px; margin: 0; padding: 2px 0 0; box-sizing: border-box;
  border: 0; outline: 0; background: transparent; resize: none; overflow-y: hidden; cursor: text;
  font: 400 16px/1.5 var(--interface); color: var(--encre);
}
.sf textarea::placeholder { color: var(--encre-4); }
.sf-rang, .ia-rang { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sf-vide { flex: 1 1 auto; min-width: 4px; }

/* Les puces : ronde pour « + » et la page, en gelule pour le mode, le modele et la voix. */
.sf-rond, .sf-puce {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border: 1px solid var(--filet); background: color-mix(in srgb, var(--encre) 3%, transparent);
  color: var(--encre-2); cursor: pointer; font: 500 13.5px var(--interface); transition: color .15s, background .15s, border-color .15s;
}
.sf-rond { width: 34px; padding: 0; border-radius: 50%; }
.sf-puce { padding: 0 12px 0 10px; border-radius: 999px; min-width: 0; max-width: 46%; }
.sf-puce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-rond svg, .sf-puce svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sf-puce .sf-chevron { width: 13px; height: 13px; opacity: .6; margin-left: -2px; }
.sf-rond:hover, .sf-puce:hover, .sf-rond:focus-visible, .sf-puce:focus-visible { color: var(--encre); border-color: var(--encre-4); background: var(--voile); outline: none; }
/* Le modele, fait par `listeChoix` : il prend l allure d une puce. `button.nu` (global) lui
   retirait bord et fond : la regle doit etre plus precise que lui. */
.sf button.sf-voie {
  display: inline-block; height: 34px; padding: 0 26px 0 12px; border: 1px solid var(--filet); border-radius: 999px;
  background: color-mix(in srgb, var(--encre) 3%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 9px center / 13px no-repeat;
  color: var(--encre-2); font: 500 13.5px/32px var(--interface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36%;
}
.sf button.sf-voie:hover { color: var(--encre); border-color: var(--encre-4); }
/* La voix n est pas encore branchee : visible, en retrait (sa decision : la voir le poussera a la faire). */
.sf-voix { color: var(--encre-3); }

.sf-envoyer {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  cursor: pointer; background: var(--encre); color: var(--fond-carte); transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.sf-envoyer svg { width: 18px; height: 18px; }
.sf-envoyer:disabled { opacity: .22; cursor: default; }
.sf-envoyer:not(:disabled):hover { transform: scale(1.08); }

/* Dans la fenetre et la page : les memes puces, un peu plus petites. */
.ia-rang .sf-rond { width: 30px; height: 30px; }
.ia-rang .sf-puce { height: 30px; font-size: 12.5px; padding: 0 10px 0 8px; }
:is(#ia, #convPage) .ia-rang #voieConv { max-width: 40%; }
.ia-rang .ia-envoyer { margin-left: 0; }

/* Le menu des modes, facon reference : icone, nom, une ligne d aide. */
.menu.sf-menu-mode button { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; row-gap: 1px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.menu.sf-menu-mode svg { width: 17px; height: 17px; grid-row: 1 / span 2; }
.sf-mode-nom { font-weight: 500; }
.sf-mode-aide { grid-column: 2; font-size: 12.5px; color: var(--encre-4); }

/* L ARETE QUI REFLECHIT : le reflet chrome du H, pendant que le modele travaille, et seulement la. */
html.ia-reflechit .sf, html.ia-reflechit #ia {
  border: 1px solid transparent;
  background-origin: border-box;
}
html.ia-reflechit .sf {
  background:
    linear-gradient(165deg, var(--ico-haut), var(--ico-bas)) padding-box,
    var(--ia-chrome) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: sfReflet 1.5s linear infinite;
}
html.ia-reflechit #ia { box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 30%, transparent), 0 24px 60px rgba(0, 0, 0, .5);
  animation: sfRespire 1.6s ease-in-out infinite; }
@keyframes sfReflet { to { background-position: 0 0, -200% 0; } }
@keyframes sfRespire { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 55%, transparent), 0 0 26px color-mix(in srgb, var(--encre) 10%, transparent), 0 24px 60px rgba(0, 0, 0, .5); } }
@media (prefers-reduced-motion: reduce) { html.ia-reflechit .sf, html.ia-reflechit #ia { animation: none; } }

/* LE ROND N EST PLUS AFFICHE : au bureau la saisie le remplace, au telephone il est dans la barre. */
#iaRond { display: none !important; }
.barre-ia { display: none !important; }
.barre-ia .ia-h { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .barre-ia { display: inline-flex !important; }
  .sf { display: none !important; }
  /* LA RANGEE DE LA FEUILLE, mesuree a 360 px : le modele etait ecrase a 22 px. La voix se
     reduit a son icone, le mode perd son chevron ; le modele garde de quoi se lire. */
  .ia-rang { gap: 5px; }
  .ia-rang .sf-voix span, .ia-rang .sf-puce .sf-chevron { display: none; }
  .ia-rang .sf-voix { width: 30px; padding: 0; border-radius: 50%; }
  :is(#ia, #convPage) .ia-rang #voieConv { flex: 1 1 auto; min-width: 56px; max-width: none; }
}

/* ── 360 a 480 px (Galaxy S, iPhone SE, iPhone 15, Pixel) : la rangee de la feuille se
   resserre encore, la zone de saisie aussi, pour que le modele reste lisible. */
@media (max-width: 480px) {
  .ia-rang { gap: 4px; }
  .ia-rang .sf-puce { padding: 0 9px 0 7px; }
  .ia-pied { padding-left: 10px; padding-right: 10px; }
}

/* ── LE DEBORDEMENT, releve par Anthony sur capture le 2026-09-27 ─────────────
   Avec « GPT-OSS 120B » la fleche sortait de la barre : toutes les puces etaient
   `flex: 0 0 auto`, rien ne pouvait ceder. Le MODE et le MODELE cedent desormais
   (coupes en « … ») ; le « + », la voix, la page et la fleche gardent leur taille. */
.sf-rang > *, .ia-rang > * { min-width: 0; }
.sf .sf-puce, .sf button.sf-voie, .ia-rang .sf-puce:not(.sf-voix) { flex: 0 1 auto; }
.sf .sf-voix, .sf-rond, .sf-envoyer, .ia-envoyer { flex: 0 0 auto; }
.sf button.sf-voie { max-width: none; }
.sf-puce span { min-width: 0; }

/* DANS LA FENETRE (420 px), le mode se coupait en « Equi… » : la voix y garde son icone seule,
   son nom reste dans son infobulle. La barre flottante, plus large, garde « Voix » en toutes lettres. */
.ia-rang .sf-voix span { display: none; }
.ia-rang .sf-voix { width: 30px; padding: 0; border-radius: 50%; }

/* ── LA CARTE UNIQUE, 2026-09-27 (voir `rangerNav`, saisie.js) ──────────────
   Au bureau, la barre de navigation vit en haut de la carte : elle perd son allure
   de pilule (fond, ombre, position), la carte l encadre. 520 px : sur sa capture, le
   mode et le modele se coupaient en « Eq… » et « GPT-OSS … » a 460. */
.sf { width: min(520px, calc(100vw - 24px)); }
.barre-nav.dans-carte {
  position: static; z-index: auto; left: auto; bottom: auto; padding: 0; margin: 0;
  background: none; box-shadow: none; border-radius: 0; cursor: inherit;
}
.sf .barre-nav.dans-carte {
  justify-content: space-between; margin: -4px -2px 0 -6px; padding-bottom: 8px; border-bottom: 1px solid var(--filet-2);
}
/* REPLIEE : la rangee de navigation seule, et le H pour redeployer la saisie. */
.sf.replie { padding: 6px 8px; gap: 0; cursor: pointer; }
.sf.replie > :not(.barre-nav) { display: none; }
.sf.replie .barre-nav.dans-carte { margin: 0; padding-bottom: 0; border-bottom: 0; }
.sf.replie .barre-nav .barre-ia { display: inline-flex !important; }

/* Conversation ouverte : la meme rangee devient la tete de la fenetre, plus compacte ; le
   nom « Hora » s efface devant elle, « pleine page » et « fermer » restent au bout. */
#ia .ia-tete { flex-wrap: wrap; row-gap: 4px; }
#ia .ia-tete:has(.barre-nav) > .ia-h, #ia .ia-tete:has(.barre-nav) > .ia-nom { display: none; }
#ia .ia-tete .barre-nav.dans-carte { flex: 1 1 auto; min-width: 0; gap: 0; order: 0; }
#ia .ia-tete .barre-nav.dans-carte button { height: 34px; }
#ia .ia-tete .barre-nav.dans-carte .barre-bouton, #ia .ia-tete .barre-nav.dans-carte .barre-chercher { width: 34px; padding: 0 !important; }
#ia .ia-tete .barre-nav.dans-carte .barre-chercher span { display: none; }
#ia .ia-tete .barre-nav.dans-carte .barre-sep { margin: 0 2px; }
#ia .ia-tete .ia-outils { order: 1; }
#ia .ia-tete #iaIci { order: 2; }
/* Le MODE ne cede pas (ses noms sont courts, « Approfondi » au plus) : c est le nom du modele,
   souvent long (« Switch · gpt-oss-120b »), qui se coupe en premier. */
.sf #sfMode, .ia-rang #iaMode { flex-shrink: 0; }

/* LE ROND DE LA MARQUE AVYIS (2026-09-28). Un disque sombre et le logo complet (`Logo-avyis.svg`, la
   marque et le mot) en blanc argente : le meme sur tous les themes, c est la marque, pas un decor. Le logo
   est blanc sur transparent : il sert de MASQUE, peint par un degrade. Aussi en tete de l Atelier. */
.ia-badge { display: grid; place-items: center; flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #2c2c2e, #0b0b0c 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 28px var(--ico-ombre, rgba(0,0,0,.4)); }
.ia-badge-logo { display: block; width: 62%; aspect-ratio: 75 / 55; margin-top: 4%;
  -webkit-mask: url(/Assets/Logo-avyis.svg) center / contain no-repeat;
          mask: url(/Assets/Logo-avyis.svg) center / contain no-repeat;
  background: linear-gradient(170deg, #ffffff 0%, #e4e7ec 45%, #b9bec7 100%); }
.ia-accueil .ia-badge { margin-bottom: 6px; }
/* LE LOGO SEUL, dans le chat (2026-09-28) : pas de rond, la marque et le mot, a l encre du theme. */
.ia-logo { display: block; flex: 0 0 auto; width: 118px; aspect-ratio: 75 / 55; margin-bottom: 10px;
  -webkit-mask: url(/Assets/Logo-avyis.svg) center / contain no-repeat;
          mask: url(/Assets/Logo-avyis.svg) center / contain no-repeat;
  background: var(--encre); }
.conv-page.conv-vide .conv-fil .ia-logo { width: 168px; margin-bottom: 14px; }

/* ── LA PAGE DES CONVERSATIONS, VIDE : CENTREE (2026-09-27) ─────────────────
   La tete reste en haut ; Avyis, le bonjour, les idees et la saisie forment UN bloc
   au milieu de ce qui reste, un peu au-dessus du centre (l oeil le lit centre). */
.conv-page.conv-vide .conv-fil .ia-fil { flex: 0 0 auto; margin-top: auto; overflow: visible; }
.conv-page.conv-vide .conv-fil .ia-pied { margin-bottom: auto; padding-bottom: max(8vh, 24px); }
.conv-page.conv-vide .conv-fil .ia-accueil { min-height: 0; align-items: center; text-align: center; }
.conv-page.conv-vide .conv-fil .ia-idees { width: 100%; }
.conv-page.conv-vide .conv-fil .ia-idee { text-align: left; }
.conv-page.conv-vide .conv-fil .ia-badge { width: 112px; height: 112px; }

/* La barre de navigation au bout de la tete d une conversation (bureau), compacte. */
#convTete .barre-nav.dans-carte { margin-left: auto; flex: 0 0 auto; gap: 0; }
#convTete .barre-nav.dans-carte button { height: 34px; }
#convTete .barre-nav.dans-carte .barre-bouton { width: 34px; }
#convTete .barre-nav.dans-carte .barre-chercher { padding: 0 12px 0 10px !important; font-size: 14px; }