/* DJC SmartSearch - Skeleton

 * Structural layout only + skeleton defaults for the SmartSearch component.
 * All visual properties are driven by --ss-* CSS custom properties.
 *
 * Three blocks:
 *   .djc-smart-search          - search input + output area
 *   .djc-smart-search-pills    - question pill row
 *   .djc-smart-search-overlay  - full-screen results overlay shell
 *
 * State modifiers:
 *   .is-visible  - on rotating placeholder span
 *   .is-open     - on the overlay
 *
 * NO SKIN: renders a visible skeleton - neutral colors, pill-shaped input,
 * standard sizing. Functional but unbranded.
 *
 * TO SKIN: set --ss-* variables on .djc-smart-search / .djc-smart-search-pills
 * / .djc-smart-search-overlay. See /skins/smartsearch.djc.css for the DJC brand
 * skin.
*/

@import url('skins/smartsearch.djc.css');


/* ============================================================ */
/* TOKENS                                                       */
/* ============================================================ */

.djc-smart-search,
.djc-smart-search-pills,
.djc-smart-search-overlay {
  /* colors */
  --ss-input-bg: #ffffff;
  --ss-input-text: #111827;
  --ss-input-border: rgba(0, 0, 0, 0.08);
  --ss-input-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  --ss-icon-color: #6b7280;

  --ss-pill-bg: rgba(255, 255, 255, 0.9);
  --ss-pill-text: #1f2937;
  --ss-pill-border: rgba(0, 0, 0, 0.06);
  --ss-pill-hover-bg: #ffffff;
  --ss-pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

  --ss-overlay-bg: rgba(15, 23, 42, 0.98);
  --ss-overlay-text: #ffffff;
  --ss-overlay-close-color: rgba(255, 255, 255, 0.7);
  --ss-overlay-close-hover: #ffffff;

  /* typography */
  --ss-font: inherit;
  --ss-input-font-size: 18px;
  --ss-pill-font-size: 14px;

  /* spacing */
  --ss-input-padding: 14px 22px;
  --ss-input-height: 56px;
  --ss-input-radius: 999px;
  --ss-pill-padding: 9px 18px;
  --ss-pill-gap: 8px;
  --ss-pill-radius: 999px;

  /* effects */
  --ss-transition: 0.25s ease;
}


/* ============================================================ */
/* RESET                                                        */
/* ============================================================ */

.djc-smart-search *,
.djc-smart-search *::before,
.djc-smart-search *::after,
.djc-smart-search-pills *,
.djc-smart-search-pills *::before,
.djc-smart-search-pills *::after,
.djc-smart-search-overlay *,
.djc-smart-search-overlay *::before,
.djc-smart-search-overlay *::after {
  box-sizing: border-box;
}


/* ============================================================ */
/* INPUT                                                        */
/* ============================================================ */

.djc-smart-search {
  width: 100%;
  font-family: var(--ss-font);
}

.djc-smart-search__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.djc-smart-search__input-wrapper {
  width: 100%;
}

.djc-smart-search__input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--ss-input-height);
  padding: var(--ss-input-padding);
  background: var(--ss-input-bg);
  color: var(--ss-input-text);
  border: 1px solid var(--ss-input-border);
  border-radius: var(--ss-input-radius);
  box-shadow: var(--ss-input-shadow);
  transition: box-shadow var(--ss-transition);
}

.djc-smart-search__input:focus-within {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.djc-smart-search__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  color: var(--ss-icon-color);
  flex-shrink: 0;
}

.djc-smart-search__icon-glass {
  font-size: 18px;
}

.djc-smart-search__loader-message,
.djc-smart-search__loader-default {
  display: none;
}

.djc-smart-search__field {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: var(--ss-input-font-size);
  color: var(--ss-input-text);
}

.djc-smart-search__field::-webkit-search-decoration,
.djc-smart-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.djc-smart-search__placeholder {
  position: absolute;
  top: 50%;
  left: 60px;
  right: 24px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ss-icon-color);
  font-size: var(--ss-input-font-size);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Hide the rotating placeholder once the input has focus or content.
   We can't rely on :placeholder-shown here because the input has no
   placeholder= attribute (the custom div replaces that), so the JS
   toggles .focused / .has-value on the wrapper instead. */
.djc-smart-search__input-wrapper.focused .djc-smart-search__placeholder,
.djc-smart-search__input-wrapper.has-value .djc-smart-search__placeholder {
  opacity: 0;
}

.djc-smart-search__placeholder-item {
  display: none;
}

.djc-smart-search__placeholder-item.is-visible {
  display: inline-block;
}

.djc-smart-search__output-wrapper {
  width: 100%;
}

.djc-smart-search__output {
  width: 100%;
}


/* ============================================================ */
/* LOGO (used in overlay + brandable hero contexts)             */
/* ============================================================ */

.djc-smart-search__logo {
  display: inline-block;
  line-height: 1;
}

.djc-smart-search__logo-mark {
  font-family: 'playfair-display', serif;
  font-style: italic;
  font-weight: 400;
}

.djc-smart-search__logo-text {
  font-family: 'proxima-nova', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}


/* ============================================================ */
/* PILLS                                                        */
/* ============================================================ */

.djc-smart-search-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ss-pill-gap);
  width: 100%;
}

.djc-smart-search-pills__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ss-pill-padding);
  background: var(--ss-pill-bg);
  color: var(--ss-pill-text);
  border: 1px solid var(--ss-pill-border);
  border-radius: var(--ss-pill-radius);
  box-shadow: var(--ss-pill-shadow);
  font-size: var(--ss-pill-font-size);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ss-transition), transform var(--ss-transition), box-shadow var(--ss-transition);
}

.djc-smart-search-pills__pill:hover,
.djc-smart-search-pills__pill:focus-visible {
  background: var(--ss-pill-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  outline: 0;
}

.djc-smart-search-pills__pill--ask {
  font-weight: 600;
}

.djc-smart-search-pills__icon {
  display: inline-flex;
  align-items: center;
}

.djc-smart-search-pills__text {
  display: inline-block;
}


/* ============================================================ */
/* OVERLAY                                                      */
/* ============================================================ */

/* Layout:
 *   .djc-smart-search-overlay         - full-viewport flex container that
 *                                       centers the modal panel. Its ::before
 *                                       is the dark, blurred backdrop. The
 *                                       container itself is the click-out
 *                                       target.
 *   .djc-smart-search-overlay__inner  - the actual modal panel: bounded
 *                                       width/height, rounded, with its own
 *                                       scroll. Skin tokens paint THIS, not
 *                                       the full overlay.
 *
 * Visibility is class-driven (.is-open) - opacity + transform transitions
 * play in both directions. The component JS removes the [hidden] attr,
 * forces a reflow, then adds .is-open so the entry animation actually runs.
 */
.djc-smart-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: transparent;
  color: var(--ss-overlay-text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* dark + blurred backdrop */
.djc-smart-search-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 24, 0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 0;
}

.djc-smart-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.djc-smart-search-overlay.is-open::before {
  opacity: 1;
}

.djc-smart-search-overlay__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: 24px 28px;
  background: var(--ss-overlay-bg);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}

.djc-smart-search-overlay.is-open .djc-smart-search-overlay__inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.djc-smart-search-overlay__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.djc-smart-search-overlay__logo {
  font-size: 22px;
}

.djc-smart-search-overlay__back,
.djc-smart-search-overlay__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--ss-overlay-close-color);
  font: inherit;
  cursor: pointer;
  transition: color var(--ss-transition);
}

.djc-smart-search-overlay__back:hover,
.djc-smart-search-overlay__close:hover {
  color: var(--ss-overlay-close-hover);
}

.djc-smart-search-overlay__icon {
  display: inline-flex;
  font-size: 18px;
}

.djc-smart-search-overlay__content {
  width: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

/* small inner scrollbar tuning - keeps the modal feeling tight */
.djc-smart-search-overlay__content::-webkit-scrollbar {
  width: 8px;
}

.djc-smart-search-overlay__content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

/* lock body scroll when overlay is open (matches the no-scroll class the JS
   toggles to stay compatible with site-wide overlay conventions) */
body.no-scroll {
  overflow: hidden;
}


/* ============================================================ */
/* STREAMING RESULT STATES                                      */
/* ============================================================ */

/* loading: dim the input while a request is in-flight + nudge the icon */
.djc-smart-search.loading .djc-smart-search__field {
  opacity: 0.7;
}

.djc-smart-search.loading .djc-smart-search__icon-glass {
  animation: djc-ss-pulse 1.1s ease-in-out infinite;
}

@keyframes djc-ss-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* the streamed answer paragraph */
.djc-smart-search__message {
  margin: 16px 0 0 0;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.96);
  color: #1a1409;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-size: 17px;
  line-height: 1.55;
}

/* blinking caret while characters are still being appended */
.djc-smart-search.message-in-progress .djc-smart-search__message::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -2px;
  animation: djc-ss-caret 0.8s steps(2) infinite;
}

@keyframes djc-ss-caret {
  50% {
    opacity: 0;
  }
}

/* related-video tile rendered after the stream completes */
.djc-smart-search__video-tile {
  margin-top: 18px;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.djc-smart-search__video-image {
  position: relative;
  display: block;
  width: 100%;
}

.djc-smart-search__video-image img {
  display: block;
  width: 100%;
  height: auto;
}

.djc-smart-search__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.djc-smart-search__video-footer {
  padding: 12px 18px;
  text-align: right;
}

.djc-smart-search__tpp-button {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.djc-smart-search__tpp-button:hover {
  text-decoration: underline;
}

/* overlay scroll: the result panel should scroll inside the overlay, not
   the body, so long answers stay self-contained */
.djc-smart-search-overlay__content .djc-smart-search {
  max-width: 820px;
  margin: 0 auto;
}


/* ============================================================ */
/* RESPONSIVE                                                   */
/* ============================================================ */

@media (max-width: 700px) {

  .djc-smart-search,
  .djc-smart-search-pills,
  .djc-smart-search-overlay {
    --ss-input-height: 48px;
    --ss-input-font-size: 16px;
    --ss-pill-font-size: 13px;
    --ss-pill-padding: 8px 14px;
  }

  /* on small screens the modal goes almost-fullscreen but keeps a small
     breathing margin so the backdrop blur is still visible at the edges */
  .djc-smart-search-overlay {
    padding: 12px;
  }

  .djc-smart-search-overlay__inner {
    padding: 16px 18px;
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }
}