/* VidLab API platform: the top bar's Models hover menu (Image, Video, Audio columns) and the greyed "Soon" items.
   Loaded by shell.js on every page; tokens.css stays the frame's. */

/* ---------- the Models menu: three columns, a few featured models each, "View all" ---------- */
.vla-mm__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
  min-height: 120px;
}
.vla-mm__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 8px 8px; border-radius: var(--vla-r); border: 1px solid var(--vla-line); background: var(--vla-page); }
.vla-mm__coltitle { display: block; margin: 0 0 8px 8px; }
.vla-mm__item,
.vla-mm__more { display: flex; align-items: center; gap: 10px; min-width: 0; height: 38px; padding: 0 8px; border-radius: var(--vla-r-sm); color: var(--vla-ink); font-weight: 500; transition: background-color 150ms ease, color 150ms ease; }
.vla-mm__item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vla-mm__item:hover,
.vla-mm__item:focus-visible,
.vla-mm__more:hover,
.vla-mm__more:focus-visible { background: var(--vla-hover); }
.vla-mm__more { margin-top: auto; color: var(--vla-ink-2); }
.vla-mm__more::after { content: "\2192"; margin-left: 2px; }
.vla-mm__more:hover,
.vla-mm__more:focus-visible { color: var(--vla-ink); }
.vla-mm__col .vla-mm__more { margin-top: 6px; }
.vla-mm__cols > .vla-mm__note { grid-column: 1 / -1; }
/* Still loading: the same rows in grey (a logo square and a name bar), exactly the real rows' height. */
.vla-mm__sk { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px; }
.vla-mm__sk i,
.vla-mm__sk b { display: block; border-radius: 6px; background: rgba(255, 255, 255, .06); animation: vla-mm-pulse 1.4s ease-in-out infinite; }
.vla-mm__sk i { flex: none; width: 20px; height: 20px; }
.vla-mm__sk b { width: 58%; height: 10px; }
.vla-mm__col.is-skel .vla-mm__more { pointer-events: none; color: var(--vla-ink-3); }
@keyframes vla-mm-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .vla-mm__sk i, .vla-mm__sk b { animation: none; } }

/* ---------- not open yet: greyed, not pressable, the word "Soon" only in its hover tooltip ---------- */
.vla-soon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--vla-r-sm);
  color: var(--vla-ink-3);
  font-weight: 500;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.vla-soon::after {
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--vla-line-2);
  background: var(--vla-hover-2);
  color: var(--vla-ink);
  font: 500 11px/1 var(--vla-mono);
  letter-spacing: .04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.vla-soon:hover::after,
.vla-soon:focus::after { opacity: 1; }
.vla-sheet__nav .vla-soon { height: 44px; font-size: 15px; }
.vla-dd__menu .vla-soon { width: 100%; }

/* ---------- plain glyphs (brand marks and line glyphs, inline SVG) ---------- */
.vla-glyph { flex: none; display: block; }

/* ---------- "Add your contact channels" (shell.js contactDialog) ---------- */
.vla-cc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vla-cc__count { font-size: 12px; color: var(--vla-ink-3); white-space: nowrap; }
.vla-cc__field { margin-top: 14px; }
.vla-cc__field > .vla-k { display: block; margin: 0 0 8px; }
.vla-cc__input { display: flex; align-items: stretch; border-radius: var(--vla-r-sm); border: 1px solid var(--vla-line-2); background: var(--vla-field); overflow: hidden; transition: border-color 150ms ease; }
.vla-cc__input:focus-within { border-color: rgba(255, 255, 255, .35); }
.vla-cc__glyph { flex: none; display: grid; place-items: center; width: 42px; border-right: 1px solid var(--vla-line); color: var(--vla-ink-2); }
.vla-cc__input input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 0; background: transparent; color: var(--vla-ink); font: 400 13.5px/1 var(--vla-mono); outline: none; }
.vla-cc__input input::placeholder { color: var(--vla-ink-3); }
.vla-dialog__box > .vla-cc__head + .vla-sub { margin-bottom: 4px; }

/* ---------- Support (one line: the email) and the account menu, top right ---------- */
.vla-sup__menu { min-width: 0; }
.vla-dd__menu a.vla-sup__mail { height: auto; gap: 12px; padding: 10px 12px; }
.vla-sup__mail .vla-glyph { color: var(--vla-ink-2); }
.vla-sup__t { display: flex; flex-direction: column; gap: 4px; }
.vla-sup__t > span:first-child { color: var(--vla-ink); }
.vla-sup__a { font-size: 12px; font-weight: 400; color: var(--vla-ink-3); }
.vla-acct .vla-dd__menu { min-width: 220px; }
.vla-acct__who { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--vla-line); }
.vla-acct__name { font-weight: 500; color: var(--vla-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vla-acct__mail { margin-top: -4px; max-width: 220px; font-size: 11.5px; color: var(--vla-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vla-dd__menu a.vla-acct__bal { height: auto; padding: 0; font-size: 13px; color: var(--vla-ink-2); }
.vla-dd__menu a.vla-acct__bal:hover { background: transparent; color: var(--vla-ink); }