/* ---- accordion ---- */
/* Accordion */

.xui-accordion { display: flex; flex-direction: column; min-width: 0; }

.xui-accordion__item { border-bottom: 1px solid var(--border); min-width: 0; }
.xui-accordion__heading { margin: 0; font: inherit; }

.xui-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  color: var(--foreground);
  transition: color var(--dur-fast) var(--ease-out);
}
.xui-accordion__trigger:hover:not([disabled]) { color: var(--primary); }
.xui-accordion__trigger[disabled] { opacity: 0.45; cursor: not-allowed; }
.xui-accordion__trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-sm); }

.xui-accordion__lead { display: flex; color: var(--muted-foreground); flex: none; }
.xui-accordion__title { flex: 1; min-width: 0; }
.xui-accordion__badge {
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
}
.xui-accordion__chevron {
  display: flex;
  color: var(--muted-foreground);
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.xui-accordion__item[data-open="true"] .xui-accordion__chevron { transform: rotate(180deg); }

.xui-accordion--icon-start .xui-accordion__trigger { flex-direction: row; }
.xui-accordion--icon-start .xui-accordion__chevron { order: -1; }

.xui-accordion__panel { overflow: hidden; }
.xui-accordion__content {
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* separated: each item is its own card */
.xui-accordion--separated { gap: var(--space-2); }
.xui-accordion--separated .xui-accordion__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding-inline: var(--space-4);
}
.xui-accordion--plain .xui-accordion__item { border-bottom: none; }

/* height animation driven by component.js */
.xui-accordion__panel[data-animating="true"] {
  transition: height var(--dur-base) var(--ease-out);
}

/* ---- agenda ---- */
/* Agenda */

.xui-agenda { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* --- toolbar ------------------------------------------------------------ */
.xui-agenda__bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.xui-agenda__nav { display: flex; align-items: center; gap: 0.15rem; }

.xui-agenda__step {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
}
.xui-agenda__step:hover { background: var(--accent); color: var(--foreground); }

.xui-agenda__today {
  padding: 0.25rem var(--space-3);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.xui-agenda__today:hover { background: var(--accent); }

.xui-agenda__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-inline-end: auto;
}

.xui-agenda__views { display: flex; gap: 1px; padding: 2px; border-radius: var(--radius-md); background: var(--muted); }
.xui-agenda__view {
  padding: 0.2rem var(--space-3);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-agenda__view:hover { color: var(--foreground); }
.xui-agenda__view.is-current { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* --- the frame ---------------------------------------------------------- */
.xui-agenda__box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: auto;
  overscroll-behavior: contain;
  min-width: 0;
}

/* --- day / week --------------------------------------------------------- */
.xui-agenda__grid {
  display: grid;
  grid-template-columns: 3.2rem repeat(var(--days, 7), minmax(5.5rem, 1fr));
  min-height: 100%;
}

.xui-agenda__gutter { position: relative; border-inline-end: 1px solid var(--border); }
/* the labels' top:% must resolve against the same area the rules' top:% does —
   everything below the 3rem day header — or they drift apart down the column */
.xui-agenda__gutterin { position: absolute; inset: 3rem 0 0 0; }
.xui-agenda__hour {
  position: absolute;
  right: var(--space-2);
  translate: 0 -50%;
  font-size: 0.65rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.xui-agenda__day { display: flex; flex-direction: column; border-inline-start: 1px solid var(--border); min-width: 0; }
.xui-agenda__day.is-weekend { background: color-mix(in oklab, var(--muted) 40%, transparent); }

.xui-agenda__dayhead {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  height: 3rem;
  padding: var(--space-2);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.xui-agenda__dayname { font-size: 0.65rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.03em; }
.xui-agenda__daynum { font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.xui-agenda__day.is-today .xui-agenda__daynum {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
}

.xui-agenda__allday { display: flex; flex-direction: column; gap: 2px; padding: 2px; border-bottom: 1px solid var(--border); }

.xui-agenda__slots { position: relative; flex: 1; min-height: 22rem; }
.xui-agenda__rule { position: absolute; inset-inline: 0; height: 1px; background: var(--border); opacity: 0.65; }

.xui-agenda__now { position: absolute; inset-inline: 0; height: 2px; background: var(--destructive); z-index: 3; }
.xui-agenda__now::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--destructive);
}

/* --- an event ----------------------------------------------------------- */
.xui-agenda__event,
.xui-agenda__chip,
.xui-agenda__listrow {
  --ev: var(--primary);
  text-align: left;
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--ev);
  background: color-mix(in oklab, var(--ev) 14%, var(--card));
  color: var(--foreground);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  min-width: 0;
}
.xui-agenda__event:hover,
.xui-agenda__chip:hover,
.xui-agenda__listrow:hover { background: color-mix(in oklab, var(--ev) 26%, var(--card)); }
.xui-agenda__event:focus-visible,
.xui-agenda__chip:focus-visible,
.xui-agenda__listrow:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.xui-agenda [data-variant="success"] { --ev: var(--success); }
.xui-agenda [data-variant="warning"] { --ev: var(--warning); }
.xui-agenda [data-variant="destructive"] { --ev: var(--destructive); }
.xui-agenda [data-variant="muted"] { --ev: var(--muted-foreground); }

.xui-agenda__event {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  padding: 2px 4px;
  z-index: 1;
}
.xui-agenda__eventtime { font-size: 0.6rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.xui-agenda__eventtitle { font-size: 0.7rem; font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xui-agenda__eventnote { font-size: 0.6rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- month -------------------------------------------------------------- */
.xui-agenda__monthhead {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.xui-agenda__monthhead .xui-agenda__dayname { padding: var(--space-2); text-align: center; }

.xui-agenda__month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.xui-agenda__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 6rem;
  padding: 3px;
  border-inline-start: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  cursor: pointer;
  min-width: 0;
}
.xui-agenda__cell:hover { background: var(--accent); }
.xui-agenda__cell.is-outside { opacity: 0.45; }
.xui-agenda__cellno { font-size: 0.65rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; align-self: flex-end; }
.xui-agenda__cell.is-today .xui-agenda__cellno {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
}

.xui-agenda__chip { display: flex; gap: 0.25rem; padding: 1px 4px; font-size: 0.65rem; align-items: baseline; }
.xui-agenda__chiptime { color: var(--muted-foreground); font-variant-numeric: tabular-nums; flex: none; }
.xui-agenda__chiptitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xui-agenda__more { font-size: 0.6rem; color: var(--muted-foreground); padding-inline: 4px; }

/* --- list --------------------------------------------------------------- */
.xui-agenda__list { display: flex; flex-direction: column; }
.xui-agenda__listday { display: flex; flex-direction: column; }
.xui-agenda__listhead {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-2) var(--space-4);
  background: color-mix(in oklab, var(--muted) 70%, var(--card));
  border-block: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.xui-agenda__listhead.is-today { color: var(--primary); }

.xui-agenda__listrow {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
  border-inline-start-width: 3px;
}
.xui-agenda__listtime { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.xui-agenda__listtitle { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.xui-agenda__listnote { grid-column: 2; font-size: var(--text-xs); color: var(--muted-foreground); }

.xui-agenda__empty { margin: 0; padding: var(--space-8); text-align: center;
  color: var(--muted-foreground); font-size: var(--text-sm); }

/* a week of columns does not fit a phone — fall back to the day it anchors on */
@container xui-device (max-width: 640px) {
  .xui-agenda--week .xui-agenda__grid { grid-template-columns: 3rem repeat(var(--days, 7), minmax(4.5rem, 1fr)); }
  .xui-agenda__cell { min-height: 4.5rem; }
  .xui-agenda__chiptime { display: none; }
}

/* ---- alert ---- */
/* Alert */

.xui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--card-foreground);
}
.xui-alert--compact { padding: var(--space-3); gap: var(--space-2); }

.xui-alert__icon { display: flex; margin-top: 0.05rem; flex: none; color: var(--muted-foreground); }
.xui-alert__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.xui-alert__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
}
.xui-alert__desc { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.55; }
.xui-alert__action { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.xui-alert__x {
  display: flex;
  padding: 0.2rem;
  margin: -0.2rem -0.2rem auto auto;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  flex: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-alert__x:hover { background: color-mix(in oklab, currentColor 14%, transparent); color: inherit; }

/* variants tint the surface and colour the icon + title */
.xui-alert--info,
.xui-alert--success,
.xui-alert--warning,
.xui-alert--destructive { border-color: color-mix(in oklab, var(--tint) 32%, transparent); background: color-mix(in oklab, var(--tint) 8%, var(--card)); }
.xui-alert--info .xui-alert__icon,
.xui-alert--success .xui-alert__icon,
.xui-alert--warning .xui-alert__icon,
.xui-alert--destructive .xui-alert__icon { color: var(--tint); }
.xui-alert--info .xui-alert__title,
.xui-alert--success .xui-alert__title,
.xui-alert--warning .xui-alert__title,
.xui-alert--destructive .xui-alert__title { color: color-mix(in oklab, var(--tint) 72%, var(--foreground)); }

.xui-alert--info { --tint: var(--info); }
.xui-alert--success { --tint: var(--success); }
.xui-alert--warning { --tint: var(--warning); }
.xui-alert--destructive { --tint: var(--destructive); }

@container xui-device (max-width: 480px) {
  .xui-alert { flex-wrap: wrap; }
  .xui-alert__action { width: 100%; }
}

/* ---- alert_dialog ---- */
/* AlertDialog — rides on the Dialog surface, with its own icon treatment. */

.xui-alertdialog__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--muted-foreground);
}
.xui-alertdialog--destructive .xui-alertdialog__icon {
  background: color-mix(in oklab, var(--destructive) 13%, transparent);
  color: var(--destructive);
}
.xui-alertdialog--warning .xui-alertdialog__icon {
  background: color-mix(in oklab, var(--warning) 16%, transparent);
  color: var(--warning);
}

.xui-alertdialog .xui-dialog__footer { justify-content: flex-end; }

/* see dialog/component.css for why this is data-narrow and not a media query */
html[data-narrow="true"] .xui-alertdialog .xui-dialog__footer { flex-direction: column-reverse; }
html[data-narrow="true"] .xui-alertdialog .xui-dialog__footer > .xui-btn { width: 100%; }

/* ---- aspect_ratio ---- */
/* AspectRatio */

.xui-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--muted);
}
.xui-ratio--plain { background: none; }

.xui-ratio__img,
.xui-ratio > *:not(.xui-ratio__img) {
  width: 100%;
  height: 100%;
}

/* out of flow, so children rendered alongside src overlay the image instead
   of being pushed below it and clipped by the box's overflow:hidden */
.xui-ratio__img { display: block; object-position: center; position: absolute; inset: 0; }

/* ---- attachment ---- */
/* Attachment */

.xui-attach {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  min-width: 0;
  max-width: 22rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-attach:hover { border-color: color-mix(in oklab, var(--foreground) 18%, var(--border)); }
.xui-attach.is-failed { border-color: var(--destructive); background: color-mix(in oklab, var(--destructive) 6%, var(--card)); }

.xui-attach--compact { padding: 0.25rem 0.5rem; gap: var(--space-2); max-width: 16rem; }
.xui-attach--compact .xui-attach__meta { display: none; }

.xui-attach__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
}
.xui-attach.is-failed .xui-attach__icon {
  background: color-mix(in oklab, var(--destructive) 14%, transparent);
  color: var(--destructive);
}

.xui-attach__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.xui-attach__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xui-attach__meta { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.xui-attach.is-failed .xui-attach__meta { color: var(--destructive); }

.xui-attach__bar {
  display: block;
  height: 0.25rem;
  margin-top: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--muted);
  overflow: hidden;
}
.xui-attach__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width var(--dur-base) var(--ease-out);
}

.xui-attach__actions { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.xui-attach__btn {
  display: flex;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-attach__btn:hover { background: var(--accent); color: var(--foreground); }

/* tile form — images and galleries */
.xui-attach--tile {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0;
  border: none;
  background: none;
  max-width: 12rem;
}
.xui-attach__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--muted);
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
}
.xui-attach__thumb img { width: 100%; height: 100%; object-fit: cover; }
.xui-attach__thumb-icon { color: var(--muted-foreground); }

.xui-attach__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, black 45%, transparent);
}
.xui-attach__ring {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid white;
  border-right-color: transparent;
  border-radius: 50%;
  animation: xui-spin 700ms linear infinite;
}

.xui-attach__x {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, black 60%, transparent);
  color: white;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.xui-attach--tile:hover .xui-attach__x,
.xui-attach__x:focus-visible { opacity: 1; }
@media (pointer: coarse) { .xui-attach__x { opacity: 1; } }

.xui-attach__caption {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- audio ---- */
/* Audio — the frame lives in video/component.css, shared by both */

.xui-audio__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--foreground);
}

/* ---- avatar ---- */
/* Avatar + AvatarGroup */

.xui-avatar {
  --size: 2.25rem;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: calc(var(--size) * 0.36);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  overflow: visible;
  user-select: none;
}
.xui-avatar--xs { --size: 1.5rem; }
.xui-avatar--sm { --size: 1.875rem; }
.xui-avatar--lg { --size: 2.75rem; }
.xui-avatar--xl { --size: 3.5rem; }
.xui-avatar--2xl { --size: 5rem; }
.xui-avatar--square { border-radius: var(--radius-md); }
.xui-avatar--ring { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); }

.xui-avatar__img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.xui-avatar__fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in oklab, var(--tone-color) 20%, var(--muted));
  color: color-mix(in oklab, var(--tone-color) 78%, var(--foreground));
}

/* deterministic fallback colours, taken from the chart ramp of the theme */
.xui-avatar[data-tone="1"] { --tone-color: var(--chart-1); }
.xui-avatar[data-tone="2"] { --tone-color: var(--chart-2); }
.xui-avatar[data-tone="3"] { --tone-color: var(--chart-3); }
.xui-avatar[data-tone="4"] { --tone-color: var(--chart-4); }
.xui-avatar[data-tone="5"] { --tone-color: var(--chart-5); }

.xui-avatar__status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--size) * 0.28);
  height: calc(var(--size) * 0.28);
  min-width: 0.5rem;
  min-height: 0.5rem;
  border-radius: 50%;
  border: 2px solid var(--background);
}
.xui-avatar__status--online { background: var(--success); }
.xui-avatar__status--busy { background: var(--destructive); }
.xui-avatar__status--away { background: var(--warning); }
.xui-avatar__status--offline { background: var(--muted-foreground); }

.xui-avatar__badge {
  position: absolute;
  right: -0.15rem;
  top: -0.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 0.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 2px solid var(--background);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
}

/* group */
.xui-avatars { display: inline-flex; align-items: center; }
.xui-avatars > .xui-avatar { box-shadow: 0 0 0 2px var(--background); }
.xui-avatars > .xui-avatar + .xui-avatar,
.xui-avatars > .xui-avatar--overflow { margin-left: -0.6rem; }
.xui-avatars--reverse { flex-direction: row-reverse; }
.xui-avatars--reverse > .xui-avatar + .xui-avatar { margin-left: 0; margin-right: -0.6rem; }
.xui-avatars--sm > .xui-avatar { --size: 1.875rem; }
.xui-avatars--lg > .xui-avatar { --size: 2.75rem; }

.xui-avatar--overflow {
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.7rem;
  z-index: 1;
}

/* ---- badge ---- */
/* Badge */

.xui-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: middle;
  max-width: 100%;
}
.xui-badge--pill { border-radius: var(--radius-full); }
.xui-badge--size-sm { padding: 0.0625rem 0.375rem; font-size: 0.6875rem; }

.xui-badge__label { overflow: hidden; text-overflow: ellipsis; }

.xui-badge__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.xui-badge__x {
  display: inline-flex;
  margin-right: -0.2rem;
  padding: 0.1rem;
  border-radius: var(--radius-full);
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-badge__x:hover { opacity: 1; background: color-mix(in oklab, currentColor 18%, transparent); }

/* --- variants ---------------------------------------------------------- */
.xui-badge--default { background: var(--primary); color: var(--primary-foreground); }
.xui-badge--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.xui-badge--destructive { background: var(--destructive); color: var(--destructive-foreground); }
.xui-badge--outline { border-color: var(--border); color: var(--foreground); background: transparent; }
.xui-badge--muted { background: var(--muted); color: var(--muted-foreground); }

/* semantic variants stay legible by tinting the surface, not flooding it */
.xui-badge--success {
  background: color-mix(in oklab, var(--success) 16%, var(--background));
  color: color-mix(in oklab, var(--success) 78%, var(--foreground));
  border-color: color-mix(in oklab, var(--success) 32%, transparent);
}
.xui-badge--warning {
  background: color-mix(in oklab, var(--warning) 18%, var(--background));
  color: color-mix(in oklab, var(--warning) 72%, var(--foreground));
  border-color: color-mix(in oklab, var(--warning) 34%, transparent);
}
.xui-badge--info {
  background: color-mix(in oklab, var(--info) 16%, var(--background));
  color: color-mix(in oklab, var(--info) 78%, var(--foreground));
  border-color: color-mix(in oklab, var(--info) 32%, transparent);
}

/* ---- block ---- */
/* Block — one sentence of a workflow */

.xui-blk {
  /* every kind sets --blk; the card itself never fills with it (rule A5) */
  --blk: var(--muted-foreground);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.xui-blk:hover { border-color: var(--blk); }
.xui-blk.is-selected {
  border-color: var(--blk);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--blk) 30%, transparent);
}
.xui-blk:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* the silhouette tells the story: a hat, the body, a boot */
.xui-blk--hat { border-start-start-radius: var(--radius-xl); border-start-end-radius: var(--radius-xl); }
.xui-blk--boot { border-end-start-radius: var(--radius-xl); border-end-end-radius: var(--radius-xl); }
.xui-blk--frame { border-style: dashed; }

/* --- the ten kinds. Hue carries the meaning; the token carries the theme --- */
.xui-blk--quando   { --blk: var(--warning); }
.xui-blk--fazer    { --blk: var(--primary); }
.xui-blk--se       { --blk: var(--series-4); }
.xui-blk--repetir  { --blk: var(--series-3); }
.xui-blk--paralelo { --blk: var(--series-5); }
.xui-blk--esperar  { --blk: var(--series-2); }
.xui-blk--lembrar  { --blk: var(--series-1); }
.xui-blk--terminar { --blk: var(--success); }
.xui-blk--fluxo    { --blk: var(--series-4); }
.xui-blk--xpert    { --blk: var(--series-5); }

/* --- the face: icon + sentence, and nothing else (rule R2) --------------- */
.xui-blk__face {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  min-width: 0;
}
.xui-blk__icon { display: flex; flex: none; color: var(--blk); margin-top: 0.1rem; }

.xui-blk__sentence {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

/* a data mention reads inside the sentence, not as a separate control */
.xui-blk__mention {
  padding: 0.05rem 0.3rem;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--blk) 14%, transparent);
  color: var(--foreground);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* "literal text" must not read like «data» (rule G-01) */
.xui-blk__literal {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--muted-foreground);
}

/* provenance: hovering a «mention» lights its producer for a moment —
   a temporary x-ray, never a permanent line (rule R1) */
.xui-blk.is-provenance,
.xui-canvas__node.is-provenance {
  border-color: var(--blk);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--blk) 45%, transparent);
}

.xui-blk__anchor {
  flex: none;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

/* --- details: hidden until asked for (rule A8) --------------------------- */
.xui-blk__details {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}
.xui-blk.is-selected .xui-blk__details,
.xui-blk.is-open .xui-blk__details { display: flex; }

.xui-blk__using {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.xui-blk__pins { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.xui-blk__pin {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  color: var(--foreground);
}
.xui-blk__pin[data-slot="fazer"]    { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.xui-blk__pin[data-slot="quando"]   { border-color: color-mix(in oklab, var(--warning) 45%, var(--border)); }
.xui-blk__pin[data-slot="terminar"] { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); }
.xui-blk__pin[data-slot="repetir"]  { border-color: color-mix(in oklab, var(--series-3) 45%, var(--border)); }
.xui-blk__pin[data-slot="se"]       { border-color: color-mix(in oklab, var(--series-4) 45%, var(--border)); }
.xui-blk__pin[data-slot="lembrar"]  { border-color: color-mix(in oklab, var(--series-1) 45%, var(--border)); }
.xui-blk__pin-dir { color: var(--muted-foreground); }
.xui-blk__pin-type { color: var(--muted-foreground); font-style: italic; }

.xui-blk__notes { display: flex; flex-direction: column; gap: 0.15rem; }
.xui-blk__note { font-size: 0.65rem; color: var(--muted-foreground); }

/* --- run state ----------------------------------------------------------- */
.xui-blk[data-state="running"] {
  border-color: var(--blk);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--blk) 45%, transparent);
  animation: xui-blk-pulse 1.6s var(--ease-out) infinite;
}
@keyframes xui-blk-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--blk) 45%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
.xui-blk[data-state="done"]    { border-color: color-mix(in oklab, var(--success) 55%, var(--border)); }
.xui-blk[data-state="failed"]  { border-color: var(--destructive); }
.xui-blk[data-state="failed"] .xui-blk__icon { color: var(--destructive); }
.xui-blk[data-state="skipped"] { opacity: 0.5; }
/* a durable pause (an Esperar sleeping for days) sits calmly, marked but still */
.xui-blk[data-state="waiting"] { border-style: dashed; border-color: var(--blk); }

@media (prefers-reduced-motion: reduce) {
  .xui-blk[data-state="running"] { animation: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--blk) 35%, transparent); }
}

/* ---- block_flow ---- */
/* BlockFlow — the vertical sentence view */

.xui-bflow { display: flex; flex-direction: column; min-width: 0; }

.xui-bflow__stack { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.xui-bflow__slot { display: flex; flex-direction: column; min-width: 0; }

/* --- the connector: a stem, the word, and a place to insert -------------- */
.xui-bflow__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-inline-start: 1.05rem;
  height: 1.9rem;
}
.xui-bflow__stem {
  position: absolute;
  left: 1.05rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.xui-bflow__then {
  margin-inline-start: 0.6rem;
  font-size: 0.65rem;
  color: var(--muted-foreground);
  background: var(--background);
  padding-inline: 0.25rem;
}
.xui-bflow__add {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius-full);
  border: 1px dashed var(--border);
  color: var(--muted-foreground);
  background: var(--background);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.xui-bflow__link:hover .xui-bflow__add,
.xui-bflow__add:focus-visible { opacity: 1; }
.xui-bflow__add:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }

/* --- branches: the answers, side by side --------------------------------- */
.xui-bflow__branches {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0 0 1.05rem;
  border-inline-start: 1px solid var(--border);
  margin-inline-start: 1.05rem;
}
.xui-bflow__branch { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.xui-bflow__branch-label {
  align-self: flex-start;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
}
.xui-bflow__straight {
  padding: var(--space-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  text-align: center;
}
.xui-bflow__straight--add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-bflow__straight--add:hover,
.xui-bflow__straight--add:focus-visible { border-color: var(--primary); color: var(--primary); }

/* the ghost column that grows a new answer */
.xui-bflow__branch-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
  font-size: 0.65rem;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.xui-bflow__branches:hover .xui-bflow__branch-add,
.xui-bflow__branch-add:focus-visible { opacity: 1; }
.xui-bflow__branch-add:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }

/* branch labels may carry the error/timeout tone (a Se answer, an Esperar exit) */
.xui-bflow__branch-label[data-tone="error"] {
  background: color-mix(in oklab, var(--destructive) 14%, transparent);
  color: var(--destructive);
}
.xui-bflow__branch-label[data-tone="timeout"] {
  background: color-mix(in oklab, var(--warning) 16%, transparent);
  color: color-mix(in oklab, var(--warning) 70%, var(--foreground));
}
.xui-bflow__rejoin {
  padding: var(--space-2) 0 0 1.05rem;
  margin-inline-start: 1.05rem;
  font-size: 0.65rem;
  color: var(--muted-foreground);
}

/* --- containers: a frame in the block's own colour ----------------------- */
.xui-bflow__frame {
  margin: var(--space-2) 0 0 1.05rem;
  padding: var(--space-3);
  border: 1px dashed var(--blk, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--blk, var(--muted)) 4%, transparent);
}

/* --- lanes: error and timeout, indented and labelled --------------------- */
.xui-bflow__lane {
  --lane: var(--muted-foreground);
  margin: var(--space-2) 0 0 1.05rem;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px dashed var(--lane);
}
.xui-bflow__lane[data-tone="error"] { --lane: var(--destructive); }
.xui-bflow__lane[data-tone="timeout"] { --lane: var(--warning); }
.xui-bflow__lane-label {
  display: block;
  padding-bottom: var(--space-2);
  color: var(--lane);
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
}
.xui-bflow__lane-body { min-width: 0; }

/* --- odds and ends -------------------------------------------------------- */
.xui-bflow__fold {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  transition: transform var(--dur-fast) var(--ease-out);
}
.xui-bflow__fold[aria-expanded="false"] { transform: rotate(-90deg); }
.xui-bflow__fold:hover { background: var(--accent); color: var(--foreground); }

.xui-bflow__goto {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0 0 1.05rem;
  font-size: 0.65rem;
  color: var(--muted-foreground);
}

/* a comment is a note in the margin, not a block */
.xui-bflow__comment {
  margin: var(--space-2) 0 0 1.05rem;
  padding: var(--space-2) var(--space-3);
  border-inline-start: 2px solid var(--warning);
  background: color-mix(in oklab, var(--warning) 8%, transparent);
  color: var(--foreground);
  font-size: var(--text-xs);
}

.xui-bflow__empty {
  margin: 0;
  padding: var(--space-8);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* two answer columns do not fit a phone; they stack and keep their labels */
@container xui-device (max-width: 640px) {
  .xui-bflow__branches { flex-direction: column; }
}

/* ---- breadcrumb ---- */
/* Breadcrumb */

.xui-crumbs { min-width: 0; }

.xui-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  font-size: var(--text-sm);
}
.xui-crumbs--sm .xui-crumbs__list { font-size: var(--text-xs); }

.xui-crumbs__item { display: inline-flex; align-items: center; gap: 0.15rem; min-width: 0; }

.xui-crumbs__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.3rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-crumbs__link:hover { color: var(--foreground); background: var(--accent); }

.xui-crumbs__current {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.3rem;
  color: var(--foreground);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}

.xui-crumbs__sep { display: inline-flex; color: var(--muted-foreground); opacity: 0.7; }

.xui-crumbs__more {
  display: inline-flex;
  padding: 0.1rem 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
}
.xui-crumbs__more:hover { background: var(--accent); color: var(--foreground); }

.xui-crumbs__hidden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
}

@container xui-device (max-width: 480px) {
  .xui-crumbs__current { max-width: 12rem; }
}

/* ---- bubble ---- */
/* Bubble */

.xui-bubble { display: flex; width: 100%; min-width: 0; }
.xui-bubble--in { justify-content: flex-start; }
.xui-bubble--out { justify-content: flex-end; }

.xui-bubble__balloon {
  position: relative;
  max-width: var(--bubble-max, min(78%, 34rem));
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  line-height: 1.5;
  word-break: break-word;
  animation: xui-slide-up 200ms var(--ease-out);
}

.xui-bubble--in .xui-bubble__balloon {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-sm);
}
.xui-bubble--out .xui-bubble__balloon {
  background: var(--primary);
  color: var(--primary-foreground);
  border-bottom-right-radius: var(--radius-sm);
}
.xui-bubble:not(.xui-bubble--tail) .xui-bubble__balloon { border-radius: var(--radius-xl); }

/* cliniX reserves the coral primary for actions, so an outgoing bubble uses the
   calm teal-tinted surface instead of shouting */
[data-theme="clinix"] .xui-bubble--out .xui-bubble__balloon {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid color-mix(in oklab, var(--ring) 20%, transparent);
}

.xui-bubble--system { justify-content: center; }
.xui-bubble--system .xui-bubble__balloon {
  background: var(--muted);
  color: var(--muted-foreground);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  padding: 0.25rem 0.75rem;
  text-align: center;
}
.xui-bubble--quote .xui-bubble__balloon {
  background: transparent;
  border-left: 2px solid var(--primary);
  border-radius: 0;
  font-style: italic;
  color: var(--muted-foreground);
}

.xui-bubble__text { white-space: pre-wrap; }
.xui-bubble__text a { text-decoration: underline; text-underline-offset: 2px; }

.xui-bubble__reply {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.35rem;
  padding: 0.3rem 0.5rem;
  border-left: 2px solid currentColor;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, currentColor 10%, transparent);
  font-size: var(--text-xs);
  opacity: 0.85;
}
.xui-bubble__reply-author { font-weight: var(--weight-semibold); }
.xui-bubble__reply-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xui-bubble__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.xui-bubble__edited { font-style: italic; }
.xui-bubble__time { white-space: nowrap; }
.xui-bubble__status { display: flex; }
.xui-bubble.is-read .xui-bubble__status { color: var(--info); opacity: 1; }
.xui-bubble.is-failed .xui-bubble__status { color: var(--destructive); opacity: 1; }

.xui-bubble__retry {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: var(--destructive);
  font-weight: var(--weight-medium);
}

/* typing indicator */
.xui-bubble__typing { display: inline-flex; gap: 0.2rem; padding: 0.25rem 0; }
.xui-bubble__typing i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  animation: xui-bounce 900ms var(--ease-in-out) infinite;
}
.xui-bubble__typing i:nth-child(2) { animation-delay: 140ms; }
.xui-bubble__typing i:nth-child(3) { animation-delay: 280ms; }

@container xui-device (max-width: 480px) {
  .xui-bubble__balloon { max-width: 86%; }
}

/* ---------------------------------------------------------------- markdown
   A bubble rendered with markdown=True holds real rich text: headings, lists,
   tables, code. It has to stay readable inside a narrow balloon, so anything
   wide scrolls inside itself instead of stretching the bubble. */
/* plain messages keep pre-wrap so typed line breaks survive; rendered markdown
   must not, or every newline between its tags becomes a blank line */
.xui-bubble--rich .xui-bubble__text { white-space: normal; }
.xui-bubble--rich .xui-bubble__text pre,
.xui-bubble--rich .xui-bubble__text code { white-space: pre; }
.xui-bubble__text > :first-child { margin-top: 0; }
.xui-bubble__text > :last-child { margin-bottom: 0; }
.xui-bubble__text p { margin: 0 0 .5em; line-height: 1.55; }
.xui-bubble__text h1,
.xui-bubble__text h2,
.xui-bubble__text h3,
.xui-bubble__text h4 { margin: .7em 0 .35em; line-height: 1.25; font-weight: 650; }
.xui-bubble__text h1 { font-size: 1.25em; }
.xui-bubble__text h2 { font-size: 1.15em; }
.xui-bubble__text h3 { font-size: 1.05em; }
.xui-bubble__text h4 { font-size: 1em; }
/* the core reset kills list markers; markdown needs them back */
.xui-bubble__text ul { list-style: disc outside; }
.xui-bubble__text ol { list-style: decimal outside; }
.xui-bubble__text ul ul { list-style: circle outside; }
.xui-bubble__text ul,
.xui-bubble__text ol { margin: .35em 0 .6em; padding-left: 1.35em; }
.xui-bubble__text li { margin: .15em 0; display: list-item; line-height: 1.5; }
.xui-bubble__text li > p { margin: 0; }
.xui-bubble__text li.xui-md-task { list-style: none; margin-left: -1.1em; }
.xui-bubble__text li.xui-md-task input { margin-right: .4em; }
.xui-bubble__text a { color: inherit; text-decoration: underline;
  text-underline-offset: 2px; }
.xui-bubble__text code { font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .88em; padding: .1em .35em; border-radius: 5px;
  background: color-mix(in srgb, currentColor 12%, transparent); }
.xui-bubble__text pre { position: relative; margin: .5em 0; padding: .7em .8em;
  border-radius: 10px; overflow-x: auto; max-width: 100%;
  background: color-mix(in srgb, currentColor 10%, transparent); }
.xui-bubble__text pre code { background: none; padding: 0; font-size: .86em;
  line-height: 1.5; white-space: pre; }
.xui-bubble__text .xui-md-lang { position: absolute; top: .35em; right: .55em;
  font-size: .68em; letter-spacing: .04em; text-transform: uppercase;
  opacity: .55; user-select: none; }
.xui-bubble__text blockquote { margin: .5em 0; padding: .1em 0 .1em .8em;
  border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
  opacity: .9; }
.xui-bubble__text hr { border: none; margin: .8em 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.xui-bubble__text .xui-md-table { overflow-x: auto; max-width: 100%; margin: .5em 0; }
.xui-bubble__text table { border-collapse: collapse; font-size: .92em; }
.xui-bubble__text th,
.xui-bubble__text td { padding: .35em .6em; text-align: left;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.xui-bubble__text th { font-weight: 650;
  background: color-mix(in srgb, currentColor 8%, transparent); }
.xui-bubble__text img { max-width: 100%; height: auto; border-radius: 8px;
  margin: .35em 0; }

/* ---- button ---- */
/* Button */

.xui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.xui-btn:active:not([disabled]) { transform: translateY(0.5px) scale(0.995); }

.xui-btn[disabled],
.xui-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.xui-btn .xui-icon { opacity: 0.95; }

/* --- variants ---------------------------------------------------------- */
.xui-btn--default {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-xs);
}
.xui-btn--default:hover { background: color-mix(in oklab, var(--primary) 88%, var(--foreground)); }

.xui-btn--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  box-shadow: var(--shadow-xs);
}
.xui-btn--secondary:hover { background: color-mix(in oklab, var(--secondary) 82%, var(--foreground)); }

.xui-btn--destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
  box-shadow: var(--shadow-xs);
}
.xui-btn--destructive:hover { background: color-mix(in oklab, var(--destructive) 88%, black); }
.xui-btn--destructive:focus-visible { outline-color: var(--destructive); }

.xui-btn--success { background: var(--success); color: var(--success-foreground); box-shadow: var(--shadow-xs); }
.xui-btn--success:hover { background: color-mix(in oklab, var(--success) 88%, black); }

.xui-btn--warning { background: var(--warning); color: var(--warning-foreground); box-shadow: var(--shadow-xs); }
.xui-btn--warning:hover { background: color-mix(in oklab, var(--warning) 88%, black); }

.xui-btn--outline {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}
.xui-btn--outline:hover { background: var(--accent); color: var(--accent-foreground); }

.xui-btn--ghost { background: transparent; color: var(--foreground); }
.xui-btn--ghost:hover { background: var(--accent); color: var(--accent-foreground); }

.xui-btn--link {
  background: transparent;
  color: var(--primary);
  height: auto;
  padding: 0;
  text-underline-offset: 4px;
}
.xui-btn--link:hover { text-decoration: underline; }

/* cliniX gives its action colour a signature glow */
[data-theme="clinix"] .xui-btn--default { box-shadow: var(--shadow-action); }
[data-theme="clinix"] .xui-btn--default:hover { box-shadow: var(--shadow-action); }

/* --- sizes ------------------------------------------------------------- */
.xui-btn--size-sm {
  height: var(--control-h-sm);
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  gap: var(--space-1);
}
.xui-btn--size-lg {
  height: var(--control-h-lg);
  padding-inline: var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}
.xui-btn--size-icon {
  width: var(--control-h);
  padding-inline: 0;
}
/* size is a single var, so icon-only combines with --size-sm/--size-lg (never
   with --size-icon and another size at once) — match the width to each height */
.xui-btn--icon-only { padding-inline: 0; width: var(--control-h); }
.xui-btn--icon-only.xui-btn--size-sm { width: var(--control-h-sm); }
.xui-btn--icon-only.xui-btn--size-lg { width: var(--control-h-lg); }

.xui-btn--full { width: 100%; }

/* touch targets stay legal on real phones without bloating desktop */
@media (pointer: coarse) {
  .xui-btn { min-height: var(--tap); }
  .xui-btn--size-sm { min-height: 38px; }
}

/* --- loading ----------------------------------------------------------- */
.xui-btn__spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: xui-spin 700ms linear infinite;
  opacity: 0.85;
}
.xui-btn--loading { pointer-events: none; }

/* --- extras ------------------------------------------------------------ */
.xui-btn__label { display: inline-block; }

.xui-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.3rem;
  margin-left: 0.125rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, currentColor 18%, transparent);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
}

@keyframes xui-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}
.xui-btn--shake { animation: xui-shake 500ms var(--ease-out); }

/* ---- button_group ---- */
/* ButtonGroup */

.xui-bgroup { display: inline-flex; min-width: 0; }
.xui-bgroup--vertical { flex-direction: column; }
.xui-bgroup--loose { gap: var(--space-2); }
.xui-bgroup--full { display: flex; width: 100%; }
.xui-bgroup--full > * { flex: 1; }

/* attached: strip the inner radii and collapse the shared borders.
   :where() keeps specificity at 0 so a button's own variant still wins. */
.xui-bgroup--attached.xui-bgroup--horizontal > :where(.xui-btn, .xui-toggle) {
  border-radius: 0;
  margin-left: -1px;
}
/* a dropdown nests its trigger (.xui-dropdown > .xui-dropdown__trigger > .xui-btn),
   so reach the button with a descendant selector; :where() on the button keeps
   this at the same specificity as the first/last restores below, which then win
   by source order */
.xui-bgroup--attached.xui-bgroup--horizontal > .xui-dropdown :where(.xui-btn) {
  border-radius: 0;
  margin-left: -1px;
}
.xui-bgroup--attached.xui-bgroup--horizontal > *:first-child :where(.xui-btn),
.xui-bgroup--attached.xui-bgroup--horizontal > :where(.xui-btn, .xui-toggle):first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
  margin-left: 0;
}
.xui-bgroup--attached.xui-bgroup--horizontal > *:last-child :where(.xui-btn),
.xui-bgroup--attached.xui-bgroup--horizontal > :where(.xui-btn, .xui-toggle):last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.xui-bgroup--attached.xui-bgroup--vertical > :where(.xui-btn, .xui-toggle) {
  border-radius: 0;
  margin-top: -1px;
}
.xui-bgroup--attached.xui-bgroup--vertical > .xui-dropdown :where(.xui-btn) {
  border-radius: 0;
  margin-top: -1px;
}
.xui-bgroup--attached.xui-bgroup--vertical > *:first-child :where(.xui-btn),
.xui-bgroup--attached.xui-bgroup--vertical > :where(.xui-btn, .xui-toggle):first-child {
  border-start-start-radius: var(--radius-md);
  border-start-end-radius: var(--radius-md);
  margin-top: 0;
}
.xui-bgroup--attached.xui-bgroup--vertical > *:last-child :where(.xui-btn),
.xui-bgroup--attached.xui-bgroup--vertical > :where(.xui-btn, .xui-toggle):last-child {
  border-end-start-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

/* a divider between solid buttons, so "Save | ▾" still reads as two targets */
.xui-bgroup--attached > .xui-btn--default + .xui-btn--default,
.xui-bgroup--attached > .xui-btn--default + .xui-dropdown .xui-btn--default {
  box-shadow: inset 1px 0 0 color-mix(in oklab, var(--primary-foreground) 25%, transparent);
}

.xui-bgroup--attached > *:hover,
.xui-bgroup--attached > *:focus-within { z-index: 1; position: relative; }

/* size set on the group cascades into every button, including dropdown-wrapped
   triggers (descendant selector on purpose) */
.xui-bgroup--sm .xui-btn,
.xui-bgroup--sm .xui-toggle { height: var(--control-h-sm); padding-inline: var(--space-3); font-size: var(--text-xs); }
.xui-bgroup--lg .xui-btn,
.xui-bgroup--lg .xui-toggle { height: var(--control-h-lg); padding-inline: var(--space-6); font-size: var(--text-base); }
.xui-bgroup--sm .xui-btn--icon-only { width: var(--control-h-sm); padding-inline: 0; }
.xui-bgroup--lg .xui-btn--icon-only { width: var(--control-h-lg); padding-inline: 0; }

/* ---- calendar ---- */
/* Calendar */

.xui-cal {
  --cell: 2.25rem;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  min-width: 0;
}
.xui-cal--sm { --cell: 1.9rem; padding: var(--space-2); }

.xui-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline: 0.15rem;
}
.xui-cal__month {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-cal__nav {
  display: flex;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-cal__nav:hover { background: var(--accent); color: var(--foreground); }

.xui-cal__grid { border-collapse: collapse; }
.xui-cal__grid th {
  width: var(--cell);
  padding-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
  text-align: center;
}

.xui-cal__cell { padding: 1px; }

.xui-cal__day {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cell);
  height: var(--cell);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-cal__day:hover:not([disabled]) { background: var(--accent); }
.xui-cal__day.is-outside { color: var(--muted-foreground); opacity: 0.55; }
.xui-cal__day[disabled] { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.xui-cal__day.is-blank { pointer-events: none; }

.xui-cal__day.is-today::after {
  content: "";
  position: absolute;
  bottom: 0.25rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--primary);
}
.xui-cal__day.is-selected {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: var(--weight-semibold);
}
.xui-cal__day.is-selected.is-today::after { background: var(--primary-foreground); }

/* range */
.xui-cal__cell.is-inrange { background: color-mix(in oklab, var(--primary) 12%, transparent); }
.xui-cal__cell.is-start { background: linear-gradient(to right, transparent 50%, color-mix(in oklab, var(--primary) 12%, transparent) 50%); }
.xui-cal__cell.is-end { background: linear-gradient(to left, transparent 50%, color-mix(in oklab, var(--primary) 12%, transparent) 50%); }

.xui-cal__mark {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--success);
}
.xui-cal__day.is-selected .xui-cal__mark { background: var(--primary-foreground); }

.xui-cal__footer {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  text-align: center;
}

@media (pointer: coarse) { .xui-cal { --cell: 2.6rem; } }

/* ---- canvas ---- */
/* Canvas — the blueprint view */

.xui-canvas { min-width: 0; }

.xui-canvas__box {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  cursor: grab;
  touch-action: none;
}
.xui-canvas__box:active { cursor: grabbing; }
.xui-canvas__box:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.xui-canvas--grid .xui-canvas__box {
  background-image:
    radial-gradient(circle, color-mix(in oklab, var(--foreground) 12%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* one transformed layer: panning and zooming move everything together */
.xui-canvas__world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.xui-canvas__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* three wire kinds, and only time draws a line at all (rule R1) */
.xui-canvas__wire {
  stroke: var(--muted-foreground);
  stroke-width: 1.5;
  opacity: 0.7;
  pointer-events: stroke;
  transition: opacity var(--dur-fast) var(--ease-out), stroke-width var(--dur-fast) var(--ease-out);
}
.xui-canvas__wire[data-tone="error"] { stroke: var(--destructive); }
.xui-canvas__wire[data-tone="timeout"] { stroke: var(--warning); }
.xui-canvas__wire:hover { opacity: 1; stroke-width: 2.5; }
.xui-canvas__wire--ghost { stroke: var(--primary); stroke-dasharray: 4 4; opacity: 0.9; pointer-events: none; }

/* live view: the path actually taken lights up, the rest recede */
.xui-canvas__wire[data-state="lit"] { opacity: 1; stroke-width: 2.5; }
.xui-canvas__wire[data-state="dim"] { opacity: 0.18; }

.xui-canvas__arr { fill: var(--muted-foreground); }
.xui-canvas__arr[data-tone="error"] { fill: var(--destructive); }
.xui-canvas__arr[data-tone="timeout"] { fill: var(--warning); }

/* a port appears only where the flow branches: an answer, an error, a
   timeout (rule R2) — the glyph doubles the hue for colour blindness */
.xui-canvas__port {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 0.6rem;
  font-weight: var(--weight-medium);
  pointer-events: none;
  z-index: 2;
}
.xui-canvas__port[data-tone="error"] { border-color: var(--destructive); color: var(--destructive); }
.xui-canvas__port[data-tone="timeout"] { border-color: var(--warning); color: color-mix(in oklab, var(--warning) 70%, var(--foreground)); }

/* the failure and timeout paths say their names at mid-wire */
.xui-canvas__wire-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--muted) 85%, transparent);
  font-size: 0.6rem;
  pointer-events: none;
  white-space: nowrap;
}
.xui-canvas__wire-label[data-tone="error"] { color: var(--destructive); }
.xui-canvas__wire-label[data-tone="timeout"] { color: color-mix(in oklab, var(--warning) 70%, var(--foreground)); }

/* drag me to another card to wire it (Shift: erro · Alt: tempo esgotado) */
.xui-canvas__handle {
  position: absolute;
  right: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--primary);
  background: var(--card);
  opacity: 0;
  cursor: crosshair;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.xui-canvas__node:hover .xui-canvas__handle,
.xui-canvas__node:focus-visible .xui-canvas__handle { opacity: 1; }

.xui-canvas__node {
  position: absolute;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  cursor: move;
  touch-action: none;
}

.xui-canvas__frame {
  position: absolute;
  border: 1px dashed var(--blk, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--blk, var(--muted)) 5%, transparent);
  pointer-events: none;
}
.xui-canvas__frame-label {
  position: absolute;
  top: -0.6rem;
  left: var(--space-3);
  padding-inline: 0.35rem;
  background: var(--muted);
  color: var(--blk, var(--muted-foreground));
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
}

/* sticky notes carry no logic — they are a margin, on the board.
   The layout schema stores a color per note; four tones cover it. */
.xui-canvas__note {
  position: absolute;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--warning) 18%, var(--card));
  color: var(--foreground);
  font-size: var(--text-xs);
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}
.xui-canvas__note[data-color="green"] { background: color-mix(in oklab, var(--success) 16%, var(--card)); }
.xui-canvas__note[data-color="blue"]  { background: color-mix(in oklab, var(--primary) 14%, var(--card)); }
.xui-canvas__note[data-color="red"]   { background: color-mix(in oklab, var(--destructive) 14%, var(--card)); }

.xui-canvas__tools {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--background) 92%, transparent);
  backdrop-filter: blur(6px);
}
.xui-canvas__tool {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
}
.xui-canvas__tool:hover { background: var(--accent); color: var(--foreground); }

.xui-canvas__empty {
  margin: 0;
  padding: var(--space-8);
  text-align: center;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* ---- card ---- */
/* Card + StatCard */

.xui-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  min-width: 0;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.xui-card--pad-sm { padding: var(--space-4); gap: var(--space-3); }
.xui-card--pad-lg { padding: var(--space-8); gap: var(--space-5); }
.xui-card--pad-none { padding: 0; gap: 0; overflow: hidden; }
.xui-card--borderless { border-color: transparent; }

.xui-card--hover:hover {
  border-color: color-mix(in oklab, var(--foreground) 18%, var(--border));
  box-shadow: var(--shadow-md);
}
.xui-card--clickable { cursor: pointer; }
.xui-card--clickable:active { transform: translateY(1px); }

.xui-card--accent-primary { border-left: 3px solid var(--primary); }
.xui-card--accent-success { border-left: 3px solid var(--success); }
.xui-card--accent-warning { border-left: 3px solid var(--warning); }
.xui-card--accent-destructive { border-left: 3px solid var(--destructive); }

/* --- regions ----------------------------------------------------------- */
.xui-card__header { display: flex; align-items: flex-start; gap: var(--space-3); }
.xui-card__heading { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.xui-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}
.xui-card__desc { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
.xui-card__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-foreground);
  flex: none;
}
.xui-card__action { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.xui-card__content { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.xui-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.xui-card--pad-none .xui-card__header,
.xui-card--pad-none .xui-card__content,
.xui-card--pad-none .xui-card__footer { padding: var(--space-5); }

/* --- StatCard ---------------------------------------------------------- */
.xui-stat { position: relative; gap: var(--space-2); overflow: hidden; padding: var(--space-5); }
.xui-stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.xui-stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
  color: var(--muted-foreground);
}
.xui-stat__icon { color: var(--muted-foreground); }
.xui-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4cqi, 1.875rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.xui-stat__bottom { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.xui-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.xui-stat__delta.is-up { color: var(--success); }
.xui-stat__delta.is-down { color: var(--destructive); }
.xui-stat__note { font-size: var(--text-xs); color: var(--muted-foreground); }
.xui-stat__spark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45%;
  height: 2.75rem;
  color: color-mix(in oklab, var(--primary) 45%, transparent);
  pointer-events: none;
}
.xui-stat--success .xui-stat__spark { color: color-mix(in oklab, var(--success) 45%, transparent); }
.xui-stat--warning .xui-stat__spark { color: color-mix(in oklab, var(--warning) 45%, transparent); }
.xui-stat--destructive .xui-stat__spark { color: color-mix(in oklab, var(--destructive) 45%, transparent); }

/* ---- carousel ---- */
/* Carousel — CSS scroll-snap, not transforms. */

.xui-carousel { position: relative; min-width: 0; }

.xui-carousel__viewport {
  display: flex;
  gap: var(--gap, var(--space-4));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: 2px;          /* room for focus rings on the slides */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.xui-carousel__viewport::-webkit-scrollbar { display: none; }
.xui-carousel__viewport:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-md); }

.xui-carousel__slide {
  flex: 0 0 calc((100% - var(--gap) * (var(--per-sm, 1) - 1)) / var(--per-sm, 1));
  min-width: 0;
  scroll-snap-align: start;
}
.xui-carousel--align-center .xui-carousel__slide { scroll-snap-align: center; }

@container xui-device (min-width: 640px) {
  .xui-carousel__slide { flex-basis: calc((100% - var(--gap) * (var(--per-md, 2) - 1)) / var(--per-md, 2)); }
}
@container xui-device (min-width: 1024px) {
  .xui-carousel__slide { flex-basis: calc((100% - var(--gap) * (var(--per, 3) - 1)) / var(--per, 3)); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 640px) { .xui-carousel__slide { flex-basis: calc((100% - var(--gap) * (var(--per-md, 2) - 1)) / var(--per-md, 2)); } }
  @media (min-width: 1024px) { .xui-carousel__slide { flex-basis: calc((100% - var(--gap) * (var(--per, 3) - 1)) / var(--per, 3)); } }
}

/* peek: shave a slice so the next slide is visibly there */
.xui-carousel--peek .xui-carousel__slide { flex-basis: calc((100% - var(--gap)) / var(--per-sm, 1) - 2.5rem); }
@container xui-device (min-width: 1024px) {
  .xui-carousel--peek .xui-carousel__slide { flex-basis: calc((100% - var(--gap) * (var(--per, 3) - 1)) / var(--per, 3) - 1.5rem); }
}

.xui-carousel__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-md);
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  z-index: 1;
}
.xui-carousel__arrow:hover { background: var(--accent); }
.xui-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }
.xui-carousel__arrow--prev { left: -0.75rem; }
.xui-carousel__arrow--next { right: -0.75rem; }

@container xui-device (max-width: 640px) {
  .xui-carousel__arrow { display: none; }   /* swipe is the interaction on a phone */
}

.xui-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: var(--space-3);
}
.xui-carousel__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--border);
  transition: width var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-carousel__dot[aria-selected="true"] { width: 1.1rem; background: var(--primary); }
@media (pointer: coarse) {
  .xui-carousel__dots { gap: 0.5rem; padding-block: 0.5rem; }
}

/* ---- chart ---- */
/* Chart */

.xui-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
}

.xui-chart__head { display: flex; flex-direction: column; gap: 0.15rem; }
.xui-chart__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
}
.xui-chart__desc { font-size: var(--text-xs); color: var(--muted-foreground); }

.xui-chart__plot { position: relative; min-width: 0; }
.xui-chart__svg { width: 100%; height: auto; overflow: visible; display: block; }

/* grid and axes stay recessive — they are scaffolding, not data */
.xui-chart__grid line {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}
.xui-chart__ylabels text,
.xui-chart__xlabels text {
  fill: var(--muted-foreground);
  font-size: 10px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.xui-chart__values text {
  fill: var(--muted-foreground);
  font-size: 10px;
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.xui-chart__sublabel { font-size: 8.5px; opacity: 0.75; }

/* a benchmark to be above or below — quiet, but unmistakably a rule */
.xui-chart__ref line {
  stroke: var(--foreground);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
.xui-chart__ref text {
  fill: var(--foreground);
  font-size: 9.5px;
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  opacity: 0.8;
}

/* an event on the timeline — 'QI feedback launch', 'T0' */
.xui-chart__notes line {
  stroke: var(--muted-foreground);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}
.xui-chart__notes text {
  fill: var(--muted-foreground);
  font-size: 9.5px;
  font-family: var(--font-sans);
}

/* marks */
.xui-chart__area { opacity: 0.14; }
.xui-chart__bar { transition: opacity var(--dur-fast) var(--ease-out); }
.xui-chart__dot { transition: r var(--dur-fast) var(--ease-out); }
.xui-chart__slice {
  stroke: var(--card);
  stroke-width: 2;          /* the 2px surface gap between adjacent marks */
  transition: opacity var(--dur-fast) var(--ease-out);
}

.xui-chart__svg[data-dim="true"] .xui-chart__bar,
.xui-chart__svg[data-dim="true"] .xui-chart__slice { opacity: 0.45; }
.xui-chart__bar[data-on="true"],
.xui-chart__slice[data-on="true"] { opacity: 1 !important; }

.xui-chart__donut-value {
  fill: var(--foreground);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.xui-chart__donut-label {
  fill: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
}

/* the crosshair layer must never intercept a pointer meant for a mark */
.xui-chart__hover { pointer-events: none; }

.xui-chart__crosshair {
  stroke: var(--muted-foreground);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
}

/* tooltip */
.xui-chart__tip {
  position: absolute;
  z-index: 2;
  min-width: 8rem;
  padding: var(--space-2) var(--space-3);
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs);
  pointer-events: none;
  transform: translate(-50%, -108%);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.xui-chart__tip-label {
  font-weight: var(--weight-semibold);
  margin-bottom: 0.25rem;
  color: var(--foreground);
}
.xui-chart__tip-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.6;
  color: var(--muted-foreground);   /* text wears text tokens, not series colour */
}
.xui-chart__tip-row b {
  margin-left: auto;
  font-weight: var(--weight-semibold);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.xui-chart__tip-dot { width: 0.5rem; height: 0.5rem; border-radius: 2px; flex: none; }

/* legend */
.xui-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.xui-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.xui-chart__legend-item[data-off="true"] { opacity: 0.4; }
.xui-chart__swatch { width: 0.625rem; height: 0.625rem; border-radius: 3px; flex: none; }

.xui-chart__empty {
  display: grid;
  place-items: center;
  min-height: 8rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* sparkline has no chrome at all */
.xui-chart--sparkline { gap: 0; }
.xui-chart--sparkline .xui-chart__svg { overflow: visible; }

@media (forced-colors: active) {
  .xui-chart__line, .xui-chart__bar, .xui-chart__slice { forced-color-adjust: none; }
}

/* funnel — stages of a process, each band as wide as its share of the first */

.xui-chart__band rect { transition: opacity var(--dur-fast) var(--ease-out); cursor: pointer; }
.xui-chart__band:hover rect { opacity: 0.85; }

.xui-chart__band-label {
  font-size: 12px;
  font-weight: var(--weight-medium);
  fill: var(--primary-foreground);
  dominant-baseline: middle;
}
.xui-chart__band-value {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  fill: var(--primary-foreground);
  font-variant-numeric: tabular-nums;
}

/* a late stage can be a tenth as wide as the first; its text moves outside the
   band rather than overlapping, and takes the page's own colour there */
.xui-chart__band-label.is-outside,
.xui-chart__band-value.is-outside { fill: var(--foreground); }
.xui-chart__band-drop {
  font-size: 11px;
  fill: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* ---- chat ---- */
/* Chat — launcher bottom-left, panel over the page, streaming bubbles */

.xui-chat__launcher {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 45;
  width: 3.1rem; height: 3.1rem; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--card) 55%, transparent);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  color: var(--foreground);
  box-shadow: 0 18px 40px -16px rgb(20 25 45 / 0.4);
  transition: transform var(--dur-base) var(--ease-spring);
}
.xui-chat__launcher:hover { transform: translateY(-3px) scale(1.05); }

.xui-chat__panel {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 46;
  width: min(26rem, calc(100vw - 2rem));
  height: min(34rem, calc(100dvh - 4rem));
  display: flex; flex-direction: column;
  border-radius: 1.35rem;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--card) 55%, transparent),
    color-mix(in oklab, var(--card) 34%, transparent));
  backdrop-filter: blur(34px) saturate(1.7);
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
  border: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
  box-shadow: 0 24px 60px -20px rgb(20 25 45 / 0.55),
              inset 0 1px 0 rgb(255 255 255 / 0.25);
  animation: xui-zoom-in var(--dur-base) var(--ease-spring);
}
.xui-chat__msg pre { background: color-mix(in oklab, var(--muted) 80%,
                     transparent); border-radius: 0.6rem;
                     padding: 0.5rem 0.65rem; overflow-x: auto;
                     font-size: 0.8rem; margin: 0.3rem 0; }
.xui-chat__msg code { background: color-mix(in oklab, var(--muted) 80%,
                      transparent); border-radius: 0.35rem;
                      padding: 0.05rem 0.3rem; font-size: 0.84em; }
.xui-chat__msg a { color: var(--primary); }
.xui-chat__msg--assistant b { font-weight: 650; }
.xui-chat__head { display: flex; align-items: center; gap: 0.5rem;
                  padding: 0.8rem 1rem 0.4rem; }
.xui-chat__panel[data-min="true"] { height: auto; }
.xui-chat__panel[data-min="true"] .xui-chat__log,
.xui-chat__panel[data-min="true"] .xui-chat__files { display: none; }
.xui-chat__title { font-weight: 650; font-size: 0.95rem; flex: 1; }
.xui-chat__close, .xui-chat__btn {
  display: grid; place-items: center; cursor: pointer;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 0;
  background: transparent; color: var(--muted-foreground);
}
.xui-chat__close:hover, .xui-chat__btn:hover {
  background: var(--accent); color: var(--accent-foreground); }
.xui-chat__btn--main { background: var(--primary);
                       color: var(--primary-foreground); flex: none; }
.xui-chat__btn--main:hover { background: var(--primary);
                             color: var(--primary-foreground);
                             filter: brightness(1.1); }
.xui-chat__btn[data-live="true"] { background: var(--destructive);
                                   color: #fff; animation: xui-pulse 1.2s
                                   ease-in-out infinite; }
@keyframes xui-pulse { 50% { opacity: 0.6; } }

.xui-chat__log { flex: 1; overflow-y: auto; padding: 0.6rem 1rem;
                 display: flex; flex-direction: column; gap: 0.55rem; }
.xui-chat__msg { max-width: 85%; padding: 0.55rem 0.8rem;
                 border-radius: 1.05rem; font-size: 0.92rem;
                 line-height: 1.45; white-space: pre-wrap;
                 overflow-wrap: anywhere; }
.xui-chat__msg--user { align-self: flex-end; background: var(--primary);
                       color: var(--primary-foreground);
                       border-bottom-right-radius: 0.3rem; }
.xui-chat__msg--assistant { align-self: flex-start;
                            background: transparent;
                            color: var(--foreground);
                            padding: 0.2rem 0.1rem;
                            max-width: 100%; }
.xui-chat__msg--thinking { opacity: 0.55; }

.xui-chat__bar { display: flex; align-items: flex-end; gap: 0.35rem;
                 padding: 0.55rem 0.7rem 0.7rem; }
.xui-chat__input { flex: 1; resize: none; border: 0; outline: none;
                   background: var(--muted); color: var(--foreground);
                   border-radius: 1.05rem; padding: 0.55rem 0.85rem;
                   font: inherit; font-size: 0.92rem; max-height: 7rem; }
.xui-chat__files { padding: 0 1rem 0.6rem; font-size: 0.78rem;
                   color: var(--muted-foreground); }

/* ---- checkbox ---- */
/* Checkbox */

.xui-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.xui-checkbox--align-start { align-items: flex-start; }
.xui-checkbox[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.xui-checkbox__native {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.xui-checkbox__box {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  border: 1px solid var(--input);
  border-radius: var(--radius-xs);
  background: var(--background);
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.xui-checkbox--align-start .xui-checkbox__box { margin-top: 0.1rem; }
.xui-checkbox--sm .xui-checkbox__box { width: 0.9rem; height: 0.9rem; }

.xui-checkbox:hover .xui-checkbox__box { border-color: var(--ring); }

.xui-checkbox__mark {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  color: var(--primary-foreground);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}

.xui-checkbox__native:checked + .xui-checkbox__box,
.xui-checkbox__native[data-indeterminate="true"] + .xui-checkbox__box {
  background: var(--primary);
  border-color: var(--primary);
}
.xui-checkbox__native:checked + .xui-checkbox__box .xui-checkbox__mark--check,
.xui-checkbox__native[data-indeterminate="true"] + .xui-checkbox__box .xui-checkbox__mark--dash {
  opacity: 1;
  transform: none;
}
/* indeterminate wins over checked: show the dash alone (same specificity, later rule) */
.xui-checkbox__native[data-indeterminate="true"] + .xui-checkbox__box .xui-checkbox__mark--check {
  opacity: 0;
  transform: scale(0.6);
}
.xui-checkbox__native:focus-visible + .xui-checkbox__box {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.xui-checkbox__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.xui-checkbox__label { font-size: var(--text-sm); line-height: 1.35; }
.xui-checkbox__desc { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.45; }

/* card form — a whole selectable row */
.xui-checkbox--card {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-checkbox--card:hover { background: var(--accent); }
.xui-checkbox--card.is-checked {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 7%, var(--card));
}

@media (pointer: coarse) {
  .xui-checkbox { min-height: 2.25rem; }
}

/* ---- chip ---- */
/* Chip */

.xui-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  max-width: 100%;
  min-width: 0;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.xui-chip--sm { padding: 0.05rem 0.4rem; font-size: 0.65rem; }
.xui-chip--lg { padding: 0.3rem 0.7rem; font-size: var(--text-sm); }

.xui-chip--default { background: var(--primary); color: var(--primary-foreground); }
.xui-chip--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.xui-chip--outline { border-color: var(--border); color: var(--foreground); }
.xui-chip--success { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
.xui-chip--warning { background: color-mix(in oklab, var(--warning) 18%, transparent); color: var(--warning); }
.xui-chip--destructive { background: color-mix(in oklab, var(--destructive) 13%, transparent); color: var(--destructive); }

.xui-chip--interactive { cursor: pointer; }
.xui-chip--interactive:hover { border-color: var(--ring); }
.xui-chip--interactive:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.xui-chip.is-selected {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.xui-chip[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.xui-chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xui-chip__icon { display: flex; flex: none; }
.xui-chip__avatar { width: 1rem; height: 1rem; border-radius: 50%; object-fit: cover; flex: none; }
.xui-chip__count {
  padding-inline: 0.25rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, currentColor 18%, transparent);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.xui-chip__x {
  display: flex;
  padding: 0.1rem;
  margin-inline-end: -0.15rem;
  border-radius: var(--radius-full);
  opacity: 0.6;
  cursor: pointer;
  flex: none;
}
.xui-chip__x:hover { opacity: 1; background: color-mix(in oklab, currentColor 20%, transparent); }
.xui-chip__x:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* ---- code ---- */
/* Code */

.xui-code {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  overflow: hidden;
  min-width: 0;
}

.xui-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 55%, var(--muted));
}

.xui-code__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.xui-code__copy {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-code__copy:hover { background: var(--accent); color: var(--foreground); }
.xui-code__copy-idle,
.xui-code__copy-done { display: flex; align-items: center; gap: 0.3rem; }
.xui-code__copy-done { display: none; color: var(--primary); }
.xui-code__copy[data-copied="true"] .xui-code__copy-idle { display: none; }
.xui-code__copy[data-copied="true"] .xui-code__copy-done { display: flex; }

.xui-code__pre {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  tab-size: 4;
}

.xui-code__lines {
  flex: none;
  text-align: right;
  color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
  user-select: none;
  white-space: pre;
}

.xui-code__body { display: block; min-width: 0; white-space: pre; }
.xui-code--wrap .xui-code__body { white-space: pre-wrap; word-break: break-word; }

/* one accent hue for syntax, so a code block never fights the page */
.xui-code .tok-k { color: var(--primary); font-weight: var(--weight-medium); }
.xui-code .tok-s { color: var(--series-3); }
.xui-code .tok-n { color: var(--series-2); }
.xui-code .tok-c { color: var(--muted-foreground); font-style: italic; }

/* ---- code_editor ---- */
/* CodeEditor — a transparent textarea over a highlighted <pre> */

.xui-ced {
  --ced-pad: var(--space-3);
  --ced-line: 1.65;
  display: flex;
  min-width: 0;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--muted);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.xui-ced:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}
.xui-ced[data-invalid="true"] { border-color: var(--destructive); }
.xui-ced--readonly { background: color-mix(in oklab, var(--muted) 70%, var(--background)); }

.xui-ced__lines {
  display: flex;
  flex-direction: column;
  flex: none;
  padding: var(--ced-pad) 0 var(--ced-pad) var(--space-3);
  text-align: right;
  color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--ced-line);
  user-select: none;
  overflow: hidden;
}

.xui-ced__stack { position: relative; flex: 1; min-width: 0; }

/* the two layers must agree on every metric or the caret drifts */
.xui-ced__paint,
.xui-ced__input {
  margin: 0;
  padding: var(--ced-pad);
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--ced-line);
  tab-size: 2;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.xui-ced--wrap .xui-ced__paint,
.xui-ced--wrap .xui-ced__input { white-space: pre-wrap; word-break: break-word; }

.xui-ced__paint {
  position: absolute;
  inset: 0;
  overflow: auto;
  pointer-events: none;
  color: var(--foreground);
}
.xui-ced__paint code { font: inherit; }

.xui-ced__input {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 4rem;
  resize: vertical;
  background: transparent;
  color: transparent;          /* the <pre> underneath provides the colour */
  caret-color: var(--foreground);
  outline: none;
  overflow: auto;
}
.xui-ced__input::placeholder { color: var(--muted-foreground); }
.xui-ced__input::selection { background: color-mix(in oklab, var(--ring) 30%, transparent); }

/* the same token colours as Code, so a listing and an editor match */
.xui-ced .tok-k { color: var(--primary); font-weight: var(--weight-medium); }
.xui-ced .tok-s { color: var(--series-3); }
.xui-ced .tok-n { color: var(--series-2); }
.xui-ced .tok-c { color: var(--muted-foreground); font-style: italic; }

/* ---- collapsible ---- */
/* Collapsible */

.xui-collapsible { display: flex; flex-direction: column; min-width: 0; }

.xui-collapsible__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  color: var(--foreground);
  border-radius: var(--radius-sm);
}
.xui-collapsible__trigger:hover:not([disabled]) { color: var(--primary); }
.xui-collapsible__custom { display: flex; }

.xui-collapsible__lead { display: flex; color: var(--muted-foreground); flex: none; }
.xui-collapsible__title { flex: 1; min-width: 0; }
.xui-collapsible__hint { font-size: var(--text-xs); color: var(--muted-foreground); font-weight: var(--weight-normal); }
.xui-collapsible__chevron {
  display: flex;
  color: var(--muted-foreground);
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.xui-collapsible[data-open="true"] .xui-collapsible__chevron { transform: rotate(180deg); }

.xui-collapsible__panel { overflow: hidden; }
.xui-collapsible__panel[data-animating="true"] { transition: height var(--dur-base) var(--ease-out); }
.xui-collapsible__content {
  padding-block: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.xui-collapsible--card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding-inline: var(--space-4);
}
.xui-collapsible--card .xui-collapsible__trigger { padding-block: var(--space-3); }

/* ---- color_picker ---- */
/* ColorPicker */

.xui-color { gap: var(--space-2); padding-inline: var(--space-2); cursor: pointer; }

.xui-color__well {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, var(--foreground) 15%, transparent);
  box-shadow: var(--shadow-xs);
}

/* the native input covers the control, so a click anywhere opens the picker */
.xui-color__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
.xui-color { position: relative; }

.xui-color__hex {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.xui-color__swatches { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.xui-color__swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, var(--foreground) 15%, transparent);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}
.xui-color__swatch:hover { transform: scale(1.12); }
.xui-color__swatch.is-current { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.xui-color__swatch:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (pointer: coarse) { .xui-color__swatch { width: 1.6rem; height: 1.6rem; } }

/* ---- combobox ---- */
/* Combobox */

.xui-combobox__trigger {
  justify-content: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  text-align: left;
  height: auto;
  min-height: var(--control-h);
  padding-block: 0.25rem;
  font-weight: var(--weight-normal);
}
.xui-combobox__trigger[aria-expanded="true"] {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}

.xui-combobox__icon { display: flex; color: var(--muted-foreground); flex: none; }

.xui-combobox__value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  overflow: hidden;
}
.xui-combobox__value .is-placeholder {
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xui-combobox__token {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.25rem 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: var(--text-xs);
  max-width: 12rem;
}
.xui-combobox__token-x {
  display: flex;
  padding: 0.1rem;
  border-radius: var(--radius-full);
  opacity: 0.6;
}
.xui-combobox__token-x:hover { opacity: 1; background: color-mix(in oklab, currentColor 20%, transparent); }

.xui-combobox__more { font-size: var(--text-xs); color: var(--muted-foreground); }

.xui-combobox__clear,
.xui-combobox__arrow { display: flex; color: var(--muted-foreground); flex: none; }
.xui-combobox__clear { padding: 0.15rem; border-radius: var(--radius-full); }
.xui-combobox__clear:hover { background: var(--accent); color: var(--foreground); }

.xui-combobox__panel { min-width: 12rem; }
.xui-combobox__create { color: var(--primary); font-weight: var(--weight-medium); }

/* ---- command ---- */
/* Command palette */

.xui-command {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: start center;
  padding: max(8vh, var(--space-8)) var(--space-4) var(--space-4);
}
.xui-command[data-open="false"] { display: none; }

.xui-command__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
  max-height: min(30rem, 70dvh);
  display: flex;
  flex-direction: column;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: xui-zoom-in var(--dur-base) var(--ease-out);
}

/* inline mode: a normal block on the page, no overlay */
.xui-command--inline {
  position: static;
  inset: auto;
  display: block;
  padding: 0;
}
.xui-command--inline .xui-command__panel {
  max-width: none;
  animation: none;
  box-shadow: var(--shadow-sm);
}

.xui-command__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  flex: none;
}
.xui-command__search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-base);
  color: var(--foreground);
}
.xui-command__esc { display: flex; opacity: 0.7; }
.xui-command__esc:hover { opacity: 1; }

.xui-command__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.xui-command__group {
  padding: var(--space-2) var(--space-2) 0.25rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
  color: var(--muted-foreground);
}

.xui-command__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  cursor: pointer;
  color: inherit;
}
.xui-command__item[data-active="true"] { background: var(--accent); color: var(--accent-foreground); }
.xui-command__item[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.xui-command__item .xui-menu__text { gap: 0.1rem; }

.xui-command__empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.xui-command__footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  flex: none;
}
.xui-command__footer span { display: inline-flex; align-items: center; gap: 0.25rem; }

/* in modal mode the palette is portaled outside the xui-device container, so
   the narrow rule keys off the html flag the runtime maintains instead */
html[data-narrow="true"] .xui-command__footer { display: none; }

/* ---- context_menu ---- */
/* ContextMenu */

.xui-contextmenu { display: contents; }
/* adaptive: as tall as its items — scrolls only past the viewport itself */
.xui-contextmenu__panel { min-width: 10rem;
                          max-height: calc(100dvh - 1rem); }
.xui-contextmenu__panel .xui-menu__item {
  font-size: var(--text-xs);
  padding: 0.32rem 0.45rem;
}

/* while a long-press is being measured, suppress the OS text selection */
.xui-contextmenu[data-pressing="true"] { -webkit-user-select: none; user-select: none; }

/* ---- data_table ---- */
/* DataTable — reuses the .xui-table surface, adds the chrome around it. */

.xui-dtable { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.xui-dtable__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.xui-dtable__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-dtable__selected {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.xui-dtable__tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }

.xui-dtable__search { width: min(16rem, 100%); gap: var(--space-2); }
.xui-dtable__search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  color: inherit;
}
.xui-dtable__search input::-webkit-search-cancel-button { display: none; }
.xui-dtable__search .xui-icon { color: var(--muted-foreground); }

/* sortable headers */
.xui-dtable__sortable { cursor: pointer; user-select: none; }
.xui-dtable__sortable:hover { color: var(--foreground); }
.xui-dtable__sortable:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.xui-dtable__thinner { display: inline-flex; align-items: center; gap: 0.3rem; }
.xui-dtable__sorticon { display: inline-flex; opacity: 0.35; transition: opacity var(--dur-fast) var(--ease-out); }
.xui-dtable__sortable:hover .xui-dtable__sorticon { opacity: 0.7; }
.xui-dtable__sorticon.is-on { opacity: 1; color: var(--primary); }

/* selection */
.xui-dtable__check { width: 2.5rem; text-align: center; }
.xui-dtable__check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.xui-table__tr.is-selected .xui-table__td {
  background: color-mix(in oklab, var(--primary) 7%, transparent);
}

/* row actions */
.xui-dtable__actions-col { width: 3rem; text-align: right; }
.xui-dtable__action {
  display: inline-flex;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-table__tr:hover .xui-dtable__action,
.xui-dtable__action:focus-visible { opacity: 1; }
.xui-dtable__action:hover { background: var(--accent); color: var(--foreground); }
@media (pointer: coarse) { .xui-dtable__action { opacity: 1; } }

/* footer */
.xui-dtable__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.xui-dtable__count { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.xui-dtable__pager { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }

@container xui-device (max-width: 560px) {
  .xui-dtable__tools { margin-left: 0; width: 100%; }
  .xui-dtable__search { width: 100%; }
}

/* ---- date_picker ---- */
/* DatePicker */

.xui-datepicker__trigger {
  justify-content: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  text-align: left;
  font-weight: var(--weight-normal);
  color: var(--foreground);
}
.xui-datepicker__trigger[aria-expanded="true"] {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}
.xui-datepicker__trigger .xui-icon { color: var(--muted-foreground); }

.xui-datepicker__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xui-datepicker__value.is-placeholder { color: var(--muted-foreground); }

.xui-datepicker__clear {
  display: flex;
  padding: 0.15rem;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
  flex: none;
}
.xui-datepicker__clear:hover { background: var(--accent); color: var(--foreground); }

/* the panel is portaled; it carries no menu chrome because the Calendar
   already has its own card surface */
.xui-datepicker__panel {
  position: fixed;
  z-index: var(--z-popover);
  animation: xui-zoom-in var(--dur-fast) var(--ease-out);
}
.xui-datepicker__panel[data-state="closed"] { animation: xui-fade-out 100ms var(--ease-out) forwards; }
.xui-datepicker__panel .xui-cal { box-shadow: var(--shadow-lg); background: var(--popover); }

/* ---- dialog ---- */
/* Dialog */

.xui-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.xui-dialog[data-open="false"] { display: none; }

.xui-dialog__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100dvh - var(--space-8));
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  animation: xui-zoom-in var(--dur-base) var(--ease-out);
}

.xui-dialog--sm .xui-dialog__panel { max-width: 24rem; }
.xui-dialog--lg .xui-dialog__panel { max-width: 44rem; }
.xui-dialog--xl .xui-dialog__panel { max-width: 60rem; }
.xui-dialog--full .xui-dialog__panel { max-width: none; width: calc(100vw - var(--space-8)); height: calc(100dvh - var(--space-8)); }

.xui-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.xui-dialog__heading { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }
.xui-dialog__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}
.xui-dialog__desc { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.55; }
.xui-dialog__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-foreground);
}
.xui-dialog__x {
  display: flex;
  padding: 0.3rem;
  margin: -0.3rem -0.3rem auto auto;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  flex: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-dialog__x:hover { background: var(--accent); color: var(--foreground); }

.xui-dialog__body {
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}
.xui-dialog--scroll .xui-dialog__body { overflow-y: auto; }

.xui-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 35%, transparent);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* On a phone a centred modal reads better as a bottom sheet.
   Keyed off html[data-narrow] rather than a media query: the dialog is
   portaled, so a container query cannot reach it, and a media query would
   measure the desktop window during a mobile preview. The runtime sets the
   attribute from the *effective* width in both cases. */
html[data-narrow="true"] .xui-dialog { padding: 0; place-items: end center; }
html[data-narrow="true"] .xui-dialog__panel {
  max-width: none;
  max-height: 92dvh;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  animation: xui-slide-in-bottom var(--dur-base) var(--ease-out);
}
html[data-narrow="true"] .xui-dialog__footer { border-radius: 0; }
html[data-narrow="true"] .xui-dialog__footer > .xui-btn { flex: 1; }

/* ---- diff ---- */
/* Diff */

.xui-diff { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.xui-diff__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.xui-diff__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.xui-diff__counts { display: flex; gap: 0.35rem; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.xui-diff__count { padding: 0.05rem 0.35rem; border-radius: var(--radius-full); font-weight: var(--weight-semibold); }
.xui-diff__count--add { background: color-mix(in oklab, var(--success) 16%, transparent); color: var(--success); }
.xui-diff__count--remove { background: color-mix(in oklab, var(--destructive) 14%, transparent); color: var(--destructive); }
.xui-diff__count--change { background: color-mix(in oklab, var(--warning) 18%, transparent); color: var(--warning); }

.xui-diff__box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  overflow: hidden;
}

.xui-diff__labels {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 55%, var(--muted));
}
.xui-diff--split .xui-diff__labels { grid-template-columns: 1fr 1fr; }
.xui-diff__label {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
}
.xui-diff--split .xui-diff__label + .xui-diff__label { border-inline-start: 1px solid var(--border); }

.xui-diff__rows { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; }

.xui-diff__row { display: grid; grid-template-columns: 1fr; cursor: pointer; }
.xui-diff--split .xui-diff__row { grid-template-columns: 1fr 1fr; }
.xui-diff__row:hover { outline: 1px solid var(--ring); outline-offset: -1px; }

.xui-diff__side { display: flex; gap: var(--space-2); padding-inline: var(--space-2); min-width: 0; }
.xui-diff--split .xui-diff__side + .xui-diff__side { border-inline-start: 1px solid var(--border); }

.xui-diff__no {
  flex: none;
  min-width: 2rem;
  text-align: right;
  color: color-mix(in oklab, var(--muted-foreground) 65%, transparent);
  user-select: none;
}
.xui-diff__sign { flex: none; width: 1ch; user-select: none; }
.xui-diff__text { min-width: 0; white-space: pre; }
.xui-diff--wrap .xui-diff__text { white-space: pre-wrap; word-break: break-word; }

/* colour carries the meaning, and so does the sign — never colour alone */
.xui-diff__row[data-kind="add"] .xui-diff__side[data-side="right"],
.xui-diff__row[data-kind="add"] > .xui-diff__side:only-child {
  background: color-mix(in oklab, var(--success) 12%, transparent);
}
.xui-diff__row[data-kind="remove"] .xui-diff__side[data-side="left"],
.xui-diff__row[data-kind="remove"] > .xui-diff__side:only-child {
  background: color-mix(in oklab, var(--destructive) 11%, transparent);
}
.xui-diff__row[data-kind="change"] .xui-diff__side[data-side="left"] {
  background: color-mix(in oklab, var(--destructive) 11%, transparent);
}
.xui-diff__row[data-kind="change"] .xui-diff__side[data-side="right"] {
  background: color-mix(in oklab, var(--success) 12%, transparent);
}

.xui-diff__skip {
  padding: 0.2rem var(--space-3);
  background: color-mix(in oklab, var(--foreground) 5%, transparent);
  color: var(--muted-foreground);
  font-size: 0.65rem;
  text-align: center;
  user-select: none;
}

.xui-diff__same {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}
.xui-diff__same .xui-icon { color: var(--success); }

/* ---- direction ---- */
/* Direction */

.xui-dir { min-width: 0; }
.xui-dir[dir="rtl"] { text-align: right; }

/* The few places where a physical value is unavoidable get mirrored here.
   Everything else in xui already uses logical properties and needs nothing. */
.xui-dir[dir="rtl"] .xui-accordion__chevron,
.xui-dir[dir="rtl"] .xui-collapsible__chevron,
.xui-dir[dir="rtl"] .xui-select__arrow { transform: scaleX(-1); }

.xui-dir[dir="rtl"] .xui-crumbs__sep .xui-icon,
.xui-dir[dir="rtl"] .xui-menu__check .xui-icon,
.xui-dir[dir="rtl"] .xui-pager__btn .xui-icon { transform: scaleX(-1); }

.xui-dir[dir="rtl"] .xui-drawer__panel,
.xui-dir[dir="rtl"] .xui-toaster { direction: rtl; }

/* ---- drawer ---- */
/* Drawer — bottom sheet */

.xui-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.xui-drawer[data-open="false"] { display: none; }

.xui-drawer__panel {
  position: absolute;
  z-index: 1;                 /* above the scrim, which sits at 0 */
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-xl);
  animation: xui-slide-in-bottom var(--dur-base) var(--ease-out);
  touch-action: none;
  will-change: transform;
}
.xui-drawer--content .xui-drawer__panel { max-height: 88dvh; }
.xui-drawer--half .xui-drawer__panel { height: 50dvh; }
.xui-drawer--full .xui-drawer__panel { height: 94dvh; }

/* while a finger is on it, drop the entry animation and follow the drag */
.xui-drawer__panel[data-dragging="true"] { animation: none; transition: none; }
.xui-drawer__panel[data-settling="true"] { transition: transform var(--dur-base) var(--ease-out); }

.xui-drawer__handle {
  display: grid;
  place-items: center;
  padding: var(--space-3) 0 var(--space-2);
  cursor: grab;
  flex: none;
}
.xui-drawer__handle:active { cursor: grabbing; }
.xui-drawer__handle span {
  width: 2.25rem;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--foreground) 22%, transparent);
}

.xui-drawer__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-4);
  flex: none;
}
.xui-drawer__heading { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.xui-drawer__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-drawer__desc { font-size: var(--text-sm); color: var(--muted-foreground); }
.xui-drawer__x { display: flex; padding: 0.3rem; border-radius: var(--radius-sm); color: var(--muted-foreground); }

.xui-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  touch-action: pan-y;
}

.xui-drawer__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--popover);
  flex: none;
}

/* ---- dropdown_menu ---- */
/* DropdownMenu — the panel uses the shared .xui-menu surface. */

.xui-dropdown { display: inline-flex; }
.xui-dropdown__trigger { display: inline-flex; }
.xui-dropdown__panel { min-width: 11rem; }

/* ---- empty ---- */
/* Empty */

.xui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  min-width: 0;
}
.xui-empty--sm { padding: var(--space-6) var(--space-4); }
.xui-empty--lg { padding: var(--space-16) var(--space-6); }
.xui-empty--bordered {
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--muted) 40%, transparent);
}

.xui-empty__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--muted-foreground);
}
.xui-empty--error .xui-empty__icon {
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  color: var(--destructive);
}
.xui-empty--search .xui-empty__icon { background: var(--accent); color: var(--accent-foreground); }

.xui-empty__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-empty__desc {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  max-width: 42ch;
  line-height: 1.6;
}
.xui-empty__action {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-3);
}

/* ---- fab ---- */
/* Fab */

.xui-fab {
  position: fixed;
  z-index: var(--z-sticky, 30);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}
.xui-fab--inline { position: static; }

.xui-fab--bottom-right { right: var(--space-5); bottom: var(--space-5); }
.xui-fab--bottom-left  { left: var(--space-5); bottom: var(--space-5); align-items: flex-start; }
.xui-fab--top-right    { right: var(--space-5); top: var(--space-5); flex-direction: column-reverse; }
.xui-fab--top-left     { left: var(--space-5); top: var(--space-5); flex-direction: column-reverse; align-items: flex-start; }
.xui-fab--bottom-center { left: 50%; bottom: var(--space-5); transform: translateX(-50%); align-items: center; }

.xui-fab__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.xui-fab__main:hover { transform: translateY(-1px); box-shadow: var(--shadow-xl, var(--shadow-lg)); }
.xui-fab__main:active { transform: translateY(0) scale(0.97); }
.xui-fab__main:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.xui-fab__main:disabled { opacity: 0.55; cursor: not-allowed; }

.xui-fab--sm .xui-fab__main { width: 2.5rem; height: 2.5rem; }
.xui-fab--lg .xui-fab__main { width: 4rem; height: 4rem; }

.xui-fab--secondary .xui-fab__main { background: var(--secondary); color: var(--secondary-foreground); }
.xui-fab--destructive .xui-fab__main { background: var(--destructive); color: var(--destructive-foreground); }

.xui-fab--extended .xui-fab__main { width: auto; padding-inline: var(--space-5); }
.xui-fab__label { font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }

.xui-fab__icon { display: flex; transition: transform var(--dur-base) var(--ease-spring); }
.xui-fab.is-open .xui-fab__icon { transform: rotate(45deg); }

.xui-fab__actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: inherit; }

.xui-fab__action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.35rem 0.35rem var(--space-3);
  border-radius: var(--radius-full);
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  cursor: pointer;
  animation: xui-fade-in var(--dur-fast) var(--ease-out);
}
.xui-fab__action:hover { background: var(--accent); }
.xui-fab__action:disabled { opacity: 0.55; cursor: not-allowed; }
.xui-fab__action-label { white-space: nowrap; }
.xui-fab__action-icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-full);
  background: var(--muted);
  flex: none;
}

/* left-hand corners read the other way round */
.xui-fab--bottom-left .xui-fab__action,
.xui-fab--top-left .xui-fab__action { flex-direction: row-reverse; padding: 0.35rem var(--space-3) 0.35rem 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  .xui-fab__main, .xui-fab__icon { transition: none; }
  .xui-fab__action { animation: none; }
}

/* ---- field ---- */
/* Field / FieldGroup / FieldSet */

.xui-fieldrow { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.xui-fieldrow__side { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.xui-fieldrow__control { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

/* horizontal: label on the left, control on the right, both aligned to the top */
.xui-fieldrow--horizontal {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}
.xui-fieldrow--horizontal .xui-fieldrow__side { flex: 1; max-width: 28rem; }
.xui-fieldrow--horizontal .xui-fieldrow__control { flex: none; min-width: 12rem; }

/* responsive: horizontal only while the container is wide enough */
@container xui-device (min-width: 640px) {
  .xui-fieldrow--responsive {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .xui-fieldrow--responsive .xui-fieldrow__side { flex: 1; max-width: 28rem; }
  .xui-fieldrow--responsive .xui-fieldrow__control { flex: none; min-width: 12rem; }
}

.xui-fieldgroup { display: flex; flex-direction: column; min-width: 0; }
.xui-fieldgroup--divided > * + * {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
}

.xui-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 0;
}
.xui-fieldset__legend {
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-fieldset__desc { margin-bottom: var(--space-4); }
.xui-fieldset__body { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- heatmap ---- */
/* Heatmap */

.xui-heatmap {
  --heat: var(--primary);
  --heat-foreground: var(--primary-foreground);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  min-width: 0;
}
.xui-heatmap--success { --heat: var(--success); --heat-foreground: var(--success-foreground); }
.xui-heatmap--warning { --heat: var(--warning); --heat-foreground: var(--warning-foreground); }
.xui-heatmap--destructive { --heat: var(--destructive); --heat-foreground: var(--destructive-foreground); }
.xui-heatmap--neutral { --heat: var(--foreground); --heat-foreground: var(--background); }

.xui-heatmap__head { display: flex; flex-direction: column; gap: 0.1rem; }
.xui-heatmap__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.xui-heatmap__desc { font-size: var(--text-xs); color: var(--muted-foreground); }

.xui-heatmap__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.xui-heatmap__table { border-collapse: separate; border-spacing: 2px; width: 100%; }

.xui-heatmap__colhead,
.xui-heatmap__rowhead {
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
  white-space: nowrap;
  text-align: center;
}
.xui-heatmap__rowhead { text-align: right; padding-inline-end: var(--space-2); }
.xui-heatmap__corner { width: 1px; }

.xui-heatmap__cell {
  position: relative;
  height: 1.6rem;
  min-width: 1.6rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-align: center;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  /* one hue, varying only in strength — the ramp reads as a single scale */
  background: color-mix(in oklab, var(--heat) calc(var(--strength, 0) * 100%), var(--muted));
  transition: outline-color var(--dur-fast) var(--ease-out);
  outline: 2px solid transparent;
  outline-offset: -2px;
}
/* strong cells take the foreground paired with the scale's own hue, so a
   warning ramp never prints primary-foreground text on amber */
.xui-heatmap__cell.is-dark { color: var(--heat-foreground); }
.xui-heatmap__cell:hover { outline-color: var(--foreground); }
.xui-heatmap__cell:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.xui-heatmap__legend { display: flex; align-items: center; gap: var(--space-2); }
.xui-heatmap__bound { font-size: 0.65rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.xui-heatmap__ramp {
  flex: 1;
  max-width: 9rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background: linear-gradient(to right,
    color-mix(in oklab, var(--heat) 8%, var(--muted)),
    var(--heat));
}

.xui-heatmap__empty { margin: 0; padding: var(--space-6); text-align: center;
  color: var(--muted-foreground); font-size: var(--text-sm); }

/* ---- hover_card ---- */
/* HoverCard */

.xui-hovercard { display: inline-flex; }
.xui-hovercard__trigger { display: inline-flex; }

.xui-hovercard__panel {
  padding: var(--space-4);
  gap: var(--space-3);
  overflow: visible;
  max-height: none;
}

/* enrichment only — never the sole route to the information */
@media (pointer: coarse) {
  .xui-hovercard__panel { display: none !important; }
}

/* ---- icon ---- */
/* Icon */

.xui-iconbox { display: inline-flex; align-items: center; justify-content: center; color: inherit; }

.xui-iconbox.xui-icon--muted { color: var(--muted-foreground); }
.xui-iconbox.xui-icon--primary { color: var(--primary); }
.xui-iconbox.xui-icon--success { color: var(--success); }
.xui-iconbox.xui-icon--warning { color: var(--warning); }
.xui-iconbox.xui-icon--destructive { color: var(--destructive); }

.xui-iconbox.xui-icon--spin > .xui-icon { animation: xui-spin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .xui-iconbox.xui-icon--spin > .xui-icon { animation-duration: 3s; }
}

/* ---- image ---- */
/* Image */

.xui-image { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; }

.xui-image__box {
  position: relative;
  overflow: hidden;
  background: var(--muted);
  min-width: 0;
}
.xui-image--r-none .xui-image__box { border-radius: 0; }
.xui-image--r-sm   .xui-image__box { border-radius: var(--radius-sm); }
.xui-image--r-md   .xui-image__box { border-radius: var(--radius-md); }
.xui-image--r-lg   .xui-image__box { border-radius: var(--radius-lg); }
.xui-image--r-xl   .xui-image__box { border-radius: var(--radius-xl); }
.xui-image--r-full .xui-image__box { border-radius: var(--radius-full); }

.xui-image__img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.xui-image__img[data-loaded="true"] { opacity: 1; }
.xui-image__img[data-failed="true"] { opacity: 1; }

.xui-image__empty {
  display: grid;
  place-items: center;
  min-height: 6rem;
  height: 100%;
  color: var(--muted-foreground);
}

.xui-image__caption {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  line-height: 1.45;
}

.xui-image--interactive .xui-image__box { cursor: crosshair; }

/* ---- input ---- */
/* Input (and the shared .xui-field / .xui-label used by every form control) */

.xui-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* a field is often a flex item in a Row; without this it sizes to its
   content and a composer ends up narrower than its own placeholder */
.xui-field--full { width: 100%; flex: 1 1 auto; }

.xui-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color: var(--foreground);
  user-select: none;
}
.xui-label__req { color: var(--destructive); }

.xui-input { gap: var(--space-2); padding-inline: var(--space-3); }
.xui-input--full { width: 100%; }

.xui-input__el {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
  color: inherit;
}
.xui-input__el::-webkit-search-cancel-button { display: none; }
.xui-input__el[type="number"]::-webkit-outer-spin-button,
.xui-input__el[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }

.xui-input__icon { display: flex; color: var(--muted-foreground); flex: none; }
.xui-input__icon--right { margin-inline-start: auto; }

.xui-input__clear {
  display: flex;
  padding: 0.2rem;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
  flex: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-input__clear:hover { background: var(--accent); color: var(--foreground); }

/* file inputs keep the same surface without the browser's native chrome */
.xui-input__el[type="file"] { padding-block: 0.35rem; font-size: var(--text-xs); }
.xui-input__el[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.xui-input__el[type="color"] { padding: 0; height: 1.6rem; cursor: pointer; }

/* ---- input_group ---- */
/* InputGroup */

.xui-inputgroup {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.xui-inputgroup:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}
.xui-inputgroup[data-invalid="true"] { border-color: var(--destructive); }
.xui-inputgroup[aria-disabled="true"] { opacity: 0.55; background: var(--muted); }
.xui-inputgroup.xui-control--sm { height: var(--control-h-sm); font-size: var(--text-xs); }
.xui-inputgroup.xui-control--lg { height: var(--control-h-lg); font-size: var(--text-base); }

.xui-inputgroup__el {
  flex: 1;
  min-width: 0;
  padding-inline: var(--space-3);
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  color: inherit;
}

.xui-inputgroup__addon {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline: var(--space-3);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  white-space: nowrap;
  border-inline-end: 1px solid var(--border);
}
.xui-inputgroup__addon:last-child { border-inline-end: none; border-inline-start: 1px solid var(--border); }

/* components dropped into the before/after slots lose their own edges so the
   group reads as one control */
.xui-inputgroup__slot { display: flex; align-items: stretch; }
.xui-inputgroup__slot > * {
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.xui-inputgroup__slot:first-child > * { border-inline-end: 1px solid var(--border); }
.xui-inputgroup__slot:last-child > * { border-inline-start: 1px solid var(--border); }
.xui-inputgroup__slot .xui-btn { align-self: stretch; }

@media (pointer: coarse) { .xui-inputgroup { min-height: var(--tap); } }

/* ---- input_otp ---- */
/* InputOTP */

.xui-otp__boxes { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.xui-otp__group { display: flex; gap: 0.25rem; }

.xui-otp__sep {
  color: var(--muted-foreground);
  font-size: var(--text-lg);
  user-select: none;
  padding-inline: 0.15rem;
}

.xui-otp__cell {
  width: 2.5rem;
  height: 3rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  caret-color: var(--primary);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.xui-otp__cell:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
  z-index: 1;
}
.xui-otp__cell:not(:placeholder-shown) { border-color: color-mix(in oklab, var(--primary) 45%, var(--input)); }
.xui-otp__boxes[data-invalid="true"] .xui-otp__cell { border-color: var(--destructive); }
.xui-otp__cell[disabled] { opacity: 0.55; background: var(--muted); }

@container xui-device (max-width: 420px) {
  .xui-otp__cell { width: 2.1rem; height: 2.6rem; font-size: var(--text-base); }
}

/* ---- item ---- */
/* Item + ItemList */

.xui-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.xui-item--sm { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
.xui-item--lg { padding: var(--space-4) var(--space-5); gap: var(--space-4); }
.xui-item--align-start { align-items: flex-start; }

.xui-item--interactive { cursor: pointer; }
.xui-item--interactive:hover { background: var(--accent); }
.xui-item--interactive:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.xui-item.is-selected { background: var(--accent); color: var(--accent-foreground); }
.xui-item.is-selected .xui-item__title { font-weight: var(--weight-semibold); }

.xui-item--card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.xui-item--ghost { padding-inline: 0; }

.xui-item__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
}
.xui-item__avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.xui-item__media { flex: none; display: flex; }

.xui-item__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.xui-item__line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.xui-item__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xui-item__desc {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xui-item__meta {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  white-space: nowrap;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.xui-item__action { display: flex; align-items: center; gap: var(--space-1); flex: none; }

/* list */
.xui-itemlist { display: flex; flex-direction: column; min-width: 0; }
.xui-itemlist--bordered {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
}
.xui-itemlist--divided > * + * { border-top: 1px solid var(--border); }

@container xui-device (max-width: 480px) {
  .xui-item__meta { display: none; }
}

/* ---- json_view ---- */
/* JsonView */

.xui-json { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.xui-json__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.xui-json__label { font-size: var(--text-sm); font-weight: var(--weight-medium); }

.xui-json__copy {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.xui-json__copy:hover { background: var(--accent); color: var(--foreground); }

.xui-json__box {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
}

.xui-json__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-inline-start: calc(var(--depth, 0) * 1rem);
  min-width: 0;
}
.xui-json__row[hidden] { display: none; }

.xui-json__twist {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex: none;
  border-radius: var(--radius-xs);
  color: var(--muted-foreground);
  transition: transform var(--dur-fast) var(--ease-out);
}
.xui-json__twist--leaf { visibility: hidden; }
.xui-json__row[data-open="true"] > .xui-json__twist { transform: rotate(90deg); }

.xui-json__key { color: var(--foreground); font-weight: var(--weight-medium); }
.xui-json__punct { color: var(--muted-foreground); }
.xui-json__count {
  padding-inline: 0.3rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--foreground) 8%, transparent);
  color: var(--muted-foreground);
  font-size: 0.65rem;
}

.xui-json__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xui-json__value--string { color: var(--series-3); }
.xui-json__value--number { color: var(--series-2); }
.xui-json__value--bool { color: var(--primary); }
.xui-json__value--null { color: var(--muted-foreground); font-style: italic; }

/* ---- kbd ---- */
/* Kbd */

.xui-kbd-set { display: inline-flex; align-items: center; gap: 0.2rem; vertical-align: middle; }

.xui-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.3rem;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

.xui-kbd--sm .xui-kbd { min-width: 1.15rem; height: 1.15rem; font-size: 0.625rem; }
.xui-kbd--ghost .xui-kbd { background: transparent; border-color: transparent; box-shadow: none; }

.xui-kbd__sep { font-size: 0.6875rem; color: var(--muted-foreground); }

/* ---- knob ---- */
/* Knob */

.xui-knob { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); }

.xui-knob__dial {
  position: relative;
  display: grid;
  place-items: center;
  cursor: grab;
  border-radius: 50%;
  touch-action: none;
}
.xui-knob__dial:active { cursor: grabbing; }
.xui-knob__dial:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.xui-knob--readonly .xui-knob__dial { cursor: default; }
.xui-knob__dial[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.xui-knob__dial > svg { position: absolute; inset: 0; }

.xui-knob__rail { stroke: var(--muted); }
/* the value is revealed along a fixed path — animating `d` would flip the
   arc flag at 180° and throw the stroke off the track */
.xui-knob__arc { stroke: var(--knob-color, var(--primary)); transition: stroke-dashoffset 90ms linear; }
@media (prefers-reduced-motion: reduce) { .xui-knob__arc { transition: none; } }

.xui-knob--primary { --knob-color: var(--primary); }
.xui-knob--success { --knob-color: var(--success); }
.xui-knob--warning { --knob-color: var(--warning); }
.xui-knob--destructive { --knob-color: var(--destructive); }

.xui-knob__value {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.xui-knob__suffix { font-size: 0.65rem; font-weight: var(--weight-normal); color: var(--muted-foreground); }

.xui-knob__label { font-size: var(--text-xs); color: var(--muted-foreground); }

/* ---- label ---- */
/* Label — the base .xui-label lives in xui.css so every control shares it.
   This file adds only the standalone extras. */

.xui-label--sm { font-size: var(--text-xs); }

.xui-label__hint {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--muted-foreground);
}

/* a label sitting next to a disabled control dims with it */
.xui-label:has(+ [disabled]),
[aria-disabled="true"] > .xui-label { opacity: 0.55; }

/* ---- layout ---- */
/* Layout primitives — Box / Row / Col / Grid / Container / Section / Spacer / Center
   Structure only. Every value is a token, never a magic number. */

.xui-box { display: block; min-width: 0; }
.xui-box.xui-scroll-x { overflow-x: auto; }
.xui-box.xui-scroll-y { overflow-y: auto; }

/* surfaces */
.xui-bg-card { background: var(--card); color: var(--card-foreground); }
.xui-bg-muted { background: var(--muted); }
.xui-bg-accent { background: var(--accent); color: var(--accent-foreground); }
.xui-bg-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.xui-bg-primary { background: var(--primary); color: var(--primary-foreground); }
.xui-bg-sidebar { background: var(--sidebar); color: var(--sidebar-foreground); }
.xui-bg-background { background: var(--background); color: var(--foreground); }
.xui-bg-transparent { background: transparent; }

.xui-bordered { border: 1px solid var(--border); }

.xui-r-sm { border-radius: var(--radius-sm); }
.xui-r-md { border-radius: var(--radius-md); }
.xui-r-lg { border-radius: var(--radius-lg); }
.xui-r-xl { border-radius: var(--radius-xl); }
.xui-r-2xl { border-radius: var(--radius-2xl); }
.xui-r-full { border-radius: var(--radius-full); }

.xui-sh-xs { box-shadow: var(--shadow-xs); }
.xui-sh-sm { box-shadow: var(--shadow-sm); }
.xui-sh-md { box-shadow: var(--shadow-md); }
.xui-sh-lg { box-shadow: var(--shadow-lg); }
.xui-sh-xl { box-shadow: var(--shadow-xl); }

/* grid: three container-driven steps, so the mobile preview reacts too */
.xui-grid { grid-template-columns: repeat(var(--cols-sm, 1), minmax(0, 1fr)); }
@container xui-device (min-width: 640px) {
  .xui-grid:not(.xui-grid--auto) { grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr)); }
}
@container xui-device (min-width: 1024px) {
  .xui-grid:not(.xui-grid--auto) { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 640px) { .xui-grid:not(.xui-grid--auto) { grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .xui-grid:not(.xui-grid--auto) { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
}

/* section */
.xui-section { display: flex; flex-direction: column; }
.xui-section__head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.xui-section__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
  color: var(--primary);
}
.xui-section__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}
.xui-section__desc { color: var(--muted-foreground); max-width: 60ch; font-size: var(--text-sm); }
.xui-section__body { display: flex; flex-direction: column; gap: inherit; }

@container xui-device (min-width: 768px) {
  .xui-section__title { font-size: var(--text-3xl); }
}

/* ---- lightbox ---- */
/* Lightbox */

.xui-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 70);
  display: flex;
  flex-direction: column;
  animation: xui-fade-in var(--dur-fast) var(--ease-out);
}

.xui-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, black 88%, transparent);
}

.xui-lightbox__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.xui-lightbox__count {
  color: color-mix(in oklab, white 80%, transparent);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.xui-lightbox__actions { display: flex; gap: 0.25rem; }

.xui-lightbox__tool {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-full);
  color: white;
  background: color-mix(in oklab, white 10%, transparent);
  transition: background var(--dur-fast) var(--ease-out);
}
.xui-lightbox__tool:hover { background: color-mix(in oklab, white 22%, transparent); }
.xui-lightbox__tool:focus-visible { outline: 2px solid white; outline-offset: 2px; }

.xui-lightbox__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--space-4);
  min-height: 0;
}

.xui-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl, var(--shadow-lg));
  cursor: zoom-in;
  transition: transform var(--dur-base) var(--ease-out);
}
.xui-lightbox__img[data-zoomed="true"] {
  cursor: zoom-out;
  transform: scale(2);
  /* the transform origin is set from the click point, so zoom lands where you look */
}

.xui-lightbox__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--radius-full);
  color: white;
  background: color-mix(in oklab, black 45%, transparent);
  transition: background var(--dur-fast) var(--ease-out);
  z-index: 1;
}
.xui-lightbox__arrow:hover { background: color-mix(in oklab, black 70%, transparent); }
.xui-lightbox__arrow:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.xui-lightbox__arrow--prev { left: var(--space-3); }
.xui-lightbox__arrow--next { right: var(--space-3); }

.xui-lightbox__caption {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  translate: -50% 0;
  max-width: min(46rem, 90%);
  padding: 0.35rem var(--space-4);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, black 62%, transparent);
  color: white;
  font-size: var(--text-xs);
  text-align: center;
}

.xui-lightbox__strip {
  position: relative;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  justify-content: center;
}

.xui-lightbox__thumb {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.xui-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.xui-lightbox__thumb:hover { opacity: 0.8; }
.xui-lightbox__thumb.is-current { opacity: 1; border-color: white; }
.xui-lightbox__thumb:focus-visible { outline: 2px solid white; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .xui-lightbox { animation: none; }
  .xui-lightbox__img { transition: none; }
}

/* ---- log ---- */
/* Log */

.xui-log { min-width: 0; }

.xui-log__box {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.65;
}

.xui-log__line { display: flex; gap: var(--space-3); min-width: 0; }
.xui-log__time { flex: none; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); font-variant-numeric: tabular-nums; }
.xui-log__text { min-width: 0; white-space: pre; }
.xui-log--wrap .xui-log__text { white-space: pre-wrap; word-break: break-word; }

.xui-log__line[data-level="info"] .xui-log__text { color: var(--primary); }
.xui-log__line[data-level="success"] .xui-log__text { color: var(--success); }
.xui-log__line[data-level="warning"] .xui-log__text { color: var(--warning); }
.xui-log__line[data-level="error"] .xui-log__text { color: var(--destructive); }
.xui-log__line[data-level="debug"] .xui-log__text { color: var(--muted-foreground); }

.xui-log__empty { margin: 0; color: var(--muted-foreground); font-family: var(--font-sans); }

/* ---- map ---- */
/* Map */

.xui-map { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.xui-map__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.xui-map__box {
  position: relative;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  min-width: 0;
}

.xui-map__canvas { position: absolute; inset: 0; }
.xui-map__box[data-ready="true"] .xui-map__fallback { display: none; }

/* the provider's own DOM lands inside .xui-map__canvas, so it is styled to fit
   the surrounding surface rather than fighting it */
.xui-map__canvas .leaflet-container { font-family: var(--font-sans); background: var(--muted); }
.xui-map__canvas .leaflet-popup-content-wrapper,
.xui-map__canvas .gm-style-iw {
  border-radius: var(--radius-md);
  background: var(--popover);
  color: var(--popover-foreground);
}
.xui-map__canvas .leaflet-popup-tip { background: var(--popover); }
.xui-map__canvas .leaflet-bar a {
  background: var(--background);
  color: var(--foreground);
  border-bottom-color: var(--border);
}
.xui-map__canvas .leaflet-bar a:hover { background: var(--accent); }
.xui-map__canvas .leaflet-control-attribution {
  background: color-mix(in oklab, var(--background) 82%, transparent);
  color: var(--muted-foreground);
  font-size: 0.6rem;
}

.xui-map__fallback { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.xui-map__fallback-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

.xui-map__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.xui-map__row {
  --ev: var(--primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  min-width: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.xui-map__row:hover { background: var(--accent); }
.xui-map__row:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.xui-map__row[data-variant="success"] { --ev: var(--success); }
.xui-map__row[data-variant="warning"] { --ev: var(--warning); }
.xui-map__row[data-variant="destructive"] { --ev: var(--destructive); }

.xui-map__pin { display: flex; flex: none; color: var(--ev); }
.xui-map__rowtext { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.xui-map__rowtitle { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xui-map__rownote { font-size: var(--text-xs); color: var(--muted-foreground); }
.xui-map__badge {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
}

.xui-map__empty { margin: 0; padding: var(--space-6); text-align: center; color: var(--muted-foreground); font-size: var(--text-sm); }
.xui-map__note { display: flex; align-items: center; gap: 0.3rem; margin: 0; font-size: var(--text-xs); color: var(--warning); }

/* a xui marker, drawn by us so it re-skins with the design system */
.xui-map__mark {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-full) var(--radius-full) 2px var(--radius-full);
  rotate: 45deg;
  background: var(--primary);
  color: var(--primary-foreground);
  border: 2px solid var(--background);
  box-shadow: var(--shadow-md);
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
}
.xui-map__mark > * { rotate: -45deg; }
.xui-map__mark[data-variant="success"] { background: var(--success); }
.xui-map__mark[data-variant="warning"] { background: var(--warning); }
.xui-map__mark[data-variant="destructive"] { background: var(--destructive); }

/* ---- markdown ---- */
/* Markdown — the rhythm comes from .xui-prose; this adds only what is specific */

.xui-markdown > :first-child { margin-top: 0; }
.xui-markdown > :last-child { margin-bottom: 0; }

/* ---- marker ---- */
/* Marker */

.xui-marker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding-block: var(--space-2);
  user-select: none;
}

.xui-marker__line { height: 1px; flex: 1; background: var(--border); }

.xui-marker__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
  background: var(--background);
  white-space: nowrap;
}
.xui-marker__time { opacity: 0.7; font-variant-numeric: tabular-nums; }

/* date: the plain break between days */
.xui-marker--date .xui-marker__label {
  background: var(--muted);
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
}

/* unread: the line you scroll back to */
.xui-marker--unread .xui-marker__line { background: var(--destructive); opacity: 0.5; }
.xui-marker--unread .xui-marker__label {
  color: var(--destructive);
  background: color-mix(in oklab, var(--destructive) 10%, var(--background));
  font-weight: var(--weight-semibold);
}

/* event: someone joined, a call ended */
.xui-marker--event .xui-marker__line { opacity: 0.6; }
.xui-marker--event .xui-marker__label { background: var(--muted); }

/* pinned */
.xui-marker--pinned .xui-marker__label {
  color: var(--warning);
  background: color-mix(in oklab, var(--warning) 12%, var(--background));
}

.xui-marker--sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(6px);
}

/* ---- mention_input ---- */
/* MentionInput */

.xui-mention__well {
  position: relative;
  min-width: 0;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--background);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.xui-mention__well:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}
.xui-mention__well[data-invalid="true"] { border-color: var(--destructive); }

.xui-mention__el {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  outline: none;
  resize: vertical;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--foreground);
}
.xui-mention__el::placeholder { color: var(--muted-foreground); }

/* the scope list drops under the field, where the caret is looking */
.xui-mention__panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: var(--z-popover, 50);
  max-height: 15rem;
  overflow: auto;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
  animation: xui-zoom-in var(--dur-fast) var(--ease-out);
}

.xui-mention__opt {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: 0.35rem var(--space-2);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: var(--text-sm);
  cursor: pointer;
}
.xui-mention__opt:hover,
.xui-mention__opt[data-active="true"] { background: var(--accent); }
.xui-mention__name { font-weight: var(--weight-medium); }
.xui-mention__type { font-size: var(--text-xs); color: var(--muted-foreground); font-style: italic; }
.xui-mention__from {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: color-mix(in oklab, var(--muted-foreground) 75%, transparent);
}
.xui-mention__empty { margin: 0; padding: var(--space-3); color: var(--muted-foreground); font-size: var(--text-sm); }

@media (prefers-reduced-motion: reduce) { .xui-mention__panel { animation: none; } }

/* ---- menubar ---- */
/* Menubar */

.xui-menubar {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
  scrollbar-width: none;
}
.xui-menubar::-webkit-scrollbar { display: none; }
.xui-menubar--bare { border-color: transparent; box-shadow: none; background: none; padding: 0; }

.xui-menubar__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--foreground);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-menubar__trigger:hover,
.xui-menubar__trigger[aria-expanded="true"] { background: var(--accent); color: var(--accent-foreground); }

.xui-menubar--sm .xui-menubar__trigger { padding: 0.2rem 0.45rem; font-size: var(--text-xs); }

.xui-menubar__panel { min-width: 12rem; }

/* ---- mermaid ---- */
/* Mermaid */

.xui-mermaid { min-width: 0; }

.xui-mermaid__box {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  min-width: 0;
}
.xui-mermaid--center .xui-mermaid__box { display: flex; justify-content: center; }
.xui-mermaid__box svg { max-width: 100%; height: auto; }

/* the fallback when the mermaid library is not on the page */
.xui-mermaid__source {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted-foreground);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- message ---- */
/* Message */

.xui-msg {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.35rem var(--space-2);
  border-radius: var(--radius-lg);
  min-width: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.xui-msg:hover { background: color-mix(in oklab, var(--muted) 45%, transparent); }
.xui-msg--grouped { padding-top: 0.1rem; }
.xui-msg.is-highlight { background: color-mix(in oklab, var(--warning) 12%, transparent); }

.xui-msg--out { flex-direction: row-reverse; }
.xui-msg--out .xui-msg__head { justify-content: flex-end; }
.xui-msg--out .xui-msg__files,
.xui-msg--out .xui-msg__reactions { justify-content: flex-end; }

.xui-msg__avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
}
.xui-msg__avatar:empty { background: none; }
.xui-msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
.xui-msg__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: color-mix(in oklab, var(--tone-color) 20%, var(--muted));
  color: color-mix(in oklab, var(--tone-color) 78%, var(--foreground));
}
.xui-msg__avatar[data-tone="1"] { --tone-color: var(--chart-1); }
.xui-msg__avatar[data-tone="2"] { --tone-color: var(--chart-2); }
.xui-msg__avatar[data-tone="3"] { --tone-color: var(--chart-3); }
.xui-msg__avatar[data-tone="4"] { --tone-color: var(--chart-4); }
.xui-msg__avatar[data-tone="5"] { --tone-color: var(--chart-5); }

.xui-msg__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }

.xui-msg__head { display: flex; align-items: baseline; gap: var(--space-2); }
.xui-msg__author { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.xui-msg__time { font-size: 0.6875rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.xui-msg__files { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.xui-msg__reactions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.xui-msg__reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  font-size: 0.75rem;
  line-height: 1.4;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.xui-msg__reaction:hover { background: var(--accent); }
.xui-msg__reaction.is-mine {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, var(--card));
}
.xui-msg__reaction b { font-size: 0.6875rem; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.xui-msg__reaction--add { color: var(--muted-foreground); }

/* hover tools */
.xui-msg__tools {
  position: absolute;
  top: -0.5rem;
  right: var(--space-3);
  display: flex;
  gap: 0.1rem;
  padding: 0.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--popover);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.xui-msg--out .xui-msg__tools { right: auto; left: var(--space-3); }
.xui-msg:hover .xui-msg__tools,
.xui-msg:focus-within .xui-msg__tools { opacity: 1; pointer-events: auto; }
.xui-msg__tool {
  display: flex;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
}
.xui-msg__tool:hover { background: var(--accent); color: var(--foreground); }

/* on touch there is no hover, so the tools live in the long-press menu instead */
@media (pointer: coarse) { .xui-msg__tools { display: none; } }

/* ---- message_scroller ---- */
/* MessageScroller */

.xui-thread { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.xui-thread--bordered {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
}

/* No CSS scroll-behavior:smooth here — it would make the initial bottom pin
   and the load-more anchor restore animate through scrollTop<40, spuriously
   firing load_more. The JS opts into smooth explicitly where it wants it. */
.xui-thread__viewport {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.xui-thread__viewport:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.xui-thread__list { display: flex; flex-direction: column; gap: 0.15rem; min-height: 100%; justify-content: flex-end; }
.xui-thread--pad-2 .xui-thread__list { padding: var(--space-2); }
.xui-thread--pad-3 .xui-thread__list { padding: var(--space-3); }
.xui-thread--pad-4 .xui-thread__list { padding: var(--space-4); }
.xui-thread--pad-6 .xui-thread__list { padding: var(--space-6); }

.xui-thread__more { display: flex; justify-content: center; padding: var(--space-3); }
.xui-thread__more-btn {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  transition: background var(--dur-fast) var(--ease-out);
}
.xui-thread__more-btn:hover { background: var(--accent); color: var(--foreground); }

.xui-thread__loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.xui-thread__spin {
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: xui-spin 700ms linear infinite;
}

.xui-thread__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-10) var(--space-4);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  text-align: center;
}
.xui-thread__empty-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--muted);
}
/* push() appends rows without re-rendering the root, so hide the at-rest
   placeholder the moment real rows join it */
.xui-thread__empty:not(:only-child) { display: none; }

/* the "jump to latest" pill */
.xui-thread__jump {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--popover);
  color: var(--popover-foreground);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lg);
  z-index: 2;
  animation: xui-slide-up var(--dur-base) var(--ease-spring);
}
.xui-thread__jump[data-unread="true"] { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.xui-thread__jump:hover { filter: brightness(1.05); }

/* the quick-reaction picker Message opens (shared surface, lives here so the
   messaging folder owns all of the conversation chrome) */
.xui-msg__picker { padding: 0.25rem; }
.xui-msg__picker-row { display: flex; gap: 0.1rem; }
.xui-msg__picker-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.xui-msg__picker-btn:hover { background: var(--accent); transform: scale(1.15); }

/* ---- native_select ---- */
/* NativeSelect */

.xui-nativeselect { position: relative; display: flex; min-width: 0; }

.xui-nativeselect__el {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-8);
  cursor: pointer;
  font-family: inherit;
}
.xui-nativeselect__el[multiple] {
  height: auto;
  padding: var(--space-2);
  padding-right: var(--space-2);
  align-items: stretch;
}
.xui-nativeselect__el option { background: var(--popover); color: var(--popover-foreground); padding: 0.25rem; }

.xui-nativeselect__arrow {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  color: var(--muted-foreground);
  pointer-events: none;
}

/* ---- navigation_menu ---- */
/* NavigationMenu */

.xui-navmenu { min-width: 0; }

.xui-navmenu__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.xui-navmenu__list::-webkit-scrollbar { display: none; }

.xui-navmenu__item { display: flex; flex: none; }

.xui-navmenu__trigger,
.xui-navmenu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-navmenu__trigger:hover,
.xui-navmenu__link:hover { background: var(--accent); color: var(--accent-foreground); }
.xui-navmenu__trigger[aria-expanded="true"] { background: var(--accent); color: var(--accent-foreground); }
.xui-navmenu__trigger[aria-current="page"],
.xui-navmenu__link[aria-current="page"] { color: var(--foreground); }

.xui-navmenu__chev { transition: transform var(--dur-base) var(--ease-out); opacity: 0.7; }
.xui-navmenu__trigger[aria-expanded="true"] .xui-navmenu__chev { transform: rotate(180deg); }

/* the drop panel, built by component.js */
.xui-navmenu__panel {
  padding: var(--space-3);
  max-height: min(28rem, 70vh);
  overflow-y: auto;
}
.xui-navmenu__grid {
  display: grid;
  gap: 0.15rem;
  grid-template-columns: repeat(var(--nav-cols, 2), minmax(0, 1fr));
}
.xui-navmenu__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.xui-navmenu__card:hover { background: var(--accent); }
.xui-navmenu__card-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
}
.xui-navmenu__card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.xui-navmenu__card-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.xui-navmenu__card-desc { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }

.xui-navmenu__featured {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  grid-row: span 2;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--primary) 14%, var(--card)),
    var(--card));
  border: 1px solid var(--border);
  color: inherit;
}
.xui-navmenu__featured-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-navmenu__featured-desc { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.55; }

/* the drop panel is portaled to #xui-portal, outside the xui-device container,
   so the narrow rules key off the html flag the runtime maintains instead */
html[data-narrow="true"] .xui-navmenu__grid { grid-template-columns: 1fr; }
html[data-narrow="true"] .xui-navmenu__featured { grid-row: auto; }

/* ---- number_input ---- */
/* NumberInput */

.xui-number { gap: 0.15rem; padding-inline: 0.25rem; }
.xui-number--full { width: 100%; }

.xui-number__el {
  flex: 1;
  min-width: 2rem;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  text-align: center;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.xui-number__affix { color: var(--muted-foreground); font-size: var(--text-xs); flex: none; }

.xui-number__step {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-number__step:hover:not(:disabled) { background: var(--accent); color: var(--foreground); }
.xui-number__step:disabled { opacity: 0.4; cursor: not-allowed; }

@media (pointer: coarse) { .xui-number__step { width: 2rem; height: 2rem; } }

/* ---- pagination ---- */
/* Pagination */

.xui-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-width: 0;
}

.xui-pager__summary {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.xui-pager__controls { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; }

.xui-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.xui-pager__btn:hover:not([disabled]) { background: var(--accent); }
.xui-pager__btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.xui-pager__btn[aria-current="page"] {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: var(--weight-medium);
}

.xui-pager__gap { padding-inline: 0.25rem; color: var(--muted-foreground); user-select: none; }
.xui-pager__of {
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xui-pager--sm .xui-pager__btn { min-width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }

@media (pointer: coarse) {
  .xui-pager__btn { min-width: 2.4rem; height: 2.4rem; }
}

/* numbers are the first thing to go when space runs out */
@container xui-device (max-width: 560px) {
  .xui-pager__num:not([aria-current="page"]),
  .xui-pager__gap { display: none; }
  .xui-pager { justify-content: center; }
  .xui-pager__controls { margin-left: 0; }
}

/* ---- popover ---- */
/* Popover */

.xui-popover { display: inline-flex; }
.xui-popover__trigger { display: inline-flex; }

.xui-popover__panel {
  padding: var(--space-4);
  gap: var(--space-3);
  max-height: min(28rem, 70vh);
  overflow: visible;
}
.xui-popover__panel > .xui-popover__body { overflow-y: auto; overscroll-behavior: contain; }

.xui-popover__header { display: flex; flex-direction: column; gap: 0.2rem; }
.xui-popover__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-popover__desc { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }

.xui-popover__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.xui-popover__arrow {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  rotate: 45deg;
  background: var(--popover);
  border: 1px solid var(--border);
}
.xui-popover__panel[data-side="bottom"] .xui-popover__arrow {
  top: -0.31rem; left: 1.15rem;
  border-right: none; border-bottom: none;
}
.xui-popover__panel[data-side="top"] .xui-popover__arrow {
  bottom: -0.31rem; left: 1.15rem;
  border-left: none; border-top: none;
}
.xui-popover__panel[data-side="right"] .xui-popover__arrow {
  left: -0.31rem; top: 1.15rem;
  border-right: none; border-top: none;
}
.xui-popover__panel[data-side="left"] .xui-popover__arrow {
  right: -0.31rem; top: 1.15rem;
  border-left: none; border-bottom: none;
}

/* see dialog/component.css for why this is data-tiny and not a media query */
html[data-tiny="true"] .xui-popover__panel { width: min(92%, 22rem) !important; }

/* ---- progress ---- */
/* Progress */

.xui-progress { --bar-h: 0.5rem; --tint: var(--primary); display: flex; flex-direction: column; gap: var(--space-2); width: 100%; min-width: 0; }
.xui-progress--sm { --bar-h: 0.3rem; }
.xui-progress--lg { --bar-h: 0.75rem; }
.xui-progress--success { --tint: var(--success); }
.xui-progress--warning { --tint: var(--warning); }
.xui-progress--destructive { --tint: var(--destructive); }

.xui-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.xui-progress__label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.xui-progress__value {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.xui-progress__track {
  position: relative;
  width: 100%;
  height: var(--bar-h);
  border-radius: var(--radius-full);
  background: var(--muted);
  overflow: hidden;
}

.xui-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--tint);
  transition: width var(--dur-base) var(--ease-out);
}

.xui-progress--striped .xui-progress__bar {
  /* stripe from --background so it contrasts with any bar tint in both modes
     (white stripes vanish on the near-white primaries of dark themes) */
  --stripe: color-mix(in oklab, var(--background) 30%, transparent);
  background-image: linear-gradient(
    45deg,
    var(--stripe) 25%, transparent 25%,
    transparent 50%, var(--stripe) 50%,
    var(--stripe) 75%, transparent 75%
  );
  background-size: 0.75rem 0.75rem;
  animation: xui-stripe 900ms linear infinite;
}

.xui-progress--indeterminate .xui-progress__bar {
  width: 40% !important;
  animation: xui-indeterminate 1.3s var(--ease-in-out) infinite;
}

@keyframes xui-stripe { to { background-position: 0.75rem 0; } }
@keyframes xui-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* circular */
.xui-progress--ring { position: relative; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; }
.xui-progress--ring.xui-progress--sm { width: 2.25rem; height: 2.25rem; }
.xui-progress--ring.xui-progress--lg { width: 5rem; height: 5rem; }
.xui-progress__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.xui-progress__ring-bg { stroke: var(--muted); }
.xui-progress__ring-fill {
  stroke: var(--tint);
  transition: stroke-dashoffset var(--dur-base) var(--ease-out);
}
.xui-progress--indeterminate .xui-progress__svg { animation: xui-spin 1.1s linear infinite; }
.xui-progress--indeterminate .xui-progress__ring-fill { stroke-dashoffset: 60 !important; }
.xui-progress__ring-text {
  position: absolute;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- radio_group ---- */
/* RadioGroup */

.xui-radios { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.xui-radios--horizontal { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
.xui-radios[style*="--radio-cols"],
.xui-radios--card { display: grid; grid-template-columns: repeat(var(--radio-cols, 1), minmax(0, 1fr)); gap: var(--space-3); }

.xui-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.xui-radio[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.xui-radio__native { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.xui-radio__dot {
  position: relative;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.08rem;
  border: 1px solid var(--input);
  border-radius: 50%;
  background: var(--background);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.xui-radio__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.xui-radio:hover .xui-radio__dot { border-color: var(--ring); }
.xui-radio__native:checked + .xui-radio__dot { border-color: var(--primary); }
.xui-radio__native:checked + .xui-radio__dot::after { opacity: 1; transform: none; }
.xui-radio__native:focus-visible + .xui-radio__dot { outline: 2px solid var(--ring); outline-offset: 2px; }

.xui-radio__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.xui-radio__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}
.xui-radio__desc { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.45; }
.xui-radio__badge {
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
}

/* card form */
.xui-radios--card .xui-radio {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-radios--card .xui-radio:hover { background: var(--accent); }
.xui-radios--card .xui-radio.is-checked {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 7%, var(--card));
  box-shadow: 0 0 0 1px var(--primary);
}

@media (pointer: coarse) { .xui-radio { min-height: 2.25rem; } }

/* ---- rating ---- */
/* Rating */

.xui-rating { display: inline-flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.xui-rating__row { display: inline-flex; gap: 0.1rem; border-radius: var(--radius-sm); }
.xui-rating__row:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.xui-rating:not(.xui-rating--readonly) .xui-rating__row { cursor: pointer; }

.xui-rating__mark { position: relative; display: grid; line-height: 0; }
.xui-rating__base { color: color-mix(in oklab, var(--muted-foreground) 45%, transparent); }

/* the fill is the same icon clipped to --fill, which is what makes halves work */
.xui-rating__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--fill, 0%);
  color: var(--rating-color, var(--warning));
}
.xui-rating__fill > .xui-icon { fill: currentColor; }

.xui-rating--primary { --rating-color: var(--primary); }
.xui-rating--warning { --rating-color: var(--warning); }
.xui-rating--destructive { --rating-color: var(--destructive); }
.xui-rating--success { --rating-color: var(--success); }

.xui-rating__caption { font-size: var(--text-xs); color: var(--muted-foreground); }

.xui-rating:not(.xui-rating--readonly) .xui-rating__mark:hover .xui-rating__base { color: var(--rating-color); opacity: 0.4; }

/* ---- repeater ---- */
/* Repeater */

.xui-rep { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.xui-rep__head { display: flex; flex-direction: column; gap: 0.1rem; }

.xui-rep__list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }

.xui-rep__row { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.xui-rep--card .xui-rep__row {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.xui-rep__row[data-moving="true"] { opacity: 0.6; }

.xui-rep__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.xui-rep__no {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.xui-rep__tools { display: flex; gap: 0.15rem; }
.xui-rep__tool {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-rep__tool:hover { background: var(--accent); color: var(--foreground); }
.xui-rep__tool--danger:hover { background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive); }
.xui-rep__tool:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.xui-rep__body { min-width: 0; }

.xui-rep__empty {
  margin: 0;
  padding: var(--space-5);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.xui-rep__foot { display: flex; align-items: center; gap: var(--space-3); }
.xui-rep__limit { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

@media (pointer: coarse) { .xui-rep__tool { width: 2.1rem; height: 2.1rem; } }

/* ---- resizable ---- */
/* Resizable */

.xui-resizable {
  display: grid;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.xui-resizable--bordered {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--card);
}

.xui-resizable__panel { min-width: 0; min-height: 0; overflow: auto; }

.xui-resizable__handle {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--border);
  transition: background var(--dur-fast) var(--ease-out);
  touch-action: none;
  user-select: none;
}
.xui-resizable--horizontal .xui-resizable__handle { cursor: col-resize; }
.xui-resizable--vertical .xui-resizable__handle { cursor: row-resize; }

.xui-resizable__handle:hover,
.xui-resizable__handle[data-dragging="true"] { background: var(--primary); }
.xui-resizable__handle:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; z-index: 1; }

/* a wider invisible hit area than the visible 6px line */
.xui-resizable__handle::before {
  content: "";
  position: absolute;
  inset: -5px;
}

.xui-resizable__grip {
  position: relative;
  border-radius: var(--radius-full);
  background: var(--background);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.xui-resizable--horizontal .xui-resizable__grip { width: 2px; height: 1.5rem; }
.xui-resizable--vertical .xui-resizable__grip { width: 1.5rem; height: 2px; }
.xui-resizable__handle:hover .xui-resizable__grip,
.xui-resizable__handle[data-dragging="true"] .xui-resizable__grip { opacity: 0.8; }

/* while dragging, stop the panels swallowing the pointer */
.xui-resizable[data-dragging="true"] { user-select: none; }
.xui-resizable[data-dragging="true"] .xui-resizable__panel { pointer-events: none; }

/* stacking beats a 3-panel drag UI on a phone */
@container xui-device (max-width: 768px) {
  .xui-resizable--horizontal { grid-template-columns: 1fr !important; grid-auto-rows: auto; }
  .xui-resizable--horizontal .xui-resizable__handle { display: none; }
}

/* ---- sankey ---- */
/* Sankey */

.xui-sankey { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; min-width: 0; }

.xui-sankey__head { display: flex; flex-direction: column; gap: 0.1rem; }
.xui-sankey__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.xui-sankey__desc { font-size: var(--text-xs); color: var(--muted-foreground); }

.xui-sankey__svg { width: 100%; display: block; overflow: visible; }

.xui-sankey__link {
  opacity: 0.32;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.xui-sankey__link:hover { opacity: 0.62; }

.xui-sankey__node { cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out); }
.xui-sankey__node:hover { opacity: 0.8; }

/* dimming the rest is what makes one path readable */
.xui-sankey[data-focus] .xui-sankey__link { opacity: 0.08; }
.xui-sankey[data-focus] .xui-sankey__link[data-related="true"] { opacity: 0.72; }
.xui-sankey[data-focus] .xui-sankey__node { opacity: 0.28; }
.xui-sankey[data-focus] .xui-sankey__node[data-related="true"] { opacity: 1; }

.xui-sankey__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.xui-sankey__key {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.2rem;
}
.xui-sankey__key:hover { background: var(--accent); }
.xui-sankey__swatch { width: 0.6rem; height: 0.6rem; border-radius: 2px; flex: none; }
.xui-sankey__name { color: var(--foreground); }
.xui-sankey__value { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.xui-sankey__note { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.62rem; }

/* tracing one path: the rest recede, the palette stays untouched */
.xui-sankey__link.is-dim { opacity: 0.1; }
.xui-sankey__link.is-lit { opacity: 0.95; }
.xui-sankey__node.is-dim { opacity: 0.25; }
.xui-sankey__key.is-dim { opacity: 0.45; }

.xui-sankey__empty { margin: 0; padding: var(--space-6); text-align: center;
  color: var(--muted-foreground); font-size: var(--text-sm); }

@media (prefers-reduced-motion: reduce) {
  .xui-sankey__link, .xui-sankey__node { transition: none; }
}

/* ---- scroll_area ---- */
/* ScrollArea */

.xui-scrollarea {
  position: relative;
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.xui-scrollarea--y { overflow-y: auto; overflow-x: hidden; }
.xui-scrollarea--x { overflow-x: auto; overflow-y: hidden; }
.xui-scrollarea--both { overflow: auto; }

.xui-scrollarea--bordered {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.xui-scrollarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Fade masks. The data attributes are set by component.js and say which edge
   still has content, so an unscrollable area shows no fade at all. */
.xui-scrollarea--fade.xui-scrollarea--y[data-top="true"][data-bottom="true"] {
  mask-image: linear-gradient(to bottom, transparent 0, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
}
.xui-scrollarea--fade.xui-scrollarea--y[data-top="true"]:not([data-bottom="true"]) {
  mask-image: linear-gradient(to bottom, transparent 0, black 1.5rem);
}
.xui-scrollarea--fade.xui-scrollarea--y:not([data-top="true"])[data-bottom="true"] {
  mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%);
}
.xui-scrollarea--fade.xui-scrollarea--x[data-left="true"][data-right="true"] {
  mask-image: linear-gradient(to right, transparent 0, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
}
.xui-scrollarea--fade.xui-scrollarea--x[data-left="true"]:not([data-right="true"]) {
  mask-image: linear-gradient(to right, transparent 0, black 1.5rem);
}
.xui-scrollarea--fade.xui-scrollarea--x:not([data-left="true"])[data-right="true"] {
  mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%);
}

/* axis="both" needs one mask per axis, intersected — the single-axis rules
   above never match --both. The defaults are opaque, so an edge with no
   hidden content fades nothing. */
.xui-scrollarea--fade.xui-scrollarea--both {
  --fade-y: linear-gradient(black, black);
  --fade-x: linear-gradient(black, black);
  mask-image: var(--fade-y), var(--fade-x);
  mask-composite: intersect;
}
.xui-scrollarea--fade.xui-scrollarea--both[data-top="true"][data-bottom="true"] {
  --fade-y: linear-gradient(to bottom, transparent 0, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
}
.xui-scrollarea--fade.xui-scrollarea--both[data-top="true"]:not([data-bottom="true"]) {
  --fade-y: linear-gradient(to bottom, transparent 0, black 1.5rem);
}
.xui-scrollarea--fade.xui-scrollarea--both:not([data-top="true"])[data-bottom="true"] {
  --fade-y: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%);
}
.xui-scrollarea--fade.xui-scrollarea--both[data-left="true"][data-right="true"] {
  --fade-x: linear-gradient(to right, transparent 0, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
}
.xui-scrollarea--fade.xui-scrollarea--both[data-left="true"]:not([data-right="true"]) {
  --fade-x: linear-gradient(to right, transparent 0, black 1.5rem);
}
.xui-scrollarea--fade.xui-scrollarea--both:not([data-left="true"])[data-right="true"] {
  --fade-x: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%);
}

.xui-scrollarea::-webkit-scrollbar { width: 8px; height: 8px; }
.xui-scrollarea::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--foreground) 16%, transparent);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ---- select ---- */
/* Select — the trigger. The popup uses the shared .xui-menu surface. */

.xui-select__trigger {
  justify-content: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  text-align: left;
  font-weight: var(--weight-normal);
}
.xui-select__trigger[aria-expanded="true"] {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}

.xui-select__icon { display: flex; color: var(--muted-foreground); flex: none; }

.xui-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xui-select__value.is-placeholder { color: var(--muted-foreground); }

.xui-select__arrow { display: flex; color: var(--muted-foreground); flex: none; transition: transform var(--dur-base) var(--ease-out); }
.xui-select__trigger[aria-expanded="true"] .xui-select__arrow { transform: rotate(180deg); }

.xui-select__clear {
  display: flex;
  padding: 0.15rem;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
  flex: none;
}
.xui-select__clear:hover { background: var(--accent); color: var(--foreground); }

/* the popup built by component.js */
.xui-select__panel { min-width: 10rem; }
.xui-select__panel .xui-menu__item { justify-content: flex-start; }

/* ---- separator ---- */
/* Separator */

.xui-sep { flex: none; }

.xui-sep--horizontal:not(.xui-sep--labelled) {
  width: 100%;
  height: 1px;
  background: var(--border);
}
.xui-sep--vertical {
  width: 1px;
  align-self: stretch;
  min-height: 1rem;
  background: var(--border);
}

.xui-sep--dashed.xui-sep--horizontal:not(.xui-sep--labelled) {
  background: none;
  border-top: 1px dashed var(--border);
  height: 0;
}
.xui-sep--dashed.xui-sep--vertical {
  background: none;
  border-left: 1px dashed var(--border);
  width: 0;
}

/* labelled rule */
.xui-sep--labelled {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.xui-sep__line { height: 1px; background: var(--border); flex: 1; }
.xui-sep__text {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
  color: var(--muted-foreground);
  white-space: nowrap;
}
.xui-sep--label-start .xui-sep__line:first-child { flex: 0 0 var(--space-4); }
.xui-sep--label-end .xui-sep__line:last-child { flex: 0 0 var(--space-4); }

/* ---- sheet ---- */
/* Sheet */

.xui-sheet { position: fixed; inset: 0; z-index: var(--z-drawer); }
.xui-sheet[data-open="false"] { display: none; }
.xui-sheet--bare { pointer-events: none; }
.xui-sheet--bare .xui-sheet__panel { pointer-events: auto; box-shadow: var(--shadow-xl); }

.xui-sheet__panel {
  position: absolute;
  z-index: 1;                 /* above the scrim, which sits at 0 */
  display: flex;
  flex-direction: column;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  max-width: 100vw;
  max-height: 100dvh;
}

/* sides */
.xui-sheet--right .xui-sheet__panel {
  top: 0; right: 0; bottom: 0;
  width: min(26rem, 100vw);
  border-right: none;
  animation: xui-slide-in-right var(--dur-base) var(--ease-out);
}
.xui-sheet--left .xui-sheet__panel {
  top: 0; left: 0; bottom: 0;
  width: min(26rem, 100vw);
  border-left: none;
  animation: xui-slide-in-left var(--dur-base) var(--ease-out);
}
.xui-sheet--top .xui-sheet__panel {
  top: 0; left: 0; right: 0;
  max-height: 85dvh;
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  animation: xui-slide-down var(--dur-base) var(--ease-out);
}
.xui-sheet--bottom .xui-sheet__panel {
  bottom: 0; left: 0; right: 0;
  max-height: 85dvh;
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  animation: xui-slide-in-bottom var(--dur-base) var(--ease-out);
}

/* sizes apply to the panel's cross axis */
.xui-sheet--sm.xui-sheet--right .xui-sheet__panel,
.xui-sheet--sm.xui-sheet--left .xui-sheet__panel { width: min(20rem, 100vw); }
.xui-sheet--lg.xui-sheet--right .xui-sheet__panel,
.xui-sheet--lg.xui-sheet--left .xui-sheet__panel { width: min(34rem, 100vw); }
.xui-sheet--xl.xui-sheet--right .xui-sheet__panel,
.xui-sheet--xl.xui-sheet--left .xui-sheet__panel { width: min(48rem, 100vw); }
.xui-sheet--full .xui-sheet__panel { width: 100vw; height: 100dvh; border-radius: 0; }

.xui-sheet__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.xui-sheet__heading { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.xui-sheet__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-sheet__desc { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
.xui-sheet__icon {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-foreground);
}
.xui-sheet__x {
  display: flex;
  padding: 0.3rem;
  margin: -0.3rem -0.3rem auto auto;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  flex: none;
}
.xui-sheet__x:hover { background: var(--accent); color: var(--foreground); }

.xui-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.xui-sheet__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 35%, transparent);
  flex: none;
}

/* see dialog/component.css for why this is data-narrow and not a media query */
html[data-narrow="true"] .xui-sheet--right .xui-sheet__panel,
html[data-narrow="true"] .xui-sheet--left .xui-sheet__panel { width: min(22rem, 92%); }

/* ---- sidebar ---- */
/* Sidebar */

.xui-sidebar {
  --w: var(--sidebar-w);
  flex: none;
  width: var(--w);
  transition: width var(--dur-base) var(--ease-out);
}
.xui-sidebar[data-collapsed="true"] { --w: var(--sidebar-w-icon); }

.xui-sidebar__panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: var(--w);
  height: 100dvh;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  transition: width var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.xui-sidebar--right .xui-sidebar__panel { border-right: none; border-left: 1px solid var(--sidebar-border); }
.xui-sidebar--ghost .xui-sidebar__panel { background: transparent; border-color: transparent; }
.xui-sidebar--floating .xui-sidebar__panel {
  height: calc(100dvh - var(--space-6));
  margin: var(--space-3);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.xui-sidebar__scrim { display: none; }

/* --- brand --- */
.xui-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-h);
  padding-inline: var(--space-3);
  border-bottom: 1px solid var(--sidebar-border);
  flex: none;
}
.xui-sidebar__brand-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.xui-sidebar__brand-icon {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}
.xui-sidebar__collapse {
  display: flex;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  flex: none;
}
.xui-sidebar__collapse:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }

/* --- nav --- */
.xui-sidebar__top { padding: var(--space-3) var(--space-3) 0; flex: none; }
.xui-sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.xui-sidebar__group { display: flex; flex-direction: column; gap: 0.15rem; }
.xui-sidebar__grouplabel {
  padding: 0 var(--space-2) 0.35rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
  color: var(--muted-foreground);
  white-space: nowrap;
}
.xui-sidebar__list { display: flex; flex-direction: column; gap: 1px; }

.xui-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--sidebar-foreground);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-sidebar__item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.xui-sidebar__item.is-active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  box-shadow: inset 2px 0 0 var(--sidebar-primary);
}
.xui-sidebar__item[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.xui-sidebar__icon { display: flex; flex: none; color: var(--muted-foreground); }
.xui-sidebar__item.is-active .xui-sidebar__icon { color: var(--sidebar-primary); }
.xui-sidebar__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xui-sidebar__badge {
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  flex: none;
}

.xui-sidebar__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--sidebar-border);
  flex: none;
}

/* --- collapsed (icon-only) --- */
.xui-sidebar[data-collapsed="true"] .xui-sidebar__label,
.xui-sidebar[data-collapsed="true"] .xui-sidebar__grouplabel,
.xui-sidebar[data-collapsed="true"] .xui-sidebar__badge { display: none; }
.xui-sidebar[data-collapsed="true"] .xui-sidebar__item { justify-content: center; padding-inline: 0; }
.xui-sidebar[data-collapsed="true"] .xui-sidebar__brand { justify-content: center; padding-inline: 0; }
/* the toggle is the only way back out, so it stays; the brand link cedes the rail */
.xui-sidebar[data-collapsed="true"] .xui-sidebar__brand-link { display: none; }
.xui-sidebar[data-collapsed="true"] .xui-sidebar__group { align-items: center; }

/* --- mobile: off-canvas --- */
@container xui-device (max-width: 768px) {
  .xui-sidebar { width: 0; }
  .xui-sidebar__panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-drawer);
    width: min(17rem, 82vw);
    transform: translateX(-102%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-xl);
  }
  .xui-sidebar--right .xui-sidebar__panel { left: auto; right: 0; transform: translateX(102%); }
  .xui-sidebar[data-open="true"] .xui-sidebar__panel { transform: none; }
  .xui-sidebar[data-open="true"] .xui-sidebar__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: color-mix(in oklab, black 55%, transparent);
    animation: xui-fade-in var(--dur-base) var(--ease-out);
  }
  /* the collapsed state is meaningless on a phone */
  .xui-sidebar[data-collapsed="true"] .xui-sidebar__label,
  .xui-sidebar[data-collapsed="true"] .xui-sidebar__grouplabel,
  .xui-sidebar[data-collapsed="true"] .xui-sidebar__badge { display: revert; }
  .xui-sidebar[data-collapsed="true"] .xui-sidebar__brand-link { display: flex; }
  .xui-sidebar[data-collapsed="true"] .xui-sidebar__item { justify-content: flex-start; padding-inline: var(--space-2); }
}

/* ---- skeleton ---- */
/* Skeleton */

.xui-skel {
  position: relative;
  display: block;
  width: 100%;
  height: 1rem;
  border-radius: var(--radius-md);
  background: var(--muted);
  overflow: hidden;
}
.xui-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--foreground) 7%, transparent),
    transparent
  );
  animation: xui-shimmer 1.4s var(--ease-in-out) infinite;
}
.xui-skel--static::after { display: none; }

.xui-skel--line { height: 0.75rem; border-radius: var(--radius-full); }
.xui-skel--avatar { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); flex: none; }
.xui-skel--button { width: 6rem; height: var(--control-h); border-radius: var(--radius-md); }
.xui-skel--thumb { height: 9rem; border-radius: var(--radius-lg); }

.xui-skel-lines { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; }
.xui-skel-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}

@media (prefers-reduced-motion: reduce) {
  .xui-skel::after { animation: none; }
}

/* ---- skip_link ---- */
/* SkipLink — off-screen until focused */

.xui-skiplink {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-max, 100);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  box-shadow: var(--shadow-lg);

  /* moved out of sight, not hidden — a hidden element cannot be focused */
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur-base) var(--ease-out);
}
.xui-skiplink:focus { transform: translateY(0); outline: 2px solid var(--ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .xui-skiplink { transition: none; } }

/* ---- slider ---- */
/* Slider */

.xui-slider { --track-h: 0.375rem; --thumb: 1.05rem; gap: var(--space-3); }
.xui-slider--sm { --track-h: 0.25rem; --thumb: 0.875rem; }

.xui-slider__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.xui-slider__value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.xui-slider__track-wrap {
  position: relative;
  height: var(--thumb);
  display: flex;
  align-items: center;
}

.xui-slider__rail {
  position: absolute;
  inset-inline: 0;
  height: var(--track-h);
  border-radius: var(--radius-full);
  background: var(--muted);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.xui-slider__fill {
  position: absolute;
  left: var(--start, 0%);
  right: calc(100% - var(--end, 50%));
  height: var(--track-h);
  border-radius: var(--radius-full);
  background: var(--primary);
  transition: left 60ms linear, right 60ms linear;
}

.xui-slider__mark {
  position: absolute;
  width: 2px;
  height: var(--track-h);
  translate: -1px 0;
  background: color-mix(in oklab, var(--foreground) 25%, transparent);
  border-radius: 1px;
}

/* the real range inputs sit on top, transparent, so keyboard + a11y are free */
.xui-slider__input {
  position: absolute;
  inset-inline: 0;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;   /* re-enabled on the thumb only, so two handles stack */
}
.xui-slider__input:focus { outline: none; }

.xui-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--background);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.xui-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--background);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.xui-slider__input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.xui-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 30%, transparent);
}
.xui-slider__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 30%, transparent);
}
.xui-slider__input[disabled]::-webkit-slider-thumb { border-color: var(--muted-foreground); cursor: not-allowed; }

.xui-slider__marks { position: relative; height: 1rem; }
.xui-slider__mark-label {
  position: absolute;
  translate: -50% 0;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (pointer: coarse) { .xui-slider { --thumb: 1.35rem; } }

/* ---- sortable ---- */
.xui-sortable { position: relative; }
.xui-sortable--grid { display: flex; flex-wrap: wrap; align-items: flex-start; }
.xui-sortable--column { display: flex; flex-direction: column; }
.xui-sortable--free {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--xs-cell, 7rem));
  grid-auto-rows: var(--xs-cell, 7rem);
  grid-auto-flow: dense;
  align-items: start;
  justify-items: center;
  min-height: calc(var(--xs-cell, 7rem) * 2);
}
.xui-gap-2 { gap: var(--space-2); }
.xui-gap-3 { gap: var(--space-3); }
.xui-gap-4 { gap: var(--space-4); }
.xui-gap-5 { gap: var(--space-5); }

/* while a tile is moving, the free grid shows its slots as interval dots —
   the JS sets background-size/position from the real cell + gap metrics */
.xui-sortable--free.xui-sortable--tracing {
  background-image: radial-gradient(circle,
    color-mix(in oklab, var(--muted-foreground) 50%, transparent) 2px,
    transparent 2.5px);
}

.xui-sortable > [draggable="true"] { cursor: grab; }
.xui-sortable > .xui-sortable__dragging {
  opacity: 0.35;
  transform: scale(0.95);
  transition: transform var(--dur-fast) var(--ease-out);
}
.xui-sortable > .xui-sortable__over {
  outline: 2px dashed color-mix(in oklab, var(--primary) 55%, transparent);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* ---- speech_input ---- */
/* SpeechInput */

.xui-speech { display: inline-flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.xui-speech__btn { position: relative; }
.xui-speech__icon { display: flex; }

/* both icons are in the markup; aria-pressed picks one, so the swap survives morphs */
.xui-speech__glyph { display: flex; }
.xui-speech__glyph--listening { display: none; }
.xui-speech__btn[aria-pressed="true"] .xui-speech__glyph--idle { display: none; }
.xui-speech__btn[aria-pressed="true"] .xui-speech__glyph--listening { display: flex; }

.xui-speech__btn[aria-pressed="true"] {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}

/* one ring, so "it is listening" is unmistakable without being a light show */
.xui-speech__pulse {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--destructive);
  opacity: 0;
  pointer-events: none;
}
.xui-speech__btn[aria-pressed="true"] .xui-speech__pulse {
  animation: xui-speech-pulse 1.4s var(--ease-out) infinite;
}

@keyframes xui-speech-pulse {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.22); }
}

.xui-speech__transcript {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  min-height: 2.25rem;
  max-width: 26rem;
}
.xui-speech__transcript[data-interim="true"] { color: var(--muted-foreground); font-style: italic; }

.xui-speech__unsupported {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .xui-speech__btn[aria-pressed="true"] .xui-speech__pulse { animation: none; opacity: 0.9; }
}

/* ---- spinner ---- */
/* Spinner */

.xui-spinner {
  --dot: 0.375rem;
  --ring-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted-foreground);
}
.xui-spinner--xs { --ring-size: 0.875rem; --dot: 0.25rem; }
.xui-spinner--sm { --ring-size: 1rem; --dot: 0.3rem; }
.xui-spinner--lg { --ring-size: 1.75rem; --dot: 0.5rem; }
.xui-spinner--xl { --ring-size: 2.5rem; --dot: 0.65rem; }

.xui-spinner--center {
  display: flex;
  width: 100%;
  min-height: 8rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
}

.xui-spinner--c-primary { color: var(--primary); }
.xui-spinner--c-muted { color: var(--muted-foreground); }
.xui-spinner--c-destructive { color: var(--destructive); }
.xui-spinner--c-success { color: var(--success); }

.xui-spinner__ring {
  width: var(--ring-size);
  height: var(--ring-size);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: xui-spin 700ms linear infinite;
  flex: none;
}

.xui-spinner__dots { display: inline-flex; gap: calc(var(--dot) * 0.6); }
.xui-spinner__dots i {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: currentColor;
  animation: xui-bounce 900ms var(--ease-in-out) infinite;
}
.xui-spinner__dots i:nth-child(2) { animation-delay: 140ms; }
.xui-spinner__dots i:nth-child(3) { animation-delay: 280ms; }

.xui-spinner__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: var(--ring-size); }
.xui-spinner__bars i {
  width: 3px;
  height: 40%;
  border-radius: 2px;
  background: currentColor;
  animation: xui-bars 1s var(--ease-in-out) infinite;
}
.xui-spinner__bars i:nth-child(2) { animation-delay: 120ms; }
.xui-spinner__bars i:nth-child(3) { animation-delay: 240ms; }
.xui-spinner__bars i:nth-child(4) { animation-delay: 360ms; }

.xui-spinner__label { font-size: var(--text-sm); }

@keyframes xui-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-40%); opacity: 1; }
}
@keyframes xui-bars {
  0%, 100% { height: 35%; opacity: 0.5; }
  50% { height: 100%; opacity: 1; }
}

/* ---- split_button ---- */
/* SplitButton */

.xui-split { display: inline-flex; align-items: stretch; min-width: 0; }

.xui-split__main,
.xui-split__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.xui-split__main { padding-inline: var(--space-4); border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.xui-split__more { padding-inline: var(--space-2); border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }

.xui-split--sm .xui-split__main,
.xui-split--sm .xui-split__more { height: var(--control-h-sm); font-size: var(--text-xs); }
.xui-split--lg .xui-split__main,
.xui-split--lg .xui-split__more { height: var(--control-h-lg); font-size: var(--text-base); }

.xui-split--default .xui-split__main,
.xui-split--default .xui-split__more { background: var(--primary); color: var(--primary-foreground); }
.xui-split--default .xui-split__main:hover:not(:disabled),
.xui-split--default .xui-split__more:hover:not(:disabled) { background: color-mix(in oklab, var(--primary) 88%, black); }

.xui-split--secondary .xui-split__main,
.xui-split--secondary .xui-split__more { background: var(--secondary); color: var(--secondary-foreground); }
.xui-split--secondary .xui-split__main:hover:not(:disabled),
.xui-split--secondary .xui-split__more:hover:not(:disabled) { background: var(--accent); }

.xui-split--outline .xui-split__main,
.xui-split--outline .xui-split__more {
  background: var(--background);
  color: var(--foreground);
  border-color: var(--input);
}
.xui-split--outline .xui-split__main:hover:not(:disabled),
.xui-split--outline .xui-split__more:hover:not(:disabled) { background: var(--accent); }

.xui-split--destructive .xui-split__main,
.xui-split--destructive .xui-split__more { background: var(--destructive); color: var(--destructive-foreground); }

/* one hairline between the halves, in the button's own colour */
.xui-split__more { border-inline-start: 1px solid color-mix(in oklab, var(--background) 30%, transparent); }
.xui-split--outline .xui-split__more { border-inline-start-color: var(--input); }

.xui-split__main:disabled,
.xui-split__more:disabled { opacity: 0.55; cursor: not-allowed; }
.xui-split__main:focus-visible,
.xui-split__more:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; z-index: 1; }

.xui-split__more[aria-expanded="true"] > .xui-icon { transform: rotate(180deg); }
.xui-split__more > .xui-icon { transition: transform var(--dur-base) var(--ease-out); }

/* ---- stepper ---- */
/* Stepper */

.xui-stepper { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

.xui-stepper__rail { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.xui-stepper__step { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.xui-stepper__step:last-child { flex: none; }

.xui-stepper__marker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  text-align: left;
  border-radius: var(--radius-md);
  padding: 0.15rem;
}
.xui-stepper__marker:disabled { cursor: default; }
.xui-stepper__marker:not(:disabled):hover .xui-stepper__label { color: var(--foreground); }

.xui-stepper__dot {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.xui-stepper__step[data-state="current"] .xui-stepper__dot {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent);
}
.xui-stepper__step[data-state="done"] .xui-stepper__dot {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, var(--background));
}

.xui-stepper__text { display: flex; flex-direction: column; min-width: 0; }
.xui-stepper__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xui-stepper__step[data-state="current"] .xui-stepper__label { color: var(--foreground); }
.xui-stepper__desc { font-size: var(--text-xs); color: var(--muted-foreground); }

.xui-stepper__line {
  flex: 1;
  height: 1px;
  min-width: var(--space-3);
  margin-inline: var(--space-2);
  background: var(--border);
}
.xui-stepper__step[data-state="done"] .xui-stepper__line { background: var(--primary); }

.xui-stepper__panels { min-width: 0; }
.xui-stepper__nav { display: flex; justify-content: space-between; gap: var(--space-3); }

/* vertical, and every stepper on a narrow screen */
.xui-stepper--vertical .xui-stepper__rail { flex-direction: column; align-items: stretch; gap: var(--space-1); }
.xui-stepper--vertical .xui-stepper__step { flex: none; flex-direction: column; align-items: flex-start; gap: 0; }
.xui-stepper--vertical .xui-stepper__line {
  width: 1px;
  height: var(--space-5);
  min-width: 0;
  margin: 0.15rem 0 0.15rem 0.95rem;
}

.xui-stepper--sm .xui-stepper__dot { width: 1.35rem; height: 1.35rem; font-size: 0.65rem; }
.xui-stepper--sm .xui-stepper__label { font-size: var(--text-xs); }

@container xui-device (max-width: 640px) {
  .xui-stepper--horizontal .xui-stepper__text { display: none; }
  .xui-stepper--horizontal .xui-stepper__step[data-state="current"] .xui-stepper__text { display: flex; }
}

/* ---- switch ---- */
/* Switch */

.xui-switch {
  --sw-w: 2.25rem;
  --sw-h: 1.25rem;
  --sw-pad: 2px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.xui-switch--sm { --sw-w: 1.85rem; --sw-h: 1.05rem; }
.xui-switch--lg { --sw-w: 2.75rem; --sw-h: 1.5rem; }
.xui-switch--reverse { flex-direction: row-reverse; justify-content: space-between; width: 100%; }
.xui-switch[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.xui-switch__native { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.xui-switch__track {
  position: relative;
  flex: none;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--foreground) 22%, var(--background));
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs) inset;
  transition: background var(--dur-base) var(--ease-out);
}

.xui-switch__thumb {
  position: absolute;
  top: var(--sw-pad);
  left: var(--sw-pad);
  width: calc(var(--sw-h) - var(--sw-pad) * 2);
  height: calc(var(--sw-h) - var(--sw-pad) * 2);
  border-radius: 50%;
  background: var(--background);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  transition: transform var(--dur-base) var(--ease-spring);
}

.xui-switch__native:checked + .xui-switch__track { background: var(--primary); }
.xui-switch__native:checked + .xui-switch__track .xui-switch__thumb {
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
}
.xui-switch__native:focus-visible + .xui-switch__track {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.xui-switch__on, .xui-switch__off {
  position: absolute;
  display: grid;
  place-items: center;
  transition: opacity var(--dur-fast) var(--ease-out);
  color: var(--muted-foreground);
}
.xui-switch__on { opacity: 0; color: var(--primary); }
.xui-switch__native:checked + .xui-switch__track .xui-switch__on { opacity: 1; }
.xui-switch__native:checked + .xui-switch__track .xui-switch__off { opacity: 0; }

.xui-switch__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.xui-switch__label { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.35; }
.xui-switch__desc { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.45; }

@media (pointer: coarse) {
  .xui-switch { min-height: 2.25rem; }
}

/* ---- table ---- */
/* Table */

.xui-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.xui-table--bordered {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.xui-table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: separate;
  border-spacing: 0;
}

.xui-table__caption {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  caption-side: top;
}

/* the sticky header needs its own stacking context, not just sticky cells */
.xui-table__head { position: relative; z-index: 2; }
.xui-table__body { position: relative; }

.xui-table__th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
  color: var(--muted-foreground);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.xui-table--sticky .xui-table__th { position: sticky; top: 0; z-index: 2; }

.xui-table__td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--foreground);
}
.xui-table__tr:last-child .xui-table__td { border-bottom: none; }

.xui-table--dense .xui-table__th,
.xui-table--dense .xui-table__td { padding: var(--space-2) var(--space-3); }

.xui-table--striped .xui-table__tr:nth-child(even) .xui-table__td {
  background: color-mix(in oklab, var(--muted) 45%, transparent);
}
.xui-table--hover .xui-table__tr:hover .xui-table__td { background: var(--accent); }

.xui-table__td[data-numeric="true"],
.xui-table__td.xui-mono { font-variant-numeric: tabular-nums; }

.xui-table__empty {
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--muted-foreground);
}

.xui-table__foot .xui-table__td,
.xui-table__foot td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  font-weight: var(--weight-medium);
  background: color-mix(in oklab, var(--muted) 35%, transparent);
}

/* columns flagged hide_mobile drop out on narrow containers */
@container xui-device (max-width: 640px) {
  .xui-table__cell--hide-sm { display: none; }
  .xui-table__th, .xui-table__td { padding-inline: var(--space-3); }
}

/* ---- tabs ---- */
/* Tabs */

.xui-tabs { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.xui-tabs__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.xui-tabs__list::-webkit-scrollbar { display: none; }

.xui-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-tabs__tab:hover:not([disabled]) { color: var(--foreground); }
.xui-tabs__tab[aria-selected="true"] { color: var(--foreground); }
.xui-tabs__tab[disabled] { opacity: 0.45; cursor: not-allowed; }

.xui-tabs__badge {
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
}
.xui-tabs__tab[aria-selected="true"] .xui-tabs__badge { background: var(--primary); color: var(--primary-foreground); }

.xui-tabs--sm .xui-tabs__tab { padding: 0.35rem 0.55rem; font-size: var(--text-xs); }

/* icons only: square targets, the label survives as the accessible name */
.xui-tabs--icons .xui-tabs__tab { padding: 0.4rem; min-width: 1.9rem; justify-content: center; }
.xui-tabs--icons.xui-tabs--sm .xui-tabs__tab { padding: 0.3rem; min-width: 1.6rem; }
.xui-tabs--icons .xui-tabs__badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  padding: 0 0.22rem;
  font-size: 0.55rem;
  line-height: 1.5;
}
.xui-tabs--icons .xui-tabs__tab { position: relative; }
.xui-tabs--full .xui-tabs__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.xui-tabs--full .xui-tabs__tab { justify-content: center; }

/* --- line (default): an animated underline --- */
.xui-tabs--line .xui-tabs__list { border-bottom: 1px solid var(--border); gap: var(--space-1); }
.xui-tabs--line .xui-tabs__tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding-bottom: 0.6rem; }
.xui-tabs__ink {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  transition: left var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.xui-tabs:not(.xui-tabs--line) .xui-tabs__ink { display: none; }

/* --- pills --- */
.xui-tabs--pills .xui-tabs__list {
  padding: 0.2rem;
  background: var(--muted);
  border-radius: var(--radius-lg);
  gap: 0.2rem;
}
.xui-tabs--pills .xui-tabs__tab { border-radius: var(--radius-md); }
.xui-tabs--pills .xui-tabs__tab[aria-selected="true"] {
  background: var(--background);
  box-shadow: var(--shadow-xs);
}

/* --- enclosed --- */
.xui-tabs--enclosed .xui-tabs__list { border-bottom: 1px solid var(--border); gap: 0; }
.xui-tabs--enclosed .xui-tabs__tab {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: -1px;
}
.xui-tabs--enclosed .xui-tabs__tab[aria-selected="true"] {
  border-color: var(--border);
  background: var(--background);
}

/* --- vertical --- */
.xui-tabs--vertical { flex-direction: row; gap: var(--space-6); }
.xui-tabs--vertical .xui-tabs__list {
  flex-direction: column;
  align-items: stretch;
  border-bottom: none;
  border-right: 1px solid var(--border);
  padding-right: var(--space-2);
  min-width: 10rem;
  overflow-x: visible;
}
.xui-tabs--vertical .xui-tabs__tab { justify-content: flex-start; }
.xui-tabs--vertical .xui-tabs__ink { display: none; }
.xui-tabs--vertical .xui-tabs__tab[aria-selected="true"] { background: var(--accent); color: var(--accent-foreground); }
.xui-tabs--vertical .xui-tabs__panels { flex: 1; min-width: 0; }

.xui-tabs__panels { min-width: 0; }
.xui-tabs__panel { animation: xui-fade-in var(--dur-base) var(--ease-out); min-width: 0; }

/* ---- tag_input ---- */
/* TagInput */

.xui-taginput {
  flex-wrap: wrap;
  gap: 0.25rem;
  height: auto;
  min-height: var(--control-h);
  padding: 0.25rem var(--space-2);
  cursor: text;
}

.xui-taginput__el {
  flex: 1;
  min-width: 6rem;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
  color: inherit;
  padding-block: 0.15rem;
}

.xui-taginput .xui-chip { max-width: 14rem; }

/* ---- textarea ---- */
/* Textarea */

.xui-textarea { width: 100%; }

.xui-textarea {
  display: block;
  height: auto;
  min-height: calc(var(--control-h) * 1.5);
  padding: var(--space-2) var(--space-3);
  line-height: 1.55;
  font-family: inherit;
  overflow-y: auto;
}

.xui-textarea__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.xui-textarea__count {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.xui-textarea__count[data-over="true"] { color: var(--destructive); font-weight: var(--weight-medium); }

/* ---- theme_switcher ---- */
/* ThemeSwitcher */

.xui-themer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}

/* No border and no surface: in a header these sit alongside the nav links and
   should read the same way. The selected state, not a box, is what marks the
   current choice. */
.xui-themer__group {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.xui-themer__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.85rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-themer__btn:hover { background: var(--accent); color: var(--accent-foreground); }
.xui-themer__btn[aria-pressed="true"] {
  background: var(--secondary);
  color: var(--secondary-foreground);
  box-shadow: var(--shadow-xs);
}

.xui-themer__swatch { gap: 0.4rem; }

/* the three dots preview each system's actual colours, because each swatch
   carries that theme's data-theme attribute and therefore its own tokens */
.xui-themer__dots { display: inline-flex; gap: 2px; }
.xui-themer__dots i {
  width: 0.4rem;
  height: 0.85rem;
  border-radius: 2px;
}

.xui-themer--compact .xui-themer__name { display: none; }
.xui-themer--compact .xui-themer__btn { padding-inline: 0.35rem; }

/* --- the design-system control ----------------------------------------- */

/* Wide: the four systems sit in a row with their names, and the trigger that
   stands in for them on a phone is not rendered at all. */
.xui-themer__themes { position: relative; }
.xui-themer__list { display: flex; align-items: center; gap: 0.15rem; }
.xui-themer__trigger { display: none; }

.xui-themer__caret {
  display: flex;
  color: var(--muted-foreground);
  transition: transform var(--dur-fast) var(--ease-out);
}

/* --- the two toggles ---------------------------------------------------- */

.xui-themer__toggle { padding-inline: 0.45rem; }
.xui-themer__ic { display: none; }

/* the mode icon shows the state you are in; the device icon shows where a
   click takes you — a smartphone while on desktop, a monitor while on mobile */
html[data-mode="light"] .xui-themer__ic--light,
html[data-mode="dark"] .xui-themer__ic--dark,
html[data-device="desktop"] .xui-themer__ic--mobile,
html[data-device="mobile"] .xui-themer__ic--desktop { display: flex; }

/* a page with no data-mode yet still shows something */
html:not([data-mode]) .xui-themer__ic--light,
html:not([data-device]) .xui-themer__ic--mobile { display: flex; }

/* --- floating: the bar as a pill over the page -------------------------- */

.xui-themer--floating {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-sticky);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--popover) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
}

/* --- narrow: one button, and the list drops below it -------------------- */

@container xui-device (max-width: 860px) {
  .xui-themer--collapsible .xui-themer__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 1.85rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--foreground);
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .xui-themer--collapsible .xui-themer__trigger:hover { background: var(--accent); }
  .xui-themer--collapsible .xui-themer__trigger:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
  }
  .xui-themer--collapsible .xui-themer__trigger[aria-expanded="true"] .xui-themer__caret {
    transform: rotate(180deg);
  }

  /* the list becomes a panel under the trigger — down, not sideways */
  .xui-themer--collapsible .xui-themer__list {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: var(--z-popover, 50);
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-width: 11rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
    animation: xui-zoom-in var(--dur-fast) var(--ease-out);
  }
  .xui-themer--collapsible .xui-themer__themes[data-open="true"] .xui-themer__list {
    display: flex;
    overflow-y: auto;
  }
  /* flipped: when the room is above, the panel stands over the trigger */
  .xui-themer--collapsible .xui-themer__themes[data-side="top"] .xui-themer__list {
    top: auto;
    bottom: calc(100% + 0.4rem);
  }
  /* in the panel every system shows its name — that is the point of opening it */
  .xui-themer--collapsible .xui-themer__list .xui-themer__btn { justify-content: flex-start; }
  .xui-themer--collapsible .xui-themer__list .xui-themer__name { display: inline; }
}

/* below this the name is wider than the phone; the swatches still identify it */
@container xui-device (max-width: 380px) {
  .xui-themer--collapsible .xui-themer__trigger .xui-themer__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xui-themer__caret { transition: none; }
  .xui-themer--collapsible .xui-themer__list { animation: none; }
}

/* the device toggle is meaningless on a real phone — it is a preview tool */
@media (max-width: 640px) {
  .xui-themer [data-xui-devices] { display: none; }
}

/* ---- time_picker ---- */
/* TimePicker */

.xui-time { gap: var(--space-2); padding-inline: var(--space-3); }

.xui-time__icon { display: flex; color: var(--muted-foreground); flex: none; }

.xui-time__el {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.xui-time__el::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
.xui-time__el::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.xui-time__clear {
  display: flex;
  padding: 0.15rem;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
  flex: none;
}
.xui-time__clear:hover { background: var(--accent); color: var(--foreground); }

.xui-time__presets { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.xui-time__preset {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--background);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.xui-time__preset:hover { background: var(--accent); color: var(--foreground); }
.xui-time__preset.is-current {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

/* ---- timeline ---- */
/* Timeline */

.xui-timeline {
  --dot: 1.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.xui-timeline--sm { --dot: 1.25rem; }

.xui-timeline__item {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  min-width: 0;
}
.xui-timeline__item:last-child { padding-bottom: 0; }

/* the connecting line is drawn by the item, so it stops at the last one */
.xui-timeline__item::before {
  content: "";
  position: absolute;
  top: var(--dot);
  bottom: 0;
  left: calc(var(--dot) / 2);
  width: 1px;
  background: var(--border);
}
.xui-timeline__item:last-child::before,
.xui-timeline--noline .xui-timeline__item::before { display: none; }

.xui-timeline__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  flex: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted-foreground);
  overflow: hidden;
}
.xui-timeline__pip { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.xui-timeline__avatar { width: 100%; height: 100%; object-fit: cover; }
.xui-timeline__initials { font-size: 0.6rem; font-weight: var(--weight-semibold); }

.xui-timeline__item[data-variant="primary"] .xui-timeline__marker { border-color: var(--primary); color: var(--primary); }
.xui-timeline__item[data-variant="success"] .xui-timeline__marker { border-color: var(--success); color: var(--success); }
.xui-timeline__item[data-variant="warning"] .xui-timeline__marker { border-color: var(--warning); color: var(--warning); }
.xui-timeline__item[data-variant="destructive"] .xui-timeline__marker { border-color: var(--destructive); color: var(--destructive); }
.xui-timeline__item[data-variant="muted"] .xui-timeline__marker { opacity: 0.65; }

.xui-timeline__item[data-active="true"] .xui-timeline__marker {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent);
}

.xui-timeline__content { min-width: 0; padding-top: 0.1rem; }

.xui-timeline__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.xui-timeline__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground); }
.xui-timeline__time {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
.xui-timeline__badge {
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
}
.xui-timeline__body { margin: 0.15rem 0 0; font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.55; }

/* the payload folds away, so hundreds of events still read as a list */
.xui-timeline__details { margin-top: 0.3rem; }
.xui-timeline__details > summary {
  cursor: pointer;
  font-size: 0.68rem;
  color: var(--primary);
  user-select: none;
}
.xui-timeline__details > summary:hover { text-decoration: underline; }
.xui-timeline__payload {
  margin: 0.3rem 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 14rem;
  overflow: auto;
}

/* alternate sides — only where there is room for two columns */
@container xui-device (min-width: 720px) {
  .xui-timeline--alternate .xui-timeline__item { width: 50%; }
  .xui-timeline--alternate .xui-timeline__item--right {
    margin-inline-start: 50%;
    flex-direction: row;
  }
  .xui-timeline--alternate .xui-timeline__item--left {
    flex-direction: row-reverse;
    text-align: right;
  }
  .xui-timeline--alternate .xui-timeline__item--left::before { left: auto; right: calc(var(--dot) / 2); }
  .xui-timeline--alternate .xui-timeline__item--left .xui-timeline__head { justify-content: flex-end; }
  .xui-timeline--alternate .xui-timeline__item--left .xui-timeline__time { margin-inline: 0; }
}

/* ---- toast ---- */
/* Toast — styled here, but usually created by the runtime (XUI.toast) rather
   than rendered by the server. The classes must match xui.js exactly. */

.xui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: xui-slide-up var(--dur-base) var(--ease-spring);
}
.xui-toast[data-state="closed"] {
  animation: xui-fade-out 180ms var(--ease-out) forwards;
}
.xui-toast--static { animation: none; box-shadow: var(--shadow-sm); }

.xui-toast__icon { display: flex; margin-top: 0.05rem; flex: none; color: var(--muted-foreground); }
.xui-toast__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.xui-toast__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.4; }
.xui-toast__desc { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }

.xui-toast__action {
  align-self: center;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  flex: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.xui-toast__action:hover { background: var(--accent); }

.xui-toast__close {
  display: flex;
  padding: 0.15rem;
  margin: -0.1rem -0.2rem auto 0;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  opacity: 0.6;
  flex: none;
}
.xui-toast__close:hover { opacity: 1; background: var(--accent); }

/* variants tint the icon and the left edge, never the whole surface —
   a wall of solid colour is hard to read at 4 seconds */
.xui-toast--success { border-left: 3px solid var(--success); }
.xui-toast--success .xui-toast__icon { color: var(--success); }
.xui-toast--destructive { border-left: 3px solid var(--destructive); }
.xui-toast--destructive .xui-toast__icon { color: var(--destructive); }
.xui-toast--warning { border-left: 3px solid var(--warning); }
.xui-toast--warning .xui-toast__icon { color: var(--warning); }
.xui-toast--info { border-left: 3px solid var(--info); }
.xui-toast--info .xui-toast__icon { color: var(--info); }

.xui-toast-def { display: none; }

/* ---- toggle ---- */
/* Toggle */

.xui-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--control-h);
  min-width: var(--control-h);
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--foreground);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.xui-toggle:hover:not([disabled]) { background: var(--accent); color: var(--accent-foreground); }
.xui-toggle[disabled] { opacity: 0.5; pointer-events: none; }

.xui-toggle[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* both icons render, so the click handler's aria-pressed flip swaps them
   without waiting for a server re-render */
.xui-toggle__on, .xui-toggle__off { display: inline-flex; }
.xui-toggle:not([aria-pressed="true"]) .xui-toggle__on { display: none; }
.xui-toggle[aria-pressed="true"] .xui-toggle__off { display: none; }
.xui-toggle--outline { border-color: var(--border); }
.xui-toggle--outline[aria-pressed="true"] { border-color: var(--primary); }
.xui-toggle--ghost { background: transparent; }

/* on solid systems the pressed state reads better as the primary colour */
.xui-toggle[aria-pressed="true"].xui-toggle--solid {
  background: var(--primary);
  color: var(--primary-foreground);
}

.xui-toggle--sm { height: var(--control-h-sm); min-width: var(--control-h-sm); padding-inline: var(--space-2); font-size: var(--text-xs); }
.xui-toggle--lg { height: var(--control-h-lg); min-width: var(--control-h-lg); padding-inline: var(--space-4); font-size: var(--text-base); }

@media (pointer: coarse) { .xui-toggle { min-height: var(--tap); } }

/* ---- toggle_group ---- */
/* ToggleGroup */

.xui-tgroup { display: inline-flex; align-items: center; min-width: 0; }
.xui-tgroup--full { display: flex; width: 100%; }
.xui-tgroup--full .xui-tgroup__item { flex: 1; }

.xui-tgroup__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--control-h);
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--foreground);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.xui-tgroup__item:hover:not([disabled]) { background: var(--accent); }
.xui-tgroup__item[disabled] { opacity: 0.45; pointer-events: none; }

/* --- outline: one joined bar --- */
.xui-tgroup--outline .xui-tgroup__item { border-color: var(--border); margin-left: -1px; }
.xui-tgroup--outline .xui-tgroup__item:first-child {
  margin-left: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.xui-tgroup--outline .xui-tgroup__item:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.xui-tgroup--outline .xui-tgroup__item:only-child { border-radius: var(--radius-md); }
.xui-tgroup--outline .xui-tgroup__item[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
  z-index: 1;
}

/* --- ghost: separate, unframed --- */
.xui-tgroup--ghost { gap: 0.15rem; }
.xui-tgroup--ghost .xui-tgroup__item { border-radius: var(--radius-md); }
.xui-tgroup--ghost .xui-tgroup__item[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); }

/* --- solid: a pill track, like a segmented iOS control --- */
.xui-tgroup--solid {
  padding: 0.2rem;
  gap: 0.2rem;
  background: var(--muted);
  border-radius: var(--radius-lg);
}
.xui-tgroup--solid .xui-tgroup__item { border-radius: var(--radius-md); height: calc(var(--control-h) - 0.4rem); }
.xui-tgroup--solid .xui-tgroup__item[aria-pressed="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}

.xui-tgroup--sm .xui-tgroup__item { height: var(--control-h-sm); padding-inline: var(--space-2); font-size: var(--text-xs); }
.xui-tgroup--lg .xui-tgroup__item { height: var(--control-h-lg); padding-inline: var(--space-4); font-size: var(--text-base); }

@media (pointer: coarse) { .xui-tgroup__item { min-height: var(--tap); } }

/* ---- tooltip ---- */
/* Tooltip */

.xui-tooltip-host { display: inline-flex; }

.xui-tooltip {
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 18rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--foreground);
  color: var(--background);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  animation: xui-zoom-in 120ms var(--ease-out);
}
.xui-tooltip[data-state="closed"] { animation: xui-fade-out 90ms var(--ease-out) forwards; }

.xui-tooltip__keys { display: inline-flex; gap: 0.15rem; opacity: 0.7; }
.xui-tooltip__keys kbd {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  padding: 0 0.2rem;
  border-radius: 3px;
  background: color-mix(in oklab, currentColor 22%, transparent);
}

/* pointer devices only — a tooltip that needs a tap is a broken tooltip */
@media (pointer: coarse) {
  .xui-tooltip { display: none; }
}

/* ---- tree ---- */
/* Tree */

.xui-tree { min-width: 0; font-size: var(--text-sm); }
.xui-tree--sm { font-size: var(--text-xs); }

.xui-tree__list { list-style: none; margin: 0; padding: 0; }

.xui-tree__row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem var(--space-2);
  padding-inline-start: calc(var(--space-2) + var(--depth, 0) * 1.1rem);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-width: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.xui-tree__row:hover { background: var(--accent); }
.xui-tree__row.is-selected {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--foreground);
  font-weight: var(--weight-medium);
}
.xui-tree__row[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.xui-tree__twist {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  border-radius: var(--radius-xs);
  color: var(--muted-foreground);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.xui-tree__twist:hover { background: color-mix(in oklab, var(--foreground) 8%, transparent); }
.xui-tree__twist--leaf { visibility: hidden; }
.xui-tree__node[aria-expanded="true"] > .xui-tree__row > .xui-tree__twist { transform: rotate(90deg); }

.xui-tree__check { width: 0.9rem; height: 0.9rem; flex: none; accent-color: var(--primary); cursor: pointer; }

.xui-tree__icon { display: flex; flex: none; color: var(--muted-foreground); }
.xui-tree__row.is-selected .xui-tree__icon { color: var(--primary); }

.xui-tree__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xui-tree__hint { color: var(--muted-foreground); font-size: 0.7rem; flex: none; }

.xui-tree__badge {
  margin-inline-start: auto;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  flex: none;
}

.xui-tree__empty { color: var(--muted-foreground); font-size: var(--text-xs); padding: var(--space-2); }

@media (pointer: coarse) { .xui-tree__row { min-height: 2rem; } }

/* ---- typography ---- */
/* Typography — Text / Heading / Link / Prose */

.xui-text { margin: 0; }

/* --- scale ------------------------------------------------------------- */
.xui-text--display {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6cqi, 3.75rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.03;
}
.xui-text--h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4cqi, 2.5rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
}
.xui-text--h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3cqi, 1.875rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}
.xui-text--h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}
.xui-text--h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
}
.xui-text--p { font-size: var(--text-sm); line-height: 1.65; }
.xui-text--lead { font-size: var(--text-lg); line-height: 1.6; color: var(--muted-foreground); }
.xui-text--large { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.xui-text--small { font-size: var(--text-xs); line-height: 1.5; }
.xui-text--muted { font-size: var(--text-sm); color: var(--muted-foreground); }
.xui-text--caption { font-size: var(--text-xs); color: var(--muted-foreground); }
.xui-text--label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: var(--case-label);
  color: var(--muted-foreground);
}
.xui-text--code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.375rem;
}
.xui-text--blockquote {
  border-left: 2px solid var(--border);
  padding-left: var(--space-4);
  font-style: italic;
  color: var(--muted-foreground);
}

/* --- modifiers --------------------------------------------------------- */
.xui-text--align-left { text-align: left; }
.xui-text--align-center { text-align: center; }
.xui-text--align-right { text-align: right; }

.xui-text--w-normal { font-weight: var(--weight-normal); }
.xui-text--w-medium { font-weight: var(--weight-medium); }
.xui-text--w-semibold { font-weight: var(--weight-semibold); }
.xui-text--w-bold { font-weight: var(--weight-bold); }

.xui-text--c-muted { color: var(--muted-foreground); }
.xui-text--c-primary { color: var(--primary); }
.xui-text--c-foreground { color: var(--foreground); }
.xui-text--c-destructive { color: var(--destructive); }
.xui-text--c-success { color: var(--success); }
.xui-text--c-warning { color: var(--warning); }
.xui-text--c-info { color: var(--info); }

/* --- link -------------------------------------------------------------- */
.xui-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--primary);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.xui-link:hover { opacity: 0.82; }
.xui-link--u-always > span { text-decoration: underline; text-underline-offset: 3px; }
.xui-link--u-hover:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.xui-link--u-none > span { text-decoration: none; }
.xui-link--xs { font-size: var(--text-xs); }
.xui-link--sm { font-size: var(--text-sm); }
.xui-link--lg { font-size: var(--text-lg); }
.xui-link__ext { opacity: 0.6; }

/* --- prose ------------------------------------------------------------- */
.xui-prose { color: var(--foreground); font-size: var(--text-sm); line-height: 1.7; }
.xui-prose--measure { max-width: 68ch; }
.xui-prose--sm { font-size: var(--text-xs); }
.xui-prose--lg { font-size: var(--text-base); }
.xui-prose > * + * { margin-top: 1em; }
.xui-prose h1, .xui-prose h2, .xui-prose h3, .xui-prose h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin-top: 1.8em;
}
.xui-prose h1 { font-size: var(--text-3xl); font-weight: var(--weight-display); }
.xui-prose h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.xui-prose h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.xui-prose h4 { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.xui-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.xui-prose strong { font-weight: var(--weight-semibold); }
.xui-prose ul, .xui-prose ol { padding-left: 1.4em; }
.xui-prose ul { list-style: disc; }
.xui-prose ol { list-style: decimal; }
.xui-prose li + li { margin-top: 0.4em; }
.xui-prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
.xui-prose pre {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow-x: auto;
  font-size: var(--text-xs);
  line-height: 1.6;
}
.xui-prose pre code { background: none; padding: 0; }
.xui-prose blockquote {
  border-left: 2px solid var(--primary);
  padding-left: var(--space-4);
  color: var(--muted-foreground);
}
.xui-prose hr { margin-block: var(--space-8); }
.xui-prose table { width: 100%; font-size: var(--text-xs); }
.xui-prose th, .xui-prose td { border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; }
.xui-prose th { font-weight: var(--weight-semibold); color: var(--muted-foreground); }
.xui-prose img { border-radius: var(--radius-lg); }

/* ---- upload ---- */
/* Upload */

.xui-upload { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.xui-upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  color: var(--muted-foreground);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.xui-upload__zone:hover:not(:disabled) { border-color: var(--ring); background: var(--accent); }
.xui-upload__zone:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.xui-upload__zone:disabled { opacity: 0.55; cursor: not-allowed; }
.xui-upload[data-dragging="true"] .xui-upload__zone {
  border-color: var(--primary);
  border-style: solid;
  background: color-mix(in oklab, var(--primary) 7%, var(--background));
}

.xui-upload--compact .xui-upload__zone { flex-direction: row; padding: var(--space-3) var(--space-4); }
.xui-upload--compact .xui-upload__text { align-items: flex-start; text-align: left; }

.xui-upload__icon { display: flex; color: var(--muted-foreground); }
.xui-upload[data-dragging="true"] .xui-upload__icon { color: var(--primary); }
.xui-upload__text { display: flex; flex-direction: column; gap: 0.1rem; align-items: center; min-width: 0; }
.xui-upload__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground); }
.xui-upload__hint { font-size: var(--text-xs); color: var(--muted-foreground); }

.xui-upload__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.xui-upload__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  min-width: 0;
}
.xui-upload__row[data-state="failed"] { border-color: var(--destructive); }

.xui-upload__meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.xui-upload__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xui-upload__note { font-size: 0.7rem; color: var(--muted-foreground); }
.xui-upload__row[data-state="failed"] .xui-upload__note { color: var(--destructive); }

.xui-upload__bar {
  height: 3px;
  margin-top: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--muted);
  overflow: hidden;
}
.xui-upload__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 120ms linear;
}
.xui-upload__row[data-state="done"] .xui-upload__fill { background: var(--success); }

.xui-upload__x {
  display: flex;
  padding: 0.2rem;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
  flex: none;
}
.xui-upload__x:hover { background: var(--accent); color: var(--foreground); }

/* ---- video ---- */
/* Video and Audio share one frame */

.xui-media { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; }

.xui-media__box {
  position: relative;
  overflow: hidden;
  /* black dominates so the letterbox stays a dark cinema box in both modes
     (dark-mode --foreground is near-white) */
  background: color-mix(in oklab, black 92%, var(--foreground));
  min-width: 0;
}
.xui-media--r-none .xui-media__box { border-radius: 0; }
.xui-media--r-sm   .xui-media__box { border-radius: var(--radius-sm); }
.xui-media--r-md   .xui-media__box { border-radius: var(--radius-md); }
.xui-media--r-lg   .xui-media__box { border-radius: var(--radius-lg); }
.xui-media--r-xl   .xui-media__box { border-radius: var(--radius-xl); }

.xui-video .xui-media__el { display: block; width: 100%; height: 100%; }

.xui-media__caption { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.45; }

/* audio needs no dark box */
.xui-audio .xui-media__box { background: none; }
.xui-audio .xui-media__el { display: block; width: 100%; }