@scope (stream-ui) {
  :where(:scope) {
    --stream-fg-default:              var(--a-fg);
    --stream-font-size-default:       var(--a-body-size);
    --stream-font-family-default:     var(--a-font-family);
    --stream-leading-default:         var(--a-body-leading);
    --stream-cursor-color-default:    var(--a-accent-bg);
    --stream-blink-duration-default:  0.6s;
  }

  :scope {
    box-sizing: border-box;
    display: block;
    color: var(--stream-fg, var(--stream-fg-default));
    font-family: var(--stream-font-family, var(--stream-font-family-default));
    font-size: var(--stream-font-size, var(--stream-font-size-default));
    line-height: var(--stream-leading, var(--stream-leading-default));
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Blinking cursor during stream (default; suppress with [hide-cursor]) */
  :scope[streaming]:not([hide-cursor])::after {
    content: '▊';
    color: var(--stream-cursor-color, var(--stream-cursor-color-default));
    animation: _stream-blink var(--stream-blink-duration, var(--stream-blink-duration-default)) step-end infinite;
    margin-left: 1px;
  }

  :scope:not([streaming])::after {
    content: none;
  }
}

@keyframes _stream-blink {
  50% { opacity: 0; }
}
