/* ══ the conversation ═════════════════════════════════════════════
   A transcript, not a chat bubble toy. The studio's type, the studio's
   spacing; what distinguishes the two voices is weight and indent
   rather than coloured pills.                                       */

.chatWrap{padding:0 5.2rem 16rem;max-width:112rem}
.chat{border-top:1px solid var(--hair);padding-top:4rem}

.chat__log{min-height:32rem;margin-bottom:4rem}
.chatLine{margin:0 0 3.2rem;max-width:76rem}
.chatLine__who{display:block;font-family:var(--mon);font-size:1rem;line-height:160%;
  letter-spacing:.2em;text-transform:uppercase;color:rgb(255 255 255/.45);margin-bottom:1.2rem}
.chatLine__text{margin:0;font-family:var(--book);font-size:1.9rem;line-height:1.65;
  letter-spacing:.03em;white-space:pre-wrap}
.chatLine--them .chatLine__text{font-family:var(--swear);font-size:2.6rem;line-height:1.4;
  letter-spacing:.01em}
.chatLine--you{margin-left:auto;text-align:right}
.chatLine--you .chatLine__text{color:rgb(255 255 255/.72)}
.chatLine--bad .chatLine__text{color:var(--gold)}

/* the assistant thinking: three dots on the same baseline as its words */
.chatDots{display:inline-flex;gap:.7rem;align-items:center;height:2.6rem}
.chatDots span{width:.7rem;height:.7rem;border-radius:50%;background:rgb(255 255 255/.5);
  animation:chatPulse 1.2s ease-in-out infinite}
.chatDots span:nth-child(2){animation-delay:.15s}
.chatDots span:nth-child(3){animation-delay:.3s}
@keyframes chatPulse{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-.3rem)}}
@media (prefers-reduced-motion:reduce){.chatDots span{animation:none;opacity:.6}}

/* ── the field ──────────────────────────────────────────────── */
.chat__form{display:flex;gap:1.6rem;align-items:flex-end;
  border-top:1px solid var(--hair);padding-top:2.4rem}
.chat__field{flex:1 1 auto;min-width:0}
.chat__form textarea{width:100%;background:transparent;border:0;resize:none;overflow:hidden;
  color:var(--white);font-family:var(--book);font-size:1.9rem;line-height:1.6;letter-spacing:.03em;
  padding:.6rem 0}
.chat__form textarea::placeholder{color:rgb(255 255 255/.32)}
.chat__form textarea:focus{outline:none}

.chat__send{position:relative;flex:none;height:4.6rem;border:0;border-radius:2.3rem;
  padding:1.55rem 2.2rem 1.65rem 3.4rem;overflow:hidden;cursor:pointer;background:transparent}
.chat__sendLabel{color:var(--black);font-family:var(--mon);font-size:1.5rem;line-height:.95;
  position:relative;z-index:2;display:inline-block;transition:transform 150ms var(--ease)}
.chat__sendDot{position:absolute;left:.8rem;top:1rem;width:2.6rem;height:2.6rem;border-radius:1.3rem;
  background:var(--gold);transform:scale(.2);z-index:2;transition:transform .45s var(--ease)}
.chat__send::before,.chat__send::after{content:"";position:absolute;top:0;bottom:0;
  min-width:75%;max-width:75%;background:var(--white);z-index:1}
.chat__send::before{left:0;border-radius:2.2rem 0 0 2.2rem;transition:transform .2s var(--ease)}
.chat__send::after{right:0;border-radius:0 2.2rem 2.2rem 0;transition:transform .25s var(--ease)}
.chat__send:hover .chat__sendDot{transform:scale(1)}
.chat__send:hover .chat__sendLabel{transform:translateX(.6rem)}
.chat__send:hover::before{transform:translateX(-.5rem)}
.chat__send:hover::after{transform:translateX(.5rem)}
.chat__send[disabled]{opacity:.4;cursor:default}
.chat__send[disabled]:hover .chat__sendDot{transform:scale(.2)}
.chat__send[disabled]:hover::before,.chat__send[disabled]:hover::after{transform:none}

.chat__note{margin:2.4rem 0 0;font-family:var(--mon);font-size:1.1rem;line-height:1.8;
  letter-spacing:.14em;text-transform:uppercase;color:rgb(255 255 255/.38);max-width:62rem}

/* ── when it is off ─────────────────────────────────────────── */
.chatOff{border-top:1px solid var(--hair);padding-top:4rem;max-width:70rem}
.chatOff__text{font-family:var(--book);font-size:2.2rem;line-height:1.6;letter-spacing:.03em;
  margin:0 0 4rem}

.u-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  .chatWrap{padding:0 1.5rem 9rem}
  .chat{padding-top:2.4rem}
  .chat__log{min-height:24rem;margin-bottom:2.4rem}
  .chatLine{margin-bottom:2.4rem}
  .chatLine__text{font-size:1.7rem}
  .chatLine--them .chatLine__text{font-size:2.1rem}
  .chat__form{gap:1rem;padding-top:1.6rem}
  .chat__form textarea{font-size:1.7rem}
  .chat__send{padding-left:3rem;padding-right:1.8rem}
  .chatOff__text{font-size:1.8rem}
}