@duskmoon-dev/core 1.17.2 → 1.18.0

package/dist/components/index.css

@@ -180,6 +180,56 @@
     filter: none;
   }
 
+  /* Semantic Colors — must precede outline/ghost/text/tonal so those variants
+     can override the filled background at equal specificity. */
+  .btn-info {
+    --btn-text-color: var(--color-info-content);
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+  }
+
+  .btn-info:hover {
+    background-color: color-mix(in oklch, var(--color-info), black 10%);
+    border-color: color-mix(in oklch, var(--color-info), black 10%);
+    filter: none;
+  }
+
+  .btn-success {
+    --btn-text-color: var(--color-success-content);
+    background-color: var(--color-success);
+    border-color: var(--color-success);
+  }
+
+  .btn-success:hover {
+    background-color: color-mix(in oklch, var(--color-success), black 10%);
+    border-color: color-mix(in oklch, var(--color-success), black 10%);
+    filter: none;
+  }
+
+  .btn-warning {
+    --btn-text-color: var(--color-warning-content);
+    background-color: var(--color-warning);
+    border-color: var(--color-warning);
+  }
+
+  .btn-warning:hover {
+    background-color: color-mix(in oklch, var(--color-warning), black 10%);
+    border-color: color-mix(in oklch, var(--color-warning), black 10%);
+    filter: none;
+  }
+
+  .btn-error {
+    --btn-text-color: var(--color-error-content);
+    background-color: var(--color-error);
+    border-color: var(--color-error);
+  }
+
+  .btn-error:hover {
+    background-color: color-mix(in oklch, var(--color-error), black 10%);
+    border-color: color-mix(in oklch, var(--color-error), black 10%);
+    filter: none;
+  }
+
   /* Outline / Outlined Variant (.btn-outlined is an alias) */
   .btn-outline,
   .btn-outlined {
@@ -539,55 +589,6 @@
     background-color: var(--color-error-container);
   }
 
-  /* Semantic Colors */
-  .btn-info {
-    --btn-text-color: var(--color-info-content);
-    background-color: var(--color-info);
-    border-color: var(--color-info);
-  }
-
-  .btn-info:hover {
-    background-color: color-mix(in oklch, var(--color-info), black 10%);
-    border-color: color-mix(in oklch, var(--color-info), black 10%);
-    filter: none;
-  }
-
-  .btn-success {
-    --btn-text-color: var(--color-success-content);
-    background-color: var(--color-success);
-    border-color: var(--color-success);
-  }
-
-  .btn-success:hover {
-    background-color: color-mix(in oklch, var(--color-success), black 10%);
-    border-color: color-mix(in oklch, var(--color-success), black 10%);
-    filter: none;
-  }
-
-  .btn-warning {
-    --btn-text-color: var(--color-warning-content);
-    background-color: var(--color-warning);
-    border-color: var(--color-warning);
-  }
-
-  .btn-warning:hover {
-    background-color: color-mix(in oklch, var(--color-warning), black 10%);
-    border-color: color-mix(in oklch, var(--color-warning), black 10%);
-    filter: none;
-  }
-
-  .btn-error {
-    --btn-text-color: var(--color-error-content);
-    background-color: var(--color-error);
-    border-color: var(--color-error);
-  }
-
-  .btn-error:hover {
-    background-color: color-mix(in oklch, var(--color-error), black 10%);
-    border-color: color-mix(in oklch, var(--color-error), black 10%);
-    filter: none;
-  }
-
   /* Size Variants */
   .btn-xs {
     --btn-p: 0.5rem;
@@ -3385,198 +3386,567 @@
   }
 }
 
-/**
- * Chat Component Styles
- * DuskMoonUI - LLM-oriented chat primitives
- */
-
 @layer components {
-  .chat {
+  /**
+   * Scrollable transcript with Scroll-Driven Animations indicators.
+   * Set an explicit height / max-height (or place in a flex child with min-height: 0).
+   * Pair each .chat[data-chat-tl="N"] with .chat-scroll-indicator[data-chat-tl="N"] (N = 1..24).
+   */
+  .chat-scroll {
+    --chat-scroll-indicator-size: 0.875rem;
+    --chat-scroll-indicator-active-size: 1.125rem;
+    --chat-scroll-indicator-thickness: 0.1875rem;
+    --chat-scroll-indicator-gap: 0.3125rem;
+    --chat-scroll-indicator-hover-scale: 1.55;
+    --chat-scroll-indicator-neighbor-scale: 1.22;
+
+    container-type: size;
+    container-name: chat-scroll;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     column-gap: 0.75rem;
-    align-items: end;
-    padding: 0.25rem 0;
+    align-items: start;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    overscroll-behavior-y: contain;
+    timeline-scope:
+    --chat-1,
+    --chat-2,
+    --chat-3,
+    --chat-4,
+    --chat-5,
+    --chat-6,
+    --chat-7,
+    --chat-8,
+    --chat-9,
+    --chat-10,
+    --chat-11,
+    --chat-12,
+    --chat-13,
+    --chat-14,
+    --chat-15,
+    --chat-16,
+    --chat-17,
+    --chat-18,
+    --chat-19,
+    --chat-20,
+    --chat-21,
+    --chat-22,
+    --chat-23,
+    --chat-24;
+  }
+
+  .chat-scroll-track {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--chat-scroll-indicator-gap);
+    width: calc(
+      var(--chat-scroll-indicator-active-size) * var(--chat-scroll-indicator-hover-scale)
+    );
+    height: 100cqh;
+    margin: 0;
+    padding: 0.75rem 0;
+    overflow: visible;
+    list-style: none;
+    pointer-events: none;
   }
 
-  .chat-start {
-    grid-template-columns: auto minmax(0, 1fr);
+  .chat-scroll-body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
   }
 
-  .chat-end {
-    grid-template-columns: minmax(0, 1fr) auto;
+  .chat-scroll-indicator {
+    display: block;
+    flex-shrink: 0;
+    width: var(--chat-scroll-indicator-size);
+    height: var(--chat-scroll-indicator-thickness);
+    border: 0;
+    border-radius: 999px;
+    padding: 0;
+    appearance: none;
+    background-color: color-mix(in oklch, var(--color-on-surface) 28%, transparent);
+    color: inherit;
+    font: inherit;
+    opacity: 0.45;
+    pointer-events: auto;
+    text-decoration: none;
+    cursor: pointer;
+    transform: scaleX(1);
+    transform-origin: center;
+    transition:
+      transform 140ms ease,
+      opacity 140ms ease,
+      background-color 140ms ease;
   }
 
-  .chat-avatar {
-    grid-row: 1 / span 999;
-    grid-column: 1;
-    align-self: start;
-    justify-self: start;
+  .chat-scroll-indicator:hover,
+  .chat-scroll-indicator:focus-visible {
+    transform: scaleX(var(--chat-scroll-indicator-hover-scale)) scaleY(1.35);
+    background-color: var(--color-on-surface);
+    opacity: 1;
   }
 
-  .chat-end .chat-avatar {
-    grid-column: 2;
-    justify-self: end;
+  .chat-scroll-indicator:hover + .chat-scroll-indicator,
+  .chat-scroll-indicator:has(+ .chat-scroll-indicator:hover) {
+    transform: scaleX(var(--chat-scroll-indicator-neighbor-scale)) scaleY(1.15);
+    background-color: color-mix(in oklch, var(--color-on-surface) 55%, transparent);
+    opacity: 0.75;
   }
 
-  .chat > :not(.chat-avatar) {
-    grid-column: 2;
-    justify-self: start;
-    max-width: 100%;
-    margin-bottom: 0.25rem;
+  .chat[data-chat-tl] {
+    scroll-margin-block-start: 0.5rem;
   }
 
-  .chat-end > :not(.chat-avatar) {
-    grid-column: 1;
-    justify-self: end;
+  .chat-scroll-indicator:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent);
   }
 
-  .chat-header,
-  .chat-footer {
-    color: var(--color-on-surface-variant);
-    font-size: 0.75rem;
-    line-height: 1rem;
+  @supports (animation-timeline: --chat-1) {
+    .chat-scroll-indicator {
+      animation-name: chat-scroll-indicator-activate;
+      animation-duration: 1ms;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-range: entry 0% exit 100%;
+    }
   }
 
-  .chat-header {
-    margin-bottom: 0.125rem;
+  .chat[data-chat-tl="1"] {
+    view-timeline-name: --chat-1;
+    view-timeline-axis: block;
   }
 
-  .chat-footer {
-    margin-top: 0.125rem;
-    margin-bottom: 0;
+  .chat[data-chat-tl="2"] {
+    view-timeline-name: --chat-2;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble {
-    --chat-bubble-bg: var(--color-surface-container-highest);
-    --chat-bubble-fg: var(--color-on-surface);
+  .chat[data-chat-tl="3"] {
+    view-timeline-name: --chat-3;
+    view-timeline-axis: block;
+  }
 
-    position: relative;
-    max-width: min(80ch, 100%);
-    padding: 0.625rem 0.875rem;
-    border-radius: 1rem;
-    background-color: var(--chat-bubble-bg);
-    color: var(--chat-bubble-fg);
-    box-shadow: inset 0 0 0 1px var(--color-outline-variant);
-    font-size: 0.875rem;
-    line-height: 1.45;
-    overflow-wrap: anywhere;
-    word-break: break-word;
+  .chat[data-chat-tl="4"] {
+    view-timeline-name: --chat-4;
+    view-timeline-axis: block;
   }
 
-  .chat-start .chat-bubble::before,
-  .chat-end .chat-bubble::before,
-  .chat-start .chat-bubble::after,
-  .chat-end .chat-bubble::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
+  .chat[data-chat-tl="5"] {
+    view-timeline-name: --chat-5;
+    view-timeline-axis: block;
   }
 
-  .chat-start .chat-bubble::before {
-    left: -0.625rem;
-    width: 1rem;
-    height: 1rem;
-    background-color: var(--color-outline-variant);
+  .chat[data-chat-tl="6"] {
+    view-timeline-name: --chat-6;
+    view-timeline-axis: block;
   }
 
-  .chat-start .chat-bubble::after {
-    left: -0.5rem;
-    width: calc(1rem - 2px);
-    height: calc(1rem - 2px);
-    top: 1px;
-    background-color: var(--chat-bubble-bg);
+  .chat[data-chat-tl="7"] {
+    view-timeline-name: --chat-7;
+    view-timeline-axis: block;
   }
 
-  .chat-start .chat-bubble {
-    border-top-left-radius: 0;
+  .chat[data-chat-tl="8"] {
+    view-timeline-name: --chat-8;
+    view-timeline-axis: block;
   }
 
-  .chat-end .chat-bubble::before {
-    right: -0.625rem;
-    width: 1rem;
-    height: 1rem;
-    background-color: var(--color-outline-variant);
-    transform: scaleX(-1);
+  .chat[data-chat-tl="9"] {
+    view-timeline-name: --chat-9;
+    view-timeline-axis: block;
   }
 
-  .chat-end .chat-bubble::after {
-    right: -0.5rem;
-    width: calc(1rem - 2px);
-    height: calc(1rem - 2px);
-    top: 1px;
-    background-color: var(--chat-bubble-bg);
-    transform: scaleX(-1);
+  .chat[data-chat-tl="10"] {
+    view-timeline-name: --chat-10;
+    view-timeline-axis: block;
   }
 
-  .chat-end .chat-bubble {
-    border-top-right-radius: 0;
+  .chat[data-chat-tl="11"] {
+    view-timeline-name: --chat-11;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-primary {
-    --chat-bubble-bg: var(--color-primary-container);
-    --chat-bubble-fg: var(--color-on-primary-container);
+  .chat[data-chat-tl="12"] {
+    view-timeline-name: --chat-12;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-secondary {
-    --chat-bubble-bg: var(--color-secondary-container);
-    --chat-bubble-fg: var(--color-on-secondary-container);
+  .chat[data-chat-tl="13"] {
+    view-timeline-name: --chat-13;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-tertiary {
-    --chat-bubble-bg: var(--color-tertiary-container);
-    --chat-bubble-fg: var(--color-on-tertiary-container);
+  .chat[data-chat-tl="14"] {
+    view-timeline-name: --chat-14;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-info {
-    --chat-bubble-bg: var(--color-info-container);
-    --chat-bubble-fg: var(--color-on-info-container);
+  .chat[data-chat-tl="15"] {
+    view-timeline-name: --chat-15;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-success {
-    --chat-bubble-bg: var(--color-success-container);
-    --chat-bubble-fg: var(--color-on-success-container);
+  .chat[data-chat-tl="16"] {
+    view-timeline-name: --chat-16;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-warning {
-    --chat-bubble-bg: var(--color-warning-container);
-    --chat-bubble-fg: var(--color-on-warning-container);
+  .chat[data-chat-tl="17"] {
+    view-timeline-name: --chat-17;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-error {
-    --chat-bubble-bg: var(--color-error-container);
-    --chat-bubble-fg: var(--color-on-error-container);
+  .chat[data-chat-tl="18"] {
+    view-timeline-name: --chat-18;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-accent {
-    --chat-bubble-bg: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
-    --chat-bubble-fg: var(--color-on-surface);
+  .chat[data-chat-tl="19"] {
+    view-timeline-name: --chat-19;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-neutral {
-    --chat-bubble-bg: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
-    --chat-bubble-fg: var(--color-on-surface);
+  .chat[data-chat-tl="20"] {
+    view-timeline-name: --chat-20;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-base {
-    --chat-bubble-bg: var(--color-base-200);
-    --chat-bubble-fg: var(--color-base-content);
+  .chat[data-chat-tl="21"] {
+    view-timeline-name: --chat-21;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-filled.chat-bubble-primary {
-    --chat-bubble-bg: var(--color-primary);
-    --chat-bubble-fg: var(--color-primary-content);
+  .chat[data-chat-tl="22"] {
+    view-timeline-name: --chat-22;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-filled.chat-bubble-secondary {
-    --chat-bubble-bg: var(--color-secondary);
-    --chat-bubble-fg: var(--color-secondary-content);
+  .chat[data-chat-tl="23"] {
+    view-timeline-name: --chat-23;
+    view-timeline-axis: block;
   }
 
-  .chat-bubble-filled.chat-bubble-tertiary {
-    --chat-bubble-bg: var(--color-tertiary);
-    --chat-bubble-fg: var(--color-tertiary-content);
+  .chat[data-chat-tl="24"] {
+    view-timeline-name: --chat-24;
+    view-timeline-axis: block;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="1"] {
+    animation-timeline: --chat-1;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="2"] {
+    animation-timeline: --chat-2;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="3"] {
+    animation-timeline: --chat-3;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="4"] {
+    animation-timeline: --chat-4;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="5"] {
+    animation-timeline: --chat-5;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="6"] {
+    animation-timeline: --chat-6;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="7"] {
+    animation-timeline: --chat-7;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="8"] {
+    animation-timeline: --chat-8;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="9"] {
+    animation-timeline: --chat-9;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="10"] {
+    animation-timeline: --chat-10;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="11"] {
+    animation-timeline: --chat-11;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="12"] {
+    animation-timeline: --chat-12;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="13"] {
+    animation-timeline: --chat-13;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="14"] {
+    animation-timeline: --chat-14;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="15"] {
+    animation-timeline: --chat-15;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="16"] {
+    animation-timeline: --chat-16;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="17"] {
+    animation-timeline: --chat-17;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="18"] {
+    animation-timeline: --chat-18;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="19"] {
+    animation-timeline: --chat-19;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="20"] {
+    animation-timeline: --chat-20;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="21"] {
+    animation-timeline: --chat-21;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="22"] {
+    animation-timeline: --chat-22;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="23"] {
+    animation-timeline: --chat-23;
+  }
+
+  .chat-scroll-indicator[data-chat-tl="24"] {
+    animation-timeline: --chat-24;
+  }
+
+  @keyframes chat-scroll-indicator-activate {
+    0%,
+    100% {
+      width: var(--chat-scroll-indicator-size);
+      background-color: color-mix(in oklch, var(--color-on-surface) 28%, transparent);
+      opacity: 0.45;
+    }
+
+    35%,
+    65% {
+      width: var(--chat-scroll-indicator-active-size);
+      background-color: var(--color-on-surface);
+      opacity: 1;
+    }
+  }
+
+  .chat {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.75rem;
+    align-items: end;
+    padding: 0.25rem 0;
+  }
+
+  .chat-start {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .chat-end {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .chat-avatar {
+    grid-row: 1 / span 999;
+    grid-column: 1;
+    align-self: start;
+    justify-self: start;
+  }
+
+  .chat-end .chat-avatar {
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  .chat > :not(.chat-avatar) {
+    grid-column: 2;
+    justify-self: start;
+    max-width: 100%;
+    margin-bottom: 0.25rem;
+  }
+
+  .chat-end > :not(.chat-avatar) {
+    grid-column: 1;
+    justify-self: end;
+  }
+
+  .chat-header,
+  .chat-footer {
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .chat-header {
+    margin-bottom: 0.125rem;
+  }
+
+  .chat-footer {
+    margin-top: 0.125rem;
+    margin-bottom: 0;
+  }
+
+  .chat-bubble {
+    --chat-bubble-bg: var(--color-surface-container-highest);
+    --chat-bubble-fg: var(--color-on-surface);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+    max-width: min(80ch, 100%);
+    padding: 0.625rem 0.875rem;
+    border-radius: 1rem;
+    background-color: var(--chat-bubble-bg);
+    color: var(--chat-bubble-fg);
+    box-shadow: inset 0 0 0 1px var(--color-outline-variant);
+    font-size: 0.875rem;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .chat-bubble-content {
+    min-width: 0;
+  }
+
+  .chat-start .chat-bubble::before,
+  .chat-end .chat-bubble::before,
+  .chat-start .chat-bubble::after,
+  .chat-end .chat-bubble::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    clip-path: polygon(0 0, 100% 0, 100% 100%);
+  }
+
+  .chat-start .chat-bubble::before {
+    left: -0.625rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-outline-variant);
+  }
+
+  .chat-start .chat-bubble::after {
+    left: -0.5rem;
+    width: calc(1rem - 2px);
+    height: calc(1rem - 2px);
+    top: 1px;
+    background-color: var(--chat-bubble-bg);
+  }
+
+  .chat-start .chat-bubble {
+    border-top-left-radius: 0;
+  }
+
+  .chat-end .chat-bubble::before {
+    right: -0.625rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-outline-variant);
+    transform: scaleX(-1);
+  }
+
+  .chat-end .chat-bubble::after {
+    right: -0.5rem;
+    width: calc(1rem - 2px);
+    height: calc(1rem - 2px);
+    top: 1px;
+    background-color: var(--chat-bubble-bg);
+    transform: scaleX(-1);
+  }
+
+  .chat-end .chat-bubble {
+    border-top-right-radius: 0;
+  }
+
+  .chat-bubble-primary {
+    --chat-bubble-bg: var(--color-primary-container);
+    --chat-bubble-fg: var(--color-on-primary-container);
+  }
+
+  .chat-bubble-secondary {
+    --chat-bubble-bg: var(--color-secondary-container);
+    --chat-bubble-fg: var(--color-on-secondary-container);
+  }
+
+  .chat-bubble-tertiary {
+    --chat-bubble-bg: var(--color-tertiary-container);
+    --chat-bubble-fg: var(--color-on-tertiary-container);
+  }
+
+  .chat-bubble-info {
+    --chat-bubble-bg: var(--color-info-container);
+    --chat-bubble-fg: var(--color-on-info-container);
+  }
+
+  .chat-bubble-success {
+    --chat-bubble-bg: var(--color-success-container);
+    --chat-bubble-fg: var(--color-on-success-container);
+  }
+
+  .chat-bubble-warning {
+    --chat-bubble-bg: var(--color-warning-container);
+    --chat-bubble-fg: var(--color-on-warning-container);
+  }
+
+  .chat-bubble-error {
+    --chat-bubble-bg: var(--color-error-container);
+    --chat-bubble-fg: var(--color-on-error-container);
+  }
+
+  .chat-bubble-accent {
+    --chat-bubble-bg: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    --chat-bubble-fg: var(--color-on-surface);
+  }
+
+  .chat-bubble-neutral {
+    --chat-bubble-bg: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    --chat-bubble-fg: var(--color-on-surface);
+  }
+
+  .chat-bubble-base {
+    --chat-bubble-bg: var(--color-base-200);
+    --chat-bubble-fg: var(--color-base-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-primary {
+    --chat-bubble-bg: var(--color-primary);
+    --chat-bubble-fg: var(--color-primary-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-secondary {
+    --chat-bubble-bg: var(--color-secondary);
+    --chat-bubble-fg: var(--color-secondary-content);
+  }
+
+  .chat-bubble-filled.chat-bubble-tertiary {
+    --chat-bubble-bg: var(--color-tertiary);
+    --chat-bubble-fg: var(--color-tertiary-content);
   }
 
   .chat-bubble-filled.chat-bubble-info {
@@ -3646,6 +4016,14 @@
     overflow: hidden;
   }
 
+  .chat-bubble > .chat-reasoning,
+  .chat-bubble > .chat-tool,
+  .chat-reasoning .chat-tool,
+  .chat-reasoning-body > .chat-tool {
+    width: 100%;
+    max-width: none;
+  }
+
   .chat-reasoning > summary,
   .chat-tool > summary {
     cursor: pointer;
@@ -3658,12 +4036,28 @@
     font-weight: 500;
   }
 
-  .chat-reasoning > :not(summary) {
+  .chat-reasoning-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
     padding: 0 0.75rem 0.75rem;
     color: var(--color-on-surface-variant);
+  }
+
+  .chat-reasoning-body > :not(.chat-tool) {
     font-style: italic;
   }
 
+  .chat-reasoning > div:not(.chat-tool):not(.chat-reasoning-body) {
+    padding: 0 0.75rem 0.75rem;
+    color: var(--color-on-surface-variant);
+    font-style: italic;
+  }
+
+  .chat-reasoning > .chat-tool {
+    margin: 0 0.75rem 0.75rem;
+  }
+
   .chat-tool-header {
     display: flex;
     align-items: center;
@@ -3758,7 +4152,8 @@
     animation-delay: 300ms;
   }
 
-  .chat-bubble-streaming::after {
+  .chat-bubble-streaming::after,
+  .chat-bubble-content.chat-bubble-streaming::after {
     content: "";
     display: inline-block;
     width: 1px;
@@ -3769,6 +4164,10 @@
     animation: chat-stream-caret 1s step-end infinite;
   }
 
+  .chat-bubble.chat-bubble-streaming:has(.chat-reasoning, .chat-tool, .chat-bubble-content)::after {
+    content: none;
+  }
+
   .chat-reasoning > summary:focus-visible,
   .chat-tool > summary:focus-visible {
     outline: none;
@@ -3808,15 +4207,26 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .chat-scroll {
+      scroll-behavior: auto;
+    }
+
+    .chat-scroll-indicator {
+      animation: none;
+      transition: none;
+    }
+
     .chat-typing::before,
     .chat-typing::after,
     .chat-typing span,
     .chat-bubble-streaming::after,
+    .chat-bubble-content.chat-bubble-streaming::after,
     .chat-tool-running .chat-tool-header::before {
       animation: none;
     }
 
-    .chat-bubble-streaming::after {
+    .chat-bubble-streaming::after,
+    .chat-bubble-content.chat-bubble-streaming::after {
       opacity: 1;
     }
   }
@@ -13714,439 +14124,243 @@
   .toast-ghost.toast-warning   { color: var(--color-warning); }
   .toast-ghost.toast-error     { color: var(--color-error); }
   .toast-ghost.toast-accent    { color: var(--color-accent); }
-  .toast-ghost.toast-neutral   { color: var(--color-neutral); }
-  .toast-ghost.toast-base      { color: var(--color-base-content); }
-
-  .toast-ghost .toast-title,
-  .toast-ghost .toast-message {
-    color: inherit;
-  }
-
-  /* Progress Bar (for auto-dismiss) */
-  .toast-progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 3px;
-    background-color: currentColor;
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
-    animation: toast-progress linear forwards;
-  }
-
-  @keyframes toast-progress {
-    from {
-      width: 100%;
-    }
-    to {
-      width: 0%;
-    }
-  }
-
-  /* Reduce Motion */
-  @media (prefers-reduced-motion: reduce) {
-    .toast {
-      transition: opacity 0ms;
-      transform: none;
-    }
-
-    .toast-progress {
-      animation: none;
-    }
-  }
-}
-
-/**
- * Tooltip Component Styles
- * DuskMoonUI - Material Design 3 inspired tooltip system
- */
-
-@layer components {
-  /* Base Tooltip */
-  .tooltip {
-    position: relative;
-    display: inline-block;
-  }
-
-  /* Tooltip Content */
-  .tooltip-content {
-    position: absolute;
-    z-index: 1000;
-    padding: 0.375rem 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    line-height: 1rem;
-    white-space: nowrap;
-    background-color: var(--color-on-surface);
-    color: var(--color-surface);
-    border-radius: var(--radius-xs);
-    box-shadow: var(--shadow-md);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 150ms ease-out, visibility 150ms ease-out;
-    pointer-events: none;
-  }
-
-  /* Tooltip Arrow */
-  .tooltip-content::before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 0.375rem solid transparent;
-  }
-
-  /* Show Tooltip */
-  .tooltip:hover .tooltip-content,
-  .tooltip:focus-within .tooltip-content,
-  .tooltip-open .tooltip-content {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  /* Position: Top (default) - applied to all tooltips as base */
-  .tooltip .tooltip-content {
-    bottom: 100%;
-    top: auto;
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-    margin-bottom: 0.5rem;
-    margin-top: 0;
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  .tooltip .tooltip-content::before {
-    top: 100%;
-    bottom: auto;
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-    border-top-color: var(--color-on-surface);
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-    border-right-color: transparent;
-  }
-
-  /* Position: Bottom */
-  .tooltip.tooltip-bottom .tooltip-content {
-    top: 100%;
-    bottom: auto;
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  .tooltip.tooltip-bottom .tooltip-content::before {
-    bottom: 100%;
-    top: auto;
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-    border-bottom-color: var(--color-on-surface);
-    border-top-color: transparent;
-    border-left-color: transparent;
-    border-right-color: transparent;
-  }
-
-  /* Position: Left */
-  .tooltip.tooltip-left .tooltip-content {
-    right: 100%;
-    left: auto;
-    top: 50%;
-    bottom: auto;
-    transform: translateY(-50%);
-    margin-right: 0.5rem;
-    margin-left: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .tooltip.tooltip-left .tooltip-content::before {
-    left: 100%;
-    right: auto;
-    top: 50%;
-    bottom: auto;
-    transform: translateY(-50%);
-    border-left-color: var(--color-on-surface);
-    border-right-color: transparent;
-    border-top-color: transparent;
-    border-bottom-color: transparent;
-  }
-
-  /* Position: Right */
-  .tooltip.tooltip-right .tooltip-content {
-    left: 100%;
-    right: auto;
-    top: 50%;
-    bottom: auto;
-    transform: translateY(-50%);
-    margin-left: 0.5rem;
-    margin-right: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .tooltip.tooltip-right .tooltip-content::before {
-    right: 100%;
-    left: auto;
-    top: 50%;
-    bottom: auto;
-    transform: translateY(-50%);
-    border-right-color: var(--color-on-surface);
-    border-left-color: transparent;
-    border-top-color: transparent;
-    border-bottom-color: transparent;
-  }
-
-  /* Light Tooltip */
-  .tooltip.tooltip-light .tooltip-content {
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
-    border: 1px solid var(--color-outline);
-    box-shadow: var(--shadow-md);
-  }
-
-  .tooltip.tooltip-light .tooltip-content::before {
-    border-top-color: var(--color-surface);
-  }
-
-  .tooltip.tooltip-light.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-surface);
-  }
-
-  .tooltip.tooltip-light.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-surface);
-  }
-
-  .tooltip.tooltip-light.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-surface);
-  }
-
-  /* Color Variants */
-  .tooltip.tooltip-primary .tooltip-content {
-    background-color: var(--color-primary);
-    color: var(--color-primary-content);
-  }
-
-  .tooltip.tooltip-primary .tooltip-content::before {
-    border-top-color: var(--color-primary);
-  }
-
-  .tooltip.tooltip-primary.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-primary);
-  }
-
-  .tooltip.tooltip-primary.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-primary);
-  }
-
-  .tooltip.tooltip-primary.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-primary);
-  }
-
-  .tooltip.tooltip-secondary .tooltip-content {
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-content);
-  }
-
-  .tooltip.tooltip-secondary .tooltip-content::before {
-    border-top-color: var(--color-secondary);
-  }
-
-  .tooltip.tooltip-secondary.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-secondary);
-  }
-
-  .tooltip.tooltip-secondary.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-secondary);
-  }
-
-  .tooltip.tooltip-secondary.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-secondary);
-  }
-
-  .tooltip.tooltip-error .tooltip-content {
-    background-color: var(--color-error);
-    color: var(--color-error-content);
-  }
-
-  .tooltip.tooltip-error .tooltip-content::before {
-    border-top-color: var(--color-error);
-  }
-
-  .tooltip.tooltip-error.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-error);
-  }
-
-  .tooltip.tooltip-error.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-error);
-  }
-
-  .tooltip.tooltip-error.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-error);
-  }
+  .toast-ghost.toast-neutral   { color: var(--color-neutral); }
+  .toast-ghost.toast-base      { color: var(--color-base-content); }
 
-  .tooltip.tooltip-tertiary .tooltip-content {
-    background-color: var(--color-tertiary);
-    color: var(--color-tertiary-content);
+  .toast-ghost .toast-title,
+  .toast-ghost .toast-message {
+    color: inherit;
   }
 
-  .tooltip.tooltip-tertiary .tooltip-content::before {
-    border-top-color: var(--color-tertiary);
+  /* Progress Bar (for auto-dismiss) */
+  .toast-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    background-color: currentColor;
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+    animation: toast-progress linear forwards;
   }
 
-  .tooltip.tooltip-tertiary.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-tertiary);
+  @keyframes toast-progress {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
   }
 
-  .tooltip.tooltip-tertiary.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-tertiary);
-  }
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .toast {
+      transition: opacity 0ms;
+      transform: none;
+    }
 
-  .tooltip.tooltip-tertiary.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-tertiary);
+    .toast-progress {
+      animation: none;
+    }
   }
+}
 
-  .tooltip.tooltip-info .tooltip-content {
-    background-color: var(--color-info);
-    color: var(--color-info-content);
-  }
+/**
+ * Tooltip Component Styles
+ * DuskMoonUI - Material Design 3 inspired tooltip system
+ *
+ * Breaking: uses native Popover API (popover="hint") + CSS Anchor Positioning.
+ * Markup:
+ *   <button interestfor="id" style="anchor-name: --id" class="tooltip-delay">…</button>
+ *   <div id="id" popover="hint" class="tooltip tooltip-top" style="position-anchor: --id">…</div>
+ */
 
-  .tooltip.tooltip-info .tooltip-content::before {
-    border-top-color: var(--color-info);
-  }
+@layer components {
+  /* ========================================
+   * Base surface (the popover element itself)
+   * ======================================== */
 
-  .tooltip.tooltip-info.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-info);
-  }
+  .tooltip[popover] {
+    --tooltip-bg: var(--color-on-surface);
+    --tooltip-fg: var(--color-surface);
 
-  .tooltip.tooltip-info.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-info);
+    position: absolute;
+    inset: auto;
+    z-index: 1000;
+    margin: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    white-space: nowrap;
+    background-color: var(--tooltip-bg);
+    color: var(--tooltip-fg);
+    border: none;
+    border-radius: var(--radius-xs);
+    box-shadow: var(--shadow-md);
+    pointer-events: none;
+    opacity: 0;
+    transform: scale(0.95);
+    position-area: top;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    transition:
+      opacity 150ms ease-out,
+      transform 150ms ease-out,
+      overlay 150ms ease-out allow-discrete,
+      display 150ms ease-out allow-discrete;
   }
 
-  .tooltip.tooltip-info.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-info);
+  .tooltip[popover]:popover-open {
+    opacity: 1;
+    transform: scale(1);
   }
 
-  .tooltip.tooltip-success .tooltip-content {
-    background-color: var(--color-success);
-    color: var(--color-success-content);
+  @starting-style {
+    .tooltip[popover]:popover-open {
+      opacity: 0;
+      transform: scale(0.95);
+    }
   }
 
-  .tooltip.tooltip-success .tooltip-content::before {
-    border-top-color: var(--color-success);
-  }
+  /* ========================================
+   * Preferred position-area
+   * ======================================== */
 
-  .tooltip.tooltip-success.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-success);
+  .tooltip-top[popover] {
+    position-area: top;
   }
 
-  .tooltip.tooltip-success.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-success);
+  .tooltip-bottom[popover] {
+    position-area: bottom;
   }
 
-  .tooltip.tooltip-success.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-success);
+  .tooltip-left[popover] {
+    position-area: left;
   }
 
-  .tooltip.tooltip-warning .tooltip-content {
-    background-color: var(--color-warning);
-    color: var(--color-warning-content);
+  .tooltip-right[popover] {
+    position-area: right;
   }
 
-  .tooltip.tooltip-warning .tooltip-content::before {
-    border-top-color: var(--color-warning);
-  }
+  /* ========================================
+   * Arrow (preferred position only; may be wrong after flip)
+   * ======================================== */
 
-  .tooltip.tooltip-warning.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-warning);
+  .tooltip[popover]::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 0.375rem solid transparent;
   }
 
-  .tooltip.tooltip-warning.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-warning);
+  .tooltip-top[popover]::before,
+  .tooltip[popover]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: var(--tooltip-bg);
   }
 
-  .tooltip.tooltip-warning.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-warning);
+  .tooltip-bottom[popover]::before {
+    bottom: 100%;
+    top: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: var(--tooltip-bg);
+    border-top-color: transparent;
   }
 
-  .tooltip.tooltip-accent .tooltip-content {
-    background-color: var(--color-accent);
-    color: var(--color-accent-content);
+  .tooltip-left[popover]::before {
+    left: 100%;
+    top: 50%;
+    bottom: auto;
+    transform: translateY(-50%);
+    border-left-color: var(--tooltip-bg);
+    border-top-color: transparent;
   }
 
-  .tooltip.tooltip-accent .tooltip-content::before {
-    border-top-color: var(--color-accent);
+  .tooltip-right[popover]::before {
+    right: 100%;
+    left: auto;
+    top: 50%;
+    bottom: auto;
+    transform: translateY(-50%);
+    border-right-color: var(--tooltip-bg);
+    border-top-color: transparent;
   }
 
-  .tooltip.tooltip-accent.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-accent);
-  }
+  /* ========================================
+   * Color variants
+   * ======================================== */
 
-  .tooltip.tooltip-accent.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-accent);
+  .tooltip-light[popover] {
+    --tooltip-bg: var(--color-surface);
+    --tooltip-fg: var(--color-on-surface);
+    border: 1px solid var(--color-outline);
   }
 
-  .tooltip.tooltip-accent.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-accent);
+  .tooltip-primary[popover] {
+    --tooltip-bg: var(--color-primary);
+    --tooltip-fg: var(--color-primary-content);
   }
 
-  .tooltip.tooltip-neutral .tooltip-content {
-    background-color: var(--color-neutral);
-    color: var(--color-neutral-content);
+  .tooltip-secondary[popover] {
+    --tooltip-bg: var(--color-secondary);
+    --tooltip-fg: var(--color-secondary-content);
   }
 
-  .tooltip.tooltip-neutral .tooltip-content::before {
-    border-top-color: var(--color-neutral);
+  .tooltip-tertiary[popover] {
+    --tooltip-bg: var(--color-tertiary);
+    --tooltip-fg: var(--color-tertiary-content);
   }
 
-  .tooltip.tooltip-neutral.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-neutral);
+  .tooltip-info[popover] {
+    --tooltip-bg: var(--color-info);
+    --tooltip-fg: var(--color-info-content);
   }
 
-  .tooltip.tooltip-neutral.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-neutral);
+  .tooltip-success[popover] {
+    --tooltip-bg: var(--color-success);
+    --tooltip-fg: var(--color-success-content);
   }
 
-  .tooltip.tooltip-neutral.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-neutral);
+  .tooltip-warning[popover] {
+    --tooltip-bg: var(--color-warning);
+    --tooltip-fg: var(--color-warning-content);
   }
 
-  .tooltip.tooltip-base .tooltip-content {
-    background-color: var(--color-base-100);
-    color: var(--color-base-content);
+  .tooltip-error[popover] {
+    --tooltip-bg: var(--color-error);
+    --tooltip-fg: var(--color-error-content);
   }
 
-  .tooltip.tooltip-base .tooltip-content::before {
-    border-top-color: var(--color-base-100);
+  .tooltip-accent[popover] {
+    --tooltip-bg: var(--color-accent);
+    --tooltip-fg: var(--color-accent-content);
   }
 
-  .tooltip.tooltip-base.tooltip-bottom .tooltip-content::before {
-    border-bottom-color: var(--color-base-100);
+  .tooltip-neutral[popover] {
+    --tooltip-bg: var(--color-neutral);
+    --tooltip-fg: var(--color-neutral-content);
   }
 
-  .tooltip.tooltip-base.tooltip-left .tooltip-content::before {
-    border-left-color: var(--color-base-100);
+  .tooltip-base[popover] {
+    --tooltip-bg: var(--color-base-100);
+    --tooltip-fg: var(--color-base-content);
   }
 
-  .tooltip.tooltip-base.tooltip-right .tooltip-content::before {
-    border-right-color: var(--color-base-100);
-  }
+  /* ========================================
+   * Content variants
+   * ======================================== */
 
-  /* Multi-line Tooltip */
-  .tooltip-multiline .tooltip-content {
+  .tooltip-multiline[popover] {
     white-space: normal;
     max-width: 16rem;
     text-align: center;
   }
 
-  /* Rich Tooltip */
-  .tooltip-rich .tooltip-content {
+  .tooltip-rich[popover] {
     padding: 0.75rem 1rem;
     max-width: 20rem;
     white-space: normal;
@@ -14165,23 +14379,28 @@
     opacity: 0.9;
   }
 
-  /* Delay Variants */
-  .tooltip-delay .tooltip-content {
-    transition-delay: 300ms;
+  /* ========================================
+   * Invoker utilities (apply on the trigger)
+   * ======================================== */
+
+  .tooltip-delay {
+    interest-delay: 300ms;
   }
 
-  .tooltip-delay-long .tooltip-content {
-    transition-delay: 500ms;
+  .tooltip-delay-long {
+    interest-delay: 500ms;
   }
 
-  /* Interactive Tooltip */
-  .tooltip-interactive .tooltip-content {
+  .tooltip-interactive[popover] {
     pointer-events: auto;
   }
 
-  /* Reduce Motion */
+  /* ========================================
+   * Reduce Motion
+   * ======================================== */
+
   @media (prefers-reduced-motion: reduce) {
-    .tooltip-content {
+    .tooltip[popover] {
       transition: none;
     }
   }
@@ -17900,107 +18119,156 @@
 /**
  * Popover Component Styles
  * DuskMoonUI - Material Design 3 inspired popover system
+ *
+ * Uses native Popover API + CSS Anchor Positioning:
+ *   <button popovertarget="id" style="anchor-name: --id">…</button>
+ *   <div id="id" popover class="popover popover-bottom" style="position-anchor: --id">…</div>
  */
 
 @layer components {
-  /* Popover Container (class-based approach only, not native [popover]) */
-  .popover:not([popover]) {
-    position: relative;
-    display: inline-block;
+  /* ========================================
+   * Native Popover surface
+   * ======================================== */
+
+  .popover {
+    --popover-color-intensity: 30%;
   }
 
-  /* Popover Content */
-  .popover-content {
+  .popover[popover] {
     position: absolute;
+    inset: auto;
     z-index: 1050;
     min-width: 12rem;
     max-width: 20rem;
     padding: 1rem;
+    margin: 0.5rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline-variant);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     opacity: 0;
-    visibility: hidden;
     transform: scale(0.95);
-    transform-origin: center;
-    transition: opacity 150ms ease-out, visibility 150ms ease-out, transform 150ms ease-out;
+    position-area: bottom;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    transition:
+      opacity 150ms ease-out,
+      transform 150ms ease-out,
+      overlay 150ms ease-out allow-discrete,
+      display 150ms ease-out allow-discrete;
   }
 
-  .popover.show .popover-content,
-  .popover-content.show {
+  .popover[popover]:popover-open {
     opacity: 1;
     visibility: visible;
     transform: scale(1);
   }
 
-  /* Direct popover structure (without .popover-content wrapper) */
-  .popover.popover-show,
-  .popover.show {
-    opacity: 1;
-    visibility: visible;
+  @starting-style {
+    .popover[popover]:popover-open {
+      opacity: 0;
+      transform: scale(0.95);
+    }
   }
 
-  /* Popover as direct overlay (simpler structure) */
-  .popover:not([popover])[class*="popover-top"],
-  .popover:not([popover])[class*="popover-bottom"],
-  .popover:not([popover])[class*="popover-left"],
-  .popover:not([popover])[class*="popover-right"] {
-    position: absolute;
-    z-index: 1050;
-    min-width: 12rem;
-    max-width: 20rem;
-    padding: 1rem;
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline-variant);
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-lg);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 150ms ease-out, visibility 150ms ease-out;
+  /* Preferred position-area */
+  .popover-top[popover] {
+    position-area: top;
   }
 
-  .popover[class*="popover-top"].popover-show,
-  .popover[class*="popover-bottom"].popover-show,
-  .popover[class*="popover-left"].popover-show,
-  .popover[class*="popover-right"].popover-show {
-    opacity: 1;
-    visibility: visible;
+  .popover-bottom[popover] {
+    position-area: bottom;
   }
 
-  /* Direct position: Top */
-  .popover.popover-top:not(:has(.popover-content)) {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-bottom: 0.75rem;
+  .popover-left[popover] {
+    position-area: left;
   }
 
-  /* Direct position: Bottom */
-  .popover.popover-bottom:not(:has(.popover-content)) {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-top: 0.75rem;
+  .popover-right[popover] {
+    position-area: right;
   }
 
-  /* Direct position: Left */
-  .popover.popover-left:not(:has(.popover-content)) {
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    margin-right: 0.75rem;
+  /* Alignment variants */
+  .popover-start[popover] {
+    position-area: bottom span-right;
   }
 
-  /* Direct position: Right */
-  .popover.popover-right:not(:has(.popover-content)) {
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    margin-left: 0.75rem;
+  .popover-end[popover] {
+    position-area: bottom span-left;
+  }
+
+  .popover-top.popover-start[popover] {
+    position-area: top span-right;
+  }
+
+  .popover-top.popover-end[popover] {
+    position-area: top span-left;
+  }
+
+  .popover-bottom.popover-start[popover] {
+    position-area: bottom span-right;
+  }
+
+  .popover-bottom.popover-end[popover] {
+    position-area: bottom span-left;
+  }
+
+  .popover-left.popover-start[popover] {
+    position-area: left span-bottom;
+  }
+
+  .popover-left.popover-end[popover] {
+    position-area: left span-top;
   }
 
-  /* Popover Arrow */
+  .popover-right.popover-start[popover] {
+    position-area: right span-bottom;
+  }
+
+  .popover-right.popover-end[popover] {
+    position-area: right span-top;
+  }
+
+  /* Backdrop */
+  .popover[popover]::backdrop {
+    background-color: transparent;
+    transition:
+      background-color 150ms ease-out,
+      overlay 150ms ease-out allow-discrete,
+      display 150ms ease-out allow-discrete;
+  }
+
+  .popover[popover]:popover-open::backdrop {
+    background-color: color-mix(in srgb, var(--color-scrim) 10%, transparent);
+  }
+
+  @starting-style {
+    .popover[popover]:popover-open::backdrop {
+      background-color: transparent;
+    }
+  }
+
+  .popover-modal[popover]::backdrop {
+    background-color: transparent;
+    transition:
+      background-color 150ms ease-out,
+      overlay 150ms ease-out allow-discrete,
+      display 150ms ease-out allow-discrete;
+  }
+
+  .popover-modal[popover]:popover-open::backdrop {
+    background-color: color-mix(in srgb, var(--color-scrim) 30%, transparent);
+  }
+
+  @starting-style {
+    .popover-modal[popover]:popover-open::backdrop {
+      background-color: transparent;
+    }
+  }
+
+  /* ========================================
+   * Arrow (preferred position; may be wrong after flip)
+   * ======================================== */
+
   .popover-arrow {
     position: absolute;
     width: 0.75rem;
@@ -18010,22 +18278,8 @@
     transform: rotate(45deg);
   }
 
-  /* Position: Top (default) */
-  .popover-top .popover-content,
-  .popover .popover-content {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%) scale(0.95);
-    margin-bottom: 0.75rem;
-  }
-
-  .popover-top.show .popover-content,
-  .popover.show .popover-content {
-    transform: translateX(-50%) scale(1);
-  }
-
-  .popover-top .popover-arrow,
-  .popover .popover-arrow {
+  .popover-top[popover] > .popover-arrow,
+  .popover[popover]:not(.popover-bottom):not(.popover-left):not(.popover-right) > .popover-arrow {
     bottom: -0.375rem;
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
@@ -18033,19 +18287,7 @@
     border-left: none;
   }
 
-  /* Position: Bottom */
-  .popover-bottom .popover-content {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%) scale(0.95);
-    margin-top: 0.75rem;
-  }
-
-  .popover-bottom.show .popover-content {
-    transform: translateX(-50%) scale(1);
-  }
-
-  .popover-bottom .popover-arrow {
+  .popover-bottom[popover] > .popover-arrow {
     top: -0.375rem;
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
@@ -18053,19 +18295,7 @@
     border-right: none;
   }
 
-  /* Position: Left */
-  .popover-left .popover-content {
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%) scale(0.95);
-    margin-right: 0.75rem;
-  }
-
-  .popover-left.show .popover-content {
-    transform: translateY(-50%) scale(1);
-  }
-
-  .popover-left .popover-arrow {
+  .popover-left[popover] > .popover-arrow {
     right: -0.375rem;
     top: 50%;
     transform: translateY(-50%) rotate(45deg);
@@ -18073,19 +18303,7 @@
     border-bottom: none;
   }
 
-  /* Position: Right */
-  .popover-right .popover-content {
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%) scale(0.95);
-    margin-left: 0.75rem;
-  }
-
-  .popover-right.show .popover-content {
-    transform: translateY(-50%) scale(1);
-  }
-
-  .popover-right .popover-arrow {
+  .popover-right[popover] > .popover-arrow {
     left: -0.375rem;
     top: 50%;
     transform: translateY(-50%) rotate(45deg);
@@ -18093,7 +18311,14 @@
     border-top: none;
   }
 
-  /* Popover Header */
+  .popover-no-arrow > .popover-arrow {
+    display: none;
+  }
+
+  /* ========================================
+   * Structure
+   * ======================================== */
+
   .popover-header {
     display: flex;
     align-items: center;
@@ -18105,17 +18330,24 @@
 
   .popover-title {
     flex: 1;
+    min-width: 0;
+    margin: 0;
     font-size: 0.875rem;
     font-weight: 600;
+    line-height: 1.5rem;
     color: var(--color-on-surface);
   }
 
+  /* Prefer placing .popover-close inside .popover-header for aligned title + close */
   .popover-close {
-    display: flex;
+    display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     width: 1.5rem;
     height: 1.5rem;
+    margin-inline-start: auto;
+    padding: 0;
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
@@ -18124,6 +18356,18 @@
     transition: background-color 150ms ease-in-out;
   }
 
+  /* Fallback when close is a direct child of the popover (not in header) */
+  .popover[popover] > .popover-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    margin-inline-start: 0;
+  }
+
+  .popover[popover]:has(> .popover-close) > .popover-header {
+    padding-right: 1.75rem;
+  }
+
   .popover-close:hover {
     background-color: var(--color-surface-container);
   }
@@ -18133,14 +18377,12 @@
     box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
-  /* Popover Body */
   .popover-body {
     font-size: 0.875rem;
     color: var(--color-on-surface-variant);
     line-height: 1.5;
   }
 
-  /* Popover Footer */
   .popover-footer {
     display: flex;
     align-items: center;
@@ -18151,194 +18393,112 @@
     border-top: 1px solid var(--color-outline-variant);
   }
 
-  /* No Arrow Variant */
-  .popover-no-arrow .popover-arrow {
-    display: none;
-  }
+  /* ========================================
+   * Size variants
+   * ======================================== */
 
-  /* Size Variants */
-  .popover-sm .popover-content {
+  .popover-sm[popover] {
     min-width: 8rem;
     max-width: 14rem;
     padding: 0.75rem;
   }
 
-  .popover-lg .popover-content {
+  .popover-lg[popover] {
     min-width: 16rem;
     max-width: 28rem;
     padding: 1.25rem;
   }
 
-  .popover-full .popover-content {
+  .popover-full[popover] {
     min-width: 0;
     max-width: none;
     width: max-content;
   }
 
-  /* Color Variants */
-  /*
-   * Color intensity for themed popovers.
-   * Override this variable to adjust how strongly colors appear:
-   * - 20% = subtle tint
-   * - 30% = moderate (default)
-   * - 40% = bold/prominent
-   */
-  .popover {
-    --popover-color-intensity: 30%;
-  }
-
-  /* Dark variant */
-  .popover-dark .popover-content {
-    background-color: var(--color-on-surface);
-    color: var(--color-surface);
-    border-color: transparent;
-  }
+  /* ========================================
+   * Color variants
+   * ======================================== */
 
-  .popover-dark[class*="popover-top"],
-  .popover-dark[class*="popover-bottom"],
-  .popover-dark[class*="popover-left"],
-  .popover-dark[class*="popover-right"] {
+  .popover-dark[popover] {
     background-color: var(--color-on-surface);
     color: var(--color-surface);
     border-color: transparent;
   }
 
-  .popover-dark .popover-arrow {
+  .popover-dark[popover] > .popover-arrow {
     background-color: var(--color-on-surface);
     border-color: transparent;
   }
 
-  .popover-dark .popover-title {
+  .popover-dark[popover] .popover-title {
     color: var(--color-surface);
   }
 
-  .popover-dark .popover-body {
+  .popover-dark[popover] .popover-body {
     color: var(--color-surface);
     opacity: 0.9;
   }
 
-  /* Primary variant */
-  .popover-primary .popover-content {
-    background-color: color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface));
-    border-color: var(--color-primary);
-  }
-
-  .popover-primary[class*="popover-top"],
-  .popover-primary[class*="popover-bottom"],
-  .popover-primary[class*="popover-left"],
-  .popover-primary[class*="popover-right"] {
+  .popover-primary[popover] {
     background-color: color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface));
     border-color: var(--color-primary);
   }
 
-  .popover-primary .popover-arrow {
+  .popover-primary[popover] > .popover-arrow {
     background-color: color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface));
     border-color: var(--color-primary);
   }
 
-  .popover-primary .popover-body {
-    color: var(--color-on-surface);
-  }
-
-  .popover-primary .popover-title {
+  .popover-primary[popover] .popover-body,
+  .popover-primary[popover] .popover-title {
     color: var(--color-on-surface);
   }
 
-  /* Secondary variant */
-  .popover-secondary .popover-content {
-    background-color: color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface));
-    border-color: var(--color-secondary);
-  }
-
-  .popover-secondary[class*="popover-top"],
-  .popover-secondary[class*="popover-bottom"],
-  .popover-secondary[class*="popover-left"],
-  .popover-secondary[class*="popover-right"] {
+  .popover-secondary[popover] {
     background-color: color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface));
     border-color: var(--color-secondary);
   }
 
-  .popover-secondary .popover-arrow {
+  .popover-secondary[popover] > .popover-arrow {
     background-color: color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface));
     border-color: var(--color-secondary);
   }
 
-  .popover-secondary .popover-body {
-    color: var(--color-on-surface);
-  }
-
-  .popover-secondary .popover-title {
+  .popover-secondary[popover] .popover-body,
+  .popover-secondary[popover] .popover-title {
     color: var(--color-on-surface);
   }
 
-  /* Tertiary variant */
-  .popover-tertiary .popover-content {
-    background-color: color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface));
-    border-color: var(--color-tertiary);
-  }
-
-  .popover-tertiary[class*="popover-top"],
-  .popover-tertiary[class*="popover-bottom"],
-  .popover-tertiary[class*="popover-left"],
-  .popover-tertiary[class*="popover-right"] {
+  .popover-tertiary[popover] {
     background-color: color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface));
     border-color: var(--color-tertiary);
   }
 
-  .popover-tertiary .popover-arrow {
+  .popover-tertiary[popover] > .popover-arrow {
     background-color: color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface));
     border-color: var(--color-tertiary);
   }
 
-  .popover-tertiary .popover-body {
-    color: var(--color-on-surface);
-  }
-
-  .popover-tertiary .popover-title {
+  .popover-tertiary[popover] .popover-body,
+  .popover-tertiary[popover] .popover-title {
     color: var(--color-on-surface);
   }
 
-  /* Surface highest variant */
-  .popover-surface-highest .popover-content {
-    background-color: var(--color-surface-container-highest);
-    border-color: var(--color-outline-variant);
-  }
-
-  .popover-surface-highest[class*="popover-top"],
-  .popover-surface-highest[class*="popover-bottom"],
-  .popover-surface-highest[class*="popover-left"],
-  .popover-surface-highest[class*="popover-right"] {
+  .popover-surface-highest[popover] {
     background-color: var(--color-surface-container-highest);
     border-color: var(--color-outline-variant);
   }
 
-  .popover-surface-highest .popover-arrow {
+  .popover-surface-highest[popover] > .popover-arrow {
     background-color: var(--color-surface-container-highest);
     border-color: var(--color-outline-variant);
   }
 
-  /* Hover Trigger */
-  .popover-hover:hover .popover-content,
-  .popover-hover:focus-within .popover-content {
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-50%) scale(1);
-  }
-
-  .popover-hover.popover-bottom:hover .popover-content,
-  .popover-hover.popover-bottom:focus-within .popover-content {
-    transform: translateX(-50%) scale(1);
-  }
-
-  .popover-hover.popover-left:hover .popover-content,
-  .popover-hover.popover-left:focus-within .popover-content,
-  .popover-hover.popover-right:hover .popover-content,
-  .popover-hover.popover-right:focus-within .popover-content {
-    transform: translateY(-50%) scale(1);
-  }
+  /* ========================================
+   * Menu / confirm
+   * ======================================== */
 
-  /* Menu Popover */
-  .popover-menu .popover-content {
+  .popover-menu[popover] {
     padding: 0.5rem;
   }
 
@@ -18382,239 +18542,19 @@
     background-color: var(--color-outline-variant);
   }
 
-  /* Confirmation Popover */
-  .popover-confirm .popover-content {
+  .popover-confirm[popover] {
     text-align: center;
   }
 
-  .popover-confirm .popover-footer {
+  .popover-confirm[popover] .popover-footer {
     justify-content: center;
   }
 
   /* ========================================
-   * HTML Popover API Support
-   * Uses native [popover] attribute with :popover-open pseudo-class
-   * ======================================== */
-
-  /* Native popover base styles */
-  .popover[popover] {
-    position: fixed;
-    inset: unset;
-    z-index: 1050;
-    min-width: 12rem;
-    max-width: 20rem;
-    padding: 1rem;
-    margin: 0;
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline-variant);
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-lg);
-    opacity: 0;
-    transform: scale(0.95);
-    transition: opacity 150ms ease-out, transform 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
-  }
-
-  /* Popover open state */
-  .popover[popover]:popover-open {
-    opacity: 1;
-    visibility: visible;
-    transform: scale(1);
-  }
-
-  /* Starting state for entry animation */
-  @starting-style {
-    .popover[popover]:popover-open {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-
-  /* Native popover backdrop */
-  .popover[popover]::backdrop {
-    background-color: transparent;
-    transition: background-color 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
-  }
-
-  .popover[popover]:popover-open::backdrop {
-    background-color: color-mix(in srgb, var(--color-scrim) 10%, transparent);
-  }
-
-  @starting-style {
-    .popover[popover]:popover-open::backdrop {
-      background-color: transparent;
-    }
-  }
-
-  /* Native popover with modal backdrop */
-  .popover-modal[popover]::backdrop {
-    background-color: transparent;
-    transition: background-color 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
-  }
-
-  .popover-modal[popover]:popover-open::backdrop {
-    background-color: color-mix(in srgb, var(--color-scrim) 30%, transparent);
-  }
-
-  @starting-style {
-    .popover-modal[popover]:popover-open::backdrop {
-      background-color: transparent;
-    }
-  }
-
-  /* Native popover color variants */
-  .popover-primary[popover] {
-    background-color: color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface));
-    border-color: var(--color-primary);
-  }
-
-  .popover-primary[popover] .popover-body {
-    color: var(--color-on-surface);
-  }
-
-  .popover-primary[popover] .popover-title {
-    color: var(--color-on-surface);
-  }
-
-  .popover-secondary[popover] {
-    background-color: color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface));
-    border-color: var(--color-secondary);
-  }
-
-  .popover-secondary[popover] .popover-body {
-    color: var(--color-on-surface);
-  }
-
-  .popover-secondary[popover] .popover-title {
-    color: var(--color-on-surface);
-  }
-
-  .popover-tertiary[popover] {
-    background-color: color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface));
-    border-color: var(--color-tertiary);
-  }
-
-  .popover-tertiary[popover] .popover-body {
-    color: var(--color-on-surface);
-  }
-
-  .popover-tertiary[popover] .popover-title {
-    color: var(--color-on-surface);
-  }
-
-  .popover-dark[popover] {
-    background-color: var(--color-on-surface);
-    border-color: transparent;
-  }
-
-  .popover-dark[popover] .popover-body {
-    color: var(--color-surface);
-    opacity: 0.9;
-  }
-
-  .popover-dark[popover] .popover-title {
-    color: var(--color-surface);
-  }
-
-  .popover-surface-highest[popover] {
-    background-color: var(--color-surface-container-highest);
-    border-color: var(--color-outline-variant);
-  }
-
-  /* Native popover size variants */
-  .popover-sm[popover] {
-    min-width: 8rem;
-    max-width: 14rem;
-    padding: 0.75rem;
-  }
-
-  .popover-lg[popover] {
-    min-width: 16rem;
-    max-width: 28rem;
-    padding: 1.25rem;
-  }
-
-  .popover-full[popover] {
-    min-width: 0;
-    max-width: none;
-    width: max-content;
-  }
-
-  /* ========================================
-   * CSS Anchor Positioning
-   * Enables popovers to track their trigger element on scroll
-   * Usage: Add anchor-name CSS property to trigger, position-anchor to popover
+   * Reduce Motion
    * ======================================== */
 
-  /* Popover trigger anchor - use inline style or custom class to set anchor-name */
-  [popovertarget] {
-    /* Each trigger needs unique anchor-name, set via inline style:
-       style="anchor-name: --my-popover" */
-  }
-
-  /* Anchored popover positioning
-   * Uses anchor() functions instead of position-area to avoid
-   * a Chrome rendering bug at HiDPI (DPR>=2) where position-area
-   * computes correct CSS-pixel offsets but renders at physical-pixel
-   * coordinates, doubling the distance from the anchor. */
-  .popover[popover][style*="position-anchor"] {
-    inset: unset;
-    top: anchor(bottom);
-    justify-self: anchor-center;
-    margin-top: 0.5rem;
-  }
-
-  /* Position variants for anchored popovers */
-  .popover-top[popover][style*="position-anchor"] {
-    top: unset;
-    bottom: anchor(top);
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-  }
-
-  .popover-bottom[popover][style*="position-anchor"] {
-    top: anchor(bottom);
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-  }
-
-  .popover-left[popover][style*="position-anchor"] {
-    top: anchor(center);
-    right: anchor(left);
-    justify-self: unset;
-    translate: 0 -50%;
-    margin-top: 0;
-    margin-right: 0.5rem;
-  }
-
-  .popover-right[popover][style*="position-anchor"] {
-    top: anchor(center);
-    left: anchor(right);
-    justify-self: unset;
-    translate: 0 -50%;
-    margin-top: 0;
-    margin-left: 0.5rem;
-  }
-
-  /* Anchored popover alignment variants */
-  .popover-start[popover][style*="position-anchor"] {
-    justify-self: start;
-  }
-
-  .popover-end[popover][style*="position-anchor"] {
-    justify-self: end;
-  }
-
-  .popover-top.popover-start[popover][style*="position-anchor"] {
-    justify-self: start;
-  }
-
-  .popover-top.popover-end[popover][style*="position-anchor"] {
-    justify-self: end;
-  }
-
-  /* Reduce Motion */
   @media (prefers-reduced-motion: reduce) {
-    .popover-content,
     .popover-close,
     .popover-menu-item,
     .popover[popover],