/* bg is a literal rgba(233,233,233,0.24), not var(--surface-header-button)
   (rgba(255,255,255,0.24)) — confirmed via get_variable_defs on node 307:12202,
   this fill isn't bound to any Figma variable, it just looks close to the
   header-button surface at a glance. That same fetch also shows a real
   "Button": Effect(type: GLASS, radius: 100) on this node — the same
   radius:100 "Button" glass variable the navbar/header icon buttons use
   (--glass-blur) — which had never actually been applied here at all (no
   backdrop-filter of any kind), not just a wrong value. */
.input-field {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 40px;
  padding: 4px 12px;
  border-radius: 40px;
  border: 1px solid var(--border-header-button);
  background-color: rgba(233, 233, 233, 0.24);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  outline: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.15;
  color: var(--text-primary);
  /* Figma's Active state shows a pink 1.5px cursor bar — caret-color is the
     native way to get that without hand-building a position-tracked cursor
     element, same technique already used for the chat-name field. */
  caret-color: var(--background-accent);
}

.input-field::placeholder {
  color: var(--text-secondary);
}