@layer components {
  /* -- Bubble Menu --
   * Floating toolbar for formatting + entity aliasing. Appears on text selection. */

  .bubble-menu {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--block-space-eighth);
    padding: var(--block-space-quarter);
    background: var(--color-canvas);
    border: var(--border-strong);
    border-radius: var(--radius);
    z-index: var(--z-popover);
    transform: translateX(-50%);
    /* Otherwise the width shrinks to the space right of the last `left`, and
     * the horizontal clamp measures a menu narrower than it ends up. */
    inline-size: max-content;
  }

  .bubble-menu[hidden] {
    display: none;
  }

  .bubble-menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--touch-target-min);
    min-block-size: var(--touch-target-min);
    padding: var(--block-space-eighth) var(--inline-space);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  @media (hover: hover) {
    .bubble-menu__btn:hover {
      background: var(--color-surface);
    }
  }

  .bubble-menu__btn--active {
    color: var(--color-accent);
  }

  .bubble-menu__btn--alias,
  .bubble-menu__btn--ask {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
  }

  .bubble-menu__btn--ask {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  .bubble-menu__btn:disabled {
    opacity: 0.4;
    cursor: default;
  }

  .bubble-menu__btn--linked {
    opacity: 0.6;
    cursor: default;
  }

  .bubble-menu__sep {
    display: block;
    inline-size: 1px;
    block-size: 1em;
    background: oklch(var(--lch-ink-lighter));
  }

  /* -- Selection Instruction Panel --
   * Ask AI input opened from the bubble menu; positioned by JS inside the viewport. */

  .selection-instruction-panel {
    position: fixed;
    z-index: var(--z-popover);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    inline-size: min(20rem, calc(100dvw - 2 * var(--inline-space)));
    padding: var(--block-space-half);
    background: var(--color-canvas);
    border: var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--text-small);
  }

  .selection-instruction-panel[hidden] {
    display: none;
  }

  .selection-instruction-panel__row {
    display: flex;
    gap: var(--inline-space-half);
  }

  .selection-instruction-panel__input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 44px;
    padding: 0 var(--inline-space);
    border: var(--border-strong);
    border-radius: var(--radius);
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: 0.875rem;
  }

  .selection-instruction-panel__input::placeholder {
    font-family: var(--font-sans);
  }

  .selection-instruction-panel__send {
    min-inline-size: 44px;
  }

  .selection-instruction-panel__input:focus {
    border-color: var(--color-accent);
    outline: 1px solid var(--color-accent);
  }

  .selection-instruction-panel__shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
  }
}