/* ==========================================================================
   Contact Chat — Julie — module compact (mini).
   Classes préfixées "cc-julie-mini-" pour éviter tout conflit. Reprend
   les mêmes tokens de design (couleurs, rayons, ombres, police) que le
   module principal, dans une mise en page plus réduite.
   ========================================================================== */

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

.cc-julie-mini{
  --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-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);

  width:460px;
  max-width:100%;
  font-family:'Bitter', serif;
  color:var(--cc-dark);
  display:flex;
  flex-direction:column;
  gap:24px;
  text-align:left; /* robuste face à d'éventuelles règles de centrage héritées du thème */
}

.cc-julie-mini-card{
  background:var(--cc-white);
  border:1px solid var(--cc-medium);
  border-radius:var(--cc-radius-bubble);
  box-shadow:var(--cc-shadow-lg);
  padding:16px;
}

/* Carte du haut : photo + identité + accroche, façon bulle de discussion.
   Padding réduit pour que la hauteur totale de la carte se rapproche de
   celle de la photo plutôt que de créer de l'espace vide superflu. */
.cc-julie-mini-intro{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
}
.cc-julie-mini-avatar{
  width:64px;height:64px;flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--cc-darkest);
  box-shadow:var(--cc-shadow-sm);
}
.cc-julie-mini-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.cc-julie-mini-intro-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-align:left;
}
.cc-julie-mini-name{
  font-weight:600;
  font-size:15px;
  color:var(--cc-darkest);
  text-align:left;
  line-height:1.2;
}
.cc-julie-mini-role{
  font-size:11.5px;
  color:var(--cc-medium);
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
  text-align:left;
  line-height:1.2;
}
.cc-julie-mini-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cc-accent);
  flex:0 0 auto;
  transition:background .2s ease;
}
.cc-julie-mini-status-dot.offline{background:var(--cc-medium);}
.cc-julie-mini-tagline{
  margin:2px 0 0;
  font-size:13.5px;
  line-height:1.35;
  color:var(--cc-dark);
  text-align:left;
}

/* Jauge d'étapes compacte : alignée à droite, sur la ligne du label.
   Les segments inactifs sont réduits au minimum ; seul le segment actif
   garde une largeur confortable. */
.cc-julie-mini-progress{
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.cc-julie-mini-tab{
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:2px;
  background:var(--cc-light);
  border:1px solid var(--cc-medium);
  transition:width .25s ease, background .15s ease, border-color .15s ease;
}
.cc-julie-mini-tab.done{background:var(--cc-accent); border-color:var(--cc-darkest);}
.cc-julie-mini-tab.active{width:20px; background:var(--cc-yellow); border-color:var(--cc-darkest);}
.cc-julie-mini-tab.error{background:var(--cc-red); border-color:var(--cc-red);}

/* Bloc du bas : pas de carte, juste le label, le champ, le bouton et le
   lien retour — remplacés à chaque étape. */
.cc-julie-mini-field-wrap{
  text-align:left;
}
.cc-julie-mini-field-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
  min-height:14px;
}
.cc-julie-mini-field-label{
  font-size:12.5px;
  color:var(--cc-dark);
  font-style:italic;
  text-align:left;
}
.cc-julie-mini-field{
  animation:cc-julie-mini-rise .3s ease;
  text-align:left;
}
@keyframes cc-julie-mini-rise{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
.cc-julie-mini-input-row{
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.cc-julie-mini-field input[type=text],
.cc-julie-mini-field input[type=email],
.cc-julie-mini-field input[type=tel],
.cc-julie-mini-field textarea{
  flex:1 1 0%;
  width:100%;
  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-mini-field textarea{min-height:70px;}
.cc-julie-mini-field input:focus,
.cc-julie-mini-field textarea:focus{
  border-color:var(--cc-darkest);
  box-shadow:var(--cc-shadow-focus);
}
.cc-julie-mini-field input.cc-julie-mini-field-error,
.cc-julie-mini-field textarea.cc-julie-mini-field-error{border-color:var(--cc-red);}

.cc-julie-mini-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-mini-send-btn:hover:not(:disabled),
.cc-julie-mini-send-btn:active:not(:disabled){
  transform:translate(1px,1px);
  box-shadow:none;
}
.cc-julie-mini-send-btn:disabled{background:var(--cc-light); border-color:var(--cc-medium); box-shadow:none; cursor:not-allowed; color:var(--cc-medium);}

.cc-julie-mini-hint-error{
  font-size:11.5px;
  color:var(--cc-red);
  margin-top:2px;
}
.cc-julie-mini-hint-error:empty{
  margin:0;
}

.cc-julie-mini-back{
  display:inline-block;
  margin-top:8px;
  border:none;
  background:none;
  padding:0;
  font-family:'Bitter', serif;
  font-style:italic;
  font-size:11.5px;
  color:var(--cc-dark);
  text-decoration:underline;
  cursor:pointer;
}
.cc-julie-mini-back:hover{color:var(--cc-darkest);}

.cc-julie-mini-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-mini-primary-btn:hover:not(:disabled),
.cc-julie-mini-primary-btn:active:not(:disabled){
  transform:translate(2px,2px);
  box-shadow:none;
}
.cc-julie-mini-primary-btn:disabled{background:var(--cc-light); border-color:var(--cc-medium); color:var(--cc-medium); box-shadow:none; cursor:not-allowed;}

.cc-julie-mini-done{
  text-align:left;
  font-size:13px;
  color:var(--cc-dark);
  font-style:italic;
}