/* The interactive demo thread (thread.js). Transparent ground, iMessage look:
   AVISO in grey on the left, Evan in blue on the right. Sized by its
   container, so the same block works in the desktop pane and stacked under
   the form on phones and tablets. */

.thread{
  --bub-me:#007AFF; --bub-me-text:#fff;
  --bub-av:#E9E9EB; --bub-av-text:#0A0A0A;
  --meta:#8E8E93;
  --bub-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter Tight",system-ui,sans-serif;
  position:relative;
  display:flex;flex-direction:column;
  width:100%;height:100%;
  font-family:var(--bub-font);
  font-size:clamp(15.6px,3.78dvh,34px);   /* floor: texts never under 14px (Evan, 2026-10-17) */               /* the text size; everything below is in em (30 → 34, Evan 2026-10-16) */
}
/* Messages' own dark colours: system blue for dark mode, the dark grey
   received bubble with white text, and a lighter timestamp grey */
[data-theme="dark"] .thread{
  --bub-me:#0A84FF;
  --bub-av:#262629; --bub-av-text:#FFFFFF;
  --meta:#98989D;
}

/* the scrolling window: newest at the bottom, older ones fade out at the top */
.thread-view{
  position:relative;flex:1;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 22%);
}
.thread-list{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  padding:0 2px 4px;
}

/* each row opens from zero height, so the rows above glide up */
.tr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.3,.7,.2,1)}
.tr.in{grid-template-rows:1fr}
.tr.still{transition:none}
.tr.open .tr-cell{overflow:visible}   /* once open, the tail may hang below */
.tr-cell{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:.1em .4em 0}
.tr.me .tr-cell{align-items:flex-end}
.tr.av .tr-cell{align-items:flex-start}
.tr.me + .tr.av .tr-cell,
.tr.av + .tr.me .tr-cell{padding-top:.4em}

.stamp-text{
  align-self:center;padding:1.2em 0 .5em;
  font-size:max(.5em,12px);font-weight:500;color:var(--meta);letter-spacing:.01em;
}

.bubble{
  position:relative;isolation:isolate;   /* the tail paints behind the words */
  max-width:min(82%, 17em);
  padding:.45em .8em .52em;
  border-radius:1.2em;
  font-size:.9em;                /* the texts a touch smaller than the rest (Evan 2026-10-16) */
  line-height:1.28;letter-spacing:-.01em;
  overflow-wrap:break-word;
  white-space:pre-line;          /* a line break in a text shows as one */
}
.tr.me .bubble{background:var(--bub-me);color:var(--bub-me-text);transform-origin:100% 100%}
.tr.av .bubble{background:var(--bub-av);color:var(--bub-av-text);transform-origin:0 100%}
.tr.in:not(.still) .bubble{animation:bub-pop .42s cubic-bezier(.25,1.3,.4,1) both}
@keyframes bub-pop{
  from{opacity:0;transform:translateY(10px) scale(.72)}
  to{opacity:1;transform:none}
}

/* the tail, on the last bubble of a run only: a swoosh that sweeps out and
   down past the bubble's corner (Evan's reference, 2026-10-15). Drawn for
   AVISO's side; mirrored for Evan's. */
.bubble::after{
  content:"";position:absolute;z-index:-1;bottom:-.33em;width:1.45em;height:1.4em;
  background:inherit;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath d='M7 0C7.5 7 5.5 14 0 20.5C7 20.2 13 18.6 17.5 16H22V0Z'/%3E%3C/svg%3E") no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath d='M7 0C7.5 7 5.5 14 0 20.5C7 20.2 13 18.6 17.5 16H22V0Z'/%3E%3C/svg%3E") no-repeat;
}
.tr.av .bubble::after{left:-.47em}
.tr.me .bubble::after{right:-.47em;transform:scaleX(-1)}
/* while a typing bubble grows into its text: the words sit at their final
   width inside a box that grows, so only the box clips; the bubble and its
   tail stay as they are */
.grow-clip{display:block;overflow:hidden}
.grow-text{display:block}
.tr.grouped .bubble::after{display:none}

/* the waitlist suggestion (thread.js, nudge): AVISO's texts dark so they
   stand apart, and everything before them faded back until the next topic */
.tr.av.nudge-row .bubble{background:#2C2C2E;color:#fff}
[data-theme="dark"] .tr.av.nudge-row .bubble{background:#E5E5EA;color:#0A0A0A}
[data-theme="dark"] .tr.nudge-row .dot{background:#8E8E93}
.tr.nudge-row .dot{background:#fff}
.tr-cell{transition:opacity .5s ease}
.tr.dimmed .tr-cell{opacity:.3}

/* addresses and phone numbers: they look like links but aren't (thread.js, fill) */
.link{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.14em;cursor:default}
.tr.av .link{color:var(--bub-me)}

.delivered{font-size:max(.48em,12px);font-weight:500;color:var(--meta);padding:.4em .5em 0}

/* typing indicator */
.bubble.typing{display:flex;gap:.27em;padding:.8em .95em}
.dot{width:.47em;height:.47em;border-radius:50%;background:var(--meta);opacity:.45;animation:dot 1.2s infinite ease-in-out}
.dot:nth-child(2){animation-delay:.16s}
.dot:nth-child(3){animation-delay:.32s}
@keyframes dot{
  0%,60%,100%{opacity:.45;transform:none}
  30%{opacity:1;transform:translateY(-3px)}
}

@media (max-width:880px) and (orientation:portrait){
  .thread{font-size:19px}
  /* two topics side by side must fit a 360px phone */
  .thread-try{padding-left:0;padding-right:0}
  .try-chip{padding:.7em .85em}
  .try-row,.try-chips{gap:.25em}   /* texts at 17px, the size of real iMessage texts on a phone */
}

/* "Try it": three topics a visitor can tap to send (thread.js, TOPICS) */
.thread-try{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  padding:.6em .3em 0;
}
.try-label{font-size:max(.42em,12px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--meta)}
.try-chips{display:flex;flex-direction:column;align-items:flex-end;gap:.3em}
.try-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3em;max-width:100%}   /* wraps only if no pair fits */
.try-row .try-chip{white-space:nowrap}
.try-chip{
  font:inherit;font-size:max(.6em,14px);font-weight:500;line-height:1;
  padding:.7em 1em;border-radius:999px;cursor:pointer;
  color:var(--bub-me);background:transparent;
  border:1.5px solid color-mix(in srgb,var(--bub-me) 55%,transparent);
  transition:background .15s ease,color .15s ease,opacity .2s ease;
}
/* fill on hover only with a real mouse: on phones a tap leaves a "stuck"
   hover on whichever topic is redrawn under the finger */
@media (hover:hover){
  .try-chip:not(:disabled):hover{background:var(--bub-me);color:var(--bub-me-text)}
}
.try-chip:not(:disabled):active{background:var(--bub-me);color:var(--bub-me-text)}
.try-chip:focus-visible{outline:2px solid var(--bub-me);outline-offset:2px}
/* greyed out while AVISO is still answering the last one */
.try-chip:disabled{
  cursor:default;opacity:.75;background:transparent;
  color:var(--meta);border-color:color-mix(in srgb,var(--meta) 45%,transparent);
}
.thread-try[hidden]{display:none}
/* a thin line between the texts and the choices under them; not on the
   opener, where there are no texts yet */
.thread-try:not(.opening){margin-top:.5em;border-top:1px solid color-mix(in srgb,var(--meta) 20%,transparent)}

/* the opener: a filled blue pill that becomes Evan's first bubble */
.try-chip-hi{
  font-size:1.5em;font-weight:600;padding:.7em 1.4em;   /* much bigger than a text; shrinks into one */
  color:var(--bub-me-text);background:var(--bub-me);border-color:var(--bub-me);
}
@media (hover:hover){.try-chip-hi:hover{opacity:.9}}
.try-chip-hi{white-space:nowrap}
@media (max-width:880px) and (orientation:portrait){
  .try-chip-hi{font-size:1.15em;padding:.65em 1.1em}
}
.thread .thread-try.opening{
  position:absolute;inset:0;
  align-items:center;justify-content:center;padding:0;
}

/* ripples: two see-through rings in the button's own pill shape, pushed out
   and faded quickly, so it reads as something to tap */
.try-chip-hi{position:relative}
.try-chip-hi::before,
.try-chip-hi::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:hi-ripple 1.8s cubic-bezier(.2,.6,.3,1) infinite;   /* was 2.6s (Evan: more often) */
}
.try-chip-hi::after{animation-delay:.35s}
@keyframes hi-ripple{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bub-me) 55%,transparent)}
  60%,100%{box-shadow:0 0 0 .75em color-mix(in srgb,var(--bub-me) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .try-chip-hi::before,.try-chip-hi::after{animation:none}
}
.try-ghost{visibility:hidden;pointer-events:none}

/* a small label over the Say Hi button, with an arrow that bobs toward it,
   so visitors know the demo is theirs to try (Evan, 2026-10-21) */
.try-hint{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:.2em;pointer-events:none;
  font-family:var(--font-mono);font-weight:700;font-size:max(.5em,12px);line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
}
.try-hint svg{
  width:1.4em;height:1.8em;margin-top:.5em;
  animation:hint-bob 1.4s ease-in-out infinite;
}
@keyframes hint-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(.4em)}
}
@media (prefers-reduced-motion:reduce){.try-hint svg{animation:none}}