/* =========================
   Welcome modal: slide from top + fade lines
   ========================= */
.welcome-modal-dialog {
  align-items: center;   /* vertical centering */
  margin-top: 0;
}

.modal.welcome-slide .modal-dialog {
  transform: translateY(-40px);
  transition: transform .28s ease-out;
}

.modal.welcome-slide.show .modal-dialog { transform: translateY(0); }

.welcome-message {
  text-align: center;
  min-height: 120px;
  white-space: pre-line;
  font-size: 1rem;
  line-height: 1.35rem;
}

.welcome-line {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
  margin-bottom: .35rem;
}

.welcome-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accentue un peu le backdrop */
.modal-backdrop.show {
  background-color: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(3px);
}

/* =========================
   Base layout
   ========================= */
html, body { height: 100%; }

body {
  background: #f8fafc;
  padding: 0 8px;
  margin: 0;
}

/* Messages */
.msg { margin: 6px 0; position: relative; z-index: 1; }

/* =========================
   Recorder indicator (kept even if hidden later)
   ========================= */
#rec-indicator {
  display: none;
  margin-top: 10px;
  text-align: center;
}

.wave-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 30px;
  gap: 3px;
}

.wave {
  width: 4px;
  background: #3b82f6;
  border-radius: 4px;
  animation: wave 1s infinite ease-in-out;
}

.wave:nth-child(1) { animation-delay: 0s; }
.wave:nth-child(2) { animation-delay: 0.1s; }
.wave:nth-child(3) { animation-delay: 0.2s; }
.wave:nth-child(4) { animation-delay: 0.3s; }
.wave:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { height: 5px; }
  50% { height: 20px; }
}

.transcription-note {
  font-size: 0.85em;
  background: #e5e7eb;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 4px 0 12px 0;
  display: inline-block;
  color: #333;
  max-width: 90%;
}

/* Fin de session */
.end-session {
  font-style: italic;
  color: #6b7280;
  font-size: 0.9em;
  margin-top: 12px;
  padding: 8px;
  background: #f3f4f6;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}

/* =========================
   Menu images
   ========================= */
.menu-img {
  max-width: 100%;
  border-radius: 10px;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform 0.2s;
}
.menu-img:hover { transform: scale(1.02); }

/* =========================
   Theme variables + main card
   ========================= */
:root{
  --accent: #0ea5e9;
  --header-bg: #0f3b47;
  --header-bg2:#0c6a78;
  --line: #e5e7eb;
}

.chat-card{
  max-width: 520px;
  margin: 16px auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(2,12,27,.08);
  overflow: hidden;
  border: 1px solid rgba(2,12,27,.06);
}

.chat-header{ display:flex; align-items:center; justify-content:center; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ width:28px; height:28px; border-radius:8px; object-fit:cover; background:#fff; }
.brand-name{ font-weight:700; font-size:1.1rem; letter-spacing:.2px; }

/* =========================
   Chat zone (SINGLE source of truth)
   ========================= */
#chat{
  position: relative;
  display: flex;
  flex-direction: column;

  height: calc(100vh - 320px);
  min-height: 360px;
  overflow-y: auto;

  background: #fff;
  padding: 14px;
  padding-bottom: 74px; /* prevents badge covering last message */
  border-top: 1px solid var(--line);
}

/* =========================
   Bubbles (SINGLE source of truth)
   ========================= */
.user{
  background: rgba(219,234,254,0.55);
  color:#0f1e56;
  padding:10px 14px;
  border-radius:14px;
  max-width:85%;
  align-self:flex-end;
  border:1px solid rgba(30,64,175,.08);
  backdrop-filter: saturate(140%) blur(6px);
}

.bot{
  background: rgba(241,245,249,0.55);
  color:#0b1220;
  padding:10px 14px;
  border-radius:14px;
  max-width:85%;
  align-self:flex-start;
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter: saturate(140%) blur(6px);
}

/* Branding XELIA */
.msg.bot.bot-with-avatar { display:flex; align-items:flex-start; gap:8px; }
.msg.bot.bot-with-avatar .bot-text { display:inline-block; max-width: calc(85% - 30px); }

.bot-avatar-img{
  width:22px; height:22px; border-radius:50%;
  display:inline-block; object-fit:cover;
  box-shadow:0 2px 8px rgba(2,132,199,.25);
  margin-right:8px;
  vertical-align:top;
}
@media (max-width:576px){
  .bot-avatar-img{ width:20px; height:20px; }
}

/* =========================
   Buttons inside bot messages (SINGLE source of truth)
   ========================= */
.msg.bot .btn{
  margin-top: 6px;                 /* ✅ kept from your first duplicate */
  border-radius: 14px !important;
  border: 1px solid rgba(2,12,27,.08) !important;
  box-shadow: 0 2px 6px rgba(2,12,27,.06);
  background: #faf7f2;
}
.msg.bot .btn-outline-primary{ background:#f3f7ff; }
.msg.bot .btn-outline-secondary{ background:#faf7f2; }

/* Unifie "Voir la carte / Horaires / Adresse" */
#chat .btn-outline-primary,
#chat .btn-outline-secondary {
  background: #f3f7ff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(2,12,27,.10) !important;
  box-shadow: 0 2px 6px rgba(2,12,27,.06);
  border-radius: 14px !important;
}
#chat .btn-outline-primary:hover,
#chat .btn-outline-secondary:hover { filter: brightness(0.97); }

.btn-confirm {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
.btn-confirm:disabled { opacity: .7; }

.chat-send:disabled { opacity:.6; cursor:not-allowed; }

/* =========================
   Input bar
   ========================= */
.chat-inputbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border-top:1px solid var(--line);
  background:#fff;
}

.chat-input{
  flex: 1;
  border-radius: 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(2,12,27,.03);

  resize: none;
  overflow: hidden;
  line-height: 1.25;
  max-height: 140px;
}

.chat-send{
  width:44px;
  height:44px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:18px;
  font-weight:700;
  background: var(--accent);
  border:none;
  box-shadow: 0 8px 18px rgba(14,165,233,.28);
}

.chat-mic{
  width:44px; height:44px;
  border-radius:50%;
  padding:0;
  background:#f1f5f9;
  border:1px solid var(--line);
}

/* If you want them hidden */
.chat-mic{ display:none !important; }
#rec-indicator{ display:none !important; }

/* =========================
   XELIA badge (SINGLE hover rule)
   ========================= */
#xelia-badge{
  position:absolute;
  right:12px;
  top:0;
  z-index:4;

  background:transparent;
  border:0;
  padding:0;
  text-decoration:none;

  color:#0f172a;
  font-size:.9rem;
  font-weight:600;
  opacity:.75;
}

#xelia-badge .xbadge-icon{
  width:16px; height:16px;
  margin-right:6px;
  vertical-align:-2px;
  border-radius:3px;
  display:inline-block;
  object-fit:cover;
}

/* Hide the old ".logo" variant if present */
#xelia-badge .logo{ display: none; }

/* Final hover behavior (pick ONE) */
#xelia-badge:hover{
  opacity: 1;
  text-decoration: underline;
}

/* =========================
   Hero
   ========================= */
#hero-intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:18px 8px 8px;
}

.msg.hero-bubble{
  align-self:center;
  max-width:740px;
  text-align:center;
  justify-content:center;
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.hero-logo{
  width:100px;
  height:auto;
  object-fit:contain;
  opacity:.98;
  display:block;
  margin:0 auto;
}

.hero-actions .btn{
  border-radius:16px;
  padding:8px 14px;
  border:1px solid rgba(2,12,27,.08) !important;
  box-shadow:0 2px 6px rgba(2,12,27,.06);
}
.hero-actions .btn-outline-primary{ background:#f3f7ff; }
.hero-actions .btn-outline-secondary{ background:#faf7f2; }

@media (max-width:576px){
  .hero-logo{ width:84px; }
}

/* =========================
   Ticket preview
   ========================= */
.ticket-inline { margin-top: 6px; }

.ticket-preview{
  white-space: pre-wrap;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
}

/* =========================
   Mobile tweaks (general)
   ========================= */
@media (max-width:576px){
  #chat{
    height: calc(100vh - 300px);
  }

  #chat::before{
    background-position: center 260px;
    background-size: 240px auto;
    opacity:.09;
  }

  .user{ background: rgba(219,234,254,.50); }
  .bot{  background: rgba(241,245,249,.50); }
}

/* =========================
   Mobile-first layout fixes (iPhone)
   ========================= */
@media (max-width: 576px) {
  body.container {
    padding: 0;
    max-width: 100%;
    overflow: hidden; /* no double scroll */
  }

  .chat-card {
    width: 100vw;
    height: 100dvh;
    height: 100svh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
  }

  .chat-header {
    padding-top: env(safe-area-inset-top);
  }

  #chat {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .chat-inputbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-radius: 0;
  }
}