/* ==========================================================================
   CPG PROPERTIES — SEARCH ASSISTANT
   The conversation that sits under the docked search on the homepage.

   Everything here is inert until the script opens the panel, and the search
   field beneath it stays a working GET form the whole time, so a visitor
   without JavaScript loses a conversation, never a search.
   ========================================================================== */

/* --- The field ------------------------------------------------------------
   One line, two icons: speak it, or send it. Nothing else. */
.cpga-shell { display: block; }

.cpga-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: .125rem;
  /* The field stands exactly as tall as the two controls beside it. */
  min-height: 2.875rem;
  padding: 0 .25rem 0 0;
  border: 1px solid rgba(13, 13, 12, .16);
  /* Square, like the controls beside it. */
  border-radius: 0;
  /* The field reads as a field on a light page and on the dark dock alike, so
     it carries its own ground and its own hairline rather than borrowing the
     section's. */
  background: #FFFFFF;
}
.cpga-field__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 .5rem 0 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cpg-ink, #0D0D0C);
  font: inherit;
  font-size: 1rem;
}
.cpga-field__input::-webkit-search-cancel-button { display: none; }
.cpga-field__input::placeholder { color: rgba(13, 13, 12, .52); }
.cpga-field__input:focus { outline: none; }
.cpga-field:focus-within { box-shadow: 0 0 0 2px rgba(13, 13, 12, .5); }

.cpga-field__btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cpg-ink, #0D0D0C);
  cursor: pointer;
  transition: background-color .4s cubic-bezier(.25, .74, .22, .99), color .4s cubic-bezier(.25, .74, .22, .99);
}
.cpga-field__btn[hidden] { display: none; }
.cpga-field__btn svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cpga-field__btn:hover { background: rgba(13, 13, 12, .08); }
.cpga-field__btn:focus-visible { outline: 2px solid rgba(13, 13, 12, .62); outline-offset: -2px; }
/* Both controls are plain marks in the field — no chip behind either of
   them. Only the recording state is painted, because that one has to be
   unmistakable. */
.cpga-field__btn--send { background: transparent; color: var(--cpg-ink, #0D0D0C); }
.cpga-field__btn--send:hover { background: rgba(13, 13, 12, .08); }
.cpga-field__btn--mic[aria-pressed="true"] {
  background: var(--cpg-panel-ink, #16181b);
  color: #FFFFFF;
}
.cpga-field__btn--mic[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0;
  border: 1px solid rgba(13, 13, 12, .35);
  animation: cpga-pulse 1.6s ease-out infinite;
  pointer-events: none;
}

.cpgh-discover__field { position: relative; }

/* The microphone lives inside the field, at its trailing edge. It ships
   hidden and is revealed only where the browser can actually record. */
.cpga-mic {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: .5rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cpg-ink, #0D0D0C);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .4s cubic-bezier(.25, .74, .22, .99), color .4s cubic-bezier(.25, .74, .22, .99);
}
.cpga-mic[hidden] { display: none; }
.cpga-mic svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cpga-mic:hover { background: rgba(13, 13, 12, .08); }
.cpga-mic:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 2px; }
.cpga-mic[aria-pressed="true"] { background: #C1440E; color: #FFFFFF; }
.cpga-mic[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -.25rem;
  border-radius: 50%;
  border: 1px solid rgba(193, 68, 14, .55);
  animation: cpga-pulse 1.6s ease-out infinite;
}

@keyframes cpga-pulse {
  from { transform: scale(.9); opacity: .9; }
  to { transform: scale(1.25); opacity: 0; }
}

/* The conversation is a panel in its own right — it appears on a light page
   as well as on the dark dock, so it carries the same charcoal ground
   everywhere rather than assuming the section behind it is dark. */
.cpga {
  margin-block-start: .75rem;
  padding: clamp(.875rem, 1.6vw, 1.25rem);
  border-radius: 0;
  background: var(--cpg-panel-fixed, #16181b);
  color: rgba(255, 255, 255, .92);
}
.cpga[hidden] { display: none; }
.cpga__intro[hidden] { display: none; }
.cpga__intro,
.cpga__note {
  margin: 0;
  font-size: .75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}
.cpga__note { margin-block-start: .625rem; }

.cpga__thread {
  display: grid;
  gap: .75rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  max-height: min(26rem, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cpga__thread:empty { display: none; }

.cpga__turn { display: grid; gap: .5rem; }
.cpga__bubble {
  margin: 0;
  padding: .625rem .875rem;
  border-radius: .75rem;
  font-size: .875rem;
  line-height: 1.5;
}
.cpga__turn--you { justify-items: end; }
.cpga__turn--you .cpga__bubble {
  max-width: min(34rem, 88%);
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
}
.cpga__turn--bot .cpga__bubble {
  max-width: min(42rem, 92%);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .94);
}

.cpga__chips { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.cpga__chips:empty { display: none; }
.cpga__chips li {
  padding: .1875rem .5rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.cpga__results { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.cpga__results:empty { display: none; }
.cpga__result a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem 1rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .625rem;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color .4s cubic-bezier(.25, .74, .22, .99), border-color .4s cubic-bezier(.25, .74, .22, .99);
}
.cpga__result a:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.cpga__result a:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring-on-ink, #FFFFFF); outline-offset: 2px; }
.cpga__result-title { font-size: .875rem; font-weight: 600; }
.cpga__result-price { font-size: .875rem; font-weight: 600; text-align: end; white-space: nowrap; }
.cpga__result-meta {
  grid-column: 1 / -1;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.cpga__all {
  justify-self: start;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.cpga__all[hidden] { display: none; }

.cpga__turn--pending .cpga__bubble { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .cpga-mic,
  .cpga__result a { transition: none; }
  .cpga-mic[aria-pressed="true"]::after { animation: none; }
}

/* Phones: the field's own buttons are driven by a thumb. */
@media (max-width: 47.999rem) {
    .cpga-field__btn { width: 2.75rem; height: 2.75rem; }
}