/* ============================================================
   AIRKOOL SUD — page /chat : conversation plein écran avec Olivier,
   façon application de messagerie (barre en haut, fil de messages,
   zone de saisie collée en bas). Les variables viennent de style.css.
   ============================================================ */
html,body.page-chat{height:100%;overflow:hidden;overscroll-behavior:none}
body.page-chat{background:#e9eef4}

/* Écran : fixé au viewport ; sur mobile, --app-h/--app-top suivent le clavier (visualViewport, JS) */
.app-chat{position:fixed;top:0;top:var(--app-top,0px);left:0;right:0;height:100vh;height:100dvh;height:var(--app-h,100dvh);display:flex;flex-direction:column;background:#e9eef4;font-family:var(--police)}

/* ---------- Barre du haut ---------- */
.app-tete{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 4px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--degrade-bleu);color:#fff;box-shadow:0 2px 12px rgba(10,46,92,.25);z-index:2}
.app-retour,.app-action{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#fff;text-decoration:none;transition:background .15s}
.app-retour:hover,.app-action:hover,.app-retour:focus-visible,.app-action:focus-visible{background:rgba(255,255,255,.18);outline:none}
.app-action{background:rgba(255,255,255,.14)}
.app-tete .chat-avatar{width:44px;height:44px}
.chat-identite{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.chat-identite strong{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-identite span{font-size:.76rem;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Fil de messages ---------- */
.app-messages{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;padding:14px 14px 10px;width:100%;max-width:900px;margin:0 auto;
  background-image:radial-gradient(rgba(10,46,92,.06) 1px,transparent 1px);background-size:22px 22px}
.app-jour{align-self:center;margin:2px 0 4px}
.app-jour span{display:inline-block;background:#fff;color:var(--texte-doux);font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:4px 12px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.app-info{align-self:center;margin:0 0 6px;max-width:520px;text-align:center;background:#fff6d6;color:#6b5300;font-size:.78rem;line-height:1.4;padding:8px 14px;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.app-info a{color:inherit;font-weight:600}
.app-messages .msg{position:relative;max-width:78%;padding:9px 12px 6px;border-radius:16px;font-size:.98rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.app-messages .msg time{display:block;margin-top:2px;font-size:.66rem;line-height:1;text-align:right;opacity:.6;white-space:nowrap}
.app-messages .msg.bot{margin-left:36px;background:#fff;color:var(--texte);border-bottom-left-radius:4px;align-self:flex-start}
.app-messages .msg.bot::before{content:"";position:absolute;left:-36px;bottom:0;width:28px;height:28px;border-radius:50%;background:#dbe4ee url(/img/assistant-petit.jpg) center/cover;border:1px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.app-messages .msg.moi{background:var(--bleu-clair);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;margin-left:36px}
.app-messages .msg.moi time{opacity:.8}
.app-messages .msg.attente{padding:13px 14px 11px;line-height:1}
.app-messages .attente i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:#94a3b8;animation:chat-pts 1.2s infinite ease-in-out}
.app-messages .attente i:nth-child(2){animation-delay:.2s}
.app-messages .attente i:nth-child(3){animation-delay:.4s}
@keyframes chat-pts{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}

/* ---------- Assistant indisponible ---------- */
.app-indispo{flex:0 0 auto;margin:0;padding:10px 16px;background:#fdecea;color:#7a1f14;font-size:.88rem;text-align:center;border-top:1px solid #f5c6c0}
.app-indispo[hidden]{display:none}
.app-indispo a{color:inherit;font-weight:700;white-space:nowrap}

/* ---------- Suggestions ---------- */
.chat-suggestions{flex:0 0 auto;display:flex;gap:8px;padding:6px 14px 8px;overflow-x:auto;scrollbar-width:none;width:100%;max-width:900px;margin:0 auto}
.chat-suggestions::-webkit-scrollbar{display:none}
.chat-suggestions[hidden]{display:none}
.chat-suggestions button{flex:0 0 auto;min-height:38px;background:#fff;border:1px solid #bcd3e8;color:var(--bleu-fonce);border-radius:999px;padding:8px 14px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.chat-suggestions button:hover{background:var(--bleu-pale)}

/* ---------- Zone de saisie (collée en bas) ---------- */
.app-saisie{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #dfe6ee}
.app-saisie input{flex:1;min-width:0;min-height:46px;border:1px solid #cbd5e1;border-radius:999px;padding:10px 18px;font:inherit;font-size:16px;background:#f7f9fb} /* 16 px : pas de zoom automatique sur iOS */
.app-saisie input:focus{outline:2px solid var(--bleu-clair);outline-offset:1px;border-color:transparent;background:#fff}
.app-saisie input:disabled{background:#eef1f4;color:#94a3b8}
.app-saisie button{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--degrade-vert);color:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(76,175,50,.35);transition:filter .15s,transform .15s}
.app-saisie button svg{margin-left:2px}
.app-saisie button:hover{filter:brightness(1.08)}
.app-saisie button:active{transform:scale(.94)}
.app-saisie button:disabled{opacity:.55;cursor:default;box-shadow:none}

/* ---------- Grands écrans : le fil garde une largeur de lecture, les barres restent pleine largeur ---------- */
@media(min-width:900px){
  .app-tete{padding-left:max(4px,calc((100% - 900px)/2 + 4px));padding-right:max(10px,calc((100% - 900px)/2 + 10px))}
  .app-saisie{padding-left:max(10px,calc((100% - 900px)/2 + 10px));padding-right:max(10px,calc((100% - 900px)/2 + 10px))}
  .app-messages .msg{max-width:65%}
}
@media(max-width:600px){
  .app-messages{padding:12px 12px 8px}
  .app-messages .msg{max-width:84%}
}
@media(prefers-reduced-motion:reduce){.app-messages .attente i{animation:none}.app-saisie button{transition:none}}