/* VaultTagPicker — Docs-matched chips + body-portaled suggestion bubble */
.vault-tag-picker {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.35rem;
  border: 1px solid var(--vault-border, #e2e8f0);
  border-radius: 0.55rem;
  background: var(--vault-bg-elevated, #fff);
  overflow: visible;
}
.vault-tag-picker__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.vault-tag-picker__input-wrap {
  position: relative;
  flex: 1 1 9rem;
  min-width: 8rem;
}
.vault-tag-picker__input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--vault-text, #0f172a);
  font-size: 0.8125rem;
}
.vault-tag-picker__input::placeholder {
  color: var(--vault-text-muted, #94a3b8);
}

/*
 * Portaled to document.body when open (fixed + z-index inline).
 * Mirror Docs `.vault-smart-text-tags-row__dropdown` so colors match even when smartText CSS is lazy.
 */
.vault-tag-picker__suggestions,
.vault-tag-picker__suggestions.vault-smart-text-tags-row__dropdown {
  position: absolute;
  z-index: 10080;
  left: 0;
  top: calc(100% + 0.25rem);
  bottom: auto;
  margin-bottom: 0;
  min-width: 11rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  width: max-content;
  max-height: 12rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--vault-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--vault-bg-elevated, #fff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.vault-tag-picker__suggestions.hidden {
  display: none !important;
}

.vault-tag-picker__suggestion,
.vault-tag-picker__suggestions .vault-smart-text-tags-row__dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: left;
  color: var(--vault-text, #0f172a);
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  box-sizing: border-box;
}
.vault-tag-picker__suggestion:hover,
.vault-tag-picker__suggestion:focus,
.vault-tag-picker__suggestions .vault-smart-text-tags-row__dropdown-item:hover {
  outline: none;
  background: var(--vault-border, #e2e8f0);
}

.vault-tag-picker__suggestion-swatch,
.vault-tag-picker__suggestions .vault-smart-text-tags-row__dropdown-item-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.2rem;
  flex-shrink: 0;
}

.vault-tag-picker__suggestion--create,
.vault-tag-picker__suggestions .vault-smart-text-tags-row__add-new {
  font-style: italic;
  color: var(--vault-primary, #0492b5);
}