@layer components {

  .viewmenu {
    position: fixed;
    bottom: calc(var(--pounce-gap) + var(--safe-bottom));
    left: calc(var(--space-3) + var(--safe-left));
    z-index: var(--z-viewmenu);
    display: flex;
    align-items: center;
    gap: var(--space);

    
    max-width: calc(100% - var(--space-3) * 2 - var(--safe-left) - var(--safe-right));
  }

  .viewmenu > .viewmenu__button:not(.viewmenu__button--quiet) { flex: none; }
  .viewmenu > .viewmenu__button--quiet { flex: 0 1 auto; min-width: 0; }

  .viewmenu__button--quiet .viewmenu__current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .viewmenu__button {
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--pounce-h);
    padding: 0 var(--space-4);
    border: var(--line-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), var(--responds);
  }

  .viewmenu__button--quiet {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    height: var(--control-h);
    padding: 0 var(--space-3);
    color: var(--ink-muted);
  }

  .viewmenu__button--quiet:hover { color: var(--ink); }

  
  .viewmenu__button:hover { border-color: var(--line-strong); background: var(--surface-hover); }

  
  .viewmenu__glyph {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    
    overflow: visible;
  }

  .viewmenu__button--quiet .viewmenu__glyph { width: 1.125rem; height: 1.125rem; }

  
  .viewmenu__tail {
    transform-box: fill-box;
    transform-origin: 10% 90%;
  }

  .viewmenu__tail--wag {
    animation: viewmenu-tail-wag 550ms var(--ease);
  }

  
  @media (prefers-reduced-motion: reduce) {
    .viewmenu__tail--wag {
      animation-duration: 1ms;
    }
  }

  @keyframes viewmenu-tail-wag {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-8deg); }
    55%  { transform: rotate(10deg); }
    80%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
  }

  @media (width <= 48rem) {
    .viewmenu__button { padding-inline: var(--space-3); gap: var(--space); }
    .viewmenu__button--quiet { padding-inline: var(--space-2); }
  }

  .viewmenu__current { letter-spacing: var(--tracking-tight); }
}