/* ============================================================
   GooeyInput — styles for src/gooey_input.jsx
   A click-to-expand search pill with an SVG goo filter that fuses
   the expanding pill and a detached bubble like liquid metal.
   Surface defaults to the deep moss (forest green) pill on cream
   canvas; override per-instance via --gooey-surface.
   ============================================================ */

.gooey-root {
  /* the solid blobs need a strong fill for the goo filter to read */
  --gooey-surface: var(--moss-deep);
  --gooey-on: var(--canvas);
  --gooey-ease: cubic-bezier(0.34, 1.32, 0.64, 1); /* gentle spring overshoot */
  --gooey-dur: 0.42s;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.gooey-root.gooey-center { width: 100%; justify-content: center; }

/* zero-size host for the inline <filter> definition */
.gooey-svg { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.gooey-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  /* filter: url(#…) is set inline per-instance (unique id) */
}

/* the element that morphs width + slides right to spit out the bubble */
.gooey-row {
  display: inline-flex;
  align-items: center;
  height: 40px;
  transition: width var(--gooey-dur) var(--gooey-ease),
              margin-left var(--gooey-dur) var(--gooey-ease);
  will-change: width, margin-left;
}

.gooey-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--gooey-surface);
  color: var(--gooey-on);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(26, 26, 23, 0.18);
}
.gooey-root[data-expanded="1"] .gooey-pill { cursor: text; }
.gooey-pill:focus-visible { box-shadow: 0 0 0 3px rgba(107, 122, 90, 0.45); }

.gooey-glyph { flex: 0 0 auto; opacity: 0.92; }

.gooey-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.9;
}

.gooey-field {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--gooey-on);
}
.gooey-field::placeholder { color: var(--gooey-on); opacity: 0.55; }
.gooey-field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* hide the UA search affordances so the goo edge stays clean */
.gooey-field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* the detached blob that emerges on the left as the pill expands */
.gooey-bubble {
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%) scale(0);
  opacity: 0;
  transform-origin: center;
  pointer-events: none;
  transition: transform var(--gooey-dur) var(--gooey-ease),
              opacity calc(var(--gooey-dur) * 0.6) ease;
  will-change: transform, opacity;
}
.gooey-root[data-expanded="1"] .gooey-bubble { transform: translateY(-50%) scale(1); opacity: 1; }

.gooey-bubble-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--gooey-surface);
  color: var(--gooey-on);
}

@media (prefers-reduced-motion: reduce) {
  .gooey-row, .gooey-bubble { transition: none; }
}