.mail{
  --side:clamp(1.25rem,4vw,3.5rem);
  position:relative;background:var(--secondary);color:var(--foreground);
  padding:clamp(4.5rem,10vh,8rem) var(--side);
}
.mail .kicker{color:color-mix(in oklch,var(--foreground) 50%,transparent);}
.mail-top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;gap:clamp(2rem,5vw,4.5rem);
  padding-bottom:clamp(2.5rem,5vh,3.5rem);
}
.mail h2{
  margin:0;
  font-size:clamp(1.875rem,4.4vw,3.5rem);
  font-weight:600;line-height:1.02;
  letter-spacing:-.032em;text-transform:uppercase;
}
.mail h2 .dim{color:var(--muted-foreground);}
.mail-note{
  margin:0;max-width:44ch;color:var(--muted-foreground);
  font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.6;
}

.mail-body{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr);
  gap:clamp(1.25rem,2.5vw,2rem);align-items:start;
}

/* --- left: prospect switch + sequence --- */
.pick-h{
  display:block;margin-bottom:.875rem;
  font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted-foreground);
}
.who{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.75rem,3.5vh,2.5rem);}
.who button{
  display:flex;align-items:center;gap:.5rem;
  padding:.4375rem .8125rem .4375rem .4375rem;
  border-radius:9999px;border:1px solid color-mix(in oklch,var(--foreground) 10%,transparent);
  background:var(--card);color:inherit;font-family:inherit;
  font-size:.8125rem;font-weight:500;cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.who button:hover{border-color:color-mix(in oklch,var(--foreground) 28%,transparent);}
.who button[aria-pressed="true"]{
  background:var(--foreground);color:oklch(0.985 0 0);border-color:transparent;
}
.av{
  display:flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;border-radius:9999px;flex-shrink:0;
  background:color-mix(in oklch,var(--foreground) 10%,transparent);
  font-size:.5625rem;font-weight:600;letter-spacing:.02em;
}
.who button[aria-pressed="true"] .av{background:oklch(1 0 0 / .2);}

.steps-list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--border);
}
.mstep{
  position:relative;width:100%;text-align:left;
  display:flex;align-items:center;gap:.875rem;
  padding:1rem .25rem;border:0;background:none;color:inherit;
  font-family:inherit;cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .25s;
}
.mstep:hover{background:color-mix(in oklch,var(--foreground) 3%,transparent);}
.mstep-day{
  flex-shrink:0;width:3.25rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-foreground);
  transition:color .25s;
}
.mstep-t{
  flex:1;font-size:.9375rem;font-weight:500;letter-spacing:-.012em;
  color:var(--muted-foreground);transition:color .25s;
}
.mstep-i{
  flex-shrink:0;width:.5rem;height:.5rem;border-radius:9999px;
  background:color-mix(in oklch,var(--foreground) 18%,transparent);
  transition:all .25s;
}
.mstep[aria-selected="true"] .mstep-t{color:var(--foreground);font-weight:600;}
.mstep[aria-selected="true"] .mstep-day{color:var(--foreground);}
.mstep[aria-selected="true"] .mstep-i{background:var(--foreground);transform:scale(1.3);}

.mail-hint{
  margin:1.25rem 0 0;
  font-size:.75rem;line-height:1.5;color:var(--muted-foreground);
}

/* --- right: the message --- */
.msg{
  display:flex;flex-direction:column;
  min-height:clamp(21rem,42vh,27rem);
  border-radius:var(--r-4xl);
  background:var(--card);
  box-shadow:0 4px 6px -1px color-mix(in oklch,var(--foreground) 6%,transparent);
  outline:1px solid color-mix(in oklch,var(--foreground) 5%,transparent);
  outline-offset:-1px;
  overflow:hidden;
}
.msg-bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.875rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.msg-dot{
  width:.5rem;height:.5rem;border-radius:9999px;
  background:color-mix(in oklch,var(--foreground) 14%,transparent);
}
.msg-from{
  margin-left:.625rem;font-size:.6875rem;letter-spacing:.03em;
  color:var(--muted-foreground);
}
.msg-sent{
  margin-left:auto;display:inline-flex;align-items:center;gap:.4375rem;
  font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted-foreground);
}
.msg-sent i{
  width:.4375rem;height:.4375rem;border-radius:9999px;background:var(--foreground);
}
.mail.busy .msg-sent i{animation:blip 1.1s ease-in-out infinite;}

.msg-head{
  padding:clamp(1.125rem,2vw,1.5rem) clamp(1.25rem,2.2vw,1.75rem) 0;
}
.msg-to{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:.75rem;color:var(--muted-foreground);
  padding-bottom:.75rem;
}
.msg-to b{color:var(--foreground);font-weight:600;}
.msg-subj{
  margin:0;padding-bottom:clamp(1rem,2vh,1.25rem);
  border-bottom:1px solid var(--border);
  font-size:clamp(1rem,1.5vw,1.1875rem);
  font-weight:600;letter-spacing:-.02em;
  min-height:1.4em;
}
.caret{
  display:inline-block;width:2px;height:1em;
  background:var(--foreground);vertical-align:-.12em;margin-left:1px;
  animation:cbl .9s step-end infinite;
}
@keyframes cbl{0%,100%{opacity:1}50%{opacity:0}}

.msg-body{
  flex:1;
  padding:clamp(1.125rem,2vw,1.5rem) clamp(1.25rem,2.2vw,1.75rem);
  display:flex;flex-direction:column;gap:.875rem;
}
.msg-body p{
  margin:0;font-size:.9375rem;line-height:1.65;
  color:color-mix(in oklch,var(--foreground) 82%,transparent);
  opacity:0;transform:translateY(6px);
}
.msg-body p.in{
  animation:lineIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes lineIn{to{opacity:1;transform:none}}
.tok{
  background:color-mix(in oklch,var(--foreground) 9%,transparent);
  color:var(--foreground);
  padding:.0625rem .25rem;border-radius:.25rem;
  font-weight:500;
}

.msg-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;
  padding:clamp(.875rem,1.6vw,1.125rem) clamp(1.25rem,2.2vw,1.75rem);
  border-top:1px solid var(--border);
}
.mtag{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.25rem .5625rem;border-radius:9999px;
  border:1px solid var(--border);
  font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-foreground);
}
.mtag svg{width:.6875rem;height:.6875rem;}
.mtag.solid{background:var(--foreground);color:var(--background);border-color:transparent;}

@media (prefers-reduced-motion:reduce){
  .msg-body p{opacity:1;transform:none;animation:none;}
  .caret{animation:none;}
}
@media (max-width:940px){
  .mail-top{grid-template-columns:1fr;align-items:start;gap:1.5rem;}
  .mail-body{grid-template-columns:1fr;}
  .msg{min-height:0;}
}
@media (max-width:560px){
  .msg-to{flex-wrap:wrap;}
}