:root{
  --bg:#e5ddd5;
  --bubble-m:#c6f0f8;
  --bubble-u:#f9eeff;
  --text:#111;
  --pill:#fafafa;
  --pill-b:#ddd;
  --btn:#111; --btn-text:#fff;
  --btn-alt:#f59e0b;
}
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); }

/* ====== HEADER ====== */
#header {
  background:#0b1e3f; color:#fff; padding:10px 12px;
  font-weight:600; font-size:14px; display:flex;
  align-items:center; justify-content:space-between;
  gap:8px;
}
#header .dot { width:8px; height:8px; background:#25d366; border-radius:50%; }
#close-btn {
  cursor:pointer; font-size:18px; line-height:1;
  background:none; border:none; color:#fff;
}

/* ====== LOG ====== */
#bot-log { flex: 1; overflow-y: auto; padding: 12px; font-size: 14px; }
.row { display:flex; margin:8px 0; }
.moundir { justify-content:flex-start; }
.user { justify-content:flex-end; }
.bubble {
  max-width: 78%; padding:8px 10px; border-radius: 10px; line-height:1.35; color:var(--text);
  box-shadow: 0 1px 0 rgba(0,0,0,.05); white-space: pre-line;
}
.bubble.m { background: var(--bubble-m); border-top-left-radius: 4px; }
.bubble.u { background: var(--bubble-u); border-top-right-radius: 4px; }

#bot-actions { border-top: 1px solid #eee; padding: 8px; display:flex; flex-wrap:wrap; gap:8px; background:#fff; }
.pill { cursor:pointer; border:1px solid var(--pill-b); border-radius:999px; padding:6px 10px; background:var(--pill); font-size:12px; }
.pill:hover { background:#f0f0f0; }

#bot-cta { border-top: 1px solid #eee; padding: 8px; display:flex; gap:8px; justify-content:space-between; align-items:center; background:#fff; }
.btn { cursor:pointer; border:0; border-radius:8px; padding:8px 10px; background:var(--btn); color:var(--btn-text); font-size:13px; }
.btn.alt { background:var(--btn-alt);color:black }
#bot-input {
  border: none; border-top: 1px solid #ddd; padding: 12px; outline: none; background:#fff;
  font-size: 16px !important; /* évite le zoom iOS */
  -webkit-text-size-adjust: 100%; /* empêche iOS de recalculer la taille */
}

/* Encarts internes */
.inline-box { margin:8px 0; padding:8px; border:1px dashed #ddd; border-radius:8px; background:#fff; }
.choice { display:flex; gap:8px; margin-top:6px; }

/* Typing indicator */
.typing { display:inline-block; padding:8px 10px; background: var(--bubble-m);
  border-radius:10px; border-top-left-radius:4px; box-shadow:0 1px 0 rgba(0,0,0,.05); }
.typing .dot { display:inline-block; width:6px; height:6px; margin:0 2px; border-radius:50%;
  background:#7abf8a; animation: blink 1.2s infinite ease-in-out; }
.typing .dot:nth-child(2){ animation-delay: .15s; }
.typing .dot:nth-child(3){ animation-delay: .3s; }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

.btn.disabled { opacity: .6; cursor: default; }
.btn.disabled:hover { filter: none; }

/* Empêche le zoom iOS sur les champs */
#bot-container input[type="text"],
#bot-container input[type="email"],
#bot-container input[type="tel"],
#bot-container input[type="search"],
#bot-container input[type="password"] {
  font-size: 16px !important;
}

/* ====== GATE VISUEL ====== */
.is-gated { opacity:.5 !important; cursor:not-allowed !important; }
[data-gate="chat"][aria-disabled="true"] { pointer-events:none; }

/* ====== CONTAINER (widget fermé par défaut) ====== */
#bot-container {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 20px;                /* on ancre à droite dans la V2 */
  width: 360px;
  max-width: calc(100% - 40px);
  height: 70vh;
  max-height: 600px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,.2);
  overflow: hidden;
  z-index: 99999;             /* au-dessus du reste */
  flex-direction: column;
}

/* Bouton de fermeture (version V2) */
#bot-container .close-btn {
  margin-left: auto;
  cursor: pointer;
  font-size: 28px;
  font-weight: bold;
  margin-right: 6px;
}

/* ====== BULLE FLOTTANTE (V2 avec wrapper) ====== */
#moundir-launcher {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: url("https://www.moodoftheday.app/moundir/bot/moundir.png") center/cover no-repeat;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  cursor: pointer;
  margin: 0 auto; /* centre la bulle */
  position: relative;
}
#moundir-launcher-wrapper {
  position: fixed;
  bottom: 58px;
  right: 20px;
  text-align: center;
  z-index: 1000;
}
#moundir-notif {
  position: absolute;
 top: -4px;
 right: 2px;
  background: #e11d48;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.launcher-text {
  margin-top: 6px;
  font-size: 12px;
  color: white;
  background-color:#0b1e3f;
  border-radius:20px;
  padding: 0 5px;
}

/* ====== OVERLAY ====== */
#bot-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 9998;      /* juste sous #bot-container (99999) */
  display: none;      /* caché par défaut */
}

/* iOS: éviter les rebonds/scroll sur la page quand la modale est ouverte */
html.modal-open, body.modal-open{
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* 📱 Mobile */
@media (max-width: 640px) {
  #bot-container{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 5px;  /* marge bas */
	width: 100%;
	max-height: calc(100dvh - 10px - env(safe-area-inset-bottom,0px));
	border-radius: 12px 12px 0 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 99999;
  }

  /* header visible même si on scrolle */
  #header{
	position: sticky;
	top: env(safe-area-inset-top, 0);
	padding-top: env(safe-area-inset-top, 0);
	z-index: 2;
  }

  /* zone messages scrollable */
  #bot-log{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
  }

  /* input décollé du bas (barre nav iOS) */
  #bot-input{
	font-size: 16px;
	margin-bottom: calc(3px + env(safe-area-inset-bottom,0px));
  }

  /* Redimension bulle (hérité de la V1 et compatible wrapper V2) */
  #moundir-launcher {
	width: 56px;
	height: 56px;
  }
}