/* ==========================================================================
   Contact Chat — Julie
   Feuille de style du widget. Classes préfixées "cc-julie-" pour éviter
   tout conflit avec le thème du site. Design non configurable depuis
   l'admin (contenu uniquement).
   ========================================================================== */

.cc-julie-phone,
.cc-julie-phone *,
.cc-julie-phone *::before,
.cc-julie-phone *::after{
  box-sizing:border-box;
}

.cc-julie-phone{
  --cc-accent:#7dff7d;
  --cc-darkest:#0d1c0d;
  --cc-dark:#2d392d;
  --cc-medium:#939f93;
  --cc-light:#e1ebe1;
  --cc-lightest:#f8fcf8;
  --cc-white:#ffffff;
  --cc-yellow:#fbff7d;
  --cc-red:#ff5959;

  --cc-radius-window:8px;
  --cc-radius-bubble:4px;

  --cc-shadow-xl: 6px 6px 0 var(--cc-darkest);
  --cc-shadow-lg: 3px 3px 0 var(--cc-darkest);
  --cc-shadow-md: 2px 2px 0 var(--cc-darkest);
  --cc-shadow-sm: 1px 1px 0 var(--cc-darkest);
  --cc-shadow-focus: 2px 2px 0 var(--cc-accent);

  display:flex;
  flex-direction:column;
  width:100%;
  max-width:420px;
  height:min(88vh, 720px);
  background:var(--cc-white);
  border-radius:var(--cc-radius-window);
  border:1px solid var(--cc-medium);
  box-shadow:var(--cc-shadow-xl);
  overflow:hidden;
  font-family:'Bitter', serif;
  color:var(--cc-dark);
  margin:0 auto;
}

.cc-julie-chat-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  background:var(--cc-darkest);
  color:#ffffff;
  flex:0 0 auto;
}
.cc-julie-avatar{
  width:44px;height:44px;flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  background:var(--cc-dark);
  border:1px solid var(--cc-light);
  display:flex;align-items:center;justify-content:center;
}
.cc-julie-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.cc-julie-header-text{display:flex;flex-direction:column;line-height:1.3;}
.cc-julie-name{
  font-family:'Bitter', serif;
  font-weight:600;
  font-size:17px;
  letter-spacing:.2px;
  color:#ffffff;
}
.cc-julie-role{
  font-size:12.5px;
  color:var(--cc-light);
  display:flex;
  align-items:center;
  gap:6px;
}
.cc-julie-status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--cc-accent);
  box-shadow:0 0 0 2px rgba(125,255,125,.25);
  flex:0 0 auto;
  transition:background .2s ease, box-shadow .2s ease;
}
.cc-julie-status-dot.offline{
  background:var(--cc-medium);
  box-shadow:0 0 0 2px rgba(147,159,147,.25);
}

.cc-julie-progress{
  display:flex;
  gap:6px;
  padding:10px 18px;
  background:var(--cc-white);
  border-bottom:1px solid var(--cc-medium);
  flex:0 0 auto;
}
.cc-julie-tab{
  height:4px;
  flex:1;
  border-radius:2px;
  background:var(--cc-light);
  border:1px solid var(--cc-medium);
  overflow:hidden;
  transition:border-color .15s ease;
}
.cc-julie-tab i{
  display:block;
  height:100%;
  width:0%;
  background:var(--cc-accent);
  transition:width .5s ease, background .15s ease;
}
.cc-julie-tab.done i{width:100%;}
.cc-julie-tab.active i{width:100%; background:var(--cc-yellow);}
.cc-julie-tab.error{border-color:var(--cc-red);}
.cc-julie-tab.error i{width:100%; background:var(--cc-red);}

.cc-julie-messages{
  flex:1 1 auto;
  overflow-y:auto;
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--cc-lightest);
  scroll-behavior:smooth;
}
.cc-julie-messages::-webkit-scrollbar{width:6px;}
.cc-julie-messages::-webkit-scrollbar-thumb{background:var(--cc-medium);border-radius:3px;}

.cc-julie-row{
  display:flex;
  gap:8px;
  align-items:flex-end;
  max-width:88%;
  opacity:0;
  transform:translateY(8px);
  animation:cc-julie-rise .35s ease forwards;
}
@keyframes cc-julie-rise{ to{opacity:1; transform:translateY(0);} }

.cc-julie-row.bot{align-self:flex-start;}
.cc-julie-row.user{align-self:flex-end; flex-direction:row-reverse;}

.cc-julie-row.bot .cc-julie-avatar{width:28px;height:28px;flex:0 0 auto;}
.cc-julie-avatar-spacer{width:28px;flex:0 0 auto;}

.cc-julie-bubble{
  padding:11px 14px;
  border-radius:var(--cc-radius-bubble);
  border:1px solid var(--cc-medium);
  font-size:14.5px;
  line-height:1.5;
  box-shadow:var(--cc-shadow-md);
}
.cc-julie-row.bot .cc-julie-bubble{
  background:var(--cc-white);
  color:var(--cc-dark);
  border-bottom-left-radius:0;
}
.cc-julie-row.user .cc-julie-bubble{
  background:var(--cc-accent);
  color:var(--cc-darkest);
  border-color:var(--cc-darkest);
  border-bottom-right-radius:0;
}

.cc-julie-meta{
  font-size:11px;
  color:var(--cc-medium);
  margin-top:3px;
  padding:0 4px;
  display:flex;
  align-items:center;
  gap:6px;
}
.cc-julie-row.user .cc-julie-meta{justify-content:flex-end;}

.cc-julie-edit-link{
  border:none;
  background:none;
  padding:0;
  font-family:'Bitter', serif;
  font-style:italic;
  font-size:11px;
  color:var(--cc-dark);
  text-decoration:underline;
  cursor:pointer;
}
.cc-julie-edit-link:hover{color:var(--cc-darkest);}

.cc-julie-typing .cc-julie-bubble{
  display:flex;
  align-items:center;
  gap:4px;
  padding:13px 16px;
  background:var(--cc-accent);
  border-color:var(--cc-darkest);
}
.cc-julie-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cc-darkest);
  animation:cc-julie-bounce 1.1s infinite ease-in-out;
}
.cc-julie-dot:nth-child(2){animation-delay:.15s;}
.cc-julie-dot:nth-child(3){animation-delay:.3s;}
@keyframes cc-julie-bounce{
  0%,60%,100%{transform:translateY(0); opacity:.45;}
  30%{transform:translateY(-4px); opacity:1;}
}

.cc-julie-recap{
  background:var(--cc-white);
  border:1px solid var(--cc-medium);
  border-radius:var(--cc-radius-bubble);
  box-shadow:var(--cc-shadow-lg);
  padding:12px 14px;
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.cc-julie-recap div{display:flex; justify-content:space-between; gap:10px;}
.cc-julie-recap span.k{color:var(--cc-medium); font-size:11px; letter-spacing:.4px;}
.cc-julie-recap span.v{font-weight:600; text-align:right; color:var(--cc-darkest);}

.cc-julie-composer{
  border-top:1px solid var(--cc-medium);
  background:var(--cc-white);
  padding:12px 14px;
  flex:0 0 auto;
}
.cc-julie-field-label{
  font-size:12.5px;
  color:var(--cc-dark);
  margin-bottom:6px;
  font-style:italic;
}
.cc-julie-input-row{
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.cc-julie-composer input[type=text],
.cc-julie-composer input[type=email],
.cc-julie-composer input[type=tel],
.cc-julie-composer textarea{
  flex:1;
  min-width:0;
  border:1px solid var(--cc-medium);
  background:var(--cc-lightest);
  border-radius:var(--cc-radius-bubble);
  padding:10px 12px;
  font-family:'Bitter', serif;
  font-size:14px;
  color:var(--cc-darkest);
  resize:none;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cc-julie-composer textarea{min-height:70px;}
.cc-julie-composer input:focus,
.cc-julie-composer textarea:focus{
  border-color:var(--cc-darkest);
  box-shadow:var(--cc-shadow-focus);
}
.cc-julie-composer input.cc-julie-field-error,
.cc-julie-composer textarea.cc-julie-field-error{border-color:var(--cc-red);}

/* Boutons : effet "pressé" au survol — le bouton se déplace de la
   valeur de son ombre portée et l'ombre disparaît. */
.cc-julie-send-btn{
  flex:0 0 auto;
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--cc-darkest);
  background:var(--cc-accent);
  color:var(--cc-darkest);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:var(--cc-shadow-sm);
  transform:translate(0,0);
  transition:transform .1s ease, box-shadow .1s ease;
}
.cc-julie-send-btn:hover:not(:disabled),
.cc-julie-send-btn:active:not(:disabled){
  transform:translate(1px,1px);
  box-shadow:none;
}
.cc-julie-send-btn:disabled{background:var(--cc-light); border-color:var(--cc-medium); box-shadow:none; cursor:not-allowed; color:var(--cc-medium);}

.cc-julie-primary-btn{
  width:100%;
  border:1px solid var(--cc-darkest);
  background:var(--cc-accent);
  color:var(--cc-darkest);
  padding:12px;
  border-radius:var(--cc-radius-bubble);
  font-size:14.5px;
  font-weight:700;
  font-family:'Bitter', serif;
  cursor:pointer;
  box-shadow:var(--cc-shadow-md);
  transform:translate(0,0);
  transition:transform .1s ease, box-shadow .1s ease;
}
.cc-julie-primary-btn:hover:not(:disabled),
.cc-julie-primary-btn:active:not(:disabled){
  transform:translate(2px,2px);
  box-shadow:none;
}
.cc-julie-primary-btn:disabled{background:var(--cc-light); border-color:var(--cc-medium); color:var(--cc-medium); box-shadow:none; cursor:not-allowed;}

.cc-julie-radio-group{display:flex; flex-direction:column; gap:8px;}
.cc-julie-radio-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--cc-medium);
  border-radius:var(--cc-radius-bubble);
  background:var(--cc-white);
  cursor:pointer;
  box-shadow:var(--cc-shadow-sm);
  transform:translate(0,0);
  transition:transform .1s ease, box-shadow .1s ease, background .12s ease, border-color .12s ease;
}
.cc-julie-radio-option:hover{
  transform:translate(1px,1px);
  box-shadow:none;
  border-color:var(--cc-darkest);
}
.cc-julie-radio-option.selected{
  background:var(--cc-accent);
  border-color:var(--cc-darkest);
  transform:translate(1px,1px);
  box-shadow:none;
}
.cc-julie-radio-option.disabled{cursor:not-allowed; opacity:.65;}
.cc-julie-radio-option input[type=radio]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;height:18px;
  flex:0 0 auto;
  border:1px solid var(--cc-darkest);
  border-radius:50%;
  background:var(--cc-white);
  display:grid;
  place-content:center;
  cursor:pointer;
  margin:0;
}
.cc-julie-radio-option input[type=radio]::before{
  content:"";
  width:9px;height:9px;
  border-radius:50%;
  transform:scale(0);
  transition:transform .1s ease;
  background:var(--cc-darkest);
}
.cc-julie-radio-option input[type=radio]:checked::before{transform:scale(1);}
.cc-julie-radio-text{font-size:13.5px; color:var(--cc-darkest);}

.cc-julie-composer-done{
  text-align:center;
  font-size:12.5px;
  color:var(--cc-dark);
  font-style:italic;
}

.cc-julie-hint-error{
  font-size:11.5px;
  color:var(--cc-red);
  margin-top:4px;
  min-height:14px;
}