@layer components {
  /* Entity Detection: Highlights, Popover, Inline Alias Creator */

  /* -- Entity Highlights --
   * Colored underlines on detected entity names. Applied as ProseMirror
   * inline decorations, not stored in the document. */

  .entity-highlight {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
  }

  .entity-highlight:hover {
    background-color: oklch(var(--lch-ink-lighter) / 0.5);
  }

  .entity-highlight--character {
    text-decoration-color: var(--color-entity-character);
  }

  .entity-highlight--location {
    text-decoration-color: var(--color-entity-location);
  }

  .entity-highlight--lore-entry {
    text-decoration-color: var(--color-entity-lore-entry);
  }

  /* -- Entity Popover --
   * Floating panel shown on click/tap of a highlighted entity name. */

  .entity-popover {
    position: absolute;
    z-index: var(--z-popover);
    max-inline-size: 20rem;
    padding: var(--block-space-half) var(--inline-space);
    background: var(--color-canvas);
    border: var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    color: var(--color-ink);
    line-height: var(--line-height);
  }

  .entity-popover__header {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    margin-block-end: var(--block-space-half);
  }

  .entity-popover__name {
    font-weight: 600;
    font-size: var(--text-normal);
  }

  .entity-popover__type {
    padding: 0.1em 0.5em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .entity-popover__type--character {
    background: oklch(var(--lch-entity-character) / 0.15);
    color: var(--color-entity-character);
  }

  .entity-popover__type--location {
    background: oklch(var(--lch-entity-location) / 0.15);
    color: var(--color-entity-location);
  }

  .entity-popover__type--lore-entry {
    background: oklch(var(--lch-entity-lore-entry) / 0.15);
    color: var(--color-entity-lore-entry);
  }

  .entity-popover__alias {
    margin-block-end: var(--block-space-half);
    color: var(--color-ink-secondary);
  }

  .entity-popover__hint {
    display: block;
    margin-block-start: 0.25em;
    font-style: italic;
    color: var(--color-ink-muted);
  }

  .entity-popover__sentiment {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    margin-block-end: var(--block-space-half);
  }

  .entity-popover__sentiment--positive {
    background: oklch(var(--lch-positive) / 0.15);
    color: var(--color-positive);
  }

  .entity-popover__sentiment--negative {
    background: oklch(var(--lch-negative) / 0.15);
    color: var(--color-negative);
  }

  .entity-popover__sentiment--tense {
    background: oklch(var(--lch-warning) / 0.15);
    color: var(--color-warning);
  }

  .entity-popover__sentiment--neutral {
    background: oklch(var(--lch-ink-lighter) / 0.15);
    color: var(--color-ink-secondary);
  }

  .entity-popover__context {
    margin-block-end: var(--block-space-half);
    font-style: italic;
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    line-height: var(--line-height);
  }

  .entity-popover__link {
    display: inline-block;
    font-size: var(--text-small);
    color: var(--color-link);
    text-decoration: none;
  }

  .entity-popover__link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  /* -- Inline Alias Menu --
   * Floating "Add as alias..." button shown on text selection. */

  .inline-alias-menu {
    position: absolute;
    z-index: var(--z-popover);
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding: 0.25em 0.5em;
    background: var(--color-canvas);
    border: var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: var(--font-sans);
    font-size: var(--text-small);
  }

  .inline-alias-menu__btn {
    appearance: none;
    border: none;
    background: none;
    padding: 0.25em 0.5em;
    color: var(--color-link);
    cursor: pointer;
    font-size: var(--text-small);
    font-weight: 500;
    white-space: nowrap;
  }

  .inline-alias-menu__btn:hover {
    color: var(--color-link-hover);
  }

  .inline-alias-menu__status {
    padding: 0.25em 0.5em;
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  /* -- Inline Alias Panel --
   * Entity picker + context hint form opened from the alias menu. */

  .inline-alias-panel {
    position: absolute;
    z-index: var(--z-popover);
    inline-size: 18rem;
    max-block-size: 20rem;
    background: var(--color-canvas);
    border: var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    overflow: hidden;
  }

  .inline-alias-panel__content {
    display: flex;
    flex-direction: column;
    max-block-size: 20rem;
  }

  .inline-alias-panel__search {
    inline-size: 100%;
    padding: var(--block-space-half) var(--inline-space);
    border: none;
    border-block-end: var(--border);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-small);
    outline: none;
  }

  .inline-alias-panel__search:focus {
    background: var(--color-canvas);
  }

  .inline-alias-panel__list {
    overflow-y: auto;
    max-block-size: 12rem;
    padding: var(--block-space-half) 0;
  }

  .inline-alias-panel__group-label {
    padding: 0.25em var(--inline-space);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .inline-alias-panel__entity {
    display: block;
    inline-size: 100%;
    padding: 0.35em var(--inline-space);
    border: none;
    background: none;
    color: var(--color-ink);
    text-align: start;
    cursor: pointer;
    font-size: var(--text-small);
  }

  .inline-alias-panel__entity:hover {
    background: oklch(var(--lch-ink-lighter) / 0.5);
  }

  .inline-alias-panel__entity--selected {
    background: oklch(var(--lch-link) / 0.1);
    color: var(--color-link);
    font-weight: 500;
  }

  .inline-alias-panel__hint-row {
    padding: var(--block-space-half) var(--inline-space);
    border-block-start: var(--border);
  }

  .inline-alias-panel__hint {
    inline-size: 100%;
    padding: 0.35em 0.5em;
    margin-block-end: var(--block-space-half);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-canvas);
    color: var(--color-ink);
    font-size: var(--text-small);
    outline: none;
  }

  .inline-alias-panel__hint:focus {
    border-color: var(--color-link);
  }

  .inline-alias-panel__actions {
    display: flex;
    gap: var(--inline-space-half);
    justify-content: end;
  }

  .inline-alias-panel__error {
    padding: var(--block-space-half) var(--inline-space);
    color: var(--color-negative);
    font-size: var(--text-xs);
  }

  /* -- Mobile Responsiveness --
   * Clamp floating elements to viewport width on narrow screens. */

  @media (max-width: 799px) {
    .entity-popover {
      max-inline-size: calc(100dvw - 2 * var(--inline-space));
    }

    .inline-alias-panel {
      inline-size: calc(100dvw - 2 * var(--inline-space));
      max-inline-size: 18rem;
    }

    .inline-alias-menu {
      max-inline-size: calc(100dvw - 2 * var(--inline-space));
    }
  }
}