/* =========================================================
   ZAR Input Assist — Floating Suggestion Layer
   Goal:
   - No input console jumping
   - Suggestions float inside the input shell
   - Browser-search-style inline assist above the controls
========================================================= */

.zar-input-wrapper {
  position: relative;
}

/* Floating layer: does not affect input layout height */
.zar-input-assist-layer {
  position: absolute;
  left: clamp(18px, 3vw, 28px);
  right: clamp(18px, 3vw, 28px);

  /*
    Anchor to the outer upper border of the input area.
    Negative value moves it above the input shell.
  */
  top: -58px;
  bottom: auto;

  z-index: 40;
  pointer-events: none;

  display: flex;
  justify-content: flex-start;

  opacity: 0;
  transform: translateY(4px) scale(0.985);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}
.zar-input-assist-layer[hidden] {
  display: none !important;
}

.zar-input-assist-layer.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Chip itself */
.zar-input-assist-chip {
  max-width: min(100%, 720px);
  pointer-events: none;
}

.zar-input-assist-chip:empty {
  display: none;
}

.zar-input-assist-chip__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  max-width: 100%;
  padding: 9px 14px;

  border: 1px solid rgba(126, 158, 255, 0.28);
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(124, 151, 255, 0.18),
      rgba(37, 49, 92, 0.92)
    );

  color: rgba(232, 238, 255, 0.9);

  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(126, 158, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  backdrop-filter: blur(14px);

  font: inherit;
  line-height: 1.25;
  cursor: pointer;

  pointer-events: auto;

  animation: zarInputAssistChipIn 150ms ease-out both;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.zar-input-assist-chip__button:hover {
  transform: translateY(-1px);
  border-color: rgba(150, 176, 255, 0.42);

  background:
    linear-gradient(
      180deg,
      rgba(133, 160, 255, 0.24),
      rgba(44, 58, 108, 0.96)
    );

  color: rgba(245, 248, 255, 0.96);

  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(126, 158, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.zar-input-assist-chip__button:active {
  transform: translateY(0);
}

.zar-input-assist-chip__label {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(196, 207, 245, 0.62);
  white-space: nowrap;
}

.zar-input-assist-chip__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: rgba(238, 243, 255, 0.94);
  font-weight: 700;
}

.zar-input-assist-chip__hint {
  color: rgba(196, 207, 245, 0.5);
  white-space: nowrap;
}

@keyframes zarInputAssistChipIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.985);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 680px) {
  .zar-input-assist-layer {
    left: 14px;
    right: 14px;
    top: -54px;
    bottom: auto;
  }

  .zar-input-assist-chip {
    max-width: 100%;
  }

  .zar-input-assist-chip__button {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 11px;
    gap: 8px;
  }

  .zar-input-assist-chip__label {
    font-size: 0.68rem;
  }

  .zar-input-assist-chip__hint {
    display: none;
  }
}