/* Harris Taylor - workflows-handoff.css

   The homepage's workflows section (03): copy and a button on the left,
   the AI Assistant chat panel on the right, played by js/chat-demo.js.
   The section keeps the homepage's own padding through .workflows. */

/* Copy left, the chat panel right, 50/50 like the rest of the site. */
/* Both columns start on one line: the eyebrow level with the top of the
   chat panel. The eyebrow is inline 11px text in the paragraph's taller
   line box, which sat it a few pixels down; as a block with line-height 1
   its box starts where its letters do. */
.sv-flows {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

.sv-flows__left > .eyebrow {
  display: block;
  line-height: 1;
}

/* Heading and paragraph at the services rows' sizes (.sv-row__title,
   .sv-row__desc): eyebrow, heading, copy, then the button, with the rows'
   40px gap before it. */
.sv-flows__title {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: var(--wt-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper-0);
  margin: 16px 0 32px;
}

.sv-flows__desc {
  font-size: 16px;
  font-weight: var(--wt-light);
  color: var(--fg-quiet);
  line-height: 1.7;
  margin: 0 0 40px;
  max-width: 34em;
}

/* Two paragraphs: a line between them, the full gap before the button. */
.sv-flows__desc:not(:last-of-type) { margin-bottom: 16px; }

/* ---------- workflows: the AI Assistant panel ----------
   A picture of the AI Assistant, framed like the demos on /workflows/:
   their surface, hairline border and 24px corners, a thin rule under the
   head. js/pages/services.js plays a three question conversation in it.

   Everything that moves does it with opacity or transform. All six
   messages are in the markup and keep their place in the layout at
   opacity 0, so nothing around them shifts; the typing dots and each reply
   share one slot for the same reason. When the conversation outgrows the
   panel, the list slides up with transform rather than scrolling. */
.sv-demos {
  justify-self: end;
  width: 100%;
  max-width: 40rem;
}

.sv-panel {
  background: var(--surface-2);   /* the pricing cards' surface */
  border: 1px solid var(--hairline-strong);
  border-radius: 24px;
  overflow: hidden;
}

.sv-panel__head {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: clamp(20px, calc(17.7px + 0.62vw), 24px) clamp(24px, calc(19.4px + 1.23vw), 32px);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-meta);
}

/* Each run starts by fading the thread out while it resets. */
.sv-panel__body { transition: opacity .3s var(--ease); }
.sv-panel__body.is-fading { opacity: 0; }

/* The shared come-and-go: up a few pixels and in. */
.sv-chat__ask,
.sv-chat__reply,
.sv-chat__dots {
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.sv-demos .is-shown { opacity: 1; transform: none; }

/* With no script, or with reduced motion, the thread is as tall as the
   whole conversation. The script adds .is-live when it will play, which
   fixes the height and lets the list slide inside it, fading out under
   the head as it goes. */
.sv-chat__thread { padding: clamp(24px, calc(19.4px + 1.23vw), 32px); }

.sv-chat.is-live .sv-chat__thread {
  height: clamp(232px, calc(169.6px + 16.64vw), 340px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 clamp(24px, calc(19.4px + 1.23vw), 32px));
          mask-image: linear-gradient(to bottom, transparent, #000 clamp(24px, calc(19.4px + 1.23vw), 32px));
}

.sv-chat__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, calc(13.7px + 0.62vw), 20px);
  transition: transform .4s var(--ease);
}

.sv-chat__ask {
  align-self: flex-end;
  max-width: 85%;
  padding: clamp(10px, calc(8.8px + 0.31vw), 12px) clamp(18px, calc(15.7px + 0.62vw), 22px);
  border: 1px solid var(--hairline-strong);
  border-radius: clamp(14px, calc(12.8px + 0.31vw), 16px);
  font-size: clamp(17px, calc(15.8px + 0.31vw), 19px);
  font-weight: var(--wt-light);
  color: var(--fg-quiet);
}

.sv-chat__slot { display: grid; }
.sv-chat__slot > * { grid-area: 1 / 1; }

.sv-chat__reply {
  max-width: 90%;
  font-size: clamp(18px, calc(16.8px + 0.31vw), 20px);
  font-weight: var(--wt-light);
  line-height: 1.6;
  color: var(--fg);
}

.sv-chat__dots {
  align-self: start;
  display: flex;
  gap: clamp(6px, calc(4.8px + 0.31vw), 8px);
  padding: clamp(10px, calc(8.8px + 0.31vw), 12px) 0;
}
.sv-chat__dots i {
  width: clamp(8px, calc(6.8px + 0.31vw), 10px);
  height: clamp(8px, calc(6.8px + 0.31vw), 10px);
  border-radius: 50%;
  background: var(--fg-meta);
  animation: sv-chat-dot 1.1s var(--ease) infinite;
}
.sv-chat__dots i:nth-child(2) { animation-delay: .15s; }
.sv-chat__dots i:nth-child(3) { animation-delay: .3s; }
.sv-chat__dots:not(.is-shown) i { animation-play-state: paused; }

@keyframes sv-chat-dot {
  0%, 60%, 100% { opacity: .3; }
  30% { opacity: 1; }
}

.sv-chat__bar {
  display: flex;
  align-items: center;
  gap: clamp(10px, calc(8.8px + 0.31vw), 12px);
  padding: clamp(14px, calc(12.8px + 0.31vw), 16px);
  border-top: 1px solid var(--hairline);
}

.sv-chat__field {
  flex: 1;
  min-height: clamp(64px, calc(59.4px + 1.23vw), 72px);
  display: flex;
  align-items: center;
  padding: 0 clamp(24px, calc(21.7px + 0.62vw), 28px);
  border: 1px solid var(--fg-meta);
  border-radius: clamp(14px, calc(12.8px + 0.31vw), 16px);
  font-size: clamp(19px, calc(18.4px + 0.15vw), 20px);
  color: var(--fg);
}
.sv-chat__field:empty::before {
  content: 'Or type a question';
  color: var(--fg-quiet);
}

.sv-chat__send {
  flex-shrink: 0;
  width: clamp(20px, calc(18.8px + 0.31vw), 22px);
  height: clamp(20px, calc(18.8px + 0.31vw), 22px);
  margin: 0 clamp(14px, calc(12.8px + 0.31vw), 16px) 0 4px;
  color: var(--fg-quiet);
}

/* The finished conversation, still. The script does not play it either;
   this covers the setting being changed while the page is open. */
@media (prefers-reduced-motion: reduce) {
  .sv-panel__body,
  .sv-chat__ask,
  .sv-chat__reply,
  .sv-chat__dots,
  .sv-chat__stack { transition: none; }
  .sv-chat__dots i { animation: none; }
}

/* Copy about 45%, the panel 55% and up to 40rem on the right of its
   column, tops aligned. The panel's sizes above scale with the width and
   reach their full size at 1024; js/chat-demo.js measures the chat area
   as it goes, so the height needs nothing from it. Below 1024 the panel
   drops below the button and takes the full width. */
@media (max-width: 1023px) {
  .sv-flows { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sv-demos { justify-self: stretch; max-width: none; }

  /* The split above, in the handoff's own proportions */
  section .sv-flows__left.split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 48px;
  }

  /* The chat at text size */
  .sv-panel__head { padding: 18px 28px; }
  .sv-chat__thread { padding: 28px; }
  /* Room for the whole conversation, so nothing slides out of view */
  .sv-chat.is-live .sv-chat__thread {
    height: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .sv-chat__ask { padding: 10px 16px; border-radius: 12px; font-size: 16px; }
  .sv-chat__reply { font-size: 16px; line-height: 1.45; }
  .sv-chat__field { min-height: 46px; padding: 0 16px; border: 1px solid var(--hairline-strong); border-radius: 12px; font-size: 15px; }
  .sv-chat__send { width: 16px; height: 16px; margin: 0 8px 0 4px; }
  .sv-chat__bar { padding: 18px 28px; }
}

@media (max-width: 767px) {
  .sv-panel__head { padding: 16px 20px; }
  .sv-chat__thread { padding: 20px; }
  .sv-chat__bar { padding: 16px 20px; }
}