/* Virgule — tuteur art direction / pass 1
   Direction: dialogue studio / margin notebook.
   The tutor is a working desk, not a chat-app clone.
*/
body:has(.tutor-page){
  --tut-gold:var(--craie-doree,#d9a857);
  --tut-ink:var(--craie,#e8f5e8);
  --tut-muted:var(--craie-pale-vive,rgba(232,245,232,.64));
  --tut-rule:rgba(232,245,232,.15);
}
.tutor-page{
  max-width:1180px;
  padding:clamp(108px,12vh,140px) clamp(20px,7vw,96px) 90px;
  margin:0 auto;
  min-height:calc(100vh - 62px - env(safe-area-inset-bottom));
}
body:not(.vgl-has-bottomnav) .tutor-page{min-height:100vh}
.tutor-head{
  position:relative;
  text-align:start;
  padding:0 0 34px;
  border-bottom:1px solid var(--tut-rule);
}
.tutor-head::before{
  content:"STUDIO / 04";
  position:absolute;
  inset-block-start:-18px;
  inset-inline-end:0;
  color:var(--tut-gold);
  font:500 10px/1 var(--font-mono,monospace);
  letter-spacing:.16em;
}
.tutor-eyebrow{
  color:var(--tut-gold);
  font:500 10px/1.4 var(--font-mono,monospace);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.tutor-title{
  max-width:900px;
  margin:18px 0 14px;
  font-family:var(--font-heading,serif);
  font-size:clamp(44px,7vw,86px);
  line-height:.9;
  letter-spacing:-.05em;
}
.tutor-sub{
  max-width:620px;
  margin:0;
  padding-inline-start:18px;
  border-inline-start:2px solid var(--tut-gold);
  color:var(--tut-muted);
  font-size:14px;
  line-height:1.7;
}
.tutor-context{
  margin-top:22px;
  color:var(--tut-muted);
  font:500 10px/1.4 var(--font-mono,monospace);
  letter-spacing:.06em;
}
.tutor-prompts{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-top:24px;
  border-block:1px solid var(--tut-rule);
}
.tutor-prompts button{
  min-height:44px;
  padding:9px 14px;
  border:0;
  border-inline-end:1px solid var(--tut-rule);
  border-radius:0;
  background:transparent;
  color:var(--tut-muted);
  font:400 11px/1.4 var(--font-body);
  text-align:start;
}
.tutor-prompts button:hover{
  color:var(--tut-gold);
  background:rgba(217,168,87,.035);
}
.gate-loading{
  padding:60px 0;
  align-items:flex-start;
  border-bottom:1px solid var(--tut-rule);
}
.gate-spinner{
  width:20px;height:20px;
  border:1px solid var(--tut-rule);
  border-top-color:var(--tut-gold);
}
.gate-card{
  max-width:620px;
  margin:44px 0 0;
  padding:22px 0;
  text-align:start;
  border:0;
  border-block:1px solid var(--tut-rule);
  border-radius:0;
  background:transparent;
}
.gate-card p{color:var(--tut-muted)}
.gate-card a.btn-cta{
  border-radius:0;
  background:transparent;
  border-bottom:1px solid var(--tut-gold);
  color:var(--tut-gold);
  padding:8px 0;
}
.chat-shell{
  margin-top:34px;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.chat-messages{
  min-height:420px;
  padding:24px 0 36px;
  gap:0;
  border-bottom:1px solid var(--tut-rule);
}
.msg{
  max-width:min(760px,86%);
  margin:0;
  padding:18px 0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  line-height:1.7;
  position:relative;
}
.msg.assistant{
  align-self:flex-start;
  padding-inline-start:22px;
  border-inline-start:2px solid var(--tut-gold)!important;
}
.msg.user{
  align-self:flex-end;
  padding-inline-end:22px;
  border-inline-end:1px solid var(--tut-rule)!important;
  text-align:end;
}
.msg.pending,.msg.quota,.msg.err{border-inline:0!important}
.chat-input-bar{
  margin-top:20px;
  padding:0;
  border:1px solid var(--tut-rule);
  background:transparent;
  align-items:stretch;
}
.chat-input{
  min-height:54px;
  border:0;
  border-radius:0;
  background:transparent;
  padding:16px;
}
.chat-input:focus{border:0;box-shadow:none}
.chat-send{
  width:54px;height:auto;
  border-radius:0;
  background:var(--tut-gold);
  color:var(--ardoise);
}
.tutor-note{
  padding:14px 0;
  text-align:start;
  color:var(--tut-muted);
  border-bottom:1px solid var(--tut-rule);
}
@media(max-width:700px){
  .tutor-page{padding:96px 20px 70px}
  .tutor-head::before{inset-block-start:-12px}
  .tutor-title{font-size:clamp(42px,14vw,68px)}
  .tutor-prompts{display:grid;grid-template-columns:1fr}
  .tutor-prompts button{border-inline-end:0;border-bottom:1px solid var(--tut-rule)}
  .chat-messages{min-height:320px;padding-top:10px}
  .msg{max-width:94%}
}
@media(prefers-reduced-motion:reduce){
  body:has(.tutor-page) *{animation:none!important;transition:none!important}
}