/* ============================================================
   Chat Bana — parcours conversationnel de commande (/bana/commander).
   S'appuie sur les jetons de site.css + bana.css (couleurs de marque,
   surfaces, thème clair/sombre). Palette : vert trajet #1D9E75,
   orange arrivée #D85A30, jaune soleil #FAC775, vert nuit #173404.
   ============================================================ */

.bana-chat-body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(1100px 520px at 90% -10%, color-mix(in srgb,var(--orange) 12%,transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  color:var(--ink);
}

/* ---- Coquille centrée, façon application ---- */
.chat-shell{
  display:flex;flex-direction:column;
  width:100%;max-width:640px;margin:0 auto;
  height:100vh;height:100dvh;
  background:var(--surface);
  box-shadow:0 30px 80px -50px rgba(10,37,81,.55);
}
@media (min-width:680px){
  .chat-shell{height:min(880px,100dvh);margin:max(0px,calc((100dvh - 880px)/2)) auto;border-radius:20px;overflow:hidden}
}

/* ---- En-tête ---- */
.chat-head{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));
  background:var(--surface);border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.chat-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.chat-logo{color:var(--blue);display:flex;flex:0 0 auto}
.chat-brand-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.chat-brand-txt b{font-family:"Sora","Manrope",sans-serif;font-weight:800;font-size:18px;color:var(--ink)}
.chat-brand-txt i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}

.chat-call{
  margin-left:auto;display:flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--blue);background:var(--blue-050);border-radius:999px;padding:7px 13px;
}
.chat-call svg{flex:0 0 auto}
.chat-call span{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.chat-call b{font-size:13px;font-weight:800;white-space:nowrap}
.chat-call i{font-style:normal;font-size:10px;font-weight:600;opacity:.85}
@media (max-width:480px){ .chat-call i{display:none} .chat-call b{font-size:12px} }

.chat-progress{width:48px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;flex:0 0 auto}
.chat-progress span{display:block;height:100%;width:20%;border-radius:3px;background:var(--blue);transition:width .35s ease}

/* ---- Zone de conversation ---- */
.chat-body{
  flex:1 1 auto;overflow-y:auto;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;
}

/* ---- Groupes de messages ---- */
.msg{display:flex;gap:10px;align-items:flex-end}
.msg.user{flex-direction:row-reverse}
.msg-av{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--blue);font-size:17px;
}
.msg.user .msg-av{background:var(--orange)}
.msg-bubble{
  max-width:82%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.55;
}
.msg.bot .msg-bubble{background:var(--blue-050);color:var(--ink);border-bottom-left-radius:5px}
.msg.user .msg-bubble{background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.msg-bubble strong{font-weight:800}

/* ---- Blocs interactifs (boutons, formulaires) ---- */
.chat-block{display:flex;flex-direction:column;gap:10px;margin:2px 0 4px 44px}
@media (max-width:520px){ .chat-block{margin-left:0} }

.chat-btn{
  appearance:none;border:0;cursor:pointer;width:100%;
  padding:14px 18px;border-radius:12px;font-size:15px;font-weight:700;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.chat-btn-primary{background:var(--blue);color:#fff}
.chat-btn-primary:hover{background:var(--blue-600);transform:translateY(-1px);box-shadow:0 10px 22px -14px var(--blue)}
.chat-btn-accent{background:var(--orange);color:#fff}
.chat-btn-accent:hover{filter:brightness(.96);transform:translateY(-1px)}
.chat-btn-ghost{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.chat-btn-ghost:hover{background:var(--blue-050)}
.chat-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.chat-btn .price{margin-left:auto;font-weight:800;opacity:.95}
.chat-btn-choice{justify-content:space-between;text-align:left}

/* ---- Champs téléphone (préfixe fixe + 8 chiffres) ---- */
.chat-field{display:flex;flex-direction:column;gap:6px}
.chat-label{font-size:13.5px;font-weight:700;color:var(--ink)}
.chat-phone{
  display:flex;align-items:center;gap:6px;padding:12px 14px;
  border:2px solid var(--line);border-radius:12px;background:var(--surface);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.chat-phone:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.chat-phone .pfx{font-weight:800;color:var(--blue);flex:0 0 auto;font-family:"Sora",monospace;letter-spacing:.5px}
.chat-phone input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-size:17px;font-weight:700;letter-spacing:2px;color:var(--ink);font-family:"Sora","Manrope",monospace;
}
.chat-phone input::placeholder{color:var(--muted);font-weight:500;letter-spacing:1px}
.chat-phone.err{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 7%,var(--surface))}
.chat-err{color:var(--orange);font-size:12.5px;font-weight:700;min-height:1px}

/* ---- Champ texte (« Tu envoies quoi ? ») ---- */
.chat-input{
  width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);font-size:16px;font-weight:600;font-family:inherit;
  outline:0;transition:border-color .2s ease,box-shadow .2s ease;
}
.chat-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.chat-input::placeholder{color:var(--muted);font-weight:500}

/* ---- Récapitulatif ---- */
.chat-recap{
  background:var(--blue-050);border:1px solid color-mix(in srgb,var(--blue) 28%,transparent);
  border-radius:14px;padding:6px 16px;
}
.chat-recap .row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--blue) 16%,transparent);font-size:15px}
.chat-recap .row:last-child{border-bottom:0}
.chat-recap .k{color:var(--body);font-weight:500}
.chat-recap .v{color:var(--ink);font-weight:800;text-align:right}
.chat-recap .v.price{font-size:22px;color:var(--orange)}

/* ---- Encadré paiement (jaune, très visible, lisible sur les 2 thèmes) ---- */
.chat-pay{
  border-radius:14px;padding:15px 16px;
  background:#FFF6E0;border:2px solid var(--bana-sun,#FAC775);
}
.chat-pay .pt{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;
  color:#8A5A00;text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}
.chat-pay .px{color:#6B4A08;font-size:14px;font-weight:600;line-height:1.55}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chat-pay{background:#3A2E0C;border-color:var(--bana-sun,#FAC775)}
  :root:not([data-theme="light"]) .chat-pay .pt{color:#FAC775}
  :root:not([data-theme="light"]) .chat-pay .px{color:#F0E2C0}
}
:root[data-theme="dark"] .chat-pay{background:#3A2E0C;border-color:var(--bana-sun,#FAC775)}
:root[data-theme="dark"] .chat-pay .pt{color:#FAC775}
:root[data-theme="dark"] .chat-pay .px{color:#F0E2C0}

.chat-actions{display:flex;gap:10px}
.chat-actions .chat-btn{flex:1}

/* ---- Confirmation finale ---- */
.chat-done{
  text-align:center;border-radius:16px;padding:22px 18px;
  background:var(--blue-050);border:1px solid color-mix(in srgb,var(--blue) 30%,transparent);
}
.chat-done .em{font-size:34px;line-height:1;margin-bottom:6px}
.chat-done h3{font-family:"Sora",sans-serif;font-size:19px;color:var(--blue-600);margin:0 0 6px}
.chat-done p{color:var(--body);font-size:14.5px;margin:0 0 14px}
.chat-ref{
  display:inline-block;font-family:"Sora",monospace;font-weight:800;letter-spacing:1px;
  background:var(--blue);color:#fff;border-radius:10px;padding:9px 16px;font-size:15px;
}
.chat-track{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:var(--orange);color:#fff;text-decoration:none;font-weight:800;
  border-radius:12px;padding:13px 20px;font-size:15px;
}
.chat-track:hover{filter:brightness(.96)}

/* ---- Attente ---- */
.chat-spin{
  width:16px;height:16px;border-radius:50%;display:inline-block;
  border:2px solid color-mix(in srgb,var(--blue) 25%,transparent);border-top-color:var(--blue);
  animation:chatspin .8s linear infinite;
}
@keyframes chatspin{to{transform:rotate(360deg)}}

/* ---- Apparition douce ---- */
.msg,.chat-block{animation:chatin .28s ease both}
@keyframes chatin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .msg,.chat-block{animation:none}
  .chat-body{scroll-behavior:auto}
  .chat-progress span,.chat-btn{transition:none}
}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}