.ui-chipsbar { container-type: inline-size; position: sticky; z-index: 5; box-sizing: border-box; width: 100%; padding: 6px 0 4px; border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg); color: var(--ui-fg); font: 14px/1.3 var(--ui-font); }
.ui-chipsbar-line { display: flex; align-items: center; min-width: 0; }
.ui-chipsbar-chips { position: relative; display: flex; flex: 1; gap: 8px; min-width: 0; padding: 0 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
.ui-chipsbar-chips::-webkit-scrollbar { display: none; }
.ui-chipsbar-chips[data-fade="left"] { mask-image: linear-gradient(to right, transparent, #000 24px); -webkit-mask-image: linear-gradient(to right, transparent, #000 24px); }
.ui-chipsbar-chips[data-fade="right"] { mask-image: linear-gradient(to left, transparent, #000 24px); -webkit-mask-image: linear-gradient(to left, transparent, #000 24px); }
.ui-chipsbar-chips[data-fade="both"] { mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ui-chipsbar-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-fg); font: 500 14px/1 var(--ui-font); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .12s, border-color .12s, color .12s; }
.ui-chipsbar-chip small { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-chipsbar-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-chipsbar-chip[aria-pressed="true"] small { color: inherit; }
.ui-chipsbar-chip:disabled { border-style: dashed; color: var(--ui-muted); cursor: default; }
.ui-chipsbar-chip:focus-visible, .ui-chipsbar-clear:focus-visible { outline: none; box-shadow: var(--ui-focus); }
@media (hover: hover) { .ui-chipsbar-chip:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--ui-accent); } }
.ui-chipsbar-clear { flex: none; min-width: 60px; min-height: 44px; margin-right: 6px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-accent); font: 600 14px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
.ui-chipsbar-count { min-height: 18px; margin: 2px 0 0; padding: 0 16px; color: var(--ui-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
@container (min-width: 640px) {
  .ui-chipsbar-chips { flex-wrap: wrap; overflow: visible; }
  .ui-chipsbar-chips[data-fade] { mask-image: none; -webkit-mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-chipsbar-chip { transition: none; } }