/* ==========================================================================
   JEAN AI — styles spécifiques (hero, chat, auth, espace personnel)
   Réutilise les tokens de ../assets/css/main.css
   ========================================================================== */

.jai-hero{
  min-height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:110px;
  text-align:center;
  align-items:center;
}
.jai-hero .mono-label{ color:var(--muted-on-ink); }
.jai-hero h1{
  font-size:clamp(3rem, 11vw, 8rem);
  margin-top:20px;
  letter-spacing:-0.01em;
}
.jai-hero h1 .accent{ color:var(--accent); }
.jai-hero p{
  max-width:52ch;
  color:#C7C7C7;
  font-size:1.05rem;
  margin:24px auto 0;
  line-height:1.6;
}
.jai-cta-row{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-top:40px;
  flex-wrap:wrap;
}

.jai-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  background:var(--line);
  margin-top:56px;
}
.jai-grid-item{
  background:var(--ink);
  padding:28px 20px;
}
.jai-grid-item .mono-num{ color:var(--accent); font-size:.8125rem; }
.jai-grid-item h3{ font-size:1.05rem; text-transform:none; font-family:var(--font-body); font-weight:700; margin-top:12px; }
@media (max-width:900px){ .jai-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .jai-grid{ grid-template-columns:1fr; } }

.jai-flow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:32px;
}
.jai-flow span{
  font-family:var(--font-mono);
  font-size:.8125rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--paper);
  border:1px solid var(--line);
  padding:8px 14px;
}
.jai-flow .arrow{ color:var(--accent); border:none; padding:0; }

.jai-try{
  max-width:640px;
  margin:56px auto 0;
  width:100%;
}
.jai-try-input{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--ink-raise);
  border:1px solid var(--line);
  padding:16px 18px;
}
.jai-try-input input{
  flex:1;
  background:none;
  border:none;
  outline:none;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:.95rem;
}
.jai-try-input input::placeholder{ color:var(--muted-on-ink); }
.jai-try-input button{
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}

/* ---------- Chat interface ---------- */
.jai-chat-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top:88px;
}
.jai-chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--gutter) 20px;
  border-bottom:1px solid var(--line);
}
.jai-msg-counter{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--accent);
  border:1px solid rgba(0,230,160,.35);
  padding:4px 10px;
}
.jai-messages{
  flex:1;
  max-width:760px;
  width:100%;
  margin:0 auto;
  padding:32px var(--gutter) 120px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.jai-msg{
  max-width:80%;
  padding:14px 16px;
  font-size:.95rem;
  line-height:1.6;
}
.jai-msg.jai-from-ai{
  background:var(--ink-raise);
  border:1px solid var(--line);
  align-self:flex-start;
  border-bottom-left-radius:0;
}
.jai-msg.jai-from-user{
  background:rgba(0,230,160,.1);
  border:1px solid var(--accent);
  align-self:flex-end;
}
.jai-msg.jai-from-ai h1, .jai-msg.jai-from-ai h2, .jai-msg.jai-from-ai h3{
  font-family:var(--font-display);
  text-transform:none;
  font-weight:700;
  margin:16px 0 8px;
  color:var(--paper);
}
.jai-msg.jai-from-ai h1:first-child, .jai-msg.jai-from-ai h2:first-child, .jai-msg.jai-from-ai h3:first-child{ margin-top:0; }
.jai-msg.jai-from-ai h1{ font-size:1.25rem; }
.jai-msg.jai-from-ai h2{ font-size:1.1rem; }
.jai-msg.jai-from-ai h3{ font-size:1rem; }
.jai-msg.jai-from-ai strong{ color:var(--paper); font-weight:700; }
.jai-msg.jai-from-ai em{ color:var(--muted-on-ink); }
.jai-msg.jai-from-ai p{ margin:0 0 10px; }
.jai-msg.jai-from-ai p:last-child{ margin-bottom:0; }
.jai-msg.jai-from-ai ul, .jai-msg.jai-from-ai ol{ margin:0 0 10px; padding-left:20px; }
.jai-msg.jai-from-ai li{ margin-bottom:4px; }
.jai-msg.jai-from-ai hr{ border:none; border-top:1px solid var(--line); margin:16px 0; }
.jai-msg.jai-from-ai code{ background:var(--ink); padding:2px 6px; font-family:var(--font-mono); font-size:.85em; }
.jai-msg.jai-from-ai a{ color:var(--accent); text-decoration:underline; }
.jai-typing{
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--muted-on-ink);
  align-self:flex-start;
}
.jai-gate{
  align-self:center;
  max-width:420px;
  text-align:center;
  background:var(--ink-raise);
  border:1px solid var(--line);
  padding:28px 24px;
  margin-top:16px;
}
.jai-gate p{ color:#C7C7C7; margin-bottom:18px; font-size:.9rem; }

.jai-input-bar{
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:16px var(--gutter);
}
.jai-input-bar form{
  max-width:760px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--ink-raise);
  border:1px solid var(--line);
  padding:10px 14px;
}
.jai-input-bar input[type="text"]{
  flex:1;
  background:none;
  border:none;
  outline:none;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:.95rem;
}
.jai-input-bar input::placeholder{ color:var(--muted-on-ink); }
.jai-icon-btn{
  background:none;
  border:none;
  color:var(--muted-on-ink);
  font-size:1.1rem;
  cursor:pointer;
  padding:4px;
}
.jai-icon-btn:hover{ color:var(--accent); }
.jai-send-btn{
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}

/* ---------- Auth ---------- */
.jai-auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:88px;
}
.jai-auth-box{ width:100%; max-width:400px; padding:0 24px; }
.jai-auth-tabs{ display:flex; border-bottom:1px solid var(--line); margin-bottom:28px; }
.jai-auth-tab{
  flex:1;
  text-align:center;
  padding:12px;
  font-family:var(--font-mono);
  font-size:.8125rem;
  text-transform:uppercase;
  color:var(--muted-on-ink);
  cursor:pointer;
  border-bottom:2px solid transparent;
}
.jai-auth-tab.is-active{ color:var(--paper); border-color:var(--accent); }
.jai-field{ margin-bottom:16px; }
.jai-field label{ display:block; font-family:var(--font-mono); font-size:.75rem; color:var(--muted-on-ink); margin-bottom:6px; text-transform:uppercase; }
.jai-field input{
  width:100%;
  background:var(--ink-raise);
  border:1px solid var(--line);
  color:var(--paper);
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:.95rem;
  outline:none;
}
.jai-field input:focus{ border-color:var(--accent); }
.jai-auth-error{ color:#E85D5D; font-size:.8125rem; margin-bottom:16px; display:none; }
.jai-auth-error.is-visible{ display:block; }

/* ---------- Espace personnel ---------- */
.jai-space{ display:flex; min-height:100vh; padding-top:88px; }
.jai-sidebar{
  width:240px;
  flex-shrink:0;
  border-right:1px solid var(--line);
  padding:24px 0;
}
.jai-sidebar a{
  display:block;
  padding:12px 24px;
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--muted-on-ink);
  border-left:2px solid transparent;
}
.jai-sidebar a.is-active{ color:var(--paper); border-color:var(--accent); }
.jai-sidebar a:hover{ color:var(--paper); }
.jai-space-content{ flex:1; padding:32px; max-width:900px; }
.jai-memory-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--line);
  margin-bottom:8px;
}
.jai-memory-item .actions{ display:flex; gap:12px; opacity:0; transition:opacity .15s; }
.jai-memory-item:hover .actions{ opacity:1; }
.jai-memory-item .actions button{ background:none; border:none; color:var(--muted-on-ink); cursor:pointer; font-size:.9rem; }
.jai-memory-item .actions button:hover{ color:var(--accent); }
@media (max-width:768px){
  .jai-space{ flex-direction:column; }
  .jai-sidebar{ width:100%; display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:0; }
  .jai-sidebar a{ white-space:nowrap; border-left:none; border-bottom:2px solid transparent; }
  .jai-sidebar a.is-active{ border-color:var(--accent); }
}