/* Supply intake conversation — built from the existing design tokens.
   Nothing here is meant to read as "an AI widget"; it should look like the
   rest of the site and behave like a quiet inside-sales conversation.

   TOKENS: this file is used on two pages that do NOT share a palette. The
   subpages load styles.css (--line-2, --muted, --bone, --panel); the homepage
   styles are inline and use a different set (--hair, --mist, --ivory, --coal).
   Every var() below therefore falls back through the homepage name to a
   literal, so the panel renders correctly on both without either page having
   to learn the other's vocabulary. Do not reduce these to a single token. */

.intake {
  border: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22)));
  background: var(--panel, #17181a);
  color: var(--bone, var(--ivory, #f5f1e8));
  padding: 0; overflow: hidden;
}
.intake-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22))) }
.intake-head h2 { font-size: 22px; margin: 0 0 6px; color: var(--bone, var(--ivory, #f5f1e8)) }
.intake-head p { font-size: 13.5px; color: var(--muted, var(--mist, #a3a49f)); margin: 0; line-height: 1.6 }

/* The homepage has no .sr-only of its own, so the input's label needs one here
   or it becomes an unlabelled field on the site's most important page. */
.intake .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A messaging surface, not a growing list.
   max-height alone let the card grow for the first three turns — 471px to 846px,
   pushing the composer down 375px before it settled. A fixed height keeps the
   composer in exactly one place from the first message onward.

   Two heights, one transition. At turn zero a 440px box is mostly empty, so it
   opens at 240px. The first customer message expands it to the full messaging
   viewport, once, and it never moves again — .started is added on that first
   send and on a restored conversation, and nothing ever removes it. */
.intake-log {
  padding: 20px 24px; display: flex; flex-direction: column; gap: 14px;
  height: 240px; flex: 0 0 auto;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;            /* scrolling the history never scrolls the page */
  transition: height .45s cubic-bezier(.4, 0, .2, 1);
}
.intake.started .intake-log { height: 440px }
@media (prefers-reduced-motion: reduce) { .intake-log { transition: none } }
.intake-msg { font-size: 14.5px; line-height: 1.65; max-width: 88% }
.intake-msg.them { color: var(--bone, var(--ivory, #f5f1e8)) }
.intake-msg.you {
  align-self: flex-end; color: var(--bone, var(--ivory, #f5f1e8));
  background: rgba(201,168,106,.10); border: 1px solid rgba(201,168,106,.25);
  padding: 10px 14px;
}
.intake-msg .who {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold, #c9a86a); margin-bottom: 5px;
}
.intake-typing { font-size: 13px; color: var(--muted, var(--mist, #a3a49f)); font-style: italic }

.intake-form { border-top: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22))); padding: 16px 24px 20px; display: grid; gap: 10px }
.intake-row { display: flex; gap: 10px; align-items: flex-end }
.intake-row textarea {
  flex: 1; resize: none; min-height: 46px; max-height: 140px;
  background: rgba(0,0,0,.35); border: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22)));
  color: var(--bone, var(--ivory, #f5f1e8));
  font: inherit; font-size: 14.5px; padding: 12px 14px;
}
.intake-row textarea:focus { outline: none; border-color: var(--gold, #c9a86a) }
.intake-row .btn { flex: 0 0 auto }
.intake-hint { font-size: 12.5px; color: var(--muted, var(--mist, #a3a49f)); margin: 0 }

/* The native control renders as "Choose File / No file chosen", which reads as
   a browser default dropped into the page. The input is still the real thing —
   visually hidden but focusable, labelled, and inside its own <label> — while
   the chip beside it carries the site's own mono/letterspaced treatment. */
.intake-file {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: start; cursor: pointer; position: relative;
}
.intake-file input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  opacity: 0; pointer-events: none;
}
.intake-file-cta, .intake-file-name {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
}
.intake-file-cta {
  color: var(--gold, #c9a86a); padding: 8px 13px;
  border: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22)));
  transition: background .2s, color .2s, border-color .2s;
}
.intake-file:hover .intake-file-cta,
.intake-file input:focus-visible ~ .intake-file-cta {
  background: var(--gold, #c9a86a); color: var(--black, #0a0a0a); border-color: var(--gold, #c9a86a);
}
.intake-file-name { color: var(--muted, var(--mist, #a3a49f)); letter-spacing: .1em; text-transform: none }
.intake-file-name[hidden] { display: none }
.intake-upload-note { margin: 0 }
.intake-note { font-size: 12px; color: var(--muted, var(--mist, #a3a49f)); line-height: 1.6 }
.intake-error { font-size: 13px; color: #e2a4a4; margin: 0 }

/* Shown only when the model is unavailable. The conversation above is left
   exactly as it is; this offers the conventional form as a way through. */
.intake-fallback {
  border-top: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22)));
  padding: 18px 24px 20px;
}
.intake-fallback[hidden] { display: none }
.intake-fallback p { font-size: 13.5px; color: var(--muted, var(--mist, #a3a49f)); line-height: 1.65; margin: 0 0 12px }

/* Your Request — the confirmation panel */
.intake-summary { border-top: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22))); padding: 22px 24px; display: none }
.intake-summary.on { display: block }
.intake-summary h3 { font-size: 18px; margin: 0 0 14px; color: var(--bone, var(--ivory, #f5f1e8)) }
.intake-block { margin-bottom: 16px }
.intake-block b {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold, #c9a86a); margin-bottom: 7px;
}
.intake-block ul { list-style: none; margin: 0; padding: 0 }
.intake-block li { font-size: 14px; color: var(--bone, var(--ivory, #f5f1e8)); padding: 4px 0; line-height: 1.5 }
.intake-block.needed li, .intake-block.optional li, .intake-block.questions li { color: var(--muted, var(--mist, #a3a49f)) }
.intake-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px }

@media (max-width: 700px) {
  .intake-log, .intake.started .intake-log { height: 52vh; min-height: 280px; padding: 16px }
  .intake-head, .intake-form, .intake-summary, .intake-fallback { padding-left: 16px; padding-right: 16px }
  .intake-msg { max-width: 96% }
  .intake-row { flex-direction: column; align-items: stretch }
  .intake-row .btn { width: 100% }
}

/* ============ the two-path help area ============
   Equal width, and on desktop equal HEIGHT. align-items:start used to let the
   installer panel end wherever its content ended; once the transcript became a
   fixed 440px box the request side ran 283px taller, and the space beside the
   finder read as a hole in the page rather than as part of the section. The
   panels now share a row height, so that space sits inside a bordered card.
   The finder's own controls stay at the top — only the panel stretches — and
   its closing note is pushed to the foot of the card by margin-top:auto. */
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px }

@media (min-width: 901px) {
  .help-grid > .intake, .help-grid > .inst { display: flex; flex-direction: column }
  .inst-about { margin-top: auto }   /* the closing note falls to the foot of the card */

  /* The results list is the only part of the finder that can grow without
     bound, so it is the only part that scrolls. flex-basis:0 keeps it out of
     the panel's max-content height, so a long list can never drag the row —
     and the request card — taller than it needs to be; the panel takes the row
     height the transcript sets, and the list takes whatever is left of it.
     min-height stops that leftover from collapsing into a token scroll strip
     when the conversation is still short, and max-height is the ceiling, set
     to the expanded transcript. The header, the search controls and the cards
     themselves are untouched: nothing here stretches an input or a result. */
  .inst-results {
    flex: 1 1 0; min-height: 240px; max-height: 440px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;          /* the list never scrolls the page */
  }
}

/* the written review that replaced the four state lists */
.intake-recap {
  font-size: 15.5px; line-height: 1.7; margin: 0 0 14px;
  color: var(--bone, var(--ivory, #f5f1e8));
}
.intake-recap-ask { font-size: 13.5px; color: var(--muted, var(--mist, #a3a49f)); margin: 0 0 16px }

/* ---- installer finder ---- */
.inst {
  border: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22)));
  background: var(--panel, #17181a);
  color: var(--bone, var(--ivory, #f5f1e8));
}
.inst-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22))) }
.inst-head h2 { font-size: 22px; margin: 0 0 6px; color: var(--bone, var(--ivory, #f5f1e8)) }
.inst-head p { font-size: 13.5px; color: var(--muted, var(--mist, #a3a49f)); margin: 0; line-height: 1.6 }

.inst-form { padding: 18px 24px 20px; display: grid; gap: 14px }
.inst-field { display: grid; gap: 6px }
.inst-field span { font-size: 12.5px; color: var(--muted, var(--mist, #a3a49f)) }
.inst-field input, .inst-field select {
  background: rgba(0,0,0,.35); border: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22)));
  color: var(--bone, var(--ivory, #f5f1e8)); font: inherit; font-size: 14.5px; padding: 11px 13px;
}
.inst-field input:focus, .inst-field select:focus { outline: none; border-color: var(--gold, #c9a86a) }
.inst-radios { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap }
.inst-radios legend { font-size: 12.5px; color: var(--muted, var(--mist, #a3a49f)); padding: 0 0 6px }
.inst-radios label { font-size: 14px; display: inline-flex; align-items: center; gap: 6px }

.inst-results { display: none; padding: 0 24px 4px }
.inst-results.on { display: block }
.inst-sample-note {
  font-size: 12px; line-height: 1.6; margin: 0 0 12px; padding: 9px 11px;
  color: var(--muted, var(--mist, #a3a49f));
  border: 1px dashed var(--line-2, var(--hair, rgba(201,168,106,.22)));
}
.inst-count { font-size: 12.5px; color: var(--muted, var(--mist, #a3a49f)); margin: 0 0 12px }

.inst-card {
  border: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22)));
  padding: 14px 16px; margin-bottom: 12px;
}
.inst-card h4 { font-size: 16px; margin: 0 0 5px; color: var(--bone, var(--ivory, #f5f1e8)) }
.inst-meta, .inst-rating, .inst-tags { font-size: 13px; color: var(--muted, var(--mist, #a3a49f)); margin: 0 0 4px; line-height: 1.5 }
.inst-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px }
.inst-actions .btn { font-size: 12px; padding: 7px 12px }
.inst-actions .btn[disabled] { opacity: .45; cursor: not-allowed }

.inst-about b {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold, #c9a86a); margin-bottom: 7px;
}
.inst-disclaimer {
  font-size: 11.5px; line-height: 1.6; color: var(--muted, var(--mist, #a3a49f));
  margin: 0; padding: 14px 24px 20px;
  border-top: 1px solid var(--line-2, var(--hair, rgba(201,168,106,.22)));
}

@media (max-width: 900px) {
  /* stacked, request first — the order in the markup already does this */
  .help-grid { grid-template-columns: 1fr; gap: 20px }
  .inst-head, .inst-form, .inst-results, .inst-disclaimer { padding-left: 16px; padding-right: 16px }
}

/* Category visual for fiberglass. A drawn stile-and-rail panel in the site's
   own tones -- deliberately an illustration, not a photograph, so it never
   misrepresents a product. Swap the div for an <img> when a real photo exists. */
.im-panel {
  width: 100%; height: 100%; min-height: 280px;
  display: grid; grid-template-rows: 1fr 1.22fr; gap: 22px;
  padding: 30px 42px 34px;
  transition: transform .5s ease;
  background:
    radial-gradient(115% 85% at 26% 4%, rgba(201,168,106,.085), transparent 64%),
    repeating-linear-gradient(90deg, rgba(245,241,232,.020) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.26) 0 2px, transparent 2px 23px),
    linear-gradient(101deg, #242427 0%, #1a1a1c 44%, #1f1f22 100%);
}
.im-panel i {
  display: block;
  border: 1px solid rgba(201,168,106,.19);
  background: linear-gradient(158deg, rgba(201,168,106,.075), rgba(0,0,0,.24) 70%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(201,168,106,.09);
}
.coll:hover .im .im-panel { transform: scale(1.05); }