/* ================================================================
   E-ZANDO — CHAT CLIENT <-> COMMERCANT
   Composant autonome, pensé pour être réutilisé dans les autres pages.
   ================================================================ */

.ez-client-chat-root,
.ez-client-chat-root *{box-sizing:border-box}

.ez-chat-header-btn{
  appearance:none;
  cursor:pointer;
  font:inherit;
  overflow:visible;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease;
}
.ez-chat-header-btn:hover{transform:translateY(-1px);border-color:rgba(124,58,237,.30);box-shadow:0 14px 30px rgba(20,16,39,.12)}
.ez-chat-header-count{
  position:absolute;
  right:-5px;
  top:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#ec4899);
  border:2px solid #fff;
  font-size:10px;
  font-weight:950;
  line-height:1;
  box-shadow:0 6px 14px rgba(124,58,237,.24);
}
.ez-chat-header-dot{
  position:absolute;
  left:-2px;
  bottom:-2px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#16a34a;
  border:2px solid #fff;
}

.ez-chat-header-btn.is-waiting,
.ez-chat-fab.is-waiting{
  color:#f59e0b!important;
  border-color:rgba(245,158,11,.48)!important;
  animation:ezChatOrangePulse 1.45s ease-out infinite;
}
.ez-chat-header-btn.is-waiting .ez-chat-header-dot{background:#f59e0b}

@keyframes ezChatOrangePulse{
  0%{box-shadow:0 0 0 0 rgba(245,158,11,.42),0 9px 26px rgba(20,16,39,.07)}
  70%{box-shadow:0 0 0 13px rgba(245,158,11,0),0 14px 34px rgba(245,158,11,.18)}
  100%{box-shadow:0 0 0 0 rgba(245,158,11,0),0 9px 26px rgba(20,16,39,.07)}
}

/* Réponse du commerçant non encore consultée : vert prioritaire. */
.ez-chat-header-btn.is-replied{
  color:#16a34a!important;
  border-color:rgba(22,163,74,.52)!important;
  background:#f0fdf4!important;
  animation:ezChatGreenPulse 1.25s ease-out infinite;
}
.ez-chat-fab.is-replied{
  color:#fff!important;
  background:linear-gradient(145deg,#0f6f4a,#16a34a 58%,#22c55e)!important;
  animation:ezChatGreenPulse 1.25s ease-out infinite;
}
.ez-chat-header-btn.is-replied .ez-chat-header-dot{background:#22c55e}
.ez-chat-header-btn.is-replied .ez-chat-header-count{
  background:linear-gradient(135deg,#15803d,#22c55e);
  box-shadow:0 6px 14px rgba(22,163,74,.28);
}
.ez-chat-fab.is-replied .ez-chat-fab-count{
  color:#14532d;
  border-color:#bbf7d0;
  background:#f0fdf4;
}

@keyframes ezChatGreenPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.48),0 9px 26px rgba(20,16,39,.07)}
  70%{box-shadow:0 0 0 14px rgba(34,197,94,0),0 16px 38px rgba(34,197,94,.22)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0),0 9px 26px rgba(20,16,39,.07)}
}

.ez-chat-header-btn.has-reply,
.ez-chat-fab.has-reply{
  animation:ezChatReplyPop .7s ease both;
}
@keyframes ezChatReplyPop{
  0%,100%{transform:scale(1)}
  30%{transform:scale(1.13)}
  60%{transform:scale(.97)}
}

.ez-chat-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:99970;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(145deg,#11152d,#7c3aed 62%,#ec4899);
  cursor:pointer;
  box-shadow:0 22px 55px rgba(47,29,93,.34);
  transition:transform .22s ease,box-shadow .22s ease;
}
.ez-chat-fab:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 28px 68px rgba(47,29,93,.40)}
.ez-chat-fab-icon{display:grid;place-items:center}
.ez-chat-fab-count{
  position:absolute;
  right:-6px;
  top:-7px;
  min-width:23px;
  height:23px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#201330;
  background:#fff;
  border:2px solid #f3e8ff;
  font-size:10px;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(20,16,39,.18);
}

.ez-chat-panel{
  position:fixed;
  right:24px;
  bottom:98px;
  z-index:99975;
  width:min(410px,calc(100vw - 32px));
  max-height:min(720px,calc(100vh - 120px));
  display:grid;
  grid-template-rows:auto auto minmax(130px,1fr) auto auto auto;
  overflow:hidden;
  color:#171225;
  background:rgba(255,255,255,.985);
  border:1px solid rgba(124,58,237,.16);
  border-radius:28px;
  box-shadow:0 32px 100px rgba(20,16,39,.30);
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(18px) scale(.975);
  transform-origin:bottom right;
  transition:opacity .23s ease,visibility .23s ease,transform .23s cubic-bezier(.16,1,.3,1);
}
.ez-chat-panel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.ez-chat-panel-head{
  min-height:78px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 38px;
  align-items:center;
  gap:11px;
  padding:14px 15px;
  color:#fff;
  background:
    radial-gradient(circle at 85% 0%,rgba(236,72,153,.30),transparent 40%),
    linear-gradient(135deg,#0c1024 0%,#2f1b62 58%,#7c3aed 100%);
}
.ez-chat-panel-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.16);
  font-size:13px;
  font-weight:1000;
  letter-spacing:.05em;
}
.ez-chat-panel-title{min-width:0}
.ez-chat-panel-title small,
.ez-chat-panel-title strong,
.ez-chat-panel-title span{display:block}
.ez-chat-panel-title small{color:#d9cdfa;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}
.ez-chat-panel-title strong{margin-top:3px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-chat-panel-title span{margin-top:3px;color:#c8bddf;font-size:9px;font-weight:800}
.ez-chat-close{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  font:400 25px/1 Arial,sans-serif;
  transition:.18s ease;
}
.ez-chat-close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}

.ez-chat-intro{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:10px;
  margin:13px 13px 0;
  padding:12px;
  color:#4b3b66;
  background:linear-gradient(135deg,#faf7ff,#fff7fb);
  border:1px solid rgba(124,58,237,.12);
  border-radius:17px;
}
.ez-chat-intro-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:#fff;box-shadow:0 7px 18px rgba(91,33,182,.08);font-size:19px}
.ez-chat-intro strong{display:block;color:#271447;font-size:11px}
.ez-chat-intro p{margin:4px 0 0;font-size:10px;line-height:1.55;font-weight:650}

.ez-chat-conversation{
  min-height:170px;
  overflow-y:auto;
  padding:14px 13px 10px;
  scrollbar-width:thin;
  scrollbar-color:#d9c9f3 transparent;
  background:linear-gradient(180deg,#fff,#fcfbff);
}
.ez-chat-empty{
  height:100%;
  min-height:130px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  color:#8b7f9f;
  font-size:11px;
  font-weight:800;
  line-height:1.55;
}
.ez-chat-empty span{font-size:9px;color:#a89eb7}
.ez-chat-thread{display:grid;gap:9px}
.ez-chat-message-row{display:flex}
.ez-chat-message-row.is-client{justify-content:flex-end}
.ez-chat-message-row.is-shop{justify-content:flex-start}
.ez-chat-bubble{
  max-width:84%;
  padding:10px 11px 8px;
  border-radius:16px;
  font-size:11px;
  line-height:1.5;
  font-weight:700;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.ez-chat-message-row.is-client .ez-chat-bubble{
  color:#fff;
  background:linear-gradient(135deg,#6d28d9,#a83da0);
  border-bottom-right-radius:5px;
  box-shadow:0 8px 20px rgba(109,40,217,.16);
}
.ez-chat-message-row.is-shop .ez-chat-bubble{
  color:#2c2538;
  background:#f1f3f7;
  border:1px solid #e5e7ed;
  border-bottom-left-radius:5px;
}
.ez-chat-bubble-meta{display:block;margin-top:5px;opacity:.68;font-size:8px;font-weight:800}
.ez-chat-waiting-reply{
  width:max-content;
  max-width:84%;
  padding:7px 10px;
  border-radius:999px;
  color:#9a6200;
  background:#fff7df;
  border:1px solid #fde7a8;
  font-size:9px;
  font-weight:900;
}
.ez-chat-waiting-reply:before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#f59e0b;animation:ezChatTinyPulse 1.2s infinite}
@keyframes ezChatTinyPulse{50%{opacity:.25;transform:scale(.75)}}

.ez-chat-statusbar{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 13px;
  color:#756b87;
  background:#faf9fc;
  border-top:1px solid #f0edf5;
  border-bottom:1px solid #f0edf5;
  font-size:8.5px;
  font-weight:850;
}
#ezChatStatusText{text-align:right}

.ez-chat-composer{padding:11px 13px 9px;background:#fff}
.ez-chat-label{display:block;margin-bottom:6px;color:#5e506f;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
#ezChatMessage{
  width:100%;
  min-height:82px;
  max-height:140px;
  resize:vertical;
  padding:11px 12px;
  color:#201a2b;
  background:#fbfbfd;
  border:1px solid #ded9e8;
  border-radius:14px;
  outline:none;
  font:700 11px/1.5 inherit;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
#ezChatMessage:focus{background:#fff;border-color:rgba(124,58,237,.54);box-shadow:0 0 0 4px rgba(124,58,237,.09)}
#ezChatMessage:disabled{opacity:.58;cursor:not-allowed;background:#f3f3f5}
.ez-chat-composer-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
#ezChatCharCount{color:#8c819d;font-size:9px;font-weight:850}
.ez-chat-send{
  min-height:39px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#5b21b6,#7c3aed 55%,#ec4899);
  cursor:pointer;
  font:950 10px/1 inherit;
  box-shadow:0 10px 24px rgba(124,58,237,.18);
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.ez-chat-send:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 30px rgba(124,58,237,.24)}
.ez-chat-send:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.ez-chat-form-message{min-height:15px;margin:7px 0 0;color:#736780;font-size:9px;font-weight:800;line-height:1.4}
.ez-chat-form-message.is-error{color:#b42318}
.ez-chat-form-message.is-success{color:#087f5b}

.ez-chat-privacy{
  padding:9px 13px 11px;
  color:#968ba5;
  background:#fbfafc;
  border-top:1px solid #f1eef5;
  font-size:7.8px;
  line-height:1.45;
  font-weight:650;
}
.ez-chat-privacy strong{color:#6d607d}

.ez-session-warning{
  position:fixed;
  inset:0;
  z-index:100020;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(7,7,18,.66);
  backdrop-filter:blur(8px);
}
.ez-session-warning.is-open{display:flex}
.ez-session-warning-dialog{
  width:min(510px,100%);
  padding:27px;
  text-align:center;
  color:#1d1727;
  background:#fff;
  border:1px solid rgba(124,58,237,.14);
  border-radius:26px;
  box-shadow:0 32px 100px rgba(0,0,0,.34);
  animation:ezSessionIn .26s ease both;
}
@keyframes ezSessionIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.ez-session-warning-icon{width:58px;height:58px;margin:0 auto 12px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#fff7e3,#f3e8ff);font-size:26px}
.ez-session-warning-kicker{display:block;color:#8b5cf6;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.14em}
.ez-session-warning-dialog h3{margin:5px 0 9px;font-size:23px;letter-spacing:-.035em}
.ez-session-warning-dialog p{margin:0 auto;max-width:410px;color:#71667f;font-size:12px;line-height:1.6;font-weight:700}
.ez-session-countdown{margin:18px auto 16px;color:#5b21b6;font-size:32px;font-weight:1000;letter-spacing:-.04em}
.ez-session-warning-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.ez-session-warning-actions button{min-height:45px;border-radius:13px;cursor:pointer;font:900 11px/1 inherit}
.ez-session-extend{border:0;color:#fff;background:linear-gradient(135deg,#5b21b6,#7c3aed,#ec4899);box-shadow:0 12px 28px rgba(124,58,237,.18)}
.ez-session-ack{border:1px solid #e4ddeb;color:#5f536e;background:#fff}
.ez-session-warning-dialog>small{display:block;margin-top:12px;color:#9a91a5;font-size:8px;line-height:1.45}

.ez-chat-toast{
  position:fixed;
  right:24px;
  bottom:174px;
  z-index:100030;
  max-width:min(360px,calc(100vw - 32px));
  padding:11px 14px;
  color:#fff;
  background:#171225;
  border-radius:13px;
  box-shadow:0 18px 45px rgba(20,16,39,.24);
  font-size:10px;
  font-weight:850;
  line-height:1.45;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.2s ease;
}
.ez-chat-toast.is-visible{opacity:1;visibility:visible;transform:none}
.ez-chat-toast.is-success{background:#087f5b}
.ez-chat-toast.is-warning{background:#a15c00}
.ez-chat-toast.is-error{background:#a92929}

@media(max-width:860px){
  .ez-chat-panel{right:14px;bottom:86px;width:min(400px,calc(100vw - 28px));max-height:calc(100vh - 105px)}
  .ez-chat-fab{right:14px;bottom:14px}
  .ez-chat-toast{right:14px;bottom:158px}
}

@media(max-width:620px){
  body.ez-chat-open{overflow:hidden}
  .ez-chat-panel{
    right:8px;
    left:8px;
    bottom:72px;
    width:auto;
    max-height:calc(100dvh - 88px);
    border-radius:22px;
    transform-origin:bottom center;
  }
  .ez-chat-fab{right:12px;bottom:12px;width:56px;height:56px;border-radius:19px}
  .ez-chat-panel-head{min-height:72px;grid-template-columns:42px minmax(0,1fr) 36px;padding:12px}
  .ez-chat-panel-avatar{width:42px;height:42px}
  .ez-chat-intro{margin:10px 10px 0}
  .ez-chat-conversation{padding-inline:10px}
  .ez-chat-composer{padding-inline:10px}
  .ez-session-warning-dialog{padding:22px 18px;border-radius:22px}
  .ez-session-warning-actions{grid-template-columns:1fr}
  .ez-chat-toast{right:10px;left:10px;bottom:142px;max-width:none;text-align:center}
}