/* =====================================================
   ZEB PACK ASSISTANCE — VPCE MINI BOT
   VERSION FINALE — OUVERTURE + ANTI-CLS
===================================================== */


/* =====================================================
   CONTENEUR PRINCIPAL
===================================================== */

.zeb-assist{
  position:fixed;

  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));

  z-index:100000;

  width:50px;
  height:50px;

  margin:0;
  padding:0;

  overflow:visible;

  font-family:'Manrope',Arial,sans-serif;

  pointer-events:auto;
}

.zeb-assist *,
.zeb-assist *::before,
.zeb-assist *::after{
  box-sizing:border-box;
}


/* =====================================================
   BULLE PRINCIPALE
===================================================== */

.zeb-assist__bubble{
  position:absolute;
  right:0;
  bottom:0;
  z-index:5;

  width:50px;
  height:50px;
  min-width:50px;
  min-height:50px;

  display:grid;
  place-items:center;

  margin:0;
  padding:0;

  border:0;
  border-radius:999px;

  appearance:none;
  -webkit-appearance:none;

  background:
    linear-gradient(
      135deg,
      #31420f,
      #172104
    );

  color:#fff;

  cursor:pointer;

  box-shadow:0 14px 34px rgba(0,0,0,.24);

  transform:translate3d(0,0,0);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.zeb-assist__bubble:hover,
.zeb-assist__bubble:focus-visible{
  transform:translate3d(0,-2px,0);

  box-shadow:0 18px 42px rgba(0,0,0,.30);
}

.zeb-assist__bubble:focus-visible{
  outline:2px solid #d9bd73;
  outline-offset:3px;
}

.zeb-assist__bubble span{
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  border-radius:999px;

  background:#d9bd73;
  color:#172104;

  font-size:16px;
  font-weight:900;
  line-height:1;
}

.zeb-assist.is-teasing .zeb-assist__bubble{
  animation:zebAssistPulse 1.6s ease-in-out infinite;
}


/* =====================================================
   MESSAGE D’APPEL
===================================================== */

.zeb-assist__teaser{
  position:absolute;
  right:0;
  bottom:62px;
  z-index:4;

  width:260px;
  max-width:calc(100vw - 32px);

  display:flex;
  align-items:stretch;

  margin:0;
  padding:0;

  overflow:hidden;

  border:1px solid rgba(34,48,6,.14);
  border-radius:14px;

  background:#fff;

  box-shadow:0 16px 40px rgba(0,0,0,.24);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transform:translate3d(0,8px,0) scale(.98);
  transform-origin:bottom right;

  transition:
    opacity .28s ease,
    transform .28s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .28s;
}

.zeb-assist.is-teasing .zeb-assist__teaser{
  opacity:1;
  visibility:visible;

  pointer-events:auto;

  transform:translate3d(0,0,0) scale(1);

  transition:
    opacity .28s ease,
    transform .28s cubic-bezier(.22,1,.36,1),
    visibility 0s;
}

.zeb-assist.is-open .zeb-assist__teaser{
  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transform:translate3d(0,8px,0) scale(.98);
}


/* =====================================================
   CONTENU DU MESSAGE D’APPEL
===================================================== */

.zeb-assist__teaserMain{
  min-width:0;
  flex:1 1 auto;

  display:flex;
  align-items:center;

  margin:0;
  padding:11px 14px;

  border:0;
  border-radius:0;

  appearance:none;
  -webkit-appearance:none;

  background:#fff;
  color:#172104;

  cursor:pointer;

  font-family:'Manrope',Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;

  text-align:left;
  text-transform:none;
  white-space:normal;
}

.zeb-assist__teaserClose{
  width:38px;
  min-width:38px;
  flex:0 0 38px;

  display:grid;
  place-items:center;

  margin:0;
  padding:0;

  border:0;
  border-left:1px solid rgba(34,48,6,.10);
  border-radius:0;

  appearance:none;
  -webkit-appearance:none;

  background:#f8f6ef;
  color:#31420f;

  cursor:pointer;

  font-family:Arial,sans-serif;
  font-size:19px;
  font-weight:400;
  line-height:1;
}

.zeb-assist__teaserMain:hover,
.zeb-assist__teaserMain:focus-visible,
.zeb-assist__teaserClose:hover,
.zeb-assist__teaserClose:focus-visible{
  background:#f3efe4;
}

.zeb-assist__teaserMain:focus-visible,
.zeb-assist__teaserClose:focus-visible{
  outline:2px solid #d9bd73;
  outline-offset:-2px;
}


/* =====================================================
   PANNEAU DE CONVERSATION
===================================================== */

.zeb-assist__panel{
  position:absolute;
  right:0;
  bottom:62px;
  z-index:3;

  width:330px;
  max-width:calc(100vw - 24px);
  max-height:min(500px,calc(100dvh - 92px));

  display:flex;
  flex-direction:column;

  margin:0;
  padding:0;

  overflow:hidden;

  border:1px solid rgba(34,48,6,.10);
  border-radius:14px;

  background:#fff;

  box-shadow:0 24px 64px rgba(0,0,0,.24);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transform:translate3d(0,12px,0) scale(.97);
  transform-origin:bottom right;

  transition:
    opacity .3s ease,
    transform .3s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .3s;
}

.zeb-assist.is-open .zeb-assist__panel{
  opacity:1;
  visibility:visible;

  pointer-events:auto;

  transform:translate3d(0,0,0) scale(1);

  transition:
    opacity .3s ease,
    transform .3s cubic-bezier(.22,1,.36,1),
    visibility 0s;
}


/* =====================================================
   EN-TÊTE DU PANNEAU
===================================================== */

.zeb-assist__head{
  flex:0 0 auto;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;

  padding:15px 16px;

  color:#fff;

  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(217,189,115,.18),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #31420f,
      #172104
    );
}

.zeb-assist__head span{
  display:block;

  margin:0 0 5px;

  color:#d9bd73;

  font-size:9px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.14em;

  text-transform:uppercase;
}

.zeb-assist__head h3{
  margin:0;

  color:#fff;

  font-size:19px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
}

.zeb-assist__head button{
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  flex:0 0 28px;

  display:grid;
  place-items:center;

  margin:0;
  padding:0;

  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;

  appearance:none;
  -webkit-appearance:none;

  background:rgba(255,255,255,.08);
  color:#fff;

  cursor:pointer;

  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1;

  transition:background-color .22s ease;
}

.zeb-assist__head button:hover,
.zeb-assist__head button:focus-visible{
  background:rgba(255,255,255,.14);
}

.zeb-assist__head button:focus-visible{
  outline:2px solid #d9bd73;
  outline-offset:3px;
}


/* =====================================================
   ZONE DE CONVERSATION
===================================================== */

.zeb-assist__body{
  min-height:0;
  max-height:290px;
  flex:1 1 auto;

  padding:14px;

  overflow-x:hidden;
  overflow-y:auto;

  background:#f8f6ef;

  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;
  -ms-overflow-style:none;
}

.zeb-assist__body::-webkit-scrollbar{
  width:0;
  height:0;

  display:none;
}


/* =====================================================
   MESSAGES
===================================================== */

.zeb-assist__msg{
  width:max-content;
  max-width:90%;

  margin:0 0 9px;
  padding:10px 12px;

  border-radius:13px;

  font-size:12.5px;
  line-height:1.5;

  overflow-wrap:anywhere;
}

.zeb-assist__msg--bot{
  border:1px solid rgba(34,48,6,.08);

  background:#fff;
  color:#172104;
}

.zeb-assist__msg--user{
  margin-left:auto;

  background:#31420f;
  color:#fff;
}


/* =====================================================
   ACTIONS RAPIDES
===================================================== */

.zeb-assist__quick{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:8px;
}

.zeb-assist__quick[hidden]{
  display:none !important;
}

.zeb-assist__quick button,
.zeb-assist__search button,
.zeb-assist__link{
  border:0;
  border-radius:999px;

  appearance:none;
  -webkit-appearance:none;

  background:#31420f;
  color:#fff;

  cursor:pointer;

  text-decoration:none;

  font-family:'Manrope',Arial,sans-serif;
  font-size:10.5px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.055em;

  text-transform:uppercase;

  transition:
    background-color .22s ease,
    transform .22s ease;
}

.zeb-assist__quick button,
.zeb-assist__link{
  padding:8px 11px;
}

.zeb-assist__quick button:hover,
.zeb-assist__quick button:focus-visible,
.zeb-assist__search button:hover,
.zeb-assist__search button:focus-visible,
.zeb-assist__link:hover,
.zeb-assist__link:focus-visible{
  background:#223006;
  color:#fff;

  transform:translate3d(0,-1px,0);
}

.zeb-assist__quick button:focus-visible,
.zeb-assist__search button:focus-visible,
.zeb-assist__link:focus-visible{
  outline:2px solid #d9bd73;
  outline-offset:3px;
}

.zeb-assist__link{
  display:inline-flex;

  margin-top:4px;
}


/* =====================================================
   FORMULAIRE DE RECHERCHE
===================================================== */

.zeb-assist__search{
  width:100%;
  min-width:0;
  flex:0 0 auto;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(82px,92px);
  align-items:stretch;
  gap:7px;

  margin:0;
  padding:10px;

  border-top:1px solid rgba(34,48,6,.10);

  background:#fff;
}

.zeb-assist__search input{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:40px;

  margin:0;
  padding:0 11px;

  border:1px solid rgba(34,48,6,.14);
  border-radius:8px;

  outline:none;

  background:#fff;
  color:#172104;

  font-family:'Manrope',Arial,sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.3;
}

.zeb-assist__search button{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin:0;
  padding:8px 9px;

  overflow:hidden;

  font-size:10px;
  letter-spacing:.035em;
  line-height:1.2;

  text-align:center;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.zeb-assist__search input:focus{
  border-color:#d9bd73;

  box-shadow:0 0 0 3px rgba(217,189,115,.14);
}

.zeb-assist__search input:disabled{
  opacity:.65;

  cursor:not-allowed;
}


/* =====================================================
   INDICATEUR DE SAISIE
===================================================== */

.zeb-assist__typing{
  min-width:52px;

  display:inline-flex;
  align-items:center;
  gap:5px;
}

.zeb-assist__typing span{
  width:6px;
  height:6px;

  border-radius:999px;

  background:#31420f;

  opacity:.35;

  animation:zebAssistTyping .9s infinite ease-in-out;
}

.zeb-assist__typing span:nth-child(2){
  animation-delay:.15s;
}

.zeb-assist__typing span:nth-child(3){
  animation-delay:.30s;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes zebAssistPulse{

  0%,
  100%{
    transform:translate3d(0,0,0) scale(1);
  }

  50%{
    transform:translate3d(0,-3px,0) scale(1.035);
  }
}

@keyframes zebAssistTyping{

  0%,
  80%,
  100%{
    transform:translate3d(0,0,0);

    opacity:.35;
  }

  40%{
    transform:translate3d(0,-4px,0);

    opacity:1;
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:520px){

  .zeb-assist{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));

    width:48px;
    height:48px;
  }

  .zeb-assist__bubble{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
  }

  .zeb-assist__panel{
    right:0;
    bottom:60px;

    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 84px);
  }

  .zeb-assist__teaser{
    right:0;
    bottom:60px;

    width:230px;
    max-width:calc(100vw - 24px);
  }

  .zeb-assist__teaserMain{
    padding:10px 12px;

    font-size:11.5px;
  }

  .zeb-assist__teaserClose{
    width:36px;
    min-width:36px;
    flex-basis:36px;
  }

  .zeb-assist__body{
    max-height:min(280px,calc(100dvh - 218px));
  }

  .zeb-assist__search{
    grid-template-columns:minmax(0,1fr) minmax(74px,86px);

    gap:6px;
    padding:9px;
  }

  .zeb-assist__search input,
  .zeb-assist__search button{
    min-height:42px;
  }

  .zeb-assist__search button{
    padding:7px 6px;

    font-size:9.5px;
    letter-spacing:.02em;
  }
}


/* =====================================================
   TRÈS PETITS ÉCRANS
===================================================== */

@media (max-width:380px){

  .zeb-assist{
    right:max(9px,env(safe-area-inset-right));
    bottom:max(9px,env(safe-area-inset-bottom));
  }

  .zeb-assist__teaser{
    bottom:60px;

    width:210px;
    max-width:calc(100vw - 18px);
  }

  .zeb-assist__panel{
    bottom:60px;

    width:calc(100vw - 18px);
    max-width:calc(100vw - 18px);
    max-height:calc(100dvh - 72px);
  }

  .zeb-assist__head{
    padding:13px 14px;
  }

  .zeb-assist__head h3{
    font-size:17px;
  }

  .zeb-assist__body{
    max-height:calc(100dvh - 242px);

    padding:11px;
  }

  .zeb-assist__search{
    grid-template-columns:1fr;

    gap:7px;
    padding:9px;
  }

  .zeb-assist__search input,
  .zeb-assist__search button{
    width:100%;
    max-width:100%;
  }

  .zeb-assist__search button{
    min-height:40px;

    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}


/* =====================================================
   ACCESSIBILITÉ
===================================================== */

@media (prefers-reduced-motion:reduce){

  .zeb-assist__bubble,
  .zeb-assist__teaser,
  .zeb-assist__panel,
  .zeb-assist__head button,
  .zeb-assist__quick button,
  .zeb-assist__search button,
  .zeb-assist__link,
  .zeb-assist__typing span{
    animation:none !important;
    transition:none !important;
  }
}