/*
 * The Search page (assets/wkx-search.js). Everything is scoped to .wks-root
 * (plus the two layout rules below that give the page the full workspace
 * while it is mounted). The --pt-* tokens are the same names and values
 * Create uses (index.html, CREATE REDESIGN tokens; wkx-voicestudio.css keeps
 * the same copy), set on the page only; --wks-* adds the few this page needs
 * on top. Static gradients only: no animation loops, no canvas.
 */

/* While Search is mounted it owns the whole workspace: the shared right
   panel (#rightPanelContent) is not used, the inspector lives in the page. */
body.search-v3-active .workspace:has(.wks-root) {
  grid-template-columns: minmax(0, 1fr) !important;
  /* Create's workspace padding, so the shared top bar sits in the same spot. */
  padding: 20px 28px calc(var(--player-height, 84px) + 36px) !important;
  background:
    radial-gradient(1100px 340px at 62% -90px, rgba(124, 92, 255, .20), transparent 70%),
    radial-gradient(640px 360px at 0% 0%, rgba(79, 124, 255, .07), transparent 70%),
    #06060b !important;
}
@media (max-height: 940px) {
  body.search-v3-active .workspace:has(.wks-root) { padding-top: 16px !important; }
}
body.search-v3-active .workspace:has(.wks-root) .profile-panel { display: none !important; }
/* The shell's panels clip (overflow: hidden / auto) without ever scrolling:
   the window scrolls. Left as they are, they would be the sticky inspector's
   scroll container and it would scroll away with the page. Only the wide
   layout has a sticky inspector (narrower ones use a fixed drawer), and
   there the clipping stays: it keeps a narrow window from scrolling sideways. */
body.search-v3-active .main:has(.wks-root.is-wide),
body.search-v3-active .content-panel:has(.wks-root.is-wide) { overflow: visible !important; }
@media (max-width: 820px) {
  body.search-v3-active .workspace:has(.wks-root) { padding: 14px 14px calc(var(--player-height, 84px) + 30px) !important; }
}

.wks-root {
  /* The --pt-* tokens are the app's (index.html, :root). This page's own: the selected-result glow. */
  --wks-glow: 0 0 0 1px rgba(167, 139, 250, .55), 0 0 24px rgba(124, 92, 255, .32);
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  min-width: 0;
  color: var(--pt-text-primary);
  color-scheme: dark;
}
.wks-root *, .wks-root *::before, .wks-root *::after { box-sizing: border-box; }
.wks-root [hidden] { display: none !important; }
.wks-root button { font: inherit; color: inherit; }
.wks-root :is(button, a, input, select, [tabindex="-1"]):focus-visible { outline: none; box-shadow: var(--pt-focus-ring); }
.wks-root .wks-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Layout: results | side (filters + inspector) ───────────────────────── */
.wks-root .wks-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.wks-root.is-wide .wks-layout { grid-template-columns: minmax(0, 1fr) clamp(320px, 26%, 372px); }
.wks-root .wks-main { min-width: 0; container: wks-main / inline-size; }
.wks-root .wks-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.wks-root.is-wide .wks-side {
  position: sticky; top: 12px;
  max-height: calc(100vh - var(--player-height, 84px) - 40px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* At the page's top the column starts below the top bar, so its bottom sits
   under the global player until the page scrolls: room at the end lets its
   last card always scroll clear of the player. */
.wks-root.is-wide .wks-side::after { content: ""; flex: 0 0 40px; }
/* Medium / small: the inspector is a drawer over the page. */
.wks-root:not(.is-wide) .wks-side {
  position: fixed; z-index: 60; top: 12px; right: 12px; bottom: calc(var(--player-height, 84px) + 12px);
  width: min(400px, calc(100vw - 24px)); overflow: auto; overscroll-behavior: contain;
  transform: translateX(calc(100% + 24px)); transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
  visibility: hidden;
}
.wks-root:not(.is-wide).is-drawer-open .wks-side { transform: none; visibility: visible; }
.wks-root.is-small .wks-side { left: 8px; right: 8px; top: 8px; width: auto; }
.wks-root .wks-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(3, 2, 10, .55); }
.wks-root:not(.is-wide) .wks-filters-wide:empty { display: none; }
/* No query: the discovery page takes the full width (no empty inspector or
   filters card beside it). */
.wks-root.is-wide:not(.has-query) .wks-layout { grid-template-columns: minmax(0, 1fr); }
.wks-root.is-wide:not(.has-query) .wks-side { display: none; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.wks-root .wks-hero { position: relative; margin: 0 0 14px; }
.wks-root .wks-hero-text { position: relative; z-index: 1; min-width: 0; }
.wks-root .wks-h1 {
  margin: 0; font-size: clamp(32px, 3.3vw, 50px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; color: #fff;
}
.wks-root .wks-h1-accent {
  background: linear-gradient(92deg, #c4b5fd 0%, #a78bfa 38%, #8b5cf6 70%, #6d8bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wks-root .wks-sub { margin: 6px 0 0; color: var(--pt-text-secondary); font-size: 14.5px; line-height: 1.45; }
/* Decoration level with the heading (a centred wave ran into the subtitle). */
.wks-root .wks-hero-wave {
  position: absolute; right: 0; top: 0; z-index: 0; width: min(44%, 400px); height: 60px; pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(124, 92, 255, .45)); opacity: .95;
}
@container wks-main (max-width: 760px) {
  .wks-root .wks-hero-wave { opacity: .35; width: 60%; }
}
@container wks-main (max-width: 360px) {
  .wks-root .wks-h1 { font-size: 26px; }
}

/* ── Category tabs ─────────────────────────────────────────────────────── */
.wks-root .wks-tabs {
  display: flex; justify-content: flex-start; gap: 6px; padding: 4px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--pt-border-subtle); border-radius: 16px; background: rgba(12, 10, 24, .72);
}
.wks-root .wks-tabs::-webkit-scrollbar { display: none; }
.wks-root .wks-tab {
  flex: 0 1 180px; min-width: 118px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: var(--pt-text-secondary); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.wks-root .wks-tab:hover { background: rgba(255, 255, 255, .04); color: var(--pt-text-primary); }
/* Similar lists samples only: the other tabs stay in place, switched off. */
.wks-root .wks-tab.is-off { opacity: .38; cursor: default; }
.wks-root .wks-tab.is-off:hover { background: transparent; color: var(--pt-text-secondary); }
.wks-root .wks-tab.is-active {
  color: #fff; border-color: rgba(196, 181, 253, .55);
  background: linear-gradient(135deg, rgba(124, 92, 255, .95), rgba(91, 58, 238, .9));
  box-shadow: 0 4px 16px rgba(124, 92, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.wks-root .wks-tab-icon svg { width: 20px; height: 20px; display: block; }
.wks-root .wks-tab-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.wks-root .wks-tab-label { font-size: 14px; font-weight: 600; }
.wks-root .wks-tab-count { font-size: 11.5px; color: inherit; opacity: .75; font-variant-numeric: tabular-nums; }

/* ── AI Search Assistant ───────────────────────────────────────────────── */
.wks-root .wks-assistant {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 10px 14px;
  border: 1px solid rgba(167, 139, 250, .38); border-radius: var(--pt-radius-card);
  background: linear-gradient(100deg, rgba(76, 48, 190, .30), rgba(20, 16, 44, .82) 45%, rgba(18, 16, 40, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 40px rgba(40, 20, 120, .18);
}
.wks-root .wks-assist-icon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; color: #c4b5fd; }
.wks-root .wks-assist-icon svg { width: 26px; height: 26px; filter: drop-shadow(0 0 10px rgba(167, 139, 250, .7)); }
.wks-root .wks-assist-text { flex: 0 1 360px; min-width: 200px; max-width: 360px; }
/* No chips beside it (an empty page with no recent searches): all the room. */
.wks-root .wks-assistant:not(:has(.wks-chip-btn)) .wks-assist-text { flex: 1 1 auto; max-width: none; }
.wks-root .wks-assist-title { margin: 0; font-size: 15.5px; font-weight: 650; color: #fff; }
/* The whole subtitle, on up to two lines. */
.wks-root .wks-assist-sub {
  margin: 2px 0 0; color: var(--pt-text-secondary); font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wks-root .wks-assist-chips {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  padding: 2px;
}
.wks-root .wks-assist-chips::-webkit-scrollbar { display: none; }
.wks-root .wks-assist-more {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--pt-border-strong); background: rgba(255, 255, 255, .05); cursor: pointer;
}
.wks-root .wks-assist-more svg { width: 16px; height: 16px; }
@container wks-main (max-width: 700px) {
  .wks-root .wks-assistant { flex-wrap: wrap; }
  .wks-root .wks-assist-text { flex-basis: calc(100% - 60px); min-width: 0; max-width: none; }
  .wks-root .wks-assist-title { overflow-wrap: anywhere; }
  .wks-root .wks-assist-chips { flex-basis: 100%; }
  .wks-root .wks-assist-more { display: none; }
}

/* Chips (suggestions, recent searches, tags) */
.wks-root .wks-chip-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; white-space: nowrap;
  border: 1px solid rgba(167, 139, 250, .3); border-radius: 10px; background: rgba(24, 20, 50, .8);
  color: var(--pt-text-primary); font-size: 12.5px; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease;
}
.wks-root .wks-chip-btn:hover { border-color: rgba(196, 181, 253, .6); background: rgba(46, 34, 100, .7); }
.wks-root .wks-chip-count { color: var(--pt-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ── Results head ──────────────────────────────────────────────────────── */
.wks-root .wks-results-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 0 0 10px; }
.wks-root .wks-head-text { flex: 1 1 280px; min-width: 0; }
/* One line (a long sample name as Similar's title ellipsizes; the full text
   is its tooltip). */
.wks-root .wks-results-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wks-root .wks-results-sub { margin: 4px 0 0; color: var(--pt-text-secondary); font-size: 13.5px; overflow-wrap: anywhere; }
.wks-root .wks-results-ms, .wks-root .wks-results-note { color: var(--pt-text-muted); }
.wks-root .wks-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wks-root .wks-head-row2 { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.wks-root .wks-modes, .wks-root .wks-views {
  display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--pt-border-strong); border-radius: 12px; background: rgba(12, 10, 24, .8);
}
.wks-root .wks-mode {
  height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--pt-text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.wks-root .wks-mode:hover { color: #fff; }
.wks-root .wks-mode.is-active { color: #fff; background: var(--pt-accent-soft); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .55); }
.wks-root .wks-view { width: 38px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--pt-text-secondary); cursor: pointer; }
.wks-root .wks-view svg { width: 18px; height: 18px; }
.wks-root .wks-view.is-active { color: #fff; background: linear-gradient(135deg, #7c5cff, #5b3aee); box-shadow: 0 4px 16px rgba(124, 92, 255, .4); }
.wks-root .wks-select-wrap { position: relative; display: inline-flex; }
.wks-root .wks-select {
  appearance: none; -webkit-appearance: none; height: 40px; min-width: 168px; padding: 0 38px 0 14px;
  border: 1px solid var(--pt-border-strong); border-radius: 12px; background: rgba(12, 10, 24, .8); color: var(--pt-text-primary);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.wks-root .wks-select option { background: #16132b; color: #f7f5ff; }
.wks-root .wks-select-caret { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; color: var(--pt-text-muted); }
.wks-root .wks-select-caret svg { width: 16px; height: 16px; display: block; }
.wks-root .wks-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--pt-text-secondary); font-size: 13px; cursor: pointer; user-select: none; }
.wks-root .wks-toggle input { width: 16px; height: 16px; margin: 0; accent-color: #7c5cff; cursor: pointer; }
.wks-root .wks-toggle-note { color: var(--pt-text-muted); font-size: 12px; }
.wks-root .wks-link-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none;
  color: #b9a7ff; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.wks-root .wks-link-btn svg { width: 14px; height: 14px; }
.wks-root .wks-link-btn:hover { color: #ddd6fe; }

.wks-root .wks-seed {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--pt-border-card); border-radius: 14px; background: rgba(24, 20, 50, .6); color: var(--pt-text-secondary); font-size: 13px;
}
.wks-root .wks-seed b { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.wks-root .wks-seed > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.wks-root .wks-seed-icon svg { width: 20px; height: 20px; color: var(--pt-accent-bright); display: block; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.wks-root .wks-icon-btn {
  width: 38px; height: 38px; flex: 0 0 auto; display: inline-grid; place-items: center; margin: 0; padding: 0;
  border: 1px solid var(--pt-border-strong); border-radius: 11px; background: rgba(255, 255, 255, .035);
  color: var(--pt-text-secondary); cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.wks-root .wks-icon-btn:hover { color: #fff; border-color: rgba(196, 181, 253, .45); background: rgba(124, 92, 255, .14); }
.wks-root .wks-icon-btn svg { width: 18px; height: 18px; }
.wks-root .wks-like { border-radius: 50%; }
.wks-root .wks-like.is-on { color: #f472b6; border-color: rgba(244, 114, 182, .5); background: rgba(244, 114, 182, .12); }
.wks-root .wks-like.is-on svg path { fill: currentColor; }
.wks-root .wks-create.is-unavailable, .wks-root .wks-cta.is-unavailable { opacity: .45; cursor: not-allowed; }
.wks-root .wks-pill-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; white-space: nowrap;
  border: 1px solid rgba(196, 181, 253, .5); border-radius: 11px; background: linear-gradient(135deg, rgba(124, 92, 255, .9), rgba(91, 58, 238, .9));
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.wks-root .wks-pill-btn svg { width: 16px; height: 16px; }
.wks-root .wks-pill-btn:disabled { opacity: .6; cursor: default; }
.wks-root .wks-pill-ghost { background: rgba(255, 255, 255, .04); border-color: var(--pt-border-strong); color: var(--pt-text-primary); }
.wks-root .wks-pill-ghost:hover { border-color: rgba(196, 181, 253, .5); background: rgba(124, 92, 255, .12); }

/* ── Result rows (list) ────────────────────────────────────────────────── */
.wks-root .wks-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wks-root .wks-row {
  display: grid; align-items: center; gap: 14px; min-width: 0; padding: 5px 12px 5px 5px;
  /* The title gets the room; the waveform slot takes what's left. */
  grid-template-columns: 64px minmax(170px, 2.2fr) minmax(0, auto) minmax(90px, 1fr) 76px 40px auto;
  border: 1px solid var(--pt-border-subtle); border-radius: 16px; background: rgba(14, 12, 28, .72);
  cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.wks-root .wks-row:hover { border-color: rgba(167, 139, 250, .28); background: rgba(22, 18, 44, .8); }
.wks-root .wks-row.is-selected, .wks-root .wks-card.is-selected, .wks-root .wks-strip-card.is-selected {
  border-color: rgba(167, 139, 250, .75); background: rgba(30, 24, 62, .82); box-shadow: var(--wks-glow);
}
.wks-root .wks-art {
  position: relative; width: 64px; height: 54px; border-radius: 11px; overflow: hidden;
  background: linear-gradient(135deg, #2a1f5c, #10204a);
}
.wks-root .wks-art img, .wks-root .wks-card-art img, .wks-root .wks-strip-art img, .wks-root .wks-more-art img, .wks-root .wks-insp-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wks-root .wks-art-play {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(8, 6, 18, .55); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity 150ms ease;
}
.wks-root .wks-art-play svg { width: 14px; height: 14px; margin-left: 1px; }
.wks-root :is(.wks-row, .wks-card, .wks-strip-card, .wks-more-row):is(:hover, .is-selected, .is-current, :focus-within) .wks-art-play { opacity: 1; }
.wks-root .wks-row.is-playing .wks-art-play, .wks-root .wks-card.is-playing .wks-art-play { background: rgba(124, 92, 255, .85); border-color: rgba(221, 214, 254, .8); }
.wks-root .wks-row-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wks-root .wks-row-name { color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wks-root .wks-row-sub { color: var(--pt-text-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wks-root .wks-row-sub a, .wks-root .wks-insp-producer a, .wks-root .wks-det a { color: var(--pt-text-secondary); text-decoration: none; }
.wks-root .wks-row-sub a:hover, .wks-root .wks-insp-producer a:hover, .wks-root .wks-det a:hover { color: #ddd6fe; text-decoration: underline; }
.wks-root .wks-row-chips { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.wks-root .wks-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; white-space: nowrap;
  border: 1px solid transparent; border-radius: 8px; font-size: 11.5px; font-weight: 600;
}
.wks-root .wks-chip-type { color: #cfe0ff; background: rgba(91, 140, 255, .16); border-color: rgba(91, 140, 255, .38); }
.wks-root .wks-chip-reason { color: #e3dbff; background: rgba(124, 92, 255, .14); border-color: rgba(167, 139, 250, .34); font-weight: 500; }
.wks-root .wks-chip-tag { color: #d8f3ec; background: rgba(45, 212, 191, .1); border-color: rgba(45, 212, 191, .32); font-weight: 500; text-transform: capitalize; }
.wks-root .wks-chip-voice { color: #cfe0ff; background: rgba(79, 124, 255, .18); border-color: rgba(96, 140, 255, .42); }
.wks-root .wks-chip-producer { color: #fde7c7; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .3); }
.wks-root .wks-chip-muted { color: var(--pt-text-muted); background: rgba(255, 255, 255, .04); border-color: var(--pt-border-strong); font-weight: 500; }
.wks-root .wks-row-wave { min-width: 0; display: flex; align-items: center; height: 32px; }
.wks-root .wks-wave { position: relative; display: block; width: 100%; height: 28px; color: #9b7bff; }
/* No decoded peaks yet: a short, quiet baseline (never a made-up shape, and
   not a long dashed line that reads as a broken waveform). */
.wks-root .wks-wave:not(.is-real)::before {
  content: ""; position: absolute; left: 30%; right: 30%; top: 50%; border-top: 1px dashed rgba(167, 139, 250, .22); opacity: .6;
}
.wks-root .wks-insp-wave .wks-wave:not(.is-real)::before { left: 0; right: 0; opacity: 1; }
.wks-root .wks-wave-svg { width: 100%; height: 100%; display: block; fill: currentColor; filter: drop-shadow(0 0 4px rgba(124, 92, 255, .45)); }
.wks-root .wks-row.is-playing .wks-wave, .wks-root .wks-row.is-current .wks-wave { color: #b79cff; }
.wks-root .wks-row-note { color: var(--pt-text-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wks-root .wks-row-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--pt-text-secondary); font-variant-numeric: tabular-nums; }
.wks-root .wks-row-meta b { color: var(--pt-text-primary); font-weight: 600; }
.wks-root .wks-row-dur { color: var(--pt-text-secondary); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.wks-root .wks-row-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.wks-root .wks-art-voice, .wks-root .wks-art-producer {
  display: grid; place-items: center; color: #c7d2fe; font-weight: 700; font-size: 17px; letter-spacing: .02em;
  background: radial-gradient(circle at 30% 20%, rgba(124, 92, 255, .55), rgba(20, 16, 50, .9) 70%);
}
.wks-root .wks-art-producer { background: radial-gradient(circle at 30% 20%, rgba(251, 146, 60, .4), rgba(30, 16, 40, .9) 72%); color: #fde7c7; }
.wks-root .wks-art-voice svg { width: 26px; height: 26px; }
.wks-root .wks-row-voice.is-unusable .wks-row-name { color: var(--pt-text-secondary); }
.wks-root .wks-row-skel { cursor: default; grid-template-columns: 64px 1fr; }
.wks-root .wks-row-skel .wks-art { background: rgba(255, 255, 255, .05); }
.wks-root .wks-row-skel i { display: block; height: 11px; width: 42%; border-radius: 5px; background: rgba(255, 255, 255, .06); }
.wks-root .wks-row-skel i + i { width: 24%; }

/* All tab: producers and voices that also match, as pills after the results
   header's second-line controls (on a line of their own, from the left, when
   they don't fit). */
.wks-root .wks-also {
  display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0;
  flex: 1 1 auto; justify-content: flex-start;
}
.wks-root .wks-also::-webkit-scrollbar { display: none; }
.wks-root .wks-also-label { flex: 0 0 auto; color: var(--pt-text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wks-root .wks-also-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 3px; white-space: nowrap;
  border: 1px solid var(--pt-border-strong); border-radius: 17px; background: rgba(20, 16, 42, .75); cursor: pointer;
  font-size: 13px; color: var(--pt-text-primary);
}
.wks-root .wks-also-pill:hover { border-color: rgba(167, 139, 250, .45); }
.wks-root .wks-also-pill.is-selected { border-color: rgba(167, 139, 250, .75); box-shadow: var(--wks-glow); }
.wks-root .wks-also-pill a { color: var(--pt-text-primary); text-decoration: none; font-weight: 600; }
.wks-root .wks-also-pill a:hover { color: #ddd6fe; text-decoration: underline; }
.wks-root .wks-also-pill b { font-weight: 600; }
.wks-root .wks-also-pill em { color: var(--pt-text-muted); font-style: normal; font-size: 12px; }
.wks-root .wks-also-ava {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fde7c7;
  background: radial-gradient(circle at 30% 20%, rgba(251, 146, 60, .45), rgba(30, 16, 40, .95) 72%);
}
.wks-root .wks-also-voice .wks-also-ava { color: #c7d2fe; background: radial-gradient(circle at 30% 20%, rgba(124, 92, 255, .55), rgba(20, 16, 50, .9) 70%); }
.wks-root .wks-also-ava svg { width: 15px; height: 15px; }
.wks-root .wks-also .wks-link-btn { flex: 0 0 auto; }

/* Narrower result column: drop the least important columns, never scroll sideways. */
@container wks-main (max-width: 1020px) {
  .wks-root .wks-row { grid-template-columns: 64px minmax(160px, 2.4fr) minmax(0, auto) minmax(60px, .7fr) 70px 38px auto; gap: 12px; }
}
/* The results column at 1440 / 1100 wide windows (~820 px): keep the type
   badge and match chip, drop the waveform slot. */
@container wks-main (max-width: 860px) {
  .wks-root .wks-row { grid-template-columns: 56px minmax(140px, 1fr) auto 62px 36px auto; gap: 10px; }
  .wks-root .wks-art { width: 56px; }
  .wks-root .wks-row-wave { display: none; }
  .wks-root .wks-row-actions { gap: 6px; }
  .wks-root .wks-row-actions .wks-icon-btn { width: 34px; height: 34px; }
}
@container wks-main (max-width: 700px) {
  .wks-root .wks-row { grid-template-columns: 56px minmax(0, 1fr) 62px 36px auto; }
  .wks-root .wks-row-chips { display: none; }
}
@container wks-main (max-width: 560px) {
  .wks-root .wks-head-tools { width: 100%; }
  .wks-root .wks-modes { flex: 1 1 100%; }
  .wks-root .wks-mode { flex: 1 1 0; min-width: 0; padding: 0 6px; }
  .wks-root .wks-select-wrap { flex: 1 1 auto; min-width: 0; }
  .wks-root .wks-select { width: 100%; min-width: 0; }
  /* Voice / producer rows: their one action lives in the details drawer here. */
  .wks-root .wks-row-voice .wks-row-actions, .wks-root .wks-row-producer .wks-row-actions { display: none; }
  .wks-root .wks-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding-right: 8px; }
  .wks-root .wks-art { width: 56px; height: 50px; }
  .wks-root .wks-row-meta, .wks-root .wks-row-dur { display: none; }
  .wks-root .wks-row-actions .wks-create { display: none; }
  .wks-root .wks-row-actions { gap: 6px; }
  .wks-root .wks-icon-btn { width: 34px; height: 34px; }
}
/* A very narrow column: the title never collapses; the row's actions are in
   its details drawer. */
@container wks-main (max-width: 300px) {
  .wks-root .wks-row { grid-template-columns: 48px minmax(0, 1fr); }
  .wks-root .wks-art { width: 48px; height: 46px; }
  .wks-root .wks-row-actions { display: none; }
}
.wks-root.is-small .wks-sub, .wks-root.is-small .wks-assist-sub { display: none; }
/* Touch screens have no hover: the play button is always shown. */
@media (hover: none) {
  .wks-root .wks-art-play { opacity: 1; }
}

/* ── Grid view ─────────────────────────────────────────────────────────── */
.wks-root .wks-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 14px; }
.wks-root .wks-list.is-grid > .wks-row, .wks-root .wks-list.is-grid > .wks-empty, .wks-root .wks-list.is-grid > .wks-notice { grid-column: 1 / -1; }
.wks-root .wks-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--pt-border-subtle); border-radius: 16px; background: rgba(14, 12, 28, .72);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.wks-root .wks-card:hover { border-color: rgba(167, 139, 250, .3); }
.wks-root .wks-card-art { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #2a1f5c, #10204a); }
.wks-root .wks-card-art .wks-art-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.wks-root .wks-card-art .wks-art-play svg { width: 18px; height: 18px; }
.wks-root .wks-card-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 4px; min-width: 0; }
.wks-root .wks-card-meta { color: var(--pt-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.wks-root .wks-card-actions { display: flex; gap: 6px; padding: 8px 12px 12px; }
.wks-root .wks-card-actions .wks-icon-btn { width: 34px; height: 34px; }

/* ── Foot, empty, no results ───────────────────────────────────────────── */
.wks-root .wks-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 0; color: var(--pt-text-muted); font-size: 12.5px; }
.wks-root .wks-foot:empty { display: none; }
.wks-root .wks-foot-note { color: var(--pt-text-muted); }
.wks-root .wks-empty {
  padding: 28px 22px; text-align: center; border: 1px dashed rgba(167, 139, 250, .25); border-radius: 18px; background: rgba(14, 12, 28, .5);
}
.wks-root .wks-empty h3 { margin: 0 0 6px; font-size: 18px; color: #fff; }
.wks-root .wks-empty p { margin: 0 auto; max-width: 560px; color: var(--pt-text-secondary); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.wks-root .wks-empty-small { padding: 16px; }
.wks-root .wks-empty-tips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; }
.wks-root .wks-empty-tips > span { color: var(--pt-text-muted); font-size: 12.5px; }
.wks-root .wks-empty .wks-pill-btn { margin-top: 12px; }
/* Sound-based results for words no sample name has: said above them. */
.wks-root .wks-notice {
  padding: 12px 16px; border: 1px solid rgba(167, 139, 250, .3); border-radius: 14px; background: rgba(24, 20, 50, .6);
  color: var(--pt-text-secondary); font-size: 13px; line-height: 1.45;
}
.wks-root .wks-notice p { margin: 0; overflow-wrap: anywhere; }
.wks-root .wks-notice b { color: #fff; font-weight: 600; }
.wks-root .wks-notice .wks-empty-tips { justify-content: flex-start; margin-top: 10px; }

/* ── AI Similar Suggestions strip ──────────────────────────────────────── */
.wks-root .wks-strip { margin: 16px 0 0; padding: 12px; border: 1px solid var(--pt-border-card); border-radius: 18px; background: rgba(16, 13, 36, .66); }
.wks-root .wks-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 2px 10px; }
.wks-root .wks-strip-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 650; color: #fff; }
.wks-root .wks-strip-title svg { width: 16px; height: 16px; color: #c4b5fd; }
.wks-root .wks-strip-sub { color: var(--pt-text-muted); font-size: 12px; overflow-wrap: anywhere; }
/* auto-fit: the (up to 4) cards share the whole row — no empty track beside
   them on a wide column, and 4 across on the ~810 px results column. */
.wks-root .wks-strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.wks-root .wks-strip-card {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; cursor: pointer;
  border: 1px solid var(--pt-border-subtle); border-radius: 14px; background: rgba(24, 20, 50, .6);
}
.wks-root .wks-strip-art { position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #2a1f5c, #10204a); }
.wks-root .wks-strip-art .wks-art-play { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.wks-root .wks-strip-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Names on up to two lines; BPM · key, then the similarity, each on its own. */
.wks-root .wks-strip-body .wks-row-name {
  font-size: 13px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wks-root .wks-strip-meta, .wks-root .wks-strip-why { color: var(--pt-text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wks-root .wks-strip-why { color: #c9bcff; }

/* ── Empty page (no query) ─────────────────────────────────────────────── */
.wks-root .wks-discover { display: flex; flex-direction: column; gap: 18px; }
.wks-root .wks-disc-block { padding: 16px; border: 1px solid var(--pt-border-subtle); border-radius: 18px; background: rgba(14, 12, 28, .6); }
.wks-root .wks-disc-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 650; color: #fff; }
.wks-root .wks-disc-title svg { width: 16px; height: 16px; color: #c4b5fd; }
.wks-root .wks-disc-sub { margin: -4px 0 10px; color: var(--pt-text-muted); font-size: 12.5px; }
.wks-root .wks-disc-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Search Filters card ───────────────────────────────────────────────── */
.wks-root .wks-filters { border: 1px solid var(--pt-border-strong); border-radius: 16px; background: rgba(14, 12, 28, .8); }
.wks-root .wks-filters-narrow .wks-filters { margin: 0 0 16px; }
.wks-root .wks-filters-head {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px;
  border: 0; background: transparent; color: #fff; cursor: pointer; text-align: left;
}
.wks-root .wks-filters-icon svg { width: 18px; height: 18px; display: block; color: var(--pt-text-secondary); }
.wks-root .wks-filters-title { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.wks-root .wks-filters-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--pt-accent); font-size: 11px; }
.wks-root .wks-filters-caret svg { width: 18px; height: 18px; display: block; transition: transform 160ms ease; color: var(--pt-text-muted); }
.wks-root .wks-filters-caret.is-open svg { transform: rotate(180deg); }
.wks-root .wks-filters-body { padding: 2px 16px 16px; }
.wks-root .wks-filters-form { display: grid; gap: 12px; }
.wks-root .wks-filters-narrow .wks-filters-form { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; }
.wks-root .wks-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wks-root .wks-field-label { color: var(--pt-text-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.wks-root .wks-field :is(input, select), .wks-root .wks-bpm input {
  width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--pt-border-strong); border-radius: 10px;
  background: rgba(6, 5, 14, .6); color: var(--pt-text-primary); font: inherit; font-size: 13px;
}
.wks-root .wks-field select option { background: #16132b; }
.wks-root .wks-bpm { display: flex; align-items: center; gap: 8px; color: var(--pt-text-muted); }
.wks-root .wks-check { display: inline-flex; align-items: center; gap: 8px; color: var(--pt-text-secondary); font-size: 13px; cursor: pointer; }
.wks-root .wks-check input { width: 16px; height: 16px; margin: 0; accent-color: #7c5cff; }
.wks-root .wks-filters-note { margin: 0; color: var(--pt-text-muted); font-size: 12px; line-height: 1.45; }
.wks-root .wks-filters-actions { display: flex; align-items: center; gap: 14px; }

/* ── Inspector ─────────────────────────────────────────────────────────── */
.wks-root .wks-inspector {
  position: relative; padding: 14px; border: 1px solid var(--pt-border-card); border-radius: 20px;
  background: linear-gradient(180deg, rgba(22, 18, 46, .92), rgba(12, 10, 26, .92));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04);
  container: wks-insp / inline-size;
}
/* As a drawer over the results it is opaque, so rows never show through. */
.wks-root:not(.is-wide) .wks-inspector { background: linear-gradient(180deg, #17132f, #0d0b1c); }
.wks-root .wks-insp-close { position: absolute; top: 20px; right: 20px; z-index: 2; background: rgba(8, 6, 18, .7); }
.wks-root .wks-insp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 18px; text-align: center; color: var(--pt-text-muted); font-size: 13px; }
.wks-root .wks-insp-empty svg { width: 30px; height: 30px; color: #a78bfa; opacity: .7; }
.wks-root .wks-insp-art {
  position: relative; aspect-ratio: 16 / 11; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #2a1f5c, #10204a); display: grid; place-items: center;
}
.wks-root .wks-insp-art-voice svg { width: 64px; height: 64px; color: #c7d2fe; }
.wks-root .wks-insp-art-producer { font-size: 54px; font-weight: 700; color: #fde7c7; background: radial-gradient(circle at 30% 20%, rgba(251, 146, 60, .45), rgba(30, 16, 40, .95) 72%); }
.wks-root .wks-insp-play {
  position: absolute; left: 14px; bottom: 14px; width: 56px; height: 56px; display: grid; place-items: center; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 50%; background: rgba(10, 8, 24, .55); color: #fff; cursor: pointer;
  box-shadow: 0 0 22px rgba(124, 92, 255, .5);
}
.wks-root .wks-insp-play svg { width: 22px; height: 22px; margin-left: 2px; }
.wks-root .wks-insp-play[aria-pressed="true"] { background: rgba(124, 92, 255, .85); }
.wks-root .wks-insp-headline { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; }
.wks-root .wks-insp-names { flex: 1 1 auto; min-width: 0; }
.wks-root .wks-insp-headline .wks-like { margin-top: 2px; }
.wks-root .wks-insp-title {
  margin: 0 0 3px; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.22; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wks-root .wks-insp-art-voice + .wks-insp-title, .wks-root .wks-insp-art-producer + .wks-insp-title { margin-top: 14px; }
.wks-root .wks-insp-producer { color: var(--pt-text-secondary); font-size: 13.5px; min-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wks-root .wks-insp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.wks-root .wks-insp-wave { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.wks-root .wks-wave-lg { height: 40px; }
/* Not played yet: the note and the duration share one line. */
.wks-root .wks-insp-wave:has(.wks-wave:not(.is-real)) { flex-direction: row; align-items: center; gap: 10px; }
.wks-root .wks-insp-wave:has(.wks-wave:not(.is-real)) .wks-wave-lg { flex: 1 1 auto; height: 22px; }
.wks-root .wks-wave-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 8px; background: rgba(16, 13, 34, .95); color: var(--pt-text-muted); font-size: 11.5px; white-space: nowrap; }
.wks-root .wks-insp-time { align-self: flex-end; color: var(--pt-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.wks-root .wks-insp-cta .wks-cta, .wks-root .wks-cta {
  width: 100%; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(196, 181, 253, .6); border-radius: 13px; background: var(--pt-cta-gradient);
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(124, 92, 255, .45);
}
.wks-root .wks-cta svg { width: 20px; height: 20px; }
.wks-root .wks-insp-cta .wks-cta::after { content: "Use in Create"; }
.wks-root .wks-insp-cta button.wks-cta[data-wks-act]::after { content: none; }
.wks-root .wks-insp-actions { display: flex; gap: 6px; margin: 10px 0 4px; }
.wks-root .wks-insp-actions .wks-sec-btn { min-width: 0; padding: 0 6px; gap: 5px; font-size: 12.5px; }
.wks-root .wks-insp-actions:not(.wks-insp-actions-col) .wks-sec-btn { flex: 1 1 0; }
.wks-root .wks-insp-actions .wks-sec-btn span { overflow: hidden; text-overflow: ellipsis; }
.wks-root .wks-insp-actions .wks-icon-btn { height: 40px; width: 36px; }
/* A narrow inspector keeps the full labels and drops their icons. */
@container wks-insp (max-width: 340px) {
  .wks-root .wks-insp-actions .wks-sec-btn svg { display: none; }
}
.wks-root .wks-insp-actions-col { flex-direction: column; }
.wks-root .wks-sec-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px;
  border: 1px solid var(--pt-border-strong); border-radius: 11px; background: rgba(255, 255, 255, .035);
  color: var(--pt-text-primary); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.wks-root .wks-sec-btn svg { width: 16px; height: 16px; }
.wks-root .wks-sec-btn:hover:not(:disabled) { border-color: rgba(196, 181, 253, .45); background: rgba(124, 92, 255, .12); }
.wks-root .wks-sec-btn:disabled { opacity: .45; cursor: not-allowed; }
.wks-root .wks-sec-link a { color: #ddd6fe; text-decoration: none; }
.wks-root .wks-insp-h { margin: 16px 0 8px; color: var(--pt-text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wks-root .wks-insp-h-row { display: flex; align-items: center; justify-content: space-between; }
.wks-root .wks-insp-h-row h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.wks-root .wks-dets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; }
.wks-root .wks-det { display: flex; justify-content: space-between; gap: 8px; min-width: 0; font-size: 12.5px; }
.wks-root .wks-det dt { color: var(--pt-text-muted); }
.wks-root .wks-det dd { margin: 0; color: var(--pt-text-primary); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wks-root .wks-det-wide { grid-column: 1 / -1; }
.wks-root .wks-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wks-root .wks-tag {
  height: 26px; padding: 0 10px; border: 1px solid rgba(167, 139, 250, .32); border-radius: 13px; background: rgba(124, 92, 255, .1);
  color: #ddd6fe; font-size: 12px; cursor: pointer;
}
.wks-root .wks-insp-note { margin: 6px 0; color: var(--pt-text-muted); font-size: 12.5px; line-height: 1.45; }
.wks-root .wks-more-list { display: flex; flex-direction: column; gap: 8px; }
.wks-root .wks-more-row {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border: 1px solid var(--pt-border-subtle);
  border-radius: 13px; background: rgba(255, 255, 255, .025); cursor: pointer;
}
.wks-root .wks-more-row:hover { border-color: rgba(167, 139, 250, .3); }
.wks-root .wks-more-art { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #2a1f5c, #10204a); }
.wks-root .wks-more-art .wks-art-play { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.wks-root .wks-more-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wks-root .wks-more-text .wks-row-name { font-size: 13px; }
.wks-root .wks-more-bpm { flex: 0 0 auto; color: var(--pt-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.wks-root .wks-more-load { width: 100%; margin-top: 4px; }

/* ── Popover menu ──────────────────────────────────────────────────────── */
.wks-root .wks-menu {
  position: absolute; z-index: 70; min-width: 220px; max-width: 300px; max-height: 360px; overflow: auto; padding: 6px;
  border: 1px solid rgba(167, 139, 250, .3); border-radius: 14px; background: #16132b; box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.wks-root .wks-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--pt-text-primary); font-size: 13px; text-align: left; cursor: pointer;
}
.wks-root .wks-menu button span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wks-root .wks-menu button em { flex: 0 0 auto; color: var(--pt-text-muted); font-style: normal; font-size: 11.5px; }
.wks-root .wks-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--pt-text-secondary); }
.wks-root .wks-menu button:hover:not(:disabled), .wks-root .wks-menu button:focus-visible { background: rgba(124, 92, 255, .18); box-shadow: none; }
.wks-root .wks-menu button:disabled { opacity: .5; cursor: default; }
.wks-root .wks-menu-note { margin: 6px 10px; color: var(--pt-text-muted); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .wks-root *, .wks-root *::before, .wks-root *::after { transition: none !important; }
}