/* MUNGO Fret & Transit — chat (complète styles.css ; ordre des couches déclaré dans styles.css) */
@layer components {
  /* ---------- fenêtre du widget ---------- */
  .widget {
    position: fixed; inset: auto 16px 16px auto; z-index: 70; width: min(400px, calc(100vw - 32px)); height: min(640px, 80dvh, calc(100dvh - 32px));
    max-height: none; margin: 0; border-radius: var(--r-4); background: var(--c-beton); box-shadow: var(--sh-3), 0 0 0 1px rgb(11 42 74 / 0.12); overflow: hidden;
  }
  .widget[open] { display: flex; flex-direction: column; animation: w-in var(--dur-2) var(--ease); }
  .widget::backdrop { background: rgb(11 42 74 / 0.5); }
  .widget .chat { flex: 1; min-height: 0; height: auto; border-radius: 0; box-shadow: none; }
  @keyframes w-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
  @media (max-width: 39.99em) {
    .widget:modal { inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; }
  }
  .widget__err { padding: 1.5rem; display: grid; gap: 1rem; }

  /* ---------- l'application de conversation (chat-ui.js) ---------- */
  .chat { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--c-beton); border-radius: var(--r-4); overflow: hidden; box-shadow: 0 0 0 1px var(--c-line-soft); }
  .chat__nojs { padding: 1.5rem; display: grid; gap: 0.75rem; background: var(--c-white); }
  .chat__nojs ul { display: grid; gap: 0.3rem; padding-left: 1.2rem; }
  .chat__head { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.65rem 0.75rem 0.65rem 1rem; background: var(--c-marine); color: var(--c-white); }
  .chat__id { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
  .chat__id .msg__av { background: var(--c-white); color: var(--c-marine); }
  .chat__name { font-weight: 800; font-size: 1rem; line-height: 1.2; color: var(--c-white); }
  .chat__id .ai-pill { cursor: pointer; min-height: 1.75rem; margin-top: 0.15rem; }
  .chat__id .ai-pill:hover { background: var(--c-orange-soft); }
  .chat__tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }
  .chat__tool { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; min-width: 2.75rem; justify-content: center; padding: 0.35rem 0.7rem; border: 1px solid rgb(255 255 255 / 0.25); border-radius: var(--r-2); background: transparent; color: var(--c-white); font-size: 0.875rem; font-weight: 700; text-decoration: none; }
  .chat__tool:hover { background: var(--c-marine-2); color: var(--c-white); border-color: rgb(255 255 255 / 0.5); }
  .chat__tool[aria-expanded='true'] { background: var(--c-orange); color: var(--c-ink); border-color: var(--c-orange); }
  .chat__tool .i { width: 1.15em; height: 1.15em; }
  .chat :focus-visible { --focus: var(--c-orange-text); }
  .chat__head :focus-visible { outline-color: var(--c-orange); }
  .ai-pop { position: absolute; left: 0.75rem; right: 0.75rem; top: calc(100% + 0.4rem); z-index: 5; padding: 1rem 1.1rem; border-radius: var(--r-3); background: var(--c-white); color: var(--c-ink); box-shadow: var(--sh-3); font-size: 0.9375rem; display: grid; gap: 0.5rem; max-width: 26rem; }
  .ai-pop b { color: var(--c-marine); }
  .chat__label { display: flex; gap: 0.5em; align-items: flex-start; padding: 0.55rem 1rem; background: var(--c-orange-pale); color: #5A2405; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; border-bottom: 1px solid #F6D3BC; }
  .chat__label .i { width: 1.1em; height: 1.1em; color: var(--c-orange-text); margin-top: 0.05em; }
  .chat__stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .chat__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem 0.5rem; display: flex; flex-direction: column; gap: 0.9rem; scroll-behavior: smooth; }
  .chat__log:focus-visible { outline-offset: -3px; }
  .chat__day { align-self: center; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); text-align: center; padding: 0.2rem 0.75rem; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.7); }
  .chat__typing { display: flex; gap: 0.3rem; padding: 0.7rem 0.9rem; margin: 0 1rem 0.5rem 3.7rem; width: max-content; border-radius: 1.1rem; background: var(--c-white); }
  .chat__typing span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c-muted); animation: dot 1.2s infinite ease-in-out; }
  .chat__typing span:nth-child(2) { animation-delay: 0.15s; } .chat__typing span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
  .chat__newer { position: absolute; left: 50%; bottom: 0.75rem; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 0.35em; min-height: 2.5rem; padding: 0.3rem 0.9rem; border: 0; border-radius: var(--r-pill); background: var(--c-marine); color: var(--c-white); font-weight: 700; font-size: 0.875rem; box-shadow: var(--sh-2); }
  .chat__newer .i { width: 1em; height: 1em; }
  .chat__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 1rem 0.2rem; }
  .chat__chips:empty { display: none; }
  .chat__chips .chip { min-height: 2.75rem; font-size: 0.875rem; }
  /* Fin d'un scénario guidé (« À vous : confirmez ou modifiez. ») : sur sa propre ligne, au-dessus des puces */
  .chat__chips .msg__demo { order: -1; flex-basis: 100%; margin: 0; text-align: left; }
  .chat__chips .chip--confirm { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-ink); }
  .chat__form { padding: 0.6rem 1rem 0.85rem; display: grid; gap: 0.3rem; }
  .chat__lab { font-weight: 700; font-size: 0.8125rem; color: var(--c-marine); }
  .chat__inrow { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.35rem 0.35rem 0.35rem 0.85rem; border: 1.5px solid var(--c-control); border-radius: var(--r-3); background: var(--c-white); transition: border-color var(--dur-1), box-shadow var(--dur-1); }
  .chat__inrow:focus-within { border-color: var(--c-marine); box-shadow: 0 0 0 3px rgb(184 70 11 / 0.3); }
  .chat__input { flex: 1; min-width: 0; min-height: 2.75rem; max-height: 8.5rem; padding: 0.6rem 0; border: 0; background: transparent; resize: none; line-height: 1.45; font-size: 1rem; overflow-y: auto; }
  .chat__input:focus, .chat__input:focus-visible { outline: none; }
  .chat__send { min-height: 2.75rem; padding-inline: 0.9rem; flex: none; }
  .chat__help { font-size: 0.75rem; color: var(--c-muted); line-height: 1.4; }
  .chat__count { font-weight: 700; color: var(--c-warn); }
  .chat--page { height: min(82dvh, 760px); min-height: 34rem; }
  @media (max-width: 47.99em) {
    .chat--page { height: min(calc(100dvh - var(--header-h) - var(--badge-h, 5.5rem) - 1rem), 720px); min-height: 28rem; border-radius: var(--r-3); }
    body:has([data-demo-badge]) .chat--page { --badge-h-fallback: 5.5rem; }
    .chat__tool span:not(.visually-hidden) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .chat__head { padding-left: 0.75rem; }
    .chat__id .msg__av { display: none; }
    .chat__tools { gap: 0.25rem; }
    .msg--u .msg__bubble { max-width: 92%; }
  }
  .widget .chat__tool span:not(.visually-hidden) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .confirm { margin: auto; width: min(26rem, calc(100vw - 2rem)); padding: 1.5rem; border-radius: var(--r-3); background: var(--c-white); box-shadow: var(--sh-3); color: var(--c-ink); }
  .confirm::backdrop { background: rgb(11 42 74 / 0.55); }
  .confirm h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .confirm p { color: var(--c-muted); font-size: 0.9375rem; }
  .confirm__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; }

  /* ---------- panneau « Comment l'agent raisonne » : un journal de bord ---------- */
  .reason { display: flex; flex-direction: column; min-height: 0; background: var(--c-white); border-radius: var(--r-4); border: 1px solid var(--c-line-soft); border-top: 4px solid var(--c-marine); overflow: hidden; }
  .reason__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--c-line-soft); }
  .reason__t { display: flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; }
  .reason__t .i { color: var(--c-orange-text); }
  .reason__views { display: flex; gap: 0.3rem; }
  .reason__views .filter { min-height: 2.5rem; font-size: 0.8125rem; padding-inline: 0.75rem; }
  .reason__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.85rem; display: grid; gap: 0.6rem; align-content: start; background: repeating-linear-gradient(0deg, transparent 0 31px, #F3F5F7 31px 32px); }
  .reason__empty { color: var(--c-muted); font-size: 0.9375rem; padding: 0.75rem; background: var(--c-white); border-radius: var(--r-2); border: 1px dashed var(--c-line); }
  .reason__note { padding: 0.7rem 1rem; border-top: 1px solid var(--c-line-soft); font-size: 0.8125rem; color: var(--c-muted); background: var(--c-beton); }
  .turn { background: var(--c-white); border: 1px solid var(--c-line-soft); border-radius: var(--r-2); }
  .turn[open] { border-color: var(--c-marine); box-shadow: var(--sh-1); }
  .turn.is-new { animation: turn-hi 0.4s var(--ease); }
  @keyframes turn-hi { from { background: var(--c-orange-pale); } }
  .turn > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding: 0.6rem 0.75rem; cursor: pointer; min-height: 2.75rem; }
  .turn > summary::-webkit-details-marker { display: none; }
  .turn__n { font-size: 0.75rem; color: var(--c-muted); letter-spacing: 0.04em; }
  .turn__i { font-weight: 800; color: var(--c-marine); font-size: 0.9375rem; }
  .turn__flag { margin-left: auto; font-size: 0.6875rem; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15em 0.5em; border-radius: var(--r-1); background: var(--c-beton); color: var(--c-muted); }
  .turn__flag--hand { background: var(--c-orange-pale); color: #6E2B06; }
  .turn__flag--act { background: var(--c-ok-bg); color: var(--c-ok); }
  .turn__flag--ask { background: var(--c-warn-bg); color: var(--c-warn); }
  .turn__dl { display: grid; gap: 0; padding: 0 0.75rem 0.75rem; font-size: 0.875rem; }
  .turn__dl > div { display: grid; gap: 0.15rem; padding: 0.5rem 0; border-top: 1px dashed var(--c-line-soft); }
  .turn__dl dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-orange-text); font-weight: 600; }
  .turn__dl dd { min-width: 0; overflow-wrap: anywhere; }
  .turn__dl code { font-size: 0.8125rem; background: var(--c-sky); padding: 0.05em 0.3em; border-radius: 3px; color: var(--c-marine); }
  .turn__meter { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .turn__meter meter { width: 8rem; height: 0.7rem; }
  .turn__lvl { font-family: var(--font-mono); font-size: 0.6875rem; padding: 0.1em 0.45em; border-radius: var(--r-1); text-transform: uppercase; letter-spacing: 0.05em; }
  .turn__lvl--fiable { background: var(--c-ok-bg); color: var(--c-ok); }
  .turn__lvl--aconfirmer { background: var(--c-warn-bg); color: var(--c-warn); }
  .turn__lvl--incertaine { background: var(--c-stop-bg); color: var(--c-stop); }
  .turn__tool { display: grid; gap: 0.25rem; padding: 0.5rem 0.6rem; border-radius: var(--r-2); background: var(--c-beton); margin-top: 0.25rem; }
  .turn__guards { display: grid; gap: 0.2rem; }
  .turn__guards li { display: flex; gap: 0.4em; }
  .turn__guards .i { width: 1.05em; height: 1.05em; color: var(--c-ok); margin-top: 0.15em; }
  .turn__guards small { color: var(--c-muted); }
  .turn__json { margin: 0 0.75rem 0.75rem; padding: 0.75rem; max-height: 22rem; overflow: auto; border-radius: var(--r-2); background: var(--c-ink); color: #D7E3F0; font-size: 0.75rem; line-height: 1.5; white-space: pre; }
  .turn__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .turn__chip { font-size: 0.8125rem; padding: 0.1em 0.5em; border-radius: var(--r-1); background: var(--c-sky); color: var(--c-marine); }
  .turn__chip b { font-weight: 700; }

}
@layer components {
  /* Entre 40 et 62 em, le bandeau du kit (à gauche) peut passer sous la fenêtre : on la remonte au-dessus. */
  @media (min-width: 40em) and (max-width: 61.99em) {
    .widget { bottom: calc(16px + var(--badge-h, 0px)); height: min(640px, 80dvh, calc(100dvh - 32px - var(--badge-h, 0px))); }
  }
}