/* ==========================================================================
   LELEON — Assistant IA
   style.css
   --------------------------------------------------------------------------
   Identité visuelle construite à partir du logo :
   - bleu nuit des lettres       → couleur principale (textes, panneau, bulles)
   - bleu vif des arcs           → action (bouton d'envoi, liens, focus)
   - bleu ciel des arcs intérieurs → accents discrets
   - le « O » orbital à 4 nœuds  → avatar de l'assistant + indicateur d'écriture
   - lettres larges et carrées   → typographie Saira en largeur étendue

   Sommaire
   1.  Variables
   2.  Base
   3.  Mise en page
   4.  Panneau de marque
   5.  Fenêtre de chat
   6.  Messages
   7.  Suggestions et actions
   8.  Indicateur d'écriture
   9.  Zone de saisie
   10. Emblème orbital
   11. Animations
   12. Responsive
   13. Mouvement réduit
   ========================================================================== */


/* 1. VARIABLES
   ========================================================================== */
:root {
  /* Couleurs extraites du logo */
  --ink:        #021640;   /* bleu nuit — lettres LELEON */
  --ink-soft:   #0B2459;
  --signal:     #0671F9;   /* bleu vif — arcs extérieurs et nœuds */
  --signal-dk:  #0559C7;
  --orbit:      #0D96F6;   /* bleu ciel — arcs intérieurs */
  --signal-bg:  #E8F1FF;

  /* Neutres teintés de bleu nuit */
  --surface:    #FFFFFF;
  --mist:       #EDF2F9;   /* fond de scène */
  --bubble:     #F1F5FB;   /* bulle de l'assistant */
  --line:       #DDE5F0;
  --line-strong:#C6D2E3;
  --text:       var(--ink);
  --text-muted: #55627E;
  --text-soft:  #7D89A3;

  /* États */
  --success:    #12A150;
  --warning:    #D99A06;
  --offline:    #9AA5BD;
  --danger:     #C23434;
  --danger-bg:  #FDF0F0;
  --danger-line:#F3CFCF;

  /* Typographie */
  --font-display: "Saira", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display-width: 112%;   /* rappelle les lettres larges du logo */

  /* Formes : chaque niveau de hiérarchie a son propre arrondi */
  --r-card:    24px;
  --r-bubble:  18px;
  --r-control: 16px;
  --r-button:  12px;

  --shadow-card: 0 1px 2px rgba(2, 22, 64, .05), 0 30px 70px -30px rgba(2, 22, 64, .30);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --panel-width: 420px;
}


/* 2. BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }

button,
textarea { font: inherit; color: inherit; }

button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-button);
  color: var(--text-muted);
  transition: background-color .2s, color .2s;
}

.icon-btn svg { width: 20px; height: 20px; }

.icon-btn:hover {
  background: var(--bubble);
  color: var(--ink);
}


/* 3. MISE EN PAGE
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--panel-width) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.stage {
  display: flex;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 24px 32px;
}

.scrim { display: none; }


/* 4. PANNEAU DE MARQUE
   ========================================================================== */
.panel {
  --emblem-ink: rgba(255, 255, 255, .85);
  --emblem-core: var(--ink);

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  color: #FFFFFF;
  background-color: var(--ink);
  /* halo lumineux émis par l'orbite, en bas à droite */
  background-image: radial-gradient(90% 55% at 100% 100%, rgba(6, 113, 249, .30), transparent 70%);
}

/* Grand emblème en filigrane */
.panel__orbit {
  position: absolute;
  right: -250px;
  bottom: -250px;
  width: 540px;
  height: 540px;
  opacity: .12;
  pointer-events: none;
}

.panel__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: none;
  color: rgba(255, 255, 255, .8);
}

.panel__close:hover {
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
}

.panel__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 48px 44px 28px;
  overflow-y: auto;
  scrollbar-width: none;
}

.panel__body::-webkit-scrollbar { display: none; }

.panel__logo {
  width: 172px;
  height: auto;
  margin-bottom: 48px;
}

.panel__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-stretch: var(--display-width);
  font-weight: 600;
  font-size: 31px;
  line-height: 1.16;
  letter-spacing: -.01em;
}

.panel__lead {
  max-width: 38ch;
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

.assurances {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.assurances li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .9);
}

.assurances svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--orbit);
}

.contact {
  margin-top: auto;
  padding-top: 32px;
}

.contact__title {
  margin: 0 0 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--font-display);
  font-stretch: var(--display-width);
  font-weight: 500;
  font-size: 16px;
}

.contact__list {
  display: grid;
  gap: 2px;
  margin: 0 -12px;
  padding: 0;
  list-style: none;
}

.contact__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px;
  border-radius: var(--r-button);
  color: inherit;
  text-decoration: none;
  transition: background-color .2s;
}

a.contact__item:hover { background: rgba(255, 255, 255, .06); }

.contact__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(13, 150, 246, .12);
  color: var(--orbit);
}

.contact__icon svg { width: 18px; height: 18px; }

.contact__value {
  display: block;
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.panel__footer {
  margin: 24px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .42);
}


/* 5. FENÊTRE DE CHAT
   ========================================================================== */
.chat {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 780px;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 16px 24px;
  border-bottom: 1px solid var(--line);
}

.chat__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.chat__title {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-width);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__tools {
  display: flex;
  gap: 4px;
}

.chat__info { display: none; }

/* Statut de connexion au serveur */
.status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--offline);
  transition: background-color .3s, box-shadow .3s;
}

.status[data-state="connecting"] .status__dot {
  background: var(--warning);
  animation: blink 1.2s ease-in-out infinite;
}

.status[data-state="online"] .status__dot {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(18, 161, 80, .16);
}


/* 6. MESSAGES
   ========================================================================== */
.chat__messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  padding: 28px 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.chat__messages::-webkit-scrollbar { width: 8px; }
.chat__messages::-webkit-scrollbar-track { background: transparent; }
.chat__messages::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid var(--surface);
  border-radius: 8px;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  animation: msg-in .28s var(--ease) both;
}

.msg--user { justify-content: flex-end; }

.msg__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.msg--bot .msg__content {
  align-items: flex-start;
  max-width: min(36rem, calc(100% - 44px));
}

.msg--user .msg__content {
  align-items: flex-end;
  max-width: min(32rem, 82%);
}

.bubble {
  padding: 12px 16px;
  border-radius: var(--r-bubble);
  font-size: 15.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.msg--bot .bubble {
  background: var(--bubble);
  border-top-left-radius: 6px;
}

.msg--user .bubble {
  background: var(--ink);
  color: #FFFFFF;
  border-top-right-radius: 6px;
  white-space: pre-wrap;
}

/* Mise en forme des réponses de l'assistant */
/* :where() garde une spécificité faible pour que l'espacement ci-dessous s'applique */
.bubble :where(p, ul, ol) { margin: 0; }

.bubble > * + * { margin-top: .6em; }

.bubble ul,
.bubble ol { padding-left: 1.3em; }

.bubble li + li { margin-top: .3em; }

.bubble li::marker { color: var(--signal); }

.bubble strong { font-weight: 600; }

.bubble a {
  color: var(--signal-dk);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bubble a:hover { color: var(--signal); }

.msg--bot .bubble--error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  color: #7A1F1F;
}

.msg__time {
  padding: 0 4px;
  font-size: 12px;
  color: var(--text-soft);
}


/* 7. SUGGESTIONS ET ACTIONS
   ========================================================================== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.chip {
  padding: 8px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  transition: border-color .2s, background-color .2s, color .2s;
}

.chip:hover {
  border-color: var(--signal);
  background: var(--signal-bg);
  color: var(--signal-dk);
}

.chip:disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-button);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}

.action svg { width: 16px; height: 16px; }

.action:hover {
  border-color: var(--ink);
  background: var(--bubble);
}

.action--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: #FFFFFF;
}

.action--primary:hover {
  border-color: var(--ink-soft);
  background: var(--ink-soft);
}


/* 8. INDICATEUR D'ÉCRITURE
   Les 4 nœuds de l'orbite s'allument à tour de rôle pendant la rédaction.
   ========================================================================== */
.bubble--typing {
  font-size: 14.5px;
  color: var(--text-muted);
}

.avatar.is-thinking .emblem__inner {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin 3.2s linear infinite;
}

.avatar.is-thinking .node {
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 1.6s var(--ease) infinite;
}

.avatar.is-thinking .node:nth-child(2) { animation-delay: .4s; }
.avatar.is-thinking .node:nth-child(3) { animation-delay: .8s; }
.avatar.is-thinking .node:nth-child(4) { animation-delay: 1.2s; }


/* 9. ZONE DE SAISIE
   ========================================================================== */
.composer {
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.composer__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
}

.composer__form:focus-within {
  border-color: var(--signal);
  box-shadow: 0 0 0 4px rgba(6, 113, 249, .12);
}

.composer__input {
  flex: 1;
  min-width: 0;
  max-height: 144px;
  padding: 9px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15.5px;
  line-height: 1.5;
  resize: none;
}

.composer__input:focus-visible { outline: none; }

.composer__input::placeholder { color: var(--text-soft); }

.composer__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-button);
  background: var(--signal);
  color: #FFFFFF;
  transition: background-color .2s, transform .15s;
}

.composer__send svg { width: 19px; height: 19px; }

.composer__send:hover:not(:disabled) { background: var(--signal-dk); }

.composer__send:active:not(:disabled) { transform: scale(.94); }

.composer__send:disabled {
  background: var(--line);
  color: var(--text-soft);
  cursor: not-allowed;
}

.composer__note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 4px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-soft);
}

.composer__count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.composer__count.is-max { color: var(--danger); }


/* 10. EMBLÈME ORBITAL (le « O » du logo, redessiné en SVG)
   ========================================================================== */
.avatar {
  display: grid;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
}

.avatar--header {
  width: 48px;
  height: 48px;
  padding: 6px;
}

.msg__avatar {
  width: 36px;
  height: 36px;
  padding: 4px;
}

.emblem {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.emblem .arc {
  fill: none;
  stroke-linecap: round;
  stroke-width: 5;
}

.emblem .arc--ink    { stroke: var(--emblem-ink, var(--ink)); }
.emblem .arc--signal { stroke: var(--signal); }
.emblem .arc--inner  { stroke: var(--orbit); stroke-width: 3.6; }
.emblem .node        { fill: var(--signal); }
.emblem .node__core  { fill: var(--emblem-core, #FFFFFF); }

/* Petite taille : nœuds agrandis et traits ajustés pour garder l'emblème lisible */
.msg__avatar .arc              { stroke-width: 6.5; }
.msg__avatar .arc--inner       { stroke-width: 5; }
.msg__avatar .node circle      { r: 9.5; }
.msg__avatar .node .node__core { r: 3.6; }
.avatar--header .arc           { stroke-width: 6; }
.avatar--header .node circle      { r: 8; }
.avatar--header .node .node__core { r: 3; }


/* 11. ANIMATIONS
   ========================================================================== */
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes blink {
  50% { opacity: .35; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes node-pulse {
  0%, 55%, 100% { transform: scale(1);    fill: var(--signal); }
  22%           { transform: scale(1.4);  fill: var(--orbit); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* 12. RESPONSIVE
   ========================================================================== */

/* Ordinateur portable à faible hauteur : le panneau reste lisible sans défilement */
@media (min-width: 1081px) and (max-height: 860px) {
  .panel__body { padding-top: 36px; }
  .panel__logo { margin-bottom: 36px; }
  .assurances { display: none; }
}

@media (min-width: 1081px) and (max-height: 640px) {
  .panel__lead { display: none; }
}

/* Tablette et petit ordinateur : le panneau devient un tiroir */
@media (max-width: 1080px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .panel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(420px, 88vw);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .32s var(--ease), visibility 0s linear .32s;
  }

  body.panel-open .panel {
    visibility: visible;
    transform: none;
    transition: transform .32s var(--ease);
  }

  .panel__close,
  .chat__info { display: grid; }

  body.panel-open .scrim {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: block;
    background: rgba(2, 22, 64, .5);
    animation: fade-in .25s ease both;
  }
}

/* Smartphone : la conversation occupe tout l'écran */
@media (max-width: 640px) {
  .stage { padding: 0; }

  .chat {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  .chat__header {
    padding: 10px 8px 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .avatar--header {
    width: 42px;
    height: 42px;
    padding: 6px;
  }

  .chat__title { font-size: 16px; }

  .status { font-size: 13px; }

  .chat__messages {
    gap: 18px;
    padding: 20px 14px 12px;
  }

  .msg__avatar {
    width: 32px;
    height: 32px;
    padding: 3px;
  }

  .msg--bot .msg__content { max-width: calc(100% - 40px); }
  .msg--user .msg__content { max-width: 86%; }

  .bubble {
    padding: 11px 14px;
    font-size: 15px;
  }

  .chip {
    padding: 8px 13px;
    font-size: 14px;
  }

  .composer {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .composer__form { padding-left: 14px; }

  /* 16 px minimum : évite le zoom automatique d'iOS sur le champ */
  .composer__input { font-size: 16px; }

  .composer__note { font-size: 12px; }

  .panel__body { padding: 40px 28px 24px; }

  .panel__logo { margin-bottom: 40px; }

  .panel__title { font-size: 26px; }
}


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