@scope (chat-thread-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --chat-border-color:          var(--a-border-subtle);
    --chat-radius:                var(--a-radius-lg);
    --chat-bg:                    var(--a-bg);
    --chat-gap:                   var(--a-space-2);
    --chat-padding-y:             var(--a-space-3);
    --chat-padding-x:             var(--a-space-4);
    --chat-messages-padding:      var(--a-space-4);
    --chat-messages-gap:          var(--a-space-3);
    --chat-footer-padding:        var(--a-space-3);
    --chat-footer-min-height:     var(--a-chrome-pane-footer-height);

    /* ── Motion ── */
    --chat-cursor-duration:       0.8s;

    /* ── Header avatar ── */
    --chat-header-avatar-size:    var(--a-size-md);
    --chat-header-avatar-radius:  var(--a-radius-full);
    --chat-header-avatar-bg:      var(--a-bg-muted);
    --chat-header-avatar-fg:      var(--a-fg-subtle);

    /* ── Message avatar ── */
    --chat-msg-avatar-radius:     var(--a-radius-full);
    --chat-msg-avatar-bg:         var(--a-bg-muted);
    --chat-msg-avatar-fg:         var(--a-fg-subtle);

    /* ── Bubble ── */
    --chat-bubble-padding-y:      var(--a-space-2);
    --chat-bubble-padding-x:      var(--a-space-3);
    --chat-bubble-radius:         var(--a-radius-lg);
    --chat-bubble-tail-radius:    var(--a-radius-sm);

    /* ── Bubble: user ── */
    --chat-user-bg:               var(--a-primary);
    --chat-user-fg:               var(--a-primary-fg);

    /* ── Bubble: assistant ── */
    --chat-assistant-bg:          var(--a-bg-subtle);
    --chat-assistant-fg:          var(--a-fg);

    /* ── Typography ── */
    --chat-header-avatar-size-font: var(--a-ui-md);
    --chat-header-avatar-weight:  var(--a-weight-semibold);
    --chat-header-name-size:      var(--a-ui-lg);
    --chat-header-name-weight:    var(--a-weight-semibold);
    --chat-header-status-size:    var(--a-ui-md);
    --chat-header-status-fg:      var(--a-fg-muted);
    --chat-msg-avatar-size-font:  var(--a-ui-sm);
    --chat-msg-avatar-weight:     var(--a-weight-semibold);
    --chat-bubble-font-size:      var(--a-body-size);
    --chat-bubble-line-height:    var(--a-leading-normal);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--chat-border-color);
    border-radius: var(--chat-radius);
    background: var(--chat-bg);
  }

  /* -- Header -- */
  & > header {
    display: flex;
    align-items: center;
    gap: var(--chat-gap);
    padding: var(--chat-padding-y) var(--chat-padding-x);
    border-bottom: 1px solid var(--chat-border-color);
  }

  & > header [slot="avatar"] {
    width: var(--chat-header-avatar-size);
    height: var(--chat-header-avatar-size);
    border-radius: var(--chat-header-avatar-radius);
    background: var(--chat-header-avatar-bg);
    color: var(--chat-header-avatar-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--chat-header-avatar-size-font);
    font-weight: var(--chat-header-avatar-weight);
    flex-shrink: 0;
  }

  & > header [slot="name"] {
    font-weight: var(--chat-header-name-weight);
    font-size: var(--chat-header-name-size);
  }

  & > header [slot="status"] {
    font-size: var(--chat-header-status-size);
    color: var(--chat-header-status-fg);
    margin-inline-start: auto;
  }

  /* -- Messages -- */
  & > section {
    flex: 1;
    overflow-y: auto;
    padding: var(--chat-messages-padding);
    display: flex;
    flex-direction: column;
    gap: var(--chat-messages-gap);
  }

  /* -- Message -- */
  [data-role] {
    display: flex;
    gap: var(--chat-gap);
    align-items: flex-end;
    max-width: 85%;
  }

  [data-role="user"] {
    align-self: flex-end;
    flex-direction: row-reverse;
  }

  [data-role="assistant"] {
    align-self: flex-start;
  }

  [data-role] [slot="avatar"] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--chat-msg-avatar-radius);
    background: var(--chat-msg-avatar-bg);
    color: var(--chat-msg-avatar-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--chat-msg-avatar-size-font);
    font-weight: var(--chat-msg-avatar-weight);
    flex-shrink: 0;
  }

  [data-role] [slot="bubble"] {
    padding: var(--chat-bubble-padding-y) var(--chat-bubble-padding-x);
    border-radius: var(--chat-bubble-radius);
    font-size: var(--chat-bubble-font-size);
    line-height: var(--chat-bubble-line-height);
    white-space: pre-wrap;
    word-break: break-word;
  }

  [data-role] [slot="bubble"] > :first-child { margin-block-start: 0; }
  [data-role] [slot="bubble"] > :last-child { margin-block-end: 0; }

  [data-role="user"] [slot="bubble"] {
    background: var(--chat-user-bg);
    color: var(--chat-user-fg);
    border-bottom-right-radius: var(--chat-bubble-tail-radius);
  }

  [data-role="assistant"] [slot="bubble"] {
    background: var(--chat-assistant-bg);
    color: var(--chat-assistant-fg);
    border-bottom-left-radius: var(--chat-bubble-tail-radius);
  }

  /* -- Streaming cursor -- */
  [slot="cursor"] {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    margin-inline-start: 1px;
    vertical-align: text-bottom;
    animation: ui-blink var(--chat-cursor-duration) step-end infinite;
  }

  /* -- Footer -- */
  & > footer {
    min-height: var(--chat-footer-min-height);
    display: flex;
    align-items: center;
    padding: var(--chat-footer-padding);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  chat-thread-ui [slot="cursor"] { animation: none; opacity: 0.7; }
}
