/* Submenu + AI badge styling for the right-click "Add nested track" flyout */

.nest--drop {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.child-row__dropline {
  height: 2px;
  margin-left: 56px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  border-radius: 1px;
}
.child-row[draggable="true"] { cursor: grab; }
.child-row[draggable="true"]:active { cursor: grabbing; }
.nest[draggable="true"] > .row { cursor: default; }

/* Stem drop zone — appears at the bottom of an expanded parent's children */
.stem-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 56px;
  margin-right: 18px;
  margin-top: 6px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--text-mute);
  font-size: 12px;
  background: transparent;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.stem-drop__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-2) 86%, transparent);
  color: var(--text-mute);
  cursor: pointer;
}
.stem-drop__close:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.stem-drop--empty { margin-top: 0; }
.stem-drop:hover {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--line-strong));
  color: var(--text-dim);
}
.stem-drop--over {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  color: var(--text);
}
.stem-drop__icon {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  color: var(--text-mute);
  background: var(--bg-3);
}
.stem-drop--over .stem-drop__icon {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 18%, transparent);
}
.stem-drop__text { letter-spacing: 0.01em; }
.stem-drop__type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--line-strong));
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.stem-drop__or {
  color: var(--text-mute);
  font-size: 11px;
  opacity: 0.7;
}
.stem-drop__btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.stem-drop__btn:hover {
  color: var(--text);
  border-color: color-mix(in oklch, var(--accent) 60%, var(--line-strong));
}
.stem-drop__btn--folder {
  background: transparent;
}

.ctxmenu--submenu {
  width: 240px;
}
.ctxmenu--add-nested {
  max-height: min(520px, calc(100vh - 24px));
  overflow-y: auto;
}

.ctxmenu__group-label {
  padding: 8px 10px 4px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.ctxmenu__item--ai {
  color: oklch(0.88 0.05 280);
}
.ctxmenu__item--ai .icon {
  color: oklch(0.78 0.15 290);
}
.ctxmenu__item--ai:hover {
  background: oklch(0.4 0.16 290 / 0.22);
}

.ctxmenu__ai-badge {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  color: oklch(0.95 0.04 290);
  background: linear-gradient(
    135deg,
    oklch(0.55 0.2 290),
    oklch(0.55 0.2 200)
  );
  box-shadow: 0 0 8px oklch(0.55 0.2 290 / 0.4);
}


/* AI submenu — disabled + hint pill */
.ctxmenu__item--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ctxmenu__item--disabled:hover { background: transparent; }
.ctxmenu__hint {
  margin-left: auto;
  font-size: 9px;
  color: oklch(0.7 0.05 280 / 0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Generating child row */
.child-row--generating {
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(0.5 0.18 290 / 0.10) 30%,
    oklch(0.5 0.18 290 / 0.16) 50%,
    oklch(0.5 0.18 290 / 0.10) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: rowShimmer 2.4s ease-in-out infinite;
}
@keyframes rowShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
.child-row--generating .row__title--child {
  color: oklch(0.85 0.10 290);
}
.child-row__gen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 10px;
  color: oklch(0.78 0.12 290);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.child-row__gen-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: genPulse 1.2s ease-in-out infinite;
}
.child-row__gen-dot:nth-child(2) { animation-delay: 0.18s; }
.child-row__gen-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes genPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1.2); }
}


/* primary-version pill */
.row__primary-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 4px;
  margin-left: 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: oklch(0.34 0.10 280 / 0.55);
  color: oklch(0.86 0.12 280);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__primary-pill svg { width: 9px; height: 9px; flex-shrink: 0; }
:root[data-theme="light"] .row__primary-pill {
  background: oklch(0.94 0.06 280);
  color: oklch(0.42 0.12 280);
}
.row__primary-pill--child {
  font-size: 9px;
  padding: 1px 5px 1px 3px;
  background: oklch(0.34 0.10 280 / 0.40);
}