/* ============================================================
   SUITED — PROJECT INTAKE LIGHTBOX
   AI intake chat, opened from any "Start a project" CTA
   Inherits theme tokens from suited-clean.css
   ============================================================ */

.intake{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,40px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .42s var(--ease), visibility .42s var(--ease);
}
.intake.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.intake__scrim{
  position:absolute; inset:0;
  background:color-mix(in srgb, var(--ink) 58%, transparent);
  -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%);
}

.intake__panel{
  position:relative; z-index:1;
  width:100%; max-width:680px; max-height:min(860px, 92vh);
  display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  border:1.5px solid var(--line);
  border-radius:24px; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.45), 0 2px 0 var(--line-soft) inset;
  transform:translateY(22px) scale(.97);
  transition:transform .5s var(--ease);
}
.intake.is-open .intake__panel{ transform:none; }

.intake__close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  font-size:17px; cursor:pointer; line-height:1;
  transition:background .25s, transform .25s var(--ease), border-color .25s;
}
.intake__close:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent,#fff); transform:rotate(90deg); }

.intake__head{
  padding:clamp(24px,4vw,34px) clamp(22px,4vw,36px) 18px;
  border-bottom:1px solid var(--line-soft);
}
.intake__head .eyebrow{ margin-bottom:13px; color:var(--accent); }
.intake__head .eyebrow::before{ background:var(--accent); }
.intake__title{
  font-family:var(--font-head); font-weight:var(--head-weight);
  letter-spacing:var(--head-track); line-height:1;
  font-size:clamp(26px,3.6vw,38px); margin:0;
}

/* ---- chat scroll region ---- */
.intake .chat{
  display:flex; flex-direction:column; gap:14px;
  flex:1; min-height:0; overflow-y:auto;
  padding:clamp(18px,3vw,24px) clamp(22px,4vw,36px);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.intake .chat::-webkit-scrollbar{ width:8px; }
.intake .chat::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

.intake .msg{
  max-width:85%; padding:14px 18px; border-radius:18px;
  font-size:16px; line-height:1.45; animation:intakePop .4s var(--ease);
}
@keyframes intakePop{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.intake .msg.bot{
  align-self:flex-start; background:var(--bg-2);
  border:1px solid var(--line-soft); border-bottom-left-radius:5px; color:var(--ink);
}
.intake .msg.user{
  align-self:flex-end; background:var(--ink); color:var(--on-ink); border-bottom-right-radius:5px;
}
.intake .msg.bot .q{ font-weight:600; }
.intake .msg.bot em{ color:var(--accent); font-style:normal; font-weight:700; }
.intake .msg.err{ color:var(--accent); }

.intake .typing{ display:inline-flex; gap:5px; align-items:center; }
.intake .typing i{ width:7px; height:7px; border-radius:50%; background:var(--mute); animation:intakeBob 1s infinite; }
.intake .typing i:nth-child(2){ animation-delay:.15s }
.intake .typing i:nth-child(3){ animation-delay:.3s }
@keyframes intakeBob{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)} }

/* ---- composer ---- */
.intake .composer{
  display:flex; gap:10px; align-items:flex-end;
  padding:14px clamp(22px,4vw,36px) clamp(18px,3vw,24px);
  border-top:1px solid var(--line-soft);
}
.intake textarea{
  flex:1; resize:none; background:var(--bg-2);
  border:1.5px solid var(--line); border-radius:14px;
  padding:14px 17px; font-family:var(--font-body); font-size:16px; font-weight:500;
  color:var(--ink); line-height:1.35; min-height:52px; max-height:150px;
  outline:none; transition:border-color .2s var(--ease);
}
.intake textarea:focus{ border-color:var(--accent); }
.intake textarea::placeholder{ color:var(--mute); }
.intake .send{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:none;
  background:var(--ink); color:var(--on-ink); font-size:21px; cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.intake .send:hover{ transform:translateY(-2px); background:var(--accent); color:var(--on-accent,#fff); }
.intake .send[disabled]{ opacity:.4; cursor:default; transform:none; }

/* ---- pinned action footer (brief Send / Start over) ---- */
.intake .actions{
  display:flex; flex-direction:column; gap:11px;
  padding:16px clamp(22px,4vw,36px) clamp(18px,3vw,24px);
  border-top:1px solid var(--line);
  background:var(--bg);
}
.intake .actions[hidden]{ display:none; }
.intake .actions__row{ display:flex; flex-wrap:wrap; gap:12px; }
.intake .actions__row .ibtn{ flex:1 1 auto; justify-content:center; }
.intake .actions__row .ibtn--ghost{ flex:0 0 auto; }
/* fill that sweeps the Send bar during auto-send */
.intake .actions__row .ibtn{ position:relative; overflow:hidden; }
.intake .ibtn__fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:rgba(0,0,0,.22); pointer-events:none; z-index:0;
}
.intake .ibtn__lbl{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; }
/* auto-send countdown line */
.intake .actions__auto{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute);
}
.intake .actions__auto .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:autoPulse 1.1s infinite; }
.intake .actions__auto strong{ color:var(--ink); font-weight:700; }
.intake .actions__auto.is-off .dot{ display:none; }
@keyframes autoPulse{ 50%{ opacity:.25; } }

/* ---- contact-capture card ---- */
.intake .contact{
  align-self:stretch; background:var(--bg-2);
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(18px,3vw,24px); animation:intakePop .45s var(--ease);
}
.intake .contact__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.intake .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.intake .field label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
}
.intake .field input{
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px;
  padding:13px 15px; font-family:var(--font-body); font-size:16px; font-weight:500;
  color:var(--ink); outline:none; transition:border-color .2s var(--ease);
}
.intake .field input:focus{ border-color:var(--accent); }
.intake .field input::placeholder{ color:var(--mute); }
.intake .field.invalid input{ border-color:var(--accent); }
.intake .field__err{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--accent);
  height:0; overflow:hidden; opacity:0; transition:opacity .2s, height .2s;
}
.intake .field.invalid .field__err{ height:14px; opacity:1; }
.intake .contact__hint{ font-size:13px; color:var(--mute); margin:2px 0 16px; line-height:1.4; }

/* ---- brief card ---- */
.intake .brief{
  align-self:stretch; background:var(--bg-2);
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(20px,3vw,30px); animation:intakePop .5s var(--ease);
}
.intake .brief__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.intake .brief h3{
  font-family:var(--font-head); font-weight:var(--head-weight);
  letter-spacing:-.03em; line-height:1.05; font-size:clamp(22px,3vw,30px);
  margin:0 0 16px; text-wrap:pretty;
}
.intake .brief__row{
  display:flex; gap:14px; padding:12px 0;
  border-top:1px solid var(--line-soft); font-size:15px; line-height:1.5;
}
.intake .brief__row .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute); flex:0 0 96px; padding-top:3px;
}
.intake .brief__row .v{ color:var(--ink-2); flex:1; }

.intake .brief__cta, .intake .contact__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.intake .ibtn{
  font-family:var(--font-body); font-weight:700; font-size:16px;
  background:var(--accent); color:var(--on-accent,#fff); border:1.5px solid var(--accent);
  border-radius:999px; padding:14px 24px; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  transition:background .25s, color .25s, transform .2s var(--ease);
}
.intake .ibtn:hover{ background:transparent; color:var(--accent); transform:translateY(-2px); }
.intake .ibtn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.intake .ibtn--ghost:hover{ border-color:var(--ink); color:var(--ink); background:transparent; }

/* ---- thank-you / "fitted" confirmation ---- */
.intake .sent{
  align-self:stretch; position:relative; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line); border-radius:18px;
  padding:clamp(30px,5vw,46px) clamp(22px,4vw,30px) clamp(24px,4vw,30px);
  text-align:center;
}
.intake .sent__stamp{
  width:96px; height:96px; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--accent);
  box-shadow:0 14px 36px color-mix(in srgb, var(--accent) 45%, transparent);
  transform:scale(1) rotate(-7deg);
  animation:sentStamp .7s cubic-bezier(.2,1.5,.4,1) both;
}
.intake .sent__stamp svg{ width:50px; height:50px; }
.intake .sent__stamp path{
  fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60;
  animation:sentCheck .45s var(--ease) .35s forwards;
}
.intake .sent .brief__label{ justify-content:center; }
.intake .sent h3{
  font-family:var(--font-head); font-weight:var(--head-weight);
  letter-spacing:-.03em; line-height:1.04; font-size:clamp(26px,3.6vw,38px);
  margin:0 0 12px; text-wrap:balance;
}
.intake .sent p{ max-width:42ch; margin:0 auto; color:var(--ink-2); font-size:15px; line-height:1.5; }
.intake .sent .brief__cta{ justify-content:center; }
.intake .sent__fail{ text-align:center; }
.intake .sent__fail .sent__stamp{ background:var(--ink); }

/* framed GIF centerpiece */
.intake .sent__media{
  position:relative; width:min(340px,80%); margin:0 auto 28px;
  aspect-ratio:16/9; border-radius:16px;
  transform:rotate(-2.5deg);
  animation:gifIn .7s cubic-bezier(.2,1.3,.4,1) both;
}
.intake .sent__frame{
  position:absolute; inset:0; border-radius:16px; overflow:hidden;
  border:4px solid var(--bg-2); outline:1.5px solid var(--line);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55);
  background:#0c0d0c; container-type:inline-size;
}
.intake .sent__gif{ width:100%; height:100%; object-fit:cover; display:block; }
.intake .sent__meme{
  position:absolute; z-index:2; left:16px; bottom:12px; max-width:62%;
  font-family:"Montserrat",var(--font-head),sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:-.012em; line-height:.92;
  font-size:clamp(20px,9cqw,34px); color:#fff;
  -webkit-text-stroke:1px rgba(10,10,10,.4); paint-order:stroke fill;
  text-shadow:0 2px 10px rgba(0,0,0,.5); pointer-events:none; text-wrap:balance;
}
.intake .sent__media .sent__stamp{
  position:absolute; margin:0; width:74px; height:74px;
  right:-22px; bottom:-22px;
  animation:sentStamp .6s cubic-bezier(.2,1.6,.4,1) .55s both;
}
.intake .sent__media .sent__stamp svg{ width:38px; height:38px; }

/* countdown */
.intake .sent__eta{ margin-top:24px; }
.intake .sent__eta-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin-bottom:12px;
}
.intake .sent__clock{ display:inline-flex; align-items:flex-start; gap:8px; }
.intake .sent__clock .unit{ display:flex; flex-direction:column; align-items:center; gap:7px; min-width:60px; }
.intake .sent__clock .num{
  font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(26px,5vw,36px); line-height:1; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px;
  padding:13px 9px; min-width:100%; box-shadow:0 6px 16px -10px rgba(0,0,0,.5);
}
.intake .sent__clock .lab{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.intake .sent__clock .sep{
  font-family:var(--mono); font-weight:700; font-size:clamp(22px,4vw,32px);
  color:var(--accent); line-height:1; padding-top:13px; animation:colonBlink 1s steps(1,end) infinite;
}
.intake .sent__eta.done .sent__clock{ display:none; }
.intake .sent__eta.done .sent__eta-label{ color:var(--accent); font-size:14px; letter-spacing:.04em; }

.intake .confetti{
  position:absolute; left:50%; top:60px; z-index:0;
  font-size:15px; line-height:1; pointer-events:none; opacity:0; will-change:transform,opacity;
  animation:confettiFly 1.05s var(--ease) forwards;
}
.intake .confetti.sq{ width:9px; height:9px; border-radius:2px; }

@keyframes sentStamp{
  0%{ transform:scale(1.9) rotate(-16deg); opacity:0; }
  55%{ transform:scale(.88) rotate(-4deg); opacity:1; }
  100%{ transform:scale(1) rotate(-7deg); opacity:1; }
}
@keyframes sentCheck{ to{ stroke-dashoffset:0; } }
@keyframes gifIn{
  0%{ transform:rotate(-9deg) scale(.86); opacity:0; }
  100%{ transform:rotate(-2.5deg) scale(1); opacity:1; }
}
@keyframes colonBlink{ 50%{ opacity:.25; } }
@keyframes confettiFly{
  0%{ transform:translate(-50%,-50%) scale(.3) rotate(0deg); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); opacity:0; }
}

@media (max-width:560px){
  .intake{ padding:0; }
  .intake__panel{ max-width:none; max-height:100vh; height:100%; border-radius:0; border:none; }
}
@media (prefers-reduced-motion:reduce){
  .intake, .intake__panel, .intake__close{ transition:none; }
  .intake .msg, .intake .contact, .intake .brief, .intake .sent, .intake .sent__media{ animation:none; }
  .intake .sent__media{ transform:rotate(-2.5deg); }
  .intake .sent__stamp{ animation:none; }
  .intake .sent__stamp path{ animation:none; stroke-dashoffset:0; }
  .intake .confetti{ display:none; }
}