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

  :scope {
    box-sizing: border-box;
    display: block;
    color: var(--stream-fg);
    font-family: var(--stream-font-family);
    font-size: var(--stream-font-size);
    line-height: var(--stream-leading);
    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);
    animation: _stream-blink var(--stream-blink-duration) step-end infinite;
    margin-left: 1px;
  }

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

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