@layer components {
  .ui-avatar {
    position: relative;
    display: inline-flex;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background:
      linear-gradient(var(--avatar-tint), var(--avatar-tint)),
      var(--avatar-background, hsl(var(--muted)));
    color: hsl(var(--muted-foreground));
    font-size: var(--avatar-font-size);
    font-weight: var(--font-weight-medium);
  }

  .ui-avatar[data-shape="square"] {
    inline-size: var(--avatar-square-size);
    block-size: var(--avatar-square-size);
    border-radius: var(--avatar-square-radius);
    --avatar-background: var(--avatar-square-background, hsl(var(--primary)));
    color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
  }

  .ui-avatar[data-appearance="tinted"] {
    --avatar-background: var(--avatar-tinted-background, hsl(var(--primary) / 0.1));
    color: var(--avatar-tinted-foreground, hsl(var(--primary)));
  }

  .ui-avatar[data-appearance="tinted"] svg {
    inline-size: var(--avatar-tinted-glyph-size);
    block-size: var(--avatar-tinted-glyph-size);
    flex: none;
  }

  .ui-avatar[data-size="xs"] {
    --avatar-size: var(--avatar-size-xs);
    --avatar-square-size: var(--avatar-size-xs);
    --avatar-font-size: var(--avatar-font-size-xs);
    --avatar-glyph-size: var(--avatar-glyph-size-xs);
    --avatar-tinted-glyph-size: var(--avatar-glyph-size-xs);
  }

  .ui-avatar[data-size="sm"] {
    --avatar-size: var(--avatar-size-sm);
    --avatar-square-size: var(--avatar-size-sm);
    --avatar-font-size: var(--avatar-font-size-sm);
    --avatar-glyph-size: var(--avatar-glyph-size-sm);
    --avatar-tinted-glyph-size: var(--avatar-glyph-size-sm);
  }

  .ui-avatar[data-size="lg"] {
    --avatar-size: var(--avatar-size-lg);
    --avatar-square-size: var(--avatar-size-lg);
    --avatar-font-size: var(--avatar-font-size-lg);
    --avatar-glyph-size: var(--avatar-glyph-size-lg);
    --avatar-tinted-glyph-size: var(--avatar-glyph-size-lg);
  }

  .ui-avatar[data-size] svg {
    inline-size: var(--avatar-glyph-size);
    block-size: var(--avatar-glyph-size);
    flex: none;
  }

  .ui-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ui-avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: var(--avatar-background, hsl(var(--muted)));
  }

  .ui-avatar[data-presence] {
    overflow: visible;
  }

  .ui-avatar[data-presence] > .ui-avatar-image,
  .ui-avatar[data-presence] > .ui-avatar-fallback {
    overflow: hidden;
    border-radius: inherit;
  }

  [data-slot="avatar-presence"] {
    position: absolute;
    inset-block-end: var(--avatar-presence-inset);
    inset-inline-end: var(--avatar-presence-inset);
    display: block;
    box-sizing: border-box;
    inline-size: var(--avatar-presence-size);
    block-size: var(--avatar-presence-size);
    min-inline-size: var(--avatar-presence-min-size);
    min-block-size: var(--avatar-presence-min-size);
    border: var(--avatar-presence-stroke-width) solid transparent;
    border-radius: var(--radius-pill);
    background-origin: border-box;

    box-shadow: 0 0 0 var(--avatar-presence-ring-width)
      hsl(var(--avatar-presence-ring-color, var(--background)));
  }

  [data-slot="avatar-presence"][data-presence="online"] {
    border-color: hsl(var(--avatar-presence-online-color, var(--success)));
    background-color: hsl(var(--avatar-presence-online-color, var(--success)));
  }

  [data-slot="avatar-presence"][data-presence="away"] {
    border-color: hsl(var(--avatar-presence-away-color, var(--warning)));
    background-color: hsl(var(--avatar-presence-ring-color, var(--background)));
    background-image: linear-gradient(
      to bottom,
      transparent 0 50%,
      hsl(var(--avatar-presence-away-color, var(--warning))) 50%
    );
  }

  [data-slot="avatar-presence"][data-presence="busy"] {
    border-color: hsl(var(--avatar-presence-busy-color, var(--destructive)));
    background-color: hsl(var(--avatar-presence-busy-color, var(--destructive)));
  }

  [data-slot="avatar-presence"][data-presence="busy"]::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: var(--avatar-presence-bar-inline-size);
    block-size: var(--avatar-presence-bar-block-size);
    border-radius: var(--radius-pill);
    background: hsl(var(--avatar-presence-ring-color, var(--background)));
  }

  [data-slot="avatar-presence"][data-presence="offline"] {
    border-color: hsl(var(--avatar-presence-offline-color, var(--muted-foreground)));
    background-color: hsl(var(--avatar-presence-ring-color, var(--background)));
  }

  @media (forced-colors: active) {
    [data-slot="avatar-presence"] {
      border-color: CanvasText;
      background-color: CanvasText;
      background-image: none;
      outline: var(--avatar-presence-ring-width) solid Canvas;
    }

    [data-slot="avatar-presence"][data-presence="away"] {
      background-image: linear-gradient(to bottom, Canvas 0 50%, CanvasText 50%);
    }

    [data-slot="avatar-presence"][data-presence="offline"] {
      background-color: Canvas;
    }

    [data-slot="avatar-presence"][data-presence="busy"]::before {
      background: Canvas;
    }
  }

  .ui-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .ui-progress-track {
    height: var(--progress-meter-block-size);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--progress-track-background, hsl(var(--secondary)));
  }

  .ui-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--progress-fill-background, hsl(var(--mark-success, var(--text-success))));
  }

  .ui-progress[data-tone="warning"] .ui-progress-bar {
    background: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-progress[data-tone="destructive"] .ui-progress-bar {
    background: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-progress[data-over] .ui-progress-bar {
    background-color: hsl(var(--mark-destructive, var(--text-error)));
    background-image: repeating-linear-gradient(
      45deg,
      hsl(var(--destructive-foreground) / 0.4) 0,
      hsl(var(--destructive-foreground) / 0.4) 0.3rem,
      transparent 0.3rem,
      transparent 0.6rem
    );
  }

  .ui-progress[data-breakdown] .ui-progress-track {
    display: flex;
    height: var(--progress-breakdown-block-size);
    border-radius: var(--progress-breakdown-radius);
  }

  .ui-progress[data-size="sm"] .ui-progress-track {
    height: var(--progress-meter-block-size-sm);
  }

  .ui-progress[data-breakdown][data-size="sm"] .ui-progress-track {
    height: var(--progress-breakdown-block-size-sm);
  }

  .ui-progress-segment {
    height: 100%;
  }

  .ui-progress-segment[data-tone="success"] {
    background: hsl(var(--mark-success, var(--text-success)));
  }

  .ui-progress-segment[data-tone="warning"] {
    background: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-progress-segment[data-tone="destructive"] {
    background: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-progress-label {
    color: hsl(var(--muted-foreground));
    font-size: var(--progress-label-font-size);
  }

  .ui-progress[data-shape="ring"] {
    display: inline-flex;
  }

  .ui-progress-ring {
    position: relative;
    display: inline-grid;
    inline-size: var(--progress-ring-size);
    block-size: var(--progress-ring-size);
    place-items: center;
  }

  .ui-progress[data-size="sm"] .ui-progress-ring {
    --progress-ring-size: var(--progress-ring-size-sm);
  }

  .ui-progress-ring-svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .ui-progress-ring-track,
  .ui-progress-ring-indicator {
    fill: none;
    stroke-width: var(--progress-ring-border-width);
  }

  .ui-progress-ring-track {
    stroke: var(--progress-track-background, hsl(var(--secondary)));
  }

  .ui-progress-ring-indicator {
    stroke: var(--progress-fill-background, hsl(var(--mark-success, var(--text-success))));

    stroke-linecap: butt;
  }

  .ui-progress[data-tone="warning"] .ui-progress-ring-indicator {
    stroke: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-progress[data-tone="destructive"] .ui-progress-ring-indicator {
    stroke: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-progress-ring-label {
    position: relative;
    color: hsl(var(--foreground));
    font-size: var(--progress-ring-label-font-size, calc(var(--progress-ring-size) * 0.28));
    font-variant-numeric: tabular-nums;

    line-height: var(--line-height-normal);

    max-inline-size: calc(
      var(--progress-ring-size) - 2 * var(--progress-ring-border-width) - var(--space-1)
    );
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-disclosure-chevron {
    transition: rotate var(--duration-fast) var(--ease-standard);
  }

  :is([data-state="open"], [aria-expanded="true"]) > .ui-disclosure-chevron,
  :is([data-state="open"], [aria-expanded="true"]) .ui-disclosure-chevron {
    rotate: 180deg;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-disclosure-chevron {
      transition: none;
    }
  }

  .ui-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--legend-gap);
    color: var(--legend-color, hsl(var(--muted-foreground)));
    font-size: var(--legend-font-size);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ui-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--legend-item-gap);
  }

  .ui-legend-swatch {
    flex: none;
    inline-size: var(--legend-swatch-size);
    block-size: var(--legend-swatch-size);
    border-radius: var(--legend-swatch-radius);
  }

  .ui-legend-swatch[data-tone="default"] {
    background: hsl(
      var(
        --mark-primary,
        var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels))
      )
    );
  }

  .ui-legend-swatch[data-tone="success"] {
    background: hsl(var(--mark-success, var(--text-success)));
  }

  .ui-legend-swatch[data-tone="warning"] {
    background: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-legend-swatch[data-tone="destructive"] {
    background: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-legend-swatch[data-tone="info"] {
    background: hsl(var(--mark-info, var(--text-info)));
  }

  .ui-legend-swatch[data-tone="muted"],
  .ui-legend-swatch[data-tone="neutral"] {
    background: hsl(var(--muted-foreground));
  }

  .ui-swatch {
    display: inline-block;
    flex: none;

    vertical-align: middle;
    inline-size: var(--swatch-size);
    block-size: var(--swatch-size);
    border-radius: var(--swatch-radius);
    background: var(--swatch-color);
    box-shadow: inset 0 0 0 var(--swatch-border-width)
      var(--swatch-border-color, hsl(var(--border)));
    forced-color-adjust: none;
  }

  .ui-feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--feature-list-space-gap);
  }

  .ui-feature-list-item {
    display: grid;
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--feature-list-space-inline);
    font-size: var(--feature-list-font-size);
    line-height: var(--line-height-body);
  }

  .ui-feature-list-mark {
    display: grid;
    block-size: 1lh;
    place-items: center;
    color: hsl(var(--muted-foreground));
  }

  .ui-feature-list-mark > svg {
    inline-size: var(--feature-list-mark-icon-size);
    block-size: var(--feature-list-mark-icon-size);
  }

  .ui-feature-list-item[data-state="included"] .ui-feature-list-mark {
    color: hsl(var(--mark-success, var(--text-success)));
  }

  .ui-feature-list-item[data-state="limited"] .ui-feature-list-mark {
    color: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-feature-list-item[data-state="excluded"] .ui-feature-list-label {
    color: hsl(var(--muted-foreground));
  }

  .ui-feature-list-body {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;

    overflow-wrap: anywhere;
  }

  .ui-feature-list-description {
    color: hsl(var(--muted-foreground));
    font-size: var(--feature-list-description-font-size);
  }

  .ui-thumbnail {
    display: block;

    inline-size: auto;

    max-inline-size: 100%;
    block-size: var(--thumbnail-block-size);
    border: var(--thumbnail-border-width) solid hsl(var(--border));
    border-radius: var(--thumbnail-radius);

    background: hsl(var(--muted));
    object-fit: contain;
  }

  .ui-thumbnail[data-size="sm"] {
    block-size: var(--thumbnail-block-size-sm);
  }

  .ui-thumbnail[data-size="lg"] {
    block-size: var(--thumbnail-block-size-lg);
  }

  .ui-timeline {
    display: flex;
    flex-direction: column;
  }

  .ui-timeline-item {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: var(--space-stack-md);
  }

  .ui-timeline-body {
    padding-bottom: var(--space-stack-md);
  }

  .ui-timeline-item:last-child .ui-timeline-body {
    padding-bottom: 0;
  }

  .ui-timeline-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ui-timeline-dot {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--timeline-dot-done-background, hsl(var(--primary)));
    color: var(--timeline-dot-done-foreground, hsl(var(--primary-foreground)));
    font-size: var(--timeline-note-font-size);
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }

  .ui-timeline-dot[data-status="done"] {
    background: var(--timeline-dot-done-background, hsl(var(--primary)));
    color: var(--timeline-dot-done-foreground, hsl(var(--primary-foreground)));
  }

  .ui-timeline-dot[data-status="current"],
  .ui-timeline-dot[data-current="true"] {
    background: var(--timeline-dot-current-background, hsl(var(--primary)));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 0 0 var(--timeline-dot-current-ring-width) hsl(var(--primary) / 0.2);
  }

  .ui-timeline-dot[data-status="pending"] {
    border-color: hsl(var(--border));
    background: hsl(var(--background));
    color: hsl(var(--muted-foreground));
  }

  .ui-timeline-dot svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .ui-timeline-pip {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: currentColor;
  }

  .ui-timeline-line {
    width: 1px;
    min-height: 2.25rem;
    flex: 1;
    background: hsl(var(--border));
  }

  .ui-timeline-line[data-completed="true"] {
    background: var(--timeline-line-completed-background, hsl(var(--primary)));
  }

  .ui-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-inline-sm);
  }

  .ui-timeline-title {

    min-inline-size: 0;
    flex: 1 1 0%;

    font-weight: var(--font-weight-medium);
  }

  .ui-timeline-title[data-current="true"] {
    color: hsl(var(--primary));
    font-weight: var(--font-weight-semibold);
  }

  .ui-timeline-time,
  .ui-timeline-location,
  .ui-timeline-note {
    color: hsl(var(--muted-foreground));
    font-size: var(--timeline-note-font-size);
  }

  .ui-timeline-note {
    margin-top: var(--space-1);
    font-size: var(--font-size-base);
  }
}

.ui-accordion-item {
  border-bottom: 1px solid hsl(var(--border));
}
.ui-accordion-header {
  display: flex;
}
.ui-accordion-trigger {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-4);
  font-weight: 500;
  text-align: start;
  transition: color 0.15s ease;
}
.ui-accordion-trigger:hover {
  text-decoration: underline;
}
.ui-accordion-trigger:focus-visible {
  border-radius: var(--radius-sm);
}
.ui-accordion-trigger:disabled,
.ui-accordion-trigger[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.ui-accordion-chevron {
  width: var(--accordion-chevron-size);
  height: var(--accordion-chevron-size);
  color: hsl(var(--muted-foreground));
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ui-accordion-trigger[data-state="open"] .ui-accordion-chevron {
  transform: rotate(180deg);
}
.ui-accordion-content {
  overflow: hidden;
  font-size: var(--font-size-base);
}
.ui-accordion-content-inner {
  padding-bottom: var(--space-4);
}

.ui-hover-card-content {
  z-index: 50;
  width: 16rem;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  outline: none;
}

.ui-carousel {
  position: relative;
}

.ui-carousel-viewport {
  overflow: clip;
  overflow-clip-margin: var(--focus-ring-clip-margin);
}

.ui-carousel-content {
  display: flex;
  margin-inline: calc(var(--space-4) * -1);
}

.ui-carousel-item {
  position: relative;
  min-width: 100%;
  padding-inline: var(--space-4);
}

.ui-carousel-previous,
.ui-carousel-next {
  position: absolute;
  top: 50%;
  z-index: 20;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  transition: background-color 150ms ease;
  transform: translateY(-50%);
}

.ui-carousel-previous {
  inset-inline-start: var(--space-2);
}

.ui-carousel-next {
  inset-inline-end: var(--space-2);
}

.ui-carousel-previous:hover,
.ui-carousel-next:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.ui-carousel-arrow {
  width: var(--carousel-arrow-icon-size);
  height: var(--carousel-arrow-icon-size);
}

.ui-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 0;
  padding-top: var(--space-4);
}

.ui-carousel-dot {
  display: grid;
  min-inline-size: var(--touch-target-min);
  min-block-size: var(--touch-target-min);
  flex-shrink: 0;
  place-items: center;
  background: transparent;
}

.ui-carousel-dot::after {
  content: "";
  display: block;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: hsl(var(--border));
  transition:
    width 150ms ease,
    background-color 150ms ease;
}

.ui-carousel-dot:hover::after {
  background: hsl(var(--muted-foreground));
}

.ui-carousel-dot[data-active]::after {
  width: var(--space-5);
  background: hsl(var(--primary));
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-dots {
  flex-direction: column;
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-dot[data-active]::after {
  width: var(--space-2);
  height: var(--space-5);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-content {
  flex-direction: column;
  margin-inline: 0;
  margin-block: calc(var(--space-4) * -1);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-item {
  min-width: 0;
  min-height: 100%;
  padding-inline: 0;
  padding-block: var(--space-4);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-previous,
.ui-carousel[data-orientation="vertical"] .ui-carousel-next {
  top: auto;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-previous {
  top: var(--space-2);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-next {
  bottom: var(--space-2);
}

@layer components {

  [data-slot="list-row"] {
    display: flex;
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--list-row-gap);
    padding: var(--list-row-padding-y) var(--list-row-padding-x);
    background: var(--list-row-read-background, transparent);
  }

  [data-slot="list-row"][data-unread] {
    background: var(--list-row-unread-background, hsl(var(--muted)));
  }
  [data-slot="list-row"][data-align="start"] {
    align-items: flex-start;
  }
  [data-slot="list-row"]:not(:last-child) {
    border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
  }

  [data-slot="list-row-item"] {
    display: block;
    list-style: none;
  }
  [data-slot="list-row-item"]:not(:last-child) {
    border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
  }
  [data-slot="list-row-indicator"] {
    position: relative;
    display: block;
    flex-shrink: 0;
    inline-size: var(--list-row-indicator-size);
    block-size: var(--list-row-indicator-size);
    border-radius: var(--radius-pill);

    background: transparent;
  }
  [data-slot="list-row"][data-unread] [data-slot="list-row-indicator"] {
    background: hsl(var(--list-row-indicator-color, var(--primary)));
  }
  [data-slot="list-row-leading"] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  [data-slot="list-row-leading"] > svg:not([class*="size-"]) {
    width: var(--list-row-leading-icon-size, var(--control-icon-size));
    height: var(--list-row-leading-icon-size, var(--control-icon-size));
  }
  [data-slot="list-row-body"] {
    display: flex;
    min-inline-size: min(var(--list-row-body-min-width, 12rem), 100%);
    flex: 1 1 var(--list-row-body-min-width, 12rem);
    flex-direction: column;
  }

  [data-slot="list-row"][data-overflow="wrap"] [data-slot="list-row-body"] {
    overflow-wrap: anywhere;
  }
  [data-slot="list-row"][data-density="compact"] {
    gap: var(--list-row-compact-gap, var(--space-2));
    padding: var(--list-row-compact-padding-y, var(--space-2))
      var(--list-row-compact-padding-x, var(--list-row-padding-x));
  }
  [data-slot="list-row"][data-density="compact"] [data-slot="list-row-body"] {
    min-inline-size: min(var(--list-row-compact-body-min-width, 6rem), 100%);
    flex-basis: var(--list-row-compact-body-min-width, 6rem);
  }
  [data-slot="list-row-trailing"] {
    display: inline-flex;
    max-inline-size: 100%;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--list-row-trailing-gap, var(--space-2));
    margin-inline-start: auto;
  }

  @media (max-width: 359px) {
    [data-slot="list-row"] {
      flex-wrap: wrap;
    }

    [data-slot="list-row-trailing"] {
      width: 100%;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
  }

  .ui-credential-reveal {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-sm);
  }
  .ui-credential-reveal-warning {
    margin-block-end: var(--space-1);
  }
  .ui-credential-reveal-surface {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .ui-credential-reveal-label {
    display: inline-block;
  }
  .ui-credential-reveal-row {
    display: flex;
    align-items: center;
    gap: var(--space-inline-sm);
    min-height: var(--control-height);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border: 1px solid hsl(var(--border));
    border-radius: var(--control-radius);
    background: hsl(var(--muted) / 0.4);
  }
  .ui-credential-reveal-secret {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: 0.02em;
    word-break: break-all;
  }
  .ui-credential-reveal-secret[data-state="masked"] {
    color: hsl(var(--muted-foreground));
  }
  .ui-credential-reveal-actions {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-inline-xs);
  }
  .ui-credential-reveal-footer {
    display: flex;
    justify-content: flex-end;
  }

  .ui-qr-code {
    display: block;
    inline-size: var(--qr-code-size-md);
    block-size: auto;
    max-inline-size: 100%;
    aspect-ratio: 1;
  }
  .ui-qr-code[data-size="xs"] {
    inline-size: var(--qr-code-size-xs);
  }
  .ui-qr-code[data-size="sm"] {
    inline-size: var(--qr-code-size-sm);
  }
  .ui-qr-code[data-size="lg"] {
    inline-size: var(--qr-code-size-lg);
  }
}

@layer components {
  .ui-permission-matrix-table {
    min-inline-size: var(--permission-matrix-min-width);
  }

  .ui-permission-matrix .ui-permission-matrix-pin {
    position: sticky;
    inset-inline-start: 0;

    z-index: 20;
    background-color: inherit;
    border-inline-end: 1px solid hsl(var(--border));
    inline-size: var(--permission-matrix-label-width);
    min-inline-size: var(--permission-matrix-label-width);
  }

  .ui-permission-matrix-role {
    display: inline-flex;
    align-items: center;
    gap: var(--permission-matrix-role-space-gap);
  }

  .ui-permission-matrix-name {
    display: inline-flex;
    align-items: center;
    gap: var(--permission-matrix-name-space-gap);
  }

  .ui-permission-matrix-cell-icon {
    inline-size: var(--permission-matrix-cell-icon-size);
    block-size: var(--permission-matrix-cell-icon-size);
  }
}

@layer components {

  .ui-scroll-area {
    position: relative;
    scrollbar-width: var(--scroll-area-scrollbar-width);
    scrollbar-color: var(--scroll-area-thumb-color, hsl(var(--border)))
      var(--scroll-area-track-color, transparent);
    scrollbar-gutter: var(--scroll-area-scrollbar-space);
  }

  .ui-scroll-area[data-orientation="vertical"] {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ui-scroll-area[data-orientation="horizontal"] {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ui-scroll-area[data-orientation="both"] {
    overflow: auto;
  }

  .ui-scroll-area[data-scrollbar="always"] {
    scrollbar-width: auto;
  }

  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar {
    inline-size: var(--scroll-area-always-bar-size);
    block-size: var(--scroll-area-always-bar-size);
  }

  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar-track {
    background: var(--scroll-area-track-color, transparent);
  }

  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar-thumb {
    background: var(--scroll-area-thumb-color, hsl(var(--border)));
    border-radius: var(--scroll-area-always-thumb-radius);
  }

  .ui-scroll-area:is([data-orientation="horizontal"], [data-orientation="both"])
    > .ui-scroll-area-content {
    inline-size: max-content;
    min-inline-size: 100%;
  }
}

@layer components {

  :is(.ui-code-block, .ui-prose pre) {
    margin: 0;
    overflow: auto;
    border-radius: var(--code-block-radius);
    background: hsl(var(--muted));
    padding: var(--code-block-space-inset);
    color: var(--code-block-foreground, hsl(var(--foreground)));
    font-family: var(--font-mono);
    font-size: var(--code-block-font-size);
    line-height: var(--code-block-line-height);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
  }

  :is(.ui-code-block, .ui-prose pre) > code {
    font: inherit;
    background: transparent;
    padding: 0;
  }

  .ui-code-block[data-wrap="false"] {
    white-space: pre;
    overflow-wrap: normal;
  }

  .ui-code-block[data-size="xs"] {
    font-size: var(--code-block-font-size-xs);
  }

  .ui-code-block[data-max-height="sm"] {
    max-block-size: var(--code-block-max-height-sm);
  }

  .ui-code-block[data-max-height="md"] {
    max-block-size: var(--code-block-max-height-md);
  }

  .ui-code-block[data-max-height="lg"] {
    max-block-size: var(--code-block-max-height-lg);
  }

  .ui-code-block [data-code-token="comment"],
  .ui-prose pre [data-code-token="comment"] {
    color: var(--code-block-token-comment-color, hsl(var(--muted-foreground)));
  }

  .ui-code-block [data-code-token="keyword"],
  .ui-prose pre [data-code-token="keyword"] {
    color: var(--code-block-token-keyword-color, hsl(var(--primary)));
  }

  .ui-code-block [data-code-token="string"],
  .ui-prose pre [data-code-token="string"] {
    color: var(--code-block-token-string-color, hsl(var(--text-success)));
  }

  .ui-code-block [data-code-token="string-expression"],
  .ui-prose pre [data-code-token="string-expression"] {
    color: var(--code-block-token-string-expression-color, hsl(var(--text-success)));
  }

  .ui-code-block [data-code-token="function"],
  .ui-prose pre [data-code-token="function"] {
    color: var(--code-block-token-function-color, hsl(var(--text-info)));
  }

  .ui-code-block [data-code-token="constant"],
  .ui-prose pre [data-code-token="constant"] {
    color: var(--code-block-token-constant-color, hsl(var(--text-warning)));
  }

  .ui-code-block [data-code-token="parameter"],
  .ui-prose pre [data-code-token="parameter"] {
    color: var(--code-block-token-parameter-color, hsl(var(--foreground)));
  }

  .ui-code-block [data-code-token="punctuation"],
  .ui-prose pre [data-code-token="punctuation"] {
    color: var(--code-block-token-punctuation-color, hsl(var(--muted-foreground)));
  }

  .ui-code-block [data-code-token="link"],
  .ui-prose pre [data-code-token="link"] {
    color: var(
      --code-block-token-link-color,
      hsl(var(--text-link, from hsl(var(--primary)) var(--text-link-channels)))
    );
    text-decoration-line: underline;

    text-underline-offset: var(--text-link-underline-offset);
    text-decoration-skip-ink: auto;
  }

  .ui-code-block [data-code-token="inserted"],
  .ui-prose pre [data-code-token="inserted"] {
    color: var(--code-block-token-inserted-color, hsl(var(--text-success)));
  }

  .ui-code-block [data-code-token="deleted"],
  .ui-prose pre [data-code-token="deleted"] {
    color: var(--code-block-token-deleted-color, hsl(var(--text-error)));
  }

  .ui-code-block [data-code-token="changed"],
  .ui-prose pre [data-code-token="changed"] {
    color: var(--code-block-token-changed-color, hsl(var(--text-warning)));
  }

  .ui-prose {
    font-size: var(--prose-font-size);
    line-height: var(--prose-line-height);
    overflow-wrap: anywhere;
  }

  .ui-prose[data-size="sm"] {
    font-size: var(--prose-font-size-sm);
  }

  .ui-prose[data-image-size="original"] {
    overflow-x: auto;
  }

  .ui-prose > * {
    margin-block: 0;
  }

  .ui-prose > * + * {
    margin-block-start: var(--prose-space-block);
  }

  .ui-prose :is(h1, h2, h3, h4) {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-wrap: balance;
  }

  .ui-prose > :is(h1, h2, h3, h4) + * {
    margin-block-start: var(--prose-space-block);
  }

  .ui-prose > * + :is(h1, h2, h3, h4) {
    margin-block-start: var(--prose-heading-space-block-start);
  }

  .ui-prose h1 {
    font-size: var(
      --heading-h1,
      calc(
        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
          var(--font-size-ratio)
      )
    );
  }

  .ui-prose h2 {
    font-size: var(
      --heading-h2,
      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
    );
  }

  .ui-prose h3 {
    font-size: var(--heading-h3, var(--font-size-base));
  }

  .ui-prose h4 {
    font-size: var(
      --heading-h4,
      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
    );
  }

  .ui-prose :is(ul, ol) {
    padding-inline-start: var(--prose-list-space-inline);
  }

  .ui-prose ul {
    list-style: disc;
  }

  .ui-prose ol {
    list-style: decimal;
  }

  .ui-prose li + li {
    margin-block-start: var(--prose-list-item-space);
  }

  .ui-prose li > :is(ul, ol) {
    margin-block-start: var(--prose-list-item-space);
  }

  .ui-prose blockquote {
    border-inline-start: var(--prose-quote-border-width) solid hsl(var(--border));
    padding-inline-start: var(--prose-quote-space-inline);
    color: hsl(var(--muted-foreground));
  }

  .ui-prose :not(pre) > code {
    font-family: var(--font-mono);
    font-size: var(--prose-code-font-size);
    background: hsl(var(--muted));
    padding-inline: var(--prose-code-space-inline);
    border-radius: var(--prose-code-radius);
  }

  .ui-prose a {
    color: hsl(var(--prose-link-color, var(--primary)));
    text-decoration-line: var(--prose-link-decoration-line);
  }

  .ui-prose table {
    inline-size: 100%;
    border-collapse: collapse;
  }

  .ui-prose :is(th, td) {
    border: var(--stroke-hairline) solid hsl(var(--border));
    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
    text-align: start;
    vertical-align: top;
  }

  .ui-prose th {
    font-weight: var(--font-weight-medium);
    background: hsl(var(--muted));
  }

  .ui-prose img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--prose-image-radius);
  }

  .ui-prose[data-image-size="original"] img {
    max-inline-size: none;
  }

  .ui-prose hr {
    border: 0;
    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
  }
}

@layer components {
  .ui-timeline-grid {
    overflow-x: auto;
  }

  .ui-timeline-grid-frame {
    display: grid;
    grid-template-columns:
      var(--timeline-grid-axis-width)
      repeat(var(--timeline-grid-columns, 1), minmax(var(--timeline-grid-column-min-width), 1fr));
  }

  .ui-timeline-grid-corner {
    border-block-end: 1px solid hsl(var(--border));
  }

  .ui-timeline-grid-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-1);
    border-block-end: 1px solid hsl(var(--border));
    border-inline-start: 1px solid hsl(var(--border));
    background: hsl(var(--secondary));
    font-size: var(--timeline-grid-head-font-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-align: center;
  }

  .ui-timeline-grid-head[data-current="true"] {
    background: var(--timeline-grid-current-tint, hsl(var(--primary) / 0.08));
  }

  .ui-timeline-grid-head-description {
    color: hsl(var(--muted-foreground));
    font-size: var(--timeline-grid-axis-font-size);
    font-weight: var(--font-weight-normal);
  }

  .ui-timeline-grid-axis,
  .ui-timeline-grid-column {
    position: relative;
    block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-hours, 24));
  }

  .ui-timeline-grid-tick {
    position: absolute;
    inset-inline-end: var(--space-1);
    inset-block-start: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-tick-offset, 0));
    color: hsl(var(--muted-foreground));
    font-size: var(--timeline-grid-axis-font-size);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transform: translateY(-50%);
    white-space: nowrap;
  }

  .ui-timeline-grid-column {
    margin: 0;
    padding: 0;
    border-inline-start: 1px solid hsl(var(--border));
    background-image: repeating-linear-gradient(
      to bottom,
      var(--timeline-grid-line-color, hsl(var(--border))) 0 1px,
      transparent 1px calc(var(--timeline-grid-hour-height) * var(--timeline-grid-interval, 1))
    );
    list-style: none;
  }

  .ui-timeline-grid-column[data-current="true"] {
    background-color: var(--timeline-grid-current-tint, hsl(var(--primary) / 0.05));
  }

  .ui-timeline-grid-event {
    position: absolute;
    inset-block-start: calc(
      var(--timeline-grid-hour-height) * var(--timeline-grid-event-offset, 0)
    );
    inset-inline-start: calc(
      var(--timeline-grid-event-lane, 0) / var(--timeline-grid-event-lanes, 1) * 100%
    );
    box-sizing: border-box;
    inline-size: calc(100% / var(--timeline-grid-event-lanes, 1));
    block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-event-span, 0));
    min-block-size: calc(
      var(--timeline-grid-hour-height) * var(--timeline-grid-event-min-height-minutes) / 60
    );
    padding-inline-end: var(--timeline-grid-event-gap);
    padding-block-end: var(--timeline-grid-event-gap);
  }

  .ui-timeline-grid-event-body {
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    flex-direction: column;
    inline-size: 100%;
    block-size: 100%;
    padding: var(--timeline-grid-event-space-inset);
    border-inline-start: var(--timeline-grid-event-border-width) solid
      var(--timeline-grid-event-color, hsl(var(--primary)));
    border-radius: var(--timeline-grid-event-radius);

    background-color: color-mix(
      in srgb,
      hsl(var(--background)),
      var(--timeline-grid-event-color, hsl(var(--primary))) 12%
    );
    color: hsl(var(--foreground));
    font-size: var(--timeline-grid-event-font-size);

    line-height: var(--line-height-normal);
    text-align: start;
  }

  .ui-timeline-grid-event[data-clipped="start"] .ui-timeline-grid-event-body,
  .ui-timeline-grid-event[data-clipped="both"] .ui-timeline-grid-event-body {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  .ui-timeline-grid-event[data-clipped="end"] .ui-timeline-grid-event-body,
  .ui-timeline-grid-event[data-clipped="both"] .ui-timeline-grid-event-body {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .ui-timeline-grid-event-time {
    color: var(--timeline-grid-event-muted-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ui-timeline-grid-event-title {
    overflow: hidden;
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-timeline-grid-event-description {
    overflow: hidden;
    color: var(--timeline-grid-event-muted-color);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  button.ui-timeline-grid-event-body {
    cursor: pointer;
  }

  button.ui-timeline-grid-event-body:hover {
    background-color: color-mix(
      in srgb,
      hsl(var(--background)),
      var(--timeline-grid-event-color, hsl(var(--primary))) 20%
    );
  }

  .ui-timeline-grid-now {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-now-offset, 0));
    block-size: var(--timeline-grid-now-width);
    background: var(--timeline-grid-now-color, hsl(var(--destructive)));
    pointer-events: none;
  }
}

@layer components {
  a.ui-list-row {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  a.ui-list-row:hover {
    background: hsl(var(--muted));
  }
  a.ui-list-row[aria-current="page"] {

    background: hsl(var(--accent));
    box-shadow: inset var(--space-1) 0 0 hsl(var(--primary));
  }
  [dir="rtl"] a.ui-list-row[aria-current="page"] {
    box-shadow: inset calc(-1 * var(--space-1)) 0 0 hsl(var(--primary));
  }
}

@layer components {
  .ui-range-timeline {
    overflow: auto;
    border: 1px solid hsl(var(--range-timeline-border-color));
    border-radius: var(--radius-md);
  }
  .ui-range-timeline-canvas {
    min-inline-size: calc(
      var(--range-timeline-label-width) + var(--range-timeline-columns, 1) *
        var(--range-timeline-unit-width)
    );
  }
  .ui-range-timeline-header,
  .ui-range-timeline-row {
    display: grid;
    grid-template-columns: var(--range-timeline-label-width) minmax(0, 1fr);
    min-block-size: var(--range-timeline-row-height);
  }
  .ui-range-timeline-header {
    background: hsl(var(--muted));
  }
  .ui-range-timeline-label {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: hsl(var(--card));
    padding: var(--space-2);
    border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
  }

  .ui-range-timeline-columns {
    display: grid;
    grid-template-columns: repeat(var(--range-timeline-units, 1), minmax(0, 1fr));
  }

  .ui-range-timeline-column {
    min-inline-size: 0;
    overflow: hidden;
    padding: var(--space-2);
    padding-inline-start: calc(var(--space-2) + var(--range-timeline-grid-width));
    text-align: center;
    border-inline-end: var(--range-timeline-grid-width) solid
      hsl(var(--range-timeline-border-color));
  }
  .ui-range-timeline-track {
    position: relative;
    min-inline-size: 0;
  }

  .ui-range-timeline-body {
    position: relative;
    isolation: isolate;
  }
  .ui-range-timeline-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    grid-template-columns: var(--range-timeline-label-width) minmax(0, 1fr);
    pointer-events: none;
  }
  .ui-range-timeline-grid-column {
    min-inline-size: 0;
    padding-inline: var(--space-2);
    border-inline-end: var(--range-timeline-grid-width) solid transparent;
  }
  .ui-range-timeline-grid-column[data-muted="true"] {
    background: var(--range-timeline-muted-column-background, hsl(var(--muted)));
  }

  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-column,
  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-label,
  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-grid-column {
    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--border)));
  }
  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-header + .ui-range-timeline-header,
  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-row {
    border-block-start: var(--range-timeline-grid-width) solid
      var(--range-timeline-grid-color, hsl(var(--border)));
  }

  .ui-range-timeline[data-density="compact"] {
    --range-timeline-unit-width: var(--range-timeline-unit-width-compact);
  }
  .ui-range-timeline[data-density="comfortable"] {
    --range-timeline-unit-width: var(--range-timeline-unit-width-comfortable);
  }
  .ui-range-timeline-outside {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-inline: var(--space-2);
    color: hsl(var(--muted-foreground));
  }
  .ui-range-timeline-outside[data-direction="before"] {
    inset-inline-start: 0;
  }
  .ui-range-timeline-outside[data-direction="after"] {
    inset-inline-end: 0;
  }
  .ui-range-timeline-outside-icon {
    inline-size: var(--icon-size-sm);
    block-size: var(--icon-size-sm);
    flex-shrink: 0;
  }

  [dir="rtl"] .ui-range-timeline-outside-icon {
    transform: scaleX(-1);
  }
  .ui-range-timeline-bar {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: var(--range-timeline-bar-height);
    border-radius: var(--radius-sm);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }
  .ui-range-timeline-handle {
    position: absolute;
    inset-block: 0;
    min-inline-size: 0;
    inline-size: var(--control-height-sm);
    block-size: 100%;
    padding: 0;
    color: inherit;
    touch-action: none;
    cursor: ew-resize;
  }
  .ui-range-timeline-handle[data-edge="start"] {
    inset-inline-start: 0;
  }
  .ui-range-timeline-handle[data-edge="end"] {
    inset-inline-end: 0;
  }
  .ui-range-timeline-today {
    position: absolute;
    inset-block: 0;
    border-inline-start: 1px solid hsl(var(--primary));
  }

  .ui-range-timeline-label[data-nested="true"] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-inline-start: calc(
      var(--space-2) + var(--range-timeline-depth, 0) * var(--range-timeline-indent-width)
    );
  }
  .ui-range-timeline-label-content {
    flex: 1;
    min-inline-size: 0;
  }
  .ui-range-timeline-disclosure,
  .ui-range-timeline-disclosure-spacer {
    flex-shrink: 0;
  }
  .ui-range-timeline-disclosure-spacer {
    inline-size: var(--control-height-xs);
  }

  @media (pointer: coarse) {
    .ui-range-timeline-disclosure-spacer {
      inline-size: var(--control-height-default);
    }
  }

  [dir="rtl"] .ui-range-timeline-disclosure-collapsed {
    transform: scaleX(-1);
  }
}

@layer components {

  [data-slot="descriptions"][data-columns-responsive] {
    --descriptions-column-count: var(--descriptions-column-count-base, 1);
    grid-template-columns: repeat(var(--descriptions-column-count), minmax(0, 1fr));
  }

  [data-slot="descriptions-item"][data-span-responsive] {
    --descriptions-item-span: var(--descriptions-item-span-base, 1);
    grid-column: span var(--descriptions-item-span) / span var(--descriptions-item-span);
  }

  [data-slot="descriptions-item"][data-span="filled"] {
    grid-column: 1 / -1;
  }

  [data-slot="descriptions"]:not([data-bordered]) [data-slot="descriptions-item"] {
    border-block-end: var(--descriptions-row-border);
    min-block-size: var(--descriptions-row-min-height);

    align-content: center;
  }

  [data-slot="descriptions"][data-bordered] {
    gap: 0;
    border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
    border-block-end: var(--descriptions-border-width) solid hsl(var(--border));
    border-radius: var(--descriptions-border-radius);
    overflow: hidden;
  }

  [data-slot="descriptions"][data-bordered] [data-slot="descriptions-item"] {
    gap: 0;
    border-block-start: var(--descriptions-border-width) solid hsl(var(--border));
    border-inline-start: var(--descriptions-border-width) solid hsl(var(--border));
  }

  [data-slot="descriptions"][data-bordered]
    :is([data-slot="descriptions-label"], [data-slot="descriptions-value"]) {
    padding: var(--descriptions-cell-padding-y) var(--descriptions-cell-padding-x);
  }

  [data-slot="descriptions"][data-bordered] [data-slot="descriptions-label"] {
    background-color: var(--descriptions-label-background, hsl(var(--muted)));
  }

  [data-slot="descriptions"][data-bordered]
    [data-slot="descriptions-item"][data-layout="horizontal"]
    [data-slot="descriptions-label"] {
    border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
  }
}

@layer godxjp-ui-responsive {

  @media (min-width: 640px) {
    [data-slot="descriptions"][data-columns-responsive] {
      --descriptions-column-count: var(
        --descriptions-column-count-sm,
        var(--descriptions-column-count-base, 1)
      );
    }

    [data-slot="descriptions-item"][data-span-responsive] {
      --descriptions-item-span: var(
        --descriptions-item-span-sm,
        var(--descriptions-item-span-base, 1)
      );
    }
  }

  @media (min-width: 768px) {
    [data-slot="descriptions"][data-columns-responsive] {
      --descriptions-column-count: var(
        --descriptions-column-count-md,
        var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
      );
    }

    [data-slot="descriptions-item"][data-span-responsive] {
      --descriptions-item-span: var(
        --descriptions-item-span-md,
        var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
      );
    }
  }

  @media (min-width: 1024px) {
    [data-slot="descriptions"][data-columns-responsive] {
      --descriptions-column-count: var(
        --descriptions-column-count-lg,
        var(
          --descriptions-column-count-md,
          var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
        )
      );
    }

    [data-slot="descriptions-item"][data-span-responsive] {
      --descriptions-item-span: var(
        --descriptions-item-span-lg,
        var(
          --descriptions-item-span-md,
          var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
        )
      );
    }
  }

  @media (min-width: 1280px) {
    [data-slot="descriptions"][data-columns-responsive] {
      --descriptions-column-count: var(
        --descriptions-column-count-xl,
        var(
          --descriptions-column-count-lg,
          var(
            --descriptions-column-count-md,
            var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
          )
        )
      );
    }

    [data-slot="descriptions-item"][data-span-responsive] {
      --descriptions-item-span: var(
        --descriptions-item-span-xl,
        var(
          --descriptions-item-span-lg,
          var(
            --descriptions-item-span-md,
            var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
          )
        )
      );
    }
  }
}

@layer components {
  .ui-text[data-decoration="line-through"] {
    text-decoration: line-through;
  }
  .ui-text[data-decoration="underline"] {
    text-decoration: underline;
  }
  .ui-text[data-decoration="none"] {
    text-decoration: none;
  }
  .ui-text[data-chip] {
    background: hsl(var(--muted));
    border-radius: var(--prose-code-radius);
    padding-inline: var(--prose-code-space-inline);
    font-size: var(--prose-code-font-size);
  }
}

@layer components {

  .ui-chat-bubble {
    display: flex;
    align-items: flex-start;
    gap: var(--chat-bubble-gap);
    min-inline-size: 0;
  }

  .ui-chat-bubble[data-placement="end"] {
    flex-direction: row-reverse;
  }

  .ui-chat-bubble-avatar {
    display: inline-flex;
    flex: none;
    inline-size: var(--chat-bubble-avatar-size, var(--control-height));
    block-size: var(--chat-bubble-avatar-size, var(--control-height));
  }

  .ui-chat-bubble-avatar > .ui-avatar {
    inline-size: 100%;
    block-size: 100%;
  }

  .ui-chat-bubble-column {
    display: flex;
    min-inline-size: 0;
    max-inline-size: min(var(--chat-bubble-max-inline-size), 100%);
    flex-direction: column;
    gap: var(--space-1);
  }

  .ui-chat-bubble[data-placement="end"] .ui-chat-bubble-column {
    align-items: flex-end;
  }

  .ui-chat-bubble-body {
    min-inline-size: 0;
    border-radius: var(--chat-bubble-radius);
    padding-block: var(--chat-bubble-padding-block);
    padding-inline: var(--chat-bubble-padding-inline);
    background: var(--chat-bubble-background, hsl(var(--muted)));
    color: var(--chat-bubble-foreground, hsl(var(--foreground)));

    overflow-wrap: anywhere;
  }

  .ui-chat-bubble[data-variant="outlined"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid var(--chat-bubble-border-color, hsl(var(--border)));
    background: transparent;
  }

  .ui-chat-bubble[data-variant="borderless"] .ui-chat-bubble-body {
    background: transparent;
  }

  .ui-chat-bubble[data-variant="borderless"][data-tone="default"] .ui-chat-bubble-body {
    padding-inline: 0;
  }

  .ui-chat-bubble[data-placement="end"][data-variant="filled"] .ui-chat-bubble-body {
    background: var(--chat-bubble-end-background, hsl(var(--primary) / 0.1));
    color: var(--chat-bubble-end-foreground, hsl(var(--foreground)));
  }

  .ui-chat-bubble[data-size="xs"] {
    --chat-bubble-padding-block: var(--space-1);
    --chat-bubble-padding-inline: var(--space-2);
  }

  .ui-chat-bubble[data-size="sm"] {
    --chat-bubble-padding-block: var(--space-1);
    --chat-bubble-padding-inline: var(--space-3);
  }

  .ui-chat-bubble[data-size="lg"] {
    --chat-bubble-padding-block: var(--space-3);
    --chat-bubble-padding-inline: var(--space-4);
  }

  .ui-chat-bubble[data-tone="info"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid hsl(var(--info) / var(--chat-bubble-tone-border-alpha));
    background: hsl(var(--info) / var(--chat-bubble-tone-background-alpha));
  }

  .ui-chat-bubble[data-tone="success"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid hsl(var(--success) / var(--chat-bubble-tone-border-alpha));
    background: hsl(var(--success) / var(--chat-bubble-tone-background-alpha));
  }

  .ui-chat-bubble[data-tone="warning"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid hsl(var(--warning) / var(--chat-bubble-tone-border-alpha));
    background: hsl(var(--warning) / var(--chat-bubble-tone-background-alpha));
  }

  .ui-chat-bubble[data-tone="destructive"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid
      hsl(var(--destructive) / var(--chat-bubble-tone-border-alpha));
    background: hsl(var(--destructive) / var(--chat-bubble-tone-background-alpha));
  }

  .ui-chat-bubble-caret {
    display: inline-block;
    inline-size: var(--chat-bubble-typing-caret-width);
    block-size: var(--chat-bubble-typing-caret-height);
    margin-inline-start: var(--space-1);
    background: var(--chat-bubble-typing-caret-color, hsl(var(--muted-foreground)));
    vertical-align: text-bottom;
  }

  .ui-chat-bubble-skeleton {
    display: grid;
    grid-template-columns: minmax(0, var(--chat-bubble-max-inline-size));
    gap: var(--skeleton-row-gap);
  }

  .ui-chat-bubble-skeleton-line {
    block-size: var(--skeleton-block-height);
    inline-size: auto;
    max-inline-size: 100%;
  }

  .ui-chat-bubble-skeleton-line--short {
    inline-size: var(--chat-bubble-skeleton-short-inline-size);
  }

  .ui-chat-bubble-list {
    position: relative;
    display: flex;
    min-block-size: 0;
    flex-direction: column;

    block-size: 100%;
  }

  .ui-chat-bubble-list-scroller {
    min-block-size: 0;
    flex: 1 1 auto;
  }

  .ui-chat-bubble-list-feed {
    display: flex;
    flex-direction: column;
    gap: var(--chat-bubble-list-gap);
  }

  .ui-chat-bubble-list-jump {
    position: absolute;
    display: flex;
    inset-inline: 0;
    inset-block-end: var(--chat-bubble-list-jump-inset);
    justify-content: center;
    pointer-events: none;
  }

  .ui-chat-bubble-list-jump > * {
    pointer-events: auto;
  }
}

@layer components {
  .ui-tree {
    display: flex;
    flex-direction: column;
    font-size: var(--tree-node-font-size);
  }

  .ui-tree-node {
    display: flex;
    align-items: center;
    gap: var(--tree-node-gap);

    min-block-size: var(--tree-node-height, var(--control-height));
    border-radius: var(--tree-node-radius);
    padding-inline: var(--tree-node-padding-inline);

    padding-inline-start: calc(
      var(--tree-node-padding-inline) + var(--tree-node-level, 0) * var(--tree-indent-width)
    );
    cursor: pointer;
  }

  .ui-tree-node:hover {
    background: var(--tree-node-hover-background, hsl(var(--accent)));
  }

  .ui-tree-node[data-selected="true"] {
    background: var(--tree-node-selected-background, hsl(var(--accent)));
    color: var(--tree-node-selected-foreground, hsl(var(--accent-foreground)));
    font-weight: var(--font-weight-medium);
  }

  .ui-tree-node[data-disabled] {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-tree-switcher {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--tree-switcher-size);
    block-size: var(--tree-switcher-size);
    color: var(--tree-switcher-color, hsl(var(--muted-foreground)));
  }

  .ui-tree-switcher > svg {
    inline-size: var(--tree-icon-size);
    block-size: var(--tree-icon-size);
  }

  .ui-tree-switcher[data-leaf] {
    cursor: default;
  }

  .ui-tree-check {
    display: inline-flex;
    flex: none;
    align-items: center;
  }

  .ui-tree-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    color: hsl(var(--muted-foreground));
  }

  .ui-tree-icon > svg {
    inline-size: var(--tree-icon-size);
    block-size: var(--tree-icon-size);
  }

  .ui-tree-label {
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-tree-group {
    display: flex;
    flex-direction: column;
  }

  .ui-tree[data-show-line="true"] .ui-tree-group {
    position: relative;
  }

  .ui-tree[data-show-line="true"] .ui-tree-group::before {
    position: absolute;
    inset-block: 0;

    inset-inline-start: calc(
      var(--tree-node-padding-inline) + (var(--tree-node-level, 1) - 1) * var(--tree-indent-width) +
        var(--tree-switcher-size) / 2
    );
    border-inline-start: 1px solid var(--tree-line-color, hsl(var(--border)));
    content: "";
  }

  .ui-tree[data-divided="true"] .ui-tree-node {
    border-block-start: var(--stroke-hairline) solid var(--tree-divider-color, hsl(var(--border)));
  }

  .ui-tree[data-divided="true"] > .ui-tree-node:first-child {
    border-block-start-color: transparent;
  }

  .ui-tree-loading {
    display: flex;
    align-items: center;
    min-block-size: var(--tree-node-height, var(--control-height));
    padding-inline-start: calc(
      var(--tree-node-padding-inline) + var(--tree-node-level, 0) * var(--tree-indent-width) +
        var(--tree-switcher-size)
    );
  }

  .ui-tree-loading-bar {
    block-size: var(--tree-icon-size);
    inline-size: var(--tree-loading-bar-inline-size);
  }

  .ui-tree-empty {
    padding-block: var(--space-4);
    padding-inline: var(--tree-node-padding-inline);
    color: hsl(var(--muted-foreground));
  }

  .ui-tree[data-size="xs"] {
    --tree-node-height: var(--control-height-xs);
    --tree-node-font-size: var(
      --font-size-xs,
      calc(var(--font-size-base) / var(--font-size-ratio))
    );
  }

  .ui-tree[data-size="sm"] {
    --tree-node-height: var(--control-height-sm);
  }

  .ui-tree[data-size="lg"] {
    --tree-node-height: var(--control-height-lg);
  }

  .ui-tree[data-variant="directory"] .ui-tree-node[data-selected="true"] {
    background: var(--tree-node-selected-background, hsl(var(--primary) / 0.12));
  }
}

@layer components {

  .ui-welcome {
    display: flex;
    min-inline-size: 0;
    align-items: flex-start;
    gap: var(--welcome-gap);
    border-radius: var(--welcome-radius);
  }

  .ui-welcome[data-variant="filled"] {
    padding-block: var(--welcome-padding-block);
    padding-inline: var(--welcome-padding-inline);
    border: var(--welcome-filled-border, var(--stroke-hairline) solid hsl(var(--border)));
    background: var(--welcome-filled-background, hsl(var(--muted)));
  }

  .ui-welcome-icon {
    display: grid;
    inline-size: var(--welcome-icon-size);
    block-size: var(--welcome-icon-size);
    flex: 0 0 auto;
    line-height: 0;
    place-items: center;
  }

  .ui-welcome-icon svg,
  .ui-welcome-icon img {
    inline-size: var(--welcome-icon-size);
    block-size: var(--welcome-icon-size);
    object-fit: contain;
  }

  .ui-welcome-content {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--welcome-content-gap);
  }

  .ui-welcome-title-row {
    display: flex;
    min-inline-size: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--welcome-title-gap);
  }

  .ui-welcome-title {
    min-inline-size: 0;
  }

  .ui-welcome-extra {
    flex: 0 0 auto;
  }
}

@layer components {

  .ui-thought-chain {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--thought-chain-gap);
    list-style: none;
  }

  .ui-thought-chain-node {
    position: relative;
    display: flex;
    min-inline-size: 0;
    align-items: flex-start;
    gap: var(--thought-chain-node-gap);
  }

  .ui-thought-chain:not([data-line="none"]) .ui-thought-chain-node:not(:last-child)::before {
    position: absolute;
    inset-block: var(--thought-chain-icon-size) calc(-1 * var(--thought-chain-gap));
    inset-inline-start: calc(var(--thought-chain-icon-size) / 2);
    border-inline-start: var(--thought-chain-line-width) solid
      var(--thought-chain-line-color, hsl(var(--border)));
    content: "";
    translate: calc(-1 * var(--thought-chain-line-width) / 2) 0;
  }

  .ui-thought-chain[data-line="dashed"] .ui-thought-chain-node::before {
    border-inline-start-style: dashed;
  }

  .ui-thought-chain[data-line="dotted"] .ui-thought-chain-node::before {
    border-inline-start-style: dotted;
  }

  .ui-thought-chain-icon {
    position: relative;
    z-index: 1;
    display: grid;
    inline-size: var(--thought-chain-icon-size);
    block-size: var(--thought-chain-icon-size);
    flex: 0 0 auto;
    border-radius: var(--thought-chain-icon-radius);
    background: var(--thought-chain-icon-background, hsl(var(--muted)));
    color: var(--thought-chain-icon-color, hsl(var(--muted-foreground)));
    font-size: var(--thought-chain-icon-font-size);
    place-items: center;
  }

  .ui-thought-chain-icon svg {
    inline-size: var(--thought-chain-chevron-size);
    block-size: var(--thought-chain-chevron-size);
  }

  .ui-thought-chain-icon[data-status="success"] {
    color: var(--thought-chain-icon-success-color, hsl(var(--success)));
  }

  .ui-thought-chain-icon[data-status="error"] {
    color: var(--thought-chain-icon-error-color, hsl(var(--destructive)));
  }

  .ui-thought-chain-body {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--thought-chain-body-gap);
  }

  .ui-thought-chain-header {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: var(--thought-chain-body-gap);
  }

  .ui-thought-chain-trigger {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: var(--thought-chain-item-gap);
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: start;
  }

  .ui-thought-chain-chevron {
    inline-size: var(--thought-chain-chevron-size);
    block-size: var(--thought-chain-chevron-size);
    flex: 0 0 auto;
  }

  [dir="rtl"] .ui-thought-chain-chevron {
    scale: -1 1;
  }

  .ui-thought-chain-chevron[data-expanded="true"],
  [dir="rtl"] .ui-thought-chain-chevron[data-expanded="true"] {
    rotate: 90deg;
    scale: 1 1;
  }

  .ui-thought-chain-content {
    padding-block: var(--thought-chain-content-space-block);
  }

  @keyframes ui-thought-chain-blink {
    50% {
      opacity: 0.45;
    }
  }

  .ui-thought-chain [data-blink],
  .ui-thought-chain-item[data-blink] {
    animation: ui-thought-chain-blink var(--duration-slow) ease-in-out infinite;
  }

  .ui-thought-chain-spinner {
    animation: spin var(--duration-slow) linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-thought-chain [data-blink],
    .ui-thought-chain-item[data-blink],
    .ui-thought-chain-spinner {
      animation: none;
    }
  }

  .ui-thought-chain-item {
    display: inline-flex;
    align-items: center;
    gap: var(--thought-chain-item-gap);
    padding-block: var(--thought-chain-item-padding-block);
    padding-inline: var(--thought-chain-item-padding-inline);
    border: 0;
    border-radius: var(--thought-chain-item-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
  }

  .ui-thought-chain-item[data-variant="solid"] {
    background: var(--thought-chain-item-solid-background, hsl(var(--muted)));
  }

  .ui-thought-chain-item[data-variant="outlined"] {
    border: var(
      --thought-chain-item-outlined-border,
      var(--stroke-hairline) solid hsl(var(--border))
    );
  }

  button.ui-thought-chain-item {
    cursor: pointer;
  }

  button.ui-thought-chain-item:disabled {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-thought-chain-item-text {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
  }
}