/* =========================================================
   WP AI Venice Chat Suite – CSS complet (mobile + desktop)
   ========================================================= */

/* --- tokens --- */
:root{
  --border:#e5e7eb;
  --border-soft:#f1f5f9;
  --bg:#ffffff;
  --bg-soft:#fafafa;
  --text:#111827;
  --muted:#6b7280;
  --bubble-user:#dbeafe;      /* bleu clair */
  --bubble-ai:#ffe4e6;        /* rose très clair */
}

/* --- base --- */
.wpavcs-hub, .wpavcs-chat { box-sizing: border-box; }
.wpavcs-hub *, .wpavcs-chat * { box-sizing: inherit; }
.wpavcs-hide{ display:none !important; }

/* ===========================
   HUB (Desktop par défaut)
   =========================== */
.wpavcs-hub{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  min-height:70vh;
  background:var(--bg);
}
.wpavcs-hub .left{ border-right:1px solid var(--border-soft); display:flex; flex-direction:column; min-height:0; }
.wpavcs-hub .left .head{ padding:14px 16px; border-bottom:1px solid var(--border-soft); font-weight:700; }
.wpavcs-hub .threads{ overflow:auto; flex:1; min-height:0; background:var(--bg); }

.wpavcs-hub .right{ min-height:0; }

/* Ligne de conversation (liste) */
.thread{ display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid #f8fafc; cursor:pointer; transition:background .15s; }
.thread:hover{ background:#f8fafc; }
.thread .avatar{ width:44px; height:44px; border-radius:9999px; background:#e5e7eb center/cover no-repeat; flex:0 0 44px; }
.thread .info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.thread .name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.thread .snippet{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===========================
   Panneau Chat (commun)
   =========================== */
.wpavcs-chat{
  display:flex; flex-direction:column;
  height:100%;
  background:var(--bg);
  min-height:0; /* important pour le scroll interne */
}
.wpavcs-header{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--border-soft);
  background:var(--bg);
  position:sticky; top:0; z-index:3;
}
.wpavcs-char{ display:flex; align-items:center; gap:10px; min-width:0; }

/* bouton précédent mieux espacé */
.wpavcs-char .back-btn{
  display:inline-block; width:24px; height:24px; margin-right:12px; cursor:pointer;
}
.wpavcs-char .back-btn::before{
  content:""; display:inline-block; width:18px; height:18px;
  border-left:2px solid var(--text); border-bottom:2px solid var(--text);
  transform: rotate(45deg); opacity:.85;
}

.wpavcs-char-avatar{
  width:36px; height:36px; border-radius:9999px;
  background:#e5e7eb center/cover no-repeat;
  margin-left:6px;
}
.wpavcs-char-name{
  font-weight:700; color:var(--text); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:6px;
}

/* Zone de messages + input */
.wpavcs-log{
  flex:1; min-height:0;
  overflow:auto;
  background:var(--bg-soft);
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
}
.wpavcs-row{
  display:flex; gap:8px; align-items:flex-end;
  padding:12px;
  border-top:1px solid var(--border-soft);
  background:var(--bg);
  position:sticky; bottom:0; z-index:3;
}
.wpavcs-input{
  flex:1; resize:none;
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; min-height:44px; max-height:160px;
  font: inherit; color:var(--text); background:#fff;
}
.wpavcs-send{
  background:#111; color:#fff; border:none;
  border-radius:12px; padding:10px 14px; font-weight:600;
  cursor:pointer;
}

/* Bulles */
.wpavcs-log .msg{
  position:relative;
  padding:10px 12px; border-radius:18px;
  line-height:1.38; white-space:pre-wrap; max-width:78%;
  color:var(--text);
}
.wpavcs-log .msg.user{
  background:var(--bubble-user);
  align-self:flex-end;
  border-bottom-right-radius:6px;
}
.wpavcs-log .msg.assistant{
  background:var(--bubble-ai);
  align-self:flex-start;
  border-bottom-left-radius:6px;
  padding-left:48px; /* espace pour avatar */
}
/* Avatar du personnage dans la bulle de l'IA – nécessite la variable CSS --char-avatar côté JS */
.wpavcs-log .msg.assistant::before{
  content:"";
  position:absolute; left:12px; bottom:8px;
  width:28px; height:28px; border-radius:9999px;
  background:#eee center/cover no-repeat;
  background-image: var(--char-avatar);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}

/* ===========================
   Grille Personnages
   =========================== */
.wpavcs-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px;
}
.wpavcs-card{ border:1px solid var(--border); border-radius:12px; padding:10px; text-align:center; background:#fff; }
.wpavcs-card .img{ width:100%; padding-top:120px; background:#eee center/cover no-repeat; border-radius:10px; margin-bottom:10px; }
.wpavcs-card .name{ font-weight:600; margin-bottom:8px; color:var(--text); }
.wpavcs-card .start{ display:inline-block; border:1px solid #111; background:#111; color:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; text-decoration:none; }

/* ===========================
   Mobile (100% app-like)
   =========================== */

/* Masquer le titre de la page "Chat" sur mobile (couvre les thèmes WP courants) */
@media (max-width: 768px){
  .entry-title, .page-title, .elementor-page-title, .elementor-heading-title { display:none !important; }
}

@media (max-width: 768px){
  html, body { height: 100%; background:#fff; }

  /* Hub et panneaux en vraie pleine hauteur */
  .wpavcs-hub{
    border:none; border-radius:0;
    grid-template-columns: 1fr;
    min-height: 100vh;
    height: 100vh;
    margin: 0; padding: 0;
  }
  @supports (height: 100svh) {
    .wpavcs-hub{ min-height: 100svh; height: 100svh; }
  }
  @supports (height: 100dvh) {
    .wpavcs-hub{ min-height: 100dvh; height: 100dvh; }
  }

  .wpavcs-hub .left,
  .wpavcs-hub .right,
  .wpavcs-chat{
    height:100%; min-height:0;
    display:flex; flex-direction:column;
    overflow:hidden; /* évite le “trop haut” et les doubles scroll */
  }

  /* Navigation: liste ↔ chat plein écran */
  .wpavcs-hub[data-state="list"] .left{ display:flex; }
  .wpavcs-hub[data-state="list"] .right{ display:none; }
  .wpavcs-hub[data-state="chat"] .left{ display:none; }
  .wpavcs-hub[data-state="chat"] .right{ display:flex; }

  /* Header collé tout en haut */
  .wpavcs-header{
    position: sticky; top: 0; left:0; right:0;
    padding: 14px max(16px, env(safe-area-inset-left)) 14px max(16px, env(safe-area-inset-right));
    margin: 0;
    z-index: 5;
  }
  /* Espace clair entre back/ avatar / nom */
  .wpavcs-char .back-btn{ margin-right: 12px; }
  .wpavcs-char-avatar{ margin-left: 8px; }
  .wpavcs-char-name{ margin-left: 8px; }

  /* Zone messages prend tout l'espace restant entre header et input */
  .wpavcs-log{
    flex:1; min-height:0;
    overflow:auto;
    padding:12px 10px;
    -webkit-overflow-scrolling: touch;
  }

  /* Barre d'envoi collée en bas, avec safe-area (iPhone encoches) */
  .wpavcs-row{
    position: sticky; bottom: 0;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    gap:10px;
    z-index: 5;
  }

  /* Ajustements compacts */
  .wpavcs-log .msg{ font-size:15px; }
  .wpavcs-input{ min-height:42px; font-size:15px; }
  .wpavcs-send{ padding:8px 12px; }
}

/* Mini-ajustements très petits écrans */
@media (max-width: 480px){
  .thread .avatar{ width:40px; height:40px; flex:0 0 40px; }
}